foreman_rh_cloud 4.0.23 → 4.0.25.1

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.scss

@@ -0,0 +1,5 @@
+#cloud-ping-modal {
+  .token-status {
+    margin-bottom: 24px;
+  }
+}

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/PageDescription/PageDescription.js

@@ -28,7 +28,7 @@ export const PageDescription = () => (
         target="_blank"
         rel="noopener noreferrer"
       >
-        About subscription watch
+        {__('About subscription watch')}
       </a>
     </p>
     <p>
@@ -39,7 +39,7 @@ export const PageDescription = () => (
         target="_blank"
         rel="noopener noreferrer"
       >
-        Red Hat Insights Data and Application Security
+        {__('Red Hat Insights Data and Application Security')}
       </a>
     </p>
   </div>

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/components/Modal.js

@@ -48,7 +48,7 @@ const SyncModal = ({ show, toggleModal }) => (
           )}
         </p>
         <Button bsStyle="primary" bsSize="lg" onClick={toggleModal}>
-          Close
+          {__('Close')}
         </Button>
       </Grid>
     </Modal.Body>

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/components/Toast.js

@@ -20,13 +20,13 @@ const Toast = ({ syncHosts, disconnectHosts }) => {
         <strong>{disconnectHosts}</strong>
       </p>
       <p>
-        For more info, please visit the{' '}
+        {__('For more info, please visit the')}{' '}
         <a
           href={foremanUrl('/hosts')}
           target="_blank"
           rel="noopener noreferrer"
         >
-          hosts page
+          {__('hosts page')}
         </a>
       </p>
     </span>

data/webpack/ForemanInventoryUpload/Components/StatusChart/StatusChart.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, DonutChart } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
 import './statusChart.scss';
 
 const StatusChart = ({ completed }) => {
   const donutConfigData = {
     columns: [
-      ['Completed', completed],
-      ['Remain', 100 - completed],
+      [__('Completed'), completed],
+      [__('Remain'), 100 - completed],
     ],
     order: null,
   };
@@ -37,7 +38,7 @@ const StatusChart = ({ completed }) => {
           title={{
             type: 'percent',
             primary: `${completed}%`,
-            secondary: 'Completed',
+            secondary: __('Completed'),
           }}
         />
       </div>

data/webpack/ForemanInventoryUpload/ForemanInventoryConstants.js

@@ -7,3 +7,5 @@ export const DOCS_BUTTON_TEXT = __('Documentation');
 export const ACTIONS_HISTORY_BUTTON_TEXT = __('Actions history');
 
 export const SYNC_BUTTON_TEXT = __(' Sync inventory status');
+
+export const CLOUD_PING_TITLE = __('Connectivity test');

data/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/InventoryAutoUpload.js

@@ -41,7 +41,9 @@ const InventoryAutoUploadSwitcher = ({
 
           <Grid.Col sm={5}>
             <Popover
-              headerContent={<strong>Advanced Inventory Settings</strong>}
+              headerContent={
+                <strong>{__('Advanced Inventory Settings')}</strong>
+              }
               bodyContent={
                 <AdvancedSettings
                   autoUploadEnabled={autoUploadEnabled}

data/webpack/InsightsCloudSync/Components/InsightsHeader/InsightsHeader.scss

@@ -1,4 +1,8 @@
 .insights-header {
-  margin-bottom: '15px';
   overflow: auto;
+  margin-bottom: 30px;
+
+  p {
+    font-size: 16px;
+  }
 }

data/webpack/InsightsCloudSync/Components/InsightsHeader/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text, TextVariants } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import InsightsSettings from '../InsightsSettings';
 import './InsightsHeader.scss';
@@ -6,10 +7,11 @@ import './InsightsHeader.scss';
 const InsightsHeader = () => (
   <div className="insights-header">
     <InsightsSettings />
-    <p>
-      {__(`Insights synchronization process is used to provide Insights
-             recommendations output for hosts managed here`)}
-    </p>
+    <Text component={TextVariants.p}>
+      {__(
+        'Insights synchronization process is used to provide Insights recommendations output for hosts managed here.'
+      )}
+    </Text>
   </div>
 );
 

data/webpack/InsightsCloudSync/Components/InsightsSettings/InsightsSettings.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import InsightsSyncSwitcher from '../InsightsSyncSwitcher';
+import SwitcherPF4 from '../../../common/Switcher/SwitcherPF4';
 import './insightsSettings.scss';
 
 class InsightsSettings extends Component {
@@ -14,10 +14,14 @@ class InsightsSettings extends Component {
     const { insightsSyncEnabled, setInsightsSyncEnabled } = this.props;
     return (
       <div className="insights_settings">
-        <h3>{__('Settings')}</h3>
-        <InsightsSyncSwitcher
-          insightsSyncEnabled={insightsSyncEnabled}
-          setInsightsSyncEnabled={setInsightsSyncEnabled}
+        <SwitcherPF4
+          id="insights_sync_switcher"
+          label={__('Sync automatically')}
+          tooltip={__(
+            'Enable automatic synchronization of Insights recommendations from the Red Hat cloud'
+          )}
+          isChecked={insightsSyncEnabled}
+          onChange={() => setInsightsSyncEnabled(!insightsSyncEnabled)}
         />
       </div>
     );

data/webpack/InsightsCloudSync/Components/InsightsSettings/__tests__/__snapshots__/InsightsSettings.test.js.snap

@@ -4,12 +4,12 @@ exports[`InsightsSettings rendering render without Props 1`] = `
 <div
   className="insights_settings"
 >
-  <h3>
-    Settings
-  </h3>
-  <InsightsSyncSwitcher
-    insightsSyncEnabled={false}
-    setInsightsSyncEnabled={[Function]}
+  <SwitcherPF4
+    id="insights_sync_switcher"
+    isChecked={false}
+    label="Sync automatically"
+    onChange={[Function]}
+    tooltip="Enable automatic synchronization of Insights recommendations from the Red Hat cloud"
   />
 </div>
 `;

data/webpack/InsightsCloudSync/Components/InsightsSettings/insightsSettings.scss

@@ -1,17 +1,3 @@
 .insights_settings {
-  margin-left: 10px;
-  border: 1px solid #ededed;
-  border-radius: 4px;
-  padding: 10px;
-  margin-bottom: 15px;
   float: right;
-
-  h3 {
-    margin-top: 0;
-    font-weight: 600;
-  }
-
-  .bootstrap-switch {
-    float: right;
-  }
 }

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -1,17 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
 import { columns } from './InsightsTableConstants';
 import TableEmptyState from '../../../common/table/EmptyState';
-import {
-  modifySelectedRows,
-  getSortColumnIndex,
-  getPerPageOptions,
-} from './InsightsTableHelpers';
+import { modifySelectedRows, getSortColumnIndex } from './InsightsTableHelpers';
+import Pagination from './Pagination';
 import './table.scss';
 
 const InsightsTable = ({
@@ -22,10 +18,7 @@ const InsightsTable = ({
   sortOrder,
   hits,
   query,
-  itemCount,
   fetchInsights,
-  onTableSetPage,
-  onTablePerPageSelect,
   onTableSort,
   onTableSelect,
   selectedIds,
@@ -68,21 +61,13 @@ const InsightsTable = ({
         onSort={onTableSort}
         cells={columns}
         rows={rows}
+        variant="compact"
       >
         <TableHeader />
         <TableBody />
       </Table>
       <TableEmptyState status={status} error={error} />
-      <Pagination
-        itemCount={itemCount}
-        widgetId="recommendation-pagination"
-        perPage={perPage}
-        page={page}
-        variant={PaginationVariant.bottom}
-        onSetPage={onTableSetPage}
-        onPerPageSelect={onTablePerPageSelect}
-        perPageOptions={getPerPageOptions(urlPerPage, appPerPage)}
-      />
+      <Pagination variant="bottom" />
     </React.Fragment>
   );
 };
@@ -94,9 +79,6 @@ InsightsTable.propTypes = {
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   hits: PropTypes.array.isRequired,
-  itemCount: PropTypes.number.isRequired,
-  onTableSetPage: PropTypes.func.isRequired,
-  onTablePerPageSelect: PropTypes.func.isRequired,
   onTableSort: PropTypes.func.isRequired,
   onTableSelect: PropTypes.func.isRequired,
   selectedIds: PropTypes.object,

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js

@@ -5,7 +5,7 @@ import {
   Section,
 } from '@redhat-cloud-services/frontend-components';
 import { sortable, cellWidth } from '@patternfly/react-table';
-import { CheckCircleIcon } from '@patternfly/react-icons';
+import { AnsibeTowerIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
 
@@ -18,7 +18,14 @@ export const totalRiskFormatter = ({ title: totalRisk }) => ({
 });
 
 export const hasPlaybookFormatter = ({ title: hasPlaybook }) => ({
-  children: hasPlaybook ? <CheckCircleIcon color="green" /> : __('No'),
+  children: hasPlaybook ? (
+    <span className="td-insights-remediate-playbook">
+      <AnsibeTowerIcon />
+      {__('Playbook')}
+    </span>
+  ) : (
+    <span className="td-insights-remediate-manual">{__('Manual')}</span>
+  ),
 });
 
 export const columns = [
@@ -34,17 +41,31 @@ export const columns = [
   },
   {
     sortKey: 'total_risk',
-    title: __('Total Risk'),
+    title: __('Total risk'),
     transforms: [cellWidth(15), sortable],
     cellTransforms: [totalRiskFormatter],
   },
   {
-    title: __('Playbook'),
+    title: __('Remediate'),
     transforms: [cellWidth(15)],
     cellTransforms: [hasPlaybookFormatter],
   },
 ];
 
+export const paginationTitles = {
+  items: __('items'),
+  page: __('page'),
+  itemsPerPage: __('Items per page'),
+  perPageSuffix: __('per page'),
+  toFirstPage: __('Go to first page'),
+  toPreviousPage: __('Go to previous page'),
+  toLastPage: __('Go to last page'),
+  toNextPage: __('Go to next page'),
+  optionsToggle: __('Items per page'),
+  currPage: __('Current page'),
+  paginationTitle: __('Pagination'),
+};
+
 export const INSIGHTS_HITS_PATH = foremanUrl('/insights_cloud/hits');
 
 export const INSIGHTS_HITS_API_KEY = 'INSIGHTS_HITS';

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableSelectors.js

@@ -76,6 +76,3 @@ export const selectItemCount = state =>
 
 export const selectHasToken = state =>
   selectAPIResponse(state, INSIGHTS_HITS_API_KEY).hasToken;
-
-export const selectExperimental = state =>
-  selectAPIResponse(state, INSIGHTS_HITS_API_KEY).isExperimentalMode;

data/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Pagination as PfPagination,
+  PaginationVariant,
+} from '@patternfly/react-core';
+import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
+import { onTablePerPageSelect, onTableSetPage } from './InsightsTableActions';
+import { getPerPageOptions } from './InsightsTableHelpers';
+import {
+  selectItemCount,
+  selectPage,
+  selectPerPage,
+} from './InsightsTableSelectors';
+
+const Pagination = ({ variant, ...props }) => {
+  const dispatch = useDispatch();
+  const onSetPage = (e, pageNumber) => dispatch(onTableSetPage(e, pageNumber));
+  const onPerPageSelect = (e, perPageNumber) =>
+    dispatch(onTablePerPageSelect(e, perPageNumber));
+  const itemCount = useSelector(state => selectItemCount(state));
+  const urlPerPage = useSelector(state => selectPerPage(state));
+  const page = useSelector(state => selectPage(state));
+  const { perPage: appPerPage } = useForemanSettings();
+  const perPage = urlPerPage || appPerPage;
+
+  return (
+    <PfPagination
+      itemCount={itemCount}
+      widgetId={`recommendation-pagination-${variant}`}
+      perPage={perPage}
+      page={page}
+      variant={PaginationVariant[variant]}
+      onSetPage={onSetPage}
+      onPerPageSelect={onPerPageSelect}
+      perPageOptions={getPerPageOptions(urlPerPage, appPerPage)}
+      {...props}
+    />
+  );
+};
+
+Pagination.propTypes = {
+  variant: PropTypes.string,
+};
+
+Pagination.defaultProps = {
+  variant: 'top',
+};
+
+export default Pagination;

data/webpack/InsightsCloudSync/Components/InsightsTable/SelectAllAlert.js

@@ -18,7 +18,7 @@ const SelectAllAlert = ({
       <Alert
         isInline
         variant="info"
-        title={sprintf('Recommendations selected: %s.', selectedCount)}
+        title={sprintf(__('Recommendations selected: %s.'), selectedCount)}
         actionLinks={
           <AlertActionLink onClick={selectAll}>
             {__('Select recommendations from all pages')}

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/__snapshots__/InsightsTable.test.js.snap

@@ -37,7 +37,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
             [Function],
           ],
           "sortKey": "total_risk",
-          "title": "Total Risk",
+          "title": "Total risk",
           "transforms": Array [
             [Function],
             [Function],
@@ -47,7 +47,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
           "cellTransforms": Array [
             [Function],
           ],
-          "title": "Playbook",
+          "title": "Remediate",
           "transforms": Array [
             [Function],
           ],
@@ -74,7 +74,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
         "index": 3,
       }
     }
-    variant={null}
+    variant="compact"
   >
     <TableHeader />
     <Component />
@@ -84,72 +84,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
     status="RESOLVED"
   />
   <Pagination
-    className=""
-    defaultToFullPage={false}
-    firstPage={1}
-    isCompact={false}
-    isDisabled={false}
-    isSticky={false}
-    itemCount={2}
-    itemsEnd={null}
-    itemsStart={null}
-    offset={0}
-    onFirstClick={[Function]}
-    onLastClick={[Function]}
-    onNextClick={[Function]}
-    onPageInput={[Function]}
-    onPerPageSelect={[Function]}
-    onPreviousClick={[Function]}
-    onSetPage={[Function]}
-    ouiaSafe={true}
-    page={1}
-    perPage={5}
-    perPageOptions={
-      Array [
-        Object {
-          "title": "5",
-          "value": 5,
-        },
-        Object {
-          "title": "10",
-          "value": 10,
-        },
-        Object {
-          "title": "15",
-          "value": 15,
-        },
-        Object {
-          "title": "20",
-          "value": 20,
-        },
-        Object {
-          "title": "25",
-          "value": 25,
-        },
-        Object {
-          "title": "50",
-          "value": 50,
-        },
-      ]
-    }
-    titles={
-      Object {
-        "currPage": "Current page",
-        "items": "",
-        "itemsPerPage": "Items per page",
-        "optionsToggle": "Items per page",
-        "page": "",
-        "paginationTitle": "Pagination",
-        "perPageSuffix": "per page",
-        "toFirstPage": "Go to first page",
-        "toLastPage": "Go to last page",
-        "toNextPage": "Go to next page",
-        "toPreviousPage": "Go to previous page",
-      }
-    }
-    toggleTemplate={[Function]}
     variant="bottom"
-    widgetId="recommendation-pagination"
   />
 </Fragment>
 `;