@openshift-assisted/ui-lib 2.55.1 → 2.56.0

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ClusterWizardStep,
+  getFormikErrorFields,
+  useAlerts,
+  WithErrorBoundary,
+} from '../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../store';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { ClusterWizardFooter, ClusterWizardNavigation } from '../../wizardComponents';
+import { CustomManifestFormState } from './components';
+import { CustomManifestsPage } from './CustomManifestsPage';
+
+const getInitialFormStateProps = () => {
+  return {
+    isValid: true,
+    isSubmitting: false,
+    isAutoSaveRunning: false,
+    errors: {},
+    touched: {},
+    isEmpty: true,
+  };
+};
+
+export const CustomManifestStep = ({ cluster }: { cluster: Cluster }) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const { alerts } = useAlerts();
+  const [formState, setFormStateProps] = React.useState<CustomManifestFormState>(
+    getInitialFormStateProps(),
+  );
+
+  const onFormStateChange = (formState: CustomManifestFormState) => {
+    if (!isViewerMode) {
+      setFormStateProps(formState);
+    }
+  };
+
+  const isNextDisabled =
+    formState.isAutoSaveRunning || !formState.isValid || !!alerts.length || formState.isSubmitting;
+  const errorFields = getFormikErrorFields<object>(formState.errors, formState.touched);
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      alertTitle="Custom manifests configuration contains missing or invalid fields"
+      alertContent={null}
+      errorFields={errorFields}
+      isSubmitting={formState.isSubmitting}
+      onNext={() => clusterWizardContext.moveNext()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isNextDisabled={isNextDisabled}
+      isBackDisabled={formState.isSubmitting || formState.isAutoSaveRunning}
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <WithErrorBoundary title="Failed to load Custom manifests step">
+        <CustomManifestsPage {...{ cluster, onFormStateChange }} />
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import {
+  Content,
+  ContentVariants,
+  Alert,
+  Grid,
+  FormGroup,
+  Switch,
+  Tooltip,
+} from '@patternfly/react-core';
+
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ClustersAPI,
+  ClusterWizardStepHeader,
+  CustomManifestsAlert,
+  isThirdPartyCNI,
+  getFieldId,
+} from '../../../../../common';
+import { ClustersService } from '../../../../services';
+import { isOciPlatformType } from '../../../utils';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import {
+  CustomManifestFormState,
+  userProvidedManifests,
+  CustomManifests,
+  DeleteCustomManifestModal,
+} from './components';
+
+export const CustomManifestsPage = ({
+  cluster,
+  onFormStateChange,
+}: {
+  cluster: Cluster;
+  onFormStateChange(formState: CustomManifestFormState): void;
+}) => {
+  const clusterWizardContext = useClusterWizardContext();
+  const isRequired = isThirdPartyCNI(cluster.networkType) || isOciPlatformType(cluster);
+  const [useCustomManifests, setUseCustomManifests] = React.useState(isRequired);
+  const [isDeleteModalOpen, setDeleteModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isRequired || clusterWizardContext.uiSettings?.customManifestsAdded) {
+      setUseCustomManifests(true);
+    }
+  }, [isRequired, clusterWizardContext]);
+
+  // The form unmounts when the switch is off, but its last state persists in the parent.
+  React.useEffect(() => {
+    if (!useCustomManifests) {
+      onFormStateChange({
+        isValid: true,
+        isSubmitting: false,
+        isAutoSaveRunning: false,
+        errors: {},
+        touched: {},
+        isEmpty: true,
+      });
+    }
+  }, [useCustomManifests, onFormStateChange]);
+
+  const handleSwitchChange = React.useCallback(
+    (_event: React.FormEvent<HTMLInputElement>, on: boolean) => {
+      if (!on && clusterWizardContext.uiSettings?.customManifestsAdded) {
+        setDeleteModalOpen(true);
+      } else {
+        setUseCustomManifests(on);
+        if (!on) {
+          void clusterWizardContext.updateUISettings({ customManifestsAdded: false });
+        }
+      }
+    },
+    [clusterWizardContext],
+  );
+
+  const handleCloseDeleteModal = React.useCallback(() => {
+    setDeleteModalOpen(false);
+  }, []);
+
+  const cleanCustomManifests = React.useCallback(async () => {
+    if (!clusterWizardContext.uiSettings?.customManifestsAdded || !cluster.id) return;
+    const { data: manifests } = await ClustersAPI.getManifests(cluster.id);
+    const manifestsToRemove = userProvidedManifests(manifests).map((manifest) => ({
+      ...manifest,
+      folder: manifest.folder || 'manifests',
+      fileName: manifest.fileName || '',
+      yamlContent: '',
+    }));
+    await ClustersService.removeClusterManifests(manifestsToRemove, cluster.id);
+    setUseCustomManifests(false);
+    setDeleteModalOpen(false);
+    await clusterWizardContext.updateUISettings({
+      customManifestsAdded: false,
+      customManifestsUpdated: true,
+    });
+  }, [cluster.id, clusterWizardContext]);
+
+  const fieldId = getFieldId('use-custom-manifests', 'switch');
+
+  const tooltipWhenDisabled = isRequired
+    ? 'Custom manifests are required when using a third-party CNI or Oracle Cloud Infrastructure.'
+    : '';
+
+  return (
+    <Grid hasGutter>
+      <Content>
+        <ClusterWizardStepHeader>Custom manifests</ClusterWizardStepHeader>
+        <Content component={ContentVariants.small}>
+          Upload additional manifests that will be applied at the install time for advanced
+          configuration of the cluster.
+        </Content>
+      </Content>
+      <FormGroup fieldId={fieldId} label="">
+        <Tooltip content={tooltipWhenDisabled} hidden={!isRequired}>
+          <span style={{ display: 'inline-block', cursor: isRequired ? 'not-allowed' : undefined }}>
+            <Switch
+              id={fieldId}
+              data-testid={fieldId}
+              data-checked={useCustomManifests}
+              isChecked={useCustomManifests}
+              isDisabled={isRequired}
+              onChange={handleSwitchChange}
+              label="Use custom manifests"
+            />
+          </span>
+        </Tooltip>
+      </FormGroup>
+      {!useCustomManifests && <div style={{ minHeight: '250px' }} aria-hidden="true" />}
+      {useCustomManifests && (
+        <>
+          <CustomManifestsAlert
+            usesExternalPlatform={isOciPlatformType(cluster)}
+            usesThirdPartyCNI={isThirdPartyCNI(cluster.networkType)}
+          />
+          <Alert
+            isInline
+            variant="warning"
+            title="No validation is performed for the custom manifest contents. Only include resources that are necessary for initial setup to reduce the chance of installation failures."
+          />
+          <CustomManifests cluster={cluster} onFormStateChange={onFormStateChange} />
+        </>
+      )}
+      <DeleteCustomManifestModal
+        isOpen={isDeleteModalOpen}
+        onClose={handleCloseDeleteModal}
+        onDelete={() => void cleanCustomManifests()}
+      />
+    </Grid>
+  );
+};

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useField } from 'formik';
+import { Flex, FlexItem, Label, StackItem } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { CustomManifestComponentProps } from './propTypes';
+import { CustomManifestValues } from './types';
+
+export const CollapsedManifest = ({ manifestIdx, fieldName }: CustomManifestComponentProps) => {
+  const [{ value }, { error }] = useField<CustomManifestValues>({
+    name: fieldName,
+  });
+
+  return (
+    <>
+      <StackItem data-testid={`collapsed-manifest-${manifestIdx}`}>
+        <Flex>
+          {error && (
+            <>
+              <FlexItem>
+                <Label
+                  variant="outline"
+                  color="red"
+                  icon={<InfoCircleIcon />}
+                  data-testid="manifest-errors-label"
+                >
+                  Missing information
+                </Label>
+              </FlexItem>
+            </>
+          )}
+          {!error && value.filename && (
+            <>
+              <FlexItem>
+                <Label
+                  variant="outline"
+                  data-testid="manifest-name"
+                >{`${value.folder}/${value.filename}`}</Label>{' '}
+              </FlexItem>
+            </>
+          )}
+        </Flex>
+      </StackItem>
+    </>
+  );
+};

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Grid, Flex, FlexItem, ExpandableSectionToggle, Button } from '@patternfly/react-core';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { getFormikArrayItemFieldName } from '../../../../../../common';
+import { getManifestName } from './utils';
+import { CollapsedManifest } from './CollapsedManifest';
+import { ExpandedManifest } from './ExpandedManifest';
+
+type CustomManifestProps = {
+  manifestIdx: number;
+  onRemove: () => void;
+  onToggleExpand: (isExpanded: boolean) => void;
+  isExpanded: boolean;
+  isDisabled: boolean;
+  fieldName: string;
+  enableRemoveManifest: boolean;
+};
+
+export const RemoveItemButton = ({
+  onRemove,
+  showRemoveButton,
+  dataTestId,
+}: {
+  onRemove: () => void;
+  showRemoveButton: boolean;
+  dataTestId: string;
+}) => (
+  <Button
+    icon={<MinusCircleIcon onClick={onRemove} />}
+    data-testid={dataTestId}
+    aria-label="remove manifest"
+    style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
+    variant="plain"
+  />
+);
+
+export const CustomManifest = ({
+  fieldName,
+  manifestIdx,
+  onRemove,
+  onToggleExpand,
+  isExpanded,
+  isDisabled,
+  enableRemoveManifest,
+}: CustomManifestProps) => {
+  const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+  const updateShowRemoveButton = (value: boolean) => {
+    if (isDisabled) {
+      return;
+    }
+    if (!enableRemoveManifest) {
+      setShowRemoveButton(false);
+    } else {
+      setShowRemoveButton(value);
+    }
+  };
+  const manifestFieldName = getFormikArrayItemFieldName(fieldName, manifestIdx);
+
+  return (
+    <Grid
+      onMouseEnter={() => updateShowRemoveButton(true)}
+      onMouseLeave={() => updateShowRemoveButton(false)}
+      hasGutter
+    >
+      <Flex>
+        <FlexItem>
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggleExpand}
+            direction="down"
+            data-testid={`toggle-manifest-${manifestIdx}`}
+          >
+            {getManifestName(manifestIdx)}
+          </ExpandableSectionToggle>
+        </FlexItem>
+        {!isDisabled && enableRemoveManifest && (
+          <FlexItem align={{ default: 'alignRight' }}>
+            <RemoveItemButton
+              onRemove={onRemove}
+              showRemoveButton={showRemoveButton}
+              dataTestId={`remove-manifest-${manifestIdx}`}
+            />
+          </FlexItem>
+        )}
+      </Flex>
+
+      {isExpanded ? (
+        <ExpandedManifest
+          fieldName={manifestFieldName}
+          manifestIdx={manifestIdx}
+          isDisabled={isDisabled}
+        />
+      ) : (
+        <CollapsedManifest manifestIdx={manifestIdx} fieldName={manifestFieldName} />
+      )}
+    </Grid>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useTranslation } from '../../../../../../common';
+import { getFormViewManifestsValidationSchema } from './validationSchema';
+import { CustomManifestsFormProps, CustomManifestFormState } from './propTypes';
+import { getEmptyManifestsValues, getManifestValues } from './utils';
+import { CustomManifestsForm } from './CustomManifestsForm';
+import { ListManifestsExtended } from './types';
+
+export const CustomManifests = ({
+  cluster,
+  onFormStateChange,
+}: {
+  cluster: Cluster;
+  onFormStateChange: (formState: CustomManifestFormState) => void;
+}) => {
+  const { t } = useTranslation();
+  const [formProps, setFormProps] = React.useState<CustomManifestsFormProps>();
+
+  React.useEffect(() => {
+    setFormProps({
+      onFormStateChange: onFormStateChange,
+      validationSchema: getFormViewManifestsValidationSchema(t),
+
+      getInitialValues: (customManifests: ListManifestsExtended) => {
+        return getManifestValues(customManifests);
+      },
+      getEmptyValues: () => getEmptyManifestsValues(),
+      showEmptyValues: true,
+      cluster: cluster,
+    });
+  }, [cluster, onFormStateChange, t]);
+
+  if (!formProps) {
+    return null;
+  }
+
+  return <CustomManifestsForm {...formProps} />;
+};

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import { FieldArrayRenderProps, useField } from 'formik';
+import { Button, ButtonVariant, Divider, Flex, FlexItem } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import {
+  LoadingState,
+  useAlerts,
+  ConfirmationModal,
+  getApiErrorMessage,
+  handleApiError,
+} from '../../../../../../common';
+import { ClustersAPI } from '../../../../../services/apis';
+import { selectCurrentClusterPermissionsState } from '../../../../../store';
+import { useClusterWizardContext } from '../../../clusterWizardContext';
+import { CustomManifest } from './CustomManifest';
+import { getEmptyManifest, getManifestName } from './utils';
+import { CustomManifestValues } from './types';
+
+const fieldName = 'manifests';
+
+type CustomManifestsArrayProps = { clusterId: string } & FieldArrayRenderProps;
+type ExpandedManifests = { [manifestIdx: number]: boolean };
+
+const getExpandedManifestsInitialValue = (numManifests: number): ExpandedManifests => {
+  const ret: Record<number, boolean> = {};
+  for (let i = 0; i < numManifests; ++i) {
+    ret[i] = false;
+  }
+  return ret;
+};
+
+const getExpandedManifestsDefaultValue = (numManifests: number): ExpandedManifests => {
+  const ret = getExpandedManifestsInitialValue(numManifests);
+  if (numManifests === 1) {
+    ret[0] = true;
+  }
+  return ret;
+};
+
+export const CustomManifestsArray = ({
+  push,
+  remove,
+  clusterId,
+  ...props
+}: CustomManifestsArrayProps) => {
+  const { updateUISettings } = useClusterWizardContext();
+
+  const [field, { error }] = useField<CustomManifestValues[]>({
+    name: fieldName,
+  });
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const [expandedManifests, setExpandedManifests] = React.useState<ExpandedManifests>(
+    getExpandedManifestsDefaultValue(field.value.length),
+  );
+  const [manifestIdxToRemove, setManifestIdxToRemove] = React.useState<number | null>(null);
+  const { addAlert } = useAlerts();
+
+  const onAddManifest = React.useCallback(() => {
+    const newExpandedManifests = getExpandedManifestsInitialValue(field.value.length + 1);
+    newExpandedManifests[field.value.length] = true;
+    setExpandedManifests(newExpandedManifests);
+    push(getEmptyManifest());
+  }, [field.value.length, push]);
+
+  const removeManifest = React.useCallback(
+    async (clusterId: string, manifestIdx: number) => {
+      const manifestToRemove = field.value[manifestIdx];
+      if ((manifestToRemove['folder'] as string) !== '' && manifestToRemove['filename'] !== '') {
+        try {
+          await ClustersAPI.removeCustomManifest(
+            clusterId,
+            manifestToRemove['folder'] as string,
+            manifestToRemove['filename'],
+          );
+          await updateUISettings({ customManifestsUpdated: true });
+        } catch (e) {
+          handleApiError(e, () =>
+            addAlert({
+              title: 'Manifest could not be deleted',
+              message: getApiErrorMessage(e),
+            }),
+          );
+        }
+      }
+    },
+    [addAlert, field.value, updateUISettings],
+  );
+
+  const onConfirm = React.useCallback(async (): Promise<void> => {
+    if (manifestIdxToRemove !== null) {
+      await removeManifest(clusterId, manifestIdxToRemove);
+      remove(manifestIdxToRemove);
+      setManifestIdxToRemove(null);
+    }
+  }, [removeManifest, clusterId, remove, manifestIdxToRemove, setManifestIdxToRemove]);
+
+  if (field.value === undefined) {
+    return <LoadingState />;
+  }
+
+  return (
+    <>
+      {field.value.map((_data, manifestIdx) => {
+        const onToggleExpand = (isExpanded: boolean) => {
+          const newExpandedManifests = cloneDeep(expandedManifests);
+          newExpandedManifests[manifestIdx] = isExpanded;
+          setExpandedManifests(newExpandedManifests);
+        };
+        return (
+          <React.Fragment key={manifestIdx}>
+            <CustomManifest
+              manifestIdx={manifestIdx}
+              onToggleExpand={onToggleExpand}
+              isExpanded={expandedManifests[manifestIdx]}
+              isDisabled={isViewerMode}
+              onRemove={() => setManifestIdxToRemove(manifestIdx)}
+              fieldName={fieldName}
+              enableRemoveManifest={field.value.length > 1}
+              {...props}
+            />
+
+            <Divider />
+          </React.Fragment>
+        );
+      })}
+
+      {
+        <Flex>
+          <FlexItem>
+            <Button
+              icon={<PlusCircleIcon />}
+              variant="link"
+              isInline
+              onClick={onAddManifest}
+              data-testid="add-manifest"
+              isDisabled={!!error}
+            >
+              Add another manifest
+            </Button>
+          </FlexItem>
+        </Flex>
+      }
+
+      {manifestIdxToRemove !== null && (
+        <ConfirmationModal
+          title={`Delete ${getManifestName(manifestIdxToRemove)}?`}
+          titleIconVariant="warning"
+          confirmationButtonText="Delete"
+          confirmationButtonVariant={ButtonVariant.danger}
+          content={
+            <>
+              <p>{`All the data entered for ${getManifestName(
+                manifestIdxToRemove,
+              )} will be lost`}</p>
+            </>
+          }
+          onClose={() => setManifestIdxToRemove(null)}
+          onConfirm={() => void onConfirm()}
+        />
+      )}
+    </>
+  );
+};