@flightctl/ui-components 1.0.2 → 1.1.0-rc2

package/src/components/Repository/RepositoryDetails/DeleteRepositoryModal.tsx

@@ -1,7 +1,17 @@
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Alert, Button, Spinner, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+import {
+  Alert,
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 
 import { ResourceSyncList } from '@flightctl/types';
 
@@ -89,18 +99,16 @@ const DeleteRepositoryModal = ({ repositoryId, onClose, onDeleteSuccess }: Delet
         <Stack hasGutter>
           {hasResourceSyncs && (
             <StackItem>
-              <TextContent>
-                <Text>
-                  {t(
-                    'This repository defines resource syncs. By deleting the repository, its resource syncs will also be deleted.',
-                  )}
-                </Text>
-                <Text>
-                  {t(
-                    `Any fleet that is being managed by this repository's resource syncs, will stop being managed by the service.`,
-                  )}
-                </Text>
-              </TextContent>
+              <Content component="p">
+                {t(
+                  'This repository defines resource syncs. By deleting the repository, its resource syncs will also be deleted.',
+                )}
+              </Content>
+              <Content component="p">
+                {t(
+                  `Any fleet that is being managed by this repository's resource syncs, will stop being managed by the service.`,
+                )}
+              </Content>
             </StackItem>
           )}
           {rsError ? (

package/src/components/Repository/RepositoryDetails/RepositoryDetails.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Card, CardBody, DropdownItem, DropdownList, Grid, GridItem, Nav, NavList } from '@patternfly/react-core';
+import { DropdownItem, DropdownList, Grid, GridItem, Tab } from '@patternfly/react-core';
 
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { RepoSpecType, Repository, ResourceKind } from '@flightctl/types';
@@ -17,7 +17,7 @@ import { RESOURCE, VERB } from '../../../types/rbac';
 import PageWithPermissions from '../../common/PageWithPermissions';
 import YamlEditor from '../../common/CodeEditor/YamlEditor';
 import EventsCard from '../../Events/EventsCard';
-import NavItem from '../../NavItem/NavItem';
+import TabsNav from '../../TabsNav/TabsNav';
 
 const repositoryDetailsPermissions = [
   { kind: RESOURCE.REPOSITORY, verb: VERB.DELETE },
@@ -70,12 +70,10 @@ const RepositoryDetails = () => {
         )
       }
       nav={
-        <Nav variant="tertiary">
-          <NavList>
-            <NavItem to="details">{t('Details')}</NavItem>
-            <NavItem to="yaml">{t('YAML')}</NavItem>
-          </NavList>
-        </Nav>
+        <TabsNav aria-label="Repository details tabs" tabKeys={['details', 'yaml']}>
+          <Tab eventKey="details" title={t('Details')} />
+          <Tab eventKey="yaml" title={t('YAML')} />
+        </TabsNav>
       }
     >
       {repoDetails && (
@@ -88,19 +86,18 @@ const RepositoryDetails = () => {
               element={
                 <Grid hasGutter>
                   <GridItem md={9}>
-                    <Card>
-                      <CardBody>
+                    <Grid hasGutter>
+                      <GridItem>
                         <RepositoryGeneralDetailsCard repoDetails={repoDetails} />
-                      </CardBody>
-                    </Card>
-                    {canListRS && repoDetails.spec.type !== RepoSpecType.HTTP && (
-                      <Card>
-                        <CardBody>
+                      </GridItem>
+                      {canListRS && repoDetails.spec.type === RepoSpecType.RepoSpecTypeGit && (
+                        <GridItem>
                           <RepositoryResourceSyncsCard repositoryId={repositoryId} />
-                        </CardBody>
-                      </Card>
-                    )}
+                        </GridItem>
+                      )}
+                    </Grid>
                   </GridItem>
+
                   <GridItem md={3}>
                     <EventsCard kind={ResourceKind.REPOSITORY} objId={repositoryId} />
                   </GridItem>

package/src/components/Repository/RepositoryDetails/RepositoryGeneralDetailsCard.tsx

@@ -11,27 +11,25 @@ import {
 import { LockIcon } from '@patternfly/react-icons/dist/js/icons/lock-icon';
 import { LockOpenIcon } from '@patternfly/react-icons/dist/js/icons/lock-open-icon';
 
-import { RepoSpecType, Repository } from '@flightctl/types';
+import { Repository } from '@flightctl/types';
 
-import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../../utils/status/repository';
+import { getLastTransitionTimeText } from '../../../utils/status/repository';
 import { useTranslation } from '../../../hooks/useTranslation';
 import FlightControlDescriptionList from '../../common/FlightCtlDescriptionList';
 import RepositoryStatus from '../../Status/RepositoryStatus';
-import { isHttpRepoSpec, isSshRepoSpec } from '../CreateRepository/utils';
+import {
+  getRepoTypeLabel,
+  getRepoUrlOrRegistry,
+  hasCredentialsSettings,
+  isHttpRepoSpec,
+  isOciRepoSpec,
+} from '../CreateRepository/utils';
 import { GitRepositoryLink, HttpRepositoryUrl } from './RepositorySource';
 
 const RepoPrivacy = ({ repo }: { repo: Repository }) => {
   const { t } = useTranslation();
-  let isPrivate = false;
-  if (isHttpRepoSpec(repo.spec)) {
-    if (repo.spec.httpConfig.password || repo.spec.httpConfig['tls.crt'] || repo.spec.httpConfig['tls.key']) {
-      isPrivate = true;
-    }
-  } else if (isSshRepoSpec(repo.spec)) {
-    if (repo.spec.sshConfig.sshPrivateKey) {
-      isPrivate = true;
-    }
-  }
+
+  const isPrivate = hasCredentialsSettings(repo.spec);
 
   return isPrivate ? (
     <>
@@ -50,35 +48,43 @@ const RepoPrivacy = ({ repo }: { repo: Repository }) => {
   );
 };
 
+const RegistryOrUrl = ({ repo }: { repo: Repository }) => {
+  const urlOrRegistry = getRepoUrlOrRegistry(repo.spec);
+  if (isOciRepoSpec(repo.spec)) {
+    return <div>{urlOrRegistry}</div>;
+  }
+  if (isHttpRepoSpec(repo.spec)) {
+    return <HttpRepositoryUrl url={urlOrRegistry} />;
+  }
+  return <GitRepositoryLink url={urlOrRegistry} />;
+};
+
 const DetailsTab = ({ repoDetails }: { repoDetails: Repository }) => {
   const { t } = useTranslation();
+
+  const repoLabel = getRepoTypeLabel(t, repoDetails.spec.type);
+
   return (
     <Card>
       <CardTitle>{t('Details')}</CardTitle>
       <CardBody>
         <FlightControlDescriptionList columnModifier={{ lg: '3Col' }}>
           <DescriptionListGroup>
-            <DescriptionListTerm>{t('Url')}</DescriptionListTerm>
+            <DescriptionListTerm>{isOciRepoSpec(repoDetails.spec) ? t('Registry') : t('URL')}</DescriptionListTerm>
             <DescriptionListDescription>
-              {repoDetails?.spec.type === RepoSpecType.HTTP ? (
-                <HttpRepositoryUrl url={repoDetails.spec.url} />
-              ) : (
-                <GitRepositoryLink url={repoDetails.spec.url} />
-              )}
+              <RegistryOrUrl repo={repoDetails} />
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>
             <DescriptionListTerm>{t('Type')}</DescriptionListTerm>
-            <DescriptionListDescription>
-              {repoDetails?.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
-            </DescriptionListDescription>
+            <DescriptionListDescription>{repoLabel}</DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup />
           <DescriptionListGroup>
             <DescriptionListTerm>{t('Status')}</DescriptionListTerm>
             <DescriptionListDescription>
               {' '}
-              {repoDetails ? <RepositoryStatus statusInfo={getRepositorySyncStatus(repoDetails)} /> : '-'}
+              {repoDetails ? <RepositoryStatus repository={repoDetails} /> : '-'}
             </DescriptionListDescription>
           </DescriptionListGroup>
           <DescriptionListGroup>

package/src/components/Repository/RepositoryDetails/RepositorySourceList.tsx

@@ -7,6 +7,7 @@ import { ConfigSourceProvider, getRepoName, isRepoConfig } from '../../../types/
 import { isPromiseRejected } from '../../../types/typeUtils';
 import { getErrorMessage } from '../../../utils/error';
 import { getConfigDetails } from './RepositorySource';
+import { getRepoUrlOrRegistry } from '../CreateRepository/utils';
 
 const useArrayEq = (array: string[]) => {
   const prevArrayRef = React.useRef(array);
@@ -45,7 +46,7 @@ const RepositorySourceList = ({ configs }: { configs: Array<ConfigSourceProvider
         if (isRepoMissing) {
           repoInfo.errorMsg = getErrorMessage(result.reason);
         } else {
-          repoInfo.url = result.value.spec.url;
+          repoInfo.url = getRepoUrlOrRegistry(result.value.spec);
         }
         map[repoName] = repoInfo;
       });

package/src/components/Repository/RepositoryList.tsx

@@ -13,10 +13,10 @@ import { ActionsColumn, IAction, OnSelect, Tbody, Td, Tr } from '@patternfly/rea
 import { RepositoryIcon } from '@patternfly/react-icons/dist/js/icons/repository-icon';
 import { TFunction } from 'i18next';
 
-import { RepoSpecType, Repository } from '@flightctl/types';
+import { Repository } from '@flightctl/types';
 import ListPageBody from '../ListPage/ListPageBody';
 import ListPage from '../ListPage/ListPage';
-import { getLastTransitionTimeText, getRepositorySyncStatus } from '../../utils/status/repository';
+import { getLastTransitionTimeText } from '../../utils/status/repository';
 import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import DeleteRepositoryModal from './RepositoryDetails/DeleteRepositoryModal';
 import TableTextSearch from '../Table/TableTextSearch';
@@ -33,6 +33,7 @@ import { RESOURCE, VERB } from '../../types/rbac';
 import { usePermissionsContext } from '../common/PermissionsContext';
 import { useRepositories } from './useRepositories';
 import TablePagination from '../Table/TablePagination';
+import { getRepoTypeLabel, getRepoUrlOrRegistry } from './CreateRepository/utils';
 
 const CreateRepositoryButton = ({ buttonText }: { buttonText?: string }) => {
   const { t } = useTranslation();
@@ -75,7 +76,7 @@ const getColumns = (t: TFunction): TableColumn<Repository>[] => [
     name: t('Type'),
   },
   {
-    name: t('Url'),
+    name: t('URL'),
   },
   {
     name: t('Sync status'),
@@ -132,12 +133,10 @@ const RepositoryTableRow = ({
       <Td dataLabel={t('Name')}>
         <ResourceLink id={repository.metadata.name as string} routeLink={ROUTE.REPO_DETAILS} />
       </Td>
-      <Td dataLabel={t('Type')}>
-        {repository.spec.type === RepoSpecType.HTTP ? t('HTTP service') : t('Git repository')}
-      </Td>
-      <Td dataLabel={t('Url')}>{repository.spec.url || '-'}</Td>
+      <Td dataLabel={t('Type')}>{getRepoTypeLabel(t, repository.spec.type)}</Td>
+      <Td dataLabel={t('URL')}>{getRepoUrlOrRegistry(repository.spec) || '-'}</Td>
       <Td dataLabel={t('Sync status')}>
-        <RepositoryStatus statusInfo={getRepositorySyncStatus(repository)} />
+        <RepositoryStatus repository={repository} />
       </Td>
       <Td dataLabel={t('Last transition')}>{getLastTransitionTimeText(repository, t).text}</Td>
       {!!actions.length && (
@@ -177,7 +176,7 @@ const RepositoryTable = () => {
       <Toolbar inset={{ default: 'insetNone' }}>
         <ToolbarContent>
           <ToolbarGroup>
-            <ToolbarItem variant="search-filter">
+            <ToolbarItem>
               <TableTextSearch value={search} setValue={setSearch} />
             </ToolbarItem>
           </ToolbarGroup>

package/src/components/ResourceSync/RepositoryResourceSyncList.css

@@ -1,14 +1,14 @@
 .fctl-rslist-row--selected {
-  background-color: var(--pf-v5-global--palette--blue-50);
+  background-color: var(--pf-t--color--blue--20);
 }
 
-.pf-v5-theme-dark .fctl-rslist-row--selected {
-  background-color: var(--pf-v5-global--palette--blue-400);
+.pf-v6-theme-dark .fctl-rslist-row--selected {
+  background-color: var(--pf-t--color--blue--60);
 }
 
 .fctl-rslist__addrsbutton {
   position: absolute;
   right: 0;
   display: inline-block;
-  top: 20%
-}
+  top: 20%;
+}

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
 import {
+  ActionGroup,
   Alert,
   Button,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
+  Modal,
+  ModalBody,
+  ModalHeader,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Modal, ModalBody, ModalHeader } from '@patternfly/react-core/next';
+
 import { TFunction } from 'i18next';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
@@ -30,7 +34,6 @@ import { useTableSelect } from '../../hooks/useTableSelect';
 import MassDeleteResourceSyncModal from '../modals/massModals/MassDeleteResourceSyncModal/MassDeleteResourceSyncModal';
 import ResourceSyncStatus from './ResourceSyncStatus';
 import { useTranslation } from '../../hooks/useTranslation';
-import { useAppContext } from '../../hooks/useAppContext';
 import { getErrorMessage } from '../../utils/error';
 import { commonQueries } from '../../utils/query';
 
@@ -40,7 +43,6 @@ import {
   singleResourceSyncSchema,
 } from '../Repository/CreateRepository/utils';
 import { CreateResourceSyncForm } from '../Repository/CreateRepository/CreateResourceSyncsForm';
-import FlightCtlActionGroup from '../form/FlightCtlActionGroup';
 import FlightCtlForm from '../form/FlightCtlForm';
 import ResourceListEmptyState from '../common/ResourceListEmptyState';
 import ListPageBody from '../ListPage/ListPageBody';
@@ -67,16 +69,6 @@ const getColumns = (t: TFunction): TableColumn<ResourceSync>[] => [
   },
 ];
 
-const createRefs = (rsList: ResourceSync[]): { [key: string]: React.RefObject<HTMLTableRowElement> } => {
-  const rsRefs = {};
-  rsList.forEach((rs) => {
-    if (rs.metadata.name) {
-      rsRefs[rs.metadata.name] = React.createRef();
-    }
-  });
-  return rsRefs;
-};
-
 const getSearchText = (resourceSync: ResourceSync) => [resourceSync.metadata.name];
 
 const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync?: VoidFunction }) => {
@@ -110,14 +102,14 @@ const CreateResourceSyncModalForm = ({ onClose }: { onClose: VoidFunction }) =>
   return (
     <FlightCtlForm>
       <CreateResourceSyncForm rs={rsToAdd} index={0} />
-      <FlightCtlActionGroup>
+      <ActionGroup>
         <Button variant="primary" onClick={submitForm} isLoading={isSubmitting} isDisabled={isSubmitDisabled}>
           {t('Add a resource sync')}
         </Button>
         <Button variant="link" isDisabled={isSubmitting} onClick={onClose}>
           {t('Cancel')}
         </Button>
-      </FlightCtlActionGroup>
+      </ActionGroup>
     </FlightCtlForm>
   );
 };
@@ -181,22 +173,6 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
 
   const { t } = useTranslation();
   const { remove } = useFetch();
-  const {
-    router: { useLocation },
-  } = useAppContext();
-  const { hash = '#' } = useLocation();
-  const rsRefs = createRefs(resourceSyncs);
-  const selectedRs = hash.split('#')[1];
-
-  React.useEffect(() => {
-    const rsRow = rsRefs[selectedRs]?.current;
-    if (rsRow) {
-      rsRow.scrollIntoView({ block: 'start', behavior: 'smooth' });
-    }
-    // Needs to be run only at the beginning
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const { filteredData, search, setSearch } = useTableTextSearch(resourceSyncs, getSearchText);
 
   const columns = React.useMemo(() => getColumns(t), [t]);
@@ -221,7 +197,7 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
       <Toolbar id="resource-sync-toolbar" inset={{ default: 'insetNone' }}>
         <ToolbarContent>
           <ToolbarGroup>
-            <ToolbarItem variant="search-filter">
+            <ToolbarItem>
               <TableTextSearch value={search} setValue={setSearch} placeholder={t('Search by name')} />
             </ToolbarItem>
           </ToolbarGroup>
@@ -259,15 +235,14 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
         <Tbody>
           {filteredData.map((resourceSync, rowIndex) => {
             const rsName = resourceSync.metadata.name as string;
-            const rsRef = rsRefs[rsName];
-            const isSelected = rsName === selectedRs;
+            const isSelected = isRowSelected(resourceSync);
             return (
-              <Tr key={rsName} ref={rsRef} className={isSelected ? 'fctl-rslist-row--selected' : ''}>
+              <Tr key={rsName} className={isSelected ? 'fctl-rslist-row--selected' : ''}>
                 <Td
                   select={{
                     rowIndex,
+                    isSelected,
                     onSelect: onRowSelect(resourceSync),
-                    isSelected: isRowSelected(resourceSync),
                   }}
                 />
                 <Td dataLabel={t('Name')}>{rsName}</Td>

package/src/components/ResourceSync/ResourceSyncToRepository.tsx

@@ -1,14 +1,6 @@
 import * as React from 'react';
 import { useFetch } from '../../hooks/useFetch';
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  PageSection,
-  Spinner,
-  Title,
-} from '@patternfly/react-core';
+import { Bullseye, EmptyState, EmptyStateBody, PageSection, Spinner, Title } from '@patternfly/react-core';
 import { ResourceSync } from '@flightctl/types';
 import { Trans } from 'react-i18next';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -48,17 +40,18 @@ const ResourceSyncToRepository = () => {
   }, [get, navigate, rsId]);
 
   return (
-    <PageSection variant="light">
+    <PageSection hasBodyWrapper={false}>
       <Title headingLevel="h1" size="3xl">
         {t('Resource sync {{rsId}}', { rsId })}
       </Title>
       {error ? (
-        <EmptyState>
-          <EmptyStateHeader>
+        <EmptyState
+          titleText={
             <Trans t={t}>
               Could not find the details for the resource sync <strong>{rsId}</strong>
             </Trans>
-          </EmptyStateHeader>
+          }
+        >
           <EmptyStateBody>{error}</EmptyStateBody>
         </EmptyState>
       ) : (

package/src/components/Status/DeviceLifecycleStatus.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import disabledColor from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
+import disabledColor from '@patternfly/react-tokens/dist/js/t_global_color_disabled_200';
 
 import { Device, DeviceLifecycleStatusType } from '@flightctl/types';
 import { useTranslation } from '../../hooks/useTranslation';

package/src/components/Status/IntegrityStatus.tsx

@@ -40,7 +40,7 @@ const getIntegrityCheckItem = (
     <StackItem key={key}>
       <Icon
         status={iconStatus}
-        style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(levelItem.level) } as React.CSSProperties}
+        style={{ '--pf-v6-c-icon__content--Color': getDefaultStatusColor(levelItem.level) } as React.CSSProperties}
       >
         <IconComponent />
       </Icon>{' '}
@@ -98,7 +98,9 @@ const IntegrityStatus = ({ integrityStatus }: { integrityStatus?: DeviceIntegrit
         {integrityStatus.lastVerified && (
           <StackItem>
             <small>
-              {t('Last verification at: {{ timestamp }}', { timestamp: getDateDisplay(integrityStatus.lastVerified) })}
+              {t('Last verification at: {{ timestamp }}', {
+                timestamp: getDateDisplay(integrityStatus.lastVerified),
+              })}
             </small>
           </StackItem>
         )}

package/src/components/Status/RepositoryStatus.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 
-import { ConditionType } from '@flightctl/types';
-import { RepositorySyncStatus, repositoryStatusLabels } from '../../utils/status/repository';
+import { ConditionType, Repository } from '@flightctl/types';
+import { getRepositorySyncStatus, repositoryStatusLabels } from '../../utils/status/repository';
 import { StatusLevel } from '../../utils/status/common';
 import { useTranslation } from '../../hooks/useTranslation';
 import { StatusDisplayContent } from './StatusDisplay';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
 
-const RepositoryStatus = ({ statusInfo }: { statusInfo: { status: RepositorySyncStatus; message?: string } }) => {
+const RepositoryStatus = ({ repository }: { repository: Repository }) => {
+  const statusInfo = getRepositorySyncStatus(repository);
   const statusType = statusInfo.status;
   const { t } = useTranslation();
 

package/src/components/Status/StatusDisplay.css

@@ -3,10 +3,10 @@
 }
 .ftcl_status-label > div {
   /* Reduce the space between the icon and the label, caused by the table rules */
-  --pf-v5-l-flex--spacer--column: 0.5rem;
+  --pf-v6-l-flex--spacer--column: 0.5rem;
 }
 
-.fctl-status-display-content__popover .pf-v5-c-popover__body {
-  overflow-y: scroll;
+.fctl-status-display-content__popover .pf-v6-c-popover__body {
+  overflow-y: auto;
   max-height: 30vh;
-}
+}

package/src/components/Status/StatusDisplay.tsx

@@ -32,7 +32,7 @@ export const StatusDisplayContent = ({
   const icon = (
     <Icon
       status={overrideStatus ? undefined : level}
-      style={{ '--pf-v5-c-icon__content--Color': iconColor } as React.CSSProperties}
+      style={{ '--pf-v6-c-icon__content--Color': iconColor } as React.CSSProperties}
     >
       <IconComponent />
     </Icon>

package/src/components/SystemRestore/SystemRestoreBanners.tsx

@@ -40,7 +40,7 @@ export const SystemRestoreBanners = ({
   }
 
   return (
-    <div className={`fctl-system-restore-banners ${className}`}>
+    <div className={`fctl-system-restore-banners ${className || ''}`}>
       {showPendingSyncBanner && <PendingSyncDevicesAlert forSingleDevice={mode === 'device'} />}
 
       {showSuspendedBanner && (

package/src/components/Table/Table.tsx

@@ -1,13 +1,5 @@
 import * as React from 'react';
-import {
-  Button,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-} from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, Spinner } from '@patternfly/react-core';
 import { Table as PFTable, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from '../../hooks/useTranslation';
 import LabelWithHelperText from '../common/WithHelperText';
@@ -44,6 +36,7 @@ type TableProps<D> = {
   // getSortParams: (columnIndex: number) => ThProps['sort'];
   onSelectAll?: (isSelected: boolean) => void;
   isAllSelected?: boolean;
+  isExpandable?: boolean;
 };
 
 type TableFC = <D>(props: TableProps<D>) => JSX.Element;
@@ -57,6 +50,7 @@ const Table: TableFC = ({
   clearFilters,
   onSelectAll,
   isAllSelected,
+  isExpandable,
   ...rest
 }) => {
   const { t } = useTranslation();
@@ -64,12 +58,7 @@ const Table: TableFC = ({
     return loading ? (
       <Spinner size="md" />
     ) : (
-      <EmptyState variant="full">
-        <EmptyStateHeader
-          titleText={t('No results found')}
-          icon={<EmptyStateIcon icon={SearchIcon} />}
-          headingLevel="h1"
-        />
+      <EmptyState headingLevel="h1" icon={SearchIcon} titleText={t('No results found')} variant="full">
         <EmptyStateBody>{t('Clear all filters and try again.')}</EmptyStateBody>
         {clearFilters && (
           <EmptyStateActions>
@@ -83,7 +72,7 @@ const Table: TableFC = ({
   }
 
   return (
-    <PFTable {...rest}>
+    <PFTable isExpandable={isExpandable} {...rest}>
       <Thead>
         <Tr>
           {!emptyData && onSelectAll && (
@@ -95,6 +84,7 @@ const Table: TableFC = ({
               }}
             />
           )}
+          {isExpandable && !emptyData && <Th screenReaderText={t('Expand row')} />}
           {columns.map((c) => (
             <Th key={c.name} {...c.thProps} aria-label={c.name}>
               {c.helperText ? (

package/src/components/TabsNav/TabsNav.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { Tabs, TabsProps } from '@patternfly/react-core';
+import { useAppContext } from '../../hooks/useAppContext';
+
+type TabsNavProps = {
+  children: TabsProps['children'];
+  'aria-label'?: string;
+  /** List of tab eventKeys - used to determine the active tab. */
+  tabKeys: (string | number)[];
+};
+
+const TabsNav: React.FC<TabsNavProps> = ({ children, 'aria-label': ariaLabel, tabKeys }) => {
+  const {
+    router: { useLocation, useNavigate },
+  } = useAppContext();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [activeTab, setActiveTab] = React.useState<string>();
+
+  // Update active tab when location changes
+  React.useEffect(() => {
+    const newActiveTab = tabKeys.find((tabKey) => location.pathname.endsWith(`/${tabKey}`)) || tabKeys[0];
+    setActiveTab(String(newActiveTab));
+  }, [location.pathname, tabKeys]);
+
+  // Handle tab selection and navigate to the corresponding route
+  const handleTabSelect = (_event: React.MouseEvent | React.KeyboardEvent | undefined, tabIndex: string | number) => {
+    const tabKey = String(tabIndex);
+    setActiveTab(tabKey);
+    // Navigate to the relative path
+    navigate(tabKey);
+  };
+
+  return (
+    <Tabs
+      activeKey={activeTab}
+      onSelect={handleTabSelect}
+      aria-label={ariaLabel || 'Details tabs'}
+      role="region"
+      usePageInsets
+    >
+      {children}
+    </Tabs>
+  );
+};
+
+export default TabsNav;