@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/components/wizard/steps/customManifests/components/CustomManifestsForm.tsx

@@ -0,0 +1,183 @@
+import React, { PropsWithChildren } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  FieldArray,
+  FieldArrayRenderProps,
+  Formik,
+  FormikConfig,
+  useFormikContext,
+  yupToFormErrors,
+} from 'formik';
+import isEqual from 'lodash-es/isEqual.js';
+import { Form } from '@patternfly/react-core';
+
+import {
+  ErrorState,
+  LoadingState,
+  getApiErrorMessage,
+  handleApiError,
+  useAlerts,
+  useFormikAutoSave,
+} from '../../../../../../common';
+import { ClustersAPI } from '../../../../../services/apis';
+import { ClustersService } from '../../../../../services';
+import { selectCurrentClusterPermissionsState } from '../../../../../store';
+import { useClusterCustomManifests } from '../../../../../hooks';
+import { useClusterWizardContext } from '../../../clusterWizardContext';
+
+import { CustomManifestValues, ManifestFormData } from './types';
+import { CustomManifestsArray } from './CustomManifestsArray';
+import { CustomManifestsFormProps } from './propTypes';
+import { userProvidedManifests } from './utils';
+
+const fieldName = 'manifests';
+
+const AutosaveWithParentUpdate = ({
+  onFormStateChange,
+  getEmptyValues,
+}: {
+  onFormStateChange: CustomManifestsFormProps['onFormStateChange'];
+  getEmptyValues: CustomManifestsFormProps['getEmptyValues'];
+}) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const emptyValues = React.useMemo(() => getEmptyValues(), []);
+  const { isSubmitting, isValid, touched, errors, values } = useFormikContext<ManifestFormData>();
+  const isEmpty = React.useMemo<boolean>(() => {
+    return isEqual(values, emptyValues);
+  }, [values, emptyValues]);
+  const isAutoSaveRunning = useFormikAutoSave();
+
+  React.useEffect(() => {
+    onFormStateChange({ isSubmitting, isAutoSaveRunning, isValid, touched, errors, isEmpty });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSubmitting, isValid, isAutoSaveRunning, touched, errors]);
+
+  return null;
+};
+
+export const CustomManifestsForm = ({
+  onFormStateChange,
+  getEmptyValues,
+  cluster,
+  getInitialValues,
+  validationSchema,
+}: PropsWithChildren<CustomManifestsFormProps>) => {
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const [initialValues, setInitialValues] = React.useState<ManifestFormData | undefined>();
+  const { addAlert, clearAlerts } = useAlerts();
+  const { customManifests, isLoading, error } = useClusterCustomManifests(cluster.id || '', true);
+  const customManifestsLocalRef = React.useRef<CustomManifestValues[]>([]);
+  const { updateUISettings, uiSettings } = useClusterWizardContext();
+
+  React.useEffect(() => {
+    if (customManifests && !customManifestsLocalRef.current.length) {
+      const initValues = getInitialValues(customManifests);
+      setInitialValues(initValues);
+      customManifestsLocalRef.current =
+        userProvidedManifests(customManifests).length > 0 ? initValues.manifests : [];
+    }
+  }, [customManifests, getInitialValues]);
+
+  const handleSubmit: FormikConfig<ManifestFormData>['onSubmit'] = React.useCallback(
+    async ({ manifests }, actions) => {
+      clearAlerts();
+      if (manifests.length < customManifestsLocalRef.current.length) {
+        // submit was triggered by deleting a manifest
+        customManifestsLocalRef.current = manifests;
+        return;
+      } else {
+        actions.setSubmitting(true);
+
+        for (let index = 0; index < manifests.length; index++) {
+          try {
+            const manifest = manifests[index];
+            if (manifest.created) {
+              // update manifest
+              const oldManifest = customManifestsLocalRef.current[index];
+              await ClustersService.updateCustomManifest(oldManifest, manifest, cluster.id);
+              await updateUISettings({ customManifestsUpdated: true });
+            } else {
+              // add manifest
+              await ClustersAPI.createCustomManifest(
+                cluster.id,
+                ClustersService.transformFormViewManifest(manifest),
+              );
+
+              manifests[index].created = true;
+              if (!uiSettings?.customManifestsAdded) {
+                await updateUISettings({ customManifestsAdded: true });
+              }
+            }
+          } catch (error) {
+            const errorArray = new Array(manifests.length).fill(undefined);
+            errorArray.splice(index, 1, { manifestYaml: 'Failed to save changes' });
+
+            const errors = {
+              manifests: errorArray,
+            };
+            actions.setErrors(errors);
+
+            // handleApiErrorInForm(manifests, customManifestsLocalRef.current, actions);
+            handleApiError(error, () =>
+              addAlert({
+                title: 'Failed to update the custom manifests',
+                message: getApiErrorMessage(error),
+              }),
+            );
+          }
+        }
+
+        customManifestsLocalRef.current = manifests;
+
+        actions.setSubmitting(false);
+      }
+    },
+    [clearAlerts, cluster.id, uiSettings, updateUISettings, addAlert],
+  );
+
+  const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
+
+  const validate = (values: ManifestFormData) => {
+    try {
+      validationSchema.validateSync(values, { abortEarly: false, context: { values } });
+      return {};
+    } catch (error) {
+      return yupToFormErrors(error);
+    }
+  };
+
+  const renderManifests = React.useCallback(
+    (arrayRenderProps: FieldArrayRenderProps) => (
+      <CustomManifestsArray {...Object.assign({ clusterId: cluster.id }, arrayRenderProps)} />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  if (error) {
+    return <ErrorState />;
+  }
+
+  if (isLoading || !initialValues) {
+    return <LoadingState content="Loading custom manifests ..." />;
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      validate={validate}
+      enableReinitialize
+      validateOnMount
+      validateOnChange
+    >
+      <Form>
+        <FieldArray name={fieldName} render={renderManifests} />
+        <AutosaveWithParentUpdate
+          onFormStateChange={onFormStateChange}
+          getEmptyValues={getEmptyValues}
+        />
+      </Form>
+    </Formik>
+  );
+};

package/lib/ocm/components/wizard/steps/customManifests/components/DeleteCustomManifestModal.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
+
+export const DeleteCustomManifestModal = ({
+  isOpen,
+  onClose,
+  onDelete,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+}) => (
+  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
+    <ModalHeader title={'Remove custom manifests'} />
+    <ModalBody>
+      <Content>
+        All the data entered for custom manifests will be lost and there will not be any custom
+        manifests included in the installation.
+      </Content>
+    </ModalBody>
+    <ModalFooter>
+      <Button
+        data-testid="delete-manifest-submit"
+        key="confirm"
+        variant="danger"
+        onClick={onDelete}
+      >
+        Remove
+      </Button>
+      <Button key="cancel" variant="link" onClick={onClose}>
+        Cancel
+      </Button>
+    </ModalFooter>
+  </Modal>
+);

package/lib/ocm/components/wizard/steps/customManifests/components/ExpandedManifest.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useField } from 'formik';
+import { Language } from '@patternfly/react-code-editor';
+import { ExpandableSection, Grid, GridItem } from '@patternfly/react-core';
+import { PopoverIcon, fileSize, MAX_FILE_SIZE_BYTES } from '../../../../../../common';
+import { OcmInputField, OcmCodeField } from '../../../../ui';
+import { CustomManifestComponentProps } from './propTypes';
+import { FolderDropdown } from './FolderDropdown';
+import { CustomManifestValues } from './types';
+
+const getDownloadFileName = (manifestIdx: number, value: CustomManifestValues) => {
+  return value.folder && value.filename
+    ? `${value.folder}/${value.filename.replace('.yaml', '')}`
+    : `custom_manifest_${manifestIdx}`;
+};
+
+export const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentProps) => {
+  const [{ value }] = useField<CustomManifestValues>({
+    name: fieldName,
+  });
+
+  return (
+    <ExpandableSection
+      isDetached
+      key={manifestIdx}
+      isExpanded
+      data-testid={`expanded-manifest-${manifestIdx}`}
+    >
+      <Grid hasGutter span={12}>
+        <GridItem span={6}>
+          <FolderDropdown name={`${fieldName}.folder`} data-testid={`folder-${manifestIdx}`} />
+        </GridItem>
+        <GridItem span={6}>
+          <OcmInputField
+            name={`${fieldName}.filename`}
+            isRequired
+            data-testid={`filename-${manifestIdx}`}
+            helperText={`Use yaml, yml or JSON file types. File size must not exceed ${fileSize(
+              MAX_FILE_SIZE_BYTES,
+              0,
+              'si',
+            )}.`}
+            label={
+              <>
+                <span>File name</span>{' '}
+                <PopoverIcon
+                  bodyContent={
+                    'File name determines order of executing manifests during the installation. For example "manifest1.yaml" will be applied before "manifest2.yaml"'
+                  }
+                />
+              </>
+            }
+          />
+        </GridItem>
+        <GridItem span={12}>
+          <OcmCodeField
+            language={Language.yaml}
+            name={`${fieldName}.manifestYaml`}
+            dataTestid={`yamlContent-${manifestIdx}`}
+            label="Content"
+            isRequired
+            downloadFileName={getDownloadFileName(manifestIdx, value)}
+            isReadOnly
+            showCustomControls
+          />
+        </GridItem>
+      </Grid>
+    </ExpandableSection>
+  );
+};

