enhancement: Add confirmation dialog for cloud cluster creation and fix access tokens header (#1405)

Author: maciaszczykm

www/src/components/create-cluster/steps/ConfigureCloudInstanceStep.tsx

@@ -23,6 +23,7 @@ import {
   CreateClusterStepKey,
   useCreateClusterContext,
 } from '../CreateClusterWizard'
+import { Confirm } from '../../utils/Confirm'
 
 const nameRegex = /^[a-z][a-z0-9-][a-z0-9]{4,9}$/
 
@@ -35,6 +36,7 @@ export function ConfigureCloudInstanceStep() {
   const [size, setSize] = useState<ConsoleSize>(ConsoleSize.Small)
   const [cloud, setCloud] = useState<CloudProvider>(CloudProvider.Aws)
   const [region, setRegion] = useState<string>(regions[0])
+  const [confirm, setConfirm] = useState(false)
   const isNameValid = nameRegex.test(name)
 
   const canSubmit = !!(
@@ -65,9 +67,8 @@ export function ConfigureCloudInstanceStep() {
     setContinueBtn(
       <Button
         key="create"
-        loading={loading}
         disabled={!canSubmit}
-        onClick={() => mutation()}
+        onClick={() => setConfirm(true)}
       >
         Continue
       </Button>
@@ -79,82 +80,94 @@ export function ConfigureCloudInstanceStep() {
   }, [canSubmit, loading, mutation, setContinueBtn])
 
   return (
-    <Flex
-      flexDirection="column"
-      gap="medium"
-    >
-      {error && <GqlError error={error} />}
-      <Callout
-        css={{ marginBottom: theme.spacing.medium }}
-        title="Your Console may take a few minutes to deploy."
-      >
-        After completing this step it may take a few minutes for your Console to
-        deploy. It will run in the background as you proceed.
-      </Callout>
-      <FormFieldSC
-        label="Cluster name"
-        hint={
-          <FormFieldCaptionSC $name={name}>
-            Name must be between 6 and 11 characters, lowercase, alphanumeric,
-            and begin with a letter.
-          </FormFieldCaptionSC>
-        }
+    <>
+      <Flex
+        flexDirection="column"
+        gap="medium"
       >
-        <Input
-          placeholder="Enter cluster name"
-          borderColor={
-            name === '' || isNameValid
-              ? undefined
-              : theme.colors['border-danger']
-          }
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-      </FormFieldSC>
-      <FormFieldSC label="Cluster size">
-        <Select
-          selectedKey={size}
-          onSelectionChange={(size) => setSize(size as ConsoleSize)}
+        {error && <GqlError error={error} />}
+        <Callout
+          css={{ marginBottom: theme.spacing.medium }}
+          title="Your Console may take a few minutes to deploy."
         >
-          {Object.values(ConsoleSize)
-            .reverse()
-            .map((value) => (
-              <ListBoxItem
-                key={value}
-                label={firstLetterUppercase(value)}
-              />
-            ))}
-        </Select>
-      </FormFieldSC>
-      <FormFieldSC label="Cloud">
-        <Select
-          selectedKey={cloud}
-          onSelectionChange={(cloud) => setCloud(cloud as CloudProvider)}
+          After completing this step it may take a few minutes for your Console
+          to deploy. It will run in the background as you proceed.
+        </Callout>
+        <FormFieldSC
+          label="Cluster name"
+          hint={
+            <FormFieldCaptionSC $name={name}>
+              Name must be between 6 and 11 characters, lowercase, alphanumeric,
+              and begin with a letter.
+            </FormFieldCaptionSC>
+          }
         >
-          {Object.values(CloudProvider).map((value) => (
-            <ListBoxItem
-              key={value}
-              label={value}
-            />
-          ))}
-        </Select>
-      </FormFieldSC>
-      {cloud === CloudProvider.Aws && (
-        <FormFieldSC label="Region">
+          <Input
+            placeholder="Enter cluster name"
+            borderColor={
+              name === '' || isNameValid
+                ? undefined
+                : theme.colors['border-danger']
+            }
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </FormFieldSC>
+        <FormFieldSC label="Cluster size">
           <Select
-            selectedKey={region}
-            onSelectionChange={(region) => setRegion(region as string)}
+            selectedKey={size}
+            onSelectionChange={(size) => setSize(size as ConsoleSize)}
           >
-            {regions.map((region) => (
+            {Object.values(ConsoleSize)
+              .reverse()
+              .map((value) => (
+                <ListBoxItem
+                  key={value}
+                  label={firstLetterUppercase(value)}
+                />
+              ))}
+          </Select>
+        </FormFieldSC>
+        <FormFieldSC label="Cloud">
+          <Select
+            selectedKey={cloud}
+            onSelectionChange={(cloud) => setCloud(cloud as CloudProvider)}
+          >
+            {Object.values(CloudProvider).map((value) => (
               <ListBoxItem
-                key={region}
-                label={region}
+                key={value}
+                label={value}
               />
             ))}
           </Select>
         </FormFieldSC>
-      )}
-    </Flex>
+        {cloud === CloudProvider.Aws && (
+          <FormFieldSC label="Region">
+            <Select
+              selectedKey={region}
+              onSelectionChange={(region) => setRegion(region as string)}
+            >
+              {regions.map((region) => (
+                <ListBoxItem
+                  key={region}
+                  label={region}
+                />
+              ))}
+            </Select>
+          </FormFieldSC>
+        )}
+      </Flex>
+      <Confirm
+        open={confirm}
+        error={error}
+        title={`Create cluster`}
+        text={`Would you like to proceed with cluster creation?`}
+        submit={() => mutation()}
+        close={() => setConfirm(false)}
+        label="Create cluster"
+        loading={loading}
+      />
+    </>
   )
 }
 

www/src/components/profile/AccessTokens.tsx

@@ -1,12 +1,13 @@
 import { useMutation, useQuery } from '@apollo/client'
 import { Box } from 'grommet'
-import { Button, Div, Flex, Span } from 'honorable'
+import { Button, Div, Span } from 'honorable'
 import moment from 'moment'
 import { useState } from 'react'
 import lookup from 'country-code-lookup'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import {
   CopyIcon,
+  Flex,
   EmptyState,
   GraphIcon,
   IconFrame,
@@ -280,14 +281,12 @@ export function AccessTokens() {
       height="100%"
       overflow="hidden"
     >
-      <PageTitle
-        heading="Access tokens"
-        justifyContent="flex-start"
-      >
+      <PageTitle heading="Access tokens">
         <Flex
           direction="row"
           align="center"
           overflow="auto"
+          flexGrow={1}
         >
           <Tooltip
             width="315px"