@flightctl/ui-components 1.1.0-rc3 → 1.1.0-rc5

package/src/components/common/FlightCtlWizardFooter.tsx

@@ -20,6 +20,8 @@ export type FlightCtlWizardFooterProps<T extends Record<string, unknown>> = {
   isReadOnly?: boolean;
   /** Text for the primary button when it will actually perform a save operation */
   saveButtonText?: string;
+  /** When provided (e.g. in a modal), Cancel button calls this instead of navigate(-1) */
+  onCancel?: VoidFunction;
 };
 
 const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
@@ -28,6 +30,7 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
   validateStep,
   isReadOnly = false,
   saveButtonText,
+  onCancel,
 }: FlightCtlWizardFooterProps<T>) => {
   const { t } = useTranslation();
   const { goToNextStep, goToPrevStep, activeStep } = useWizardContext();
@@ -47,20 +50,32 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
   let primaryBtn: React.ReactNode;
   if (isSubmitStep && !isReadOnly) {
     primaryBtn = (
-      <Button variant="primary" onClick={submitForm} isDisabled={isSubmitting} isLoading={isSubmitting}>
+      <Button
+        variant="primary"
+        onClick={submitForm}
+        isDisabled={isSubmitting}
+        isLoading={isSubmitting}
+        data-testid="wizard-save-button"
+      >
         {saveButtonText || t('Save')}
       </Button>
     );
   } else if (isSubmitStep) {
     // Read-only "Review" step
     primaryBtn = (
-      <Button variant="primary" onClick={() => navigate(-1)}>
+      <Button variant="primary" onClick={() => navigate(-1)} data-testid="wizard-close-button">
         {t('Close')}
       </Button>
     );
   } else {
     primaryBtn = (
-      <Button variant="primary" onClick={onMoveNext} isDisabled={!isReadOnly && !stepValid} ref={buttonRef}>
+      <Button
+        variant="primary"
+        onClick={onMoveNext}
+        isDisabled={!isReadOnly && !stepValid}
+        ref={buttonRef}
+        data-testid="wizard-next-button"
+      >
         {t('Next')}
       </Button>
     );
@@ -74,6 +89,7 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
               variant="secondary"
               onClick={goToPrevStep}
               isDisabled={String(activeStep.id) === firstStepId || isSubmitting}
+              data-testid="wizard-back-button"
             >
               {t('Back')}
             </Button>
@@ -82,7 +98,12 @@ const FlightCtlWizardFooter = <T extends Record<string, unknown>>({
         </ActionListGroup>
         <ActionListGroup>
           <ActionListItem>
-            <Button variant="link" onClick={() => navigate(-1)} isDisabled={isSubmitting}>
+            <Button
+              variant="link"
+              onClick={onCancel ?? (() => navigate(-1))}
+              isDisabled={isSubmitting}
+              data-testid="wizard-cancel-button"
+            >
               {t('Cancel')}
             </Button>
           </ActionListItem>

package/src/components/common/LabelsView.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Label, LabelGroup } from '@patternfly/react-core';
 
 import { useTranslation } from '../../hooks/useTranslation';
+import { CATALOG_LABEL } from '../Catalog/const';
 
 interface LabelsViewProps {
   prefix: string;
@@ -10,7 +11,7 @@ interface LabelsViewProps {
 
 const LabelsView = ({ prefix, labels }: LabelsViewProps) => {
   const { t } = useTranslation();
-  const labelItems = Object.entries(labels || {});
+  const labelItems = Object.entries(labels || {}).filter(([key]) => !key.includes(CATALOG_LABEL));
   if (labelItems.length === 0) {
     return '-';
   }

package/src/components/common/PageNavigation.tsx

@@ -113,7 +113,7 @@ const PageNavigation = ({ showSettings = true }: { showSettings?: boolean }) =>
 
   return (
     <>
-      <Panel className="fctl-subnav_panel">
+      <Panel className="fctl-subnav_panel" id="fctl-cmd-panel">
         <PanelMain>
           <PanelMainBody>
             <Toolbar isFullHeight isStatic className="fctl-subnav_toolbar">

package/src/components/common/ResourceLink.tsx

@@ -12,6 +12,7 @@ type ResourceDisplayLinkProps = {
   name?: string;
   variant?: 'shortened' | 'full';
   routeLink?: RouteWithPostfix;
+  'data-testid'?: string;
 };
 
 export const getDisplayText = (name: string | undefined) => {
@@ -24,7 +25,13 @@ export const getDisplayText = (name: string | undefined) => {
   return `${name.substring(0, 6)}...${name.substring(name.length - 7)}`;
 };
 
-const ResourceLink = ({ id, name, variant = 'shortened', routeLink }: ResourceDisplayLinkProps) => {
+const ResourceLink = ({
+  id,
+  name,
+  variant = 'shortened',
+  routeLink,
+  'data-testid': dataTestId,
+}: ResourceDisplayLinkProps) => {
   const nameOrId = name || id;
   const displayText = getDisplayText(nameOrId);
   const showCopy = nameOrId !== displayText;
@@ -33,7 +40,13 @@ const ResourceLink = ({ id, name, variant = 'shortened', routeLink }: ResourceDi
 
   return (
     <span className={`fctl-resource-link fctl-resource-link__${variant}`}>
-      {routeLink ? <Link to={{ route: routeLink, postfix: id }}>{textEl}</Link> : <>{textEl}</>}
+      {routeLink ? (
+        <Link to={{ route: routeLink, postfix: id }} data-testid={dataTestId}>
+          {textEl}
+        </Link>
+      ) : (
+        <span data-testid={dataTestId}>{textEl}</span>
+      )}
       {showCopy && nameOrId && <CopyButton text={nameOrId} />}
     </span>
   );

package/src/components/common/WithHelperText.tsx

@@ -52,7 +52,7 @@ export const FormGroupWithHelperText = ({
 }: React.PropsWithChildren<FormGroupWithHelperTextProps>) => (
   <FormGroup
     label={label}
-    labelHelp={<HelperTextPopover ariaLabel={label} content={content} />}
+    labelHelp={content ? <HelperTextPopover ariaLabel={label} content={content} /> : undefined}
     isRequired={isRequired}
   >
     {children}

package/src/components/common/WithTooltip.tsx

@@ -5,10 +5,20 @@ import { Tooltip } from '@patternfly/react-core';
 type WithTooltipProps = {
   showTooltip: boolean;
   content: React.ReactNode;
-  children: React.ReactElement;
+  children?: React.ReactElement;
+  triggerRef?: React.RefObject<HTMLElement>;
 };
 
-const WithTooltip = ({ showTooltip, content, children }: PropsWithChildren<WithTooltipProps>) =>
-  showTooltip ? <Tooltip content={content}>{children}</Tooltip> : children;
+const WithTooltip = ({ showTooltip, content, children, triggerRef }: PropsWithChildren<WithTooltipProps>) => {
+  if (!showTooltip) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Tooltip content={content} triggerRef={triggerRef}>
+      {children}
+    </Tooltip>
+  );
+};
 
 export default WithTooltip;

package/src/components/form/ExpandableFormSection.tsx

@@ -11,14 +11,16 @@ const ExpandableFormSection = ({
   title,
   description,
   children,
+  defaultExpanded = true,
 }: {
   fieldName: string;
   title: string;
   description?: string;
   children: ExpandableSectionProps['children'];
+  defaultExpanded?: boolean;
 }) => {
   const { t } = useTranslation();
-  const [isExpanded, setIsExpanded] = React.useState(true);
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
   const { setFieldTouched } = useFormikContext();
   const [, { error }, { setTouched }] = useField(fieldName);
 

package/src/components/form/FormSelect.tsx

@@ -1,12 +1,32 @@
 import * as React from 'react';
 
-import { FormGroup, MenuToggle, MenuToggleStatus, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import {
+  Button,
+  FormGroup,
+  MenuFooter,
+  MenuToggle,
+  MenuToggleStatus,
+  Select,
+  SelectList,
+  SelectOption,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { useField } from 'formik';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 import './FormSelect.css';
 
-export type SelectItem = { label: string; description?: React.ReactNode; isDisabled?: boolean };
+export type SelectItem = {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  isDisabled?: boolean;
+  selectedLabel?: React.ReactNode;
+};
+
+type AddAction = {
+  label: React.ReactNode;
+  onAdd: VoidFunction;
+};
 
 type FormSelectProps = {
   name: string;
@@ -15,12 +35,17 @@ type FormSelectProps = {
   children?: React.ReactNode;
   placeholderText?: string;
   withStatusIcon?: boolean;
+  onChange?: (value: string) => void;
+  addAction?: AddAction;
 };
 
 const isItemObject = (item: string | SelectItem): item is SelectItem => typeof item === 'object';
 
 const getItemLabel = (item: string | SelectItem) => (isItemObject(item) ? item.label : item);
 
+const getItemSelectLabel = (item: string | SelectItem) =>
+  isItemObject(item) ? item.selectedLabel || item.label : item;
+
 const FormSelect = ({
   name,
   items,
@@ -28,6 +53,8 @@ const FormSelect = ({
   helperText,
   placeholderText,
   children,
+  onChange,
+  addAction,
 }: React.PropsWithChildren<FormSelectProps>) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [field, meta, { setValue, setTouched }] = useField<string>({
@@ -40,11 +67,14 @@ const FormSelect = ({
   React.useEffect(() => {
     const hasOneItem = itemKeys.length === 1;
     if (hasOneItem && !field.value) {
-      setValue(itemKeys[0], true);
+      const firstItem = items[itemKeys[0]];
+      if (!isItemObject(firstItem) || !firstItem.isDisabled) {
+        setValue(itemKeys[0], true);
+      }
     }
-  }, [itemKeys, field.value, setValue]);
+  }, [itemKeys, field.value, setValue, items]);
 
-  const selectedText = field.value ? getItemLabel(items[field.value]) : placeholderText;
+  const selectedText = field.value ? getItemSelectLabel(items[field.value]) : placeholderText;
 
   let statusToggle: MenuToggleStatus;
   if (withStatusIcon) {
@@ -63,6 +93,7 @@ const FormSelect = ({
         id={fieldId}
         selected={field.value}
         onSelect={(_, value) => {
+          onChange?.(value as string);
           setValue(value as string, true);
           setIsOpen(false);
         }}
@@ -112,6 +143,21 @@ const FormSelect = ({
           </SelectList>
         )}
         {children}
+        {addAction && (
+          <MenuFooter>
+            <Button
+              variant="link"
+              isInline
+              icon={<PlusCircleIcon />}
+              onClick={() => {
+                setIsOpen(false);
+                addAction.onAdd();
+              }}
+            >
+              {addAction.label}
+            </Button>
+          </MenuFooter>
+        )}
       </Select>
 
       <DefaultHelperText helperText={helperText} />

package/src/components/form/IconUploadField.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { FileUpload, FormGroup, TextInput } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import ErrorHelperText from './FieldHelperText';
+
+const MAX_ICON_BYTES = 256 * 1024;
+const ACCEPTED_IMAGE_TYPES = {
+  'image/svg+xml': ['.svg'],
+  'image/png': ['.png'],
+  'image/jpeg': ['.jpg', '.jpeg'],
+  'image/webp': ['.webp'],
+};
+
+type IconUploadFieldProps = {
+  name: string;
+  isDisabled?: boolean;
+};
+
+const IconUploadField = ({ name, isDisabled }: IconUploadFieldProps) => {
+  const { t } = useTranslation();
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isRejected, setIsRejected] = React.useState(false);
+  const [field, meta, { setValue, setTouched }] = useField<string>(name);
+
+  const fieldId = `iconuploadfield-${name}`;
+  const hasError = meta.touched && !!meta.error;
+  const hasValue = !!field.value;
+
+  if (isDisabled) {
+    return (
+      <FormGroup fieldId={fieldId}>
+        {hasValue ? (
+          <img src={field.value} alt="" style={{ maxHeight: 64, maxWidth: 64, objectFit: 'contain' }} />
+        ) : (
+          <TextInput id={fieldId} name={name} value={field.value} aria-label={t('Icon')} isDisabled />
+        )}
+      </FormGroup>
+    );
+  }
+
+  return (
+    <FormGroup fieldId={fieldId}>
+      <FileUpload
+        id={fieldId}
+        type="dataURL"
+        value={field.value}
+        filename={filename}
+        filenamePlaceholder={t('Drag an image or browse to upload')}
+        browseButtonText={t('Browse...')}
+        clearButtonText={t('Clear')}
+        isLoading={isLoading}
+        validated={isRejected || hasError ? 'error' : 'default'}
+        hideDefaultPreview
+        onDataChange={(_event, data) => {
+          void setValue(data, true);
+          void setTouched(true);
+          setIsRejected(false);
+        }}
+        onFileInputChange={(_event, file) => {
+          setFilename(file.name);
+          setIsRejected(false);
+        }}
+        onReadStarted={() => setIsLoading(true)}
+        onReadFinished={() => setIsLoading(false)}
+        onClearClick={() => {
+          setFilename('');
+          void setValue('', true);
+          void setTouched(true);
+          setIsRejected(false);
+        }}
+        dropzoneProps={{
+          accept: ACCEPTED_IMAGE_TYPES,
+          maxSize: MAX_ICON_BYTES,
+          onDropRejected: () => setIsRejected(true),
+        }}
+      >
+        {hasValue && <img src={field.value} alt="" style={{ maxHeight: 64, maxWidth: 64, objectFit: 'contain' }} />}
+      </FileUpload>
+      {isRejected && <ErrorHelperText error={t('File must be an image under 256 KB.')} />}
+      <ErrorHelperText meta={meta} />
+    </FormGroup>
+  );
+};
+
+export default IconUploadField;

package/src/components/form/LabelsField.tsx

@@ -7,6 +7,7 @@ import EditableLabelControl from '../common/EditableLabelControl';
 import LabelsView from '../common/LabelsView';
 import { toAPILabel } from '../../utils/labels';
 import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+import { CATALOG_LABEL } from '../Catalog/const';
 
 type LabelsFieldProps = {
   name: string;
@@ -76,35 +77,38 @@ const LabelsField = ({ name, onChangeCallback, addButtonText, helperText, isLoad
           />
         }
       >
-        {labels.map(({ key, value, isDefault }, index) => {
-          const text = value ? `${key}=${value}` : key;
-          const elKey = `${key}__${index}`;
-          if (isDefault) {
+        {labels
+          .map((label, originalIndex) => ({ ...label, originalIndex }))
+          .filter((l) => !l.key.includes(CATALOG_LABEL))
+          .map(({ key, value, isDefault, originalIndex }) => {
+            const text = value ? `${key}=${value}` : key;
+            const elKey = `${key}__${originalIndex}`;
+            if (isDefault) {
+              return (
+                <Label key={elKey} textMaxWidth={maxWidthDefaultLabel}>
+                  {text}
+                </Label>
+              );
+            }
+
+            const closeButtonProps = isLoading && { isDisabled: true };
+            const isLabelEditable = !isLoading && !isDefault;
             return (
-              <Label key={elKey} textMaxWidth={maxWidthDefaultLabel}>
+              <Label
+                key={elKey}
+                textMaxWidth={maxWidthNonDefaultLabel}
+                closeBtnProps={closeButtonProps}
+                onClose={(e) => onDelete(e, originalIndex)}
+                onEditCancel={(_, prevText) => onEdit(originalIndex, prevText)}
+                onEditComplete={(_, newText) => onEdit(originalIndex, newText)}
+                /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+                title={isLabelEditable ? text : undefined}
+                isEditable={isLabelEditable}
+              >
                 {text}
               </Label>
             );
-          }
-
-          const closeButtonProps = isLoading && { isDisabled: true };
-          const isLabelEditable = !isLoading && !isDefault;
-          return (
-            <Label
-              key={elKey}
-              textMaxWidth={maxWidthNonDefaultLabel}
-              closeBtnProps={closeButtonProps}
-              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={isLabelEditable ? text : undefined}
-              isEditable={isLabelEditable}
-            >
-              {text}
-            </Label>
-          );
-        })}
+          })}
       </LabelGroup>
       <DefaultHelperText helperText={helperText} />
       <ErrorHelperText meta={meta} touchRequired={false} />

package/src/components/form/RepositorySelect.tsx

@@ -116,6 +116,9 @@ type RepositorySelectProps = {
   canCreateRepo: boolean;
   isReadOnly?: boolean;
   repoRefetch?: VoidFunction;
+  options?: {
+    writeAccessOnly?: boolean;
+  };
   isRequired?: boolean;
   validateRepoSelection?: (repo: Repository) => string | undefined;
 };
@@ -148,6 +151,7 @@ const RepositorySelect = ({
   repoRefetch,
   label,
   helperText,
+  options,
   isRequired,
   validateRepoSelection,
 }: RepositorySelectProps) => {
@@ -214,7 +218,7 @@ const RepositorySelect = ({
           type={repoType}
           onClose={() => setCreateRepoModalOpen(false)}
           onSuccess={handleCreateRepository}
-          validateBeforeCreate={validateRepoSelection}
+          options={options}
         />
       )}
     </>

package/src/components/form/validations.ts

@@ -377,7 +377,7 @@ export const validGroupLabelKeysSchema = (t: TFunction) =>
       return uniqueKeys.size === labelKeys?.length;
     });
 
-const appVariablesSchema = (t: TFunction) => {
+export const appVariablesSchema = (t: TFunction) => {
   return Yup.array()
     .of(
       Yup.object().shape({
@@ -705,7 +705,7 @@ const mountPathSchema = (t: TFunction, isRequired: boolean = true) => {
   return isRequired ? schema.required(t('Mount path is required for this volume type')) : schema;
 };
 
-const singleContainerVolumesSchema = (t: TFunction) =>
+export const singleContainerVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
@@ -715,7 +715,7 @@ const singleContainerVolumesSchema = (t: TFunction) =>
     }),
   );
 
-const composeQuadletVolumesSchema = (t: TFunction) =>
+export const composeQuadletVolumesSchema = (t: TFunction) =>
   Yup.array().of(
     Yup.object().shape({
       name: volumeNameSchema(t),
@@ -1178,3 +1178,5 @@ export const createMassResumeValidationSchema = (t: TFunction) =>
       return Yup.array();
     }),
   });
+
+export const validURLSchema = (t: TFunction) => Yup.string().url(t('Must be a valid URL'));

package/src/components/modals/ApproveDeviceModal/ApproveDeviceForm.tsx

@@ -59,6 +59,7 @@ const ApproveDeviceForm: React.FC<ApproveDeviceFormProps> = ({ enrollmentRequest
           onClick={submitForm}
           isDisabled={disableSubmit || isSubmitting}
           isLoading={isSubmitting}
+          data-testid="approve-device-form-submit"
         >
           {t('Approve')}
         </Button>

package/src/components/modals/CreateRepositoryModal/CreateRepositoryModal.tsx

@@ -9,10 +9,12 @@ type CreateRepositoryModalProps = {
   type: RepoSpecType;
   onClose: VoidFunction;
   onSuccess: (repository: Repository) => void;
-  validateBeforeCreate?: (repo: Repository) => string | undefined;
+  options?: {
+    writeAccessOnly?: boolean;
+  };
 };
 
-const CreateRepositoryModal = ({ type, onClose, onSuccess, validateBeforeCreate }: CreateRepositoryModalProps) => {
+const CreateRepositoryModal = ({ type, onClose, onSuccess, options }: CreateRepositoryModalProps) => {
   const { t } = useTranslation();
   return (
     <Modal variant="medium" isOpen>
@@ -21,10 +23,10 @@ const CreateRepositoryModal = ({ type, onClose, onSuccess, validateBeforeCreate
         <CreateRepositoryForm
           onClose={onClose}
           onSuccess={onSuccess}
-          validateBefore={validateBeforeCreate}
           options={{
             canUseResourceSyncs: false,
             allowedRepoTypes: [type],
+            writeAccessOnly: options?.writeAccessOnly,
           }}
         />
       </ModalBody>

package/src/components/modals/massModals/MassDecommissionDeviceModal/MassDecommissionDeviceModal.tsx

@@ -124,6 +124,7 @@ const MassDecommissionDeviceModal = ({ onClose, devices, onSuccess }: MassDecomm
           onClick={decommissionDevices}
           isLoading={isSubmitting}
           isDisabled={isSubmitting}
+          data-testid="modal-decommission-confirm"
         >
           {t('Decommission')}
         </Button>

package/src/components/modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal.tsx

@@ -112,7 +112,14 @@ const MassDeleteDeviceModal: React.FC<MassDeleteDeviceModalProps> = ({ onClose,
         </Stack>
       </ModalBody>
       <ModalFooter>
-        <Button key="delete" variant="danger" onClick={deleteResources} isLoading={isDeleting} isDisabled={isDeleting}>
+        <Button
+          key="delete"
+          variant="danger"
+          onClick={deleteResources}
+          isLoading={isDeleting}
+          isDisabled={isDeleting}
+          data-testid="modal-delete-devices-confirm"
+        >
           {t('Delete devices')}
         </Button>
         <Button key="cancel" variant="link" onClick={onClose} isDisabled={isDeleting}>

package/src/constants.ts

@@ -1,5 +1,6 @@
 import { ApiVersion } from '@flightctl/types';
 import { ApiVersion as ImageBuilderApiVersion } from '@flightctl/types/imagebuilder';
+import { ApiVersion as AlphaVersion } from '@flightctl/types/alpha';
 
 export const APP_TITLE = 'Edge Manager';
 export const PAGE_SIZE = 15;
@@ -7,12 +8,14 @@ export const EVENT_PAGE_SIZE = 200; // It's 500 in OCP console
 
 export const CERTIFICATE_VALIDITY_IN_YEARS = 1;
 
-export const getApiVersion = (api: 'flightctl' | 'imagebuilder' | 'alerts'): string | undefined => {
+export const getApiVersion = (api: 'flightctl' | 'imagebuilder' | 'alerts' | 'catalog'): string | undefined => {
   switch (api) {
     case 'flightctl':
       return ApiVersion.ApiVersionV1beta1;
     case 'imagebuilder':
       return ImageBuilderApiVersion.ApiVersionV1alpha1;
+    case 'catalog':
+      return AlphaVersion.V1ALPHA1;
     case 'alerts':
     default:
       return undefined;

package/src/hooks/useAppContext.tsx

@@ -41,6 +41,13 @@ export const appRoutes = {
   [ROUTE.IMAGE_BUILD_CREATE]: '/devicemanagement/imagebuilds/create',
   [ROUTE.IMAGE_BUILD_DETAILS]: '/devicemanagement/imagebuilds',
   [ROUTE.IMAGE_BUILD_EDIT]: '/devicemanagement/imagebuilds/edit',
+  [ROUTE.CATALOG]: '/catalog',
+  [ROUTE.CATALOG_ADD_ITEM]: '/catalog/create',
+  [ROUTE.CATALOG_EDIT_ITEM]: '/catalog/edit',
+  [ROUTE.CATALOG_IMPORT]: '/catalog/import',
+  [ROUTE.CATALOG_INSTALL]: '/catalog/install',
+  [ROUTE.CATALOG_FLEET_EDIT]: '/devicemanagement/fleets/catalog',
+  [ROUTE.CATALOG_DEVICE_EDIT]: '/devicemanagement/devices/catalog',
 };
 
 export type NavLinkFC = React.FC<{ to: string; children: (props: { isActive: boolean }) => React.ReactNode }>;

package/src/hooks/useAppLinks.ts

@@ -10,28 +10,34 @@ const upstreamDocsBase = 'https://github.com/flightctl/flightctl/blob/main/docs'
 const acmDownstreamDocsBase = `https://docs.redhat.com/en/documentation/red_hat_advanced_cluster_management_for_kubernetes/${ACM_VERSION}/html-single/edge_manager/index`;
 const aapDownstreamDocsBase = `https://docs.redhat.com/en/documentation/red_hat_ansible_automation_platform/${AAP_VERSION}/html/managing_device_fleets_with_the_red_hat_edge_manager`;
 
-const links = {
+const links: Record<'fc' | 'acm' | 'aap', Record<AppLink, string>> = {
   fc: {
     createApp: `${upstreamDocsBase}/user/using/managing-devices.md#creating-applications`,
     useTemplateVars: `${upstreamDocsBase}/user/using/managing-fleets.md#defining-device-templates`,
     addNewDevice: `${upstreamDocsBase}/user/building/building-images.md#choosing-an-enrollment-method`,
     createAcmRepo: `${upstreamDocsBase}/user/using/registering-microshift-devices-acm.md#auto-registering-devices-with-microshift-into-acm`,
+    provisionDevice: `${upstreamDocsBase}/user/using/provisioning-devices.md#provisioning-physical-devices`,
+    catalog: `${upstreamDocsBase}/user/using/managing-catalogs.md`,
   },
   acm: {
     createApp: `${acmDownstreamDocsBase}#build-app-packages`,
     useTemplateVars: `${acmDownstreamDocsBase}#device-templates`,
     addNewDevice: `${acmDownstreamDocsBase}#edge-mgr-build`,
     createAcmRepo: `${acmDownstreamDocsBase}#device-config-git-cli`,
+    provisionDevice: `${acmDownstreamDocsBase}#provision-devices-intro`,
+    catalog: '',
   },
   aap: {
     createApp: `${aapDownstreamDocsBase}/edge-manager-manage-apps#edge-manager-build-app-packages`,
     useTemplateVars: `${aapDownstreamDocsBase}/assembly-edge-manager-device-fleets#edge-manager-device-templates`,
     addNewDevice: `${aapDownstreamDocsBase}/assembly-edge-manager-images#edge-manager-build-bootc`,
     createAcmRepo: '',
+    provisionDevice: `${aapDownstreamDocsBase}/edge-manager-provisioning-devices`,
+    catalog: '',
   },
 };
 
-type AppLink = 'createApp' | 'useTemplateVars' | 'addNewDevice' | 'createAcmRepo';
+type AppLink = 'createApp' | 'useTemplateVars' | 'addNewDevice' | 'createAcmRepo' | 'provisionDevice' | 'catalog';
 
 const getLinkSource = (appType: FlightCtlApp, isRHEM?: boolean) => {
   // Default doc links are AAP's and apply when using RHEM branding