@openshift-assisted/ui-lib 2.48.5 → 2.49.0

package/lib/cim/components/ClusterDeployment/{ClusterDetailsFormFields.tsx → clusterDetails/ClusterDetailsFormFields.tsx}

@@ -3,23 +3,24 @@ import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 
 import {
+  ExternalPlatformsDropdown,
   isMajorMinorVersionEqualOrGreater,
   OpenShiftVersionDropdown,
   OpenShiftVersionModal,
-} from '../../../common';
-import { StaticTextField } from '../../../common/components/ui/StaticTextField';
-import { PullSecret } from '../../../common/components/clusters';
-import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../common/types';
+} from '../../../../common';
+import { StaticTextField } from '../../../../common/components/ui/StaticTextField';
+import { PullSecret } from '../../../../common/components/clusters';
+import { OpenshiftVersionOptionType, SupportedCpuArchitecture } from '../../../../common/types';
 import {
   InputField,
   RichInputField,
   acmClusterNameValidationMessages,
-} from '../../../common/components/ui/formik';
-import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
-import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
-import { getNetworkType } from '../helpers';
+} from '../../../../common/components/ui/formik';
+import { ClusterDetailsValues } from '../../../../common/components/clusterWizard/types';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import CpuArchitectureDropdown from '../../common/CpuArchitectureDropdown';
+import ControlPlaneNodesDropdown from '../../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+import { getNetworkType } from '../../helpers';
 
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
@@ -69,7 +70,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   React.useEffect(() => {
     if (!versions.length && !values.openshiftVersion) {
       const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
-      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion);
+      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion?.value);
       setFieldValue('openshiftVersion', fallbackOpenShiftVersion?.value);
       setFieldValue('networkType', getNetworkType(fallbackOpenShiftVersion));
     }
@@ -89,28 +90,23 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
     [versions],
   );
 
