Design onboarding (#620)

pluralsh · Oct 18, 2022 · ca871d1 · ca871d1
1 parent b34f2c3
commit ca871d1
Show file tree

Hide file tree

Showing 10 changed files with 503 additions and 516 deletions.
diff --git 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: <GithubLogo />,
@@ -23,55 +24,52 @@ const providerToDisplayName = {
 
 function CreateRepositoryCard({ data, onPrevious = () => {} }) {
   return (
-    <>
-      <OnboardingCard title="Create a repository">
-        <P marginBottom="medium">
-          We use GitOps to manage your application's state. Use one of the following providers to get started.
-        </P>
-        <Flex mx={-1}>
-          {data?.scmAuthorization?.map(({ provider, url }) => (
-            <OnboardingCardButton
-              key={provider}
-              onClick={() => {
+    <OnboardingCard title="Create a repository">
+      <P marginBottom="medium">
+        We use GitOps to manage your application's state. Use one of the following providers to get started.
+      </P>
+      <Flex mx={-1}>
+        {data?.scmAuthorization?.map(({ provider, url }) => (
+          <OnboardingCardButton
+            key={provider}
+            onClick={() => {
               // START <<Remove this after dev>>
-                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 <<Remove this after dev>>
-                window.location = url
-              }}
+              window.location = url
+            }}
+          >
+            <Div
+              marginHorizontal="auto"
+              maxWidth={40}
+              maxHeight={40}
             >
-              <Div
-                marginHorizontal="auto"
-                maxWidth={40}
-                maxHeight={40}
-              >
-                {providerToLogo[provider.toLowerCase()] || null}
-              </Div>
-              <Text
-                body1
-                bold
-                marginTop="medium"
-              >
-                Create a {providerToDisplayName[provider.toLowerCase()] || null} repository
-              </Text>
-            </OnboardingCardButton>
-          ))}
-        </Flex>
-
-      </OnboardingCard>
-      <Flex marginTop="large">
+              {providerToLogo[provider.toLowerCase()] || null}
+            </Div>
+            <Text
+              body1
+              bold
+              marginTop="medium"
+            >
+              Create a {providerToDisplayName[provider.toLowerCase()] || null} repository
+            </Text>
+          </OnboardingCardButton>
+        ))}
+      </Flex>
+      <OnboardingNavSection>
         <Button
           secondary
           onClick={onPrevious}
         >
           Back
         </Button>
-      </Flex>
-    </>
+      </OnboardingNavSection>
+    </OnboardingCard>
   )
 }
 

diff --git 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 (
-    <Flex
+    <Div
       marginTop="large"
-      justify="space-between"
       {...props}
-    />
+    >
+      <Hr />
+      <Flex
+        justify="space-between"
+        marginTop="large"
+      >
+        {children}
+      </Flex>
+    </Div>
   )
 }
diff --git 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,47 +36,45 @@ function CliCompletion() {
     : null
 
   const stackInstallCmd = isStackComplete
-    ? (<Codeline>plural stack install {stack.name}</Codeline>)
+    ? (<Codeline>plural stack install {stack?.name}</Codeline>)
     : 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.
 
     return <Codeline key={app.id}>plural bundle install {app.name} {recipes[0].name}</Codeline>
   })
 
   return (
-    <>
-      <OnboardingCard title="Complete setup">
-        <P>Now that you've installed the Plural CLI, here are the next steps:</P>
-        <Flex
-          direction="column"
-          gap="medium"
-          marginVertical="large"
+    <OnboardingCard title="Complete setup">
+      <P>Now that you've installed the Plural CLI, here are the next steps:</P>
+      <Flex
+        direction="column"
+        gap="medium"
+        marginVertical="large"
+      >
+        <Codeline>plural init</Codeline>
+        {stackInstallCmd}
+        {appInstallCmds}
+        {consoleInstallCmd}
+        <Codeline>plural build</Codeline>
+        <Codeline>plural deploy --commit "first commit"</Codeline>
+      </Flex>
+      <P>
+        If you need help filling out the install wizard during any of these steps,
+        visit our{' '}
+        <A
+          inline
+          href="https://docs.plural.sh/getting-started/getting-started"
+          target="_blank"
+          rel="noopener noreferrer"
         >
-          <Codeline>plural init</Codeline>
-          {stackInstallCmd}
-          {appInstallCmds}
-          {consoleInstallCmd}
-          <Codeline>plural build</Codeline>
-          <Codeline>plural deploy --commit "first commit"</Codeline>
-        </Flex>
-        <P>
-          If you need help filling out the install wizard during any of these steps,
-          visit our{' '}
-          <A
-            inline
-            href="https://docs.plural.sh/getting-started/getting-started"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Quickstart Guide
-          </A>
-          {' '}for more information.
-        </P>
-      </OnboardingCard>
+          Quickstart Guide
+        </A>
+        {' '}for more information.
+      </P>
       <OnboardingNavSection>
         <Button
           secondary
@@ -92,7 +90,7 @@ function CliCompletion() {
           Continue to app
         </Button>
       </OnboardingNavSection>
-    </>
+    </OnboardingCard>
   )
 }