@openshift-assisted/ui-lib 2.12.1-cim → 2.14.0-cim

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TECH_SUPPORT_LEVEL_LINK } from '../../config/constants';
+import { TECH_SUPPORT_LEVEL_LINK } from '../../config/docs_links';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
 export type TechnologyPreviewProps = Omit<
   PreviewBadgeProps,
-  'text' | 'popoverText' | 'externalLink'
+  'text' | 'popoverContent' | 'externalLink'
 >;
 
 export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
@@ -14,7 +14,7 @@ export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
   return (
     <PreviewBadge
       text={t('ai:Technology Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.',
       )}
       externalLink={TECH_SUPPORT_LEVEL_LINK}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarGroup } from '@patternfly/react-core';
 
 const ToolbarSecondaryGroup: React.FC = ({ children }) => (
-  <ToolbarGroup alignment={{ md: 'alignRight' }}>{children}</ToolbarGroup>
+  <ToolbarGroup align={{ md: 'alignRight' }}>{children}</ToolbarGroup>
 );
 
 export default ToolbarSecondaryGroup;

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

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import { Icon, IconComponentProps } from '@patternfly/react-core';
+
+export type UiIconProps = {
+  size?: IconComponentProps['size'];
+  status?: IconComponentProps['status'] | undefined;
+  icon?: ReactElement;
+  className?: string;
+};
+
+const UiIcon: React.FC<UiIconProps> = (props) => {
+  return (
+    <>
+      <Icon size={props.size ? props.size : 'md'} status={props.status} className={props.className}>
+        {props.icon}
+      </Icon>
+    </>
+  );
+};
+
+export default UiIcon;

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

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core/deprecated';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,10 +13,10 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <ExclamationCircleIcon
+        <UiIcon
+          status="danger"
           className="wizard-nav-item-warning-icon"
-          color={dangerColor.value}
-          size="sm"
+          icon={<ExclamationCircleIcon />}
         />
       </>
     );

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

