Merge pull request #588 from ylei-tsubame/issues/414-reconnect-init-host

Web UI: replace prepare host step in manage anvil node(s)

striker-ui/components/CrudList.tsx

@@ -39,6 +39,8 @@ const CrudList = <
     renderDeleteItem,
     renderEditForm,
     renderListItem,
+    // Dependents
+    entryUrlPrefix = entriesUrl,
   } = props;
 
   const addDialogRef = useRef<DialogForwardedRefContent>(null);
@@ -54,25 +56,16 @@ const CrudList = <
 
   const [edit, setEdit] = useState<boolean>(false);
   const [entry, setEntry] = useState<Detail | undefined>();
-  const [entries, setEntries] = useState<OverviewList | undefined>();
 
-  const { loading: loadingEntriesPeriodic } = useFetch<OverviewList>(
+  const {
-    entriesUrl,
+    data: entries,
-    {
+    mutate: refreshEntries,
-      onSuccess: (data) => setEntries(data),
+    loading: loadingEntries,
-      refreshInterval,
+  } = useFetch<OverviewList>(entriesUrl, { refreshInterval });
-    },
-  );
-
-  const { fetch: getEntries, loading: loadingEntriesActive } =
-    useActiveFetch<OverviewList>({
-      onData: (data) => setEntries(data),
-      url: entriesUrl,
-    });
 
   const { fetch: getEntry, loading: loadingEntry } = useActiveFetch<Detail>({
     onData: (data) => setEntry(data),
-    url: entriesUrl,
+    url: entryUrlPrefix,
   });
 
   const addHeader = useMemo<React.ReactNode>(
@@ -108,11 +101,6 @@ const CrudList = <
     ],
   );
 
-  const loadingEntries = useMemo<boolean>(
-    () => loadingEntriesPeriodic || loadingEntriesActive,
-    [loadingEntriesActive, loadingEntriesPeriodic],
-  );
-
   const {
     buildDeleteDialogProps,
     checks,
@@ -162,15 +150,16 @@ const CrudList = <
                   .then(() => {
                     finishConfirm('Success', getDeleteSuccessMessage());
 
-                    getEntries();
+                    refreshEntries();
                   })
                   .catch((error) => {
                     const emsg = handleAPIError(error);
 
                     finishConfirm('Error', getDeleteErrorMessage(emsg));
-                  });
+                  })
-
+                  .finally(() => {
                     resetChecks();
+                  });
               },
               getConfirmDialogTitle: getDeleteHeader,
               renderEntry: (...args) => renderDeleteItem(entries, ...args),

striker-ui/components/FormSummary.tsx

@@ -1,16 +1,9 @@
 import { Box, List as MUIList, ListItem as MUIListItem } from '@mui/material';
-import { capitalize } from 'lodash';
 import { FC, ReactElement } from 'react';
 
 import FlexBox from './FlexBox';
 import { BodyText, MonoText, SensitiveText } from './Text';
