feat: kbot password (#236)

* feat: kbot password

* fix: unit test

components/button/button.styled.ts

@@ -62,3 +62,14 @@ export const InfoButton = styled(Button)`
   box-shadow: none !important;
   color: ${({ theme }) => theme.colors.saltboxBlue};
 `;
+
+export const TextButton = styled(Button)`
+  background-color: inherit;
+  box-shadow: none !important;
+  color: ${({ theme }) => theme.colors.saltboxBlue} !important;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary} !important;
+    background-color: ${({ theme }) => theme.colors.magnolia};
+  }
+`;

components/button/index.tsx

@@ -7,17 +7,19 @@ import {
   SecondaryButton,
   ErrorButton,
   InfoButton,
+  TextButton,
 } from './button.styled';
 
 const BUTTONS_MAP = {
   ['primary']: PrimaryButton,
   ['secondary']: SecondaryButton,
   ['error']: ErrorButton,
   ['info']: InfoButton,
+  ['text']: TextButton,
 };
 
 export interface IButtonProps extends ButtonProps {
-  color: 'primary' | 'secondary' | 'error' | 'info';
+  color: 'primary' | 'secondary' | 'error' | 'info' | 'text';
 }
 
 const Button: FunctionComponent<IButtonProps> = ({ variant, color, disabled, ...rest }) => {

components/clusterReady/clusterReady.stories.tsx

@@ -14,4 +14,5 @@ const DefaultTemplate: ComponentStory<typeof ClusterReady> = (args) => <ClusterR
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   onOpenConsole: noop,
+  kbotPassword: 'feedkray',
 };

components/clusterReady/clusterReady.styled.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import NextLink from 'next/link';
 
 import Column from '../column';
+import Row from '../row';
 
 export const Container = styled(Column)`
   align-items: center;
@@ -24,3 +25,9 @@ export const Title = styled.div`
     font-size: 16px;
   }
 `;
+
+export const PasswordContainer = styled(Row)`
+  align-items: center;
+  gap: 8px;
+  margin: 18px 0 32px 0;
+`;

components/clusterReady/index.tsx

@@ -1,39 +1,64 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import Image from 'next/image';
+import CopyToClipboard from 'react-copy-to-clipboard';
 
 import Typography from '../typography';
-import Button from '../../components/button';
+import Button from '../button';
+import Password from '../password';
 
-import { Container, Link, Title } from './clusterReady.styled';
+import { Container, Link, PasswordContainer, Title } from './clusterReady.styled';
 
 export interface ClusterRunningMessageProps {
   clusterName?: string;
   domainName?: string;
+  kbotPassword?: string;
   onOpenConsole: () => void;
 }
 
 const ClusterReady: FunctionComponent<ClusterRunningMessageProps> = ({
   clusterName,
   domainName,
+  kbotPassword,
   onOpenConsole,
-}) => (
-  <Container>
-    <Image alt="box" src="/static/box.svg" width={170} height={160} />
-    <Title>
-      <Typography variant="body1">
-        Cluster <strong>{clusterName || '<cluster identifier>'}</strong> is now up and running.
+}) => {
+  const [copyLabel, setCopyLabel] = useState<string>('Copy');
+
+  const handleOnCopy = () => {
+    setCopyLabel('Copied!');
+
+    setTimeout(() => setCopyLabel('Copy'), 3000);
+  };
+
+  return (
+    <Container>
+      <Image alt="box" src="/static/box.svg" width={170} height={160} />
+      <Title>
+        <Typography variant="body1">
+          Cluster <strong>{clusterName || '<cluster identifier>'}</strong> is now up and running.
+        </Typography>
+      </Title>
+      <Typography variant="body2">
+        Copy this k-bot password and log into the kubefirst console UI.
       </Typography>
-    </Title>
-    <Button variant="contained" color="primary">
-      <Link
-        href={`https://kubefirst.${domainName}/services`}
-        target="_blank"
-        onClick={onOpenConsole}
-      >
-        Open kubefirst console
-      </Link>
-    </Button>
-  </Container>
-);
+      <PasswordContainer>
+        <Password value={kbotPassword} sx={{ width: '398px' }} />
+        <CopyToClipboard text={kbotPassword as string} onCopy={handleOnCopy}>
+          <Button color="text" variant="text">
+            {copyLabel}
+          </Button>
+        </CopyToClipboard>
+      </PasswordContainer>
+      <Button variant="contained" color="primary">
+        <Link
+          href={`https://kubefirst.${domainName}/services`}
+          target="_blank"
+          onClick={onOpenConsole}
+        >
+          Open kubefirst console
+        </Link>
+      </Button>
+    </Container>
+  );
+};
 
 export default ClusterReady;

