foreman_rh_cloud 4.0.24.1 → 4.0.27

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,4 @@
 .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;
-  }
+  margin-top: 22px;
 }

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>
 `;

data/webpack/InsightsCloudSync/Components/InsightsTable/table.scss

@@ -7,5 +7,15 @@
         display: none;
       }
     }
+
+    .td-insights-remediate-playbook {
+      svg {
+        margin-right: 5px;
+      }
+    }
+
+    .td-insights-remediate-manual {
+      padding-left: 18px;
+    }
   }
 }

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js

@@ -2,7 +2,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import { isEmpty } from 'lodash';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { columns } from './RemediationTableConstants';
@@ -10,7 +11,6 @@ import { modifyRows } from './RemediationHelpers';
 import ModalFooter from './RemediationModalFooter';
 import TableEmptyState from '../../../common/table/EmptyState';
 import './RemediationModal.scss';
-import RemediateButton from './RemediateButton';
 
 const RemediationModal = ({
   selectedIds,
@@ -20,7 +20,6 @@ const RemediationModal = ({
   error,
   isAllSelected,
   query,
-  isExperimentalMode,
 }) => {
   const [rows, setRows] = React.useState([]);
   const [open, setOpen] = React.useState(false);
@@ -42,11 +41,15 @@ const RemediationModal = ({
 
   return (
     <React.Fragment>
-      <RemediateButton
-        isExperimentalMode={isExperimentalMode}
-        selectedIds={selectedIds}
-        toggleModal={toggleModal}
-      />{' '}
+      <Button
+        variant="primary"
+        isDisabled={isEmpty(selectedIds)}
+        onClick={() => {
+          toggleModal();
+        }}
+      >
+        {__('Remediate')}
+      </Button>{' '}
       <Modal
         id="remediation-modal"
         appendTo={document.body}
@@ -85,7 +88,6 @@ RemediationModal.propTypes = {
   error: PropTypes.string,
   isAllSelected: PropTypes.bool,
   query: PropTypes.string,
-  isExperimentalMode: PropTypes.bool,
 };
 
 RemediationModal.defaultProps = {
@@ -95,7 +97,6 @@ RemediationModal.defaultProps = {
   error: null,
   isAllSelected: false,
   query: null,
-  isExperimentalMode: false,
 };
 
 export default RemediationModal;

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.scss

@@ -6,4 +6,18 @@
       margin-top: 5px;
     }
   }
+
+  // applies to the backdrop parent of the modal
+  @at-root .pf-c-backdrop {
+    width: calc(100% - 200px);
+    left: 200px;
+  }
+
+  // where the vertical nav breaks: https://github.com/theforeman/foreman/blob/3347fa49d500964f0209122d8d36c920d1feafcc/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss#L26
+  @media (max-width: 768px) {
+    @at-root .pf-c-backdrop {
+      width: 100%;
+      left: 0;
+    }
+  }
 }

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

@@ -9,7 +9,6 @@ import * as actions from './RemediationActions';
 import RemediationModal from './RemediationModal';
 import { REMEDIATIONS_API_KEY } from './RemediationTableConstants';
 import {
-  selectExperimental,
   selectIsAllSelected,
   selectSearch,
   selectSelectedIds,
@@ -24,7 +23,6 @@ const mapStateToProps = state => ({
   itemCount: selectAPIResponse(state, REMEDIATIONS_API_KEY).itemCount || 0,
   isAllSelected: selectIsAllSelected(state),
   query: selectSearch(state),
-  isExperimentalMode: selectExperimental(state),
 });
 
 // map action dispatchers to props

data/webpack/InsightsCloudSync/Components/ToolbarDropdown.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+
+const ToolbarDropdown = ({ onRecommendationSync }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownItems = [
+    <DropdownItem
+      key="recommendation-manual-sync"
+      onClick={onRecommendationSync}
+    >
+      {__('Sync recommendations')}
+    </DropdownItem>,
+  ];
+  return (
+    <Dropdown
+      className="title-dropdown"
+      onSelect={() => setIsDropdownOpen(false)}
+      toggle={<KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />}
+      isOpen={isDropdownOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+ToolbarDropdown.propTypes = {
+  onRecommendationSync: PropTypes.func.isRequired,
+};
+
+export default ToolbarDropdown;

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

@@ -4,10 +4,10 @@ exports[`InsightsHeader render 1`] = `
 <div
   className="insights-header"
 >
