tektoncd · tekton-robot · Oct 3, 2022 · Oct 1, 2022
diff --git a/packages/components/src/components/DeleteModal/DeleteModal.js b/packages/components/src/components/DeleteModal/DeleteModal.js
@@ -13,74 +13,76 @@ limitations under the License.
 /* istanbul ignore file */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Modal } from 'carbon-components-react';
 import { Table } from '..';
 
 const DeleteModal = ({
   onClose,
   onSubmit,
-  intl,
   kind,
   resources,
   showNamespace = true
-}) => (
-  <Modal
-    className="tkn--delete-modal"
-    open
-    primaryButtonText={intl.formatMessage({
-      id: 'dashboard.actions.deleteButton',
-      defaultMessage: 'Delete'
-    })}
-    secondaryButtonText={intl.formatMessage({
-      id: 'dashboard.modal.cancelButton',
-      defaultMessage: 'Cancel'
-    })}
-    modalHeading={intl.formatMessage(
-      {
-        id: 'dashboard.deleteResources.heading',
-        defaultMessage: 'Delete {kind}'
-      },
-      { kind }
-    )}
-    onSecondarySubmit={onClose}
-    onRequestSubmit={onSubmit}
-    onRequestClose={onClose}
-    danger
-  >
-    <p>
-      {intl.formatMessage(
+}) => {
+  const intl = useIntl();
+  return (
+    <Modal
+      className="tkn--delete-modal"
+      open
+      primaryButtonText={intl.formatMessage({
+        id: 'dashboard.actions.deleteButton',
+        defaultMessage: 'Delete'
+      })}
+      secondaryButtonText={intl.formatMessage({
+        id: 'dashboard.modal.cancelButton',
+        defaultMessage: 'Cancel'
+      })}
+      modalHeading={intl.formatMessage(
         {
-          id: 'dashboard.deleteResources.confirm',
-          defaultMessage: 'Are you sure you want to delete these {kind}?'
+          id: 'dashboard.deleteResources.heading',
+          defaultMessage: 'Delete {kind}'
         },
         { kind }
       )}
-    </p>
-    <Table
-      headers={[
-        {
-          key: 'name',
-          header: intl.formatMessage({
-            id: 'dashboard.tableHeader.name',
-            defaultMessage: 'Name'
-          })
-        },
-        showNamespace
-          ? {
-              key: 'namespace',
-              header: 'Namespace'
-            }
-          : null
-      ].filter(Boolean)}
-      rows={resources.map(resource => ({
-        id: resource.metadata.uid,
-        name: resource.metadata.name,
-        namespace: resource.metadata.namespace
-      }))}
-      size="sm"
-    />
-  </Modal>
-);
+      onSecondarySubmit={onClose}
+      onRequestSubmit={onSubmit}
+      onRequestClose={onClose}
+      danger
+    >
+      <p>
+        {intl.formatMessage(
+          {
+            id: 'dashboard.deleteResources.confirm',
+            defaultMessage: 'Are you sure you want to delete these {kind}?'
+          },
+          { kind }
+        )}
+      </p>
+      <Table
+        headers={[
+          {
+            key: 'name',
+            header: intl.formatMessage({
+              id: 'dashboard.tableHeader.name',
+              defaultMessage: 'Name'
+            })
+          },
+          showNamespace
+            ? {
+                key: 'namespace',
+                header: 'Namespace'
+              }
+            : null
+        ].filter(Boolean)}
+        rows={resources.map(resource => ({
+          id: resource.metadata.uid,
+          name: resource.metadata.name,
+          namespace: resource.metadata.namespace
+        }))}
+        size="sm"
+      />
+    </Modal>
+  );
+};
 
-export default injectIntl(DeleteModal);
+export default DeleteModal;
diff --git a/packages/components/src/components/FormattedDate/FormattedDate.js b/packages/components/src/components/FormattedDate/FormattedDate.js
@@ -12,14 +12,15 @@ limitations under the License.
 */
 
 import React from 'react';
