feat: image repository

components/autocomplete/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, FunctionComponent } from 'react';
+import React, { ForwardedRef, FunctionComponent, useMemo } from 'react';
 import { Autocomplete as AutocompleteMUI, CircularProgress, SxProps } from '@mui/material';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -35,6 +35,9 @@ const AutocompleteComponent: FunctionComponent<IAutocompleteProps> = ({
   disabled,
   ...props
 }) => {
+  // Unfortunately MaterialUI doesn't not update the dom state when no options are available
+  const value = useMemo(() => (options.length ? props.value : ''), [options.length, props.value]);
+
   return (
     <AutocompleteMUI
       loading={loading}
@@ -51,6 +54,7 @@ const AutocompleteComponent: FunctionComponent<IAutocompleteProps> = ({
         },
       }}
       {...props}
+      isOptionEqualToValue={(option: string, value: string) => option === value}
       renderInput={(params) => (
         <TextField
           ref={params.InputProps.ref}
@@ -66,6 +70,7 @@ const AutocompleteComponent: FunctionComponent<IAutocompleteProps> = ({
               )}
             </InputAdornmentContainer>
           }
+          value={value}
           {...params}
           label={label}
         />

components/clusterDetails/clusterDetails.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 
-import ClusterDetails from '.';
-
 import { ClusterInfo } from '../clusterTable/clusterTable';
 import { ClusterStatus, ClusterType } from '../../types/provision';
 import { InstallationType } from '../../types/redux';
 
+import ClusterDetails from '.';
+
 export default {
   title: 'Components/ClusterDetails',
   component: ClusterDetails,

components/controlledFields/AutoComplete.tsx

@@ -48,6 +48,7 @@ function ControlledAutocomplete<T extends FieldValues>({
             field.onBlur();
             setIsBlur(true);
           }}
+          value={options.length ? field.value : ''}
           loading={loading}
           placeholder={placeholder}
           disabled={disabled}

components/controlledFields/Radio.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { FormControlLabel, FormGroup, Radio, RadioGroup } from '@mui/material';
+import { Control, Controller, UseControllerProps, FieldValues } from 'react-hook-form';
+
+import { VOLCANIC_SAND } from '../../constants/colors';
+import Typography from '../typography';
+
+export interface ControlledTextFieldProps<T extends FieldValues> extends UseControllerProps<T> {
+  control: Control<T>;
+  required?: boolean;
+  rules: {
+    required: boolean;
+    pattern?: RegExp;
+  };
+  options: Array<{ label: string; value: string }>;
+}
+
+function ControlledRadio<T extends FieldValues>({
+  defaultValue,
+  name,
+  options,
+  required,
+  ...props
+}: ControlledTextFieldProps<T>) {
+  return (
+    <Controller
+      {...props}
+      name={name}
+      render={({ field }) => (
+        <FormGroup>
+          <RadioGroup defaultValue={defaultValue} name={name}>
+            {options.map(({ label, value }) => (
+              <FormControlLabel
+                key={label}
+                value={value}
+                control={
+                  <Radio
+                    {...field}
+                    name={name}
+                    required={required}
+                    inputRef={field.ref}
+                    value={value}
+                    onChange={(e) => {
+                      field.onChange(e);
+                    }}
+                  />
+                }
+                label={
+                  <Typography variant="body2" color={VOLCANIC_SAND}>
+                    {label}
+                  </Typography>
+                }
+              />
+            ))}
+          </RadioGroup>
+        </FormGroup>
+      )}
+    />
+  );
+}
+
+export default ControlledRadio;

components/flow/index.tsx

@@ -87,7 +87,7 @@ const nodeTypes: NodeTypes = {
 };
 
 export const Flow: FunctionComponent = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = useCallback(
     (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),

containers/clusterForms/aws/index.tsx

@@ -4,12 +4,11 @@ import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
-
-import AwsSetupForm from './setupForm';
+import SetupForm from '../shared/setupForm';
 
 const AWS_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
-  [FormStep.SETUP]: AwsSetupForm,
+  [FormStep.SETUP]: SetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
   [FormStep.READY]: ClusterRunning,
 };

containers/clusterForms/civo/index.tsx

@@ -4,8 +4,7 @@ import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
-
-import SetupForm from './setupForm';
+import SetupForm from '../shared/setupForm';
 
 const CIVO_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,

containers/clusterForms/clusterCreation/clusterCreation.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { Story } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import ClusterCreationForm, { ClusterConfig } from '.';
@@ -22,10 +23,7 @@ const DefaultTemplate: Story = () => {
 
   return (
     <FormProvider {...methods}>
-      <ClusterCreationForm
-        ref={formRef}
-        onFormSubmit={(config) => console.log('the form values =>', config)}
-      />
+      <ClusterCreationForm ref={formRef} onFormSubmit={() => action('onSubmit')} />
       <button onClick={handleClick}>Submit me</button>
     </FormProvider>
   );

containers/clusterForms/clusterCreation/index.tsx

@@ -9,6 +9,7 @@ import ControlledSelect from '../../../components/controlledFields/Select';
 import NumberInput from '../../../components/numberInput';
 import Row from '../../../components/row';
 import Button from '../../../components/button';
+
 import { Form } from './clusterCreation.styled';
 
 export type ClusterConfig = {

containers/clusterForms/digitalocean/index.tsx

@@ -4,12 +4,11 @@ import TerminalLogs from '../../terminalLogs';
 import { FormStep } from '../../../constants/installation';
 import AuthForm from '../shared/authForm';
 import ClusterRunning from '../shared/clusterRunning';
-
-import DigitalOceanSetupForm from './setupForm';
+import SetupForm from '../shared/setupForm';
 
 const DIGITAL_OCEAN_FORM_FLOW = {
   [FormStep.AUTHENTICATION]: AuthForm,
-  [FormStep.SETUP]: DigitalOceanSetupForm,
+  [FormStep.SETUP]: SetupForm,
   [FormStep.PROVISIONING]: TerminalLogs,
   [FormStep.READY]: ClusterRunning,
 };