@flightctl/ui-components 0.9.3 → 0.10.0-rc1

package/src/components/SystemRestore/SystemRestoreBanners.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { DeviceResumeRequest, DeviceSummaryStatusType, DevicesSummary } from '@flightctl/types';
+import { useSystemRestore } from '../../hooks/useSystemRestoreContext';
+import SuspendedDevicesAlert, { ResumeMode } from './SuspendedDevicesAlert';
+import { PendingSyncDevicesAlert } from './PendingSyncDevicesAlert';
+
+import './SystemRestoreBanners.css';
+
+interface SystemRestoreBannersProps {
+  mode: ResumeMode;
+  // Allows the banner to have an extra resume action for a subset of devices
+  resumeAction?: {
+    actionText: string;
+    title: React.ReactNode;
+    requestSelector: DeviceResumeRequest;
+  };
+  summaryStatus?: DevicesSummary['summaryStatus'];
+  onResumeComplete?: VoidFunction;
+  className?: string;
+}
+
+/**
+ * Uses the received devicesSummary to show the pending sync and suspended devices banners
+ */
+export const SystemRestoreBanners = ({
+  mode,
+  resumeAction,
+  summaryStatus,
+  onResumeComplete,
+  className,
+}: SystemRestoreBannersProps) => {
+  const pendingSyncCount = summaryStatus?.[DeviceSummaryStatusType.DeviceSummaryStatusAwaitingReconnect] || 0;
+  const suspendedCount = summaryStatus?.[DeviceSummaryStatusType.DeviceSummaryStatusConflictPaused] || 0;
+
+  const showPendingSyncBanner = pendingSyncCount > 0;
+  const showSuspendedBanner = suspendedCount > 0;
+
+  if (!showPendingSyncBanner && !showSuspendedBanner) {
+    return null;
+  }
+
+  return (
+    <div className={`fctl-system-restore-banners ${className}`}>
+      {showPendingSyncBanner && <PendingSyncDevicesAlert forSingleDevice={mode === 'device'} />}
+
+      {showSuspendedBanner && (
+        <SuspendedDevicesAlert
+          mode={mode}
+          suspendedCount={suspendedCount}
+          extraAction={resumeAction}
+          onResumeComplete={onResumeComplete}
+        />
+      )}
+    </div>
+  );
+};
+
+/**
+ * Shows the banners related to device summary data based on all existing devices
+ */
+export const GlobalSystemRestoreBanners = ({
+  onResumeComplete,
+  className,
+}: {
+  onResumeComplete?: VoidFunction;
+  className?: string;
+}) => {
+  const { summaryStatus, isLoading } = useSystemRestore();
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <SystemRestoreBanners
+      mode="global"
+      summaryStatus={summaryStatus}
+      onResumeComplete={onResumeComplete}
+      className={className}
+    />
+  );
+};

package/src/components/charts/utils.ts

