@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

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

@@ -1,47 +1,59 @@
 import React from 'react';
 import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer';
-import { Text, TextVariants, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
-import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';
-import { global_palette_purple_400 } from '@patternfly/react-tokens/dist/js/global_palette_purple_400';
-import { global_palette_blue_300 } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
-import defaultTheme from 'prism-react-renderer/themes/github';
+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 lightTheme from 'prism-react-renderer/themes/github';
+import darkTheme from 'prism-react-renderer/themes/okaidia';
 import './PrismCode.css';
-export const SimpleAIPrismTheme = {
-  plain: {
-    color: global_Color_100.value,
-    backgroundColor: defaultTheme.plain.backgroundColor,
-    fontSize: '.93em',
-  },
-  styles: [
-    {
-      types: ['variable'],
-      style: {
-        color: global_palette_blue_300.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: global_palette_purple_400.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 }) => (
-      <Text component={TextVariants.pre} className={className} style={style}>
+      <Content component="pre" className={className} style={style}>
         {copiable && (
           <ClipboardCopy
             isReadOnly
@@ -59,7 +71,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
             ))}
           </div>
         ))}
-      </Text>
+      </Content>
     )}
   </Highlight>
 );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextContent, Text, TextVariants, GridItem } from '@patternfly/react-core';
+import { Content, ContentVariants, GridItem } from '@patternfly/react-core';
 import { WithTestID } from '../../types';
 
 interface SectionTitleProps extends WithTestID {
@@ -8,11 +8,9 @@ interface SectionTitleProps extends WithTestID {
 
 const SectionTitle = ({ title, testId }: SectionTitleProps) => (
   <GridItem>
-    <TextContent>
-      <Text data-testid={testId} component={TextVariants.h3}>
-        {title}
-      </Text>
-    </TextContent>
+    <Content data-testid={testId} component={ContentVariants.h3}>
+      {title}
+    </Content>
   </GridItem>
 );
 

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

@@ -52,6 +52,7 @@ export const SimpleDropdown = ({
       onClick={() => setOpen(!isOpen)}
       isDisabled={isDisabled}
       isExpanded={isOpen}
+      data-testid="simple-dropdown-toggle"
     >
       {current || defaultValue}
     </MenuToggle>

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { useField } from 'formik';
 import {
   FormGroup,
-  TextContent,
-  Text,
+  Content,
   FormHelperText,
   HelperText,
   HelperTextItem,
@@ -46,6 +45,7 @@ export const StaticField: React.FC<StaticFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={isValid ? 'default' : 'error'}
               id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
+              data-testid="static-text-field-helper-text"
             >
               {isValid ? helperText : helperTextInvalid}
             </HelperTextItem>
@@ -82,11 +82,9 @@ export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props
 
   return (
     <StaticField {...props}>
-      <TextContent>
-        <Text component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
-          {children}
-        </Text>
-      </TextContent>
+      <Content component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
+        {children}
+      </Content>
     </StaticField>
   );
 };

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 align={{ md: 'alignRight' }}>{children}</ToolbarGroup>
+  <ToolbarGroup align={{ md: 'alignEnd' }}>{children}</ToolbarGroup>
 );
 
 export default ToolbarSecondaryGroup;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { ToolbarItem, Text } from '@patternfly/react-core';
+import { ToolbarItem, Content } from '@patternfly/react-core';
 
-const ToolbarText: React.FC<React.ComponentProps<typeof Text>> = (props) => (
+const ToolbarText: React.FC<React.ComponentProps<typeof Content>> = (props) => (
   <ToolbarItem>
-    <Text {...props} />
+    <Content component="p" {...props} />
   </ToolbarItem>
 );
 

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

@@ -8,8 +8,8 @@ import {
   SplitItem,
   Stack,
   StackItem,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
 } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -69,7 +69,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 variant={ButtonVariant.primary}
                 name="next"
                 onClick={onNext}
-                isDisabled={isNextDisabled}
+                isDisabled={isNextDisabled || isSubmitting}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}
@@ -114,9 +114,9 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
           )}
           {isSubmitting && (
             <ActionListItem>
-              <Text component={TextVariants.small}>
-                <Spinner size="sm" /> {submittingText}
-              </Text>
+              <Content component={ContentVariants.small}>
+                <Spinner size="sm" data-testid="wizard-footer-spinner" /> {submittingText}
+              </Content>
             </ActionListItem>
           )}
           <SplitItem isFilled />

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

@@ -29,7 +29,11 @@ const NavItem = ({ isValid = () => true, children, ...props }: NavItemProps) =>
   const { content, isDisabled, isCurrent } = props;
 
   return (
-    <WizardNavItem {...props} content={getNavItemContent(content, isValid, isDisabled, isCurrent)}>
+    <WizardNavItem
+      {...props}
+      content={getNavItemContent(content, isValid, isDisabled, isCurrent)}
+      data-testid="cluster-wizard-navitem"
+    >
       {children}
     </WizardNavItem>
   );

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

@@ -1,15 +1,16 @@
 import React from 'react';
 import {
   Button,
-  Modal,
   ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-  ModalBoxBody,
   Spinner,
-  Title,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_warning_color_100 as globalWarningColor100 } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_icon_color_status_warning_default as globalIconColorWarning } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
 import { ToolbarButton } from './Toolbar';
 import { Cluster, Event } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps, EventsEntityKind } from '../../types';
