chore: localize stored credentials table

locales/en/common.json

@@ -1,4 +1,5 @@
 {
+  "ADD": "Add",
   "ARCHIVAL_PERIOD": "Archival Period",
   "AriaLabels": {
     "MAXIMUM_AGE": "Maximum age value",

locales/en/public.json

@@ -437,6 +437,14 @@
       "TABLE": "Shortcuts table"
     }
   },
+  "StoredCredentials": {
+    "ARIA_LABELS": {
+      "Add": "add-credential",
+      "Delete": "delete-selected-credential"
+    },
+    "AT_LEAST_ONE_MATCH": ">= 1 Match Only",
+    "NO_MATCH": "No Match Only"
+  },
   "TargetContextSelector": {
     "CLEAR_SELECTION": "Clear selection",
     "CREATE_TARGET": "Create Target",

src/app/SecurityPanel/Credentials/StoredCredentials.tsx

@@ -32,20 +32,20 @@ import {
   Text,
   TextContent,
   TextVariants,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
   EmptyStateHeader,
   Dropdown,
   DropdownList,
   DropdownItem,
   MenuToggleElement,
   MenuToggle,
   MenuToggleCheckbox,
+  ActionList,
+  ActionListItem,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { ExpandableRowContent, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { forkJoin } from 'rxjs';
 import { SecurityCard } from '../types';
 import { CreateCredentialModal } from './CreateCredentialModal';
@@ -181,6 +181,7 @@ const tableColumns: TableColumn[] = [
 const tableTitle = 'Stored Credentials';
 
 export const StoredCredentials = () => {
+  const { t } = useTranslation();
   const context = React.useContext(ServiceContext);
   const [state, dispatch] = React.useReducer(reducer, {
     credentials: [] as StoredCredential[],
@@ -278,49 +279,51 @@ export const StoredCredentials = () => {
     setWarningModalOpen(false);
   }, [setWarningModalOpen]);
 
-  const TargetCredentialsToolbar = () => {
-    const buttons = React.useMemo(() => {
-      const arr = [
-        <Button key="add" variant="primary" aria-label="add-credential" onClick={handleAuthModalOpen}>
-          Add
-        </Button>,
-        <Button
-          key="delete"
-          variant="danger"
-          aria-label="delete-selected-credential"
-          onClick={handleDeleteButton}
-          isDisabled={!state.checkedCredentials.length}
-        >
-          Delete
-        </Button>,
-      ];
-      return (
-        <>
-          {arr.map((btn, idx) => (
-            <ToolbarItem key={idx}>{btn}</ToolbarItem>
-          ))}
-        </>
-      );
-    }, []);
+  const targetCredentialsToolbar = React.useMemo(() => {
+    const buttons = [
+      <Button
+        key="add"
+        variant="primary"
+        aria-label={t('StoredCredentials.ARIA_LABELS.Add')}
+        onClick={handleAuthModalOpen}
+      >
+        {t('ADD', { ns: 'common' })}
+      </Button>,
+      <Button
+        key="delete"
+        variant="danger"
+        aria-label={t('StoredCredentials.ARIA_LABELS.Delete')}
+        onClick={handleDeleteButton}
+        isDisabled={!state.checkedCredentials.length}
+      >
+        {t('DELETE', { ns: 'common' })}
+      </Button>,
+    ];
 
-    const deleteCredentialModal = React.useMemo(() => {
-      return (
+    return (
+      <>
+        <ActionList>
+          {buttons.map((btn, idx) => (
+            <ActionListItem key={idx}>{btn}</ActionListItem>
+          ))}
+        </ActionList>
         <DeleteWarningModal
           warningType={DeleteOrDisableWarningType.DeleteCredentials}
           visible={warningModalOpen}
           onAccept={handleDeleteCredentials}
           onClose={handleWarningModalClose}
         />
-      );
-    }, []);
-
-    return (
-      <Toolbar id="target-credentials-toolbar">
-        <ToolbarContent>{buttons}</ToolbarContent>
-        {deleteCredentialModal}
-      </Toolbar>
+      </>
     );
-  };
+  }, [
+    t,
+    handleAuthModalOpen,
+    handleDeleteButton,
+    warningModalOpen,
+    handleDeleteCredentials,
+    handleWarningModalClose,
+    state.checkedCredentials.length,
+  ]);
 
   const matchExpressionRows = React.useMemo(() => {
     return sortResources(sortBy, state.credentials, tableColumns).map((credential, idx) => {
@@ -414,7 +417,7 @@ export const StoredCredentials = () => {
       <>
         <EmptyState>
           <EmptyStateHeader
-            titleText={<>No{tableTitle}</>}
+            titleText={<>No {tableTitle}</>}
             icon={<EmptyStateIcon icon={SearchIcon} />}
             headingLevel="h4"
           />
@@ -455,7 +458,7 @@ export const StoredCredentials = () => {
 
   return (
     <>
-      <TargetCredentialsToolbar />
+      {targetCredentialsToolbar}
       {content}
       <CreateCredentialModal
         visible={showAuthModal}
@@ -479,18 +482,21 @@ export const CheckBoxActions: React.FC<CheckBoxActionsProps> = ({
   onSelectAll,
   isSelectAll,
 }) => {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleToggle = React.useCallback(() => setIsOpen((isOpen) => !isOpen), [setIsOpen]);
 
   const dropdownItems = React.useMemo(() => {
     return [
       <DropdownItem key="action" onClick={onNoMatchSelect}>
-        No Match Only
+        {t('StoredCredentials.NO_MATCH')}
+      </DropdownItem>,
+      <DropdownItem key="action" onClick={onAtLeastOneMatchSelect}>
+        {t('StoredCredentials.AT_LEAST_ONE_MATCH')}
       </DropdownItem>,
-      <DropdownItem key="action" onClick={onAtLeastOneMatchSelect}>{`>= 1 Match Only`}</DropdownItem>,
     ];
-  }, [onNoMatchSelect, onAtLeastOneMatchSelect]);
+  }, [onNoMatchSelect, onAtLeastOneMatchSelect, t]);
 
   const toggle = React.useCallback(
     (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -520,6 +526,8 @@ export const CheckBoxActions: React.FC<CheckBoxActionsProps> = ({
       }}
       toggle={toggle}
       isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      onOpenChangeKeys={['Escape']}
       popperProps={{
         appendTo: portalRoot,
       }}