feat(helm): helm actions [r8s-259] (#715)

Co-authored-by: James Player <james.player@portainer.io>
Co-authored-by: Cara Ryan <cara.ryan@portainer.io>
Co-authored-by: stevensbkang <skan070@gmail.com>

app/react/components/datatables/Datatable.tsx

@@ -58,7 +58,7 @@ export interface Props<D extends DefaultType> extends AutomationTestingProps {
   getRowId?(row: D): string;
   isRowSelectable?(row: Row<D>): boolean;
   emptyContentLabel?: string;
-  title?: string;
+  title?: React.ReactNode;
   titleIcon?: IconProps['icon'];
   titleId?: string;
   initialTableState?: Partial<TableState>;
@@ -71,6 +71,8 @@ export interface Props<D extends DefaultType> extends AutomationTestingProps {
   noWidget?: boolean;
   extendTableOptions?: (options: TableOptions<D>) => TableOptions<D>;
   includeSearch?: boolean;
+  ariaLabel?: string;
+  id?: string;
 }
 
 export function Datatable<D extends DefaultType>({
@@ -100,6 +102,8 @@ export function Datatable<D extends DefaultType>({
   isServerSidePagination = false,
   extendTableOptions = (value) => value,
   includeSearch,
+  ariaLabel,
+  id,
 }: Props<D> & PaginationProps) {
   const pageCount = useMemo(
     () => Math.ceil(totalCount / settings.pageSize),
@@ -181,9 +185,14 @@ export function Datatable<D extends DefaultType>({
     () => _.difference(selectedItems, filteredItems),
     [selectedItems, filteredItems]
   );
+  const { titleAriaLabel, contentAriaLabel } = getAriaLabels(
+    ariaLabel,
+    title,
+    titleId
+  );
 
   return (
-    <Table.Container noWidget={noWidget} aria-label={title}>
+    <Table.Container noWidget={noWidget} aria-label={titleAriaLabel} id={id}>
       <DatatableHeader
         onSearchChange={handleSearchBarChange}
         searchValue={settings.search}
@@ -204,7 +213,7 @@ export function Datatable<D extends DefaultType>({
         isLoading={isLoading}
         onSortChange={handleSortChange}
         data-cy={dataCy}
-        aria-label={`${title} table`}
+        aria-label={contentAriaLabel}
       />
 
       <DatatableFooter
@@ -239,6 +248,23 @@ export function Datatable<D extends DefaultType>({
   }
 }
 
+function getAriaLabels(
+  titleAriaLabel?: string,
+  title?: ReactNode,
+  titleId?: string
+) {
+  if (titleAriaLabel) {
+    return { titleAriaLabel, contentAriaLabel: `${titleAriaLabel} table` };
+  }
+  if (typeof title === 'string') {
+    return { titleAriaLabel: title, contentAriaLabel: `${title} table` };
+  }
+  if (titleId) {
+    return { titleAriaLabel: titleId, contentAriaLabel: `${titleId} table` };
+  }
+  return { titleAriaLabel: 'table', contentAriaLabel: 'table' };
+}
+
 function defaultRenderRow<D extends DefaultType>(
   row: Row<D>,
   highlightedItemId?: string

app/react/components/datatables/DatatableHeader.tsx

@@ -8,7 +8,7 @@ import { SearchBar } from './SearchBar';
 import { Table } from './Table';
 
 type Props = {
-  title?: string;
+  title?: React.ReactNode;
   titleIcon?: IconProps['icon'];
   searchValue: string;
   onSearchChange(value: string): void;
@@ -52,7 +52,7 @@ export function DatatableHeader({
   return (
     <Table.Title
       id={titleId}
-      label={title ?? ''}
+      label={title}
       icon={titleIcon}
       description={description}
       data-cy={dataCy}

app/react/components/datatables/TableContainer.tsx

@@ -6,12 +6,14 @@ interface Props {
   // workaround to remove the widget, ideally we should have a different component to wrap the table with a widget
   noWidget?: boolean;
   'aria-label'?: string;
+  id?: string;
 }
 
 export function TableContainer({
   children,
   noWidget = false,
   'aria-label': ariaLabel,
+  id,
 }: PropsWithChildren<Props>) {
   if (noWidget) {
     return (
@@ -25,7 +27,7 @@ export function TableContainer({
     <div className="row">
       <div className="col-sm-12">
         <div className="datatable">
-          <Widget aria-label={ariaLabel}>
+          <Widget aria-label={ariaLabel} id={id}>
             <WidgetBody className="no-padding">{children}</WidgetBody>
           </Widget>
         </div>

app/react/components/datatables/TableTitle.tsx

@@ -5,7 +5,7 @@ import { Icon } from '@@/Icon';
 
 interface Props {
   icon?: ReactNode | ComponentType<unknown>;
-  label: string;
+  label: React.ReactNode;
   description?: ReactNode;
   className?: string;
   id?: string;