MGMT-17477: Update dev preview badge when user selects custom OCP rel…

…ease (#2553) (#2558) * Update dev preview badge when user select custom OCP release * Do not store helper text in react/formik state * Adjusting tests --------- Co-authored-by: rawagner <[email protected]>
openshift-assisted · Apr 15, 2024 · 6ab2ad9 · 6ab2ad9
1 parent c17a789
commit 6ab2ad9
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 95 deletions.
diff --git a/...sts/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts b/...sts/cypress/integration/use-cases/create-cluster/with-external-partner-integrations.cy.ts
@@ -22,6 +22,7 @@ describe('Create a new cluster with external partner integrations', () => {
     });
 
     it('Should display correct items in the external platform integration dropdown', () => {
+      cy.wait(1000);
       ClusterDetailsForm.externalPartnerIntegrationsField.findDropdownItems().each((item) => {
         // Get the expected values from the externalPlatformTypes object
         const platformType = item.parent().attr('id');

diff --git a/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx b/libs/ui-lib/lib/common/components/ui/OpenShiftVersionDropdown.tsx
@@ -16,7 +16,6 @@ import {
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 
 import { OpenshiftVersionOptionType } from '../../types';
-import { TFunction } from 'i18next';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { useField, useFormikContext } from 'formik';
 import { getFieldId } from './formik';
@@ -25,12 +24,7 @@ import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
 import './OpenshiftVersionDropdown.css';
 
-export type HelperTextType = (
-  versions: OpenshiftVersionOptionType[],
-  value: string | undefined,
-  t: TFunction,
-  isModal?: boolean,
-) => JSX.Element | null;
+export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
@@ -61,33 +55,24 @@ export const OpenShiftVersionDropdown = ({
   showOpenshiftVersionModal,
   customItems,
 }: OpenShiftVersionDropdownProps) => {
-  const [field, , { setValue }] = useField(name);
+  const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
   const { t } = useTranslation();
   const fieldId = getFieldId(name, 'input');
   const isDisabled = versions.length === 0;
   const {
     values: { customOpenshiftSelect },
   } = useFormikContext<ClusterDetailsValues>();
-  const { defaultLabel, defaultValue } = React.useMemo(() => {
-    const defaultVersion = customOpenshiftSelect
-      ? customOpenshiftSelect
-      : versions.find((item) => item.default);
-    return {
-      defaultLabel: defaultVersion?.label || '',
-      defaultValue: defaultVersion?.value || '',
-    };
-  }, [customOpenshiftSelect, versions]);
-
-  const [helperText, setHelperText] = React.useState(getHelperText(versions, defaultValue, t));
   const [current, setCurrent] = React.useState<string>();
 
   React.useEffect(() => {
-    setCurrent(defaultLabel);
-    setValue(defaultValue);
-    setHelperText(getHelperText(versions, defaultValue, t));
+    const defaultVersion = customOpenshiftSelect
+      ? customOpenshiftSelect
+      : versions.find((item) => item.default);
+    setCurrent(defaultVersion?.label || '');
+    setValue(defaultVersion?.value || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultLabel, defaultValue, customOpenshiftSelect]);
+  }, [customOpenshiftSelect]);
 
   const parsedVersionsForItems = getParsedVersions(items);
   const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
@@ -145,15 +130,14 @@ export const OpenShiftVersionDropdown = ({
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {
       const newLabel = event?.currentTarget.innerText;
-      const newValue = event?.currentTarget.id;
+      const newValue = event?.currentTarget.id || '';
       if (newLabel && newValue !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
-        setHelperText(getHelperText(versions, newValue, t));
         setOpen(false);
       }
     },
-    [setValue, getHelperText, versions, t],
+    [setValue],
   );
 
   const toggle = React.useMemo(
@@ -171,6 +155,8 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
+  const helperText = getHelperText(field.value);
+
   return (
     <FormGroup
       id={`form-control__${fieldId}`}

diff --git a/libs/ui-lib/lib/common/components/ui/OpenshiftSelectWithSearch.tsx b/libs/ui-lib/lib/common/components/ui/OpenshiftSelectWithSearch.tsx
@@ -53,7 +53,6 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
   const { t } = useTranslation();
-  const [helperText, setHelperText] = React.useState(getHelperText(versions, inputValue, t, true));
 
   React.useEffect(() => {
     if (textInputRef.current) {
@@ -118,8 +117,6 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         default: filteredVersions[0].default,
         supportLevel: filteredVersions[0].supportLevel,
       });
-
-      setHelperText(getHelperText(versions, value as string, t));
     }
     setIsOpen(false);
     setFocusedItemIndex(null);
@@ -235,6 +232,8 @@ export const OpenshiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     </MenuToggle>
   );
 
+  const helperText = getHelperText(selected, true);
+
   return (
     <>
       <Select

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx
@@ -1,69 +1,12 @@
 import React from 'react';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { TFunction } from 'i18next';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import {
-  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
-  UiIcon,
-  OpenshiftVersionOptionType,
-  ClusterDetailsValues,
-} from '../../../common';
+import { OpenshiftVersionOptionType, ClusterDetailsValues } from '../../../common';
 import { isInOcm } from '../../../common/api';
 import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
 import { OpenShiftVersionModal } from './OpenShiftVersionModal';
 import { useFormikContext } from 'formik';
-
-const OpenShiftLifeCycleDatesLink = () => {
-  const { t } = useTranslation();
-  return (
-    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
-      {t('ai:Learn more')} <ExternalLinkAltIcon />
-    </a>
-  );
-};
-
-const getOpenshiftVersionHelperText = (
-  versions: OpenshiftVersionOptionType[],
-  selectedVersionValue: string | undefined,
-  t: TFunction,
-  isModal?: boolean,
-) => {
-  if (!versions.length && !isModal) {
-    return (
-      <>
-        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />
-        &nbsp; {t('ai:No release image is available.')}
-      </>
-    );
-  }
-
-  const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
-  if (!selectedVersionValue || !selectedVersion) {
-    return null;
-  }
-
-  if (
-    selectedVersion.supportLevel !== 'production' &&
-    selectedVersion.supportLevel !== 'maintenance'
-  ) {
-    let messageSelectedVersion = t('ai:Please note that this version is not production-ready.');
-    if (selectedVersion.supportLevel === 'end-of-life') {
-      messageSelectedVersion = t('ai:Please note that this version is not maintained anymore.');
-    }
-    return (
-      <>
-        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />
-        &nbsp;
-        {messageSelectedVersion}&nbsp;
-        <OpenShiftLifeCycleDatesLink />
-      </>
-    );
-  }
-
-  return null;
-};
+import { getOpenshiftVersionHelperText } from './OpenshiftVersionHelperText';
+import { useOpenshiftVersions } from '../../hooks';
 
 type OcmOpenShiftVersionSelectProps = {
   versions: OpenshiftVersionOptionType[];
@@ -106,22 +49,28 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
     }
     return [];
   }, [selectOptions, customOpenshiftSelect]);
+
+  const { versions: allVersions } = useOpenshiftVersions(false);
+
+  const getHelperText = (value: string | undefined, inModal?: boolean) => {
+    return getOpenshiftVersionHelperText(allVersions, value, t, inModal);
+  };
+
   return (
     <>
       <OpenShiftVersionDropdown
         name="openshiftVersion"
         items={selectOptions}
         versions={versions}
-        getHelperText={getOpenshiftVersionHelperText}
+        getHelperText={getHelperText}
         showReleasesLink={isInOcm}
         showOpenshiftVersionModal={showOpenshiftVersionModal}
         customItems={updatedSelectOptions}
       />
       {isOpenshiftVersionModalOpen && (
         <OpenShiftVersionModal
-          isOpen={isOpenshiftVersionModalOpen}
           setOpenshiftVersionModalOpen={setIsOpenshiftVersionModalOpen}
-          getHelperText={getOpenshiftVersionHelperText}
+          getHelperText={getHelperText}
         />
       )}
     </>

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenShiftVersionModal.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenShiftVersionModal.tsx
@@ -9,13 +9,11 @@ import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../../../commo
 
 type OpenShiftVersionModalProps = {
   setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
-  isOpen: boolean;
   getHelperText: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
   setOpenshiftVersionModalOpen,
-  isOpen,
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
@@ -34,7 +32,7 @@ export const OpenShiftVersionModal = ({
     <Modal
       title="Available OpenShift Versions"
       id="available-openshift-versions-modal"
-      isOpen={isOpen}
+      isOpen
       actions={[
         <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
           Select

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenshiftVersionHelperText.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/OpenshiftVersionHelperText.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {
+  OPENSHIFT_LIFE_CYCLE_DATES_LINK,
+  OpenshiftVersionOptionType,
+  UiIcon,
+} from '../../../common';
+import { TFunction } from 'i18next';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+const OpenShiftLifeCycleDatesLink = () => {
+  const { t } = useTranslation();
+  return (
+    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
+      {t('ai:Learn more')} <ExternalLinkAltIcon />
+    </a>
+  );
+};
+
+export const getOpenshiftVersionHelperText = (
+  versions: OpenshiftVersionOptionType[],
+  selectedVersionValue: string | undefined,
+  t: TFunction,
+  isModal?: boolean,
+) => {
+  if (!versions.length && !isModal) {
+    return (
+      <>
+        <UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />
+        &nbsp; {t('ai:No release image is available.')}
+      </>
+    );
+  }
+
+  const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
+  if (!selectedVersionValue || !selectedVersion) {
+    return null;
+  }
+
+  if (
+    selectedVersion.supportLevel !== 'production' &&
+    selectedVersion.supportLevel !== 'maintenance'
+  ) {
+    let messageSelectedVersion = t('ai:Please note that this version is not production-ready.');
+    if (selectedVersion.supportLevel === 'end-of-life') {
+      messageSelectedVersion = t('ai:Please note that this version is not maintained anymore.');
+    }
+    return (
+      <>
+        <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />
+        &nbsp;
+        {messageSelectedVersion}&nbsp;
+        <OpenShiftLifeCycleDatesLink />
+      </>
+    );
+  }
+
+  return null;
+};