@openshift-assisted/ui-lib 2.12.3-cim → 2.12.5-cim

package/lib/common/components/ui/OpenShiftVersionModal.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
+import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
+import { HelperTextType } from './OpenShiftVersionDropdown';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues, OpenshiftVersionOptionType } from '../..';
+import './OpenShiftVersionModal.css';
+
+type OpenShiftVersionModalProps = {
+  allVersions: OpenshiftVersionOptionType[];
+  setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
+  getHelperText?: HelperTextType;
+};
+
+export const OpenShiftVersionModal = ({
+  allVersions,
+  setOpenshiftVersionModalOpen,
+  getHelperText,
+}: OpenShiftVersionModalProps) => {
+  const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const onClose = () => setOpenshiftVersionModalOpen(false);
+  const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
+
+  const handleSelect = () => {
+    if (customOpenshiftSelect) {
+      setFieldValue('customOpenshiftSelect', customOpenshiftSelect);
+    }
+    onClose();
+  };
+
+  return (
+    <Modal
+      title="Available OpenShift Versions"
+      id="available-openshift-versions-modal"
+      isOpen
+      actions={[
+        <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
+          Select
+        </Button>,
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
+          Cancel
+        </Button>,
+      ]}
+      onClose={onClose}
+      variant={ModalVariant.small}
+    >
+      <FormGroup
+        id={`form-control__customOpenshiftSelect`}
+        fieldId={'customOpenshiftSelect'}
+        label={'OpenShift version'}
+        isRequired
+      >
+        <OpenShiftSelectWithSearch
+          versions={allVersions}
+          getHelperText={getHelperText}
+          setCustomOpenshiftSelect={setCustomOpenshiftSelect}
+        />
+      </FormGroup>
+    </Modal>
+  );
+};

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

@@ -71,13 +71,23 @@ const OcmOpenShiftVersionSelect = ({ versions }: OcmOpenShiftVersionSelectProps)
     [versions, t],
   );
 
+  // Create a wrapper function that matches the new HelperTextType signature
+  const getHelperText = React.useCallback(
+    (value: string | undefined) => {
+      return getOpenshiftVersionHelperText(versions, value, t);
+    },
+    [versions, t],
+  );
+
   return (
     <OpenShiftVersionDropdown
       name="openshiftVersion"
       items={selectOptions}
       versions={versions}
-      getHelperText={getOpenshiftVersionHelperText}
+      getHelperText={getHelperText}
       showReleasesLink={isInOcm}
+      showOpenshiftVersionModal={() => null}
+      customItems={[]}
     />
   );
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.12.3-cim",
-    "@openshift-assisted/types": "2.12.3-cim",
+    "@openshift-assisted/locales": "2.12.5-cim",
+    "@openshift-assisted/types": "2.12.5-cim",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "^4.222.4",
     "@patternfly/react-code-editor": "^4.82.113",
@@ -142,5 +142,5 @@
       ]
     }
   },
-  "version": "2.12.3-cim"
+  "version": "2.12.5-cim"
 }

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { OpenshiftVersionOptionType } from '../../types';
-import { SelectFieldProps } from '../ui/formik/types';
-type OpenShiftVersionSelectProps = {
-    versions: OpenshiftVersionOptionType[];
-    onChange?: SelectFieldProps['onChange'];
-};
-declare const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps>;
-export default OpenShiftVersionSelect;
-//# sourceMappingURL=OpenShiftVersionSelect.d.ts.map

package/build/@types/common/components/clusterConfiguration/OpenShiftVersionSelect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenShiftVersionSelect.d.ts","sourceRoot":"","sources":["../../../../../lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAyCtD,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AACF,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAuBjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/build/cjs/common/components/clusterConfiguration/OpenShiftVersionSelect.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
-const exclamation_triangle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon");
-const external_link_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon");
-const global_warning_color_100_1 = require("@patternfly/react-tokens/dist/js/global_warning_color_100");
-const global_danger_color_100_1 = require("@patternfly/react-tokens/dist/js/global_danger_color_100");
-const config_1 = require("../../config");
-const ui_1 = require("../ui");
-const use_translation_wrapper_1 = require("../../hooks/use-translation-wrapper");
-const OpenShiftLifeCycleDatesLink = () => {
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    return (react_1.default.createElement("a", { href: config_1.OPENSHIFT_LIFE_CYCLE_DATES_LINK, target: "_blank", rel: "noopener noreferrer" },
-        t('ai:Learn more'),
-        " ",
-        react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null)));
-};
-const getOpenshiftVersionHelperText = 
-// eslint-disable-next-line react/display-name
-(versions) => (selectedVersionValue) => {
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    if (!versions.length) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(exclamation_circle_icon_1.ExclamationCircleIcon, { color: global_danger_color_100_1.global_danger_color_100.value, size: "sm" }),
-            "\u00A0 ",
-            t('ai:No release image is available.')));
-    }
-    const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
-    if (!selectedVersionValue || !selectedVersion) {
-        return null;
-    }
-    if (selectedVersion.supportLevel !== 'production') {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(exclamation_triangle_icon_1.ExclamationTriangleIcon, { color: global_warning_color_100_1.global_warning_color_100.value, size: "sm" }),
-            "\u00A0",
-            t('ai:Please note that this version is not production-ready.'),
-            "\u00A0",
-            react_1.default.createElement(OpenShiftLifeCycleDatesLink, null)));
-    }
-    return null;
-};
-const OpenShiftVersionSelect = ({ versions, onChange }) => {
-    const selectOptions = react_1.default.useMemo(() => versions
-        .filter((version) => version.supportLevel !== 'maintenance')
-        .map((version) => ({
-        label: version.label,
-        value: version.value,
-    })), [versions]);
-    const { t } = (0, use_translation_wrapper_1.useTranslation)();
-    return (react_1.default.createElement(ui_1.SelectField, { label: t('ai:OpenShift version'), name: "openshiftVersion", options: selectOptions, getHelperText: getOpenshiftVersionHelperText(versions), isDisabled: versions.length === 0, isRequired: true, onChange: onChange }));
-};
-exports.default = OpenShiftVersionSelect;
-//# sourceMappingURL=OpenShiftVersionSelect.js.map

