@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/src/components/common/ResourceListEmptyState.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EmptyState, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+import { EmptyState } from '@patternfly/react-core';
 
 type ResourceListEmptyStateProps = {
   titleText: string;
@@ -11,8 +11,12 @@ const ResourceListEmptyState = ({
   icon,
   children,
 }: React.PropsWithChildren<ResourceListEmptyStateProps>) => (
-  <EmptyState style={{ '--pf-v5-c-empty-state--PaddingTop': '4rem' } as React.CSSProperties}>
-    <EmptyStateHeader titleText={titleText} headingLevel="h4" icon={<EmptyStateIcon icon={icon} />} />
+  <EmptyState
+    headingLevel="h4"
+    icon={icon}
+    titleText={titleText}
+    style={{ '--pf-v6-c-empty-state--PaddingBlockStart': '4rem' } as React.CSSProperties}
+  >
     {children}
   </EmptyState>
 );

package/src/components/common/WithHelperText.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { Button, FormGroup, Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
-import './WithHelperText.css';
-
 type HelperTextPopoverProps = {
   label: string;
   triggerAction?: 'click' | 'hover';
@@ -21,8 +19,8 @@ const HelperTextPopover = ({
 }: Omit<HelperTextPopoverProps, 'label'> & { ariaLabel: string }) => (
   <Popover aria-label={ariaLabel} bodyContent={content} withFocusTrap triggerAction={triggerAction}>
     <Button
+      icon={<OutlinedQuestionCircleIcon />}
       component="a"
-      className="fctl-helper-text__icon"
       isInline
       variant="plain"
       onClick={(ev) => {
@@ -30,9 +28,7 @@ const HelperTextPopover = ({
         ev.stopPropagation();
       }}
       aria-label={`${ariaLabel} help text`}
-    >
-      <OutlinedQuestionCircleIcon />
-    </Button>
+    />
   </Popover>
 );
 
@@ -56,7 +52,7 @@ export const FormGroupWithHelperText = ({
 }: React.PropsWithChildren<FormGroupWithHelperTextProps>) => (
   <FormGroup
     label={label}
-    labelIcon={<HelperTextPopover ariaLabel={label} content={content} />}
+    labelHelp={<HelperTextPopover ariaLabel={label} content={content} />}
     isRequired={isRequired}
   >
     {children}

package/src/components/form/ExpandableFormSection.tsx

@@ -6,8 +6,6 @@ import { useField, useFormikContext } from 'formik';
 import { useTranslation } from '../../hooks/useTranslation';
 import WithTooltip from '../common/WithTooltip';
 
-import './ExpandableFormSection.css';
-
 const ExpandableFormSection = ({
   fieldName,
   title,
@@ -30,12 +28,18 @@ const ExpandableFormSection = ({
         <Split hasGutter>
           <SplitItem>{title}</SplitItem>
           {!isExpanded && !!description && (
-            <SplitItem style={{ color: 'var(--pf-v5-global--Color--100)' }}>{description}</SplitItem>
+            <SplitItem
+              style={{
+                color: 'var(--pf-t--global--text--color--regular)',
+              }}
+            >
+              {description}
+            </SplitItem>
           )}
           {!isExpanded && error && (
             <SplitItem>
               <WithTooltip showTooltip content={t('Invalid {{ itemType }}', { itemType: title })}>
-                <ExclamationCircleIcon className="fctl-expandable-section--error" />
+                <ExclamationCircleIcon style={{ color: 'var(--pf-t--global--icon--color--status--danger--default)' }} />
               </WithTooltip>
             </SplitItem>
           )}

package/src/components/form/FilterSelect.css

@@ -6,10 +6,6 @@
   position: relative;
 }
 
-.fctl-toggle-content__badge {
-  margin-left: var(--pf-v5-global--spacer--sm);
-}
-
 .fctl-toggle-content__loader {
   position: absolute;
   top: 0;

package/src/components/form/FlightCtlForm.tsx

@@ -2,12 +2,10 @@ import * as React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Form } from '@patternfly/react-core';
 
-import './FlightCtlForm.css';
-
 const FlightCtlForm = ({ className, children }: React.PropsWithChildren<{ className?: string }>) => {
   return (
     <Form
-      className={className ? `fctl-form ${className}` : 'fctl-form'}
+      className={className}
       onSubmit={(ev) => {
         ev.preventDefault();
       }}

package/src/components/form/FormSelect.css

@@ -1,16 +1,12 @@
 .fctl-form-select__toggle {
-    width: 100%;
+  width: 100%;
 }
 
 .fctl-form-select__menu {
-    max-height: 20rem;
-    overflow: auto;
+  max-height: 20rem;
+  overflow: auto;
 }
 
-.fctl-form-select{
-    max-width: 30rem;
+.fctl-form-select {
+  max-width: 30rem;
 }
-
-.fctl-form-select__item .pf-v5-c-menu__item-text {
-    white-space: normal;
-}

package/src/components/form/FormSelect.tsx

@@ -6,7 +6,7 @@ import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 import './FormSelect.css';
 
-type SelectItem = { label: string; description?: string };
+export type SelectItem = { label: string; description?: React.ReactNode; isDisabled?: boolean };
 
 type FormSelectProps = {
   name: string;
@@ -97,9 +97,14 @@ const FormSelect = ({
           <SelectList className="fctl-form-select__menu">
             {itemKeys.map((key) => {
               const item = items[key];
-              const desc = isItemObject(item) ? item.description : undefined;
+              let desc: React.ReactNode;
+              let isDisabled = false;
+              if (isItemObject(item)) {
+                desc = item.description || '';
+                isDisabled = Boolean(item.isDisabled);
+              }
               return (
-                <SelectOption key={key} value={key} description={desc}>
+                <SelectOption key={key} value={key} description={desc} isDisabled={isDisabled}>
                   {getItemLabel(item)}
                 </SelectOption>
               );

package/src/components/form/ListItemField.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { Label, LabelGroup, Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants, Label, LabelGroup } from '@patternfly/react-core';
 
 import EditableLabelControl from '../common/EditableLabelControl';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
@@ -111,9 +111,15 @@ const ListItemField = ({
         })}
       </LabelGroup>
       {displayedResolvedValue && (
-        <Text component={TextVariants.small} style={{ marginTop: '0.5rem', color: 'var(--pf-v5-global--Color--200)' }}>
+        <Content
+          component={ContentVariants.small}
+          style={{
+            marginTop: '0.5rem',
+            color: 'var(--pf-t--global--text--color--subtle)',
+          }}
+        >
           {resolvedLabel || t('Resolved')}: <strong>{displayedResolvedValue}</strong>
-        </Text>
+        </Content>
       )}
       <ErrorHelperText meta={meta} touchRequired={false} />
     </>

package/src/components/form/RepositorySelect.tsx

@@ -0,0 +1,228 @@
+import * as React from 'react';
+import { useField, useFormikContext } from 'formik';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  FormGroup,
+  Icon,
+  MenuFooter,
+  SelectList,
+  SelectOption,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { TFunction } from 'react-i18next';
+
+import { ConditionStatus, ConditionType, RepoSpecType, Repository } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { StatusLevel } from '../../utils/status/common';
+import CreateRepositoryModal from '../modals/CreateRepositoryModal/CreateRepositoryModal';
+import { StatusDisplayContent } from '../Status/StatusDisplay';
+import { getRepoUrlOrRegistry } from '../Repository/CreateRepository/utils';
+import FormSelect, { SelectItem } from './FormSelect';
+import { DefaultHelperText } from './FieldHelperText';
+
+export const getRepositoryItems = (
+  t: TFunction,
+  repositories: Repository[],
+  repoType: RepoSpecType,
+  selectedRepoName?: string,
+  // Returns an error message if the repository cannot be selected
+  validateRepoSelection?: (repo: Repository) => string | undefined,
+) => {
+  const invalidRepoItems: Record<string, SelectItem> = {};
+  const validRepoItems: Record<string, SelectItem> = {};
+
+  repositories
+    .filter((repo) => {
+      return repo.spec.type === repoType;
+    })
+    .forEach((repo) => {
+      const selectionError = validateRepoSelection ? validateRepoSelection(repo) : undefined;
+      const repoName = repo.metadata.name as string;
+      if (selectionError) {
+        invalidRepoItems[repoName] = {
+          label: repoName,
+          description: (
+            <Stack>
+              <StackItem>{getRepoUrlOrRegistry(repo.spec)}</StackItem>
+              <StackItem>{selectionError}</StackItem>
+            </Stack>
+          ),
+        };
+      } else {
+        const accessibleCondition = repo.status?.conditions?.find((c) => c.type === ConditionType.RepositoryAccessible);
+        const isAccessible = accessibleCondition && accessibleCondition.status === ConditionStatus.ConditionStatusTrue;
+        const isInaccessible =
+          accessibleCondition && accessibleCondition.status === ConditionStatus.ConditionStatusFalse;
+        const urlOrRegistry = getRepoUrlOrRegistry(repo.spec);
+
+        let accessText = t('Unknown');
+        let level: StatusLevel = 'unknown';
+        if (isAccessible) {
+          accessText = t('Accessible');
+          level = 'success';
+        } else if (isInaccessible) {
+          accessText = t('Not accessible');
+          level = 'danger';
+        }
+
+        validRepoItems[repoName] = {
+          label: repoName,
+          description: (
+            <Flex
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              alignItems={{ default: 'alignItemsCenter' }}
+            >
+              <FlexItem>{urlOrRegistry}</FlexItem>
+              <FlexItem>
+                <StatusDisplayContent label={accessText} level={level} />
+              </FlexItem>
+            </Flex>
+          ),
+        };
+      }
+    });
+
+  // If the selected repository has been removed, we still consider it "valid" since it needs to be selected initially
+  const isSelectedRepoMissing =
+    selectedRepoName && !repositories.some((repo) => repo.metadata.name === selectedRepoName);
+  if (isSelectedRepoMissing && !validRepoItems[selectedRepoName]) {
+    validRepoItems[selectedRepoName] = {
+      label: selectedRepoName,
+      description: (
+        <>
+          <Icon size="sm" status="danger">
+            <ExclamationCircleIcon />
+          </Icon>{' '}
+          {t('Missing repository')}
+        </>
+      ),
+    };
+  }
+
+  return { validRepoItems, invalidRepoItems };
+};
+
+type RepositorySelectProps = {
+  name: string;
+  label?: string;
+  helperText?: string;
+  repositories: Repository[];
+  repoType: RepoSpecType;
+  canCreateRepo: boolean;
+  isReadOnly?: boolean;
+  repoRefetch?: VoidFunction;
+  options?: {
+    writeAccessOnly?: boolean;
+  };
+  isRequired?: boolean;
+  validateRepoSelection?: (repo: Repository) => string | undefined;
+};
+
+const ReadOnlyRepositoryListItem = ({ invalidRepoItems }: { invalidRepoItems: Record<string, SelectItem> }) => {
+  const itemKeys = Object.keys(invalidRepoItems);
+  if (itemKeys.length === 0) {
+    return null;
+  }
+  return (
+    <SelectList className="fctl-form-select__menu">
+      {itemKeys.map((key) => {
+        const item = invalidRepoItems[key];
+        return (
+          <SelectOption key={key} value={key} description={item.description} isDisabled>
+            {item.label}
+          </SelectOption>
+        );
+      })}
+    </SelectList>
+  );
+};
+
+const RepositorySelect = ({
+  name,
+  repositories,
+  repoType,
+  canCreateRepo,
+  isReadOnly,
+  repoRefetch,
+  label,
+  helperText,
+  options,
+  isRequired,
+  validateRepoSelection,
+}: RepositorySelectProps) => {
+  const { t } = useTranslation();
+  const { setFieldValue, setFieldError } = useFormikContext();
+  const [field] = useField<string>(name);
+  const [createRepoModalOpen, setCreateRepoModalOpen] = React.useState(false);
+
+  const { validRepoItems, invalidRepoItems } = React.useMemo(() => {
+    return getRepositoryItems(t, repositories, repoType, field.value, validateRepoSelection);
+  }, [t, repositories, repoType, field.value, validateRepoSelection]);
+
+  const handleCreateRepository = (repo: Repository) => {
+    setCreateRepoModalOpen(false);
+    if (repoRefetch) {
+      repoRefetch();
+    }
+
+    // If the created repository cannot be selected, we set the error and skip marking the repository as selected
+    if (validateRepoSelection) {
+      const selectionError = validateRepoSelection(repo);
+      if (selectionError) {
+        setFieldError(name, selectionError);
+        return;
+      }
+    }
+
+    void setFieldValue(name, repo.metadata.name, true);
+  };
+
+  return (
+    <>
+      <FormGroup label={label || t('Repository')} isRequired={isRequired}>
+        <FormSelect
+          name={name}
+          items={validRepoItems}
+          withStatusIcon
+          placeholderText={t('Select a repository')}
+          isDisabled={isReadOnly}
+        >
+          <ReadOnlyRepositoryListItem invalidRepoItems={invalidRepoItems} />
+
+          {canCreateRepo && (
+            <MenuFooter>
+              <Button
+                variant="link"
+                isInline
+                icon={<PlusCircleIcon />}
+                onClick={() => {
+                  setCreateRepoModalOpen(true);
+                }}
+                isDisabled={isReadOnly}
+              >
+                {t('Create repository')}
+              </Button>
+            </MenuFooter>
+          )}
+        </FormSelect>
+
+        {helperText && <DefaultHelperText helperText={helperText} />}
+      </FormGroup>
+      {createRepoModalOpen && (
+        <CreateRepositoryModal
+          type={repoType}
+          onClose={() => setCreateRepoModalOpen(false)}
+          onSuccess={handleCreateRepository}
+          options={options}
+        />
+      )}
+    </>
+  );
+};
+
+export default RepositorySelect;

package/src/components/form/RichValidationTextField.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useField } from 'formik';
 import {
   Button,
   FormGroup,
@@ -18,10 +19,9 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
-import successColor from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-import dangerColor from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-import infoColor from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
-import { useField } from 'formik';
+import dangerColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import successColor from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_success_default';
+import infoColor from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_300';
 
 interface RichValidationStatusProps {
   validations: RichValidationTextFieldProps['validations'];
@@ -54,7 +54,7 @@ const RichValidationStatus = ({ isRequired, hasValue, validations, metaError }:
         }
 
         return (
-          <HelperTextItem key={validation.key} isDynamic component="li" variant={variant} icon={iconType}>
+          <HelperTextItem key={validation.key} component="li" variant={variant} icon={iconType}>
             {validation.message}
           </HelperTextItem>
         );
@@ -131,15 +131,19 @@ const RichValidationTextField = React.forwardRef(
               }
               withFocusTrap={false}
             >
-              <Button variant="plain" aria-label="Validation">
-                {!hasValue ? (
-                  <InfoCircleIcon color={infoColor.value} />
-                ) : !!meta.error ? (
-                  <ExclamationCircleIcon color={dangerColor.value} />
-                ) : (
-                  <CheckCircleIcon color={successColor.value} />
-                )}
-              </Button>
+              <Button
+                icon={
+                  !hasValue ? (
+                    <InfoCircleIcon color={infoColor.value} />
+                  ) : !!meta.error ? (
+                    <ExclamationCircleIcon color={dangerColor.value} />
+                  ) : (
+                    <CheckCircleIcon color={successColor.value} />
+                  )
+                }
+                variant="plain"
+                aria-label="Validation"
+              />
             </Popover>
           </InputGroupItem>
         </InputGroup>

package/src/components/form/SwitchField.tsx

@@ -22,7 +22,7 @@ const SwitchField = ({ label, labelIcon, helperText, name, ...props }: SwitchFie
   const fieldId = `switchfield-${name}`;
 
   return (
-    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={label} labelIcon={labelIcon}>
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={label} labelHelp={labelIcon}>
       <Switch {...field} {...props} id={fieldId} onChange={onChange} isChecked={!!field.value} />
       <DefaultHelperText helperText={helperText} />
       <ErrorHelperText meta={meta} />

package/src/components/form/UploadField.tsx

@@ -7,7 +7,7 @@ import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 type UploadFieldProps = {
   name: string;
   isRequired?: boolean;
-  label: string;
+  ariaLabel: string;
   isDisabled?: boolean;
   getErrorText?: (error: string) => React.ReactNode | undefined;
   placeholder?: string;
@@ -15,47 +15,41 @@ type UploadFieldProps = {
   maxFileBytes?: number;
 };
 
-const UploadHelperText = ({
+const ONE_MB = 1024 * 1024;
+
+const UploadMaxFileSizeHelperText = ({ maxFileBytes }: { maxFileBytes: number }) => {
+  const { t } = useTranslation();
+
+  const showKB = maxFileBytes < ONE_MB;
+  const maxFileSize = maxFileBytes / (showKB ? 1024 : ONE_MB);
+
+  const helperText = showKB
+    ? t('Max file size {{ maxFileSize }} KB', { maxFileSize })
+    : t('Max file size {{ maxFileSize }} MB', { maxFileSize });
+
+  return <DefaultHelperText helperText={helperText} />;
+};
+
+const UploadErrorHelperText = ({
   meta,
   isUploading,
   isRejected,
-  maxFileBytes,
 }: {
   meta?: FieldMetaProps<unknown>;
   isUploading: boolean;
   isRejected: boolean;
-  maxFileBytes?: number;
 }) => {
   const { t } = useTranslation();
 
-  const maxFileMB = (maxFileBytes || 0) / (1024 * 1024);
-
-  const defaultContent = maxFileBytes ? (
-    <DefaultHelperText helperText={t('Max file size {{ maxFileSize }} MB', { maxFileSize: maxFileMB })} />
-  ) : null;
   if (isRejected) {
-    return (
-      <>
-        {defaultContent}
-        <ErrorHelperText
-          error={t('Content exceeds max file size of {{ maxFileSize }} MB', {
-            maxFileSize: maxFileMB,
-          })}
-        />
-      </>
-    );
+    return <ErrorHelperText error={t('File exceeds maximum allowed size.')} />;
   } else if (!isUploading && !!meta?.error) {
-    return (
-      <>
-        {defaultContent}
-        <ErrorHelperText meta={meta} />
-      </>
-    );
+    return <ErrorHelperText meta={meta} />;
   }
-  return defaultContent;
+  return null;
 };
 
-const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps) => {
+const UploadField = ({ ariaLabel, maxFileBytes, isRequired, name }: UploadFieldProps) => {
   const { t } = useTranslation();
   const fieldId = `fileuploadfield-${name}`;
 
@@ -83,13 +77,14 @@ const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps
       }
     }
 
-    void setValue(file);
+    // To prevent timing issues with validations, we must touch the field before we set the new value
     void setTouched(true);
+    void setValue(file, true);
     setIsRejected(false);
   };
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired}>
+    <FormGroup fieldId={fieldId} aria-label={ariaLabel} isRequired={isRequired}>
       <FileUpload
         type="text"
         id={field.name}
@@ -97,6 +92,7 @@ const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps
         filenamePlaceholder={t('Drag a file or browse to upload')}
         browseButtonText={t('Browse...')}
         clearButtonText={t('Clear')}
+        allowEditingUploadedText
         style={{ resize: 'vertical' }}
         validated={isValid || isFileUploading ? 'default' : 'error'}
         value={field.value as string}
@@ -104,7 +100,9 @@ const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps
         onDataChange={handleFileChange}
         onTextChange={handleFileChange}
         onFileInputChange={(_event, file) => {
-          if (!maxFileBytes || file.size <= maxFileBytes) {
+          if (maxFileBytes && file.size > maxFileBytes) {
+            handleFileRejected(true);
+          } else {
             setFilename(file.name);
             setIsRejected(false);
           }
@@ -121,27 +119,27 @@ const UploadField = ({ label, maxFileBytes, isRequired, name }: UploadFieldProps
         }}
         onClearClick={() => {
           setFilename('');
+          if (!isRequired) {
+            void setTouched(false);
+          }
           void setValue('');
-          void setTouched(false);
         }}
       />
-
-      <UploadHelperText maxFileBytes={maxFileBytes} meta={meta} isUploading={isFileUploading} isRejected={isRejected} />
+      {maxFileBytes && <UploadMaxFileSizeHelperText maxFileBytes={maxFileBytes} />}
+      <UploadErrorHelperText meta={meta} isUploading={isFileUploading} isRejected={isRejected} />
     </FormGroup>
   );
 };
 
-const UploadFieldWrapper = ({ name, label, maxFileBytes, isRequired, ...rest }: UploadFieldProps) => {
+const UploadFieldWrapper = ({ name, ariaLabel, maxFileBytes, isRequired, ...rest }: UploadFieldProps) => {
   const [{ value }] = useField<string>(name);
 
   if (rest.isDisabled) {
-    return (
-      <FormGroup label={label} isRequired={isRequired}>
-        <TextArea aria-label={label} name={name} value={value} {...rest} isDisabled />
-      </FormGroup>
-    );
+    return <TextArea aria-label={ariaLabel} name={name} value={value} {...rest} isDisabled />;
   }
-  return <UploadField name={name} label={label} maxFileBytes={maxFileBytes} isRequired={isRequired} {...rest} />;
+  return (
+    <UploadField name={name} ariaLabel={ariaLabel} maxFileBytes={maxFileBytes} isRequired={isRequired} {...rest} />
+  );
 };
 
 export default UploadFieldWrapper;