@@ -91,7 +91,7 @@ export const EventsModal = ({
     <Modal
       header={
         <Title headingLevel={'h1'}>
-          {title} {isLoading && <Spinner isSVG size="lg" />}
+          {title} {isLoading && <Spinner size="lg" />}
         </Title>
       }
       isOpen={isOpen}

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

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { FormGroup, FileUpload } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FileUpload,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  DropEvent,
+} from '@patternfly/react-core';
 import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 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> = ({
   label,
@@ -20,9 +28,11 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
 
   const maxFileSize = 100000; //100 kb
   const maxFileSizeKb = 100;
-  const acceptedFiles =
-    '.pem,.crt,.ca,.cert,application/x-pem-file,application/x-x509-ca-cert,text/plain';
-
+  const acceptedFiles = {
+    'application/x-pem-file': ['.pem', '.crt', '.ca', '.cert'],
+    'application/x-x509-ca-cert': ['.pem', '.crt', '.ca', '.cert'],
+    'text/plain': ['.pem', '.crt', '.ca', '.cert'],
+  };
   const fieldId = getFieldId(name, 'input', idPostfix);
   const [field, , { setValue }] = useField<string | File>(name);
   const [filename, setFilename] = React.useState('');
@@ -30,10 +40,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   const [isRejected, setIsRejected] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File,
-  ) => {
+  const handleFileInputChange = (_event: DropEvent, file: File) => {
     setFilename(file.name);
   };
 
@@ -59,8 +66,8 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
     setErrorMessage('');
   };
 
-  const handleFileRejected = (_rejectedFiles: File[]) => {
-    if (_rejectedFiles[0].size > maxFileSize) {
+  const handleFileRejected = (_rejectedFiles: FileRejection[]) => {
+    if (_rejectedFiles[0].file.size > maxFileSize) {
       setIsRejected(true);
       setErrorMessage(
         t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }),
@@ -82,29 +89,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   };
 
   return (
-    <FormGroup
-      fieldId={fieldId}
-      label={label}
-      helperText={
-        typeof helperText === 'string' ? (
-          helperText
-        ) : (
-          <HelperText fieldId={fieldId}>{helperText}</HelperText>
-        )
-      }
-      helperTextInvalid={
-        typeof errorMessage === 'string' ? (
-          errorMessage
-        ) : (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
-          </HelperText>
-        )
-      }
-      validated={isRejected ? 'error' : 'default'}
-      isRequired={isRequired}
-      labelIcon={labelIcon}
-    >
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -118,8 +103,8 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
         value={field.value}
         filename={filename}
         onFileInputChange={handleFileInputChange}
-        onDataChange={handleTextOrDataChange}
-        onTextChange={handleTextOrDataChange}
+        onDataChange={(_event, value: string) => handleTextOrDataChange(value)}
+        onTextChange={(_event, value: string) => handleTextOrDataChange(value)}
         onReadStarted={handleFileReadStarted}
         onReadFinished={handleFileReadFinished}
         onClearClick={handleClear}
@@ -133,6 +118,19 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={true}
       />
+      {(errorMessage || helperText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { Checkbox, FormGroup, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Checkbox,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { CheckboxFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const CheckboxField: React.FC<CheckboxFieldProps> = ({
   label,
@@ -17,40 +23,38 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
   const fieldId = getFieldId(props.name, 'checkbox', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
-  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+  const fieldHelperText = <HelperText>{helperText}</HelperText>;
 
   return (
-    <Stack id={`form-control__${fieldId}`}>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-        >
-          <Checkbox
-            {...field}
-            {...props}
-            id={fieldId}
-            label={label}
-            aria-describedby={`${fieldId}-helper`}
-            description={fieldHelperText}
-            isValid={isValid}
-            isChecked={field.value as boolean}
-            onChange={(value, event) => {
-              field.onChange(event);
-              onChange && onChange(value, event);
-            }}
-          />
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup fieldId={fieldId} id={`form-control__${fieldId}`}>
+      <Checkbox
+        {...field}
+        {...props}
+        id={fieldId}
+        label={label}
+        aria-describedby={`${fieldId}-helper`}
+        description={fieldHelperText}
+        isValid={isValid}
+        isChecked={field.value as boolean}
+        onChange={(event, value) => {
+          field.onChange(event);
+          onChange && onChange(value, event);
+        }}
+      />
+      {errorMessage && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant="error"
+              id={`${fieldId}-helper-error`}
+            >
+              {errorMessage}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, HelperTextItem, Stack, StackItem } from '@patternfly/react-core';
+import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import { CodeFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
-import { CodeEditor } from '@patternfly/react-code-editor';
+import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import PasteIcon from '@patternfly/react-icons/dist/js/icons/paste-icon';
 
 const CodeField = ({
   label,
@@ -21,57 +22,94 @@ const CodeField = ({
   downloadFileName,
   dataTestid,
   isReadOnly,
+  showCustomControls = false,
 }: CodeFieldProps) => {
   const [field, , { setValue, setTouched }] = useField({ name, validate });
   const fieldId = getFieldId(name, 'input', idPostfix);
   const errorMessage = useFieldErrorMsg({ name, validate });
 
   const isValid = !errorMessage;
-  const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+
+  const pasteFromClipboardFirefox = () => {
+    return new Promise((resolve) => {
+      const handlePaste = (e: ClipboardEvent) => {
+        const text = e?.clipboardData?.getData('text/plain');
+        document.removeEventListener('paste', handlePaste);
+        resolve(text);
+      };
+      document.addEventListener('paste', handlePaste);
+      alert('Use Ctrl+V to paste the content in this browser');
+    });
+  };
+
+  const pasteFromClipboard = async (): Promise<string | undefined> => {
+    if (navigator.clipboard && navigator.clipboard.readText) {
+      try {
+        return await navigator.clipboard.readText();
+      } catch (err) {
+        return '';
+      }
+    } else {
+      const text = await pasteFromClipboardFirefox();
+      return text as string;
+    }
+  };
+
+  const customControl = (
+    <CodeEditorControl
+      icon={<PasteIcon />}
+      aria-label="Paste content"
+      tooltipProps={{ content: 'Paste content' }}
+      onClick={() => {
+        void pasteFromClipboard().then((text) => setValue(text, true));
+      }}
+      isVisible
+    />
+  );
 
   return (
-    <Stack>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-          data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
-        >
-          {description && (
-            <HelperText fieldId={fieldId}>
-              <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
-            </HelperText>
-          )}
-          <CodeEditor
-            code={field.value as string}
-            isUploadEnabled={!isDisabled}
-            isDownloadEnabled={isValid}
-            isCopyEnabled
-            isLanguageLabelVisible
-            height="400px"
-            language={language}
-            downloadFileName={downloadFileName}
-            onCodeChange={(value) => {
-              setTouched(true);
-              setValue(value, true);
-            }}
-            isReadOnly={isReadOnly}
-          />
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      isRequired={isRequired}
+      labelIcon={labelIcon}
+      data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
+    >
+      {description && (
+        <HelperText>
+          <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+        </HelperText>
+      )}
+      <CodeEditor
+        code={field.value as string}
+        isUploadEnabled={!isDisabled}
+        isDownloadEnabled={isValid}
+        isCopyEnabled
+        isLanguageLabelVisible
+        height="400px"
+        language={language}
+        downloadFileName={downloadFileName}
+        onCodeChange={(value) => {
+          setTouched(true);
+          setValue(value, true);
+        }}
+        isReadOnly={isReadOnly}
+        customControls={showCustomControls ? customControl : undefined}
+      />
+      {(errorMessage || helperText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage && <ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : helperText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -2,17 +2,17 @@ import * as React from 'react';
 import { useField } from 'formik';
 import {
   FormGroup,
+  FormHelperText,
+  HelperText,
   HelperTextItem,
   Split,
   SplitItem,
-  Stack,
-  StackItem,
   TextInput,
 } from '@patternfly/react-core';
 import { InputFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 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 }
@@ -43,57 +43,56 @@ const InputField: React.FC<
 
     const fieldId = getFieldId(props.name, 'input', idPostfix);
     const errorMessage = useFieldErrorMsg({ name: props.name, inputError: error, validate });
-    const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
     const isValid = !(touched && error);
 
     return (
-      <Stack id={`form-control__${fieldId}`}>
-        <StackItem>
-          <FormGroup
-            fieldId={fieldId}
-            label={label}
-            helperText={fieldHelperText}
-            helperTextInvalid={fieldHelperText}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            labelIcon={labelIcon}
-            labelInfo={labelInfo}
-          >
-            {description && (
-              <HelperText fieldId={fieldId}>
-                <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
-              </HelperText>
-            )}
-            <Split>
-              <SplitItem isFilled>
-                <TextInput
-                  {...field}
-                  {...props}
-                  ref={ref}
-                  id={fieldId}
-                  validated={isValid ? 'default' : 'error'}
-                  isRequired={isRequired}
-                  aria-describedby={`${fieldId}-helper`}
-                  onChange={(value, event) => {
-                    if (!props.isDisabled) {
-                      !noDefaultOnChange && field.onChange(event);
-                      onChange && onChange(event);
-                    }
-                  }}
-                />
-              </SplitItem>
-              <SplitItem>{children}</SplitItem>
-            </Split>
-          </FormGroup>
-        </StackItem>
-        <StackItem>
-          {showErrorMessage && !isValid && (
-            <HelperText fieldId={fieldId} isError>
-              {errorMessage}
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        fieldId={fieldId}
+        label={label}
+        isRequired={isRequired}
+        labelIcon={labelIcon}
+        labelInfo={labelInfo}
+      >
+        {description && (
+          <HelperText>
+            <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+          </HelperText>
+        )}
+        <Split>
+          <SplitItem isFilled>
+            <TextInput
+              {...field}
+              {...props}
+              ref={ref}
+              id={fieldId}
+              validated={isValid ? 'default' : 'error'}
+              isRequired={isRequired}
+              aria-describedby={`${fieldId}-helper`}
+              onChange={(event) => {
+                if (!props.isDisabled) {
+                  !noDefaultOnChange && field.onChange(event);
+                  onChange && onChange(event);
+                }
+              }}
+            />
+          </SplitItem>
+          <SplitItem>{children}</SplitItem>
+        </Split>
+        {((showErrorMessage && !isValid) || helperText) && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem
+                icon={errorMessage && <ExclamationCircleIcon />}
+                variant={showErrorMessage ? 'error' : 'default'}
+                id={showErrorMessage && !isValid ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              >
+                {showErrorMessage ? errorMessage : helperText}
+              </HelperTextItem>
             </HelperText>
-          )}
-        </StackItem>
-      </Stack>
+          </FormHelperText>
+        )}
+      </FormGroup>
     );
   },
 );

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

@@ -1,17 +1,22 @@
 .label-field__value {
-  margin: 0 var(--pf-global--spacer--sm) 0 0;
+  margin: 0 var(--pf-v5-global--spacer--sm) 0 0;
 }
 
 .label-field__input {
   border: 1px solid transparent;
   outline: none;
   width: 100%;
+  background-color: initial;
+}
+
+.label-field__input::placeholder {
+  color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {
-  margin-left: var(--pf-global--spacer-xs);
-  margin-right: var(--pf-global--spacer-xs);
-  box-shadow: var(--pf-global--BoxShadow--lg);
+  margin-left: var(--pf-v5-global--spacer-xs);
+  margin-right: var(--pf-v5-global--spacer-xs);
+  box-shadow: var(--pf-v5-global--BoxShadow--lg);
 
   max-height: 10rem;
   overflow: auto;
@@ -24,13 +29,13 @@
 
 .label-field .react-autosuggest__suggestion--highlighted {
   /* TODO(mlibra): maybe a lighter color would be better */
-  background-color: var(--pf-global--primary-color--light-100);
+  background-color: var(--pf-v5-global--primary-color--light-100);
 }
 
 .label-field .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
-  font-size: var(--pf-global--FontSize--sm);
-  color: var(--pf-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .label-field .react-tagsinput {