package/lib/ocm/components/wizard/steps/customManifests/components/FolderDropdown.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {
+  HelperText,
+  FormGroup,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
+import { useField } from 'formik';
+import { getFieldId } from '../../../../../../common/components/ui/formik';
+import { PopoverIcon } from '../../../../../../common';
+
+const FolderLabel = () => {
+  return (
+    <>
+      Folder{' '}
+      <PopoverIcon
+        bodyContent={
+          <>
+            To overwrite an existing manifest, save the new manifest in the same folder with the
+            same name.
+          </>
+        }
+      />
+    </>
+  );
+};
+
+type FolderDropdownProps = {
+  name: string;
+};
+
+const dropdownItems = [
+  <DropdownItem key="manifests" id="manifests">
+    {'manifests'}
+  </DropdownItem>,
+  <DropdownItem key="openshift" id="openshift">
+    {'openshift'}
+  </DropdownItem>,
+];
+
+export const FolderDropdown = ({ name }: FolderDropdownProps) => {
+  const [field, { value }, { setValue }] = useField<string>(name);
+  const [isOpen, setOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
+    setValue(event?.currentTarget.id as string);
+    setOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v6-u-w-100"
+      id={fieldId}
+      data-testid="folder-dropdown-toggle"
+    >
+      {value || 'manifests'}
+    </MenuToggle>
+  );
+
+  return (
+    <FormGroup fieldId={fieldId} label={<FolderLabel />} isRequired>
+      <Dropdown
+        {...field}
+        id={fieldId}
+        onOpenChange={() => setOpen(!isOpen)}
+        onSelect={onSelect}
+        toggle={toggle}
+        isOpen={isOpen}
+      >
+        {dropdownItems}
+      </Dropdown>
+      <HelperText style={{ display: 'inherit' }}>
+        {'Manifests can be placed in "manifests" or "openshift" directories.'}
+      </HelperText>
+    </FormGroup>
+  );
+};

package/lib/ocm/components/wizard/steps/customManifests/components/index.tsx

@@ -0,0 +1,4 @@
+export * from './propTypes';
+export * from './utils';
+export * from './CustomManifests';
+export * from './DeleteCustomManifestModal';

package/lib/ocm/components/wizard/steps/customManifests/components/propTypes.ts

@@ -0,0 +1,28 @@
+import Yup from 'yup';
+import { FormikErrors, FormikTouched } from 'formik';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { ManifestFormData, ListManifestsExtended } from './types';
+
+export type CustomManifestFormState = {
+  isAutoSaveRunning: boolean;
+  isValid: boolean;
+  isSubmitting: boolean;
+  touched: FormikTouched<object>;
+  errors: FormikErrors<object>;
+  isEmpty: boolean;
+};
+
+export type CustomManifestsFormProps = {
+  onFormStateChange(formState: CustomManifestFormState): void;
+  showEmptyValues: boolean;
+  getInitialValues(customManifests: ListManifestsExtended): ManifestFormData;
+  getEmptyValues(): ManifestFormData;
+  validationSchema: Yup.ObjectSchema<Yup.AnyObject>;
+  cluster: Cluster;
+};
+
+export type CustomManifestComponentProps = {
+  manifestIdx: number;
+  fieldName: string;
+  isDisabled?: boolean;
+};

package/lib/ocm/components/wizard/steps/customManifests/components/utils.tsx

@@ -0,0 +1,51 @@
+import { CustomManifestValues, ListManifestsExtended, ManifestFormData } from './types';
+
+/** Manifests created by the installer (e.g. OVE defaults); not editable in the wizard. */
+export const userProvidedManifests = <T extends { manifestSource?: string }>(
+  manifests: T[] | undefined,
+): T[] => (manifests ?? []).filter((m) => m.manifestSource !== 'system');
+
+export const getManifestName = (manifestIdx: number) => `Custom manifest ${manifestIdx + 1}`;
+
+export const getFormData = (manifests: ListManifestsExtended): ManifestFormData => {
+  return {
+    manifests: getClusterCustomManifests(manifests),
+  };
+};
+
+export const getEmptyManifest = (): CustomManifestValues => {
+  return {
+    folder: 'manifests',
+    filename: '',
+    manifestYaml: '',
+    created: false,
+  };
+};
+
+export const getManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
+  const userManifests = userProvidedManifests(manifests);
+  if (userManifests.length > 0) {
+    return getFormData(userManifests);
+  }
+  return getEmptyManifestsValues();
+};
+
+export const getEmptyManifestsValues = (): ManifestFormData => {
+  return { manifests: [getEmptyManifest()] };
+};
+
+export const getClusterCustomManifests = (
+  customManifests: ListManifestsExtended,
+): CustomManifestValues[] => {
+  const userManifests = userProvidedManifests(customManifests);
+  if (userManifests.length > 0) {
+    return userManifests.map((manifest) => ({
+      folder: manifest.folder || 'manifests',
+      filename: manifest.fileName || '',
+      manifestYaml: manifest.yamlContent || '',
+      created: true,
+    }));
+  } else {
+    return [getEmptyManifest()];
+  }
+};