-
+import disassembleCamel from '../lib/disassembleCamel';
-const capEntryLabel: CapFormEntryLabel = (value) => {
-  const spaced = value.replace(/([a-z\d])([A-Z])/g, '$1 $2');
-  const lcased = spaced.toLowerCase();
-
-  return capitalize(lcased);
-};
 
 const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => (
   <MonoText whiteSpace="nowrap">{String(entry)}</MonoText>
@@ -42,6 +35,7 @@ const buildEntryList = ({
   maxDepth,
   renderEntry,
   renderEntryValue,
+  skip,
 }: {
   depth?: number;
   entries: FormEntries;
@@ -52,6 +46,7 @@ const buildEntryList = ({
   maxDepth: number;
   renderEntry: RenderFormEntryFunction;
   renderEntryValue: RenderFormValueFunction;
+  skip: Exclude<FormSummaryOptionalProps['skip'], undefined>;
 }): ReactElement => {
   const result: ReactElement[] = [];
 
@@ -59,13 +54,21 @@ const buildEntryList = ({
     const itemId = `form-summary-entry-${itemKey}`;
 
     const nest = entry !== null && typeof entry === 'object';
+
     const value = nest ? null : entry;
 
+    const fnArgs: CommonFormEntryHandlerArgs = {
+      depth,
+      entry: value,
+      key: itemKey,
+    };
+
+    if (skip(({ key }) => !/confirm/i.test(key), fnArgs)) {
       result.push(
         <MUIListItem
           key={itemId}
           sx={{ paddingLeft: `${depth}em` }}
-        {...getListItemProps?.call(null, { depth, entry: value, key: itemKey })}
+          {...getListItemProps?.call(null, fnArgs)}
         >
           {renderEntry({
             depth,
@@ -77,6 +80,7 @@ const buildEntryList = ({
           })}
         </MUIListItem>,
       );
+    }
 
     if (nest && depth < maxDepth) {
       result.push(
@@ -88,6 +92,7 @@ const buildEntryList = ({
           maxDepth,
           renderEntry,
           renderEntryValue,
+          skip,
         }),
       );
     }
@@ -116,7 +121,9 @@ const FormSummary = <T extends FormEntries>({
   maxDepth = 3,
   renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => (
     <FlexBox fullWidth growFirst row maxWidth="100%">
-      <BodyText>{getLabel({ cap: capEntryLabel, depth, entry, key })}</BodyText>
+      <BodyText>
+        {getLabel({ cap: disassembleCamel, depth, entry, key })}
+      </BodyText>
       <Box sx={{ maxWidth: '100%', overflowX: 'scroll' }}>
         {!nest && renderValue({ depth, entry, key })}
       </Box>
@@ -134,6 +141,7 @@ const FormSummary = <T extends FormEntries>({
       ? renderEntryValueWithPassword(args)
       : renderEntryValueWithMono(args);
   },
+  skip = (base, ...args) => base(...args),
 }: FormSummaryProps<T>): ReturnType<FC<FormSummaryProps<T>>> =>
   buildEntryList({
     entries,
@@ -143,6 +151,7 @@ const FormSummary = <T extends FormEntries>({
     maxDepth,
     renderEntry,
     renderEntryValue,
+    skip,
   });
 
 export default FormSummary;

striker-ui/components/ManageHost/ManageHost.tsx

@@ -0,0 +1,48 @@
+import { FC, useState } from 'react';
+
+import CrudList from '../CrudList';
+import PrepareHostForm from './PrepareHostForm';
+import TestAccessForm from './TestAccessForm';
+import { BodyText } from '../Text';
+
+const ManageHost: FC = () => {
+  const [inquireHostResponse, setInquireHostResponse] = useState<
+    InquireHostResponse | undefined
+  >();
+
+  return (
+    <CrudList<APIHostOverview, APIHostDetail>
+      addHeader="Initialize host"
+      editHeader=""
+      entriesUrl="/host?types=dr,node"
+      entryUrlPrefix="/host"
+      getDeleteErrorMessage={(children, ...rest) => ({
+        ...rest,
+        children: <>Failed to delete host(s). {children}</>,
+      })}
+      getDeleteHeader={(count) => `Delete the following ${count} host(s)?`}
+      getDeleteSuccessMessage={() => ({
+        children: <>Successfully deleted host(s)</>,
+      })}
+      listEmpty="No host(s) found"
+      listProps={{ allowAddItem: true, allowEdit: false }}
+      renderAddForm={(tools) => (
+        <>
+          <TestAccessForm setResponse={setInquireHostResponse} />
+          {inquireHostResponse && (
+            <PrepareHostForm host={inquireHostResponse} tools={tools} />
+          )}
+        </>
+      )}
+      renderDeleteItem={(hosts, { key }) => {
+        const host = hosts?.[key];
+
+        return <BodyText>{host?.shortHostName}</BodyText>;
+      }}
+      renderEditForm={() => <></>}
+      renderListItem={(uuid, { hostName }) => <BodyText>{hostName}</BodyText>}
+    />
+  );
+};
+
+export default ManageHost;

striker-ui/components/ManageHost/PrepareHostForm.tsx

@@ -0,0 +1,228 @@
+import { Grid } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import ActionGroup from '../ActionGroup';
+import api from '../../lib/api';
+import FormSummary from '../FormSummary';
+import handleAPIError from '../../lib/handleAPIError';
+import MessageGroup from '../MessageGroup';
+import OutlinedInputWithLabel from '../OutlinedInputWithLabel';
+import RadioGroupWithLabel from '../RadioGroupWithLabel';
+import schema from './schema';
+import UncontrolledInput from '../UncontrolledInput';
+import useFormikUtils from '../../hooks/useFormikUtils';
+
+const HOST_TYPE_OPTIONS: RadioItemList = {
+  subnode: { label: 'Subnode', value: 'subnode' },
+  dr: { label: 'Disaster Recovery (DR) host', value: 'dr' },
+};
+
+const PrepareHostForm: FC<PreapreHostFormProps> = (props) => {
+  const { host, tools } = props;
+
+  const { disabledSubmit, formik, formikErrors, handleChange } =
+    useFormikUtils<PrepareHostFormikValues>({
+      initialValues: {
+        ip: host.hostIpAddress,
+        name: host.hostName,
+        password: host.hostPassword,
+        type: '',
+        uuid: host.hostUUID,
+      },
+      onSubmit: (values, { setSubmitting }) => {
+        const {
+          enterpriseKey,
+          ip,
+          name,
+          password,
+          type,
+          uuid,
+          redhatPassword,
+          redhatUsername,
+        } = values;
+
+        tools.confirm.prepare({
+          actionProceedText: 'Prepare',
+          content: <FormSummary entries={values} hasPassword />,
+          onCancelAppend: () => setSubmitting(false),
+          onProceedAppend: () => {
+            tools.confirm.loading(true);
+
+            api
+              .put('/host/prepare', {
+                enterpriseUUID: enterpriseKey,
+                hostIPAddress: ip,
+                hostName: name,
+                hostPassword: password,
+                hostType: type === 'subnode' ? 'node' : type,
+                hostUUID: uuid,
+                redhatPassword,
+                redhatUser: redhatUsername,
+              })
+              .then(() => {
+                tools.confirm.finish('Success', {
+                  children: <>Started job to prepare host at {ip}.</>,
+                });
+
+                tools.add.open(false);
+              })
+              .catch((error) => {
+                const emsg = handleAPIError(error);
+
+                emsg.children = (
+                  <>
+                    Failed to prepare host at {ip}. {emsg.children}
+                  </>
+                );
+
+                tools.confirm.finish('Error', emsg);
+
+                setSubmitting(false);
+              });
+          },
+          titleText: `Prepare host at ${values.ip} with the following?`,
+        });
+
+        tools.confirm.open();
+      },
+      validationSchema: schema,
+    });
+
+  const enterpriseKeyChain = useMemo<string>(() => 'enterpriseKey', []);
+  const nameChain = useMemo<string>(() => 'name', []);
+  const redhatConfirmPasswordChain = useMemo<string>(
+    () => 'redhatConfirmPassword',
+    [],
+  );
+  const redhatPasswordChain = useMemo<string>(() => 'redhatPassword', []);
+  const redhatUsernameChain = useMemo<string>(() => 'redhatUsername', []);
+  const typeChain = useMemo<string>(() => 'type', []);
+
+  const showRedhatSection = useMemo<boolean>(
+    () =>
+      host.isInetConnected && /rhel/i.test(host.hostOS) && !host.isOSRegistered,
+    [host.hostOS, host.isInetConnected, host.isOSRegistered],
+  );
+
+  return (
+    <Grid
+      columns={{ xs: 1, sm: 2 }}
+      component="form"
+      container
+      onSubmit={(event) => {
+        event.preventDefault();
+
+        formik.submitForm();
+      }}
+      spacing="1em"
+    >
+      <Grid item width="100%">
+        <UncontrolledInput
+          input={
+            <RadioGroupWithLabel
+              id={typeChain}
+              label="Host type"
+              name={typeChain}
+              onChange={handleChange}
+              radioItems={HOST_TYPE_OPTIONS}
+              value={formik.values.type}
+            />
+          }
+        />
+      </Grid>
+      <Grid item xs={1}>
+        <UncontrolledInput
+          input={
+            <OutlinedInputWithLabel
+              id={nameChain}
+              label="Host name"
+              name={nameChain}
+              onChange={handleChange}
+              required
+              value={formik.values.name}
+            />
+          }
+        />
+      </Grid>
+      <Grid item xs={1}>
+        <UncontrolledInput
+          input={
+            <OutlinedInputWithLabel
+              id={enterpriseKeyChain}
+              label="Alteeve enterprise key"
+              name={enterpriseKeyChain}
+              onChange={handleChange}
+              value={formik.values.enterpriseKey}
+            />
+          }
+        />
+      </Grid>
+      {showRedhatSection && (
+        <>
+          <Grid item xs={1}>
+            <UncontrolledInput
+              input={
+                <OutlinedInputWithLabel
+                  disableAutofill
+                  id={redhatUsernameChain}
+                  label="RedHat username"
+                  name={redhatUsernameChain}
+                  onChange={handleChange}
+                  value={formik.values.redhatUsername}
+                />
+              }
+            />
+          </Grid>
+          <Grid item xs={1}>
+            <UncontrolledInput
+              input={
+                <OutlinedInputWithLabel
+                  disableAutofill
+                  id={redhatPasswordChain}
+                  label="RedHat password"
+                  name={redhatPasswordChain}
+                  onChange={handleChange}
+                  type="password"
+                  value={formik.values.redhatPassword}
+                />
+              }
+            />
+          </Grid>
+          <Grid display={{ xs: 'none', sm: 'initial' }} item sm={1} />
+          <Grid item xs={1}>
+            <UncontrolledInput
+              input={
+                <OutlinedInputWithLabel
+                  disableAutofill
+                  id={redhatConfirmPasswordChain}
+                  label="Confirm RedHat password"
+                  name={redhatConfirmPasswordChain}
+                  onChange={handleChange}
+                  type="password"
+                  value={formik.values.redhatConfirmPassword}
+                />
+              }
+            />
+          </Grid>
+        </>
+      )}
+      <Grid item width="100%">
+        <MessageGroup count={1} messages={formikErrors} />
+      </Grid>
+      <Grid item width="100%">
+        <ActionGroup
+          actions={[
+            {
+              background: 'blue',
+              children: 'Prepare host',
+              disabled: disabledSubmit,
+              type: 'submit',
+            },
+          ]}
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default PrepareHostForm;

striker-ui/components/ManageHost/TestAccessForm.tsx

@@ -0,0 +1,149 @@
+import { FC, useCallback, useMemo, useRef, useState } from 'react';
+import { Grid } from '@mui/material';
+
+import ActionGroup from '../ActionGroup';
+import api from '../../lib/api';
+import handleAPIError from '../../lib/handleAPIError';
+import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup';
+import OutlinedInputWithLabel from '../OutlinedInputWithLabel';
+import UncontrolledInput from '../UncontrolledInput';
+import useFormikUtils from '../../hooks/useFormikUtils';
+import Spinner from '../Spinner';
+import schema from './testAccessSchema';
+
+const TestAccessForm: FC<TestAccessFormProps> = (props) => {
+  const { setResponse } = props;
+
+  const messageGroupRef = useRef<MessageGroupForwardedRefContent>(null);
+
+  const [loadingInquiry, setLoadingInquiry] = useState<boolean>(false);
+
+  const setApiMessage = useCallback(
+    (message?: Message) =>
+      messageGroupRef?.current?.setMessage?.call(null, 'api', message),
+    [],
+  );
+
+  const { disabledSubmit, formik, formikErrors, handleChange } =
+    useFormikUtils<TestAccessFormikValues>({
+      initialValues: {
+        ip: '',
+        password: '',
+      },
+      onSubmit: (values, { setSubmitting }) => {
+        setLoadingInquiry(true);
+        setResponse(undefined);
+
+        const { ip, password } = values;
+
+        api
+          .put<APICommandInquireHostResponseBody>('/command/inquire-host', {
+            ipAddress: ip,
+            password,
+          })
+          .then(({ data }) => {
+            setResponse({
+              ...data,
+              hostIpAddress: ip,
+              hostPassword: password,
+            });
+
+            setApiMessage();
+          })
+          .catch((error) => {
+            const emsg = handleAPIError(error);
+
+            emsg.children = (
+              <>
+                Failed to access {ip}. {emsg.children}
+              </>
+            );
+
+            setApiMessage(emsg);
+          })
+          .finally(() => {
+            setSubmitting(false);
+            setLoadingInquiry(false);
+          });
+      },
+      validationSchema: schema,
+    });
+
+  const ipChain = useMemo<string>(() => 'ip', []);
+  const passwordChain = useMemo<string>(() => 'password', []);
+
+  return (
+    <Grid
+      component="form"
+      container
+      columns={{ xs: 1, sm: 2 }}
+      onSubmit={(event) => {
+        event.preventDefault();
+
+        formik.submitForm();
+      }}
+      spacing="1em"
+    >
+      <Grid item xs={1}>
+        <UncontrolledInput
+          input={
+            <OutlinedInputWithLabel
+              disableAutofill
+              id={ipChain}
+              label="IP address"
+              name={ipChain}
+              onChange={handleChange}
+              required
+              value={formik.values.ip}
+            />
+          }
+        />
+      </Grid>
+      <Grid item xs={1}>
+        <UncontrolledInput
+          input={
+            <OutlinedInputWithLabel
+              disableAutofill
+              id={passwordChain}
+              label="Password"
+              name={passwordChain}
+              onChange={handleChange}
+              required
+              type="password"
+              value={formik.values.password}
+            />
+          }
+        />
+      </Grid>
+      {loadingInquiry ? (
+        <Grid item width="100%">
+          <Spinner />
+        </Grid>
+      ) : (
+        <>
+          <Grid item width="100%">
+            <MessageGroup
+              count={1}
+              messages={formikErrors}
+              ref={messageGroupRef}
+            />
+          </Grid>
+          <Grid item width="100%">
+            <ActionGroup
+              actions={[
+                {
+                  background: 'blue',
+                  children: 'Test access',
+                  disabled: disabledSubmit,
+                  type: 'submit',
+                },
+              ]}
+            />
+          </Grid>
+        </>
+      )}
+    </Grid>
+  );
+};
+
+export default TestAccessForm;

striker-ui/components/ManageHost/index.tsx

@@ -0,0 +1,4 @@
+import ManageHost from './ManageHost';
+import PrepareHostForm from './PrepareHostForm';
+
+export { ManageHost, PrepareHostForm };

striker-ui/components/ManageHost/schema.ts

@@ -0,0 +1,35 @@
+import * as yup from 'yup';
+
+import { REP_IPV4 } from '../../lib/consts/REG_EXP_PATTERNS';
+
+const schema = yup.object().shape(
+  {
+    enterpriseKey: yup.string().uuid().optional(),
+    ip: yup.string().matches(REP_IPV4, {
+      message: 'Expected IP address to be a valid IPv4 address.',
+    }),
+    name: yup.string().required(),
+    redhatConfirmPassword: yup
+      .string()
+      .when('redhatPassword', (redhatPassword, field) =>
+        String(redhatPassword).length > 0
+          ? field.required().oneOf([yup.ref('redhatPassword')])
+          : field.optional(),
+      ),
+    redhatPassword: yup
+      .string()
+      .when('redhatUsername', (redhatUsername, field) =>
+        String(redhatUsername).length > 0 ? field.required() : field.optional(),
+      ),
+    redhatUsername: yup
+      .string()
+      .when('redhatPassword', (redhatPassword, field) =>
+        String(redhatPassword).length > 0 ? field.required() : field.optional(),
+      ),
+    type: yup.string().oneOf(['dr', 'subnode']).required(),
+    uuid: yup.string().uuid().required(),
+  },
+  [['redhatUsername', 'redhatPassword']],
+);
+
+export default schema;

striker-ui/components/ManageHost/testAccessSchema.ts

@@ -0,0 +1,15 @@
+import * as yup from 'yup';
+
+import { REP_IPV4 } from '../../lib/consts/REG_EXP_PATTERNS';
+
+const schema = yup.object({
+  ip: yup
+    .string()
+    .matches(REP_IPV4, {
+      message: 'Expected IP address to be a valid IPv4 address.',
+    })
+    .required(),
+  password: yup.string().required(),
+});
+
+export default schema;

striker-ui/components/ManageMailServer/AddMailServerForm.tsx

@@ -26,13 +26,8 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
     [mailServerUuid],
   );
 
-  const {
+  const { disabledSubmit, formik, formikErrors, handleChange } =
-    disableAutocomplete,
+    useFormikUtils<MailServerFormikValues>({
-    disabledSubmit,
-    formik,
-    formikErrors,
-    handleChange,
-  } = useFormikUtils<MailServerFormikValues>({
       initialValues: previousFormikValues ?? {
         [msUuid]: {
           address: '',
@@ -136,7 +131,6 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
               id={addressChain}
               label="Server address"
               name={addressChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               required
               value={formik.values[msUuid].address}
@@ -151,7 +145,6 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
               id={portChain}
               label="Server port"
               name={portChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               required
               type="number"
@@ -160,14 +153,13 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
           }
         />
       </Grid>
-      <Grid item sm={2} xs={1}>
+      <Grid item width="100%">
         <UncontrolledInput
           input={
             <SelectWithLabel
               id={securityChain}
               label="Server security type"
               name={securityChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               required
               selectItems={['none', 'starttls', 'tls-ssl']}
@@ -176,14 +168,13 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
           }
         />
       </Grid>
-      <Grid item sm={2} xs={1}>
+      <Grid item width="100%">
         <UncontrolledInput
           input={
             <SelectWithLabel
               id={authenticationChain}
               label="Server authentication method"
               name={authenticationChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               required
               selectItems={['none', 'plain-text', 'encrypted']}
@@ -192,14 +183,13 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
           }
         />
       </Grid>
-      <Grid item sm={2} xs={1}>
+      <Grid item width="100%">
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
               id={heloDomainChain}
               label="HELO domain"
               name={heloDomainChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               required
               value={formik.values[msUuid].heloDomain}
@@ -211,11 +201,10 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={usernameChain}
-              inputProps={disableAutocomplete()}
               label="Server username"
               name={usernameChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               value={formik.values[msUuid].username}
             />
@@ -226,11 +215,10 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={passwordChain}
-              inputProps={disableAutocomplete()}
               label="Server password"
               name={passwordChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               type="password"
               value={formik.values[msUuid].password}
@@ -238,16 +226,15 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
           }
         />
       </Grid>
-      <Grid item xs={1} />
+      <Grid display={{ xs: 'none', sm: 'initial' }} item sm={1} />
       <Grid item xs={1}>
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={confirmPasswordChain}
-              inputProps={disableAutocomplete()}
               label="Confirm password"
               name={confirmPasswordChain}
-              onBlur={formik.handleBlur}
               onChange={handleChange}
               type="password"
               value={formik.values[msUuid].confirmPassword}

striker-ui/components/OutlinedInput/OutlinedInput.tsx

@@ -15,6 +15,7 @@ import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 import INPUT_TYPES from '../../lib/consts/INPUT_TYPES';
 
 type OutlinedInputOptionalProps = {
+  disableAutofill?: boolean;
   onPasswordVisibilityAppend?: (
     inputType: string,
     ...restArgs: Parameters<Exclude<MUIIconButtonProps['onClick'], undefined>>
@@ -25,13 +26,15 @@ type OutlinedInputProps = MUIOutlinedInputProps & OutlinedInputOptionalProps;
 
 const OUTLINED_INPUT_DEFAULT_PROPS: Pick<
   OutlinedInputOptionalProps,
-  'onPasswordVisibilityAppend'
+  'disableAutofill' | 'onPasswordVisibilityAppend'
 > = {
+  disableAutofill: false,
   onPasswordVisibilityAppend: undefined,
 };
 
 const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
   const {
+    disableAutofill = false,
     endAdornment,
     label,
     onPasswordVisibilityAppend,
@@ -68,6 +71,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
       </>
     );
   }, [initialType, onPasswordVisibilityAppend, type]);
+
   const combinedSx = useMemo(
     () => ({
       color: GREY,
@@ -102,6 +106,7 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
     }),
     [label, sx],
   );
+
   const combinedEndAdornment = useMemo(() => {
     let result;
 
@@ -125,18 +130,33 @@ const OutlinedInput: FC<OutlinedInputProps> = (outlinedInputProps) => {
     return result;
   }, [passwordVisibilityButton, endAdornment]);
 
+  const autofillLock = useMemo<
+    Pick<MUIOutlinedInputProps, 'onFocus' | 'readOnly'> | undefined
+  >(
+    () =>
+      disableAutofill
+        ? {
+            onFocus: (...args) => {
+              const [event] = args;
+
+              event.target.readOnly = false;
+
+              outlinedInputRestProps?.onFocus?.call(null, ...args);
+            },
+            readOnly: true,
+          }
+        : undefined,
+    [disableAutofill, outlinedInputRestProps?.onFocus],
+  );
+
   return (
     <MUIOutlinedInput
-      {...{
+      endAdornment={combinedEndAdornment}
-        endAdornment: combinedEndAdornment,
+      label={label}
-        label,
+      inputProps={{ type, ...inputRestProps }}
-        inputProps: {
+      {...outlinedInputRestProps}
-          type,
+      {...autofillLock}
-          ...inputRestProps,
+      sx={combinedSx}
-        },
-        ...outlinedInputRestProps,
-        sx: combinedSx,
-      }}
     />
   );
 };

striker-ui/components/OutlinedInputWithLabel.tsx

@@ -44,7 +44,7 @@ type OutlinedInputWithLabelOptionalProps =
 
 type OutlinedInputWithLabelProps = Pick<
   OutlinedInputProps,
-  'name' | 'onBlur' | 'onChange' | 'onFocus'
+  'disableAutofill' | 'name' | 'onBlur' | 'onChange' | 'onFocus'
 > &
   OutlinedInputWithLabelOptionalProps & {
     label: string;
@@ -69,6 +69,7 @@ const OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS: Required<OutlinedInputWithLabelOp
 
 const OutlinedInputWithLabel: FC<OutlinedInputWithLabelProps> = ({
   baseInputProps,
+  disableAutofill,
   fillRow: isFillRow = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.fillRow,
   formControlProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.formControlProps,
   helpMessageBoxProps = OUTLINED_INPUT_WITH_LABEL_DEFAULT_PROPS.helpMessageBoxProps,
@@ -148,6 +149,7 @@ const OutlinedInputWithLabel: FC<OutlinedInputWithLabelProps> = ({
         {label}
       </OutlinedInputLabel>
       <OutlinedInput
+        disableAutofill={disableAutofill}
         endAdornment={
           <MUIInputAdornment
             position="end"

striker-ui/components/PrepareHostForm.tsx

@@ -1,671 +0,0 @@
-import {
-  Visibility as MUIVisibilityIcon,
-  VisibilityOff as MUIVisibilityOffIcon,
-} from '@mui/icons-material';
-import { Box as MUIBox, IconButton as MUIIconButton } from '@mui/material';
-import { FC, useCallback, useMemo, useRef, useState } from 'react';
-
-import { GREY } from '../lib/consts/DEFAULT_THEME';
-import INPUT_TYPES from '../lib/consts/INPUT_TYPES';
-
-import api from '../lib/api';
-import handleAPIError from '../lib/handleAPIError';
-import {
-  buildDomainTestBatch,
-  buildIPAddressTestBatch,
-  buildPeacefulStringTestBatch,
-  buildUUIDTestBatch,
-  createTestInputFunction,
-} from '../lib/test_input';
-
-import ConfirmDialog from './ConfirmDialog';
-import ContainedButton from './ContainedButton';
-import FlexBox from './FlexBox';
-import GateForm from './GateForm';
-import Grid from './Grid';
-import InputWithRef, { InputForwardedRefContent } from './InputWithRef';
-import { Message } from './MessageBox';
-import MessageGroup, { MessageGroupForwardedRefContent } from './MessageGroup';
-import OutlinedInputWithLabel from './OutlinedInputWithLabel';
-import { Panel, PanelHeader } from './Panels';
-import RadioGroupWithLabel from './RadioGroupWithLabel';
-import Spinner from './Spinner';
-import { BodyText, HeaderText, MonoText } from './Text';
-
-const ENTERPRISE_KEY_LABEL = 'Alteeve enterprise key';
-const HOST_IP_LABEL = 'Host IP address';
-const HOST_NAME_LABEL = 'Host name';
-const REDHAT_PASSWORD_LABEL = 'RedHat password';
-const REDHAT_USER_LABEL = 'RedHat user';
-const SUCCESS_MESSAGE_TIMEOUT = 5000;
-
-const IT_IDS = {
-  enterpriseKey: 'enterpriseKey',
-  hostName: 'hostName',
-  redhatPassword: 'redhatPassword',
-  redhatUser: 'redhatUser',
-};
-
-const GRID_COLUMNS: Exclude<GridProps['columns'], undefined> = {
-  xs: 1,
-  sm: 2,
-};
-const GRID_SPACING: Exclude<GridProps['spacing'], undefined> = '1em';
-
-const PrepareHostForm: FC = () => {
-  const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
-  const inputEnterpriseKeyRef = useRef<InputForwardedRefContent<'string'>>({});
-  const inputHostNameRef = useRef<InputForwardedRefContent<'string'>>({});
-  const inputRedhatPassword = useRef<InputForwardedRefContent<'string'>>({});
-  const inputRedhatUser = useRef<InputForwardedRefContent<'string'>>({});
-  const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
-
-  const [confirmValues, setConfirmValues] = useState<
-    | {
-        enterpriseKey: string;
-        hostName: string;
-        redhatPassword: string;
-        redhatPasswordHidden: string;
-        redhatUser: string;
-      }
-    | undefined
-  >();
-  const [connectedHostIPAddress, setConnectedHostIPAddress] = useState<
-    string | undefined
-  >();
-  const [connectedHostPassword, setConnectedHostPassword] = useState<
-    string | undefined
-  >();
-  const [connectedHostUUID, setConnectedHostUUID] = useState<string>('');
-  const [inputHostType, setInputHostType] = useState<string>('');
-  const [isInputEnterpriseKeyValid, setIsInputEnterpriseKeyValid] =
-    useState<boolean>(true);
-  const [isInputHostNameValid, setIsInputHostNameValid] =
-    useState<boolean>(false);
-  const [isInputRedhatPasswordValid, setIsInputRedhatPasswordValid] =
-    useState<boolean>(true);
-  const [isInputRedhatUserValid, setIsInputRedhatUserValid] =
-    useState<boolean>(true);
-  const [isShowAccessSection, setIsShowAccessSection] =
-    useState<boolean>(false);
-  const [isShowAccessSubmit, setIsShowAccessSubmit] = useState<boolean>(true);
-  const [isShowOptionalSection, setIsShowOptionalSection] =
-    useState<boolean>(false);
-  const [isShowRedhatPassword, setIsShowRedhatPassword] =
-    useState<boolean>(false);
-  const [isShowRedhatSection, setIsShowRedhatSection] =
-    useState<boolean>(false);
-  const [isSubmittingPrepareHost, setIsSubmittingPrepareHost] =
-    useState<boolean>(false);
-
-  const setHostNameInputMessage = useCallback((message?: Message) => {
-    messageGroupRef.current.setMessage?.call(null, IT_IDS.hostName, message);
-  }, []);
-  const setEnterpriseKeyInputMessage = useCallback((message?: Message) => {
-    messageGroupRef.current.setMessage?.call(
-      null,
-      IT_IDS.enterpriseKey,
-      message,
-    );
-  }, []);
-  const setRedhatPasswordInputMessage = useCallback((message?: Message) => {
-    messageGroupRef.current.setMessage?.call(
-      null,
-      IT_IDS.redhatPassword,
-      message,
-    );
-  }, []);
-  const setRedhatUserInputMessage = useCallback((message?: Message) => {
-    messageGroupRef.current.setMessage?.call(null, IT_IDS.redhatUser, message);
-  }, []);
-  const setSubmitPrepareHostMessage = useCallback(
-    (message?: Message) =>
-      messageGroupRef.current.setMessage?.call(
-        null,
-        'submitPrepareHost',
-        message,
-      ),
-    [],
-  );
-
-  const inputTests = useMemo(
-    () => ({
-      [IT_IDS.enterpriseKey]: buildUUIDTestBatch(
-        ENTERPRISE_KEY_LABEL,
-        () => {
-          setEnterpriseKeyInputMessage();
-        },
-        undefined,
-        (message) => {
-          setEnterpriseKeyInputMessage({ children: message, type: 'warning' });
-        },
-      ),
-      [IT_IDS.hostName]: buildDomainTestBatch(
-        HOST_NAME_LABEL,
-        () => {
-          setHostNameInputMessage();
-        },
-        undefined,
-        (message) => {
-          setHostNameInputMessage({ children: message, type: 'warning' });
-        },
-      ),
-      [IT_IDS.redhatPassword]: buildPeacefulStringTestBatch(
-        REDHAT_PASSWORD_LABEL,
-        () => {
-          setRedhatPasswordInputMessage();
-        },
-        undefined,
-        (message) => {
-          setRedhatPasswordInputMessage({ children: message, type: 'warning' });
-        },
-      ),
-      [IT_IDS.redhatUser]: buildPeacefulStringTestBatch(
-        REDHAT_USER_LABEL,
-        () => {
-          setRedhatUserInputMessage();
-        },
-        undefined,
-        (message) => {
-          setRedhatUserInputMessage({ children: message, type: 'warning' });
-        },
-      ),
-    }),
-    [
-      setEnterpriseKeyInputMessage,
-      setHostNameInputMessage,
-      setRedhatPasswordInputMessage,
-      setRedhatUserInputMessage,
-    ],
-  );
-  const testInput = useMemo(
-    () => createTestInputFunction(inputTests),
-    [inputTests],
-  );
-
-  const redhatElementSxDisplay = useMemo(
-    () => (isShowRedhatSection ? undefined : 'none'),
-    [isShowRedhatSection],
-  );
-
-  const accessSection = useMemo(
-    () => (
-      <GateForm
-        allowSubmit={isShowAccessSubmit}
-        gridProps={{
-          wrapperBoxProps: {
-            sx: {
-              display: isShowAccessSection ? 'flex' : 'none',
-            },
-          },
-        }}
-        identifierInputTestBatchBuilder={buildIPAddressTestBatch}
-        identifierLabel={HOST_IP_LABEL}
-        onIdentifierBlurAppend={({ target: { value } }) => {
-          if (connectedHostIPAddress) {
-            const isIdentifierChanged = value !== connectedHostIPAddress;
-
-            setIsShowAccessSubmit(isIdentifierChanged);
-            setIsShowOptionalSection(!isIdentifierChanged);
-            setIsShowRedhatSection(!isIdentifierChanged);
-          }
-        }}
-        onSubmitAppend={(
-          ipAddress,
-          password,
-          setGateMessage,
-          setGateIsSubmitting,
-        ) => {
-          const body = { ipAddress, password };
-
-          api
-            .put<APICommandInquireHostResponseBody>(
-              '/command/inquire-host',
-              body,
-            )
-            .then(
-              ({
-                data: {
-                  hostName,
-                  hostOS,
-                  hostUUID,
-                  isConnected,
-                  isInetConnected,
-                  isOSRegistered,
-                },
-              }) => {
-                if (isConnected) {
-                  inputHostNameRef.current.setValue?.call(null, hostName);
-
-                  const valid = testInput({
-                    inputs: { [IT_IDS.hostName]: { value: hostName } },
-                  });
-                  setIsInputHostNameValid(valid);
-
-                  if (
-                    isInetConnected &&
-                    /rhel/i.test(hostOS) &&
-                    !isOSRegistered
-                  ) {
-                    setIsShowRedhatSection(true);
-                  }
-
-                  setConnectedHostIPAddress(ipAddress);
-                  setConnectedHostPassword(password);
-                  setConnectedHostUUID(hostUUID);
-
-                  setIsShowAccessSubmit(false);
-                  setIsShowOptionalSection(true);
-                } else {
-                  setGateMessage({
-                    children: `Failed to establish a connection with the given host credentials.`,
-                    type: 'error',
-                  });
-                }
-              },
-            )
-            .catch((apiError) => {
-              const emsg = handleAPIError(apiError);
-
-              setGateMessage?.call(null, emsg);
-            })
-            .finally(() => {
-              setGateIsSubmitting(false);
-            });
-        }}
-        passphraseLabel="Host root password"
-        submitLabel="Test access"
-      />
-    ),
-    [
-      isShowAccessSection,
-      isShowAccessSubmit,
-      connectedHostIPAddress,
-      setConnectedHostPassword,
-      setConnectedHostUUID,
-      testInput,
-    ],
-  );
-
-  const optionalSection = useMemo(
-    () => (
-      <Grid
-        columns={GRID_COLUMNS}
-        layout={{
-          'preparehost-host-name': {
-            children: (
-              <InputWithRef
-                input={
-                  <OutlinedInputWithLabel
-                    formControlProps={{ sx: { width: '100%' } }}
-                    id="preparehost-host-name-input"
-                    inputProps={{
-                      onBlur: ({ target: { value } }) => {
-                        const valid = testInput({
-                          inputs: { [IT_IDS.hostName]: { value } },
-                        });
-                        setIsInputHostNameValid(valid);
-                      },
-                      onFocus: () => {
-                        setHostNameInputMessage();
-                      },
-                    }}
-                    label={HOST_NAME_LABEL}
-                  />
-                }
-                ref={inputHostNameRef}
-              />
-            ),
-          },
-          'preparehost-enterprise-key': {
-            children: (
-              <InputWithRef
-                input={
-                  <OutlinedInputWithLabel
-                    formControlProps={{ sx: { width: '100%' } }}
-                    id="preparehost-enterprise-key-input"
-                    inputProps={{
-                      onBlur: ({ target: { value } }) => {
-                        if (value) {
-                          const valid = testInput({
-                            inputs: { [IT_IDS.enterpriseKey]: { value } },
-                          });
-                          setIsInputEnterpriseKeyValid(valid);
-                        }
-                      },
-                      onFocus: () => {
-                        setEnterpriseKeyInputMessage();
-                      },
-                    }}
-                    label={ENTERPRISE_KEY_LABEL}
-                  />
-                }
-                ref={inputEnterpriseKeyRef}
-              />
-            ),
-          },
-        }}
-        spacing={GRID_SPACING}
-        wrapperBoxProps={{
-          sx: { display: isShowOptionalSection ? undefined : 'none' },
-        }}
-      />
-    ),
-    [
-      isShowOptionalSection,
-      setEnterpriseKeyInputMessage,
-      setHostNameInputMessage,
-      testInput,
-    ],
-  );
-
-  const redhatSection = useMemo(
-    () => (
-      <Grid
-        columns={GRID_COLUMNS}
-        layout={{
-          'preparehost-redhat-user': {
-            children: (
-              <InputWithRef
-                input={
-                  <OutlinedInputWithLabel
-                    formControlProps={{ sx: { width: '100%' } }}
-                    id="preparehost-redhat-user-input"
-                    inputProps={{
-                      onBlur: ({ target: { value } }) => {
-                        if (value) {
-                          const valid = testInput({
-                            inputs: { [IT_IDS.redhatUser]: { value } },
-                          });
-                          setIsInputRedhatUserValid(valid);
-                        }
-                      },
-                      onFocus: () => {
-                        setRedhatUserInputMessage();
-                      },
-                    }}
-                    label={REDHAT_USER_LABEL}
-                  />
-                }
-                ref={inputRedhatUser}
-              />
-            ),
-          },
-          'preparehost-redhat-password': {
-            children: (
-              <InputWithRef
-                input={
-                  <OutlinedInputWithLabel
-                    formControlProps={{ sx: { width: '100%' } }}
-                    id="preparehost-redhat-password-input"
-                    inputProps={{
-                      onBlur: ({ target: { value } }) => {
-                        if (value) {
-                          const valid = testInput({
-                            inputs: { [IT_IDS.redhatPassword]: { value } },
-                          });
-                          setIsInputRedhatPasswordValid(valid);
-                        }
-                      },
-                      onFocus: () => {
-                        setRedhatPasswordInputMessage();
-                      },
-                      onPasswordVisibilityAppend: (type) => {
-                        setIsShowRedhatPassword(type !== INPUT_TYPES.password);
-                      },
-                      type: INPUT_TYPES.password,
-                    }}
-                    label={REDHAT_PASSWORD_LABEL}
-                  />
-                }
-                ref={inputRedhatPassword}
-              />
-            ),
-          },
-        }}
-        spacing={GRID_SPACING}
-        wrapperBoxProps={{
-          sx: { display: redhatElementSxDisplay },
-        }}
-      />
-    ),
-    [
-      redhatElementSxDisplay,
-      setRedhatPasswordInputMessage,
-      setRedhatUserInputMessage,
-      testInput,
-    ],
-  );
-
-  const messageSection = useMemo(
-    () => (
-      <MUIBox sx={{ display: isShowOptionalSection ? undefined : 'none' }}>
-        <MessageGroup count={1} ref={messageGroupRef} />
-      </MUIBox>
-    ),
-    [isShowOptionalSection],
-  );
-
-  const submitSection = useMemo(
-    () =>
-      isSubmittingPrepareHost ? (
-        <Spinner mt={0} />
-      ) : (
-        <FlexBox
-          row
-          sx={{
-            display: isShowOptionalSection ? 'flex' : 'none',
-            justifyContent: 'flex-end',
-          }}
-        >
-          <ContainedButton
-            disabled={
-              !isInputHostNameValid ||
-              !isInputEnterpriseKeyValid ||
-              !isInputRedhatUserValid ||
-              !isInputRedhatPasswordValid
-            }
-            onClick={() => {
-              const redhatPasswordInputValue =
-                inputRedhatPassword.current.getValue?.call(null);
-
-              setConfirmValues({
-                enterpriseKey:
-                  inputEnterpriseKeyRef.current.getValue?.call(null) ||
-                  'none; using community version',
-                hostName: inputHostNameRef.current.getValue?.call(null) || '',
-                redhatPassword: redhatPasswordInputValue || 'none',
-                redhatPasswordHidden:
-                  redhatPasswordInputValue?.replace(/./g, '*') || 'none',
-                redhatUser:
-                  inputRedhatUser.current.getValue?.call(null) || 'none',
-              });
-              setSubmitPrepareHostMessage();
-
-              confirmDialogRef.current.setOpen?.call(null, true);
-            }}
-          >
-            Prepare host
-          </ContainedButton>
-        </FlexBox>
-      ),
-    [
-      isInputEnterpriseKeyValid,
-      isInputHostNameValid,
-      isInputRedhatPasswordValid,
-      isInputRedhatUserValid,
-      isShowOptionalSection,
-      isSubmittingPrepareHost,
-      setSubmitPrepareHostMessage,
-    ],
-  );
-
-  return (
-    <>
-      <Panel>
-        <PanelHeader>
-          <HeaderText>Prepare a host to include in Anvil!</HeaderText>
-        </PanelHeader>
-        <FlexBox>
-          <RadioGroupWithLabel
-            id="preparehost-host-type"
-            label="Host type"
-            onChange={(event, value) => {
-              setInputHostType(value);
-              setIsShowAccessSection(true);
-            }}
-            radioItems={{
-              node: { label: 'Subnode', value: 'node' },
-              dr: { label: 'Disaster Recovery (DR) host', value: 'dr' },
-            }}
-          />
-          {accessSection}
-          {optionalSection}
-          {redhatSection}
-          {messageSection}
-          {submitSection}
-        </FlexBox>
-      </Panel>
-      <ConfirmDialog
-        actionProceedText="Prepare"
-        closeOnProceed
-        content={
-          <Grid
-            calculateItemBreakpoints={(index) => ({
-              xs: index % 2 === 0 ? 1 : 2,
-            })}
-            columns={3}
-            layout={{
-              'preparehost-confirm-host-type-label': {
-                children: <BodyText>Host type</BodyText>,
-              },
-              'preparehost-confirm-host-type-value': {
-                children: (
-                  <MonoText>
-                    {inputHostType === 'dr'
-                      ? 'Disaster Recovery (DR)'
-                      : 'Subnode'}
-                  </MonoText>
-                ),
-              },
-              'preparehost-confirm-host-name-label': {
-                children: <BodyText>Host name</BodyText>,
-              },
-              'preparehost-confirm-host-name-value': {
-                children: <MonoText>{confirmValues?.hostName}</MonoText>,
-              },
-              'preparehost-confirm-enterprise-key-label': {
-                children: <BodyText>Alteeve enterprise key</BodyText>,
-              },
-              'preparehost-confirm-enterprise-key-value': {
-                children: <MonoText>{confirmValues?.enterpriseKey}</MonoText>,
-              },
-              'preparehost-confirm-redhat-user-label': {
-                children: <BodyText>RedHat user</BodyText>,
-                sx: { display: redhatElementSxDisplay },
-              },
-              'preparehost-confirm-redhat-user-value': {
-                children: <MonoText>{confirmValues?.redhatUser}</MonoText>,
-                sx: { display: redhatElementSxDisplay },
-              },
-              'preparehost-confirm-redhat-password-label': {
-                children: <BodyText>RedHat password</BodyText>,
-                sx: { display: redhatElementSxDisplay },
-              },
-              'preparehost-confirm-redhat-password-value': {
-                children: (
-                  <FlexBox
-                    row
-                    sx={{
-                      height: '100%',
-                      maxWidth: '100%',
-                    }}
-                  >
-                    <MonoText
-                      sx={{
-                        flexGrow: 1,
-                        maxWidth: 'calc(100% - 3em)',
-                        overflowX: 'scroll',
-                      }}
-                    >
-                      {isShowRedhatPassword
-                        ? confirmValues?.redhatPassword
-                        : confirmValues?.redhatPasswordHidden}
-                    </MonoText>
-                    <MUIIconButton
-                      onClick={() => {
-                        setIsShowRedhatPassword((previous) => !previous);
-                      }}
-                      sx={{ color: GREY, padding: 0 }}
-                    >
-                      {isShowRedhatPassword ? (
-                        <MUIVisibilityOffIcon />
-                      ) : (
-                        <MUIVisibilityIcon />
-                      )}
-                    </MUIIconButton>
-                  </FlexBox>
-                ),
-                sx: { display: redhatElementSxDisplay },
-              },
-            }}
-            spacing=".6em"
-          />
-        }
-        onCancelAppend={() => {
-          setIsShowRedhatPassword(false);
-        }}
-        onProceedAppend={() => {
-          setIsSubmittingPrepareHost(true);
-
-          api
-            .put('/host/prepare', {
-              enterpriseUUID:
-                inputEnterpriseKeyRef.current.getValue?.call(null),
-              hostIPAddress: connectedHostIPAddress,
-              hostName: inputHostNameRef.current.getValue?.call(null),
-              hostPassword: connectedHostPassword,
-              hostType: inputHostType,
-              hostUUID: connectedHostUUID,
-              redhatPassword: inputRedhatPassword.current.getValue?.call(null),
-              redhatUser: inputRedhatUser.current.getValue?.call(null),
-            })
-            .then(() => {
-              setSubmitPrepareHostMessage({
-                children: `Successfully initiated prepare host.`,
-              });
-
-              setTimeout(() => {
-                setSubmitPrepareHostMessage();
-              }, SUCCESS_MESSAGE_TIMEOUT);
-            })
-            .catch((error) => {
-              const errorMessage = handleAPIError(error, {
-                onResponseErrorAppend: ({ status }) => {
-                  let result: Message | undefined;
-
-                  if (status === 400) {
-                    result = {
-                      children: `The API found invalid values. Did you forget to fill in one of the RedHat fields?`,
-                      type: 'warning',
-                    };
-                  }
-
-                  return result;
-                },
-              });
-
-              setSubmitPrepareHostMessage(errorMessage);
-            })
-            .finally(() => {
-              setIsSubmittingPrepareHost(false);
-            });
-        }}
-        ref={confirmDialogRef}
-        titleText="Confirm host preparation"
-      />
-    </>
-  );
-};
-
-export default PrepareHostForm;

striker-ui/components/RadioGroupWithLabel.tsx

@@ -18,10 +18,12 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   formLabelProps,
   id,
   label,
+  name,
   onChange: onRadioGroupChange,
   radioItems,
   radioProps: { sx: radioSx, ...restRadioProps } = {},
   radioGroupProps,
+  value,
 }) => {
   const labelElement = useMemo(
     () => (typeof label === 'string' ? <BodyText>{label}</BodyText> : label),
@@ -30,7 +32,7 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   const itemElements = useMemo(() => {
     const items = Object.entries(radioItems);
 
-    return items.map(([itemId, { label: itemLabel, value }]) => {
+    return items.map(([itemId, { label: itemLabel, value: itemValue }]) => {
       const itemLabelElement =
         typeof itemLabel === 'string' ? (
           <BodyText>{itemLabel}</BodyText>
@@ -53,7 +55,7 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
             />
           }
           key={`${id}-${itemId}`}
-          value={value}
+          value={itemValue}
           label={itemLabelElement}
           {...formControlLabelProps}
         />
@@ -64,7 +66,14 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   return (
     <MUIFormControl {...formControlProps}>
       <MUIFormLabel {...formLabelProps}>{labelElement}</MUIFormLabel>
-      <MUIRadioGroup onChange={onRadioGroupChange} row {...radioGroupProps}>
+      <MUIRadioGroup
+        id={id}
+        name={name}
+        onChange={onRadioGroupChange}
+        row
+        value={value}
+        {...radioGroupProps}
+      >
         {itemElements}
       </MUIRadioGroup>
     </MUIFormControl>

striker-ui/hooks/useFetch.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import useSWR, { BareFetcher, SWRConfiguration } from 'swr';
+import useSWR, { BareFetcher, KeyedMutator, SWRConfiguration } from 'swr';
 
 import API_BASE_URL from '../lib/consts/API_BASE_URL';
 
@@ -8,6 +8,7 @@ import fetchJSON from '../lib/fetchers/fetchJSON';
 type FetchHookResponse<D, E extends Error = Error> = {
   data?: D;
   error?: E;
+  mutate: KeyedMutator<D>;
   loading: boolean;
 };
 
@@ -26,7 +27,11 @@ const useFetch = <Data, Alt = Data>(
     ...config
   } = options;
 
-  const { data, error } = useSWR<Data>(`${baseUrl}${url}`, fetcher, config);
+  const { data, error, mutate } = useSWR<Data>(
+    `${baseUrl}${url}`,
+    fetcher,
+    config,
+  );
 
   const altData = useMemo<Alt | undefined>(
     () => mod && data && mod(data),
@@ -35,7 +40,7 @@ const useFetch = <Data, Alt = Data>(
 
   const loading = !error && !data;
 
-  return { altData, data, error, loading };
+  return { altData, data, error, mutate, loading };
 };
 
 export default useFetch;

striker-ui/hooks/useFormikUtils.ts

@@ -1,4 +1,3 @@
-import { OutlinedInputProps } from '@mui/material';
 import { FormikConfig, FormikValues, useFormik } from 'formik';
 import { isEqual, isObject } from 'lodash';
 import { useCallback, useMemo } from 'react';
@@ -41,17 +40,6 @@ const useFormikUtils = <Values extends FormikValues = FormikValues>(
     [formik.initialValues, formik.values],
   );
 
-  const disableAutocomplete = useCallback(
-    (overwrite?: Partial<OutlinedInputProps>): OutlinedInputProps => ({
-      readOnly: true,
-      onFocus: (event) => {
-        event.target.readOnly = false;
-      },
-      ...overwrite,
-    }),
-    [],
-  );
-
   const debounceHandleChange = useMemo(
     () => debounce(formik.handleChange),
     [formik.handleChange],
@@ -75,7 +63,6 @@ const useFormikUtils = <Values extends FormikValues = FormikValues>(
   );
 
   return {
-    disableAutocomplete,
     disabledSubmit,
     formik,
     formikErrors,

striker-ui/lib/disassembleCamel.ts

@@ -0,0 +1,9 @@
+import { capitalize } from 'lodash';
+
+const disassembleCamel = (value: string) => {
+  const spaced = value.replace(/([a-z\d])([A-Z])/g, '$1 $2');
+
+  return capitalize(spaced);
+};
+
+export default disassembleCamel;

striker-ui/lib/getFormikErrorMessages.ts

@@ -1,4 +1,4 @@
-import { capitalize } from 'lodash';
+import disassembleCamel from './disassembleCamel';
 
 const getFormikErrorMessages = (
   errors: object,
@@ -7,7 +7,11 @@ const getFormikErrorMessages = (
       let children = error;
 
       if (typeof children === 'string') {
-        children = capitalize(children.replace(/^[^\s]+\.([^.]+)/, '$1'));
+        const [first, ...rest] = children.split(/\s+/);
+
+        const name = disassembleCamel(first.replace(/^[^\s]+\.([^.]+)/, '$1'));
+
+        children = [name, ...rest].join(' ');
       }
 
       return { children, type: 'warning' };

striker-ui/out/_next/static/BQQcSBBTtNN9dIUZ9m3Ow/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,t,e,i,n,f,b,u,k,h,j,d,g,r,l,_,o,m){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,a,t,i,n,f,u,"static/chunks/6-dbef3ba2a090cb05.js",c,e,b,k,g,r,"static/chunks/pages/index-6febd0ab3b8c828c.js"],"/_error":["static/chunks/pages/_error-a9572f84d60f21da.js"],"/anvil":[s,a,t,i,n,f,u,"static/chunks/924-2a2fdb45d3e02493.js",c,e,b,k,g,"static/chunks/pages/anvil-38307a04a51f8094.js"],"/config":[s,a,t,n,h,d,c,e,j,"static/chunks/pages/config-1c39d13147dfe819.js"],"/file-manager":[s,a,t,i,f,h,l,"static/chunks/486-1480d7483e28c6f3.js",c,e,b,_,"static/chunks/pages/file-manager-c8a2ce2c02dc39fc.js"],"/init":[s,a,i,n,f,u,d,o,c,e,b,j,m,"static/chunks/pages/init-210f96453904f447.js"],"/login":[s,a,t,n,c,e,j,"static/chunks/pages/login-5fd1d7a2717b59af.js"],"/mail-config":[s,a,t,i,n,f,u,h,l,c,e,b,k,_,"static/chunks/pages/mail-config-14cdc2dd46514057.js"],"/manage-element":[s,a,t,i,n,f,u,h,d,o,"static/chunks/569-fa9b9ac8a7639d2d.js",c,e,b,k,j,m,"static/chunks/pages/manage-element-766bd9ef38ccbfa4.js"],"/server":[s,t,i,c,r,"static/chunks/pages/server-d81577dd0b817ba2.js"],sortedPages:["/","/_app","/_error","/anvil","/config","/file-manager","/init","/login","/mail-config","/manage-element","/server"]}}("static/chunks/494-413067ecdf8ec8f0.js","static/chunks/775-3f1c58f77437bd5d.js","static/chunks/804-a6d43595270ed0d2.js","static/chunks/416-b31c470a96d10e58.js","static/chunks/675-235890fb4812bd16.js","static/chunks/50-af452066db73e3df.js","static/chunks/263-5784adae0d1d8513.js","static/chunks/213-67c4f0768a44e039.js","static/chunks/633-900b9341a6a3bc53.js","static/chunks/310-4edb13985847ab25.js","static/chunks/733-a945bbb3c5f55f74.js","static/chunks/461-c4e18a515455805e.js","static/chunks/556-dbf62d8622405edc.js","static/chunks/203-ea1ab9b7c3c7694b.js","static/chunks/750-b9b6c5fdabc264a0.js","static/chunks/302-6490e226661e8e00.js","static/chunks/264-1be1a496ee1255c6.js","static/chunks/380-0eff6addb79bd61f.js","static/chunks/197-c291e38a27168218.js","static/chunks/270-56592f453c639f63.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

striker-ui/out/_next/static/JM2ldb5hOFExU7LFXSU9o/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,a,e,t,i,n,f,b,u,d,k,h,j,g,r,l,_,o,m){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,a,e,i,n,f,u,"static/chunks/6-dbef3ba2a090cb05.js",c,t,b,d,r,l,"static/chunks/pages/index-0e23f6af1e089a97.js"],"/_error":["static/chunks/pages/_error-a9572f84d60f21da.js"],"/anvil":[s,a,e,i,n,f,u,"static/chunks/924-2a2fdb45d3e02493.js",c,t,b,d,r,"static/chunks/pages/anvil-38307a04a51f8094.js"],"/config":[s,a,e,n,k,j,c,t,h,"static/chunks/pages/config-144ed56943e89e8c.js"],"/file-manager":[s,a,e,i,f,k,g,"static/chunks/486-45903b907cd7ece3.js",c,t,b,"static/chunks/pages/file-manager-8a23bb0baebac7f6.js"],"/init":[s,a,i,n,f,u,j,_,c,t,b,h,o,"static/chunks/pages/init-210f96453904f447.js"],"/login":[s,a,e,n,c,t,h,"static/chunks/pages/login-1d03dfaf2cb572f8.js"],"/mail-config":[s,a,e,i,n,f,u,k,g,c,t,b,d,m,"static/chunks/pages/mail-config-77c70d16ef879e90.js"],"/manage-element":[s,a,e,i,n,f,u,k,g,j,_,"static/chunks/814-6420b976d086fe20.js",c,t,b,d,h,o,m,"static/chunks/pages/manage-element-7ac129e45d98ff58.js"],"/server":[s,e,i,c,l,"static/chunks/pages/server-d81577dd0b817ba2.js"],sortedPages:["/","/_app","/_error","/anvil","/config","/file-manager","/init","/login","/mail-config","/manage-element","/server"]}}("static/chunks/494-413067ecdf8ec8f0.js","static/chunks/775-3f1c58f77437bd5d.js","static/chunks/804-a6d43595270ed0d2.js","static/chunks/416-b31c470a96d10e58.js","static/chunks/675-9a50fb0ae255b835.js","static/chunks/50-af452066db73e3df.js","static/chunks/263-5784adae0d1d8513.js","static/chunks/213-67c4f0768a44e039.js","static/chunks/633-900b9341a6a3bc53.js","static/chunks/310-4edb13985847ab25.js","static/chunks/733-a945bbb3c5f55f74.js","static/chunks/461-c4e18a515455805e.js","static/chunks/556-0c0cace3593e5307.js","static/chunks/203-ea1ab9b7c3c7694b.js","static/chunks/264-683b93ad6e70a8fb.js","static/chunks/750-9f873f4e10dbcacd.js","static/chunks/302-6490e226661e8e00.js","static/chunks/197-c291e38a27168218.js","static/chunks/270-9058c1049a825f7d.js","static/chunks/17-0593dc8fdd9c512e.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

striker-ui/pages/manage-element/index.tsx

@@ -8,15 +8,16 @@ import Grid from '../../components/Grid';
 import handleAPIError from '../../lib/handleAPIError';
 import Header from '../../components/Header';
 import ManageFencePanel from '../../components/ManageFence';
+import { ManageHost } from '../../components/ManageHost';
 import ManageManifestPanel from '../../components/ManageManifest';
 import ManageUpsPanel from '../../components/ManageUps';
-import { Panel } from '../../components/Panels';
+import { Panel, PanelHeader } from '../../components/Panels';
-import PrepareHostForm from '../../components/PrepareHostForm';
 import PrepareNetworkForm from '../../components/PrepareNetworkForm';
 import Spinner from '../../components/Spinner';
 import Tab from '../../components/Tab';
 import TabContent from '../../components/TabContent';
 import Tabs from '../../components/Tabs';
+import { HeaderText } from '../../components/Text';
 import useIsFirstRender from '../../hooks/useIsFirstRender';
 
 const TAB_ID_PREPARE_HOST = 'prepare-host';
@@ -42,7 +43,14 @@ const PrepareHostTabContent: FC = () => (
     layout={{
       'preparehost-left-column': {},
       'preparehost-center-column': {
-        children: <PrepareHostForm />,
+        children: (
+          <Panel>
+            <PanelHeader>
+              <HeaderText>Hosts</HeaderText>
+            </PanelHeader>
+            <ManageHost />
+          </Panel>
+        ),
         ...STEP_CONTENT_GRID_CENTER_COLUMN,
       },
     }}

striker-ui/types/CrudList.d.ts

@@ -24,6 +24,7 @@ type DeletePromiseChainGetter<T> = (
 ) => Promise<T>[];
 
 type CrudListOptionalProps<Overview> = {
+  entryUrlPrefix?: string;
   getAddLoading?: (previous?: boolean) => boolean;
   getDeletePromiseChain?: <T>(
     base: DeletePromiseChainGetter<T>,

striker-ui/types/FormSummary.d.ts

@@ -40,6 +40,8 @@ type RenderFormEntryFunction = (
   },
 ) => import('react').ReactElement;
 
+type SkipFormEntryFunction = (args: CommonFormEntryHandlerArgs) => boolean;
+
 type FormSummaryOptionalProps = {
   getEntryLabel?: GetFormEntryLabelFunction;
   getListProps?: GetFormEntriesPropsFunction;
@@ -48,6 +50,10 @@ type FormSummaryOptionalProps = {
   maxDepth?: number;
   renderEntry?: RenderFormEntryFunction;
   renderEntryValue?: RenderFormValueFunction;
+  skip?: (
+    base: SkipFormEntryFunction,
+    ...args: Parameters<SkipFormEntryFunction>
+  ) => ReturnType<SkipFormEntryFunction>;
 };
 
 type FormSummaryProps<T extends FormEntries> = FormSummaryOptionalProps & {

striker-ui/types/FormikUtils.d.ts

@@ -12,11 +12,6 @@ type FormikSubmitHandler<Values extends FormikValues> =
   import('formik').FormikConfig<Values>['onSubmit'];
 
 type FormikUtils<Values extends FormikValues> = {
-  disableAutocomplete: (
-    overwrite?: Partial<
-      import('../components/OutlinedInput').OutlinedInputProps
-    >,
-  ) => import('../components/OutlinedInput').OutlinedInputProps;
   disabledSubmit: boolean;
   formik: Formik<Values>;
   formikErrors: Messages;

striker-ui/types/ManageHost.d.ts

@@ -0,0 +1,38 @@
+type InquireHostResponse = APICommandInquireHostResponseBody & {
+  hostIpAddress: string;
+  hostPassword: string;
+};
+
+/** TestAccessForm */
+
+type TestAccessFormikValues = {
+  ip: string;
+  password: string;
+};
+
+type TestAccessFormProps = {
+  setResponse: React.Dispatch<
+    React.SetStateAction<InquireHostResponse | undefined>
+  >;
+};
+
+/** PrepareHostForm */
+
+/**
+ * @property hostType - Type of host to prepare; note that `node` is `subnode`
+ * due to renaming.
+ */
+type PrepareHostFormikValues = TestAccessFormikValues & {
+  enterpriseKey?: string;
+  name: string;
+  redhatConfirmPassword?: string;
+  redhatPassword?: string;
+  redhatUsername?: string;
+  type: '' | 'dr' | 'subnode';
+  uuid: string;
+};
+
+type PreapreHostFormProps = {
+  host: InquireHostResponse;
+  tools: CrudListFormTools;
+};

striker-ui/types/RadioGroupWithLabel.d.ts

@@ -3,18 +3,23 @@ type RadioItem<RadioItemValue> = {
   value: RadioItemValue;
 };
 
+type RadioItemList<Value = string> = Record<string, RadioItem<Value>>;
+
 type RadioGroupWithLabelOptionalProps = {
   formControlProps?: import('@mui/material').FormControlProps;
   formControlLabelProps?: import('@mui/material').FormControlLabelProps;
   formLabelProps?: import('@mui/material').FormLabelProps;
   label?: import('react').ReactNode;
-  onChange?: import('@mui/material').RadioGroupProps['onChange'];
   radioProps?: import('@mui/material').RadioProps;
   radioGroupProps?: import('@mui/material').RadioGroupProps;
 };
 
 type RadioGroupWithLabelProps<RadioItemValue = string> =
-  RadioGroupWithLabelOptionalProps & {
+  RadioGroupWithLabelOptionalProps &
+    Pick<
+      import('@mui/material').RadioGroupProps,
+      'name' | 'onChange' | 'value'
+    > & {
       id: string;
-    radioItems: { [id: string]: RadioItem<RadioItemValue> };
+      radioItems: RadioItemList<RadioItemValue>;
     };