@openshift-assisted/ui-lib 2.49.0 → 2.50.1

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

@@ -4,81 +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 | null, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
-  items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
-  customItem?: OpenshiftVersionOptionType;
+  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,
-  customItem,
+  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(() => {
-    let defaultVersion = versions.find((item) => item.default);
-    if (customOpenshiftSelect && customItem) {
-      defaultVersion = customItem;
-    } else if (customOpenshiftSelect) {
-      defaultVersion = versions.find((item) => item.value === customOpenshiftSelect);
+    if (!field.value) {
+      const defaultVersion = versions.find((item) => item.default) || versions[0];
+      if (defaultVersion) {
+        setValue(defaultVersion.value);
+      }
     }
+  }, [field.value, versions, setValue]);
 
-    setCurrent(defaultVersion?.label || '');
-    setValue(defaultVersion?.value || '');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customOpenshiftSelect]);
-
-  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>
     ));
 
@@ -95,43 +89,24 @@ export const OpenShiftVersionDropdown = ({
         {dropdownItems}
       </DropdownGroup>
     ),
-    customItem && (
+    customVersion && (
       <DropdownGroup label="Custom releases" key="custom-releases">
-        <DropdownItem key={customItem.value} id={customItem.value} value={customItem.value}>
-          {customItem.label}
+        <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}
@@ -143,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

@@ -17,27 +17,22 @@ 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 onCancel = () => {
-    setFieldValue('customOpenshiftSelect', null);
-    setOpenshiftVersionModalOpen(false);
-  };
+  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
 
   return (
     <Modal
       id="available-openshift-versions-modal"
       isOpen
-      onClose={() => setOpenshiftVersionModalOpen(false)}
+      onClose={onClose}
       variant={ModalVariant.small}
     >
       <ModalHeader title="Available OpenShift Versions" />
@@ -55,11 +50,14 @@ export const OpenShiftVersionModal = ({
         <Button
           key="select-custom-ocp"
           variant={ButtonVariant.primary}
-          onClick={() => setOpenshiftVersionModalOpen(false)}
+          onClick={() => {
+            setFieldValue('openshiftVersion', values.customOpenshiftSelect);
+            onClose();
+          }}
         >
           Select
         </Button>
-        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
           Cancel
         </Button>
       </ModalFooter>

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 && (

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

@@ -19,7 +19,7 @@ export interface StaticFieldProps {
   isValid?: boolean;
 }
 
-export const StaticField: React.FC<StaticFieldProps> = ({
+export const StaticField: React.FC<React.PropsWithChildren<StaticFieldProps>> = ({
   label,
   name,
   children,
@@ -63,7 +63,10 @@ type FormikStaticFieldProps = {
   value: string;
 } & StaticFieldProps;
 
-export const FormikStaticField: React.FC<FormikStaticFieldProps> = ({ value, ...props }) => {
+export const FormikStaticField: React.FC<React.PropsWithChildren<FormikStaticFieldProps>> = ({
+  value,
+  ...props
+}) => {
   const [, , helpers] = useField({ name: props.name });
 
   React.useEffect(() => {
@@ -77,7 +80,10 @@ export const FormikStaticField: React.FC<FormikStaticFieldProps> = ({ value, ...
  * Simplified form component for rendering static text.
  * Does not reflect field value from formik.
  */
-export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props }) => {
+export const StaticTextField: React.FC<React.PropsWithChildren<StaticFieldProps>> = ({
+  children,
+  ...props
+}) => {
   const fieldId = getFieldId(props.name, 'static');
 
   return (

package/lib/common/components/ui/Toolbar/ToolbarSecondaryGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ToolbarGroup } from '@patternfly/react-core';
 
-const ToolbarSecondaryGroup: React.FC = ({ children }) => (
+const ToolbarSecondaryGroup: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ToolbarGroup align={{ md: 'alignEnd' }}>{children}</ToolbarGroup>
 );
 

package/lib/common/components/ui/formik/CertificatesUploadField.tsx

@@ -14,7 +14,7 @@ import { useField } from 'formik';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { FileRejection } from 'react-dropzone';
 
-const CertificatesUploadField: React.FC<UploadFieldProps> = ({
+const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,

package/lib/common/components/ui/formik/InputField.tsx

@@ -15,7 +15,9 @@ import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const InputField: React.FC<
-  InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  React.PropsWithChildren<
+    InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  >
   // eslint-disable-next-line react/display-name
 > = React.forwardRef(
   (

package/lib/common/components/ui/formik/LabelField.tsx

@@ -1,101 +1,158 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
   Label,
+  LabelGroup,
+  TextInput,
 } from '@patternfly/react-core';
-import TagsInput from 'react-tagsinput';
-import { InputFieldProps } from './types';
-import { getFieldId } from './utils';
-
-import './LabelField.css';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
-type LabelValueProps = {
-  value: React.ReactText;
-  onClose?: () => void;
-};
 
-export const LabelValue: React.FC<LabelValueProps> = ({ value, onClose }) => (
-  <Label className="label-field__value" variant="outline" onClose={onClose}>
-    {value}
-  </Label>
-);
+import { useTranslation } from '../../../hooks';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { getFieldId } from './utils';
 
-type LabelFieldProps = InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
+type LabelsFieldProps = {
+  name: string;
+  label: string;
+  idPostfix?: string;
 };
 
-export const LabelField: React.FC<LabelFieldProps> = ({
-  label,
-  labelIcon,
-  helperText,
-  isRequired,
-  onChange,
-  validate,
-  idPostfix,
-  ...props
-}) => {
+export const LabelField = ({ name, label, idPostfix }: LabelsFieldProps) => {
   const { t } = useTranslation();
-  const [input, setInput] = React.useState('');
-  const [field, { touched, error }, { setValue, setTouched }] = useField({
-    name: props.name,
-    validate,
-  });
-  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const [{ value: labels }, { touched, error }, { setValue: setLabels, setTouched }] =
+    useField<string[]>(name);
+  const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
 
+  const onDelete = (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1);
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onAdd = (text: string) => {
+    if (!text) {
+      return;
+    }
+    const newLabels = [...labels, text];
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1, nextText);
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
-      {t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.")}
-      <div className="co-search-input pf-v6-c-form-control">
-        <TagsInput
-          {...field}
-          onChange={(tags) => {
-            setValue(tags);
-            setInput('');
-            onChange && onChange(tags);
-            !touched && setTouched(true);
-          }}
-          addKeys={[13, 32, 188]}
-          renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-            <LabelValue key={key} onClose={() => onRemove(key)} value={getTagDisplayValue(tag)} />
-          )}
-          addOnBlur
-          inputProps={{
-            autoFocus: false,
-            className: 'label-field__input',
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            placeholder: field.value?.length ? '' : 'app=frontend',
-            spellCheck: 'false',
-            id: 'tags-input',
-            value: input,
-            // eslint-disable-next-line
-            onChange: (e: any) => setInput(e.target.value),
-            ['data-test']: 'tags-input',
-          }}
-        />
-      </div>
-      {(errorMessage || helperText) && (
-        <FormHelperText>
-          <HelperText>
+    <FormGroup label={label}>
+      <LabelGroup
+        numLabels={5}
+        addLabelControl={<EditableLabelControl defaultLabel="key=value" onAddLabel={onAdd} />}
+      >
+        {labels.map((label, index) => {
+          return (
+            <Label
+              key={index}
+              textMaxWidth="16ch"
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+              title={label}
+              isEditable
+            >
+              {label}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            id={`${fieldId}-helper-text`}
+            data-testid={`input-label-${fieldId}-helper-text`}
+          >
+            {t("ai:Enter a key=value and then press 'enter' to input the label.")}
+          </HelperTextItem>
+          {errorMessage && (
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-label-${fieldId}-helper-text`}
+              icon={<ExclamationCircleIcon />}
+              variant={'error'}
+              id={`${fieldId}-helper-error`}
+              data-testid={`input-label-${fieldId}-helper-error`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {errorMessage}
             </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
+          )}
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };
+
+type EditableLabelControlProps = {
+  defaultLabel: string;
+  onAddLabel: (text: string) => void;
+};
+
+const EditableLabelControl = ({ defaultLabel, onAddLabel }: EditableLabelControlProps) => {
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [label, setLabel] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const onConfirmAdd = () => {
+    onAddLabel(label);
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  const onDiscardAdd = () => {
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  return isEditing ? (
+    <TextInput
+      aria-label={t('ai:New label')}
+      autoFocus
+      value={label}
+      onChange={(_, value) => {
+        setLabel(value);
+      }}
+      onBlur={onConfirmAdd}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onConfirmAdd();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onDiscardAdd();
+        }
+      }}
+    />
+  ) : (
+    <Button
+      aria-label={t('ai:Add label')}
+      variant="link"
+      className="pf-v6-u-ml-xs"
+      isInline
+      onClick={() => {
+        setIsEditing(true);
+        setLabel(defaultLabel);
+      }}
+    >
+      {t('ai:Add label')}
+    </Button>
+  );
+};

package/lib/common/components/ui/formik/NumberInputField.tsx

@@ -15,7 +15,7 @@ import { getFieldId } from './utils';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // eslint-disable-next-line react/display-name
-const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
+const NumberInputField: React.FC<React.PropsWithChildren<NumberInputFieldProps>> = React.forwardRef(
   (
     {
       label,

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -164,7 +164,7 @@ const SelectFieldWithSearch = ({
   };
 
   const onSelect = React.useCallback(
-    (val) => {
+    (val: unknown) => {
       if (val && val !== NO_RESULTS) {
         if (isMultiSelect && Array.isArray(value)) {
           setValue(

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -11,7 +11,7 @@ import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const TextAreaField: React.FC<TextAreaFieldProps> = ({
+const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
   label,
   helperText,
   getErrorText,