foreman_rh_cloud 4.0.24 → 4.0.26

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>
     }
   >

data/webpack/InsightsHostDetailsTab/InsightsTab.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { orderBy } from 'lodash';
 import { Grid, ListView } from 'patternfly-react';
 import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
 import ListItem from './components/ListItem';
 import './InsightsTab.scss';
 
@@ -16,7 +17,7 @@ class InsightsHostDetailsTab extends React.Component {
     const { hits } = this.props;
 
     if (!hits.length) {
-      return <h2>No recommendations were found for this host!</h2>;
+      return <h2>{__('No recommendations were found for this host!')}</h2>;
     }
     const hitsSorted = orderBy(hits, ['total_risk'], ['desc']);
     const items = hitsSorted.map(
@@ -42,7 +43,7 @@ class InsightsHostDetailsTab extends React.Component {
       <div id="host_details_insights_tab">
         <Grid.Row>
           <Grid.Col xs={12}>
-            <h2>Recommendations</h2>
+            <h2>{__('Recommendations')}</h2>
             <ListView id="hits_list">{items}</ListView>
           </Grid.Col>
         </Grid.Row>

data/webpack/InsightsHostDetailsTab/InsightsTab.scss

@@ -48,19 +48,19 @@
           padding: 5px 8px;
           border-radius: 12px;
 
-          &.Low {
+          &.risk-1 {
             background-color: #e7f1fa;
           }
 
-          &.Moderate {
+          &.risk-2 {
             background-color: #fdf7e7;
           }
 
-          &.Important {
+          &.risk-3 {
             background-color: #f9dddd;
           }
 
-          &.Critical {
+          &.risk-4 {
             background-color: #ffecec;
           }
 

data/webpack/InsightsHostDetailsTab/components/ListItem/ListItem.js

@@ -1,12 +1,13 @@
 import React, { Fragment } from 'react';
 import { ListView, Icon } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 const labelMapper = {
-  1: 'Low',
-  2: 'Moderate',
-  3: 'Important',
-  4: 'Critical',
+  1: __('Low'),
+  2: __('Moderate'),
+  3: __('Important'),
+  4: __('Critical'),
 };
 
 const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
@@ -18,7 +19,7 @@ const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
 
   const riskLabel = labelMapper[totalRisk];
   const additionalInfo = [
-    <span key={`risk-info-${title}`} className={`risk-label ${riskLabel}`}>
+    <span key={`risk-info-${title}`} className={`risk-label risk-${totalRisk}`}>
       <p>{riskLabel}</p>
     </span>,
   ];
@@ -26,7 +27,7 @@ const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
   const knowledgebaseLink = solutionUrl && (
     <p>
       <a href={solutionUrl} target="_blank" rel="noopener noreferrer">
-        Knowledgebase article <Icon name="external-link" />
+        {__('Knowledgebase article')} <Icon name="external-link" />
       </a>
     </p>
   );
@@ -34,7 +35,8 @@ const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
   const insightsCloudLink = resultsUrl && (
     <p>
       <a href={resultsUrl} target="_blank" rel="noopener noreferrer">
-        Read more about it in RH cloud insights <Icon name="external-link" />
+        {__('Read more about it in RH cloud insights')}{' '}
+        <Icon name="external-link" />
       </a>
     </p>
   );

data/webpack/common/Switcher/HelpLabel.js

@@ -11,7 +11,7 @@ export const HelpLabel = ({ text, id, className }) => {
         onClick={e => e.preventDefault()}
         className={`pf-c-form__group-label-help ${className}`}
       >
-        <HelpIcon noVerticalAlign />
+        <HelpIcon />
       </button>
     </Popover>
   );