katello 3.15.1 → 3.16.0.rc2.1

data/package.json

@@ -10,8 +10,8 @@
     "test:current": "jest webpack --watch",
     "format": "prettier --single-quote --trailing-comma es5 --write 'webpack/**/*.js'",
     "build": "npm run format && npm run lint",
-    "lint": "eslint webpack/",
-    "lint:fix": "eslint --fix webpack/",
+    "lint": "npx eslint webpack/",
+    "lint:fix": "npx eslint --fix webpack/",
     "lint:test": "npm run lint && npm test",
     "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
   },
@@ -24,10 +24,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.0",
+    "@sheerun/mutationobserver-shim": "^0.3.3",
     "@storybook/react": "^3.2.17",
     "@storybook/storybook-deployer": "^2.0.0",
-    "@theforeman/builder": "^4.0.2",
-    "@theforeman/vendor-dev": "^3.8.0",
+    "@testing-library/jest-dom": "^5.3.0",
+    "@testing-library/react": "^10.0.2",
+    "@theforeman/builder": "^4.2.0",
+    "@theforeman/vendor-dev": "^4.2.0",
     "axios-mock-adapter": "^1.10.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
@@ -47,51 +50,22 @@
     "eslint-plugin-react": "^7.4.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
+    "nock": "^12.0.3",
     "prettier": "^1.7.4",
     "react-redux-test-utils": "^0.1.1",
     "react-test-renderer": "^16.0.0",
     "redux-mock-store": "^1.3.0"
   },
+  "_comment": "We don't include @theforeman/vendor because it's assumed to be present in Foreman",
   "dependencies": {
-    "angular": "1.5.5",
+    "@patternfly/react-icons": "^3.15.15",
+    "@patternfly/react-tokens": "^2.8.13",
+    "angular": "1.7.9",
     "bootstrap-select": "1.12.4",
     "downshift": "^1.28.0",
     "jed": "^1.1.1",
     "ngreact": "^0.5.0",
     "query-string": "^6.1.0",
-    "react-bootstrap": "^0.32.1",
-    "react-helmet": "^5.2.0"
-  },
-  "peerDependencies": {
-    "@theforeman/vendor": ">= 3.8.0"
-  },
-  "jest": {
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "webpack/**/*.js",
-      "!webpack/**/bundle*"
-    ],
-    "coverageReporters": [
-      "lcov"
-    ],
-    "testURL": "http://localhost/",
-    "setupFiles": [
-      "raf/polyfill",
-      "./webpack/test_setup.js"
-    ],
-    "setupTestFrameworkScriptFile": "./webpack/global_test_setup.js",
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/foreman/",
-      "<rootDir>/.+fixtures.+",
-      "<rootDir>/engines"
-    ],
-    "moduleDirectories": [
-      "node_modules/@theforeman/vendor-core/node_modules",
-      "node_modules"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.(css|scss)$": "identity-obj-proxy"
-    }
+    "react-bootstrap": "^0.32.1"
   }
 }

data/webpack/__mocks__/foremanReact/components/{BreadcrumbBar.js → BreadcrumbBar/index.js}

@@ -1,3 +1,2 @@
-
 const BreadcrumbsBar = () => jest.fn();
 export default BreadcrumbsBar;

data/webpack/__mocks__/react-intl/index.js

@@ -0,0 +1,3 @@
+export const addLocaleData = jest.fn();
+export const FormattedRelative = jest.fn();
+export const intlShape = jest.fn();

data/webpack/__mocks__/react-intl/locale-data/en.js

@@ -0,0 +1 @@
+export default {};

data/webpack/containers/Application/config.js

@@ -9,6 +9,7 @@ import ModuleStreams from '../../scenes/ModuleStreams';
 import ModuleStreamDetails from '../../scenes/ModuleStreams/Details';
 import AnsibleCollections from '../../scenes/AnsibleCollections';
 import AnsibleCollectionDetails from '../../scenes/AnsibleCollections/Details';
+import ContentViews from '../../scenes/ContentViews';
 import withHeader from './withHeaders';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -50,4 +51,8 @@ export const links = [
     path: 'ansible_collections/:id([0-9]+)',
     component: withHeader(AnsibleCollectionDetails, { title: __('Ansible Collection Details') }),
   },
+  {
+    path: 'labs/content_views',
+    component: withHeader(ContentViews, { title: __('Content Views') }),
+  },
 ];

data/webpack/containers/Application/overrides.scss

@@ -19,6 +19,14 @@ td, th {
   word-wrap: break-word;
 }
 