components/password/index.tsx

@@ -8,7 +8,7 @@ import TextField from '../textField';
 import { InputAdornmentContainer } from './password.styled';
 
 export interface PasswordProps extends InputProps {
-  label: string;
+  label?: string;
   helperText?: string;
 }
 

components/textField/index.tsx

@@ -7,7 +7,7 @@ import Typography from '../typography';
 import { Container, FormHelperText, InputAdornmentError, Required } from './textField.styled';
 
 export interface TextFieldProps extends InputProps {
-  label: string;
+  label?: string;
   helperText?: string;
 }
 
@@ -48,11 +48,13 @@ const TextField: FunctionComponent<TextFieldProps> = ({
 
   return (
     <Container isDisabled={disabled}>
-      <InputLabel disabled={disabled}>
-        <Typography variant="labelLarge" sx={{ display: 'flex', gap: '4px' }}>
-          {label} {required && <Required>*</Required>}
-        </Typography>
-      </InputLabel>
+      {label && (
+        <InputLabel disabled={disabled}>
+          <Typography variant="labelLarge" sx={{ display: 'flex', gap: '4px' }}>
+            {label} {required && <Required>*</Required>}
+          </Typography>
+        </InputLabel>
+      )}
       <Input
         {...props}
         autoComplete="off"

containers/clusterForms/index.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+
+import TerminalLogs from '../terminalLogs';
+import { FormStep } from '../../constants/installation';
+
+import AuthForm from './shared/authForm';
+import ClusterRunning from './shared/clusterRunning';
+import SetupForm from './shared/setupForm';
+
+const FORM_FLOW_MAP = {
+  [FormStep.AUTHENTICATION]: AuthForm,
+  [FormStep.SETUP]: SetupForm,
+  [FormStep.PROVISIONING]: TerminalLogs,
+  [FormStep.READY]: ClusterRunning,
+};
+
+export const FormFlow: FunctionComponent<{ currentStep: FormStep }> = ({ currentStep }) => {
+  const ActiveFormStep = FORM_FLOW_MAP[currentStep];
+
+  if (!ActiveFormStep) {
+    return null;
+  }
+
+  return <ActiveFormStep />;
+};

containers/clusterForms/shared/clusterRunning/index.tsx

@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { useRouter } from 'next/router';
 
+import ClusterReady from '../../../../components/clusterReady';
 import { getClusters } from '../../../../redux/thunks/api.thunk';
 import { useAppDispatch, useAppSelector } from '../../../../redux/store';
-import ClusterReady from '../../../../components/clusterReady';
 
 export interface ClusterRunningProps {
   clusterName?: string;
@@ -12,7 +12,10 @@ export interface ClusterRunningProps {
 
 const ClusterRunning: FunctionComponent<ClusterRunningProps> = (props) => {
   const dispatch = useAppDispatch();
-  const installValues = useAppSelector(({ installation }) => installation.values);
+  const { installValues, selectedCluster } = useAppSelector(({ installation, cluster }) => ({
+    installValues: installation.values,
+    selectedCluster: cluster.selectedCluster,
+  }));
   const { push } = useRouter();
 
   const onOpenConsole = () => {
@@ -25,6 +28,7 @@ const ClusterRunning: FunctionComponent<ClusterRunningProps> = (props) => {
       onOpenConsole={onOpenConsole}
       clusterName={installValues?.clusterName}
       domainName={installValues?.domainName}
+      kbotPassword={selectedCluster?.vaultAuth?.kbotPassword}
       {...props}
     />
   );