Form container fix (#416)

* give form container option for footer content to be disconnected from the padding present in the FormContent * pass along boolean value from onChange * remove container and inherant styles from LearMore comp that make it difficult to properly place the component * hoist advanced options state outside of component for control of other states further up based off this value * omit draft cluster that will kick off retrieval of clusters from api during provisioning of a new workload cluster * add back footer learn more link back to forms during provision of management cluster based off installation step * clean up remnants and revise styles accordingly for cluster forms
konstructio · Dec 13, 2023 · 1ee844e · 1ee844e
1 parent afeb442
commit 1ee844e
Show file tree

Hide file tree

Showing 18 changed files with 185 additions and 82 deletions.
diff --git a/components/controlledFields/Switch.tsx b/components/controlledFields/Switch.tsx
@@ -1,13 +1,13 @@
-import React, { ChangeEvent } from 'react';
+import React from 'react';
 import FormGroup from '@mui/material/FormGroup';
 import { Control, Controller, UseControllerProps, FieldValues } from 'react-hook-form';
 
 import Switch from '../switch';
 
-export interface ControlledTextFieldProps<T extends FieldValues> extends UseControllerProps<T> {
+export interface ControlledSwitchProps<T extends FieldValues> extends UseControllerProps<T> {
   control: Control<T>;
   required?: boolean;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (checked: boolean) => void;
   rules: {
     required: boolean;
     pattern?: RegExp;
@@ -19,7 +19,7 @@ function ControlledSwitch<T extends FieldValues>({
   onChange,
   required,
   ...props
-}: ControlledTextFieldProps<T>) {
+}: ControlledSwitchProps<T>) {
   return (
     <Controller
       {...props}

diff --git a/components/formContainer/formContainer.stories.tsx b/components/formContainer/formContainer.stories.tsx
@@ -1,7 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import Row from '../row';
+import LearnMore from '../learnMore';
 
 import FormContainer from '.';
 
+import { LIGHT_GREY } from '@/constants/colors';
+
 const meta: Meta<typeof FormContainer> = {
   component: FormContainer,
 };
@@ -13,3 +19,19 @@ export const DefaultTemplate: StoryObj<typeof FormContainer> = {
     style: { width: '90%', margin: '50px auto' },
   },
 };
+
+export const WithFooterContent: StoryObj<typeof FormContainer> = {
+  args: {
+    style: { width: '90%', margin: '50px auto' },
+    footerContent: (
+      <Row
+        style={{
+          borderTop: `1px solid ${LIGHT_GREY}`,
+          padding: 20,
+        }}
+      >
+        <LearnMore href="" linkTitle="configuring your cluster" description="Learn more about" />
+      </Row>
+    ),
+  },
+};
diff --git a/components/formContainer/formContainer.styled.tsx b/components/formContainer/formContainer.styled.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import Column from '../column';
+
+export const Container = styled(Column)`
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: 8px;
+  box-shadow: 0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1);
+`;
+
+export const FormContent = styled(Column)`
+  padding: 24px;
+`;
diff --git a/components/formContainer/index.tsx b/components/formContainer/index.tsx
@@ -1,14 +1,22 @@
 'use client';
+import React, { ComponentPropsWithoutRef, FunctionComponent, ReactNode } from 'react';
 import styled from 'styled-components';
-import Box from '@mui/material/Box';
-
-export default styled(Box)`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: fit-content;
-  padding: 30px 20px;
-  background-color: ${({ theme }) => theme.colors.white};
-  border-radius: 8px;
-  box-shadow: 0px 1px 1px rgba(100, 116, 139, 0.06), 0px 1px 2px rgba(100, 116, 139, 0.1);
-`;
+
+import { Container, FormContent } from './formContainer.styled';
+
+interface FormContainerProps extends ComponentPropsWithoutRef<'div'> {
+  footerContent?: ReactNode;
+}
+
+const FormContainer: FunctionComponent<FormContainerProps> = ({
+  children,
+  footerContent,
+  ...rest
+}) => (
+  <Container {...rest}>
+    <FormContent>{children}</FormContent>
+    {footerContent}
+  </Container>
+);
+
+export default styled(FormContainer)<FormContainerProps>``;
diff --git a/components/learnMore/index.tsx b/components/learnMore/index.tsx
@@ -1,26 +1,26 @@
-import React, { ComponentPropsWithoutRef, FunctionComponent } from 'react';
-import Divider from '@mui/material/Divider';
+import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
 import NextLink from '../../components/nextLink';
 import { InstallationType } from '../../types/redux';
+import { ITypographyProps, Variant } from '../typography';
 
 import { Text } from './learnMore.styled';
 
-export interface LearnMoreProps extends ComponentPropsWithoutRef<'div'> {
+export interface LearnMoreProps extends Omit<ITypographyProps, 'variant' | 'children'> {
   description: string;
   href: string;
   linkTitle: string;
   installType?: InstallationType;
-  withoutDivider?: boolean;
+  variant?: Variant;
 }
 
 const LearnMore: FunctionComponent<LearnMoreProps> = ({
   description,
   href,
   installType,
   linkTitle,
-  withoutDivider,
+  variant = 'labelLarge',
   ...rest
 }) => {
   const docsDomainLink = `https://docs.kubefirst.io/${
@@ -30,21 +30,17 @@ const LearnMore: FunctionComponent<LearnMoreProps> = ({
   }`;
 
   return (
-    <div {...rest}>
-      {!withoutDivider && <Divider sx={{ m: '-20px', p: '8px 0' }} />}
-      <Text variant="labelLarge">
-        {description}{' '}
-        <NextLink
-          href={
-            href ||
-            `${docsDomainLink}/explore/gitops#using-your-own-gitops-template-repository-fork`
-          }
-          target="_blank"
-        >
-          {linkTitle}
-        </NextLink>
-      </Text>
-    </div>
+    <Text variant={variant} {...rest}>
+      {description}{' '}
+      <NextLink
+        href={
+          href || `${docsDomainLink}/explore/gitops#using-your-own-gitops-template-repository-fork`
+        }
+        target="_blank"
+      >
+        {linkTitle}
+      </NextLink>
+    </Text>
   );
 };
 

diff --git a/components/learnMore/learnMore.stories.tsx b/components/learnMore/learnMore.stories.tsx
@@ -14,9 +14,8 @@ export default meta;
 export const Default: StoryObj<typeof LearnMore> = {
   args: {
     description: 'Learn more about',
-    href: '',
+    href: '#',
     linkTitle: 'configuring your cluster',
     installType: InstallationType.AWS,
-    withoutDivider: true,
   },
 };
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
@@ -4,8 +4,17 @@ import { styled } from '@mui/material/styles';
 
 import { PRIMARY } from '../../constants/colors';
 
-const CustomSwitch = styled((props: Omit<SwitchProps, 'key'>) => (
-  <SwitchMui focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+interface CustomSwitchProps extends Omit<SwitchProps, 'key' | 'onChange'> {
+  onChange: (checked: boolean) => void;
+}
+
+const CustomSwitch = styled(({ onChange, ...rest }: CustomSwitchProps) => (
+  <SwitchMui
+    focusVisibleClassName=".Mui-focusVisible"
+    disableRipple
+    {...rest}
+    onChange={(e) => onChange(e.target.checked)}
+  />
 ))(({ theme }) => ({
   'width': 44,
   'height': 22,
@@ -52,7 +61,7 @@ const CustomSwitch = styled((props: Omit<SwitchProps, 'key'>) => (
   },
 }));
 
-const Switch: FunctionComponent<Omit<SwitchProps, 'key'>> = (props) => {
+const Switch: FunctionComponent<CustomSwitchProps> = (props) => {
   return <CustomSwitch {...props} />;
 };
 

diff --git a/containers/clusterForms/clusterCreation/advancedOptions/advancedOptions.styled.ts b/containers/clusterForms/clusterCreation/advancedOptions/advancedOptions.styled.ts
@@ -10,8 +10,9 @@ export const InputContainer = styled(Column)`
     margin-left: 8px;
   }
 
-  ${LearnMore} {
-    margin-left: 37px;
+  & ${LearnMore} {
+    margin-left: 40px;
+    color: ${EXCLUSIVE_PLUM};
 
     span,
     a {

diff --git a/containers/clusterForms/clusterCreation/advancedOptions/index.tsx b/containers/clusterForms/clusterCreation/advancedOptions/index.tsx
@@ -29,7 +29,6 @@ const AdvancedOptions: FunctionComponent = () => {
         description="Learn more about"
         href=""
         linkTitle="customizing the GitOps template"
-        withoutDivider
       />
       <ControlledTextField
         control={control}

diff --git a/containers/clusterForms/clusterCreation/index.tsx b/containers/clusterForms/clusterCreation/index.tsx
@@ -231,7 +231,6 @@ const ClusterCreationForm: FunctionComponent<Omit<ComponentPropsWithoutRef<'div'
           href="https://docs.kubefirst.io/civo/quick-start/cluster-management "
           description="A partitioned space in your management cluster."
           linkTitle="Learn More"
-          withoutDivider
         />
       </InputContainer>
       <>

diff --git a/containers/clusterForms/k3d/setupForm/index.tsx b/containers/clusterForms/k3d/setupForm/index.tsx
@@ -3,7 +3,6 @@ import { useFormContext } from 'react-hook-form';
 
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import ControlledPassword from '../../../../components/controlledFields/Password';
-// import LearnMore from '../../../../components/learnMore';
 import { InstallValues } from '../../../../types/redux';
 
 export const LocalSetupForm: FunctionComponent = () => {
@@ -32,7 +31,6 @@ export const LocalSetupForm: FunctionComponent = () => {
         rules={{ required: false }}
         label="GitOps template branch"
       />
-      {/* <LearnMore description="Learn more about" href="" linkTitle="configuring your cluster" /> */}
     </>
   );
 };
diff --git a/containers/clusterForms/shared/advancedOptions/index.tsx b/containers/clusterForms/shared/advancedOptions/index.tsx
@@ -1,8 +1,7 @@
-import React, { ChangeEvent, FunctionComponent, useMemo, useState } from 'react';
+import React, { FunctionComponent, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Required } from '../../../../components/textField/textField.styled';
-import LearnMore from '../../../../components/learnMore';
 import Typography from '../../../../components/typography';
 import SwitchComponent from '../../../../components/switch';
 import Checkbox from '../../../../components/controlledFields/checkbox';
@@ -15,13 +14,15 @@ import { EXCLUSIVE_PLUM } from '../../../../constants/colors';
 
 import { CheckboxContainer, Switch } from './advancedOptions.styled';
 
-const AdvancedOptions: FunctionComponent = () => {
-  const [isAdvancedOptionsEnabled, setIsAdvancedOptionsEnabled] = useState<boolean>(false);
-
-  const handleOnChangeSwitch = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    setIsAdvancedOptionsEnabled(target.checked);
-  };
+interface AdvancedOptionsProps {
+  advancedOptionsChecked: boolean;
+  onAdvancedOptionsChange: (checked: boolean) => void;
+}
 
+const AdvancedOptions: FunctionComponent<AdvancedOptionsProps> = ({
+  advancedOptionsChecked,
+  onAdvancedOptionsChange,
+}) => {
   const { values, installType, gitProvider } = useAppSelector(({ installation }) => installation);
 
   const isGitHub = useMemo(() => gitProvider === GitProvider.GITHUB, [gitProvider]);
@@ -34,9 +35,13 @@ const AdvancedOptions: FunctionComponent = () => {
     <>
       <Switch>
         <Typography variant="subtitle2">Advanced Options</Typography>
-        <SwitchComponent name="advancedOptions" onChange={handleOnChangeSwitch} />
+        <SwitchComponent
+          name="advancedOptions"
+          value={advancedOptionsChecked}
+          onChange={onAdvancedOptionsChange}
+        />
       </Switch>
-      {isAdvancedOptionsEnabled && (
+      {advancedOptionsChecked && (
         <>
           <ControlledTextField
             control={control}
@@ -60,13 +65,12 @@ const AdvancedOptions: FunctionComponent = () => {
           />
           <CheckboxContainer>
             <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              By default kubefirst uses ssh to create your cluster check the below to use https
-              instead{' '}
+              By default kubefirst uses SSH to create your cluster check below to use HTTPS instead{' '}
             </Typography>
             <Checkbox
               control={control}
               name="useHttps"
-              label="Use https"
+              label="Use HTTPS"
               rules={{
                 required: false,
               }}
@@ -94,12 +98,6 @@ const AdvancedOptions: FunctionComponent = () => {
               />
             </CheckboxContainer>
           )}
-          <LearnMore
-            installType={installType}
-            description="Learn more about"
-            href=""
-            linkTitle="customizing the GitOps template"
-          />
         </>
       )}
     </>

diff --git a/containers/clusterForms/shared/authForm/index.tsx b/containers/clusterForms/shared/authForm/index.tsx
@@ -6,7 +6,6 @@ import { Required } from '../../../../components/textField/textField.styled';
 import GitProviderButton from '../../../../components/gitProviderButton';
 import Typography from '../../../../components/typography';
 import { useInstallation } from '../../../../hooks/useInstallation';
-// import LearnMore from '../../../../components/learnMore';
 import ControlledPassword from '../../../../components/controlledFields/Password';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import ControlledTextArea from '../../../../components/controlledFields/textArea';
@@ -206,8 +205,8 @@ const AuthForm: FunctionComponent = () => {
         </div>
       )}
       <FormContainer isVisible={!isMarketplace || (isMarketplace && isGitSelected)}>
-        <Row style={{ justifyContent: 'space-between' }}>
-          <Row style={{ width: '432px' }}>
+        <Row style={{ justifyContent: 'space-between', gap: '24px' }}>
+          <Row style={{ width: '100%' }}>
             <ControlledPassword
               control={control}
               name="gitToken"
@@ -338,7 +337,6 @@ const AuthForm: FunctionComponent = () => {
           ),
         )}
       </FormContainer>
-      {/* <LearnMore description="Learn more about" href="" linkTitle="authentication" /> */}
     </>
   );
 };

diff --git a/containers/clusterForms/shared/setupForm/index.tsx b/containers/clusterForms/shared/setupForm/index.tsx
@@ -312,6 +312,7 @@ const SetupForm: FunctionComponent = () => {
         name="clusterName"
         label="Cluster name"
         defaultValue={values?.clusterName}
+        required
         rules={{
           maxLength: 25,
           required: 'Cluster name is required',
@@ -336,7 +337,6 @@ const SetupForm: FunctionComponent = () => {
           },
         }}
         onErrorText={errors.clusterName?.message}
-        required
       />
       {installType === InstallationType.GOOGLE && (
         <CheckBoxContainer>
@@ -354,7 +354,6 @@ const SetupForm: FunctionComponent = () => {
           />
         </CheckBoxContainer>
       )}
-      {/* <LearnMore description="Learn more about" href="" linkTitle="configuring your cluster" /> */}
     </>
   );
 };