+// needed because we have overflow set to auto for all td's and it affected the pf4 table
+.katello-pf4-table {
+  td {
+    max-width: 200px;
+    overflow: unset;
+    word-wrap: break-word;
+  }
+}
 // override foreman's .editable styles, that are conflicting with the patternfly ones
 .pf-table-inline-edit {
   .editable {

data/webpack/mockRequest.js

@@ -30,3 +30,4 @@ export const mockErrorRequest = ({
 });
 
 export const mockReset = () => mock.reset();
+

data/webpack/move_to_foreman/common/helpers.js

@@ -69,9 +69,10 @@ export const apiResponse = (actionType, result, additionalData = {}) => (dispatc
 
 export const sendErrorNotifications = messages => (dispatch) => {
   messages.forEach((msg) => {
+    const message = typeof msg === 'string' ? msg : `${msg.message}: ${msg.details}`;
     dispatch(addToast({
       type: 'error',
-      message: msg,
+      message,
       sticky: true,
     }));
   });

data/webpack/move_to_foreman/components/common/table/components/__snapshots__/Table.test.js.snap

@@ -139,6 +139,7 @@ exports[`Table renders Table with pagination 1`] = `
   </TablePfProvider>
   <PaginationWrapper
     itemCount={2}
+    onChange={[Function]}
     pagination={
       Object {
         "page": 1,

data/webpack/scenes/AnsibleCollections/Details/AnsibleCollectionDetailsActions.js

@@ -1,4 +1,4 @@
-import api from '../../../services/api';
+import api, { orgId } from '../../../services/api';
 import {
   ANSIBLE_COLLECTION_DETAILS_ERROR,
   ANSIBLE_COLLECTION_DETAILS_REQUEST,
@@ -10,7 +10,7 @@ export const getAnsibleCollectionDetails = ansibleCollectionId => async (dispatc
   dispatch({ type: ANSIBLE_COLLECTION_DETAILS_REQUEST });
 
   try {
-    const { data } = await api.get(`/ansible_collections/${ansibleCollectionId}`);
+    const { data } = await api.get(`/ansible_collections/${ansibleCollectionId}`, {}, { organization_id: orgId() });
     return dispatch({
       type: ANSIBLE_COLLECTION_DETAILS_SUCCESS,
       response: data,

data/webpack/scenes/AnsibleCollections/Details/__tests__/__snapshots__/AnsibleCollectionDetailsActions.test.js.snap

@@ -36,6 +36,10 @@ exports[`Ansible Collection details actions should load ansible collection detai
 Array [
   Array [
     "/ansible_collections/1",
+    Object {},
+    Object {
+      "organization_id": undefined,
+    },
   ],
 ]
 `;

data/webpack/scenes/ContentViews/ContentViewSelectors.js

@@ -0,0 +1,13 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import CONTENT_VIEWS_KEY from './ContentViewsConstants';
+
+export const selectContentViews = state =>
+  selectAPIResponse(state, CONTENT_VIEWS_KEY).results || [];
+
+export const selectContentViewStatus = state => selectAPIStatus(state, CONTENT_VIEWS_KEY);
+
+export const selectContentViewError = state => selectAPIError(state, CONTENT_VIEWS_KEY);

data/webpack/scenes/ContentViews/ContentViewsActions.js

@@ -0,0 +1,18 @@
+import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import api, { orgId } from '../../services/api';
+import CONTENT_VIEWS_KEY from './ContentViewsConstants';
+
+
+const createContentViewsParams = () => ({
+  organization_id: orgId(),
+  nondefault: true,
+});
+
+const getContentViews = () => get({
+  type: API_OPERATIONS.GET,
+  key: CONTENT_VIEWS_KEY,
+  url: api.getApiUrl('/content_views'),
+  params: createContentViewsParams(),
+});
+
+export default getContentViews;

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -0,0 +1,3 @@
+const CONTENT_VIEWS_KEY = 'contentViews';
+
+export default CONTENT_VIEWS_KEY;

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useSelector, useDispatch } from 'react-redux';
+import getContentViews from './ContentViewsActions';
+import { selectContentViews,
+  selectContentViewStatus,
+  selectContentViewError } from './ContentViewSelectors';
+
+import ContentViewsTable from './Table/ContentViewsTable';
+
+const ContentViewsPage = () => {
+  const items = useSelector(selectContentViews);
+  const status = useSelector(selectContentViewStatus);
+  const error = useSelector(selectContentViewError);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getContentViews());
+  }, []);
+
+  return (
+    <React.Fragment>
+      <h1>{__('Content Views')}</h1>
+      <ContentViewsTable {...{ items, status, error }} />
+    </React.Fragment>
+  );
+};
+
+export default ContentViewsPage;

data/webpack/scenes/ContentViews/Table/ContentViewsTable.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+
+import TableWrapper from './TableWrapper';
+import tableDataGenerator from './tableDataGenerator';
+import actionResolver from './actionResolver';
+
+const ContentViewTable = ({
+  items, status, error,
+}) => {
+  const [table, setTable] = useState({ rows: [], columns: [] });
+  const [rowMapping, setRowMapping] = useState({});
+  const loading = status === STATUS.PENDING;
+
+  useEffect(
+    () => {
+      if (!loading && items && items.length > 0) {
+        const { updatedRowMapping, ...tableData } = tableDataGenerator(
+          items,
+          rowMapping,
+        );
+        setTable(tableData);
+        setRowMapping(updatedRowMapping);
+      }
+    },
+    [items, JSON.stringify(rowMapping)], // use JSON to check obj values eq not reference eq
+  );
+
+  const cvIdFromRow = (rowIdx) => {
+    const entry = Object.entries(rowMapping).find(item => item[1].rowIndex === rowIdx);
+    if (entry) return parseInt(entry[0], 10);
+    return null;
+  };
+
+  const onSelect = (event, isSelected, rowId) => {
+    let rows;
+    if (rowId === -1) {
+      rows = table.rows.map(row => ({ ...row, selected: isSelected }));
+    } else {
+      rows = [...table.rows];
+      rows[rowId].selected = isSelected;
+    }
+
+    setTable(prevTable => ({ ...prevTable, rows }));
+  };
+
+  const onExpand = (_event, rowIndex, colIndex, isOpen) => {
+    const { rows } = table;
+    const contentViewId = cvIdFromRow(rowIndex);
+    // adjust for the selection checkbox cell being counted in the index
+    const adjustedColIndex = colIndex - 1;
+
+    if (!isOpen) {
+      setRowMapping((prev) => {
+        const updatedMap = { ...prev[contentViewId], expandedColumn: adjustedColIndex };
+        return { ...prev, [contentViewId]: updatedMap };
+      });
+    } else {
+      // remove the row completely by assigning it to a throwaway variable
+      // eslint-disable-next-line camelcase, no-unused-vars
+      const { [contentViewId]: _throwaway, ...newMap } = rowMapping;
+      setRowMapping(newMap);
+    }
+
+    setTable(prevTable => ({ ...prevTable, rows }));
+  };
+
+  const emptyTitle = __("You currently don't have any Content Views.");
+  const emptyBody = __('A Content View can be added by using the "New content view" button below.');
+
+  const { rows, columns } = table;
+  return (
+    <TableWrapper
+      rows={rows}
+      cells={columns}
+      status={status}
+      emptyTitle={emptyTitle}
+      emptyBody={emptyBody}
+      onSelect={onSelect}
+      canSelectAll={false}
+      onExpand={onExpand}
+      actionResolver={actionResolver}
+      error={error}
+    />
+  );
+};
+
+ContentViewTable.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+  status: PropTypes.string.isRequired,
+  error: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.string,
+  ]),
+};
+
+ContentViewTable.defaultProps = {
+  error: null,
+  items: [],
+};
+
+export default ContentViewTable;

data/webpack/scenes/ContentViews/Table/TableWrapper.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+
+import EmptyStateMessage from '../components/EmptyStateMessage';
+import Loading from '../components/Loading';
+
+const TableWrapper = ({
+  status, cells, rows, error, emptyTitle, emptyBody, ...extraTableProps
+}) => {
+  if (status === STATUS.PENDING) return (<Loading />);
+  // Can we display the error message?
+  if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
+  // Can we prevent flash of empty row message while rows are loading with data?
+  if (status === STATUS.RESOLVED && rows.length === 0) {
+    return (<EmptyStateMessage title={emptyTitle} body={emptyBody} />);
+  }
+
+  const tableProps = { cells, rows, ...extraTableProps };
+  return (
+    <Table
+      aria-label="Content View Table"
+      className="katello-pf4-table"
+      {...tableProps}
+    >
+      <TableHeader />
+      <TableBody />
+    </Table>
+  );
+};
+
+TableWrapper.propTypes = {
+  status: PropTypes.string.isRequired,
+  cells: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.string])).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  error: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.string,
+  ]),
+  emptyBody: PropTypes.string.isRequired,
+  emptyTitle: PropTypes.string.isRequired,
+};
+
+TableWrapper.defaultProps = {
+  error: null,
+};
+
+export default TableWrapper;

data/webpack/scenes/ContentViews/Table/actionResolver.js

@@ -0,0 +1,28 @@
+const actionResolver = (rowData, { _rowIndex }) => {
+  // don't show actions for the expanded parts
+  if (rowData.parent || rowData.compoundParent || rowData.noactions) return null;
+
+  // printing to the console for now until these are hooked up
+  /* eslint-disable no-console */
+  return [
+    {
+      title: 'Publish and Promote',
+      onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+    },
+    {
+      title: 'Promote',
+      onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+    },
+    {
+      title: 'Copy',
+      onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+    },
+    {
+      title: 'Delete',
+      onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+    },
+  ];
+  /* eslint-enable no-console */
+};
+
+export default actionResolver;

data/webpack/scenes/ContentViews/Table/index.js

@@ -0,0 +1,3 @@
+import ContentViewTable from './ContentViewTable';
+
+export default ContentViewTable;