foreman_rh_cloud 4.0.25 → 5.0.28

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, paginationTitles } from './InsightsTableConstants';
+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,22 +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)}
-        titles={paginationTitles}
-      />
+      <Pagination variant="bottom" />
     </React.Fragment>
   );
 };
@@ -95,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,12 +41,12 @@ 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],
   },

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/__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],
           ],
@@ -60,7 +60,10 @@ exports[`InsightsTable rendering render with Props 1`] = `
     dropdownPosition="right"
     expandId="expandable-toggle"
     gridBreakPoint="grid-md"
+    isHeaderSelectDisabled={false}
+    isNested={false}
     isStickyHeader={false}
+    isTreeTable={false}
     onSelect={[Function]}
     onSort={[Function]}
     ouiaSafe={true}
@@ -74,82 +77,17 @@ exports[`InsightsTable rendering render with Props 1`] = `
         "index": 3,
       }
     }
-    variant={null}
+    variant="compact"
   >
     <TableHeader />
-    <Component />
+    <TableBody />
   </Table>
   <TableEmptyState
     error={null}
     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": "items",
-        "itemsPerPage": "Items per page",
-        "optionsToggle": "Items per page",
-        "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/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/Components/__tests__/__snapshots__/NoTokenEmptyState.test.js.snap

@@ -157,6 +157,7 @@ exports[`NoTokenEmptyState render 1`] = `
                                 isReadOnly={false}
                                 isRequired={false}
                                 onChange={[Function]}
+                                ouiaSafe={true}
                                 type="password"
                                 validated="default"
                                 value=""
@@ -165,6 +166,9 @@ exports[`NoTokenEmptyState render 1`] = `
                                   aria-invalid={false}
                                   aria-label="input-cloud-token"
                                   className="pf-c-form-control"
+                                  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                                  data-ouia-component-type="PF4/TextInput"
+                                  data-ouia-safe={true}
                                   disabled={false}
                                   onBlur={[Function]}
                                   onChange={[Function]}
@@ -190,21 +194,28 @@ exports[`NoTokenEmptyState render 1`] = `
             onClick={[Function]}
             variant="primary"
           >
-            <button
-              aria-disabled={true}
-              aria-label={null}
-              className="pf-c-button pf-m-primary pf-m-disabled"
-              data-ouia-component-id="OUIA-Generated-Button-primary-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={true}
+            <ButtonBase
+              innerRef={null}
+              isDisabled={true}
               onClick={[Function]}
-              role={null}
-              tabIndex={null}
-              type="button"
+              variant="primary"
             >
-              Save setting and sync recommendations
-            </button>
+              <button
+                aria-disabled={true}
+                aria-label={null}
+                className="pf-c-button pf-m-primary pf-m-disabled"
+                data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={true}
+                onClick={[Function]}
+                role={null}
+                tabIndex={null}
+                type="button"
+              >
+                Save setting and sync recommendations
+              </button>
+            </ButtonBase>
           </Button>
         </div>
       </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>
+          <Memo(Connect(RemediationModal)) />
+          <ToolbarDropdown
+            onRecommendationSync={[Function]}
+          />
+        </span>
+        <span
+          className="pull-right"
+        >
+          <Pagination
+            isCompact={true}
+            variant="top"
+          />
+        </span>
       </React.Fragment>
     }
   >