-import { FormattedDate, FormattedRelativeTime, injectIntl } from 'react-intl';
+import { FormattedDate, FormattedRelativeTime, useIntl } from 'react-intl';
 
 const FormattedDateWrapper = ({
   date,
   formatTooltip = formattedDate => formattedDate,
-  intl,
   relative
 }) => {
+  const intl = useIntl();
+
   if (!date) {
     return null;
   }
@@ -62,4 +63,4 @@ const FormattedDateWrapper = ({
   return <span title={formatTooltip(formattedDate)}>{content}</span>;
 };
 
-export default injectIntl(FormattedDateWrapper);
+export default FormattedDateWrapper;
diff --git a/packages/components/src/components/Header/Header.js b/packages/components/src/components/Header/Header.js
@@ -12,7 +12,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import {
   Header as CarbonHeader,
   HeaderGlobalBar,
@@ -31,10 +31,10 @@ function skipToContentClick(event) {
 function Header({
   children,
   headerNameProps,
-  intl,
   isSideNavExpanded,
   onHeaderMenuButtonClick
 }) {
+  const intl = useIntl();
   return (
     <CarbonHeader aria-label="Tekton Dashboard" className="tkn--header">
       <SkipToContent href="#" onClick={skipToContentClick}>
@@ -68,4 +68,4 @@ function Header({
   );
 }
 
-export default injectIntl(Header);
+export default Header;
diff --git a/packages/components/src/components/KeyValueList/KeyValueList.js b/packages/components/src/components/KeyValueList/KeyValueList.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -12,13 +12,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Button, TextInput } from 'carbon-components-react';
 import { AddAlt24 as Add, SubtractAlt16 as Remove } from '@carbon/icons-react';
 
 const KeyValueList = props => {
+  const intl = useIntl();
   const {
-    intl,
     invalidFields,
     invalidText,
     keyValues,
@@ -109,4 +109,4 @@ KeyValueList.defaultProps = {
   minKeyValues: 0
 };
 
-export default injectIntl(KeyValueList);
+export default KeyValueList;
diff --git a/packages/components/src/components/LoadingShell/LoadingShell.js b/packages/components/src/components/LoadingShell/LoadingShell.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -13,7 +13,7 @@ limitations under the License.
 /* istanbul ignore file */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import {
   SkeletonText as CarbonSkeletonText,
   Content,
@@ -29,7 +29,8 @@ const SkeletonText = ({ heading, paragraph }) => (
   <CarbonSkeletonText heading={heading} paragraph={paragraph} width="80%" />
 );
 
-const LoadingShell = ({ intl }) => {
+const LoadingShell = () => {
+  const intl = useIntl();
   const loadingMessage = intl.formatMessage({
     id: 'dashboard.loading.config',
     defaultMessage: 'Loading configuration…'
@@ -86,4 +87,4 @@ const LoadingShell = ({ intl }) => {
   );
 };
 
-export default injectIntl(LoadingShell);
+export default LoadingShell;
diff --git a/packages/components/src/components/LogsToolbar/LogsToolbar.js b/packages/components/src/components/LogsToolbar/LogsToolbar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -12,65 +12,72 @@ limitations under the License.
 */
 /* istanbul ignore file */
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import {
   Download16,
   Launch16,
   Maximize16,
   Minimize16
 } from '@carbon/icons-react';
 
-const LogsToolbar = ({ intl, isMaximized, name, toggleMaximized, url }) => (
-  <div className="bx--btn-set">
-    {toggleMaximized ? (
-      <button className="bx--copy-btn" onClick={toggleMaximized} type="button">
-        {isMaximized ? (
-          <Minimize16>
-            <title>
-              {intl.formatMessage({
-                id: 'dashboard.logs.restore',
-                defaultMessage: 'Return to default'
-              })}
-            </title>
-          </Minimize16>
-        ) : (
-          <Maximize16>
-            <title>
-              {intl.formatMessage({
-                id: 'dashboard.logs.maximize',
-                defaultMessage: 'Maximize'
-              })}
-            </title>
-          </Maximize16>
-        )}
-      </button>
-    ) : null}
-    <a
-      className="bx--copy-btn"
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <Launch16>
-        <title>
-          {intl.formatMessage({
-            id: 'dashboard.logs.launchButtonTooltip',
-            defaultMessage: 'Open logs in a new window'
-          })}
-        </title>
-      </Launch16>
-    </a>
-    <a className="bx--copy-btn" download={name} href={url}>
-      <Download16>
-        <title>
-          {intl.formatMessage({
-            id: 'dashboard.logs.downloadButtonTooltip',
-            defaultMessage: 'Download logs'
-          })}
-        </title>
-      </Download16>
-    </a>
-  </div>
-);
+const LogsToolbar = ({ isMaximized, name, toggleMaximized, url }) => {
+  const intl = useIntl();
+  return (
+    <div className="bx--btn-set">
+      {toggleMaximized ? (
+        <button
+          className="bx--copy-btn"
+          onClick={toggleMaximized}
+          type="button"
+        >
+          {isMaximized ? (
+            <Minimize16>
+              <title>
+                {intl.formatMessage({
+                  id: 'dashboard.logs.restore',
+                  defaultMessage: 'Return to default'
+                })}
+              </title>
+            </Minimize16>
+          ) : (
+            <Maximize16>
+              <title>
+                {intl.formatMessage({
+                  id: 'dashboard.logs.maximize',
+                  defaultMessage: 'Maximize'
+                })}
+              </title>
+            </Maximize16>
+          )}
+        </button>
+      ) : null}
+      <a
+        className="bx--copy-btn"
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Launch16>
+          <title>
+            {intl.formatMessage({
+              id: 'dashboard.logs.launchButtonTooltip',
+              defaultMessage: 'Open logs in a new window'
+            })}
+          </title>
+        </Launch16>
+      </a>
+      <a className="bx--copy-btn" download={name} href={url}>
+        <Download16>
+          <title>
+            {intl.formatMessage({
+              id: 'dashboard.logs.downloadButtonTooltip',
+              defaultMessage: 'Download logs'
+            })}
+          </title>
+        </Download16>
+      </a>
+    </div>
+  );
+};
 
-export default injectIntl(LogsToolbar);
+export default LogsToolbar;