chore: more localization

locales/en/common.json

@@ -11,6 +11,7 @@
   "BETA": "Beta",
   "CANCEL": "Cancel",
   "CARD_TYPE": "Card type",
+  "CAUTION": "Caution",
   "CLEAN": "Clean",
   "CLEAR": "Clear",
   "CLEAR_FILTERS": "Clear all filters",
@@ -68,11 +69,15 @@
   "SHOW_LESS": "Show less",
   "SHOW_MORE": "Show more",
   "SOMETHING_WENT_WRONG": "Something went wrong",
+  "STATUS": "Status",
   "SUBMIT": "Submit",
   "SUBMITTING": "Submitting",
   "SUGGESTED": "Suggested",
+  "TARGET": "Target",
   "TEMPLATE": "Template",
+  "TEST": "Test",
   "TIME": "Time",
+  "UNKNOWN_ERROR": "Unknown error",
   "UPLOAD": "Upload",
   "USER_SUBMITTED": "User-submitted",
   "VIEW": "View",

locales/en/public.json

@@ -181,6 +181,20 @@
     "TEMPLATE_HINT": "A Template must be selected.",
     "WARNING_NO_MATCH": "Warning: Match Expression matches no targets."
   },
+  "CredentialTestTable": {
+    "ARIA_LABELS": {
+      "STATUS_POPOVER": "Test Result Details ({{connectUrl}})",
+      "STATUS_SELECT": "test-status-select",
+      "TOOLBAR": "credential-test-table-toolbar"
+    },
+    "CLEAR_AND_TRY_AGAIN": "Clear Match Expression and try again.",
+    "ENTER_ANOTHER": "Enter another Match Expression.",
+    "NO_TARGET_MATCHED": "No Targets Matched",
+    "SEARCH_PLACEHOLDER": "Find by connection URL or alias...",
+    "TEST_ALL": "Test All",
+    "TEST_ALL_TOOLTIP": "Test credentials against all matching targets.",
+    "TEST_FAILED": "Test failed"
+  },
   "Dashboard": {
     "ADD_CARD_HELPER_TEXT": "Choose a card type to add to your Dashboard. Some cards require additional configuration.",
     "CARD_CATALOG_DESCRIPTION": "Cards added to this Dashboard Layout present information at a glance about the selected target. The layout is preserved for all targets viewed on this client.",
@@ -317,6 +331,12 @@
   "MATCH_EXPRESSION_VISUALIZER": {
     "TITLE": "Match Expression visualizer"
   },
+  "MatchedTargetsTable": {
+    "ARIA_LABELS": {
+      "TABLE": "matched-targets-table"
+    },
+    "NO_TARGET_MATCHED": "No Targets Matched"
+  },
   "MeridiemPicker": {
     "ARIA_LABELS": {
       "LISTBOX": "Select AM or PM"
@@ -447,12 +467,16 @@
   "StoredCredentials": {
     "ARIA_LABELS": {
       "Add": "add-credential",
-      "Delete": "delete-selected-credential"
+      "Delete": "delete-selected-credential",
+      "FILTER_CHECKBOX": "select-all",
+      "ROW_CHECKBOX": "credentials-table-row-{{index}}",
+      "TABLE": "stored-credentials"
     },
     "AT_LEAST_ONE_MATCH": "At least 1 match",
     "CARD_DESCRIPTION": "Credentials that Cryostat uses to connect to Cryostat agents or target JVMs over JMX are stored in encrypted storage managed by the Cryostat server.",
     "CARD_TITLE": "Stored Credentials",
     "CARD_TITLE_POPOVER_HEADER": "JMX Authentication",
+    "NO_CREDENTIAL_TITLE": "No Stored Credentials",
     "NO_MATCH": "No Match",
     "SEARCH_PLACEHOLDER": "Find by Match Expression..."
   },

src/app/SecurityPanel/Credentials/CredentialTestTable.tsx

@@ -59,6 +59,7 @@ import {
 } from '@patternfly/react-table';
 import _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { catchError, combineLatest, of, switchMap, tap } from 'rxjs';
 import { TestPoolContext, useAuthCredential } from './utils';
 
@@ -81,6 +82,7 @@ const tableColumns: TableColumn[] = [
 export interface CredentialTestTableProps {}
 
 export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...props }) => {
+  const { t } = useTranslation();
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
   const matchExprService = useMatchExpressionSvc();
@@ -143,9 +145,9 @@ export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...pro
         <Table {...props}>
           <Thead>
             <Tr>
-              <Th sort={getSortParams(0)}>Target</Th>
+              <Th sort={getSortParams(0)}>{t('TARGET', { ns: 'common' })}</Th>
               <Th textCenter width={20}>
-                Status
+                {t('STATUS', { ns: 'common' })}
               </Th>
             </Tr>
           </Thead>
@@ -157,13 +159,13 @@ export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...pro
     <Bullseye>
       <EmptyState variant={EmptyStateVariant.full}>
         <EmptyStateHeader
-          titleText="No Targets Matched"
+          titleText={t('CredentialTestTable.NO_TARGET_MATCHED')}
           icon={<EmptyStateIcon icon={SearchIcon} />}
-          headingLevel="h3"
+          headingLevel="h4"
         />
         <EmptyStateBody>{`${
-          matchedExpr === '' ? 'Enter another' : 'Clear'
-        } Match Expression and try again.`}</EmptyStateBody>
+          matchedExpr === '' ? t('CredentialTestTable.ENTER_ANOTHER') : t('CredentialTestTable.CLEAR_AND_TRY_AGAIN')
+        }`}</EmptyStateBody>
       </EmptyState>
     </Bullseye>
   );
@@ -207,6 +209,7 @@ export const CredentialTestRow: React.FC<CredentialTestRowProps> = ({
   searchText = '',
   ...props
 }) => {
+  const { t } = useTranslation();
   const [status, setStatus] = React.useState<TestStatus>({
     state: CredentialTestState.NO_STATUS,
     error: undefined,
@@ -255,21 +258,31 @@ export const CredentialTestRow: React.FC<CredentialTestRowProps> = ({
 
   return isShowed ? (
     <Tr {...props} id={`${target.connectUrl}-test-row`}>
-      <Td dataLabel="Target">{!target.alias ? target.connectUrl : `${target.alias} (${target.connectUrl})`}</Td>
-      <Td dataLabel="Status" textCenter>
+      <Td dataLabel={t('TARGET', { ns: 'common' })}>
+        {!target.alias || target.alias === target.connectUrl
+          ? target.connectUrl
+          : `${target.alias} (${target.connectUrl})`}
+      </Td>
+      <Td dataLabel={t('STATUS', { ns: 'common' })} textCenter>
         {loading ? (
           <Bullseye>
             <LinearDotSpinner />
           </Bullseye>
         ) : status.state === CredentialTestState.INVALID || status.state === CredentialTestState.NA ? (
           <Popover
-            aria-label={`Test Result Details (${target.connectUrl})`}
+            aria-label={t('CredentialTestTable.ARIA_LABELS.STATUS_POPOVER', { connectUrl: target.connectUrl })}
             alertSeverityVariant={status.state === CredentialTestState.INVALID ? 'danger' : 'warning'}
             headerIcon={
               status.state === CredentialTestState.INVALID ? <ExclamationCircleIcon /> : <WarningTriangleIcon />
             }
-            headerContent={<div>{status.state === CredentialTestState.INVALID ? 'Test failed' : 'Caution'}</div>}
-            bodyContent={<div>{status.error?.message || 'Unknown error'}</div>}
+            headerContent={
+              <div>
+                {status.state === CredentialTestState.INVALID
+                  ? t('CredentialTestTable.TEST_FAILED')
+                  : t('CAUTION', { ns: 'common' })}
+              </div>
+            }
+            bodyContent={<div>{status.error?.message || t('UNKNOWN_ERROR', { ns: 'common' })}</div>}
             appendTo={portalRoot}
           >
             <Label style={{ cursor: 'pointer' }} color={getColor(status.state)}>
@@ -287,7 +300,7 @@ export const CredentialTestRow: React.FC<CredentialTestRowProps> = ({
           isDisabled={loading || isEmptyCredential}
           onClick={handleTest}
         >
-          Test
+          {t('TEST', { ns: 'common' })}
         </Button>
       </Td>
     </Tr>
@@ -310,6 +323,7 @@ const CredentialToolbar: React.FC<CredentialToolbarProps> = ({
   searchText,
   ...props
 }) => {
+  const { t } = useTranslation();
   const [credential] = useAuthCredential();
   const [disableTest, setDisableTest] = React.useState(false);
 
@@ -332,23 +346,29 @@ const CredentialToolbar: React.FC<CredentialToolbarProps> = ({
   }, [filters, searchText, credential, setDisableTest, matchedTargets]);
 
   return (
-    <Toolbar {...props} isSticky id="credential-test-table-toolbar" aria-label="credential-test-table-toolbar">
+    <Toolbar
+      {...props}
+      isSticky
+      id="credential-test-table-toolbar"
+      aria-label={t('CredentialTestTable.ARIA_LABELS.TOOLBAR')}
+    >
       <ToolbarContent>
         <ToolbarItem variant="search-filter">
           <SearchInput
-            aria-label="Items example search input"
             onChange={(_, value: string) => onSearch(value)}
+            placeholder={t('CredentialTestTable.SEARCH_PLACEHOLDER')}
             value={searchText}
+            style={{ minWidth: '27ch' }}
           />
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <StatusFilter onChange={onFilter} filters={filters} />
         </ToolbarGroup>
         <ToolbarItem variant="separator" />
         <ToolbarItem>
-          <Tooltip content={'Test credentials against all matching targets.'} appendTo={portalRoot}>
+          <Tooltip content={t('CredentialTestTable.TEST_ALL_TOOLTIP')} appendTo={portalRoot}>
             <Button variant="primary" onClick={handleTestAll} isAriaDisabled={disableTest}>
-              Test All
+              {t('CredentialTestTable.TEST_ALL')}
             </Button>
           </Tooltip>
         </ToolbarItem>
@@ -363,6 +383,7 @@ interface StatusFilterProps {
 }
 
 const StatusFilter: React.FC<StatusFilterProps> = ({ onChange, filters, ...props }) => {
+  const { t } = useTranslation();
   const [isOpen, setIsOpen] = React.useState(false);
   const handleToggle = React.useCallback(() => setIsOpen((old) => !old), [setIsOpen]);
 
@@ -377,7 +398,7 @@ const StatusFilter: React.FC<StatusFilterProps> = ({ onChange, filters, ...props
   const toggle = React.useCallback(
     (toggleRef: React.Ref<MenuToggleElement>) => (
       <MenuToggle ref={toggleRef} onClick={handleToggle} isExpanded={isOpen}>
-        Status
+        {t('STATUS', { ns: 'common' })}
       </MenuToggle>
     ),
     [handleToggle, isOpen],
@@ -386,7 +407,7 @@ const StatusFilter: React.FC<StatusFilterProps> = ({ onChange, filters, ...props
   return (
     <Select
       {...props}
-      aria-label="Test Status"
+      aria-label={t('CredentialTestTable.ARIA_LABELS.STATUS_SELECT')}
       toggle={toggle}
       onSelect={handleSelect}
       isOpen={isOpen}

src/app/SecurityPanel/Credentials/MatchedTargetsTable.tsx

@@ -24,6 +24,7 @@ import { SearchIcon } from '@patternfly/react-icons';
 import { InnerScrollContainer, SortByDirection, Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export interface MatchedTargetsTableProps {
   id: number;
@@ -45,6 +46,7 @@ const tableColumns: TableColumn[] = [
 
 export const MatchedTargetsTable: React.FC<MatchedTargetsTableProps> = ({ id, matchExpression }) => {
   const context = React.useContext(ServiceContext);
+  const { t } = useTranslation();
 
   const [targets, setTargets] = React.useState([] as Target[]);
   const [sortBy, getSortParams] = useSort();
@@ -111,7 +113,7 @@ export const MatchedTargetsTable: React.FC<MatchedTargetsTableProps> = ({ id, ma
       <>
         <EmptyState>
           <EmptyStateHeader
-            titleText="No Targets Matched"
+            titleText={t('MatchedTargetsTable.NO_TARGET_MATCHED')}
             icon={<EmptyStateIcon icon={SearchIcon} />}
             headingLevel="h4"
           />
@@ -122,7 +124,12 @@ export const MatchedTargetsTable: React.FC<MatchedTargetsTableProps> = ({ id, ma
     view = (
       <>
         <InnerScrollContainer style={{ maxHeight: '24em' }}>
-          <Table aria-label="matched-targets-table" isStickyHeader variant={'compact'} borders={false}>
+          <Table
+            aria-label={t('MatchedTargetsTable.ARIA_LABELS.TABLE')}
+            isStickyHeader
+            variant={'compact'}
+            borders={false}
+          >
             <Thead>
               <Tr>
                 {tableColumns.map(({ title }, index) => (

src/app/SecurityPanel/Credentials/StoredCredentials.tsx

@@ -396,7 +396,7 @@ export const StoredCredentials = () => {
               onChange={(_event, checked: boolean) => handleRowCheck(checked)}
               isChecked={isChecked}
               id={`credentials-table-row-${idx}-check`}
-              aria-label={`credentials-table-row-${idx}-check`}
+              aria-label={t('StoredCredentials.ARIA_LABELS.ROW_CHECKBOX', { index: idx })}
             />
           </Td>
           <Td key={`credentials-table-row-${idx}_2`} dataLabel={tableColumns[0].title}>
@@ -463,11 +463,7 @@ export const StoredCredentials = () => {
         <Bullseye>
           <EmptyState>
             <EmptyStateHeader
-              titleText={
-                <>
-                  No {tableTitle} {searchText !== '' ? 'Found' : ''}
-                </>
-              }
+              titleText={<>{t('StoredCredentials.NO_CREDENTIAL_TITLE')}</>}
               icon={<EmptyStateIcon icon={SearchIcon} />}
               headingLevel="h4"
             />
@@ -478,7 +474,7 @@ export const StoredCredentials = () => {
   } else {
     content = (
       <>
-        <Table aria-label={tableTitle} isStickyHeader>
+        <Table aria-label={t('StoredCredentials.ARIA_LABELS.TABLE')} isStickyHeader>
           <Thead>
             <Tr>
               <Th key="table-header-expand" />
@@ -557,7 +553,7 @@ export const CheckBoxActions: React.FC<CheckBoxActionsProps> = ({
             <MenuToggleCheckbox
               id={'select-all-credentials'}
               key={'select-all-credentials'}
-              aria-label="Select all"
+              aria-label={t('StoredCredentials.ARIA_LABELS.FILTER_CHECKBOX')}
               isChecked={isSelectAll}
               onChange={onSelectAll}
             />,