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

package/src/components/EnrollmentRequest/EnrollmentRequestDetails/EnrollmentRequestDetails.tsx

@@ -35,12 +35,17 @@ import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import { useDeviceSpecSystemInfo } from '../../../hooks/useDeviceSpecSystemInfo';
 import { useAppContext } from '../../../hooks/useAppContext';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import PageWithPermissions from '../../common/PageWithPermissions';
 
 import './EnrollmentRequestDetails.css';
 
+const enrollmentRequestDetailsPermissions = [
+  { kind: RESOURCE.ENROLLMENT_REQUEST_APPROVAL, verb: VERB.POST },
+  { kind: RESOURCE.ENROLLMENT_REQUEST, verb: VERB.DELETE },
+];
+
 const EnrollmentRequestDetails = () => {
   const { t } = useTranslation();
   const {
@@ -52,8 +57,8 @@ const EnrollmentRequestDetails = () => {
   });
   const { remove } = useFetch();
   const navigate = useNavigate();
-  const [canApprove] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST_APPROVAL, VERB.POST);
-  const [canDelete] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.DELETE);
+  const { checkPermissions } = usePermissionsContext();
+  const [canApprove, canDelete] = checkPermissions(enrollmentRequestDetailsPermissions);
 
   const [isApprovalModalOpen, setIsApprovalModalOpen] = React.useState(false);
   const erSystemInfo = useDeviceSpecSystemInfo(er?.spec.deviceStatus?.systemInfo, t);
@@ -222,7 +227,8 @@ const EnrollmentRequestDetails = () => {
 };
 
 const EnrollmentRequestDetailsWithPermissions = () => {
-  const [allowed, loading] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.GET);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.ENROLLMENT_REQUEST, verb: VERB.GET }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
       <EnrollmentRequestDetails />

package/src/components/EnrollmentRequest/EnrollmentRequestList.tsx

@@ -4,8 +4,6 @@ import { Tbody } from '@patternfly/react-table';
 import { SelectList, SelectOption, ToolbarItem } from '@patternfly/react-core';
 import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons';
 
-import { EnrollmentRequestList } from '@flightctl/types';
-
 import Table, { ApiSortTableColumn } from '../Table/Table';
 import TableActions from '../Table/TableActions';
 import ListPage from '../ListPage/ListPage';
@@ -20,7 +18,7 @@ import MassApproveDeviceModal from '../modals/massModals/MassApproveDeviceModal/
 import EnrollmentRequestTableRow from '../EnrollmentRequest/EnrollmentRequestTableRow';
 import EnrollmentRequestTableToolbar from './EnrollmentRequestTableToolbar';
 import { RESOURCE, VERB } from '../../types/rbac';
-import { useAccessReview } from '../../hooks/useAccessReview';
+import { usePermissionsContext } from '../common/PermissionsContext';
 import ResourceListEmptyState from '../common/ResourceListEmptyState';
 import { usePendingEnrollments } from './useEnrollmentRequests';
 import TablePagination from '../Table/TablePagination';
@@ -44,14 +42,18 @@ const getEnrollmentColumns = (t: TFunction): ApiSortTableColumn[] => [
 
 type EnrollmentRequestListProps = {
   refetchDevices?: VoidFunction;
-  onEmptyListChanged?: (isEmpty: boolean) => void;
   isStandalone?: boolean;
 };
 
-const EnrollmentRequestList = ({ onEmptyListChanged, refetchDevices, isStandalone }: EnrollmentRequestListProps) => {
+const enrollmentRequestListPermissions = [
+  { kind: RESOURCE.ENROLLMENT_REQUEST_APPROVAL, verb: VERB.POST },
+  { kind: RESOURCE.ENROLLMENT_REQUEST, verb: VERB.DELETE },
+];
+
+const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentRequestListProps) => {
   const { t } = useTranslation();
-  const [canApprove] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST_APPROVAL, VERB.POST);
-  const [canDelete] = useAccessReview(RESOURCE.ENROLLMENT_REQUEST, VERB.DELETE);
+  const { checkPermissions } = usePermissionsContext();
+  const [canApprove, canDelete] = checkPermissions(enrollmentRequestListPermissions);
   const { remove } = useFetch();
   const [search, setSearch] = React.useState<string>('');
 
@@ -78,12 +80,6 @@ const EnrollmentRequestList = ({ onEmptyListChanged, refetchDevices, isStandalon
     },
   });
 
