Bug 1910409: Add externalized strings for i18n for notification drawer

openshift · Dec 23, 2020 · 23a031c · 23a031c
1 parent 04d9999
commit 23a031c
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 104 deletions.
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx
@@ -51,8 +51,8 @@ export const StatusItem: React.FC<StatusItemProps> = ({ Icon, timestamp, message
 
 const AlertItem: React.FC<AlertItemProps> = ({ alert }) => {
   const actionsExtensions = useExtensions<AlertAction>(isAlertAction);
-  const action = getAlertActions(actionsExtensions).get(alert.rule.name);
   const { t } = useTranslation();
+  const action = getAlertActions(actionsExtensions, t).get(alert.rule.name);
   return (
     <StatusItem
       Icon={getSeverityIcon(getAlertSeverity(alert))}

diff --git a/...nd/packages/patternfly/src/components/notification-drawer/notification-drawer-heading.tsx b/...nd/packages/patternfly/src/components/notification-drawer/notification-drawer-heading.tsx
@@ -1,34 +1,42 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const NotificationDrawerHeading: React.FC<NotificationDrawerHeadingProps> = ({
   count,
   children,
   onClose,
-}) => (
-  <div className="pf-c-notification-drawer">
-    <div className="pf-c-notification-drawer__header">
-      <h1 className="pf-c-notification-drawer__header-title">Notifications</h1>
-      {count && (
-        <span className="pf-c-notification-drawer__header-status">{`${count} unread`}</span>
-      )}
-      <div className="pf-c-notification-drawer__header-action">
-        <div className="pf-c-notification-drawer__header-action-close">
-          <button
-            className="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Close"
-            onClick={onClose}
-          >
-            <i className="fas fa-times" aria-hidden="true"></i>
-          </button>
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div className="pf-c-notification-drawer">
+      <div className="pf-c-notification-drawer__header">
+        <h1 className="pf-c-notification-drawer__header-title">
+          {t('notification-drawer~Notifications')}
+        </h1>
+        {count && (
+          <span className="pf-c-notification-drawer__header-status">
+            {t('notification-drawer~{{count}} unread', { count })}
+          </span>
+        )}
+        <div className="pf-c-notification-drawer__header-action">
+          <div className="pf-c-notification-drawer__header-action-close">
+            <button
+              className="pf-c-button pf-m-plain"
+              type="button"
+              aria-label={t('notification-drawer~Close')}
+              onClick={onClose}
+            >
+              <i className="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
       </div>
+      <div className="pf-c-notification-drawer__body">
+        <div className="pf-c-notification-drawer__group-list">{children}</div>
+      </div>
     </div>
-    <div className="pf-c-notification-drawer__body">
-      <div className="pf-c-notification-drawer__group-list">{children}</div>
-    </div>
-  </div>
-);
+  );
+};
 
 type NotificationDrawerHeadingProps = {
   children: React.ReactNode;

diff --git a/frontend/packages/patternfly/src/components/notification-drawer/notification-entry.tsx b/frontend/packages/patternfly/src/components/notification-drawer/notification-entry.tsx
@@ -1,6 +1,7 @@
 import * as classNames from 'classnames';
-import * as _ from 'lodash';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { Link } from 'react-router-dom';
 import {
   BlueArrowCircleUpIcon,
@@ -19,6 +20,21 @@ export enum NotificationTypes {
   update = 'update',
 }
 
+export const notificationTypeString = (type: NotificationTypes, t: TFunction): string => {
+  switch (type) {
+    case NotificationTypes.warning:
+      return t('notification-drawer~Warning');
+    case NotificationTypes.critical:
+      return t('notification-drawer~Critical');
+    case NotificationTypes.success:
+      return t('notification-drawer~Success');
+    case NotificationTypes.update:
+      return t('notification-drawer~Update');
+    default:
+      return t('notification-drawer~Info');
+  }
+};
+
 const NotificationIcon: React.FC<NotificationIconTypes> = ({ type }) => {
   switch (type) {
     case NotificationTypes.update:
@@ -59,43 +75,50 @@ const NotificationEntry: React.FC<NotificationEntryProps> = ({
   targetPath,
   toggleNotificationDrawer,
   type,
-}) => (
-  <li
-    className={classNames(`pf-c-notification-drawer__list-item pf-m-hoverable pf-m-${type}`, {
-      'pf-m-read': isRead,
-    })}
-    tabIndex={0}
-    onClick={
-      targetPath
-        ? () => {
-            history.push(targetPath);
-            toggleNotificationDrawer();
-          }
-        : null
-    }
-  >
-    <div className="pf-c-notification-drawer__list-item-header">
-      <span className="pf-c-notification-drawer__list-item-header-icon">
-        <NotificationIcon type={type} />
-      </span>
-      <h4 className="pf-c-notification-drawer__list-item-header-title">
-        <span className="pf-screen-reader">{`${_.capitalize(type)} notification:`}</span>
-        {title}
-      </h4>
-      {actionText && actionPath && (
-        <NotificationAction
-          text={actionText}
-          path={actionPath}
-          onClick={toggleNotificationDrawer}
-        />
-      )}
-    </div>
-    <div className="pf-c-notification-drawer__list-item-description">{description}</div>
-    <div className="pf-c-notification-drawer__list-item-timestamp">
-      {timestamp && <Timestamp simple timestamp={timestamp} />}
-    </div>
-  </li>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <li
+      className={classNames(`pf-c-notification-drawer__list-item pf-m-hoverable pf-m-${type}`, {
+        'pf-m-read': isRead,
+      })}
+      tabIndex={0}
+      onClick={
+        targetPath
+          ? () => {
+              history.push(targetPath);
+              toggleNotificationDrawer();
+            }
+          : null
+      }
+    >
+      <div className="pf-c-notification-drawer__list-item-header">
+        <span className="pf-c-notification-drawer__list-item-header-icon">
+          <NotificationIcon type={type} />
+        </span>
+        <h4 className="pf-c-notification-drawer__list-item-header-title">
+          <span className="pf-screen-reader">
+            {t('notification-drawer~{{type}} notification:', {
+              type: notificationTypeString(type, t),
+            })}
+          </span>
+          {title}
+        </h4>
+        {actionText && actionPath && (
+          <NotificationAction
+            text={actionText}
+            path={actionPath}
+            onClick={toggleNotificationDrawer}
+          />
+        )}
+      </div>
+      <div className="pf-c-notification-drawer__list-item-description">{description}</div>
+      <div className="pf-c-notification-drawer__list-item-timestamp">
+        {timestamp && <Timestamp simple timestamp={timestamp} />}
+      </div>
+    </li>
+  );
+};
 
 export type NotificationEntryProps = {
   actionText?: string;