@@ -27,7 +27,7 @@ export const toChartData = <T extends string>(
     return {
       x: `${statusItem.label}`,
       y: entryIndex === -1 ? 0 : percentages[entryIndex],
-      color: getDefaultStatusColor(statusItem.level),
+      color: statusItem.customColor || getDefaultStatusColor(statusItem.level),
       link: {
         to: ROUTE.DEVICES as Route,
         query: query.toString(),

package/src/components/common/OrganizationGuard.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { Organization, OrganizationList } from '@flightctl/types';
+import { useAppContext } from '../../hooks/useAppContext';
+import { getErrorMessage } from '../../utils/error';
+import { getCurrentOrganizationId, storeCurrentOrganizationId } from '../../utils/organizationStorage';
+
+interface OrganizationContextType {
+  currentOrganization?: Organization;
+  availableOrganizations: Organization[];
+  isOrganizationSelectionRequired: boolean;
+  selectOrganization: (org: Organization) => void;
+  selectionError?: string;
+}
+
+const OrganizationContext = React.createContext<OrganizationContextType | null>(null);
+
+export const useOrganizationGuardContext = (): OrganizationContextType => {
+  const context = React.useContext(OrganizationContext);
+  if (!context) {
+    throw new Error('useOrganizationGuardContext must be used within OrganizationGuard');
+  }
+  return context;
+};
+
+const OrganizationGuard = ({ children }: React.PropsWithChildren) => {
+  const { fetch } = useAppContext();
+  const proxyFetch = fetch.proxyFetch;
+
+  const [isOrganizationsEnabled, setIsOrganizationsEnabled] = React.useState<boolean | null>(null); // null = loading
+  const [currentOrganization, setCurrentOrganization] = React.useState<Organization | undefined>();
+  const [availableOrganizations, setAvailableOrganizations] = React.useState<Organization[]>([]);
+  const [organizationsLoaded, setOrganizationsLoaded] = React.useState(false);
+  const [selectionError, setSelectionError] = React.useState<string | undefined>();
+
+  const selectOrganization = React.useCallback((org: Organization) => {
+    const organizationId = org.metadata?.name || '';
+
+    try {
+      // Store organization in localStorage - headers will handle the rest
+      storeCurrentOrganizationId(organizationId);
+      setCurrentOrganization(org);
+    } catch (error) {
+      setSelectionError(getErrorMessage(error));
+    }
+  }, []);
+
+  // Determine if multi-orgs are enabled. If so, check if an organization is already selected
+  React.useEffect(() => {
+    const initializeOrganizations = async () => {
+      try {
+        // First, check if organizations are enabled via proxy endpoint
+        const organizationsEnabledResponse = await proxyFetch('organizations-enabled', {
+          method: 'GET',
+          headers: { Accept: 'application/json' },
+          credentials: 'include',
+        });
+
+        const organizationsEnabled = organizationsEnabledResponse.status !== 501;
+        setIsOrganizationsEnabled(organizationsEnabled);
+
+        if (!organizationsEnabled) {
+          return;
+        }
+
+        // Organizations are enabled - load available organizations
+        const organizations = await fetch.get<OrganizationList>('organizations');
+        setAvailableOrganizations(organizations.items);
+
+        const currentOrgId = getCurrentOrganizationId();
+
+        // Validate current organization against available organizations
+        const currentOrg = currentOrgId
+          ? organizations.items.find((org) => org.metadata?.name === currentOrgId)
+          : undefined;
+
+        if (currentOrg) {
+          // The previously selected organization exists - use it
+          selectOrganization(currentOrg);
+        } else {
+          if (organizations.items?.length === 1) {
+            // Only one organization available - select it automatically
+            selectOrganization(organizations.items[0]);
+          } else if (currentOrgId) {
+            // Previously set organization does not exist anymore - remove it from localStorage so the user can select a new organization
+            setCurrentOrganization(undefined);
+            storeCurrentOrganizationId('');
+          }
+        }
+      } catch (error) {
+        setSelectionError(getErrorMessage(error));
+        setIsOrganizationsEnabled(false);
+        setAvailableOrganizations([]);
+      } finally {
+        setOrganizationsLoaded(true);
+      }
+    };
+
+    void initializeOrganizations();
+  }, [fetch, proxyFetch, selectOrganization]);
+
+  const isOrganizationSelectionRequired = React.useMemo(() => {
+    // Don't show selector while still loading
+    if (isOrganizationsEnabled === null || !organizationsLoaded) {
+      return false;
+    }
+
+    return isOrganizationsEnabled && availableOrganizations.length > 1 && !currentOrganization;
+  }, [isOrganizationsEnabled, organizationsLoaded, availableOrganizations.length, currentOrganization]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      currentOrganization,
+      availableOrganizations,
+      isOrganizationSelectionRequired,
+      selectOrganization,
+      selectionError,
+    }),
+    [currentOrganization, availableOrganizations, isOrganizationSelectionRequired, selectOrganization, selectionError],
+  );
+
+  return <OrganizationContext.Provider value={contextValue}>{children}</OrganizationContext.Provider>;
+};
+
+export default OrganizationGuard;

package/src/components/common/OrganizationSelector.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
+  Bullseye,
+  Button,
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  PageSection,
+  Stack,
+  StackItem,
+  Text,
+  TextContent,
+  Title,
+} from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
+
+import { Organization } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { useOrganizationGuardContext } from './OrganizationGuard';
+import { ORGANIZATION_STORAGE_KEY } from '../../utils/organizationStorage';
+
+interface OrganizationSelectorContentProps {
+  defaultOrganizationId?: string;
+  organizations: Organization[];
+  onSelect: (orgId: string) => void;
+  onCancel?: () => void;
+  allowCancel?: boolean;
+  isFirstLogin?: boolean;
+}
+
+const MAX_ORGANIZATIONS_FOR_SCROLL = 4;
+
+const OrganizationSelectorContent = ({
+  defaultOrganizationId,
+  organizations,
+  onSelect,
+  onCancel,
+  allowCancel = false,
+  isFirstLogin = false,
+}: OrganizationSelectorContentProps) => {
+  const { t } = useTranslation();
+  const [selectedOrg, setSelectedOrg] = React.useState<string | undefined>(defaultOrganizationId);
+  const needsScroll = organizations.length > MAX_ORGANIZATIONS_FOR_SCROLL;
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <TextContent>
+          <Text>
+            {isFirstLogin
+              ? t('You have access to multiple organizations. Please select one to continue.')
+              : t('Please select an organization to continue. This will refresh the application.')}
+          </Text>
+        </TextContent>
+      </StackItem>
+      <StackItem>
+        <Menu
+          activeItemId={selectedOrg}
+          selected={selectedOrg}
+          onSelect={(_ev, orgId) => setSelectedOrg(orgId as string)}
+          isScrollable={needsScroll}
+        >
+          <MenuContent menuHeight={needsScroll ? '230px' : 'auto'}>
+            <MenuList>
+              {organizations.map((org) => {
+                const orgId = org.metadata?.name as string;
+                return (
+                  <MenuItem itemId={orgId} key={orgId}>
+                    {org.spec?.displayName || orgId}
+                  </MenuItem>
+                );
+              })}
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      </StackItem>
+      <StackItem>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button variant="primary" onClick={() => onSelect(selectedOrg as string)} isDisabled={!selectedOrg}>
+                {t('Continue')}
+              </Button>
+            </ActionListItem>
+            {allowCancel && (
+              <ActionListItem>
+                <Button variant="link" onClick={onCancel}>
+                  {t('Cancel')}
+                </Button>
+              </ActionListItem>
+            )}
+          </ActionListGroup>
+        </ActionList>
+      </StackItem>
+    </Stack>
+  );
+};
+
+const OrganizationSelectorCustomModal = (props: OrganizationSelectorContentProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <PageSection variant="light">
+      <Bullseye>
+        <Card isLarge>
+          <CardTitle>
+            <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+              <FlexItem>
+                <Title headingLevel="h1" size="2xl">
+                  {t('Select Organization')}
+                </Title>
+              </FlexItem>
+            </Flex>
+          </CardTitle>
+          <CardBody>
+            <OrganizationSelectorContent {...props} isFirstLogin />
+          </CardBody>
+        </Card>
+      </Bullseye>
+    </PageSection>
+  );
+};
+
+interface OrganizationSelectorProps {
+  onClose?: (isChanged: boolean) => void;
+  isFirstLogin: boolean;
+}
+
+const OrganizationSelector = ({ onClose, isFirstLogin = true }: OrganizationSelectorProps) => {
+  const { availableOrganizations, selectOrganization, isOrganizationSelectionRequired } = useOrganizationGuardContext();
+  const { t } = useTranslation();
+
+  const getLastSelectedOrganization = React.useCallback(() => {
+    try {
+      const savedOrgId = localStorage.getItem(ORGANIZATION_STORAGE_KEY);
+      if (savedOrgId && availableOrganizations.some((org) => org.metadata?.name === savedOrgId)) {
+        return savedOrgId;
+      }
+    } catch (error) {
+      // Ignore - we won't preselect the previously selected organization
+    }
+    return undefined;
+  }, [availableOrganizations]);
+
+  const handleSelect = React.useCallback(
+    (orgId: string) => {
+      const org = availableOrganizations.find((org) => org.metadata?.name === orgId);
+      if (org) {
+        try {
+          selectOrganization(org);
+          onClose?.(true);
+        } catch (error) {
+          onClose?.(false);
+        }
+      }
+    },
+    [availableOrganizations, selectOrganization, onClose],
+  );
+
+  const commonProps = {
+    defaultOrganizationId: getLastSelectedOrganization(),
+    organizations: availableOrganizations,
+    onSelect: handleSelect,
+    onCancel: () => onClose?.(false),
+    allowCancel: !isOrganizationSelectionRequired,
+  };
+
+  // The modal for selecting an organization can be displayed in two ways:
+  // If the user has not yet selected an organization - the modal is not dismissable and it's a custom "Modal" which allows interacting with the user menu.
+  // If the user already logged in and selected an organization - the modal is dismissable and it overlays the entire page.
+  return isFirstLogin ? (
+    <OrganizationSelectorCustomModal {...commonProps} />
+  ) : (
+    <Modal variant="medium" isOpen onClose={() => onClose?.(false)}>
+      <ModalHeader title={t('Select Organization')} />
+      <ModalBody>
+        <OrganizationSelectorContent {...commonProps} isFirstLogin={false} />
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default OrganizationSelector;

package/src/components/common/PageNavigation.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  PageSection,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/useTranslation';
+import { useOrganizationGuardContext } from './OrganizationGuard';
+import OrganizationSelector from './OrganizationSelector';
+
+type OrganizationDropdownProps = {
+  organizationName?: string;
+  onSwitchOrganization: () => void;
+};
+
+const OrganizationDropdown = ({ organizationName, onSwitchOrganization }: OrganizationDropdownProps) => {
+  const { t } = useTranslation();
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  return (
+    <Dropdown
+      isOpen={isDropdownOpen}
+      onSelect={onDropdownToggle}
+      onOpenChange={setIsDropdownOpen}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onDropdownToggle}
+          id="organizationMenu"
+          isFullHeight
+          isExpanded={isDropdownOpen}
+          variant="plainText"
+        >
+          {organizationName}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem onClick={onSwitchOrganization}>{t('Change Organization')}</DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+const PageNavigation = ({ children }: React.PropsWithChildren) => {
+  const { currentOrganization, availableOrganizations } = useOrganizationGuardContext();
+  const [showOrganizationModal, setShowOrganizationModal] = React.useState(false);
+
+  const showOrganizationSelection = availableOrganizations.length > 1;
+  const hasChildren = React.Children.count(children) > 0;
+
+  if (!showOrganizationSelection && !hasChildren) {
+    return null;
+  }
+
+  const currentOrgDisplayName = currentOrganization?.spec?.displayName || currentOrganization?.metadata?.name || '';
+
+  return (
+    <>
+      <PageSection variant="light" padding={{ default: 'noPadding' }}>
+        <Toolbar isFullHeight isStatic className="fctl-app_toolbar">
+          <ToolbarContent>
+            {hasChildren && <ToolbarItem>{children}</ToolbarItem>}
+            {showOrganizationSelection && (
+              <ToolbarItem>
+                <OrganizationDropdown
+                  organizationName={currentOrgDisplayName}
+                  onSwitchOrganization={() => {
+                    setShowOrganizationModal(true);
+                  }}
+                />
+              </ToolbarItem>
+            )}
+          </ToolbarContent>
+        </Toolbar>
+      </PageSection>
+
+      {showOrganizationModal && (
+        <OrganizationSelector
+          isFirstLogin={false}
+          onClose={(isChanged) => {
+            setShowOrganizationModal(false);
+            if (isChanged) {
+              window.location.reload();
+            }
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default PageNavigation;

package/src/components/form/FilterSelect.css

@@ -1,6 +1,5 @@
 .fctl-filter-select__group {
-    height: 18rem;
-    overflow: auto;
+  overflow: auto;
 }
 
 .fctl-toggle-content {
@@ -8,11 +7,11 @@
 }
 
 .fctl-toggle-content__badge {
-    margin-left: var(--pf-v5-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
 .fctl-toggle-content__loader {
   position: absolute;
   top: 0;
   right: 2.5rem;
-}
+}

package/src/components/form/validations.ts

@@ -695,3 +695,17 @@ export const deviceApprovalValidationSchema = (t: TFunction, conf: { isSingleDev
         ),
     labels: validLabelsSchema(t, forbiddenDeviceLabels),
   });
+
+export const createMassResumeValidationSchema = (t: TFunction) =>
+  Yup.object().shape({
+    mode: Yup.string().oneOf(['fleet', 'labels', 'all']).required(),
+    fleetId: Yup.string().when('mode', ([mode]) =>
+      mode === 'fleet' ? Yup.string().required(t('Fleet selection is required')) : Yup.string(),
+    ),
+    labels: Yup.array().when('mode', ([mode]) => {
+      if (mode === 'labels') {
+        return validLabelsSchema(t).min(1, t('At least one label is required'));
+      }
+      return Yup.array();
+    }),
+  });

package/src/components/modals/ResumeDevicesModal/ResumeDevicesModal.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Alert, Button, Modal, ModalVariant, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { DeviceResumeRequest, DeviceResumeResponse } from '@flightctl/types';
+
+import { useTranslation } from '../../../hooks/useTranslation';
+import { useFetch } from '../../../hooks/useFetch';
+import { getErrorMessage } from '../../../utils/error';
+
+interface ResumeDeviceModalProps {
+  mode: 'device' | 'fleet';
+  title: React.ReactNode;
+  selector: DeviceResumeRequest;
+  expectedCount: number;
+  onClose: (hasResumed: boolean | undefined) => void;
+}
+
+/**
+ * Modal to resume an individual device, or all the devices in a fleet
+ */
+const ResumeDevicesModal = ({ mode, title, selector, expectedCount, onClose }: ResumeDeviceModalProps) => {
+  const { t } = useTranslation();
+  const { post } = useFetch();
+  const [resumedCount, setResumedCount] = React.useState<number | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState<string | undefined>(undefined);
+  const hasResumed = Boolean(resumedCount && resumedCount > 0);
+
+  const pluralCount = mode === 'device' ? 1 : 2; // Used to generate translations for one/multiple cases
+
+  const handleConfirm = async () => {
+    setIsSubmitting(true);
+    setSubmitError(undefined);
+
+    try {
+      const resumeResponse = await post<DeviceResumeRequest, DeviceResumeResponse>('deviceactions/resume', selector);
+      setResumedCount(resumeResponse.resumedDevices || 0);
+    } catch (error) {
+      setSubmitError(getErrorMessage(error));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title={t('Resume devices?', { count: pluralCount })}
+      isOpen
+      onClose={() => onClose(hasResumed)}
+      actions={[
+        <Button
+          key="confirm"
+          variant="primary"
+          onClick={handleConfirm}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting || resumedCount !== undefined}
+        >
+          {mode === 'device' ? t('Resume') : t('Resume all')}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={() => onClose(hasResumed)} isDisabled={isSubmitting}>
+          {hasResumed ? t('Close') : t('Cancel')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <TextContent>
+            <Text>{title}</Text>
+          </TextContent>
+        </StackItem>
+
+        <StackItem>
+          <TextContent>
+            <Text>
+              {t(
+                "This action will resolve the configuration conflict and allow the devices to receive new updates from the server. This action is irreversible, please ensure the devices' assigned configuration is correct before proceeding.",
+                { count: pluralCount },
+              )}
+            </Text>
+          </TextContent>
+        </StackItem>
+
+        {submitError && (
+          <StackItem>
+            <Alert isInline variant="danger" title={t('Resuming devices failed', { count: pluralCount })}>
+              {submitError}
+            </Alert>
+          </StackItem>
+        )}
+
+        {resumedCount === expectedCount && (
+          <StackItem>
+            <Alert isInline variant="success" title={t('Resume successful')}>
+              {t('All {{ resumedCount }} devices resumed successfully', { resumedCount })}
+            </Alert>
+          </StackItem>
+        )}
+
+        {resumedCount !== undefined && resumedCount !== expectedCount && (
+          <StackItem>
+            <Alert isInline variant="warning" title={t('Resume with warnings')}>
+              {t('{{ expectedCount }} devices to resume, and {{ resumedCount }} resumed successfully', {
+                expectedCount,
+                resumedCount,
+              })}
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default ResumeDevicesModal;