diff --git a/www/src/components/shell/CreateRepositoryCard.js b/www/src/components/shell/CreateRepositoryCard.js index da8b3a422..9babdfe0d 100644 --- a/www/src/components/shell/CreateRepositoryCard.js +++ b/www/src/components/shell/CreateRepositoryCard.js @@ -10,6 +10,7 @@ import { Github as GithubLogo, Gitlab as GitlabLogo } from './icons' import { DEBUG_SCM_TOKENS } from './debug-tokens' import OnboardingCard from './onboarding/OnboardingCard' import OnboardingCardButton from './onboarding/OnboardingCardButton' +import OnboardingNavSection from './onboarding/OnboardingNavSection' const providerToLogo = { github: , @@ -23,55 +24,52 @@ const providerToDisplayName = { function CreateRepositoryCard({ data, onPrevious = () => {} }) { return ( - <> - -

- We use GitOps to manage your application's state. Use one of the following providers to get started. -

- - {data?.scmAuthorization?.map(({ provider, url }) => ( - { + +

+ We use GitOps to manage your application's state. Use one of the following providers to get started. +

+ + {data?.scmAuthorization?.map(({ provider, url }) => ( + { // START <> - if (process.env.NODE_ENV !== 'production' && DEBUG_SCM_TOKENS[provider]) { - console.log('going to ', `/oauth/callback/${provider.toLowerCase()}/shell?code=abcd`) - window.location = `/oauth/callback/${provider.toLowerCase()}/shell?code=abcd` + if (process.env.NODE_ENV !== 'production' && DEBUG_SCM_TOKENS[provider]) { + console.log('going to ', `/oauth/callback/${provider.toLowerCase()}/shell?code=abcd`) + window.location = `/oauth/callback/${provider.toLowerCase()}/shell?code=abcd` - return - } + return + } // END <> - window.location = url - }} + window.location = url + }} + > +
-
- {providerToLogo[provider.toLowerCase()] || null} -
- - Create a {providerToDisplayName[provider.toLowerCase()] || null} repository - - - ))} - - - - + {providerToLogo[provider.toLowerCase()] || null} +
+ + Create a {providerToDisplayName[provider.toLowerCase()] || null} repository + + + ))} + + - - + + ) } diff --git a/www/src/components/shell/onboarding/OnboardingNavSection.js b/www/src/components/shell/onboarding/OnboardingNavSection.js index 2e3e13de7..b53b37c75 100644 --- a/www/src/components/shell/onboarding/OnboardingNavSection.js +++ b/www/src/components/shell/onboarding/OnboardingNavSection.js @@ -1,11 +1,18 @@ -import { Flex } from 'honorable' +import { Div, Flex, Hr } from 'honorable' -export default function OnboardingNavSection(props) { +export default function OnboardingNavSection({ children, ...props }: any) { return ( - + > +
+ + {children} + + ) } diff --git a/www/src/components/shell/onboarding/cli/CliCompletion.js b/www/src/components/shell/onboarding/cli/CliCompletion.js index 0e2d8d60e..de8af7530 100644 --- a/www/src/components/shell/onboarding/cli/CliCompletion.js +++ b/www/src/components/shell/onboarding/cli/CliCompletion.js @@ -19,8 +19,8 @@ function CliCompletion() { const applications = useMemo(() => retrieveApplications(), []) const applicationIds = applications.map(x => x.id) const stack = useMemo(() => retrieveStack(), []) - const stackCollection = stack.collections.find(x => x.provider === provider) - const stackApplicationIds = stackCollection?.bundles.map(x => x.recipe.repository.id) + const stackCollection = stack?.collections.find(x => x.provider === provider) + const stackApplicationIds = stackCollection?.bundles.map(x => x.recipe.repository.id) || [] const shouldInstallConsole = retrieveConsole() // If all stack applications are in the list then we can filter them out to show stack install command. @@ -36,11 +36,11 @@ function CliCompletion() { : null const stackInstallCmd = isStackComplete - ? (plural stack install {stack.name}) + ? (plural stack install {stack?.name}) : null const appInstallCmds = filteredApplications.map(app => { - const recipes = app.recipes.filter(recipe => recipe.provider.toLowerCase() === provider.toLowerCase()) + const recipes = app.recipes.filter(recipe => recipe.provider.toLowerCase() === provider?.toLowerCase()) if (recipes?.length !== 1) return // There should be only one bundle for each provider. @@ -48,35 +48,33 @@ function CliCompletion() { }) return ( - <> - -

Now that you've installed the Plural CLI, here are the next steps:

- +

Now that you've installed the Plural CLI, here are the next steps:

+ + plural init + {stackInstallCmd} + {appInstallCmds} + {consoleInstallCmd} + plural build + plural deploy --commit "first commit" + +

+ If you need help filling out the install wizard during any of these steps, + visit our{' '} + - plural init - {stackInstallCmd} - {appInstallCmds} - {consoleInstallCmd} - plural build - plural deploy --commit "first commit" - -

- If you need help filling out the install wizard during any of these steps, - visit our{' '} - - Quickstart Guide - - {' '}for more information. -

- + Quickstart Guide + + {' '}for more information. +

+ )} + {status === 'ENABLED' && ( + + )} + {!!error && (
@@ -120,28 +141,6 @@ function CloudBuild() { )} {/* Navigation */} - - {(!!error || status === 'ENABLED') && ( - - )} - {status === 'ENABLED' && ( - - )} - - ) } diff --git a/www/src/components/shell/onboarding/cloud/CloudCredentials.js b/www/src/components/shell/onboarding/cloud/CloudCredentials.js index 2ae04c17c..9e615267e 100644 --- a/www/src/components/shell/onboarding/cloud/CloudCredentials.js +++ b/www/src/components/shell/onboarding/cloud/CloudCredentials.js @@ -50,55 +50,52 @@ function CloudCredentials() { const clouds = growthbook.isOn('azure-cloud-shell') ? CLOUDS : FILTERED_CLOUDS return ( - <> - - {/* Div wrapper needed for bottom padding show up + + {/* Div wrapper needed for bottom padding show up when content overflows */} -
- + + + + + {createElement(form, { + workspace, + setWorkspace, + credentials, + setCredentials, + })} + + {open && ( + - - - - {createElement(form, { - workspace, - setWorkspace, - credentials, - setCredentials, - })} - - {open && ( - - - - )} - {exceptions && } -
- - {/* Navigation */} + + + )} + {exceptions && } +
- + ) } diff --git a/www/src/components/shell/onboarding/synopsis/Synopsis.js b/www/src/components/shell/onboarding/synopsis/Synopsis.js index a7cdeb468..c809bb162 100644 --- a/www/src/components/shell/onboarding/synopsis/Synopsis.js +++ b/www/src/components/shell/onboarding/synopsis/Synopsis.js @@ -17,137 +17,70 @@ function Synopsis() { } = useContext(CreateShellContext) return ( - <> - +

+ After ensuring you entered everything correctly, it's time to launch the cloud shell and install your first application! +

+ -

- After ensuring you entered everything correctly, it's time to launch the cloud shell and install your first application! -

- - -
-

- Repository name -

-

- {scm.name} -

-
- - -
-

- Git account -

-

- {scm.org || 'User'} -

-
- - - {!!workspace.region && ( - - - -
-

- Region -

-

- {workspace.region} -

-
- - +
+

-

-

- Credentials -

-

- •••••••• -

-
- -
+

+ {scm.name} +

+
+ + +
+

-

- Project -

-

- xxx -

-
- - )} + Git account +

+

+ {scm.org || 'User'} +

+
+ + + {!!workspace.region && ( @@ -156,7 +89,7 @@ function Synopsis() { align="center" width="50%" > - - Cluster + Region

- {workspace.cluster} + {workspace.region}

@@ -184,10 +117,10 @@ function Synopsis() { caption color="text-xlight" > - Bucket prefix + Credentials

- {workspace.bucketPrefix} + ••••••••

@@ -201,15 +134,79 @@ function Synopsis() { caption color="text-xlight" > - Subdomain + Project +

+

+ xxx +

+ + + )} + + + +
+

+ Cluster +

+

+ {workspace.cluster} +

+
+ + +
+

+ Bucket prefix

- {workspace.subdomain}.onplural.sh + {workspace.bucketPrefix}

- - {/* Navigation */} +
+

+ Subdomain +

+

+ {workspace.subdomain}.onplural.sh +

+
+