-  const additionalSelectOptions = React.useMemo(() => {
+  const additionalSelectOption = React.useMemo(() => {
     if (
       values.customOpenshiftSelect &&
-      !selectOptions.some((option) => option.value === values.customOpenshiftSelect?.value)
+      !versions.some((version) => version.value === values.customOpenshiftSelect)
     ) {
-      return [
-        {
-          value: values.customOpenshiftSelect.value,
-          label: values.customOpenshiftSelect.label,
-        },
-      ];
+      return allVersions.find((option) => option.value === values.customOpenshiftSelect);
     }
-    return [];
-  }, [selectOptions, values.customOpenshiftSelect]);
+    return undefined;
+  }, [allVersions, values.customOpenshiftSelect, versions]);
 
   const allowTNA = React.useMemo(() => {
     const current =
-      values.customOpenshiftSelect?.version ||
+      values.customOpenshiftSelect ||
       versions.find((version) => version.value === values.openshiftVersion)?.version;
 
     return isMajorMinorVersionEqualOrGreater(current, '4.19') && values.platform === 'baremetal';
-  }, [values.customOpenshiftSelect?.version, values.openshiftVersion, values.platform, versions]);
+  }, [values.customOpenshiftSelect, values.openshiftVersion, values.platform, versions]);
 
   return (
     <Form id="wizard-cluster-details__form">
@@ -159,7 +155,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
             versions={versions}
             showReleasesLink={false}
             showOpenshiftVersionModal={() => setOpenshiftVersionModalOpen(true)}
-            customItems={additionalSelectOptions}
+            customItem={additionalSelectOption}
           />
           {openshiftVersionModalOpen && (
             <OpenShiftVersionModal
@@ -178,6 +174,8 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}
 
+      <ExternalPlatformsDropdown isDisabled={isEditFlow} />
+
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}
 
       {!isEditFlow && <PullSecret />}

package/lib/cim/components/ClusterDeployment/clusterDetails/index.tsx

@@ -0,0 +1,4 @@
+export * from './ClusterDeploymentDetailsStep';
+export * from './ClusterDeploymentDetailsForm';
+export * from './ACMClusterDeploymentDetailsStep';
+export * from './ClusterDetailsFormFields';

package/lib/cim/components/ClusterDeployment/{AdditionalNTPSourcesDialogToggle.tsx → components/AdditionalNTPSourcesDialogToggle.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 
 // TODO we should use hostValidationFailureHints instead of passing this 'action' which is actually a hint
 export const AdditionalNTPSourcesDialogToggle: React.FC = () => {

package/lib/cim/components/ClusterDeployment/components/index.tsx

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

package/lib/cim/components/ClusterDeployment/constants.ts

@@ -18,6 +18,7 @@ export const wizardStepNames = (
   'hosts-selection': t('ai:Cluster hosts'),
   'hosts-discovery': t('ai:Cluster hosts'),
   networking: t('ai:Networking'),
+  'custom-manifests': t('ai:Custom manifests'),
   review: t('ai:Review and create'),
 });
 

package/lib/cim/components/ClusterDeployment/customManifests/ClusterDeploymentCustomManifestsStep.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import { k8sPatch, Patch } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  Alert,
+  AlertActionLink,
+  Content,
+  ContentVariants,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { ClusterWizardStepHeader, useTranslation } from '../../../../common';
+import { AgentClusterInstallK8sResource, AgentClusterInstallModel } from '../../../types';
+import { ConfigMapForm, CustomManifestFormType } from './ConfigMapForm';
+import { appendPatch } from '../../../utils';
+
+export const ClusterDeploymentCustomManifestsStep = ({
+  agentClusterInstall,
+}: {
+  agentClusterInstall: AgentClusterInstallK8sResource;
+}) => {
+  const { t } = useTranslation();
+
+  const initialValues: CustomManifestFormType = {
+    configMaps:
+      agentClusterInstall.spec?.manifestsConfigMapRefs?.map(({ name }) => ({
+        name,
+        valid: false,
+      })) || [],
+  };
+
+  const validationSchema = Yup.lazy((values: CustomManifestFormType) =>
+    Yup.object<CustomManifestFormType>({
+      configMaps: Yup.array()
+        .of(
+          Yup.object().shape({
+            name: Yup.string().required(t('ai:Config map name is required')),
+            valid: Yup.boolean().isTrue(t('ai:Config map not found')),
+            manifestNames: Yup.array()
+              .of(Yup.string())
+              .test(
+                'unique-manifests',
+                t(
+                  'ai:Manifest names in each config map should be unique across all referenced config maps.',
+                ),
+                (value) =>
+                  // check if another config map has any manifests with the same names as this one
+                  values.configMaps
+                    .flatMap(({ manifestNames }) => manifestNames)
+                    .filter((v) => value?.includes(v)).length === value?.length,
+              ),
+          }),
+        )
+        .min(
+          agentClusterInstall.spec?.platformType === 'External' ? 1 : 0,
+          t('ai:At least one config map is required'),
+        ),
+    }),
+  );
+
+  const onSubmit = async (values: CustomManifestFormType) => {
+    const patches: Patch[] = [];
+    appendPatch(
+      patches,
+      '/spec/manifestsConfigMapRefs',
+      values.configMaps.map(({ name }) => ({ name })),
+      agentClusterInstall.spec?.manifestsConfigMapRefs,
+    );
+
+    if (patches.length > 0) {
+      await k8sPatch({
+        model: AgentClusterInstallModel,
+        resource: agentClusterInstall,
+        data: patches,
+      });
+    }
+  };
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <ClusterWizardStepHeader>{t('ai:Custom manifests')}</ClusterWizardStepHeader>
+      </GridItem>
+      <GridItem>
+        <Alert
+          variant="info"
+          isInline
+          title={t('ai:Add custom manifests')}
+          actionLinks={[
+            <AlertActionLink
+              key="define-config-map"
+              component={'a'}
+              href={`/k8s/ns/${
+                agentClusterInstall.metadata?.namespace as string
+              }/core~v1~ConfigMap`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t('ai:Define a config map')} <ExternalLinkAltIcon />
+            </AlertActionLink>,
+          ]}
+        >
+          <Content component={ContentVariants.p}>
+            {t(
+              'ai:Define a config map with your custom manifests and select it in the form below.',
+            )}
+          </Content>
+          <Content component={ContentVariants.p}>
+            {t(
+              'ai:Manifest names in each config map should be unique across all referenced config maps.',
+            )}
+          </Content>
+        </Alert>
+      </GridItem>
+      <GridItem>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={onSubmit}
+          validationSchema={validationSchema}
+        >
+          <ConfigMapForm namespace={agentClusterInstall.metadata?.namespace as string} />
+        </Formik>
+      </GridItem>
+    </Grid>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapDetail.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  Alert,
+  Bullseye,
+  Button,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Divider,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Label,
+  Spinner,
+} from '@patternfly/react-core';
+import { ExternalLink, useTranslation } from '../../../../common';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { ConfigMapK8sResource } from '../../../types';
+import { useField } from 'formik';
+
+const ExpandedConfigMap = ({
+  index,
+  configMap,
+}: {
+  index: number;
+  configMap?: ConfigMapK8sResource;
+}) => {
+  const { t } = useTranslation();
+  const [, { error: isValidError }] = useField<boolean>(`configMaps.${index}.valid`);
+  const [, { error: manifestNamesError }] = useField<string[]>(`configMaps.${index}.manifestNames`);
+
+  return isValidError ? (
+    <GridItem>
+      <Label variant="outline" icon={<InfoCircleIcon />} color="red">
+        {isValidError}
+      </Label>
+    </GridItem>
+  ) : (
+    <>
+      <GridItem>
+        <DescriptionList>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Name')}</DescriptionListTerm>
+            <DescriptionListDescription>{configMap?.metadata?.name}</DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Namespace')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {configMap?.metadata?.namespace}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Data')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Grid hasGutter>
+                <GridItem>
+                  <ExternalLink
+                    href={`/k8s/ns/${configMap?.metadata?.namespace || ''}/configmaps/${
+                      configMap?.metadata?.name || ''
+                    }/form`}
+                  >
+                    {t('ai:Edit config map data')}
+                  </ExternalLink>
+                </GridItem>
+
+                {Object.entries(configMap?.data || {}).map(([key, val]) => (
+                  <GridItem key={key}>
+                    <Content component={ContentVariants.h4}>{key}</Content>
+                    <CodeBlock>
+                      <CodeBlockCode>{val}</CodeBlockCode>
+                    </CodeBlock>
+                  </GridItem>
+                ))}
+              </Grid>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </GridItem>
+
+      {manifestNamesError && (
+        <GridItem>
+          <Alert title={manifestNamesError} variant="danger" isInline />
+        </GridItem>
+      )}
+    </>
+  );
+};
+
+const CollapsedConfigMap = ({
+  index,
+  configMap,
+}: {
+  index: number;
+  configMap?: ConfigMapK8sResource;
+}) => {
+  const [, { error: isValidError }] = useField<boolean>(`configMaps.${index}.valid`);
+  const [, { error: manifestNamesError }] = useField<string[]>(`configMaps.${index}.manifestNames`);
+
+  const { t } = useTranslation();
+
+  return (
+    <GridItem>
+      {isValidError || manifestNamesError ? (
+        <Label variant="outline" icon={<InfoCircleIcon />} color="red">
+          {isValidError || manifestNamesError}
+        </Label>
+      ) : (
+        <Label variant="outline" icon={<InfoCircleIcon />}>
+          {t('ai:{{count}} entry', { count: Object.entries(configMap?.data || {}).length })}
+        </Label>
+      )}
+    </GridItem>
+  );
+};
+
+export const ConfigMapDetail = ({
+  index,
+  configMapName,
+  configMap,
+  onRemove,
+  isLoading,
+}: {
+  index: number;
+  configMapName: string;
+  configMap?: ConfigMapK8sResource;
+  onRemove: () => void;
+  isLoading: boolean;
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+
+  return (
+    <GridItem>
+      <Grid
+        onMouseEnter={() => setShowRemoveButton(true)}
+        onMouseLeave={() => setShowRemoveButton(false)}
+        hasGutter
+      >
+        <GridItem>
+          <Flex>
+            <FlexItem>
+              <ExpandableSectionToggle
+                isExpanded={isExpanded}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                direction="down"
+              >
+                {configMapName}
+              </ExpandableSectionToggle>
+            </FlexItem>
+            <FlexItem align={{ default: 'alignRight' }}>
+              <Button
+                aria-label="remove config map"
+                style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
+                variant="plain"
+                onClick={onRemove}
+              >
+                <MinusCircleIcon />
+              </Button>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+
+        {isLoading ? (
+          <GridItem>
+            <Bullseye>
+              <Spinner size="lg" />
+            </Bullseye>
+          </GridItem>
+        ) : isExpanded ? (
+          <ExpandedConfigMap configMap={configMap} index={index} />
+        ) : (
+          <CollapsedConfigMap configMap={configMap} index={index} />
+        )}
+
+        <GridItem>
+          <Divider />
+        </GridItem>
+      </Grid>
+    </GridItem>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import Fuse from 'fuse.js';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Stack,
+  StackItem,
+  Grid,
+  WizardFooter,
+  useWizardContext,
+  useWizardFooter,
+  SelectOptionProps,
+  GridItem,
+  AlertVariant,
+  Alert,
+} from '@patternfly/react-core';
+import { Alerts, SelectFieldWithSearch, useAlerts, useTranslation } from '../../../../common';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
+import { ConfigMapDetail } from './ConfigMapDetail';
+import { useConfigMaps } from '../../../hooks';
+
+const NO_RESULTS = 'no_results';
+
+export type CustomManifestFormType = {
+  configMaps: {
+    name: string;
+    valid: boolean;
+    manifestNames?: string[];
+  }[];
+};
+
+export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
+  const { t } = useTranslation();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { alerts, addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setSubmitting] = React.useState(false);
+  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
+
+  const { values, errors, isValid, setFieldValue, submitForm } =
+    useFormikContext<CustomManifestFormType>();
+  const [filter, setFilter] = React.useState<string>('');
+  const [configMaps, setConfigMaps] = React.useState<SelectOptionProps[]>([]);
+  const [data, loaded, isError] = useConfigMaps({
+    namespace,
+    isList: true,
+  });
+
+  React.useEffect(() => {
+    if (data && loaded && !isError) {
+      setConfigMaps(
+        data.map((configMap) => ({
+          value: {
+            name: configMap.metadata?.name as string,
+            valid: true,
+            manifestNames: Object.keys(configMap.data || {}),
+          },
+          children: configMap.metadata?.name as string,
+        })),
+      );
+    }
+  }, [data, isError, loaded]);
+
+  React.useEffect(() => {
+    if (loaded && !isError) {
+      const newConfigMaps = values.configMaps.map((configMap) => {
+        const map = data.find((item) => item.metadata?.name === configMap.name);
+        if (map) {
+          return { ...configMap, valid: true, manifestNames: Object.keys(map.data || {}) };
+        }
+        return { ...configMap, valid: false, manifestNames: [] };
+      });
+
+      setFieldValue('configMaps', newConfigMaps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, isError, loaded, setFieldValue]);
+
+  const placeholder = React.useMemo(() => {
+    if (values.configMaps.length > 0) {
+      return `${values.configMaps.length} config map${
+        values.configMaps.length !== 1 ? 's' : ''
+      } selected`;
+    }
+
+    return 'No config map selected';
+  }, [values.configMaps]);
+
+  const fuse = React.useMemo(
+    () =>
+      new Fuse(Object.values(configMaps), {
+        includeScore: true,
+        ignoreLocation: true,
+        threshold: 0.3,
+        keys: ['value.name'],
+      }),
+    [configMaps],
+  );
+
+  const selectOptions = React.useMemo(() => {
+    if (filter) {
+      const newSelectOptions = fuse
+        .search(filter)
+        .sort((a, b) => (a.score || 0) - (b.score || 0))
+        .map(({ item }) => item);
+
+      if (!newSelectOptions.length) {
+        return [
+          {
+            isAriaDisabled: true,
+            children: t('ai:No results found for {{filter}}', { filter }),
+            value: NO_RESULTS,
+            hasCheckbox: false,
+          },
+        ];
+      }
+      return newSelectOptions;
+    }
+    return configMaps;
+  }, [filter, configMaps, fuse, t]);
+
+  const submittingText = React.useMemo(() => {
+    if (isSubmitting) {
+      return t('ai:Saving changes...');
+    }
+    return undefined;
+  }, [isSubmitting, t]);
+
+  const onNext = React.useCallback(async () => {
+    try {
+      clearAlerts();
+      setSubmitting(true);
+
+      await submitForm();
+      await goToNextStep();
+    } catch (error) {
+      addAlert({
+        title: t('ai:Failed to save ClusterDeployment'),
+        message: error instanceof Error ? error.message : undefined,
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [addAlert, clearAlerts, goToNextStep, submitForm, t]);
+
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        nextButtonProps={{ isLoading: !!submittingText }}
+        nextButtonText={submittingText || t('ai:Next')}
+        isNextDisabled={!isValid || !loaded}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [activeStep, onNext, submittingText, t, isValid, loaded, goToPrevStep, close],
+  );
+
+  useWizardFooter(footer);
+
+  const errorAlert =
+    typeof errors.configMaps === 'string' ? (
+      <GridItem>
+        <Alert variant={AlertVariant.danger} title={errors.configMaps} isInline />
+      </GridItem>
+    ) : (
+      <GridItem>
+        <Alert
+          variant={AlertVariant.danger}
+          title={t('ai:Some config map items are invalid')}
+          isInline
+        />
+      </GridItem>
+    );
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <Stack hasGutter>
+          <StackItem>
+            <SelectFieldWithSearch
+              name={'configMaps'}
+              label={t('ai:Config maps')}
+              isMultiSelect
+              isRequired
+              isLoading={!loaded}
+              selectOptions={selectOptions}
+              filterValue={filter}
+              setFilterValue={setFilter}
+              placeholder={placeholder}
+              helperText={t(
+                'ai:Select config maps from the list or use the type ahead to narrow down the list.',
+              )}
+            />
+          </StackItem>
+          <StackItem>
+            <Grid hasGutter>
+              <FieldArray name="configMaps">
+                {({ remove }) =>
+                  values.configMaps.map((configMap, index) => (
+                    <ConfigMapDetail
+                      index={index}
+                      key={configMap.name}
+                      configMapName={configMap.name}
+                      configMap={data.find((item) => item.metadata?.name === configMap.name)}
+                      onRemove={() => remove(index)}
+                      isLoading={!loaded}
+                    />
+                  ))
+                }
+              </FieldArray>
+            </Grid>
+          </StackItem>
+        </Stack>
+      </GridItem>
+
+      {!isValid && errorAlert}
+
+      {isError && (
+        <GridItem>
+          <Alert
+            variant={AlertVariant.danger}
+            title={t('ai:An error occurred while fetching config maps')}
+            isInline
+          />
+        </GridItem>
+      )}
+
+      {!!alerts.length && (
+        <GridItem>
+          <Alerts />
+        </GridItem>
+      )}
+
+      {syncError && (
+        <GridItem>
+          <ValidationSection currentStepId={'custom-manifests'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/index.tsx

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