foreman_rh_cloud 3.0.14 → 3.0.15

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

@@ -0,0 +1 @@
+@import '~@redhat-cloud-services/frontend-components/index.css';

data/webpack/InsightsCloudSync/Components/NoTokenEmptyState.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Button,
+  TextInput,
+  FormGroup,
+  GridItem,
+  Grid,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  EmptyStateBody,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon, RocketIcon } from '@patternfly/react-icons';
+import { post } from 'foremanReact/redux/API';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { INSIGHTS_SAVE_AND_SYNC_PATH } from '../InsightsCloudSyncConstants';
+import { INSIGHTS_HITS_API_KEY } from './InsightsTable/InsightsTableConstants';
+
+export const NoTokenEmptyState = () => {
+  const [token, setToken] = useState('');
+  const dispatch = useDispatch();
+  const onSave = () => {
+    dispatch(
+      post({
+        key: INSIGHTS_HITS_API_KEY,
+        url: INSIGHTS_SAVE_AND_SYNC_PATH,
+        params: { value: token },
+      })
+    );
+  };
+  return (
+    <EmptyState variant={EmptyStateVariant.xl}>
+      <EmptyStateIcon icon={RocketIcon} />
+      <EmptyStateBody>
+        <p>
+          {__(`Insights synchronization process is used to provide Insights
+               recommendations output for hosts managed here`)}
+        </p>
+        <p>
+          {__(
+            `To use recommendations please add a token to 'Red Hat Cloud token' setting here or in the settings page`
+          )}
+          <br />
+          {__(`You can obtain a Red Hat API token here: `)}
+          <a
+            href="https://access.redhat.com/management/api"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            access.redhat.com <ExternalLinkAltIcon />
+          </a>
+          <br />
+        </p>
+
+        <br />
+        <FormGroup
+          label={__('Red Hat Cloud token:')}
+          fieldId="input-cloud-token"
+        >
+          <Grid>
+            <GridItem span={3} />
+            <GridItem span={6}>
+              <TextInput
+                value={token}
+                type="password"
+                onChange={newValue => setToken(newValue)}
+                aria-label="input-cloud-token"
+              />
+            </GridItem>
+          </Grid>
+        </FormGroup>
+      </EmptyStateBody>
+      <Button variant="primary" onClick={onSave} isDisabled={!token.length}>
+        {__('Save setting and sync recommendations')}
+      </Button>
+    </EmptyState>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import InsightsHeader from '../InsightsHeader';
+
+const fixtures = {
+  render: {},
+};
+
+describe('InsightsHeader', () =>
+  testComponentSnapshotsWithFixtures(InsightsHeader, fixtures));

data/webpack/InsightsCloudSync/Components/__tests__/NoTokenEmptyState.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from '@theforeman/test';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+
+import { NoTokenEmptyState } from '../NoTokenEmptyState';
+
+const mockStore = configureMockStore();
+const store = mockStore({});
+describe('NoTokenEmptyState', () => {
+  it('render', () => {
+    const component = mount(
+      <Provider store={store}>
+        <NoTokenEmptyState />
+      </Provider>
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+</div>
+`;

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

@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoTokenEmptyState render 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <NoTokenEmptyState>
+    <EmptyState
+      variant="xl"
+    >
+      <div
+        className="pf-c-empty-state pf-m-xl"
+      >
+        <div
+          className="pf-c-empty-state__content"
+        >
+          <EmptyStateIcon
+            icon={[Function]}
+          >
+            <RocketIcon
+              aria-hidden="true"
+              className="pf-c-empty-state__icon"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+            >
+              <svg
+                aria-hidden="true"
+                aria-labelledby={null}
+                className="pf-c-empty-state__icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z"
+                />
+              </svg>
+            </RocketIcon>
+          </EmptyStateIcon>
+          <EmptyStateBody>
+            <div
+              className="pf-c-empty-state__body"
+            >
+              <p>
+                Insights synchronization process is used to provide Insights
+               recommendations output for hosts managed here
+              </p>
+              <p>
+                To use recommendations please add a token to 'Red Hat Cloud token' setting here or in the settings page
+                <br />
+                You can obtain a Red Hat API token here: 
+                <a
+                  href="https://access.redhat.com/management/api"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  access.redhat.com 
+                  <ExternalLinkAltIcon
+                    color="currentColor"
+                    noVerticalAlign={false}
+                    size="sm"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style={
+                        Object {
+                          "verticalAlign": "-0.125em",
+                        }
+                      }
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+                      />
+                    </svg>
+                  </ExternalLinkAltIcon>
+                </a>
+                <br />
+              </p>
+              <br />
+              <FormGroup
+                fieldId="input-cloud-token"
+                label="Red Hat Cloud token:"
+              >
+                <div
+                  className="pf-c-form__group"
+                >
+                  <div
+                    className="pf-c-form__group-label"
+                  >
+                    <label
+                      className="pf-c-form__label"
+                      htmlFor="input-cloud-token"
+                    >
+                      <span
+                        className="pf-c-form__label-text"
+                      >
+                        Red Hat Cloud token:
+                      </span>
+                    </label>
+                     
+                  </div>
+                  <div
+                    className="pf-c-form__group-control"
+                  >
+                    <Grid>
+                      <div
+                        className="pf-l-grid"
+                      >
+                        <GridItem
+                          span={3}
+                        >
+                          <div
+                            className="pf-l-grid__item pf-m-3-col"
+                          />
+                        </GridItem>
+                        <GridItem
+                          span={6}
+                        >
+                          <div
+                            className="pf-l-grid__item pf-m-6-col"
+                          >
+                            <TextInput
+                              aria-label="input-cloud-token"
+                              onChange={[Function]}
+                              type="password"
+                              value=""
+                            >
+                              <TextInputBase
+                                aria-label="input-cloud-token"
+                                className=""
+                                innerRef={null}
+                                isDisabled={false}
+                                isLeftTruncated={false}
+                                isReadOnly={false}
+                                isRequired={false}
+                                onChange={[Function]}
+                                type="password"
+                                validated="default"
+                                value=""
+                              >
+                                <input
+                                  aria-invalid={false}
+                                  aria-label="input-cloud-token"
+                                  className="pf-c-form-control"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  readOnly={false}
+                                  required={false}
+                                  type="password"
+                                  value=""
+                                />
+                              </TextInputBase>
+                            </TextInput>
+                          </div>
+                        </GridItem>
+                      </div>
+                    </Grid>
+                  </div>
+                </div>
+              </FormGroup>
+            </div>
+          </EmptyStateBody>
+          <Button
+            isDisabled={true}
+            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}
+              onClick={[Function]}
+              role={null}
+              tabIndex={null}
+              type="button"
+            >
+              Save setting and sync recommendations
+            </button>
+          </Button>
+        </div>
+      </div>
+    </EmptyState>
+  </NoTokenEmptyState>
+</Provider>
+`;

data/webpack/InsightsCloudSync/InsightsCloudSync.js

@@ -1,57 +1,58 @@
 import React from 'react';
-import { IntlProvider } from 'react-intl';
+import { Button } from 'patternfly-react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Button, Icon } from 'patternfly-react';
-import { INSIGHTS_SYNC_PAGE_TITLE } from './InsightsCloudSyncConstants';
-import InsightsSettings from './Components/InsightsSettings';
+import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
+import InsightsHeader from './Components/InsightsHeader';
+import { NoTokenEmptyState } from './Components/NoTokenEmptyState';
+import InsightsTable from './Components/InsightsTable';
+import {
+  INSIGHTS_SYNC_PAGE_TITLE,
+  INSIGHTS_SEARCH_PROPS,
+} from './InsightsCloudSyncConstants';
 
-const InsightsCloudSync = ({ settingsUrl, syncInsights }) => {
-  document.title = INSIGHTS_SYNC_PAGE_TITLE;
+const InsightsCloudSync = ({
+  syncInsights,
+  query,
+  fetchInsights,
+  hasToken,
+}) => {
+  if (!hasToken) {
+    return (
+      <PageLayout header={INSIGHTS_SYNC_PAGE_TITLE} searchable={false}>
+        <NoTokenEmptyState />
+      </PageLayout>
+    );
+  }
   return (
-    <IntlProvider locale={navigator.language}>
-      <div className="insights-cloud-sync">
-        <h1>{__('Red Hat Insights Sync')}</h1>
-        <div className="insights-cloud-sync-body">
-          <InsightsSettings />
-          <p>
-            {__(`Insights synchronization process is used to provide Insights
-             recommendations output for hosts managed here`)}
-          </p>
-          <p>
-            {__(`1. Obtain an Red Hat API token: `)}
-            <a
-              href="https://access.redhat.com/management/api"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              access.redhat.com <Icon name="external-link" size="xs" />
-            </a>
-            <br />
-            {__("2. Copy the token to 'Red Hat Cloud token' setting: ")}
-            <a href={settingsUrl} target="_blank" rel="noopener noreferrer">
-              {__('Red Hat Cloud token ')}
-              <Icon name="external-link" size="xs" />
-            </a>
-            <br />
-            {__(
-              '3. Now you can synchronize recommendations manually using the "Sync now" button.'
-            )}
-          </p>
-          <div>
-            <Button bsStyle="primary" onClick={syncInsights}>
-              {__('Sync now')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </IntlProvider>
+    <PageLayout
+      searchable
+      searchProps={INSIGHTS_SEARCH_PROPS}
+      onSearch={nextQuery => fetchInsights({ query: nextQuery, page: 1 })}
+      header={INSIGHTS_SYNC_PAGE_TITLE}
+      toolbarButtons={
+        <Button bsStyle="primary" onClick={syncInsights}>
+          {__('Sync now')}
+        </Button>
+      }
+      searchQuery={query}
+      beforeToolbarComponent={<InsightsHeader />}
+    >
+      <InsightsTable />
+    </PageLayout>
   );
 };
 
 InsightsCloudSync.propTypes = {
   syncInsights: PropTypes.func.isRequired,
-  settingsUrl: PropTypes.string.isRequired,
+  fetchInsights: PropTypes.func.isRequired,
+  query: PropTypes.string,
+  hasToken: PropTypes.bool,
+};
+
+InsightsCloudSync.defaultProps = {
+  query: '',
+  hasToken: true,
 };
 
 export default InsightsCloudSync;