@@ -89,25 +90,21 @@ export const EventsModal = ({
 
   return (
     <Modal
-      header={
-        <Title headingLevel={'h1'}>
-          {title} {isLoading && <Spinner size="lg" />}
-        </Title>
-      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
-      hasNoBodyWrapper
-      actions={[
-        <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
-          {t('ai:Close')}
-        </Button>,
-      ]}
       onClose={onClose}
       variant={ModalVariant.large}
       className="events-modal"
       id={'events-modal'}
     >
-      <ModalBoxBody className="events-modal__body">
+      <ModalHeader
+        title={
+          <>
+            {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
+          </>
+        }
+      />
+      <ModalBody className="events-modal__body">
         {fallbackEventsURL ? (
           <ErrorState
             title={t('ai:Could not load events')}
@@ -120,12 +117,22 @@ export const EventsModal = ({
               </>
             }
             icon={ExclamationTriangleIcon}
-            iconColor={globalWarningColor100.value}
+            iconColor={globalIconColorWarning.value}
           />
         ) : (
           <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
-      </ModalBoxBody>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="close"
+          variant={ButtonVariant.primary}
+          onClick={onClose}
+          data-testid="close-events-modal"
+        >
+          {t('ai:Close')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -14,16 +14,14 @@ export const AlertFormikError = ({ status, onClose }: AlertFormikErrorProps) =>
   const actionClose = onClose ? <AlertActionCloseButton onClose={onClose} /> : undefined;
 
   return (
-    <>
-      <Alert
-        variant={AlertVariant.danger}
-        title={status.error.title}
-        isInline
-        actionClose={actionClose}
-      >
-        {status.error.message}
-      </Alert>
-    </>
+    <Alert
+      variant={AlertVariant.danger}
+      title={status.error.title}
+      isInline
+      actionClose={actionClose}
+    >
+      {status.error.message}
+    </Alert>
   );
 };
 

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

@@ -89,7 +89,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -125,6 +125,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid="certificates-upload-field-helper-text"
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

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

@@ -48,6 +48,7 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant="error"
               id={`${fieldId}-helper-error`}
+              data-testid="checkbox-field-helper-text"
             >
               {errorMessage}
             </HelperTextItem>

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

@@ -72,12 +72,14 @@ const CodeField = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
     >
       {description && (
         <HelperText>
-          <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+          <HelperTextItem variant="indeterminate" data-testid="code-field-description-helper-text">
+            {description}
+          </HelperTextItem>
         </HelperText>
       )}
       <CodeEditor
@@ -103,6 +105,7 @@ const CodeField = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid="code-field-helper-text"
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

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

@@ -32,6 +32,7 @@ const InputField: React.FC<
       description,
       labelInfo,
       showErrorMessage = true,
+      type = 'text',
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -51,12 +52,17 @@ const InputField: React.FC<
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelIcon={labelIcon}
+        labelHelp={labelIcon}
         labelInfo={labelInfo}
       >
         {description && (
           <HelperText>
-            <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+            <HelperTextItem
+              variant="indeterminate"
+              data-testid=" input-field-description-${fieldId}-helper-text"
+            >
+              {description}
+            </HelperTextItem>
           </HelperText>
         )}
         <Split>
@@ -75,6 +81,7 @@ const InputField: React.FC<
                   onChange && onChange(event);
                 }
               }}
+              type={type}
             />
           </SplitItem>
           <SplitItem>{children}</SplitItem>
@@ -82,13 +89,20 @@ const InputField: React.FC<
         {((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>
+              {showErrorMessage && !isValid && (
+                <HelperTextItem
+                  icon={<ExclamationCircleIcon />}
+                  variant={'error'}
+                  id={`${fieldId}-helper-error`}
+                >
+                  {errorMessage}
+                </HelperTextItem>
+              )}
+              {helperText && (
+                <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                  {helperText}
+                </HelperTextItem>
+              )}
             </HelperText>
           </FormHelperText>
         )}

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

@@ -6,32 +6,15 @@ import {
   HelperText,
   HelperTextItem,
   Label,
+  TextInput,
 } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 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>
-);
 
-type LabelFieldProps = InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
-};
-
-export const LabelField: React.FC<LabelFieldProps> = ({
+export const LabelField = ({
   label,
   labelIcon,
   helperText,
@@ -40,6 +23,9 @@ export const LabelField: React.FC<LabelFieldProps> = ({
   validate,
   idPostfix,
   ...props
+}: InputFieldProps & {
+  // eslint-disable-next-line
+  onChange?: (tags: any[]) => void;
 }) => {
   const { t } = useTranslation();
   const [input, setInput] = React.useState('');
@@ -52,49 +38,81 @@ export const LabelField: React.FC<LabelFieldProps> = ({
   const errorMessage = !isValid ? error : '';
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={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-v5-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 fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+      <TagsInput
+        {...field}
+        onChange={(tags) => {
+          setValue(tags);
+          setInput('');
+          onChange && onChange(tags);
+          !touched && setTouched(true);
+        }}
+        addKeys={[13, 32, 188]}
+        renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
+          <Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
+            {getTagDisplayValue(tag)}
+          </Label>
+        )}
+        renderInput={({ value, onChange, ...rest }) => (
+          <TextInput
+            onChange={onChange as (e: unknown) => void}
+            value={value as string}
+            {...rest}
+          />
+        )}
+        renderLayout={(tagElements, inputElement) => (
+          <div
+            className="pf-v6-c-form-control"
+            style={{
+              padding: 0,
+              paddingTop: '1px',
+              display: 'flex',
+              alignItems: 'start',
+              flexWrap: 'wrap',
+              height: 'unset',
+              minHeight: '36px',
+            }}
+          >
+            <div>{tagElements}</div>
+            {inputElement}
+          </div>
+        )}
+        addOnBlur
+        inputProps={{
+          autoFocus: false,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          placeholder: field.value?.length ? '' : 'app=frontend',
+          spellCheck: 'false',
+          value: input,
+          // eslint-disable-next-line
+          onChange: (e: any) => setInput(e.target.value),
+          ['data-test']: fieldId,
+        }}
+      />
+
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            id={`${fieldId}-helper-text`}
+            data-testid={`input-label-${fieldId}-helper-text`}
+          >
+            {helperText ||
+              t(
+                "ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
+              )}
+          </HelperTextItem>
+          {errorMessage && (
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              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>
   );
 };