package/build/cjs/common/components/clusterConfiguration/OpenShiftVersionSelect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenShiftVersionSelect.js","sourceRoot":"","sources":["../../../../../lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx"],"names":[],"mappings":";;;AAAA,0DAA0B;AAC1B,2GAAsG;AACtG,+GAA0G;AAC1G,yGAAmG;AACnG,wGAAqH;AACrH,sGAAkH;AAClH,yCAA+D;AAE/D,8BAAoC;AACpC,iFAAqE;AAGrE,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,OAAO,CACL,qCAAG,IAAI,EAAE,wCAA+B,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB;QAChF,CAAC,CAAC,eAAe,CAAC;;QAAE,8BAAC,4CAAmB,OAAG,CAC1C,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,6BAA6B;AACjC,8CAA8C;AAC9C,CAAC,QAAsC,EAAE,EAAE,CAAC,CAAC,oBAA4B,EAAE,EAAE;IAC3E,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;QACpB,OAAO,CACL;YACE,8BAAC,+CAAqB,IAAC,KAAK,EAAE,iDAAW,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;;YACrD,CAAC,CAAC,mCAAmC,CAAC,CAC7C,CACJ,CAAC;KACH;IACD,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,oBAAoB,CAAC,CAAC;IAC3F,IAAI,CAAC,oBAAoB,IAAI,CAAC,eAAe,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IAED,IAAI,eAAe,CAAC,YAAY,KAAK,YAAY,EAAE;QACjD,OAAO,CACL;YACE,8BAAC,mDAAuB,IAAC,KAAK,EAAE,mDAAY,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;;YACzD,CAAC,CAAC,2DAA2D,CAAC;;YACrE,8BAAC,2BAA2B,OAAG,CAC9B,CACJ,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAMJ,MAAM,sBAAsB,GAA0C,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,aAAa,GAAG,eAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CACH,QAAQ;SACL,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,KAAK,aAAa,CAAC;SAC3D,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACjB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,KAAK,EAAE,OAAO,CAAC,KAAK;KACrB,CAAC,CAAC,EACP,CAAC,QAAQ,CAAC,CACX,CAAC;IACF,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,wCAAc,GAAE,CAAC;IAC/B,OAAO,CACL,8BAAC,gBAAW,IACV,KAAK,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAChC,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAE,aAAa,EACtB,aAAa,EAAE,6BAA6B,CAAC,QAAQ,CAAC,EACtD,UAAU,EAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,EACjC,UAAU,QACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC"}

package/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx

@@ -1,81 +0,0 @@
-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 { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
-import { OpenshiftVersionOptionType } from '../../types';
-import { SelectField } from '../ui';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { SelectFieldProps } from '../ui/formik/types';
-
-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 =
-  // eslint-disable-next-line react/display-name
-  (versions: OpenshiftVersionOptionType[]) => (selectedVersionValue: string) => {
-    const { t } = useTranslation();
-    if (!versions.length) {
-      return (
-        <>
-          <ExclamationCircleIcon color={dangerColor.value} size="sm" />
-          &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') {
-      return (
-        <>
-          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
-          &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
-          <OpenShiftLifeCycleDatesLink />
-        </>
-      );
-    }
-
-    return null;
-  };
-
-type OpenShiftVersionSelectProps = {
-  versions: OpenshiftVersionOptionType[];
-  onChange?: SelectFieldProps['onChange'];
-};
-const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions, onChange }) => {
-  const selectOptions = React.useMemo(
-    () =>
-      versions
-        .filter((version) => version.supportLevel !== 'maintenance')
-        .map((version) => ({
-          label: version.label,
-          value: version.value,
-        })),
-    [versions],
-  );
-  const { t } = useTranslation();
-  return (
-    <SelectField
-      label={t('ai:OpenShift version')}
-      name="openshiftVersion"
-      options={selectOptions}
-      getHelperText={getOpenshiftVersionHelperText(versions)}
-      isDisabled={versions.length === 0}
-      isRequired
-      onChange={onChange}
-    />
-  );
-};
-
-export default OpenShiftVersionSelect;