package/lib/ocm/components/wizard/steps/customManifests/components/validationSchema.tsx

@@ -0,0 +1,92 @@
+import * as Yup from 'yup';
+import { TFunction } from 'i18next';
+import { CustomManifestValues } from './types';
+import {
+  getMaxFileSizeMessage,
+  validateFileSize,
+  validateFileName,
+  validateFileType,
+  getIncorrectFileTypeMessage,
+} from '../../../../../../common';
+
+/* eslint-disable */
+type CustomManifestMapper = (a: CustomManifestValues) => string;
+
+declare module 'yup' {
+  interface ArraySchema<
+    TIn extends any[] | null | undefined,
+    TContext,
+    TDefault = undefined,
+    TFlags extends Yup.Flags = '',
+  > {
+    uniqueManifestFiles(message: string, mapper: CustomManifestMapper): this;
+  }
+}
+/* eslint-enable */
+
+Yup.addMethod(
+  Yup.array,
+  'uniqueManifestFiles',
+  function (message: string, mapper: CustomManifestMapper) {
+    return this.test('unique', message, function (list: CustomManifestValues[] | undefined) {
+      if (!list) return true;
+
+      const seen = new Set();
+      const errors: Yup.ValidationError[] = [];
+
+      list.forEach((item, index) => {
+        const mappedValue = mapper(item);
+        if (seen.has(mappedValue)) {
+          errors.push(
+            this.createError({
+              path: `${this.path}[${index}].filename`,
+              message,
+            }),
+          );
+        }
+        seen.add(mappedValue);
+      });
+
+      if (errors.length > 0) {
+        throw new Yup.ValidationError(errors);
+      }
+
+      return true;
+    });
+  },
+);
+
+const INCORRECT_FILENAME =
+  'Must have a yaml, yml, json, yaml.patch or yml.patch extension and can not contain /.';
+
+const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
+
+export const getFormViewManifestsValidationSchema = (t: TFunction) =>
+  Yup.object({
+    manifests: Yup.array<CustomManifestValues>()
+      .of(
+        Yup.object({
+          folder: Yup.mixed().required('Required'),
+          filename: Yup.string()
+            .required('Required')
+            .min(1, 'Number of characters must be 1-255')
+            .max(255, 'Number of characters must be 1-255')
+            .test('not-correct-filename', INCORRECT_FILENAME, (value: string) => {
+              return validateFileName(value);
+            }),
+          manifestYaml: Yup.string().when('filename', {
+            is: (filename: string) => !filename.includes('patch'),
+            then: () =>
+              Yup.string()
+                .required('Required')
+                .test('not-big-file', getMaxFileSizeMessage(t), validateFileSize)
+                .test('not-valid-file', getIncorrectFileTypeMessage(t), validateFileType),
+            otherwise: () =>
+              Yup.string()
+                .required('Required')
+                .test('not-big-file', getMaxFileSizeMessage(t), validateFileSize), // Validation of file content is not required if filename contains 'patch'
+          }),
+        }),
+      )
+      .uniqueManifestFiles(UNIQUE_FOLDER_FILENAME, (val: CustomManifestValues) => val.filename),
+  });

