@flightctl/ui-components 0.10.0-rc7 → 1.0.0-rc2

package/src/components/common/PageNavigation.tsx

@@ -1,20 +1,28 @@
 import * as React from 'react';
 import {
+  Button,
   Dropdown,
   DropdownItem,
   DropdownList,
-  Masthead,
-  MastheadContent,
   MenuToggle,
   MenuToggleElement,
-  PageSection,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
+  Tooltip,
 } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/js/icons/cog-icon';
 import { useTranslation } from '../../hooks/useTranslation';
+import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import { useOrganizationGuardContext } from './OrganizationGuard';
 import OrganizationSelector from './OrganizationSelector';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { usePermissionsContext } from './PermissionsContext';
+
+import './PageNavigation.css';
 
 type OrganizationDropdownProps = {
   organizationName?: string;
@@ -55,22 +63,28 @@ const OrganizationDropdown = ({ organizationName, onSwitchOrganization }: Organi
   );
 };
 
-const PageNavigation = () => {
+const PageNavigation = ({ showSettings = true }: { showSettings?: boolean }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
   const { currentOrganization, availableOrganizations } = useOrganizationGuardContext();
+  const { checkPermissions } = usePermissionsContext();
+  const [isAdmin] = checkPermissions([{ kind: RESOURCE.AUTH_PROVIDER, verb: VERB.CREATE }]);
   const [showOrganizationModal, setShowOrganizationModal] = React.useState(false);
-
   const showOrganizationSelection = availableOrganizations.length > 1;
-  if (!showOrganizationSelection) {
+  const currentOrgDisplayName = currentOrganization?.spec?.displayName || currentOrganization?.metadata?.name || '';
+
+  // Show navigation bar if there's either org selection OR admin button to show
+  const shouldShowNavigation = showOrganizationSelection || isAdmin;
+
+  if (!shouldShowNavigation) {
     return null;
   }
 
-  const currentOrgDisplayName = currentOrganization?.spec?.displayName || currentOrganization?.metadata?.name || '';
-
   return (
     <>
-      <PageSection variant="light" padding={{ default: 'noPadding' }}>
-        <Masthead id="global-actions-masthead">
-          <MastheadContent>
+      <Panel className="fctl-subnav_panel">
+        <PanelMain>
+          <PanelMainBody>
             <Toolbar isFullHeight isStatic className="fctl-subnav_toolbar">
               <ToolbarContent>
                 {showOrganizationSelection && (
@@ -83,11 +97,25 @@ const PageNavigation = () => {
                     />
                   </ToolbarItem>
                 )}
+                {isAdmin && showSettings && (
+                  <ToolbarItem>
+                    <Tooltip content={t('Manage authentication providers')}>
+                      <Button
+                        variant="link"
+                        aria-label={t('Settings')}
+                        onClick={() => navigate(ROUTE.AUTH_PROVIDERS)}
+                        icon={<CogIcon />}
+                      >
+                        {t('Settings')}
+                      </Button>
+                    </Tooltip>
+                  </ToolbarItem>
+                )}
               </ToolbarContent>
             </Toolbar>
-          </MastheadContent>
-        </Masthead>
-      </PageSection>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
 
       {showOrganizationModal && (
         <OrganizationSelector

package/src/components/common/PermissionsContext.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import type { Permission, PermissionList } from '@flightctl/types';
+import { RESOURCE, VERB } from '../../types/rbac';
+import { useFetch } from '../../hooks/useFetch';
+import { useOrganizationGuardContext } from './OrganizationGuard';
+
+export type PermissionCheck = {
+  kind: RESOURCE;
+  verb: VERB;
+};
+
+/**
+ * Helper function to check if a permission (resource + verb) is allowed
+ * Handles wildcards: "*" in resource means all resources, "*" in operations means all operations
+ */
+const isPermissionAllowed = (userPermissions: Permission[], permissionCheck: PermissionCheck): boolean => {
+  for (const permission of userPermissions) {
+    // Check if resource matches (exact match or wildcard)
+    const resourceMatches = permission.resource === '*' || permission.resource === permissionCheck.kind;
+    if (resourceMatches) {
+      // Check if operation/verb matches (exact match or wildcard)
+      const verbMatches = permission.operations.includes('*') || permission.operations.includes(permissionCheck.verb);
+      if (verbMatches) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+export type PermissionsContextType = {
+  loading: boolean;
+  error: string | undefined;
+  checkPermissions: (permissions: PermissionCheck[]) => boolean[];
+};
+
+const PermissionsContext = React.createContext<PermissionsContextType | undefined>(undefined);
+
+export const PermissionsContextProvider = ({ children }: React.PropsWithChildren) => {
+  const [userPermissions, setUserPermissions] = React.useState<Permission[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | undefined>();
+  const { currentOrganization } = useOrganizationGuardContext();
+
+  const orgId = currentOrganization?.metadata?.name;
+
+  const { get } = useFetch();
+
+  React.useEffect(() => {
+    const abortController = new AbortController();
+
+    const loadPermissions = async () => {
+      setLoading(true);
+      setError(undefined);
+      try {
+        const response = await get<PermissionList>('auth/permissions', abortController.signal);
+        if (!abortController.signal.aborted) {
+          setUserPermissions(response.permissions);
+        }
+      } catch (err) {
+        // Ignore abort errors - they're expected when organization changes
+        if (!abortController.signal.aborted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch permissions');
+          setUserPermissions([]);
+        }
+      } finally {
+        if (!abortController.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    if (orgId) {
+      void loadPermissions();
+    }
+
+    // Cleanup: abort the request if the organization changes or component unmounts
+    return () => {
+      abortController.abort();
+    };
+  }, [get, orgId]);
+
+  const checkPermissions = React.useCallback(
+    (permissionChecks: PermissionCheck[]): boolean[] =>
+      permissionChecks.map((permissionCheck) => isPermissionAllowed(userPermissions, permissionCheck)),
+    [userPermissions],
+  );
+
+  const value = React.useMemo(
+    () => ({
+      loading,
+      error,
+      checkPermissions,
+    }),
+    [loading, error, checkPermissions],
+  );
+
+  return <PermissionsContext.Provider value={value}>{children}</PermissionsContext.Provider>;
+};
+
+export const usePermissionsContext = (): PermissionsContextType => {
+  const context = React.useContext(PermissionsContext);
+  if (context === undefined) {
+    throw new Error('usePermissionsContext must be used within a PermissionsContextProvider');
+  }
+  return context;
+};

package/src/components/form/FilterSelect.tsx

@@ -43,6 +43,8 @@ const FilterSelect = ({ placeholder, selectedFilters, isFilterUpdating, children
     <Select
       aria-label={placeholder}
       role="menu"
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
       toggle={(toggleRef) => (
         <MenuToggle
           ref={toggleRef}

package/src/components/form/FormSelect.tsx

@@ -66,6 +66,8 @@ const FormSelect = ({
           setValue(value as string, true);
           setIsOpen(false);
         }}
+        shouldFocusToggleOnSelect
+        shouldFocusFirstItemOnOpen
         toggle={(toggleRef) => (
           <MenuToggle
             status={statusToggle}

package/src/components/form/FormSelectTypeahead.tsx

@@ -46,6 +46,9 @@ const FormSelectTypeahead = ({
 
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string | undefined>(undefined);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
 
   const currentValue = field.value;
 
@@ -79,6 +82,79 @@ const FormSelectTypeahead = ({
     return getItemLabel(items[key]).toLowerCase().includes(inputValue.toLowerCase());
   });
 
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = itemKeysFiltered[itemIndex];
+    setActiveItemId(`${fieldId}-${focusedItem}`);
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (itemKeysFiltered.length === 0) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = itemKeysFiltered.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === itemKeysFiltered.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? itemKeysFiltered[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (isOpen && focusedItem) {
+          event.preventDefault();
+          setTouched(true);
+          setValue(focusedItem, true);
+          setInputValue(undefined);
+          setIsOpen(false);
+          resetActiveAndFocusedItem();
+        } else if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+      case 'Escape':
+        if (isOpen) {
+          setIsOpen(false);
+          resetActiveAndFocusedItem();
+        }
+        break;
+    }
+  };
+
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
       <Select
@@ -90,6 +166,7 @@ const FormSelectTypeahead = ({
           setValue(value as string, true);
           setInputValue(undefined);
           setIsOpen(false);
+          resetActiveAndFocusedItem();
         }}
         toggle={(toggleRef) => (
           <MenuToggle
@@ -99,6 +176,7 @@ const FormSelectTypeahead = ({
                 setTouched(true);
               }
               setIsOpen(!isOpen);
+              textInputRef?.current?.focus();
             }}
             isExpanded={isOpen}
             className="fctl-form-select__toggle"
@@ -113,9 +191,11 @@ const FormSelectTypeahead = ({
                     setTouched(true);
                   }
                   setIsOpen(!isOpen);
+                  textInputRef?.current?.focus();
                 }}
                 onChange={(_, value) => {
                   setInputValue(value || undefined);
+                  resetActiveAndFocusedItem();
                   if (!isOpen) {
                     setIsOpen(true);
                   }
@@ -146,8 +226,11 @@ const FormSelectTypeahead = ({
                 autoComplete="off"
                 role="combobox"
                 isExpanded={isOpen}
-                aria-controls="select-create-typeahead-listbox"
+                aria-controls={`${fieldId}-listbox`}
                 placeholder={placeholderText}
+                onKeyDown={onInputKeyDown}
+                innerRef={textInputRef}
+                {...(activeItemId && { 'aria-activedescendant': activeItemId })}
               />
             </TextInputGroup>
           </MenuToggle>
@@ -158,16 +241,26 @@ const FormSelectTypeahead = ({
             if (!meta.touched) {
               setTouched(true);
             }
+            resetActiveAndFocusedItem();
+          } else {
+            textInputRef?.current?.focus();
           }
           setIsOpen(open);
         }}
       >
-        <SelectList className="fctl-form-select__menu">
-          {itemKeysFiltered.map((key) => {
+        <SelectList className="fctl-form-select__menu" id={`${fieldId}-listbox`}>
+          {itemKeysFiltered.map((key, index) => {
             const item = items[key];
             const desc = isItemObject(item) ? item.description : undefined;
             return (
-              <SelectOption className="fctl-form-select__item" key={key} value={key} description={desc}>
+              <SelectOption
+                className="fctl-form-select__item"
+                key={key}
+                value={key}
+                description={desc}
+                isFocused={focusedItemIndex === index}
+                id={`${fieldId}-${key}`}
+              >
                 {getItemLabel(item)}
               </SelectOption>
             );

package/src/components/form/ListItemField.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Label, LabelGroup, Text, TextVariants } from '@patternfly/react-core';
+
+import EditableLabelControl from '../common/EditableLabelControl';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+import { useTranslation } from '../../hooks/useTranslation';
+
+type ListItemFieldProps = {
+  name: string;
+  isLoading?: boolean;
+  helperText?: React.ReactNode;
+  addButtonText?: string;
+  resolvedValue?: string | ((items: string[]) => string);
+  resolvedLabel?: string;
+};
+
+const maxWidthLabel = '18ch';
+
+const ListItemField = ({
+  name,
+  helperText,
+  isLoading,
+  addButtonText,
+  resolvedValue,
+  resolvedLabel,
+}: ListItemFieldProps) => {
+  const { t } = useTranslation();
+  const [{ value: items }, meta, { setValue: setItems }] = useField<string[]>(name);
+
+  const updateItems = async (newItems: string[]) => {
+    await setItems(newItems, true);
+  };
+
+  const onDelete = async (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    if (isLoading) {
+      return;
+    }
+    const newItems = [...items];
+    newItems.splice(index, 1);
+    await updateItems(newItems);
+  };
+
+  const onAdd = async (text: string) => {
+    if (!text || !text.trim()) {
+      return;
+    }
+    const trimmedText = text.trim();
+    const newItems = [...items, trimmedText];
+    await updateItems(newItems);
+  };
+
+  const onEdit = async (index: number, nextText: string) => {
+    const trimmedText = nextText.trim();
+    if (!trimmedText) {
+      return;
+    }
+
+    const newItems = [...items];
+    newItems.splice(index, 1, trimmedText);
+    await updateItems(newItems);
+  };
+
+  const getResolvedValue = () => {
+    if (!resolvedValue || items.length === 0) {
+      return null;
+    }
+    if (typeof resolvedValue === 'function') {
+      return resolvedValue(items);
+    }
+    return resolvedValue;
+  };
+
+  const displayedResolvedValue = getResolvedValue();
+
+  return (
+    <>
+      <DefaultHelperText helperText={helperText} />
+
+      <LabelGroup
+        numLabels={5}
+        isEditable={!isLoading}
+        addLabelControl={
+          <EditableLabelControl
+            defaultLabel=""
+            addButtonText={addButtonText || t('Add item')}
+            onAddLabel={onAdd}
+            isEditable={!isLoading}
+          />
+        }
+      >
+        {items.map((item, index) => {
+          const elKey = `${item}__${index}`;
+          const closeButtonProps = isLoading ? { isDisabled: true } : undefined;
+          const isItemEditable = !isLoading;
+
+          return (
+            <Label
+              key={elKey}
+              textMaxWidth={maxWidthLabel}
+              closeBtnProps={closeButtonProps}
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              title={isItemEditable ? item : undefined}
+              isEditable={isItemEditable}
+            >
+              {item}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      {displayedResolvedValue && (
+        <Text component={TextVariants.small} style={{ marginTop: '0.5rem', color: 'var(--pf-v5-global--Color--200)' }}>
+          {resolvedLabel || t('Resolved')}: <strong>{displayedResolvedValue}</strong>
+        </Text>
+      )}
+      <ErrorHelperText meta={meta} touchRequired={false} />
+    </>
+  );
+};
+
+export default ListItemField;

package/src/components/form/NameField.tsx

@@ -7,6 +7,7 @@ import { useFetch } from '../../hooks/useFetch';
 import { useTranslation } from '../../hooks/useTranslation';
 import RichValidationTextField, { RichValidationTextFieldProps } from './RichValidationTextField';
 import { TextFieldProps } from './TextField';
+import { DefaultHelperText } from './FieldHelperText';
 
 type NameFieldProps = TextFieldProps & {
   resourceType: string;
@@ -71,13 +72,14 @@ const NameField = ({ name, validations, resourceType, ...rest }: NameFieldProps)
   return <RichValidationTextField fieldName={name} validations={allValidations} {...rest} />;
 };
 
-const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, ...rest }: NameFieldProps) => {
+const NameFieldWrapper = ({ name, isDisabled, validations, resourceType, helperText, ...rest }: NameFieldProps) => {
   const [{ value }] = useField<string>(name);
 
   if (isDisabled) {
     return (
       <FormGroup label={rest?.['aria-label']} isRequired={rest.isRequired}>
         <TextInput value={value} {...rest} isDisabled />
+        {helperText && <DefaultHelperText helperText={helperText} />}
       </FormGroup>
     );
   }

package/src/components/form/SwitchField.tsx

@@ -5,10 +5,11 @@ import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
 
 export interface SwitchFieldProps extends Omit<SwitchProps, 'onChange' | 'ref' | 'checked' | 'id'> {
   name: string;
+  labelIcon?: React.ReactElement;
   helperText?: React.ReactNode;
 }
 
-const SwitchField = ({ helperText, name, ...props }: SwitchFieldProps) => {
+const SwitchField = ({ label, labelIcon, helperText, name, ...props }: SwitchFieldProps) => {
   const [field, meta, { setValue, setTouched }] = useField({
     name,
   });
@@ -21,7 +22,7 @@ const SwitchField = ({ helperText, name, ...props }: SwitchFieldProps) => {
   const fieldId = `switchfield-${name}`;
 
   return (
-    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+    <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={label} labelIcon={labelIcon}>
       <Switch {...field} {...props} id={fieldId} onChange={onChange} isChecked={!!field.value} />
       <DefaultHelperText helperText={helperText} />
       <ErrorHelperText meta={meta} />