From e9d71369d2d77025d6545673be6fcf2aaf4f1867 Mon Sep 17 00:00:00 2001 From: dzsak Date: Mon, 6 May 2024 14:10:13 +0200 Subject: [PATCH] Github setup card; Repo wizard --- web/src/app.css | 4 + web/src/views/repo/previewView.jsx | 2 +- web/src/views/repositories/repositories.jsx | 85 +++---- .../repositoryWizard/repositoryWizard.jsx | 209 ++++++++++-------- 4 files changed, 169 insertions(+), 131 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index 8a1ba7102..b1d23def3 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -30,6 +30,10 @@ @apply bg-blue-500 dark:bg-blue-800 hover:bg-blue-400 dark:hover:bg-blue-900 focus:outline-none py-2 inline-flex items-center text-base font-normal font-sans rounded-md text-white dark:text-neutral-100 transition ease-in-out duration-150 text-nowrap } +.secondaryButton { + @apply border-blue-500 dark:border-blue-700 text-blue-500 dark:text-blue-700 border hover:border-blue-400 dark:hover:border-blue-800 hover:text-blue-400 dark:hover:text-blue-800 inline-flex items-center px-6 py-2 text-base leading-6 font-medium rounded-md transition ease-in-out duration-150 +} + .primaryButtonDisabled { @apply bg-neutral-600 dark:bg-neutral-400 py-2 inline-flex items-center text-base font-normal font-sans rounded-md text-white dark:text-neutral-100 transition ease-in-out duration-150 text-nowrap cursor-default } diff --git a/web/src/views/repo/previewView.jsx b/web/src/views/repo/previewView.jsx index 9ae8d272c..fe3d776d0 100644 --- a/web/src/views/repo/previewView.jsx +++ b/web/src/views/repo/previewView.jsx @@ -102,7 +102,7 @@ export function PreviewView(props) {

Previews

- + + ) } export const SkeletonLoader = () => { return ( - <> +
  • @@ -214,7 +215,7 @@ export const SkeletonLoader = () => {
    • - +
    ) } diff --git a/web/src/views/repositoryWizard/repositoryWizard.jsx b/web/src/views/repositoryWizard/repositoryWizard.jsx index 6f91acc40..14e6c6ee0 100644 --- a/web/src/views/repositoryWizard/repositoryWizard.jsx +++ b/web/src/views/repositoryWizard/repositoryWizard.jsx @@ -4,19 +4,37 @@ import { ACTION_TYPE_GIT_REPOS } from '../../redux/redux'; import { Loading } from '../../components/deployStatus/deployStatus'; export default function RepositoryWizard(props) { - const { gimletClient, store } = props; + return ( +
    +
    +
    +
    +

    Import Git Repository

    +
    + To deploy an application, import its Git Repository first. +
    +
    +
    +
    +
    +
    + +
    +
    + ) +} + +export function ImportWizard(props) { + const { gimletClient, store, redirect } = props; let reduxState = store.getState(); - const [importedRepos, setImportedRepos] = useState(reduxState.gitRepos) const [application, setApplication] = useState(reduxState.application) const [user, setUser] = useState(reduxState.user) const [repos, setRepos] = useState() const [searchTerm, setSearchTerm] = useState("") - const [importing, setImporting] = useState(false) store.subscribe(() => { let reduxState = store.getState(); - setImportedRepos(reduxState.gitRepos) setApplication(reduxState.application) setUser(reduxState.user) }); @@ -35,6 +53,89 @@ export default function RepositoryWizard(props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchTerm]) + return ( +
    +
    + +
    +
    +
    + + + +
    + setSearchTerm(e.target.value)} + type="text" + name="filter" + id="filter" + className="filter" + placeholder="Search..." + /> +
    +
    +
    + {repos ? + <> +
    + {repos.length === 0 && } +
    + { + repos.slice(0, 5).map((repo, idx) => { + return ( +
  • +
    +
    +

    {repo}

    +
    +
    + +
    • ) + }) + } +
    +
    +
    + {repos.length !== 0 && +
    + Missing a Git repository? Adjust Github App Permission +
    + } + {redirect && + + } +
    + + : +
    + +
    + } +
    + ) +} + +function ImportButton(props) { + const { repo } = props; + const { gimletClient, store } = props; + let reduxState = store.getState(); + + const [importedRepos, setImportedRepos] = useState(reduxState.gitRepos) + const [importing, setImporting] = useState(false) + + store.subscribe(() => { + let reduxState = store.getState(); + setImportedRepos(reduxState.gitRepos) + }); + const importRepo = (name) => { setImporting(true) gimletClient.importRepo(name) @@ -49,91 +150,23 @@ export default function RepositoryWizard(props) { }); } + const imported = importedRepos.includes(repo); + return ( -
    -
    -
    -
    -

    Import Git Repository

    -
    - To deploy an application, import its Git Repository first. -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - - - -
    - setSearchTerm(e.target.value)} - type="text" - name="filter" - id="filter" - className="filter" - placeholder="Search..." - /> -
    -
    -
    - {repos ? - <> -
    - {repos.length === 0 && } -
    - { - repos.slice(0, 5).map((repo, idx) => { - const imported = importedRepos.includes(repo); - return ( -
  • -
    -
    -

    {repo}

    -
    -
    -
    - {imported ? - - : - - } -
    -
    • ) - }) - } -
    -
    - {repos.length !== 0 && -
    - Missing a Git repository? Adjust Github App Permission -
    - } - - : -
    - -
    - } -
    -
    +
    + {imported ? + + : + + }
    ) }