@flightctl/ui-components 0.4.0 → 0.5.0-rc2

package/src/components/Fleet/FleetDetails/{FleetDevices.tsx → FleetDevicesCharts.tsx}

@@ -12,9 +12,9 @@ import {
 } from '../../Status/utils';
 import DonutChart from '../../charts/DonutChart';
 import { getApplicationSummaryStatusItems } from '../../../utils/status/applications';
-import { toChartData } from '../../../components/charts/utils';
+import { toChartData } from '../../charts/utils';
 
-interface FleetDevicesProps {
+interface FleetDevicesChartsProps {
   fleetId: string;
   devicesSummary: DevicesSummary;
 }
@@ -90,7 +90,7 @@ const DevicesByDeviceStatusChart = ({
   return <DonutChart title={t('Device status')} data={deviceStatusData} helperText={getDeviceStatusHelperText(t)} />;
 };
 
-const FleetDevices = ({ devicesSummary, fleetId }: FleetDevicesProps) => {
+const FleetDevicesCharts = ({ devicesSummary, fleetId }: FleetDevicesChartsProps) => {
   return (
     <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>
       <FlexItem>
@@ -106,4 +106,4 @@ const FleetDevices = ({ devicesSummary, fleetId }: FleetDevicesProps) => {
   );
 };
 
-export default FleetDevices;
+export default FleetDevicesCharts;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DevicesSummary } from '@flightctl/types';
+import { Icon, Popover } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+
+import { Link, ROUTE } from '../../../hooks/useNavigate';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+type FleetDevicesCountProps = {
+  fleetId: string;
+  devicesSummary: DevicesSummary | undefined;
+  error?: string;
+};
+
+const UpdatedFleetDevices = ({ error }: { error?: string }) => {
+  const { t } = useTranslation();
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <Popover
+      aria-label={t('Fleet devices popover')}
+      headerContent={t('Rollout error')}
+      bodyContent={error}
+      hasAutoWidth={false}
+    >
+      <Icon status="danger" className="pf-v5-u-mr-sm">
+        <ExclamationCircleIcon />
+      </Icon>
+    </Popover>
+  );
+};
+
+const FleetDevicesCount = ({ fleetId, devicesSummary, error }: FleetDevicesCountProps) => {
+  if (!devicesSummary || !devicesSummary.total) {
+    return <>0/0</>;
+  }
+
+  const upToDate = devicesSummary.updateStatus['UpToDate'];
+  return (
+    <>
+      {/* Devices may continue updating even after a rollout failed. If all devices are up-to-date, do not show the rollout error */}
+      {upToDate !== devicesSummary.total && <UpdatedFleetDevices error={error} />}
+      {`${upToDate || 0}`}/
+      <Link to={ROUTE.DEVICES} query={`fleetId=${fleetId}`}>
+        {devicesSummary.total}
+      </Link>
+    </>
+  );
+};
+
+export default FleetDevicesCount;

package/src/components/Fleet/FleetResourceSyncs.tsx

@@ -146,14 +146,14 @@ const FleetResourceSyncs = () => {
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Stack hasGutter>
-        {errorRs.map((rs) => {
+        {pendingRs.map((rs) => {
           return (
             <StackItem key={rs.metadata.name as string}>
               <ResourceSyncInfoAlert rs={rs} />
             </StackItem>
           );
         })}
-        {pendingRs.map((rs) => {
+        {errorRs.map((rs) => {
           return (
             <StackItem key={rs.metadata.name as string}>
               <ResourceSyncErrorAlert rs={rs} refetch={rsRefetch} />

package/src/components/Fleet/FleetRow.tsx

@@ -3,11 +3,13 @@ import { ActionsColumn, IAction, OnSelect, Td, Tr } from '@patternfly/react-tabl
 
 import { Fleet } from '@flightctl/types';
 import { useTranslation } from '../../hooks/useTranslation';
-import { FleetOwnerLinkIcon, getOwnerName } from './FleetDetails/FleetOwnerLink';
 import { ROUTE, useNavigate } from '../../hooks/useNavigate';
+import { getFleetRolloutStatusWarning } from '../../utils/status/fleet';
+
+import { FleetOwnerLinkIcon, getOwnerName } from './FleetDetails/FleetOwnerLink';
 import FleetStatus from './FleetStatus';
 import ResourceLink from '../common/ResourceLink';
-import FleetDevicesLink from './FleetDetails/FleetDevicesLink';
+import FleetDevicesCount from './FleetDetails/FleetDevicesCount';
 
 type FleetRowProps = {
   fleet: Fleet;
@@ -52,6 +54,8 @@ const FleetRow: React.FC<FleetRowProps> = ({
 
   const isManaged = !!fleet.metadata?.owner;
   const actions = useFleetActions(fleetName, isManaged, canEdit);
+  const fleetRolloutError = getFleetRolloutStatusWarning(fleet, t);
+
   if (canDelete) {
     actions.push({
       title: t('Delete fleet'),
@@ -82,8 +86,12 @@ const FleetRow: React.FC<FleetRowProps> = ({
         </FleetOwnerLinkIcon>
       </Td>
       <Td dataLabel={t('System image')}>{fleet.spec.template.spec.os?.image || '-'}</Td>
-      <Td dataLabel={t('Devices')}>
-        <FleetDevicesLink fleetId={fleetName} count={fleet.status?.devicesSummary?.total} />
+      <Td dataLabel={t('Up-to-date/devices')}>
+        <FleetDevicesCount
+          fleetId={fleetName}
+          devicesSummary={fleet.status?.devicesSummary}
+          error={fleetRolloutError}
+        />
       </Td>
       <Td dataLabel={t('Status')}>
         <FleetStatus fleet={fleet} />

package/src/components/Fleet/FleetsPage.tsx

@@ -97,7 +97,7 @@ const getColumns = (t: TFunction): ApiSortTableColumn[] => [
     name: t('System image'),
   },
   {
-    name: t('Devices'),
+    name: t('Up-to-date/devices'),
   },
   {
     name: t('Status'),
@@ -110,7 +110,7 @@ const FleetTable = () => {
   const fleetColumns = React.useMemo(() => getColumns(t), [t]);
   const { name, setName, hasFiltersEnabled } = useFleetBackendFilters();
 
-  const { fleets, isLoading, error, isUpdating, refetch, pagination } = useFleets({ name, addDevicesCount: true });
+  const { fleets, isLoading, error, isUpdating, refetch, pagination } = useFleets({ name, addDevicesSummary: true });
 
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [fleetToDeleteId, setFleetToDeleteId] = React.useState<string>();

package/src/components/Fleet/useFleets.ts

@@ -14,7 +14,7 @@ export enum FleetSearchParams {
 type FleetsEndpointArgs = {
   name?: string;
   nextContinue?: string;
-  addDevicesCount?: boolean;
+  addDevicesSummary?: boolean;
 };
 
 export const useFleetBackendFilters = () => {
@@ -47,11 +47,11 @@ export const useFleetBackendFilters = () => {
 
 const getFleetsEndpoint = ({
   name,
-  addDevicesCount,
+  addDevicesSummary,
   nextContinue,
 }: {
   name?: string;
-  addDevicesCount?: boolean;
+  addDevicesSummary?: boolean;
   nextContinue?: string;
 }) => {
   const params = new URLSearchParams({
@@ -60,8 +60,8 @@ const getFleetsEndpoint = ({
   if (name) {
     params.set('fieldSelector', `metadata.name contains ${name}`);
   }
-  if (addDevicesCount) {
-    params.set('addDevicesCount', 'true');
+  if (addDevicesSummary) {
+    params.set('addDevicesSummary', 'true');
   }
   if (nextContinue) {
     params.set('continue', nextContinue);
@@ -81,11 +81,11 @@ export type FleetLoad = {
   error: unknown;
   isUpdating: boolean;
   refetch: VoidFunction;
-  pagination: PaginationDetails;
+  pagination: PaginationDetails<FleetList>;
 };
 
 export const useFleets = (args: FleetsEndpointArgs): FleetLoad => {
-  const pagination = useTablePagination();
+  const pagination = useTablePagination<FleetList>();
   const [fleetsEndpoint, fleetsDebouncing] = useFleetsEndpoint({ ...args, nextContinue: pagination.nextContinue });
   const [fleetsList, isLoading, error, refetch, updating] = useFetchPeriodically<FleetList>(
     {

package/src/components/ListPage/ListPage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { PageSection, PageSectionVariants, Title, TitleProps } from '@patternfly/react-core';
+import { Flex, FlexItem, PageSection, PageSectionVariants, Title, TitleProps } from '@patternfly/react-core';
+import TechPreviewBadge from '../common/TechPreviewBadge';
 
 type ListPageProps = {
   title: string;
@@ -11,9 +12,16 @@ type ListPageProps = {
 const ListPage: React.FC<ListPageProps> = ({ title, headingLevel = 'h1', children }) => {
   return (
     <PageSection variant={PageSectionVariants.light}>
-      <Title headingLevel={headingLevel} size="3xl">
-        {title}
-      </Title>
+      <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
+        <FlexItem>
+          <Title headingLevel={headingLevel} size="3xl">
+            {title}
+          </Title>
+        </FlexItem>
+        <FlexItem>
+          <TechPreviewBadge />
+        </FlexItem>
+      </Flex>
       {children}
     </PageSection>
   );

package/src/components/ListPage/ListPageActions.tsx

@@ -1,20 +1,18 @@
 import * as React from 'react';
-import DeleteModal from '../modals/DeleteModal/DeleteModal';
-import { IAction } from '@patternfly/react-table';
-import { useTranslation } from '../../hooks/useTranslation';
 import { TFunction } from 'react-i18next';
 
-export type DeleteListActionResult = {
-  deleteAction: (params: { resourceId: string; resourceName?: string; disabledReason?: string | boolean }) => IAction;
-  deleteModal: React.ReactNode;
-};
+import { DeviceDecommissionTargetType } from '@flightctl/types';
+import { ListAction, ListActionProps, ListActionResult } from './types';
 
-type ResourceType = 'Device' | 'EnrollmentRequest' | 'ResourceSync';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getDisabledTooltipProps } from '../../utils/tooltip';
+import DeleteModal from '../modals/DeleteModal/DeleteModal';
+import DecommissionModal from '../modals/DecommissionModal/DecommissionModal';
 
-type DeleteListActionProps = {
-  onDelete: (resourceId: string) => Promise<unknown>;
-  resourceType: 'Device' | 'EnrollmentRequest' | 'ResourceSync';
-};
+type DeleteResourceType = 'EnrollmentRequest' | 'ResourceSync' | 'Device';
+type DecommissionResourceType = 'Device';
+
+type ResourceType = 'Device' | 'EnrollmentRequest' | 'ResourceSync';
 
 const getResourceTypeLabel = (t: TFunction, resourceType: ResourceType) => {
   switch (resourceType) {
@@ -27,14 +25,17 @@ const getResourceTypeLabel = (t: TFunction, resourceType: ResourceType) => {
   }
 };
 
-export const useDeleteListAction = ({ resourceType, onDelete }: DeleteListActionProps): DeleteListActionResult => {
+export const useDeleteListAction = ({
+  resourceType,
+  onConfirm,
+}: ListActionProps<DeleteResourceType, never>): ListActionResult => {
   const { t } = useTranslation();
   const [deleteResourceId, setDeleteResourceId] = React.useState<string>();
   const [name, setName] = React.useState<string>();
 
   const resourceTypeLabel = getResourceTypeLabel(t, resourceType);
 
-  const deleteAction: DeleteListActionResult['deleteAction'] = ({ resourceId, resourceName, disabledReason }) => {
+  const deleteAction: ListAction = ({ resourceId, resourceName, disabledReason }) => {
     const popperProps = disabledReason ? { tooltipProps: { content: disabledReason } } : undefined;
     return {
       title: t('Delete {{ resourceType }}', { resourceType: resourceTypeLabel }),
@@ -58,11 +59,44 @@ export const useDeleteListAction = ({ resourceType, onDelete }: DeleteListAction
       resourceName={name || deleteResourceId}
       onClose={onClose}
       onDelete={async () => {
-        await onDelete(deleteResourceId);
+        await onConfirm(deleteResourceId);
         onClose();
       }}
     />
   );
 
-  return { deleteAction, deleteModal };
+  return { action: deleteAction, modal: deleteModal };
+};
+
+export const useDecommissionListAction = ({
+  onConfirm,
+}: ListActionProps<DecommissionResourceType, { target: DeviceDecommissionTargetType }>): ListActionResult => {
+  const { t } = useTranslation();
+  const [decommissionDeviceId, setDecommissionDeviceId] = React.useState<string>();
+
+  const decommissionAction: ListAction = ({ resourceId, disabledReason }) => {
+    const popperProps = getDisabledTooltipProps(disabledReason);
+    return {
+      title: t('Decommission device'),
+      ...popperProps,
+      onClick: () => {
+        setDecommissionDeviceId(resourceId);
+      },
+    };
+  };
+
+  const onClose = () => {
+    setDecommissionDeviceId(undefined);
+  };
+
+  const decommissionModal = decommissionDeviceId && (
+    <DecommissionModal
+      onClose={onClose}
+      onDecommission={async (target: DeviceDecommissionTargetType) => {
+        await onConfirm(decommissionDeviceId, { target });
+      }}
+    />
+  );
+
+  return { action: decommissionAction, modal: decommissionModal };
 };

package/src/components/ListPage/types.ts

@@ -1,13 +1,13 @@
 import { IAction } from '@patternfly/react-table';
 
-export type DeleteListActionResult = {
-  deleteAction: (params: { resourceId: string; resourceName?: string; disabledReason?: string }) => IAction;
-  deleteModal: React.ReactNode;
-};
+export type ListAction = (params: { resourceId: string; resourceName?: string; disabledReason?: string }) => IAction;
 
-export type DeleteListActionProps = {
-  onDelete: (resourceId: string) => Promise<unknown>;
-  resourceType: string;
+export type ListActionResult = {
+  action: ListAction;
+  modal: React.ReactNode;
 };
 
-export type DeleteListActionHook = (args: DeleteListActionProps) => DeleteListActionResult;
+export type ListActionProps<T extends string, P> = {
+  onConfirm: (resourceId: string, params?: P) => Promise<unknown>;
+  resourceType: T;
+};

package/src/components/OverviewPage/Cards/Status/DeviceStatusChart.tsx

@@ -23,7 +23,6 @@ const DeviceStatusChart = ({
 
   const statusItems = getDeviceStatusItems(t);
 
-  // TODO should we add the "Pending" devices, now that the Device table does not contain ERs?
   const devStatusData = toOverviewChartData<DeviceSummaryStatusType>(
     deviceStatus,
     statusItems,

package/src/components/OverviewPage/OverviewPage.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react';
 import Overview from './Overview';
 import { useTranslation } from '../../hooks/useTranslation';
-import { PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
+import { Flex, FlexItem, PageSection, PageSectionVariants, Title } from '@patternfly/react-core';
+import TechPreviewBadge from '../common/TechPreviewBadge';
 
 const OverviewPage = () => {
   const { t } = useTranslation();
   return (
     <>
       <PageSection variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="3xl" role="heading">
-          {t('Overview')}
-        </Title>
+        <Flex gap={{ default: 'gapMd' }} alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem>
+            <Title headingLevel="h1" size="3xl" role="heading">
+              {t('Overview')}
+            </Title>
+          </FlexItem>
+          <FlexItem>
+            <TechPreviewBadge />
+          </FlexItem>
+        </Flex>
       </PageSection>
       <PageSection variant={PageSectionVariants.light} isFilled>
         <Overview />

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

@@ -14,7 +14,7 @@ const ResourceSyncsTab = ({ repositoryId }: { repositoryId: string }) => {
           showLabel
           ariaLabel={t('Resource syncs')}
           content={t(
-            'Device management service will monitor the specified paths, import the defined fleets and synchronise devices',
+            'Edge Manager will monitor the specified paths, import the defined fleets and synchronise devices',
           )}
         />
       </CardTitle>

package/src/components/Repository/useRepositories.ts

@@ -35,9 +35,9 @@ export const useRepositories = (): [
   unknown,
   boolean,
   VoidFunction,
-  Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
+  Pick<PaginationDetails<RepositoryList>, 'currentPage' | 'setCurrentPage' | 'itemCount'>,
 ] => {
-  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } = useTablePagination();
+  const { currentPage, setCurrentPage, itemCount, nextContinue, onPageFetched } = useTablePagination<RepositoryList>();
   const [repoEndpoint, isDebouncing] = useRepositoriesEndpoint({ nextContinue });
 
   const [repoList, isLoading, error, refetch] = useFetchPeriodically<RepositoryList>(

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -198,9 +198,9 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
 
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
-  const { deleteAction, deleteModal } = useDeleteListAction({
+  const { action: deleteAction, modal: deleteModal } = useDeleteListAction({
     resourceType: 'ResourceSync',
-    onDelete: async (resourceId: string) => {
+    onConfirm: async (resourceId: string) => {
       await remove(`resourcesyncs/${resourceId}`);
       refetch();
     },

package/src/components/Status/DeviceLifecycleStatus.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import disabledColor from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
+
+import { Device, DeviceLifecycleStatusType } from '@flightctl/types';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getDeviceLifecycleStatus, getDeviceLifecycleStatusItems } from '../../utils/status/devices';
+import StatusDisplay, { StatusDisplayContent } from './StatusDisplay';
+
+const DeviceLifecycleStatus = ({ device }: { device: Device }) => {
+  const { t } = useTranslation();
+
+  const status = getDeviceLifecycleStatus(device);
+  const statusItems = getDeviceLifecycleStatusItems(t);
+
+  const item = statusItems.find((statusItem) => {
+    return statusItem.id === status;
+  });
+
+  if (item?.id === DeviceLifecycleStatusType.DeviceLifecycleStatusDecommissioned) {
+    // TODO The decommissioned status appears as disabled. Could there be a message associated to it? It would look weird (disabled with a link)
+    return (
+      <StatusDisplayContent
+        level={item.level}
+        customIcon={item.customIcon}
+        label={<span style={{ color: disabledColor.value }}>{item.label}</span>}
+      />
+    );
+  }
+
+  return <StatusDisplay item={item} message={device.status?.lifecycle.info} />;
+};
+
+export default DeviceLifecycleStatus;

package/src/components/Status/StatusDisplay.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from '../../hooks/useTranslation';
 import './StatusDisplay.css';
 
 type StatusLabelProps = {
-  label: string;
+  label: React.ReactNode;
   message?: React.ReactNode;
   messageTitle?: string;
   level: StatusLevel;
@@ -17,7 +17,7 @@ type StatusLabelProps = {
 };
 
 export const StatusDisplayContent = ({ label, messageTitle, message, level, customIcon }: StatusLabelProps) => {
-  const iconLevel = level === 'unknown' ? undefined : level;
+  const iconStatus = level === 'unknown' ? undefined : level;
   const IconComponent = customIcon || getDefaultStatusIcon(level);
 
   if (message) {
@@ -34,7 +34,7 @@ export const StatusDisplayContent = ({ label, messageTitle, message, level, cust
           isInline
           icon={
             <Icon
-              status={iconLevel}
+              status={iconStatus}
               style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
             >
               <IconComponent />
@@ -51,7 +51,7 @@ export const StatusDisplayContent = ({ label, messageTitle, message, level, cust
     <Flex className="ftcl_status-label">
       <FlexItem>
         <Icon
-          status={iconLevel}
+          status={iconStatus}
           style={{ '--pf-v5-c-icon__content--Color': getDefaultStatusColor(level) } as React.CSSProperties}
         >
           <IconComponent />

package/src/components/Table/Table.tsx

@@ -65,6 +65,7 @@ const Table: TableFC = ({
         <Tr>
           {!emptyData && onSelectAll && (
             <Th
+              aria-label={t('Select all rows')}
               select={{
                 onSelect: (_event, isSelecting) => onSelectAll(isSelecting),
                 isSelected: !!isAllSelected,
@@ -72,7 +73,7 @@ const Table: TableFC = ({
             />
           )}
           {columns.map((c) => (
-            <Th key={c.name} {...c.thProps}>
+            <Th key={c.name} {...c.thProps} aria-label={c.name}>
               {c.helperText ? (
                 <WithHelperText ariaLabel={c.name} showLabel content={c.helperText} triggerAction="hover" />
               ) : (

package/src/components/Table/TablePagination.tsx

@@ -5,6 +5,7 @@ import { Pagination, PaginationVariant, Spinner } from '@patternfly/react-core';
 import { PAGE_SIZE } from '../../constants';
 import { PaginationDetails } from '../../hooks/useTablePagination';
 import { useTranslation } from '../../hooks/useTranslation';
+import { ApiList } from '../../utils/api';
 
 const PaginationTemplate = ({
   currentPage,
@@ -16,26 +17,27 @@ const PaginationTemplate = ({
   isUpdating: boolean;
 }) => {
   const { t } = useTranslation();
-  const totalPages = String(Math.ceil((itemCount || 0) / PAGE_SIZE));
+  const pagesCount = Math.ceil((itemCount || 0) / PAGE_SIZE);
 
-  const pageNum = `${currentPage}`;
+  const page = String(currentPage <= pagesCount ? currentPage : 0);
+  const totalPages = String(pagesCount);
   return (
     <>
       {isUpdating && <Spinner size="sm" />}{' '}
       <Trans t={t}>
-        {pageNum} of <strong>{totalPages}</strong>
+        {page} of <strong>{totalPages}</strong>
       </Trans>
     </>
   );
 };
 
-const TablePagination = ({
+function TablePagination<T extends ApiList>({
   isUpdating,
   pagination,
 }: {
-  pagination: Pick<PaginationDetails, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
+  pagination: Pick<PaginationDetails<T>, 'currentPage' | 'setCurrentPage' | 'itemCount'>;
   isUpdating: boolean;
-}) => {
+}) {
   const { t } = useTranslation();
   const { itemCount, currentPage, setCurrentPage } = pagination;
 
@@ -69,6 +71,6 @@ const TablePagination = ({
       onSetPage={onSetPage}
     />
   );
-};
+}
 
 export default TablePagination;

package/src/components/common/EditableLabelControl.tsx

@@ -16,16 +16,14 @@ const EditableLabelControl = ({
   onAddLabel,
   isEditable = true,
 }: EditableLabelControlProps) => {
-  const [isEditing, setIsEditing] = React.useState<boolean>();
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
   const [label, setLabel] = React.useState<string>('');
   const { t } = useTranslation();
 
   const onConfirmAdd = () => {
-    if (label) {
-      onAddLabel(label);
-      setIsEditing(false);
-      setLabel('');
-    }
+    onAddLabel(label);
+    setIsEditing(false);
+    setLabel('');
   };
 
   const onDiscardAdd = () => {
@@ -54,7 +52,10 @@ const EditableLabelControl = ({
     />
   ) : (
     <Button
+      aria-label={addButtonText || t('Add label')}
       variant="link"
+      className="pf-v5-u-ml-xs"
+      isInline
       isDisabled={!isEditable}
       onClick={() => {
         setIsEditing(true);

package/src/components/common/TechPreviewBadge.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Label, Popover, Stack, StackItem } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import LearnMoreLink from './LearnMoreLink';
+import { TECH_PREVIEW_LEVEL_LINK } from '../../links';
+
+const TechPreviewPopoverContent = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack>
+      <StackItem>
+        {t(
+          'Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.',
+        )}
+      </StackItem>
+      <StackItem>
+        <LearnMoreLink link={TECH_PREVIEW_LEVEL_LINK} />
+      </StackItem>
+    </Stack>
+  );
+};
+
+const TechPreviewBadge = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Popover
+      aria-label={t('Technology preview description')}
+      bodyContent={<TechPreviewPopoverContent />}
+      withFocusTrap
+      triggerAction="click"
+    >
+      <Label color="orange" icon={<InfoCircleIcon />}>
+        {t('Technology preview')}
+      </Label>
+    </Popover>
+  );
+};
+
+export default TechPreviewBadge;