refactor(refreshTimeButton): discovery-149 pf4 button, icon (#114)

quipucords · Sep 20, 2022 · 911b408 · 911b408
1 parent e2a17f2
commit 911b408
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 17 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -21,6 +21,10 @@
   "modal": {
     "aria-label-default": "Application modal"
   },
+  "refresh-time-button": {
+    "refreshed": "Refreshed just now",
+    "refreshed_load": "Refreshed {{refresh}}"
+  },
   "view": {
     "empty-state_title": "Welcome to {{name}}",
     "empty-state_description_credentials": "Credentials contain authentication information needed to scan a source. A credential includes a username and a password or SSH key. {{name}} uses SSH to connect to servers on the network and uses credentials to access those servers.",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -180,6 +180,15 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/refreshTimeButton/refreshTimeButton.js",
+    "keys": Array [
+      Object {
+        "key": "refresh-time-button.refreshed",
+        "match": "t('refresh-time-button.refreshed', { context: lastRefresh && 'load', refresh: lastRefresh && helpers.getTimeDisplayHowLongAgo(lastRefresh)",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/scans/scans.js",
     "keys": Array [

diff --git a/src/components/refreshTimeButton/__tests__/__snapshots__/refreshTimeButton.test.js.snap b/src/components/refreshTimeButton/__tests__/__snapshots__/refreshTimeButton.test.js.snap
@@ -2,17 +2,34 @@
 
 exports[`RefreshTimeButton Component should render 1`] = `
 <button
-  class="refresh-button btn btn-link"
+  aria-disabled="false"
+  class="pf-c-button pf-m-link"
+  data-ouia-component-id="OUIA-Generated-Button-link-1"
+  data-ouia-component-type="PF4/Button"
+  data-ouia-safe="true"
   type="button"
 >
   <span
-    aria-hidden="true"
-    class="fa fa-refresh"
-  />
+    class="pf-c-button__icon pf-m-start"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 0 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M515.8,0 C655.3,0 781.6,58.4 873.4,150.2 L968.9,54.7 C989,34.5 1024,48.8 1024,77.3 L1024,352 C1024,369.7 1009.2,384.1 991.5,384 L716.8,384 C688.3,384 674,349.5 694.2,329.3 L783,240.5 C713.5,171.1 617.8,128 512,128 C300.4,128 128,300.2 128,512 C128,723.8 300.2,896.1 511.9,896 C606.9,896 693.9,861.2 761,803.9 C773.7,793.1 792.6,793.8 804.4,805.6 L849.6,850.9 C862.6,864 861.9,885.4 848,897.6 C758,976.3 640.3,1024 511.7,1024 C229.1,1024 0,797 0,510.7 C0,226.2 235,0 515.8,0"
+      />
+    </svg>
+  </span>
   <span
     class="last-refresh-time"
   >
-    Refreshed 0
+    t(refresh-time-button.refreshed, {"context":0,"refresh":0})
   </span>
 </button>
 `;
diff --git a/src/components/refreshTimeButton/refreshTimeButton.js b/src/components/refreshTimeButton/refreshTimeButton.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from 'patternfly-react';
+import { Button } from '@patternfly/react-core';
+import { RebootingIcon } from '@patternfly/react-icons';
 import { helpers } from '../../common/helpers';
+import { translate } from '../i18n/i18n';
 
 class RefreshTimeButton extends React.Component {
   pollingInterval = null;
@@ -43,13 +45,15 @@ class RefreshTimeButton extends React.Component {
   }
 
   render() {
-    const { lastRefresh, onRefresh } = this.props;
+    const { lastRefresh, onRefresh, t } = this.props;
 
     return (
-      <Button onClick={onRefresh} bsStyle="link" className="refresh-button">
-        <Icon type="fa" name="refresh" />
+      <Button variant="link" icon={<RebootingIcon />} onClick={onRefresh}>
         <span className="last-refresh-time">
-          Refreshed {lastRefresh && helpers.getTimeDisplayHowLongAgo(lastRefresh)}
+          {t('refresh-time-button.refreshed', {
+            context: lastRefresh && 'load',
+            refresh: lastRefresh && helpers.getTimeDisplayHowLongAgo(lastRefresh)
+          })}
         </span>
       </Button>
     );
@@ -58,11 +62,13 @@ class RefreshTimeButton extends React.Component {
 
 RefreshTimeButton.propTypes = {
   lastRefresh: PropTypes.number,
-  onRefresh: PropTypes.func.isRequired
+  onRefresh: PropTypes.func.isRequired,
+  t: PropTypes.func
 };
 
 RefreshTimeButton.defaultProps = {
-  lastRefresh: 0
+  lastRefresh: 0,
+  t: translate
 };
 
 export { RefreshTimeButton as default, RefreshTimeButton };
diff --git a/src/components/viewToolbar/__tests__/__snapshots__/viewToolbar.test.js.snap b/src/components/viewToolbar/__tests__/__snapshots__/viewToolbar.test.js.snap
@@ -48,17 +48,34 @@ exports[`ViewPaginationRow Component should render 1`] = `
           class="form-group"
         >
           <button
-            class="refresh-button btn btn-link"
+            aria-disabled="false"
+            class="pf-c-button pf-m-link"
+            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
             type="button"
           >
             <span
-              aria-hidden="true"
-              class="fa fa-refresh"
-            />
+              class="pf-c-button__icon pf-m-start"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M515.8,0 C655.3,0 781.6,58.4 873.4,150.2 L968.9,54.7 C989,34.5 1024,48.8 1024,77.3 L1024,352 C1024,369.7 1009.2,384.1 991.5,384 L716.8,384 C688.3,384 674,349.5 694.2,329.3 L783,240.5 C713.5,171.1 617.8,128 512,128 C300.4,128 128,300.2 128,512 C128,723.8 300.2,896.1 511.9,896 C606.9,896 693.9,861.2 761,803.9 C773.7,793.1 792.6,793.8 804.4,805.6 L849.6,850.9 C862.6,864 861.9,885.4 848,897.6 C758,976.3 640.3,1024 511.7,1024 C229.1,1024 0,797 0,510.7 C0,226.2 235,0 515.8,0"
+                />
+              </svg>
+            </span>
             <span
               class="last-refresh-time"
             >
-              Refreshed 0
+              t(refresh-time-button.refreshed, {"context":0,"refresh":0})
             </span>
           </button>
         </div>