@openshift-assisted/ui-lib 2.16.4-cim → 2.16.6-cim

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

@@ -3,27 +3,27 @@ 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;
-  forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   allVersions: OpenshiftVersionOptionType[];
@@ -54,7 +54,6 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   isEditFlow,
   versions,
   allVersions,
-  forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
   cpuArchitectures,
@@ -67,9 +66,9 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   const { name, baseDnsDomain } = values;
 
   React.useEffect(() => {
-    if (!versions.length && !values.openshiftVersion) {
+    if (!versions.length && !values.openshiftVersion && !isEditFlow) {
       const fallbackOpenShiftVersion = allVersions.find((version) => version.default);
-      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion);
+      setFieldValue('customOpenshiftSelect', fallbackOpenShiftVersion?.value);
       setFieldValue('openshiftVersion', fallbackOpenShiftVersion?.value);
       setFieldValue('networkType', getNetworkType(fallbackOpenShiftVersion));
     }
@@ -89,28 +88,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">
@@ -147,9 +141,11 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
           isRequired
         />
       )}
-      {forceOpenshiftVersion ? (
+      {isEditFlow ? (
         <StaticTextField name="openshiftVersion" label="OpenShift version" isRequired>
-          {t('ai:OpenShift')} {forceOpenshiftVersion}
+          {t('ai:OpenShift')}{' '}
+          {allVersions.find((v) => v.value === values.openshiftVersion)?.version ||
+            values.openshiftVersion}
         </StaticTextField>
       ) : (
         <>
@@ -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,121 @@
+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, Grid, GridItem, Text, TextVariants } 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>,
+          ]}
+        >
+          <Text component={TextVariants.p}>
+            {t(
+              'ai:Define a config map with your custom manifests and select it in the form below.',
+            )}
+          </Text>
+          <Text component={TextVariants.p}>
+            {t(
+              'ai:Manifest names in each config map should be unique across all referenced config maps.',
+            )}
+          </Text>
+        </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,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Divider,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Label,
+  Spinner,
+  Text,
+  TextVariants,
+} 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}>
+                    <Text component={TextVariants.h4}>{key}</Text>
+                    <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>
+  );
+};