-  React.useEffect(() => {
-    if (onEmptyListChanged && !search && !isLoading) {
-      onEmptyListChanged?.(itemCount === 0);
-    }
-  }, [search, itemCount, isLoading, onEmptyListChanged]);
-
   // In non-standalone mode, hide the entire component when the search result is empty (and not due to filtering)
   const isLastUnfilteredListEmpty = !search && itemCount === 0;
   if (!isStandalone && isLastUnfilteredListEmpty) {

package/src/components/Fleet/CreateFleet/CreateFleetWizard.tsx

@@ -33,7 +33,7 @@ import CreateFleetWizardFooter from './CreateFleetWizardFooter';
 import { useEditFleet } from './useEditFleet';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import { useAppContext } from '../../../hooks/useAppContext';
 
@@ -79,7 +79,8 @@ const CreateFleetWizard = () => {
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
   const [fleetId, fleet, loading, editError] = useEditFleet();
 
-  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+  const { checkPermissions } = usePermissionsContext();
+  const [canEdit] = checkPermissions([{ kind: RESOURCE.FLEET, verb: VERB.PATCH }]);
 
   const isEdit = !!fleetId;
   const isReadOnly = !!fleet?.metadata.owner || (isEdit && !canEdit);
@@ -216,18 +217,20 @@ const CreateFleetWizard = () => {
   );
 };
 
+const createFleetWizardPermissions = [
+  { kind: RESOURCE.FLEET, verb: VERB.CREATE },
+  { kind: RESOURCE.FLEET, verb: VERB.PATCH },
+];
+
 const CreateFleetWizardWithPermissions = () => {
   const {
     router: { useParams },
   } = useAppContext();
   const { fleetId } = useParams<{ fleetId: string }>();
-  const [createAllowed, createLoading] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
-  const [patchAllowed, patchLoading] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [createAllowed, patchAllowed] = checkPermissions(createFleetWizardPermissions);
   return (
-    <PageWithPermissions
-      allowed={fleetId ? patchAllowed : createAllowed}
-      loading={fleetId ? patchLoading : createLoading}
-    >
+    <PageWithPermissions allowed={fleetId ? patchAllowed : createAllowed} loading={loading}>
       <CreateFleetWizard />
     </PageWithPermissions>
   );

package/src/components/Fleet/CreateFleet/utils.ts

@@ -32,6 +32,7 @@ import {
   getApplicationValues,
   getConfigTemplatesValues,
   getDeviceSpecConfigPatches,
+  getSystemdUnitsValues,
   hasMicroshiftRegistrationConfig,
   toAPIApplication,
 } from '../../Device/EditDeviceWizard/deviceSpecUtils';
@@ -236,10 +237,7 @@ export const getInitialValues = (fleet?: Fleet): FleetFormValues => {
       osImage: fleet.spec.template.spec.os?.image || '',
       configTemplates: getConfigTemplatesValues(fleet.spec.template.spec, registerMicroShift),
       applications: getApplicationValues(fleet.spec.template.spec),
-      systemdUnits: (fleet.spec.template.spec.systemd?.matchPatterns || []).map((p) => ({
-        pattern: p,
-        exists: true,
-      })),
+      systemdUnits: getSystemdUnitsValues(fleet.spec.template.spec),
       registerMicroShift,
       rolloutPolicy,
       disruptionBudget,

package/src/components/Fleet/FleetDetails/FleetDetailsPage.tsx

@@ -7,16 +7,20 @@ import PageWithPermissions from '../../common/PageWithPermissions';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { ROUTE, useNavigate } from '../../../hooks/useNavigate';
-import { useAccessReview } from '../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
 import { useAppContext } from '../../../hooks/useAppContext';
 import NavItem from '../../NavItem/NavItem';
 import DetailsPage from '../../DetailsPage/DetailsPage';
 import DetailsPageActions from '../../DetailsPage/DetailsPageActions';
 import DeleteFleetModal from '../DeleteFleetModal/DeleteFleetModal';
-import YamlEditor from '../../common/CodeEditor/YamlEditor';
 import FleetDetailsContent from './FleetDetailsContent';
 import FleetRestoreBanner from './FleetRestoreBanner';
+import FleetYaml from './FleetYaml';
 
+const fleetDetailsPermissions = [
+  { kind: RESOURCE.FLEET, verb: VERB.DELETE },
+  { kind: RESOURCE.FLEET, verb: VERB.PATCH },
+];
 const FleetDetailPage = () => {
   const { t } = useTranslation();
 
@@ -32,8 +36,8 @@ const FleetDetailPage = () => {
 
   const navigate = useNavigate();
 
-  const [canDelete] = useAccessReview(RESOURCE.FLEET, VERB.DELETE);
-  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+  const { checkPermissions } = usePermissionsContext();
+  const [canDelete, canEdit] = checkPermissions(fleetDetailsPermissions);
 
   const isManaged = !!fleet?.metadata?.owner;
   const hasActions = canDelete || (canEdit && !isManaged) || isManaged;
@@ -100,7 +104,7 @@ const FleetDetailPage = () => {
           <Routes>
             <Route index element={<Navigate to="details" replace />} />
             <Route path="details" element={<FleetDetailsContent fleet={fleet} />} />
-            <Route path="yaml" element={<YamlEditor filename={fleetId} apiObj={fleet} refetch={refetch} />} />
+            <Route path="yaml" element={<FleetYaml fleet={fleet} refetch={refetch} canEdit={canEdit} />} />
           </Routes>
           {isDeleteModalOpen && (
             <DeleteFleetModal
@@ -121,7 +125,8 @@ const FleetDetailPage = () => {
 };
 
 const FleetDetailsWithPermissions = () => {
-  const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.GET);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.FLEET, verb: VERB.GET }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
       <FleetDetailPage />

package/src/components/Fleet/FleetDetails/FleetYaml.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Fleet } from '@flightctl/types';
+
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
+
+// In the YAML editor, we must have the raw Fleet object, without extra details that are not part of the PATCH response.
+// For that reason, we must remove the extra "devicesSummary" field that was added to the fleet details.
+const FleetYaml = ({ fleet, refetch, canEdit }: { fleet: Fleet; refetch: VoidFunction; canEdit: boolean }) => {
+  const fleetWithoutSummary = { ...fleet, status: { ...fleet.status, devicesSummary: undefined } } as Fleet;
+  return <YamlEditor apiObj={fleetWithoutSummary} refetch={refetch} canEdit={canEdit} />;
+};
+
+export default FleetYaml;

package/src/components/Fleet/FleetResourceSyncs.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { useFetchPeriodically } from '../../hooks/useFetchPeriodically';
 import { Link, ROUTE } from '../../hooks/useNavigate';
 import { getLastTransitionTime, getRepositorySyncStatus } from '../../utils/status/repository';
-import { useAccessReview } from '../../hooks/useAccessReview';
+import { usePermissionsContext } from '../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../types/rbac';
 
 // Entries format: <rs0Name>@@<rs0LastSync>,<rs1Name>@@<rs1LastSync>,...
@@ -166,7 +166,8 @@ const FleetResourceSyncs = () => {
 };
 
 const FleetResourceSyncsWithPermissions = () => {
-  const [allowed] = useAccessReview(RESOURCE.RESOURCE_SYNC, VERB.LIST);
+  const { checkPermissions } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.RESOURCE_SYNC, verb: VERB.LIST }]);
   return allowed && <FleetResourceSyncs />;
 };
 

package/src/components/Fleet/FleetsPage.tsx

@@ -32,39 +32,40 @@ import { ROUTE, useNavigate } from '../../hooks/useNavigate';
 import DeleteFleetModal from './DeleteFleetModal/DeleteFleetModal';
 import FleetResourceSyncs from './FleetResourceSyncs';
 import { useFleetBackendFilters, useFleets } from './useFleets';
-import { useAccessReview } from '../../hooks/useAccessReview';
-import ButtonWithPermissions from '../common/ButtonWithPermissions';
+import { usePermissionsContext } from '../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
-import { useFleetImportAccessReview } from '../../hooks/useFleetImportAccessReview';
 import { GlobalSystemRestoreBanners } from '../SystemRestore/SystemRestoreBanners';
 
+const fleetPageActionsPermissions = [
+  { kind: RESOURCE.FLEET, verb: VERB.CREATE },
+  { kind: RESOURCE.RESOURCE_SYNC, verb: VERB.CREATE },
+  { kind: RESOURCE.REPOSITORY, verb: VERB.LIST },
+];
+
 const FleetPageActions = ({ createText }: { createText?: string }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const canCreateFleet = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
-  const canImportFleet = useFleetImportAccessReview();
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateFleet, canCreateRs, canReadRepo] = checkPermissions(fleetPageActionsPermissions);
+  const canImportFleet = canCreateRs && canReadRepo;
 
   return (
     <Split hasGutter>
-      <SplitItem>
-        <ButtonWithPermissions
-          permissions={canCreateFleet}
-          variant="primary"
-          onClick={() => navigate(ROUTE.FLEET_CREATE)}
-        >
-          {createText || t('Create a fleet')}
-        </ButtonWithPermissions>
-      </SplitItem>
-      <SplitItem>
-        <ButtonWithPermissions
-          permissions={canImportFleet}
-          variant="secondary"
-          onClick={() => navigate(ROUTE.FLEET_IMPORT)}
-        >
-          {t('Import fleets')}
-        </ButtonWithPermissions>
-      </SplitItem>
+      {canCreateFleet && (
+        <SplitItem>
+          <Button variant="primary" onClick={() => navigate(ROUTE.FLEET_CREATE)}>
+            {createText || t('Create a fleet')}
+          </Button>
+        </SplitItem>
+      )}
+      {canImportFleet && (
+        <SplitItem>
+          <Button variant="secondary" onClick={() => navigate(ROUTE.FLEET_IMPORT)}>
+            {t('Import fleets')}
+          </Button>
+        </SplitItem>
+      )}
     </Split>
   );
 };
@@ -104,6 +105,12 @@ const getColumns = (t: TFunction): ApiSortTableColumn[] => [
   },
 ];
 
+const fleetTablePermissions = [
+  { kind: RESOURCE.FLEET, verb: VERB.DELETE },
+  { kind: RESOURCE.FLEET, verb: VERB.CREATE },
+  { kind: RESOURCE.FLEET, verb: VERB.PATCH },
+];
+
 const FleetTable = () => {
   const { t } = useTranslation();
 
@@ -117,9 +124,8 @@ const FleetTable = () => {
 
   const { onRowSelect, isAllSelected, hasSelectedRows, isRowSelected, setAllSelected } = useTableSelect();
 
-  const [canDelete] = useAccessReview(RESOURCE.FLEET, VERB.DELETE);
-  const [canCreate] = useAccessReview(RESOURCE.FLEET, VERB.CREATE);
-  const [canEdit] = useAccessReview(RESOURCE.FLEET, VERB.PATCH);
+  const { checkPermissions } = usePermissionsContext();
+  const [canDelete, canCreate, canEdit] = checkPermissions(fleetTablePermissions);
 
   return (
     <ListPageBody error={error} loading={isLoading}>
@@ -214,7 +220,8 @@ const FleetsPage = () => {
 };
 
 const FleetsPageWithPermissions = () => {
-  const [allowed, loading] = useAccessReview(RESOURCE.FLEET, VERB.LIST);
+  const { checkPermissions, loading } = usePermissionsContext();
+  const [allowed] = checkPermissions([{ kind: RESOURCE.FLEET, verb: VERB.LIST }]);
   return (
     <PageWithPermissions allowed={allowed} loading={loading}>
       <FleetsPage />

package/src/components/Fleet/ImportFleetWizard/ImportFleetWizard.tsx

@@ -41,7 +41,8 @@ import { Link, ROUTE, useNavigate } from '../../../hooks/useNavigate';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import PageWithPermissions from '../../common/PageWithPermissions';
-import { useFleetImportAccessReview } from '../../../hooks/useFleetImportAccessReview';
+import { usePermissionsContext } from '../../common/PermissionsContext';
+import { RESOURCE, VERB } from '../../../types/rbac';
 
 import './ImportFleetWizard.css';
 
@@ -217,8 +218,15 @@ const ImportFleetWizard = () => {
   );
 };
 
+const importFleetWizardPermissions = [
+  { kind: RESOURCE.RESOURCE_SYNC, verb: VERB.CREATE },
+  { kind: RESOURCE.REPOSITORY, verb: VERB.LIST },
+];
+
 const ImportFleetWizardWithPermissions = () => {
-  const [allowed, isLoading] = useFleetImportAccessReview();
+  const { checkPermissions, loading: isLoading } = usePermissionsContext();
+  const [canCreateRs, canReadRepo] = checkPermissions(importFleetWizardPermissions);
+  const allowed = canCreateRs && canReadRepo;
   return (
     <PageWithPermissions allowed={allowed} loading={isLoading}>
       <ImportFleetWizard />

package/src/components/Fleet/ImportFleetWizard/steps/RepositoryStep.tsx

@@ -12,7 +12,7 @@ import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../../
 import { useTranslation } from '../../../../hooks/useTranslation';
 import FormSelect from '../../../form/FormSelect';
 import FlightCtlForm from '../../../form/FlightCtlForm';
-import { useAccessReview } from '../../../../hooks/useAccessReview';
+import { usePermissionsContext } from '../../../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../../../types/rbac';
 
 export const repositoryStepId = 'repository';
@@ -77,7 +77,8 @@ const RepositoryStep = ({ repositories, hasLoaded }: { repositories: Repository[
   const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<ImportFleetFormValues>();
 
-  const [canCreateRepo] = useAccessReview(RESOURCE.REPOSITORY, VERB.CREATE);
+  const { checkPermissions } = usePermissionsContext();
+  const [canCreateRepo] = checkPermissions([{ kind: RESOURCE.REPOSITORY, verb: VERB.CREATE }]);
 
   const noRepositoriesExist = hasLoaded && repositories.length === 0;
   React.useEffect(() => {

package/src/components/ListPage/ListPage.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
 
 import { Flex, FlexItem, PageSection, PageSectionVariants, Title, TitleProps } from '@patternfly/react-core';
-import TechPreviewBadge from '../common/TechPreviewBadge';
 
 type ListPageProps = {
   title: string;
   headingLevel?: TitleProps['headingLevel'];
   children: React.ReactNode;
-  withBadge?: boolean;
 };
 
-const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', withBadge = true, children }) => {
+const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', children }) => {
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
@@ -19,11 +17,6 @@ const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', withBad
             {title}
           </Title>
         </FlexItem>
-        {withBadge && (
-          <FlexItem>
-            <TechPreviewBadge />
-          </FlexItem>
-        )}
       </Flex>
       {children}
     </PageSection>

package/src/components/Login/ProviderSelector.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { Button, Card, CardBody, CardTitle, Stack, StackItem, Title } from '@patternfly/react-core';
+
+import { AuthProvider } from '@flightctl/types';
+import fcLogo from '@fctl-assets/bgimages/flight-control-logo.svg';
+import rhemLogo from '@fctl-assets/bgimages/RHEM-logo.svg';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { useAppContext } from '../../hooks/useAppContext';
+import { isOAuth2Provider } from '../AuthProvider/CreateAuthProvider/types';
+import { getProviderDisplayName } from '../../utils/authProvider';
+import { DynamicAuthProviderSpec } from '../../types/extraTypes';
+
+type ProviderSelectorProps = {
+  providers: AuthProvider[];
+  defaultProviderName: string;
+  onProviderSelect: (provider: AuthProvider) => void;
+  disabled?: boolean;
+};
+
+// Returns a unique key for a provider.
+// Theoretically there could be multiple providers with the same name across different organizations.
+const getProviderKey = (provider: AuthProvider): string => {
+  const name = provider.metadata.name as string;
+  const issuerUrl = 'issuer' in provider.spec ? provider.spec.issuer : 'issuer';
+  const clientId = 'clientId' in provider.spec ? provider.spec.clientId : 'clientId';
+  return `${name}-${issuerUrl}-${clientId}`;
+};
+
+const ProviderSelector = ({
+  providers,
+  defaultProviderName,
+  onProviderSelect,
+  disabled = false,
+}: ProviderSelectorProps) => {
+  const { t } = useTranslation();
+  const { settings } = useAppContext();
+
+  const duplicateProviderNames = React.useMemo(() => {
+    // Record of provider names and display names that are duplicates
+    const result: Record<string, boolean> = {};
+
+    providers.forEach((provider) => {
+      const displayName = getProviderDisplayName(provider, t) || (provider.metadata.name as string);
+      if (result[displayName] === undefined) {
+        result[displayName] = false;
+      } else {
+        result[displayName] = true;
+      }
+    });
+
+    return result;
+  }, [providers, t]);
+
+  return (
+    <>
+      <Card isLarge>
+        <CardBody>
+          <Stack hasGutter>
+            <StackItem>
+              <img
+                src={settings.isRHEM ? (rhemLogo as string) : (fcLogo as string)}
+                alt={settings.isRHEM ? 'Red Hat Edge Manager' : 'Flight Control'}
+              />
+            </StackItem>
+
+            <StackItem>
+              <CardTitle>
+                <Title headingLevel="h2" size="lg">
+                  {t('Choose login method')}
+                </Title>
+              </CardTitle>
+            </StackItem>
+
+            <StackItem>
+              <Stack hasGutter>
+                {providers.map((provider) => {
+                  const displayName = getProviderDisplayName(provider, t);
+
+                  const isDuplicateName = duplicateProviderNames[displayName];
+                  let details: string | undefined;
+                  if (isDuplicateName) {
+                    const spec = provider.spec as DynamicAuthProviderSpec;
+                    if (isOAuth2Provider(spec)) {
+                      details = spec.authorizationUrl || spec.clientId || '';
+                    } else {
+                      details = spec.issuer || spec.clientId || '';
+                    }
+                  }
+                  return (
+                    <StackItem key={getProviderKey(provider)}>
+                      <Button
+                        variant={defaultProviderName === provider.metadata.name ? 'primary' : 'secondary'}
+                        isBlock
+                        size="lg"
+                        onClick={() => onProviderSelect(provider)}
+                        isDisabled={disabled}
+                      >
+                        {t('Log in with {{ providerName }}', { providerName: getProviderDisplayName(provider, t) })}
+                      </Button>
+                      {isDuplicateName && <small>{details}</small>}
+                    </StackItem>
+                  );
+                })}
+              </Stack>
+            </StackItem>
+          </Stack>
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default ProviderSelector;