package/lib/ocm/components/wizard/steps/customManifests/index.tsx

@@ -0,0 +1 @@
+export * from './CustomManifestStep';

package/lib/ocm/components/wizard/steps/disconnected/BasicStep.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Grid, GridItem, Content, Flex, Form } from '@patternfly/react-core';
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  StaticTextField,
+  WithErrorBoundary,
+} from '../../../../../common';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { ClusterWizardNavigation, ClusterWizardFooter } from '../../wizardComponents';
+import { InstallDisconnectedSwitch } from './InstallDisconnectedSwitch';
+
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
+
+export const BasicStep = () => {
+  const { moveNext } = useClusterWizardContext();
+
+  return (
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={<ClusterWizardFooter onNext={moveNext} />}
+    >
+      <WithErrorBoundary title="Failed to load Basic step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Basic information</Content>
+          </GridItem>
+          <GridItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+              <InstallDisconnectedSwitch />
+              <span>I'm installing on a disconnected/air-gapped/secured environment</span>
+              <TechnologyPreview />
+            </Flex>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-basic-info__form">
+              <StaticTextField name="openshiftVersion" label="OpenShift version">
+                {DISCONNECTED_OPENSHIFT_VERSION}
+              </StaticTextField>
+              <StaticTextField name="cpuArchitecture" label="CPU architecture">
+                x86_64
+              </StaticTextField>
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};