@openshift-assisted/ui-lib 2.48.6 → 2.50.0

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

@@ -1,294 +1,72 @@
-import React, { Dispatch, SetStateAction } from 'react';
-import {
-  Select,
-  SelectOption,
-  SelectList,
-  SelectOptionProps,
-  MenuToggle,
-  MenuToggleElement,
-  TextInputGroup,
-  TextInputGroupMain,
-  TextInputGroupUtilities,
-  Button,
-  Divider,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-} from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import React from 'react';
+import { useField } from 'formik';
 import { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useTranslation } from '../../hooks';
+import { SelectFieldWithSearch } from './formik';
+import { ClusterDetailsValues } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
-  setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
 export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
-  setCustomOpenshiftSelect,
 }: OpenshiftSelectWithSearchProps) => {
-  const initialSelectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        children:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + 'Developer preview release'
-            : version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] =
-    React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>();
   const { t } = useTranslation();
+  const [{ value }] =
+    useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
 
-  React.useEffect(() => {
-    if (textInputRef.current) {
-      textInputRef.current.maxLength = 30;
-    }
-  }, []);
-
-  React.useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+  const [filterValue, setFilterValue] = React.useState<string>('');
 
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      newSelectOptions = initialSelectOptions.filter((menuItem) =>
-        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+  const selectOptions = React.useMemo(() => {
+    const options = versions
+      .map((version) => ({
+        children: getVersionLabel(version, t),
+        value: version.value,
+      }))
+      .filter((v) =>
+        filterValue ? String(v.children).toLowerCase().includes(filterValue.toLowerCase()) : true,
       );
 
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          {
-            isDisabled: true,
-            children: `No results found for "${filterValue}"`,
-            value: 'no results',
-          },
-        ];
-      }
-
-      // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-    }
-
-    setSelectOptions(newSelectOptions);
-    setActiveItem(null);
-    setFocusedItemIndex(null);
-  }, [filterValue, initialSelectOptions, isOpen]);
-
-  const onToggleClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    value: string | number | undefined,
-  ) => {
-    // Check if the specific value exists in newSelectOptions
-    const foundItem = selectOptions.find((menuItem) => String(menuItem.value) === String(value));
-    const newLabel = foundItem?.children;
-    if (value && value !== 'no results') {
-      setInputValue(newLabel as string);
-      setFilterValue('');
-      setSelected(value as string);
-      const filteredVersions = versions.filter((version) => version.value === value);
-      setCustomOpenshiftSelect({
-        label:
-          filteredVersions[0].supportLevel === 'beta'
-            ? filteredVersions[0].label + ' - ' + t('ai:Developer preview release')
-            : filteredVersions[0].label,
-        value: filteredVersions[0].value,
-        version: filteredVersions[0].version,
-        default: filteredVersions[0].default,
-        supportLevel: filteredVersions[0].supportLevel,
-      });
+    if (!options.length) {
+      return [
+        {
+          isDisabled: true,
+          children: t('ai:No results found for {{filter}}', { filter: filterValue }),
+          value: 'no_results',
+        },
+      ];
     }
-    setIsOpen(false);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
-  };
+    return options.map((option, index) => {
+      const match = option.value.match(/\d+\.(\d+)\.\d+/);
+      const y = match ? match[1] : null;
 
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-    setFilterValue(value);
-  };
+      const previousY =
+        index > 0 ? (options[index - 1].value.match(/\d+\.(\d+)\.\d+/) || [])[1] : null;
 
-  const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
-
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
-          indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
-        }
-      }
-
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
-          indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
-        }
-      }
-
-      setFocusedItemIndex(indexToFocus ?? 0);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus ?? 0];
-      setActiveItem(`select-typeahead-${(focusedItem.value as string).replace(' ', '-')}`);
-    }
-  };
-
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
-
-    switch (event.key) {
-      // Select the first available option
-      case 'Enter':
-        if (isOpen && focusedItem.value !== 'no results') {
-          setInputValue(String(focusedItem.children));
-          setFilterValue('');
-          setSelected(String(focusedItem.children));
-        }
-
-        setIsOpen((prevIsOpen) => !prevIsOpen);
-        setFocusedItemIndex(null);
-        setActiveItem(null);
-
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
-        break;
-      case 'ArrowUp':
-      case 'ArrowDown':
-        event.preventDefault();
-        handleMenuArrowKeys(event.key);
-        break;
-    }
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      variant="typeahead"
-      onClick={onToggleClick}
-      isExpanded={isOpen}
-      isFullWidth
-      data-testid="openshift-version-dropdown-toggle"
-    >
-      <TextInputGroup isPlain>
-        <TextInputGroupMain
-          value={inputValue}
-          onClick={onToggleClick}
-          onChange={onTextInputChange}
-          onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
-          autoComplete="off"
-          innerRef={textInputRef}
-          placeholder=""
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
-          role="combobox"
-          isExpanded={isOpen}
-          aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities>
-          {!!inputValue && (
-            <Button
-              icon={<TimesIcon aria-hidden />}
-              variant="plain"
-              onClick={() => {
-                setSelected('');
-                setInputValue('');
-                setFilterValue('');
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            />
-          )}
-        </TextInputGroupUtilities>
-      </TextInputGroup>
-    </MenuToggle>
-  );
-
-  const helperText = getHelperText && getHelperText(selected, true);
+      return {
+        ...option,
+        showDivider: previousY !== null && y !== previousY,
+      };
+    });
+  }, [filterValue, versions, t]);
 
   return (
-    <>
-      <Select
-        id="customOpenshiftSelect"
-        isOpen={isOpen}
-        selected={selected}
-        onSelect={onSelect}
-        onOpenChange={() => {
-          setIsOpen(false);
-        }}
-        toggle={toggle}
-        isScrollable
-      >
-        <SelectList id="select-typeahead-listbox">
-          {selectOptions.reverse().map((option, index) => {
-            const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
-            const y = match ? match[1] : null;
-
-            const previousY =
-              index > 0
-                ? ((selectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-                : null;
-
-            const showDivider = previousY !== null && y !== previousY;
-            return (
-              <React.Fragment key={index}>
-                {showDivider && (
-                  <Divider
-                    component="li"
-                    id={`divider-${option.value as string}`}
-                    key={`divider-${option.value as string}`}
-                  />
-                )}
-                <SelectOption
-                  key={option.value as string}
-                  isFocused={focusedItemIndex === index}
-                  className={option.className}
-                  onClick={() => setSelected(option.value as string)}
-                  id={`select-typeahead-${(option.value as string).replace(' ', '-')}`}
-                  {...option}
-                  ref={null}
-                />
-              </React.Fragment>
-            );
-          })}
-        </SelectList>
-      </Select>
-      <FormHelperText>
-        <HelperText>
-          <HelperTextItem variant="default" data-testid="openshift-select-with-search-helper-text">
-            {helperText ??
-              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
-          </HelperTextItem>
-        </HelperText>
-      </FormHelperText>
-    </>
+    <SelectFieldWithSearch
+      selectOptions={selectOptions}
+      filterValue={filterValue}
+      setFilterValue={setFilterValue}
+      name={'customOpenshiftSelect'}
+      helperText={
+        getHelperText?.(value, true) ??
+        t(
+          'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
+        )
+      }
+    />
   );
 };

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

@@ -4,77 +4,75 @@ import {
   FormGroup,
   FormHelperText,
   HelperTextItem,
-  Button,
   DropdownItem,
   MenuToggle,
   MenuToggleElement,
   Dropdown,
   DropdownGroup,
   Divider,
+  DropdownProps,
 } from '@patternfly/react-core';
 
 import { OpenshiftVersionOptionType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useField, useFormikContext } from 'formik';
+import { useField } from 'formik';
 import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
-import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
-export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
+export type HelperTextType = (value: string | null, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
-  items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
-  customItems: ItemDropdown;
+  customVersion?: OpenshiftVersionOptionType;
 };
 
-const getParsedVersions = (items: ItemDropdown) => {
+const getParsedVersions = (items: OpenshiftVersionOptionType[]) => {
   const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
 
   const parsedVersions = versionsY.map((y) => ({
     y: y,
     versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
   }));
-  return { parsedVersions: parsedVersions.reverse() };
+  return parsedVersions.reverse();
 };
 export const OpenShiftVersionDropdown = ({
   name,
-  items,
   versions,
   getHelperText,
   showReleasesLink,
   showOpenshiftVersionModal,
-  customItems,
+  customVersion,
 }: OpenShiftVersionDropdownProps) => {
   const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
   const { t } = useTranslation();
   const fieldId = getFieldId(name, 'input');
-  const {
-    values: { customOpenshiftSelect },
-  } = useFormikContext<ClusterDetailsValues>();
-  const [current, setCurrent] = React.useState<string>();
+
+  const current = (customVersion ? [...versions, customVersion] : versions).find(
+    (item) => item.value === field.value,
+  );
 
   React.useEffect(() => {
-    const defaultVersion = customOpenshiftSelect
-      ? customOpenshiftSelect
-      : versions.find((item) => item.default);
-    setCurrent(defaultVersion?.label || '');
-    setValue(defaultVersion?.value || '');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customOpenshiftSelect]);
+    if (!field.value) {
+      const defaultVersion = versions.find((item) => item.default) || versions[0];
+      if (defaultVersion) {
+        setValue(defaultVersion.value);
+      }
+    }
+  }, [field.value, versions, setValue]);
 
-  const parsedVersionsForItems = getParsedVersions(items);
+  const parsedVersions = getParsedVersions(versions);
   let lastY: string | undefined = '';
-  const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
-    const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value} value={value}>
-        {label}
+  const dropdownItems = parsedVersions.map(({ y, versions }) => {
+    const items = versions.map((version) => (
+      <DropdownItem key={version.value} id={version.value} value={version.value}>
+        {getVersionLabel(version, t)}
       </DropdownItem>
     ));
 
@@ -85,62 +83,30 @@ export const OpenShiftVersionDropdown = ({
     return items;
   });
 
-  const parsedVersionsForCustomItems = getParsedVersions(customItems);
-  let lastCustomY: string | undefined = '';
-  const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
-    const customItems = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value} value={value}>
-        {label}
-      </DropdownItem>
-    ));
-    if (lastCustomY !== null && y !== lastCustomY) {
-      customItems.push(<Divider key={`separator-${y || ''}`} />);
-    }
-    lastCustomY = y;
-    return customItems;
-  });
-
   const dropdownGroup = [
     dropdownItems.length && (
       <DropdownGroup label="Latest releases" key="latest-releases">
         {dropdownItems}
       </DropdownGroup>
     ),
-    customDropdownItems.length && (
+    customVersion && (
       <DropdownGroup label="Custom releases" key="custom-releases">
-        {customDropdownItems}
+        <DropdownItem
+          key={customVersion.value}
+          id={customVersion.value}
+          value={customVersion.value}
+        >
+          {getVersionLabel(customVersion, t)}
+        </DropdownItem>
       </DropdownGroup>
     ),
     <DropdownGroup key="all-available-versions">
-      <DropdownItem key="all-versions" id="all-versions" onSelect={(e) => e.preventDefault()}>
-        <Button
-          variant="link"
-          isInline
-          onClick={() => {
-            setOpen(false);
-            showOpenshiftVersionModal();
-          }}
-          id="show-all-versions"
-        >
-          {t('ai:Show all available versions')}
-        </Button>
+      <DropdownItem key="all-versions" id="all-versions" value="all-versions">
+        <div className="pf-v6-u-text-color-link">{t('ai:Show all available versions')}</div>
       </DropdownItem>
     </DropdownGroup>,
   ].filter(Boolean);
 
-  const onSelect = React.useCallback(
-    (event?: React.MouseEvent<Element, MouseEvent>, val?: string | number) => {
-      const newLabel = event?.currentTarget.textContent;
-      const newValue = (val as string) || '';
-      if (newLabel && event.currentTarget.id !== 'all-versions') {
-        setCurrent(newLabel);
-        setValue(newValue);
-        setOpen(false);
-      }
-    },
-    [setValue],
-  );
-
   const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
@@ -152,12 +118,21 @@ export const OpenShiftVersionDropdown = ({
       isExpanded={isOpen}
       data-testid="openshift-version-dropdown-toggle"
     >
-      {current || t('ai:OpenShift version')}
+      {current ? getVersionLabel(current, t) : t('ai:OpenShift version')}
     </MenuToggle>
   );
 
   const helperText = getHelperText && getHelperText(field.value);
 
+  const onSelect: DropdownProps['onSelect'] = (_, val) => {
+    if (val === 'all-versions') {
+      showOpenshiftVersionModal();
+    } else if (val) {
+      setValue(val as string);
+    }
+    setOpen(false);
+  };
+
   return (
     <FormGroup
       id={`form-control__${fieldId}`}

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Button,
   ButtonVariant,
@@ -17,25 +17,16 @@ import './OpenShiftVersionModal.css';
 
 type OpenShiftVersionModalProps = {
   allVersions: OpenshiftVersionOptionType[];
-  setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
+  onClose: VoidFunction;
   getHelperText?: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
   allVersions,
-  setOpenshiftVersionModalOpen,
+  onClose,
   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();
-  };
+  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
 
   return (
     <Modal
@@ -52,15 +43,20 @@ export const OpenShiftVersionModal = ({
           label={'OpenShift version'}
           isRequired
         >
-          <OpenShiftSelectWithSearch
-            versions={allVersions}
-            getHelperText={getHelperText}
-            setCustomOpenshiftSelect={setCustomOpenshiftSelect}
-          />
+          <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
+        <Button
+          key="select-custom-ocp"
+          variant={ButtonVariant.primary}
+          onClick={() => {
+            if (values.customOpenshiftSelect !== null) {
+              setFieldValue('openshiftVersion', values.customOpenshiftSelect);
+            }
+            onClose();
+          }}
+        >
           Select
         </Button>
         <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>

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

@@ -3,42 +3,55 @@ import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-rende
 import { Content, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
 import { t_global_color_nonstatus_purple_300 } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_purple_300';
 import { t_global_color_nonstatus_blue_default as globalBlue } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_default';
-import defaultTheme from 'prism-react-renderer/themes/github';
+import lightTheme from 'prism-react-renderer/themes/github';
+import darkTheme from 'prism-react-renderer/themes/okaidia';
 import './PrismCode.css';
-export const SimpleAIPrismTheme = {
-  plain: {
-    color: '#333333',
-    backgroundColor: defaultTheme.plain.backgroundColor,
-    fontSize: '.93em',
-  },
-  styles: [
-    {
-      types: ['variable'],
-      style: {
-        color: globalBlue.value,
-      },
+
+export const getTheme = (styles?: PrismTheme['styles']) => {
+  let prefersTheme = window.localStorage.getItem('bridge/theme');
+  if (prefersTheme === 'systemDefault') {
+    prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  const theme = prefersTheme === 'dark' ? darkTheme : lightTheme;
+
+  return {
+    plain: {
+      color: theme.plain.color,
+      backgroundColor: theme.plain.backgroundColor,
+      fontSize: '.93em',
     },
-    {
-      types: ['class-name', 'function', 'tag', 'attr-name'],
-      style: {
-        color: t_global_color_nonstatus_purple_300.value,
+    styles: styles || [
+      {
+        types: ['variable'],
+        style: {
+          color: globalBlue.value,
+        },
       },
-    },
-  ],
+      {
+        types: ['class-name', 'function', 'tag', 'attr-name'],
+        style: {
+          color: t_global_color_nonstatus_purple_300.value,
+        },
+      },
+    ],
+  };
 };
+
 type PrismCodeProps = {
   code: string;
   language?: Language;
-  theme?: PrismTheme;
+  styles?: PrismTheme['styles'];
   copiable?: boolean;
 };
+
 const PrismCode: React.FC<PrismCodeProps> = ({
   code,
+  styles,
   language = 'bash',
-  theme = defaultTheme,
   copiable = false,
 }) => (
-  <Highlight {...defaultProps} code={code} language={language} theme={theme}>
+  <Highlight {...defaultProps} code={code} language={language} theme={getTheme(styles)}>
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
       <Content component="pre" className={className} style={style}>
         {copiable && (