-  <Connect(InsightsSettings) />
-  <p>
-    Insights synchronization process is used to provide Insights
-             recommendations output for hosts managed here
-  </p>
+  <Text
+    component="p"
+  >
+    Insights synchronization process is used to provide Insights recommendations output for hosts managed here.
+  </Text>
 </div>
 `;

data/webpack/InsightsCloudSync/InsightsCloudSync.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
-import { translate as __ } from 'foremanReact/common/I18n';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
 import InsightsHeader from './Components/InsightsHeader';
 import { NoTokenEmptyState } from './Components/NoTokenEmptyState';
@@ -12,6 +10,9 @@ import {
   INSIGHTS_SEARCH_PROPS,
 } from './InsightsCloudSyncConstants';
 import './InsightsCloudSync.scss';
+import Pagination from './Components/InsightsTable/Pagination';
+import ToolbarDropdown from './Components/ToolbarDropdown';
+import InsightsSettings from './Components/InsightsSettings';
 
 const InsightsCloudSync = ({
   syncInsights,
@@ -26,24 +27,29 @@ const InsightsCloudSync = ({
       </PageLayout>
     );
   }
+
+  const onRecommendationSync = () => syncInsights(fetchInsights, query);
+  const toolbarButtons = (
+    <>
+      <span className="insights-toolbar-buttons">
+        <RemediationModal />
+        <ToolbarDropdown onRecommendationSync={onRecommendationSync} />
+      </span>
+      <span className="pull-right">
+        <Pagination variant="top" isCompact />
+      </span>
+    </>
+  );
+
   return (
     <div className="rh-cloud-insights">
+      <InsightsSettings />
       <PageLayout
         searchable
         searchProps={INSIGHTS_SEARCH_PROPS}
         onSearch={nextQuery => fetchInsights({ query: nextQuery, page: 1 })}
         header={INSIGHTS_SYNC_PAGE_TITLE}
-        toolbarButtons={
-          <>
-            <RemediationModal />
-            <Button
-              variant="secondary"
-              onClick={() => syncInsights(fetchInsights, query)}
-            >
-              {__('Start recommendations sync')}
-            </Button>
-          </>
-        }
+        toolbarButtons={toolbarButtons}
         searchQuery={query}
         beforeToolbarComponent={<InsightsHeader />}
       >

data/webpack/InsightsCloudSync/InsightsCloudSync.scss

@@ -1,5 +1,85 @@
 .rh-cloud-insights {
-  .btn-toolbar {
-    display: inherit;
+  #main {
+    padding: 4px;
+
+    #breadcrumb .form-group {
+      margin-bottom: 0;
+
+      h1 {
+        font-family: 'RedHatDisplay';
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
+    }
+
+    .title_filter {
+      width: 520px;
+    }
+
+    #title_action {
+      width: calc(100% - 520px);
+    }
+
+    @media (max-width: 1138px) {
+      #title_action {
+        width: 70%;
+      }
+    }
+
+    .search-bar {
+      // Giving pf3 search bar a pf4 look
+      width: 500px;
+      .search-bar {
+        display: block;
+      }
+      .input-group {
+        display: table;
+      }
+      .input-group-btn {
+        .btn-group {
+          z-index: unset; // so the bookmarks drop down will be above other search boxes
+        }
+        .autocomplete-search-btn {
+          display: none;
+        }
+        .dropdown-toggle {
+          font-size: 16px;
+          background-color: white;
+          background-image: none;
+          padding-bottom: 4px;
+          padding-top: 4px;
+        }
+        .scrollable-dropdown {
+          max-width: 250px;
+        }
+      }
+      li {
+        font-size: 16px;
+      }
+      input {
+        font-size: 16px;
+        height: 36px;
+      }
+      .foreman-autocomplete .autocomplete-focus-shortcut {
+        top: 8px;
+        font-size: 16px;
+      }
+      .foreman-autocomplete .autocomplete-aux {
+        top: 8px;
+        font-size: 16px;
+        .autocomplete-clear-button {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .btn-toolbar {
+      display: inherit;
+      width: 100%;
+    }
+
+    .pf-c-pagination {
+      padding-right: 0;
+    }
   }
 }

data/webpack/InsightsCloudSync/__snapshots__/InsightsCloudSync.test.js.snap

@@ -4,6 +4,7 @@ exports[`InsightsCloudSync render 1`] = `
 <div
   className="rh-cloud-insights"
 >
+  <Connect(InsightsSettings) />
   <PageLayout
     beforeToolbarComponent={<InsightsHeader />}
     header="Red Hat Insights"
@@ -28,13 +29,22 @@ exports[`InsightsCloudSync render 1`] = `
     searchable={true}
     toolbarButtons={
       <React.Fragment>
-        <UNDEFINED />
-        <Button
-          onClick={[Function]}
-          variant="secondary"
+        <span
+          className="insights-toolbar-buttons"
         >
-          Start recommendations sync
-        </Button>
+          <UNDEFINED />
+          <ToolbarDropdown
+            onRecommendationSync={[Function]}
+          />
+        </span>
+        <span
+          className="pull-right"
+        >
+          <Pagination
+            isCompact={true}
+            variant="top"
+          />
+        </span>
       </React.Fragment>
     }
   >