@flightctl/ui-components 0.5.1 → 0.6.0-rc2

package/src/components/Masthead/CommandLineToolsPage.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  Divider,
+  Flex,
+  FlexItem,
+  List,
+  ListItem,
+  PageSection,
+  PageSectionVariants,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+
+import TechPreviewBadge from '../common/TechPreviewBadge';
+import { useTranslation } from '../../hooks/useTranslation';
+import { useAppContext } from '../../hooks/useAppContext';
+import { getErrorMessage } from '../../utils/error';
+import { CliArtifactsResponse } from '../../types/extraTypes';
+
+type CommandLineToolsContentProps = {
+  productName: string;
+  loading: boolean;
+  loadError?: string;
+  artifactsResponse?: CliArtifactsResponse;
+};
+
+type CommandLineArtifact = CliArtifactsResponse['artifacts'][0];
+
+// "Not implemented" response from the UI Proxy when artifact functionality is disabled
+const cliArtifactsDisabledError = 'Error 501';
+
+const getArtifactUrl = (baseUrl: string, artifact: CommandLineArtifact) => {
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  return `${normalizedBaseUrl}/${artifact.arch}/${artifact.os}/${artifact.filename}`;
+};
+
+const CommandLineToolsContent = ({
+  productName,
+  loading,
+  loadError,
+  artifactsResponse,
+}: CommandLineToolsContentProps) => {
+  const { t } = useTranslation();
+
+  if (loading) {
+    return <Spinner size="sm" />;
+  }
+
+  let errorMessage = loadError;
+
+  const cliArtifacts = artifactsResponse?.artifacts || [];
+  if (cliArtifacts.length === 0) {
+    errorMessage = t('No {{ productName }} command line tools were found for this deployment at this time.', {
+      productName,
+    });
+  }
+
+  if (errorMessage) {
+    return (
+      <Alert
+        isInline
+        variant="danger"
+        title={t('Could not list the {{ productName }} command line tools', { productName })}
+      >
+        {errorMessage}
+      </Alert>
+    );
+  }
+
+  return (
+    <List>
+      {cliArtifacts.map((cliArtifact) => {
+        const linkText = t('Download flightctl CLI for {{ os }} for {{ arch }}', {
+          os: cliArtifact.os,
+          arch: cliArtifact.arch,
+        });
+        return (
+          <ListItem key={cliArtifact.filename}>
+            <Button
+              component="a"
+              variant="link"
+              isInline
+              href={getArtifactUrl(artifactsResponse?.baseUrl || '', cliArtifact)}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<ExternalLinkAltIcon />}
+              iconPosition="end"
+              aria-label={linkText}
+            >
+              {linkText}
+            </Button>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+const CommandLineToolsPage = () => {
+  const { t } = useTranslation();
+  const { getCliArtifacts, settings } = useAppContext();
+
+  const [loading, setLoading] = React.useState<boolean>(true);
+  const [loadError, setLoadError] = React.useState<string>();
+  const [artifactsResponse, setCliArtifactsResponse] = React.useState<CliArtifactsResponse>();
+  const [hasArtifactsEnabled, setArtifactsEnabled] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    const getLinks = async () => {
+      try {
+        if (getCliArtifacts) {
+          const apiResponse = await getCliArtifacts();
+          setCliArtifactsResponse(apiResponse);
+        }
+      } catch (e) {
+        const msg = getErrorMessage(e);
+        if (msg.includes(cliArtifactsDisabledError)) {
+          setArtifactsEnabled(false);
+        } else {
+          setLoadError(msg);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    void getLinks();
+  }, [getCliArtifacts]);
+
+  const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
+
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Stack hasGutter>
+        <StackItem>
+          <Flex>
+            <FlexItem>
+              <Title headingLevel="h1">{t('Command Line Tools')}</Title>
+            </FlexItem>
+            <FlexItem>
+              <TechPreviewBadge />
+            </FlexItem>
+          </Flex>
+        </StackItem>
+        <Divider className="pf-v5-u-my-lg" />
+        <StackItem>
+          {t(
+            'With the {{ productName }} command line interface, you can manage your fleets, devices and repositories from a terminal.',
+            {
+              productName,
+            },
+          )}
+        </StackItem>
+        {hasArtifactsEnabled ? (
+          <StackItem>
+            <CommandLineToolsContent
+              productName={productName}
+              loading={loading}
+              loadError={loadError}
+              artifactsResponse={artifactsResponse}
+            />
+          </StackItem>
+        ) : (
+          <StackItem>
+            {t('Command line tools are not available for download in this {{ productName }} installation.', {
+              productName,
+            })}
+          </StackItem>
+        )}
+      </Stack>
+    </PageSection>
+  );
+};
+
+export default CommandLineToolsPage;

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

@@ -80,19 +80,19 @@ const StatusCard = () => {
   return (
     <Card>
       <CardHeader>
-        <Flex alignItems={{ default: 'alignItemsCenter' }}>
-          <FlexItem>
+        <Stack hasGutter>
+          <StackItem>
             <CardTitle>{t('Status')}</CardTitle>
-          </FlexItem>
-          <FlexItem>
+          </StackItem>
+          <StackItem>
             <StatusCardFilters
               selectedFleets={fleets}
               setSelectedFleets={setFleets}
               selectedLabels={labels}
               setSelectedLabels={setLabels}
             />
-          </FlexItem>
-        </Flex>
+          </StackItem>
+        </Stack>
       </CardHeader>
 
       <CardBody>{content}</CardBody>

package/src/components/OverviewPage/Cards/{ToDo/ToDoCard.tsx → Tasks/TasksCard.tsx}

@@ -18,7 +18,7 @@ import { usePendingEnrollmentRequestsCount } from '../../../../hooks/usePendingE
 import { Link, ROUTE } from '../../../../hooks/useNavigate';
 import ErrorAlert from '../../../ErrorAlert/ErrorAlert';
 
-const ToDoCard = () => {
+const TasksCard = () => {
   const { t } = useTranslation();
 
   const [pendingErCount, loading, error] = usePendingEnrollmentRequestsCount();
@@ -59,10 +59,10 @@ const ToDoCard = () => {
 
   return (
     <Card>
-      <CardTitle>{t('To do')}</CardTitle>
+      <CardTitle>{t('Tasks')}</CardTitle>
       <CardBody>{content}</CardBody>
     </Card>
   );
 };
 
-export default ToDoCard;
+export default TasksCard;

package/src/components/OverviewPage/Overview.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Grid, GridItem } from '@patternfly/react-core';
 import StatusCard from './Cards/Status/StatusCard';
-import ToDoCard from './Cards/ToDo/ToDoCard';
+import TasksCard from './Cards/Tasks/TasksCard';
 import { useAccessReview } from '../../hooks/useAccessReview';
 import { RESOURCE, VERB } from '../../types/rbac';
 import PageWithPermissions from '../common/PageWithPermissions';
@@ -20,7 +20,7 @@ const Overview = () => {
         )}
         {canListErs && (
           <GridItem md={6} lg={4}>
-            <ToDoCard />
+            <TasksCard />
           </GridItem>
         )}
       </Grid>

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -32,8 +32,9 @@ import {
 } from './utils';
 import { RepoSpecType, Repository, ResourceSync } from '@flightctl/types';
 import { getErrorMessage } from '../../../utils/error';
+import { DEMO_REPOSITORY_URL } from '../../../links';
 import LeaveFormConfirmation from '../../common/LeaveFormConfirmation';
-import WithHelperText from '../../common/WithHelperText';
+import LabelWithHelperText, { FormGroupWithHelperText } from '../../common/WithHelperText';
 import NameField from '../../form/NameField';
 import TextAreaField from '../../form/TextAreaField';
 import CheckboxField from '../../form/CheckboxField';
@@ -67,16 +68,9 @@ const AdvancedSection = () => {
         <Grid hasGutter className={showConfigTypeRadios ? 'fctl-create-repo__adv-section--nested' : ''}>
           {values.repoType === RepoSpecType.HTTP && (
             <FormSection>
-              <FormGroup
+              <FormGroupWithHelperText
                 label={t('Validation suffix')}
-                labelIcon={
-                  <WithHelperText
-                    ariaLabel={t('Validation suffix')}
-                    content={t(
-                      "Suffix to the repository's base URL used to validate if the HTTP service is accessible.",
-                    )}
-                  />
-                }
+                content={t("Suffix to the repository's base URL used to validate if the HTTP service is accessible.")}
               >
                 <TextField
                   aria-label={t('Validation suffix')}
@@ -90,7 +84,7 @@ const AdvancedSection = () => {
                     )
                   }
                 />
-              </FormGroup>
+              </FormGroupWithHelperText>
             </FormSection>
           )}
 
@@ -121,17 +115,9 @@ const AdvancedSection = () => {
             />
           </FormGroup>
           {values.repoType === RepoSpecType.HTTP && (
-            <FormGroup
-              label={
-                <WithHelperText
-                  content={t('JWT authentication token for the HTTP service')}
-                  ariaLabel={t('Token')}
-                  showLabel
-                />
-              }
-            >
+            <FormGroupWithHelperText content={t('JWT authentication token for the HTTP service')} label={t('Token')}>
               <TextField name="httpConfig.token" aria-label={t('Token')} />
-            </FormGroup>
+            </FormGroupWithHelperText>
           )}
         </Grid>
       )}
@@ -265,7 +251,7 @@ export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
         <TextField
           name="url"
           aria-label={t('Repository URL')}
-          helperText={t('For example: https://github.com/flightctl/flightctl-demos')}
+          helperText={t('For example: {{ demoRepositoryUrl }}', { demoRepositoryUrl: DEMO_REPOSITORY_URL })}
         />
       </FormGroup>
 
@@ -298,11 +284,10 @@ const CreateRepositoryFormContent = ({ isEdit, isReadOnly, onClose, children }:
             <Checkbox
               id="use-resource-syncs"
               label={
-                <WithHelperText
-                  showLabel
-                  ariaLabel={t('Use resource syncs')}
+                <LabelWithHelperText
+                  label={t('Use resource syncs')}
                   content={t(
-                    "A resource sync is an automated Gitops way to manage imported fleets. The resource sync monitors changes made to the source repository and update the fleet's configurations accordingly.",
+                    'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
                   )}
                 />
               }

package/src/components/Repository/CreateRepository/CreateResourceSyncsForm.tsx

@@ -6,7 +6,7 @@ import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circl
 import { useTranslation } from '../../../hooks/useTranslation';
 
 import TextField from '../../form/TextField';
-import WithHelperText from '../../common/WithHelperText';
+import { FormGroupWithHelperText } from '../../common/WithHelperText';
 import { RepositoryFormValues, ResourceSyncFormValue } from './types';
 import NameField from '../../form/NameField';
 import { getDnsSubdomainValidations } from '../../form/validations';
@@ -24,29 +24,20 @@ export const CreateResourceSyncForm = ({ rs, index }: { rs: ResourceSyncFormValu
         resourceType="resourcesyncs"
         validations={getDnsSubdomainValidations(t)}
       />
-      <FormGroup
-        label={t('Target revision')}
-        isRequired
-        labelIcon={<WithHelperText ariaLabel={t('Target revision')} content={t('Name of a branch or a tag.')} />}
-      >
+      <FormGroupWithHelperText label={t('Target revision')} content={t('Name of a branch or a tag.')} isRequired>
         <TextField
           name={`resourceSyncs[${index}].targetRevision`}
           aria-label={t('Target revision')}
           value={rs.targetRevision}
           helperText={t('For example: main')}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelperText>
+      <FormGroupWithHelperText
         label={t('Path')}
+        content={t(
+          'The absolute path of a file or directory in the repository. Directories should only contain resource definition files and should not contain additional subdirectories.',
+        )}
         isRequired
-        labelIcon={
-          <WithHelperText
-            ariaLabel={t('Path')}
-            content={t(
-              'The absolute path of a file or directory in the repository. If a directory, the directory should contain only resource definitions with no subdirectories.',
-            )}
-          />
-        }
       >
         <TextField
           name={`resourceSyncs[${index}].path`}
@@ -56,7 +47,7 @@ export const CreateResourceSyncForm = ({ rs, index }: { rs: ResourceSyncFormValu
             exampleFile: '/demos/basic-nginx-demo/deployment/fleet.yaml',
           })}
         />
-      </FormGroup>
+      </FormGroupWithHelperText>
     </FormSection>
   );
 };

package/src/components/Repository/CreateRepository/utils.ts

@@ -17,6 +17,7 @@ import { API_VERSION } from '../../../constants';
 import { getErrorMessage } from '../../../utils/error';
 import { appendJSONPatch } from '../../../utils/patch';
 import { MAX_TARGET_REVISION_LENGTH, maxLengthString, validKubernetesDnsSubdomain } from '../../form/validations';
+import { DEMO_REPOSITORY_URL } from '../../../links';
 
 const MAX_PATH_LENGTH = 2048;
 const gitRepoUrlRegex = new RegExp(
@@ -439,7 +440,9 @@ export const repositorySchema =
           Yup.string()
             .matches(
               gitRepoUrlRegex,
-              t('Enter a valid repository URL. Example: https://github.com/flightctl/flightctl-demos'),
+              t('Enter a valid repository URL. Example: {{ demoRepositoryUrl }}', {
+                demoRepositoryUrl: DEMO_REPOSITORY_URL,
+              }),
             )
             .defined(t('Repository URL is required')),
         otherwise: () =>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Card, CardBody, CardTitle } from '@patternfly/react-core';
 
-import WithHelperText from '../../common/WithHelperText';
+import LabelWithHelperText from '../../common/WithHelperText';
 import RepositoryResourceSyncList from '../../ResourceSync/RepositoryResourceSyncList';
 import { useTranslation } from '../../../hooks/useTranslation';
 
@@ -10,9 +10,8 @@ const ResourceSyncsTab = ({ repositoryId }: { repositoryId: string }) => {
   return (
     <Card>
       <CardTitle>
-        <WithHelperText
-          showLabel
-          ariaLabel={t('Resource syncs')}
+        <LabelWithHelperText
+          label={t('Resource syncs')}
           content={t(
             'Edge Manager will monitor the specified paths, import the defined fleets and synchronise devices',
           )}

package/src/components/Repository/RepositoryList.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
   Button,
-  DropdownList,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
-  SelectOption,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -23,7 +21,6 @@ import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import DeleteRepositoryModal from './RepositoryDetails/DeleteRepositoryModal';
 import TableTextSearch from '../Table/TableTextSearch';
 import Table, { TableColumn } from '../Table/Table';
-import TableActions from '../Table/TableActions';
 import { useTableSelect } from '../../hooks/useTableSelect';
 import MassDeleteRepositoryModal from '../modals/massModals/MassDeleteRepositoryModal/MassDeleteRepositoryModal';
 import ResourceListEmptyState from '../common/ResourceListEmptyState';
@@ -56,12 +53,9 @@ const RepositoryEmptyState = () => {
   return (
     <ResourceListEmptyState icon={RepositoryIcon} titleText={t('No repositories here!')}>
       <EmptyStateBody>
-        <>
-          {t('You can create repositories and use them to point to Git repositories.')}
-          <br />
-          {t(` Adding resource syncs to them will allow you to keep your fleet's configurations updated and synced
-          automatically.`)}
-        </>
+        {t(
+          'Repositories make it easier to keep your fleet configurations updated and automatically synced to your devices.',
+        )}
       </EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -187,11 +181,9 @@ const RepositoryTable = () => {
           </ToolbarItem>
           {canDelete && (
             <ToolbarItem>
-              <TableActions isDisabled={!hasSelectedRows}>
-                <DropdownList>
-                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-                </DropdownList>
-              </TableActions>
+              <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+                {t('Delete repositories')}
+              </Button>
             </ToolbarItem>
           )}
         </ToolbarContent>
@@ -199,8 +191,9 @@ const RepositoryTable = () => {
       <Table
         aria-label={t('Repositories table')}
         loading={isUpdating}
-        emptyFilters={filteredData.length === 0}
-        emptyData={repositories.length === 0}
+        hasFilters={!!search}
+        emptyData={filteredData.length === 0}
+        clearFilters={() => setSearch('')}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
         columns={columns}

package/src/components/ResourceSync/RepositoryResourceSyncList.tsx

@@ -7,8 +7,6 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   Modal,
-  SelectList,
-  SelectOption,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -28,7 +26,6 @@ import Table, { TableColumn } from '../Table/Table';
 import { useTableTextSearch } from '../../hooks/useTableTextSearch';
 import TableTextSearch from '../Table/TableTextSearch';
 import { useTableSelect } from '../../hooks/useTableSelect';
-import TableActions from '../Table/TableActions';
 
 import MassDeleteResourceSyncModal from '../modals/massModals/MassDeleteResourceSyncModal/MassDeleteResourceSyncModal';
 import ResourceSyncStatus from './ResourceSyncStatus';
@@ -88,7 +85,7 @@ const ResourceSyncEmptyState = ({ addResourceSync }: { addResourceSync?: VoidFun
     <ResourceListEmptyState icon={CodeBranchIcon} titleText={t('No resource syncs here!')}>
       <EmptyStateBody>
         {t(
-          "A resource sync is an automated Gitops way to manage imported fleets. The resource syncs monitors changes made to the source repository and updates the fleets' configurations accordingly.",
+          'A resource sync is an automated Gitops method that helps manage your imported fleets by monitoring source repository changes and updating your fleet configuration accordingly.',
         )}
       </EmptyStateBody>
       {addResourceSync && (
@@ -222,11 +219,9 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
           </ToolbarGroup>
           {canDelete && (
             <ToolbarItem>
-              <TableActions isDisabled={!hasSelectedRows}>
-                <SelectList>
-                  <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-                </SelectList>
-              </TableActions>
+              <Button isDisabled={!hasSelectedRows} onClick={() => setIsMassDeleteModalOpen(true)} variant="secondary">
+                {t('Delete resource syncs')}
+              </Button>
             </ToolbarItem>
           )}
         </ToolbarContent>
@@ -249,8 +244,9 @@ const RepositoryResourceSyncList = ({ repositoryId }: { repositoryId: string })
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
         columns={columns}
-        emptyFilters={filteredData.length === 0}
-        emptyData={resourceSyncs.length === 0}
+        hasFilters={!!search}
+        emptyData={filteredData.length === 0}
+        clearFilters={() => setSearch('')}
       >
         <Tbody>
           {filteredData.map((resourceSync, rowIndex) => {

package/src/components/Status/DeviceResourceStatus.tsx

@@ -13,15 +13,15 @@ import { useTranslation } from '../../hooks/useTranslation';
 import { StatusLevel } from '../../utils/status/common';
 import { StatusDisplayContent } from './StatusDisplay';
 
-type MonitorType = keyof DeviceResourceStatus; /* cpu / disk / memory */
+type MonitorType = keyof DeviceResourceStatus; /* CPU / Disk / Memory */
 
 const getMonitorTypeLabel = (monitorType: MonitorType, t: TFunction) => {
   switch (monitorType) {
-    case 'cpu':
+    case 'CPU':
       return t('CPU');
-    case 'memory':
+    case 'Memory':
       return t('Memory');
-    case 'disk':
+    case 'Disk':
       return t('Disk');
   }
 };

package/src/components/Status/utils.ts

@@ -1,8 +1,6 @@
 import { TFunction } from 'i18next';
 
-export const getApplicationStatusHelperText = (t: TFunction) =>
-  t('Indicates the overall status of application workloads on the device.');
-export const getDeviceStatusHelperText = (t: TFunction) =>
-  t('Indicates the overall status of the device hardware and operating system.');
+export const getApplicationStatusHelperText = (t: TFunction) => t('Overall status of application workloads.');
+export const getDeviceStatusHelperText = (t: TFunction) => t('Overall status of device hardware and operating system.');
 export const getUpdateStatusHelperText = (t: TFunction) =>
-  t('Indicates whether a system is running the latest target configuration or is updating towards it.');
+  t('Current system configuration vs. latest system configuration.');

package/src/components/Table/Table.tsx

@@ -1,8 +1,17 @@
 import * as React from 'react';
-import { Bullseye, PageSection, Spinner } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Spinner,
+} from '@patternfly/react-core';
 import { Table as PFTable, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table';
 import { useTranslation } from '../../hooks/useTranslation';
-import WithHelperText from '../common/WithHelperText';
+import LabelWithHelperText from '../common/WithHelperText';
+import { SearchIcon } from '@patternfly/react-icons/dist/js/icons';
 
 export type ApiSortTableColumn = {
   name: string;
@@ -28,8 +37,9 @@ type TableProps<D> = {
   columns: TableColumn<D>[];
   children: React.ReactNode;
   loading: boolean;
-  emptyFilters?: boolean;
+  hasFilters?: boolean;
   emptyData?: boolean;
+  clearFilters?: VoidFunction;
   'aria-label': string;
   // getSortParams: (columnIndex: number) => ThProps['sort'];
   onSelectAll?: (isSelected: boolean) => void;
@@ -42,20 +52,33 @@ const Table: TableFC = ({
   columns,
   children,
   loading,
-  emptyFilters,
+  hasFilters,
   emptyData,
+  clearFilters,
   onSelectAll,
   isAllSelected,
   ...rest
 }) => {
   const { t } = useTranslation();
-  if (emptyData && !emptyFilters) {
+  if (emptyData && hasFilters) {
     return loading ? (
       <Spinner size="md" />
     ) : (
-      <PageSection variant="light">
-        <Bullseye>{t('No resources are matching the current filters.')}</Bullseye>
-      </PageSection>
+      <EmptyState variant="full">
+        <EmptyStateHeader
+          titleText={t('No results found')}
+          icon={<EmptyStateIcon icon={SearchIcon} />}
+          headingLevel="h1"
+        />
+        <EmptyStateBody>{t('Clear all filters and try again.')}</EmptyStateBody>
+        {clearFilters && (
+          <EmptyStateActions>
+            <Button variant="link" onClick={clearFilters}>
+              {t('Clear all filters')}
+            </Button>
+          </EmptyStateActions>
+        )}
+      </EmptyState>
     );
   }
 
@@ -75,7 +98,7 @@ const Table: TableFC = ({
           {columns.map((c) => (
             <Th key={c.name} {...c.thProps} aria-label={c.name}>
               {c.helperText ? (
-                <WithHelperText ariaLabel={c.name} showLabel content={c.helperText} triggerAction="hover" />
+                <LabelWithHelperText label={c.name} content={c.helperText} triggerAction="hover" />
               ) : (
                 c.name
               )}

package/src/components/Table/TablePagination.tsx

@@ -58,7 +58,6 @@ function TablePagination<T extends ApiList>({
   return (
     <Pagination
       isDisabled={isUpdating}
-      widgetId="table-pagination"
       isCompact
       variant={PaginationVariant.top}
       toggleTemplate={() => (