@openshift-assisted/ui-lib 2.7.12-cim → 2.8.3-cim

package/lib/ocm/components/clusterConfiguration/OcmSingleNodeCheckbox.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  ClusterCreateParams,
+  getFieldId,
+  HelperText,
+  SupportLevel,
+  useFeature,
+} from '../../../common';
+import { useNewFeatureSupportLevel } from '../../../common/components/newFeatureSupportLevels';
+import { CheckboxFieldProps } from '../../../common/components/ui/formik/types';
+import NewFeatureSupportLevelBadge from '../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+export interface OcmCheckboxProps extends CheckboxFieldProps {
+  disabledReason?: string;
+  isSupportedVersionAvailable?: boolean;
+  supportLevel?: SupportLevel;
+}
+
+const OcmSingleNodeCheckbox: React.FC<OcmCheckboxProps> = ({
+  disabledReason,
+  isSupportedVersionAvailable,
+  validate,
+  idPostfix,
+  supportLevel,
+  ...props
+}) => {
+  const {
+    values: { openshiftVersion },
+  } = useFormikContext<ClusterCreateParams>();
+  const isSingleNodeOpenshiftEnabled = useFeature('ASSISTED_INSTALLER_SNO_FEATURE');
+  const [field, meta, helpers] = useField<'None' | 'Full'>({ name: props.name, validate });
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const prevVersionRef = React.useRef(openshiftVersion);
+  const prevIsDisabled = React.useRef(props.isDisabled);
+  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const { t } = useTranslation();
+  const { value } = meta;
+  const { setValue } = helpers;
+
+  const onChanged = React.useCallback(
+    (checked: boolean) => setValue(checked ? 'None' : 'Full'),
+    [setValue],
+  );
+
+  React.useEffect(() => {
+    if (
+      prevVersionRef.current !== openshiftVersion &&
+      !featureSupportLevelContext.isFeatureSupported('SNO')
+    ) {
+      //invoke updating SNO value only if the version changed to not be in danger of touching existing clusters
+      onChanged(false);
+    }
+    prevVersionRef.current = openshiftVersion;
+  }, [openshiftVersion, onChanged, featureSupportLevelContext]);
+
+  React.useEffect(() => {
+    if (prevIsDisabled.current !== props.isDisabled) {
+      onChanged(false);
+    }
+    prevIsDisabled.current = props.isDisabled;
+  }, [props.isDisabled, setValue, onChanged]);
+
+  if (isSingleNodeOpenshiftEnabled && isSupportedVersionAvailable) {
+    return (
+      <FormGroup isInline fieldId={fieldId}>
+        <Tooltip hidden={!disabledReason} content={disabledReason}>
+          <Checkbox
+            {...field}
+            {...props}
+            id={fieldId}
+            label={
+              <>
+                {t('ai:Install single node OpenShift (SNO)')}&nbsp;
+                <NewFeatureSupportLevelBadge featureId="SNO" supportLevel={supportLevel} />
+              </>
+            }
+            aria-describedby={`${fieldId}-helper`}
+            description={
+              <HelperText fieldId={fieldId}>
+                {t('ai:SNO enables you to install OpenShift using only one host.')}
+              </HelperText>
+            }
+            isChecked={value === 'None'}
+            onChange={onChanged}
+            className="with-tooltip"
+          />
+        </Tooltip>
+      </FormGroup>
+    );
+  }
+  return null;
+};
+
+export default OcmSingleNodeCheckbox;

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/CustomManifestsPage.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
+
+import { CustomManifests } from './components/CustomManifests';
+import { Cluster } from '../../../../common';
+import { CustomManifestFormState } from './components/propTypes';
+
+export const CustomManifestsPage = ({
+  cluster,
+  onFormStateChange: onFormStateChangeParent,
+}: {
+  cluster: Cluster;
+  onFormStateChange(formState: CustomManifestFormState): void;
+}) => {
+  const onFormStateChange = (formState: CustomManifestFormState) => {
+    const hasFilledData = !formState.isEmpty;
+    hasFilledData && onFormStateChangeParent(formState);
+  };
+
+  return (
+    <Grid hasGutter>
+      <TextContent>
+        <Text component={TextVariants.h2}>Custom manifests</Text>
+        <Text component={TextVariants.small}>
+          Upload additional manifests that will be applied at the install time for advanced
+          configuration of the cluster.
+        </Text>
+      </TextContent>
+      <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} />
+    </Grid>
+  );
+};

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/DeleteCustomManifestModal.tsx

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

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CollapsedManifest.tsx

@@ -0,0 +1,47 @@
+import { Flex, FlexItem, Label, StackItem } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { useField } from 'formik';
+import React from 'react';
+import { CustomManifestValues } from '../data/dataTypes';
+import { CustomManifestComponentProps } from './propTypes';
+
+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>
+    </>
+  );
+};
+
+export default CollapsedManifest;

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/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';
+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
+    aria-label="remove manifest"
+    style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
+    variant="plain"
+  >
+    <MinusCircleIcon onClick={onRemove} data-testid={dataTestId} />
+  </Button>
+);
+
+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/clusterConfiguration/manifestsConfiguration/components/CustomManifests.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ListManifestsExtended } from '../data/dataTypes';
+import { CustomManifestsFormProps, CustomManifestFormState } from './propTypes';
+import { getFormViewManifestsValidationSchema } from './customManifestsValidationSchema';
+import { Cluster } from '../../../../../common';
+import { CustomManifestsForm } from './CustomManifestsForm';
+import { getEmptyFormViewManifestsValues, getFormViewManifestValues } from './utils';
+
+export const CustomManifests = ({
+  cluster,
+  onFormStateChange,
+}: {
+  cluster: Cluster;
+  onFormStateChange: (formState: CustomManifestFormState) => void;
+}) => {
+  const [formProps, setFormProps] = React.useState<CustomManifestsFormProps>();
+
+  React.useEffect(() => {
+    setFormProps({
+      onFormStateChange: onFormStateChange,
+      validationSchema: getFormViewManifestsValidationSchema,
+
+      getInitialValues: (customManifests: ListManifestsExtended) => {
+        return getFormViewManifestValues(customManifests);
+      },
+      getEmptyValues: () => getEmptyFormViewManifestsValues(),
+      showEmptyValues: true,
+      cluster: cluster,
+    });
+  }, [cluster, onFormStateChange]);
+
+  if (!formProps) {
+    return null;
+  }
+
+  return <CustomManifestsForm {...formProps} />;
+};

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/CustomManifestsArray.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Button, ButtonVariant, Divider, Flex, FlexItem } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { FieldArrayRenderProps, useField } from 'formik';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import { LoadingState, useAlerts } from '../../../../../common';
+import ConfirmationModal from '../../../../../common/components/ui/ConfirmationModal';
+import { selectCurrentClusterPermissionsState } from '../../../../selectors';
+import { ClustersAPI } from '../../../../services/apis';
+import { getApiErrorMessage, handleApiError } from '../../../../api';
+import { CustomManifest } from './CustomManifest';
+import { getEmptyFormViewManifest, getManifestName } from './utils';
+import { CustomManifestValues } from '../data/dataTypes';
+
+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 [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(getEmptyFormViewManifest());
+  }, [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'],
+          );
+        } catch (e) {
+          handleApiError(e, () =>
+            addAlert({
+              title: 'Manifest could not be deleted',
+              message: getApiErrorMessage(e),
+            }),
+          );
+        }
+      }
+    },
+    [addAlert, field.value],
+  );
+
+  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()}
+        />
+      )}
+    </>
+  );
+};