katello 3.16.2 → 3.17.0.rc1

data/webpack/scenes/ContentViews/Details/ContentViewInfo.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Flex,
+  FlexItem,
+  TextContent,
+  TextList,
+  TextListVariants,
+  TextListItem,
+  TextListItemVariants,
+} from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { updateContentView } from './ContentViewDetailActions';
+import { selectIsCVUpdating } from './ContentViewDetailSelectors';
+import Loading from '../../../components/Loading';
+import ContentViewIcon from '../components/ContentViewIcon';
+import ActionableDetail from '../../../components/ActionableDetail';
+import './contentViewInfo.scss';
+
+const ContentViewInfo = ({ cvId, details }) => {
+  const dispatch = useDispatch();
+  const updating = useSelector(state => selectIsCVUpdating(state));
+  const {
+    name,
+    label,
+    description,
+    composite,
+    solve_dependencies: solveDependencies,
+    auto_publish: autoPublish,
+  } = details;
+
+  const autoPublishTooltip = __('Applicable only for composite views. Auto publish composite ' +
+    'view when a new version of a component content view is created. Also note auto publish will ' +
+    'only happen when the component is marked "latest".');
+
+  const solveDependenciesTooltip = __('This option will solve RPM and Module Stream dependencies ' +
+    'on every publish of this Content View. Dependency solving significantly increases publish ' +
+    'time (publishes can take over three times as long) and filters will be ignored when adding ' +
+    'packages to solve dependencies. Also, certain scenarios involving errata may still cause ' +
+    'dependency errors.');
+
+
+  if (updating) return <Loading size="sm" showText={false} />;
+  const onEdit = (val, attribute) => dispatch(updateContentView(cvId, { [attribute]: val }));
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <ActionableDetail
+          label={__('Name')}
+          attribute="name"
+          onEdit={onEdit}
+          value={name}
+        />
+        <TextListItem component={TextListItemVariants.dt}>
+          {__('Label')}
+        </TextListItem>
+        <TextListItem
+          aria-label="label text value"
+          component={TextListItemVariants.dd}
+          className="foreman-spaced-list"
+        >
+          {label}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dt}>
+          {__('Type')}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
+          <Flex>
+            <FlexItem spacer={{ default: 'spacerXs' }}><ContentViewIcon composite={composite} /></FlexItem>
+            <FlexItem>{ composite ? 'Composite' : 'Component' }</FlexItem>
+          </Flex>
+        </TextListItem>
+        <ActionableDetail
+          textArea
+          label={__('Description')}
+          attribute="description"
+          onEdit={onEdit}
+          value={description}
+        />
+        {composite ?
+          (<ActionableDetail
+            label={__('Autopublish')}
+            attribute="auto_publish"
+            value={autoPublish}
+            onEdit={onEdit}
+            tooltip={autoPublishTooltip}
+            boolean
+          />) :
+          (<ActionableDetail
+            label={__('Solve dependencies')}
+            attribute="solve_dependencies"
+            value={solveDependencies}
+            onEdit={onEdit}
+            tooltip={solveDependenciesTooltip}
+            boolean
+          />)}
+      </TextList>
+    </TextContent>
+  );
+};
+
+ContentViewInfo.propTypes = {
+  cvId: PropTypes.number.isRequired,
+  details: PropTypes.shape({
+    name: PropTypes.string,
+    label: PropTypes.string,
+    description: PropTypes.string,
+    composite: PropTypes.bool,
+    solve_dependencies: PropTypes.bool,
+    auto_publish: PropTypes.bool,
+  }).isRequired,
+};
+
+export default ContentViewInfo;

data/webpack/scenes/ContentViews/{details → Details}/DetailsContainer.js

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import PropTypes from 'prop-types';
 import { STATUS } from 'foremanReact/constants';
-import EmptyStateMessage from '../components/EmptyStateMessage';
-import Loading from '../components/Loading';
+import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
+import Loading from '../../../components/Loading';
 import getContentViewDetails from './ContentViewDetailActions';
 import { selectCVDetails,
   selectCVDetailStatus,
@@ -21,7 +21,7 @@ const DetailsContainer = ({ children, cvId, isOpen }) => {
     }
   });
 
-  if (status === STATUS.PENDING) return (<Loading size="sm" />);
+  if (status === STATUS.PENDING) return (<Loading />);
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
   return (<React.Fragment>{children}</React.Fragment>);
 };
@@ -29,7 +29,11 @@ const DetailsContainer = ({ children, cvId, isOpen }) => {
 DetailsContainer.propTypes = {
   children: PropTypes.element.isRequired,
   cvId: PropTypes.number.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool,
+};
+
+DetailsContainer.defaultProps = {
+  isOpen: true,
 };
 
 export default DetailsContainer;

data/webpack/scenes/ContentViews/Details/__tests__/contentViewDetail.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
+import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
+import api from '../../../../services/api';
+import ContentViewDetails from '../ContentViewDetails';
+import CONTENT_VIEWS_KEY from '../../ContentViewsConstants';
+
+const cvDetailData = require('./contentViewDetails.fixtures.json');
+
+const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
+const cvDetailsPath = api.getApiUrl('/content_views/1');
+
+test('Can call API and show details on page load', async (done) => {
+  const { label, name, description } = cvDetailData;
+  const scope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, cvDetailData);
+
+  const { getByLabelText } = renderWithRedux(
+    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('name text value')).toHaveTextContent(name);
+    expect(getByLabelText('label text value')).toHaveTextContent(label);
+    expect(getByLabelText('description text value')).toHaveTextContent(description);
+  });
+
+  assertNockRequest(scope, done);
+});
+
+test('Can edit text details such as name', async (done) => {
+  const newName = 'agoodname';
+  const updatedCVDetails = { ...cvDetailData, name: newName };
+  const getscope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, cvDetailData);
+  const updatescope = nockInstance
+    .put(cvDetailsPath, { name: newName })
+    .reply(200, updatedCVDetails);
+  const afterUpdateScope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, updatedCVDetails);
+
+  const { getByLabelText } = renderWithRedux(
+    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    renderOptions,
+  );
+
+  const editLabel = 'edit name';
+  // Wait for page to load and confirm edit button is present, then click to edit
+  await patientlyWaitFor(() => { expect(getByLabelText(editLabel)).toBeInTheDocument(); });
+  getByLabelText(editLabel).click();
+
+  const inputLabel = /name text input/;
+  await patientlyWaitFor(() => { expect(getByLabelText(inputLabel)).toBeInTheDocument(); });
+  fireEvent.change(getByLabelText(inputLabel), { target: { value: newName } });
+  getByLabelText('submit name').click();
+
+  // Make sure new name is showing after update
+  await patientlyWaitFor(() => { expect(getByLabelText('name text value')).toHaveTextContent(newName); });
+
+  assertNockRequest(getscope);
+  assertNockRequest(updatescope);
+  assertNockRequest(afterUpdateScope, done);
+});
+
+test('Can edit boolean details such as solve dependencies', async (done) => {
+  const updatedCVDetails = { ...cvDetailData, solve_dependencies: true };
+  const getscope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, cvDetailData);
+  const updatescope = nockInstance
+    .put(cvDetailsPath, { solve_dependencies: true })
+    .reply(200, updatedCVDetails);
+  const afterUpdateScope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, updatedCVDetails);
+
+  const { getByLabelText } = renderWithRedux(
+    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    renderOptions,
+  );
+
+  const checkboxLabel = /solve_dependencies switch/;
+  await patientlyWaitFor(() => expect(getByLabelText(checkboxLabel)).toBeInTheDocument());
+  expect(getByLabelText(checkboxLabel).checked).toBeFalsy();
+  fireEvent.click(getByLabelText(checkboxLabel));
+  await patientlyWaitFor(() => expect(getByLabelText(checkboxLabel).checked).toBeTruthy());
+
+  assertNockRequest(getscope);
+  assertNockRequest(updatescope);
+  assertNockRequest(afterUpdateScope, done);
+});

data/webpack/scenes/ContentViews/Details/__tests__/contentViewDetails.fixtures.json

@@ -0,0 +1,106 @@
+{
+  "content_host_count": 0,
+  "composite": false,
+  "component_ids": [],
+  "default": false,
+  "force_puppet_environment": false,
+  "version_count": 5,
+  "latest_version": "5.0",
+  "auto_publish": false,
+  "solve_dependencies": false,
+  "repository_ids": [
+    58,
+    62,
+    64
+  ],
+  "id": 1,
+  "name": "Andura",
+  "label": "AnduraLabel",
+  "description": "a cool CV",
+  "organization_id": 8,
+  "organization": {
+    "name": "Enterprise",
+    "label": "Enterprise",
+    "id": 8
+  },
+  "created_at": "2020-05-15 11:50:50 -0400",
+  "updated_at": "2020-07-01 09:51:48 -0400",
+  "environments": [
+    {
+      "id": 19,
+      "name": "Library",
+      "label": "Library",
+      "permissions": {
+        "readable": true
+      }
+    }
+  ],
+  "repositories": [
+    {
+      "id": 58,
+      "name": "Wishing Well Cluster",
+      "label": "Wishing_Well_Cluster",
+      "content_type": "yum"
+    },
+    {
+      "id": 62,
+      "name": "Palomar 12",
+      "label": "Palomar_12",
+      "content_type": "yum"
+    },
+    {
+      "id": 64,
+      "name": "Hodge 301",
+      "label": "Hodge_301",
+      "content_type": "yum"
+    }
+  ],
+  "puppet_modules": [],
+  "versions": [
+    {
+      "id": 956,
+      "version": "1.0",
+      "published": "2020-05-15 16:40:03 -0400",
+      "environment_ids": []
+    },
+    {
+      "id": 957,
+      "version": "2.0",
+      "published": "2020-05-15 16:40:27 -0400",
+      "environment_ids": []
+    },
+    {
+      "id": 958,
+      "version": "3.0",
+      "published": "2020-05-15 16:40:52 -0400",
+      "environment_ids": []
+    },
+    {
+      "id": 959,
+      "version": "4.0",
+      "published": "2020-05-15 16:41:14 -0400",
+      "environment_ids": []
+    },
+    {
+      "id": 960,
+      "version": "5.0",
+      "published": "2020-05-15 16:41:36 -0400",
+      "environment_ids": [
+        19
+      ]
+    }
+  ],
+  "components": [],
+  "content_view_components": [],
+  "activation_keys": [],
+  "next_version": "6.0",
+  "last_published": "2020-05-15 16:41:36 -0400",
+  "permissions": {
+    "view_content_views": true,
+    "edit_content_views": true,
+    "destroy_content_views": true,
+    "publish_content_views": true,
+    "promote_or_remove_content_views": true
+  },
+  "duplicate_repositories_to_publish": []
+}

data/webpack/scenes/ContentViews/Details/contentViewInfo.scss

@@ -0,0 +1,8 @@
+.foreman-spaced-icon {
+  margin: 0px 10px;
+}
+
+// Keeps spacing in the list even despite contents
+.foreman-spaced-list {
+  min-height: 40px;
+}

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

@@ -0,0 +1,7 @@
+import { withRouter } from 'react-router-dom';
+import ContentViewDetails from './ContentViewDetails';
+import reducer from './ContentViewDetailReducer';
+
+export const contentViewDetails = reducer;
+
+export default withRouter(ContentViewDetails);

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

@@ -3,37 +3,31 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 
-import TableWrapper from './TableWrapper';
+import TableWrapper from '../../../components/Table/TableWrapper';
 import tableDataGenerator from './tableDataGenerator';
 import actionResolver from './actionResolver';
+import getContentViews from '../ContentViewsActions';
 
-const ContentViewTable = ({
-  items, status, error,
-}) => {
+const ContentViewTable = ({ response, status, error }) => {
   const [table, setTable] = useState({ rows: [], columns: [] });
   const [rowMapping, setRowMapping] = useState({});
-  const loading = status === STATUS.PENDING;
+  const { results, ...metadata } = response;
+  const loadingResponse = status === STATUS.PENDING;
 
   useEffect(
     () => {
-      if (!loading && items && items.length > 0) {
-        const { updatedRowMapping, ...tableData } = tableDataGenerator(
-          items,
+      if (!loadingResponse && results) {
+        const { updatedRowMap, ...tableData } = tableDataGenerator(
+          results,
           rowMapping,
         );
         setTable(tableData);
-        setRowMapping(updatedRowMapping);
+        setRowMapping(updatedRowMap);
       }
     },
-    [items, JSON.stringify(rowMapping)], // use JSON to check obj values eq not reference eq
+    [results, 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) {
@@ -48,47 +42,68 @@ const ContentViewTable = ({
 
   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 };
+        const updatedMap = { ...prev[rowIndex], expandedColumn: adjustedColIndex };
+        return { ...prev, [rowIndex]: 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);
+      // Keep id in object to not throw off tableStatus id checks
+      setRowMapping(prev => ({ ...prev, [rowIndex]: { id: prev[rowIndex].id } }));
     }
 
     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.');
+  // Prevents flash of "No Content" before rows are loaded
+  const tableStatus = () => {
+    if (typeof results === 'undefined') return status; // will handle errored state
+    const rowMappingIds = Object.values(rowMapping).map(row => row.id);
+    const resultsIds = Array.from(results.map(result => result.id));
+    // All results are accounted for in row mapping, the page is ready to load
+    if (resultsIds.length === rowMappingIds.length &&
+        resultsIds.every(id => rowMappingIds.includes(id))) {
+      return status;
+    }
+    return STATUS.PENDING; // Fallback to pending
+  };
+
+  const emptyContentTitle = __("You currently don't have any Content Views.");
+  const emptyContentBody = __('A content view can be added by using the "New content view" button below.');
+  const emptySearchTitle = __('No matching content views found');
+  const emptySearchBody = __('Try changing your search settings.');
 
   const { rows, columns } = table;
   return (
     <TableWrapper
-      rows={rows}
-      cells={columns}
-      status={status}
-      emptyTitle={emptyTitle}
-      emptyBody={emptyBody}
-      onSelect={onSelect}
+      {...{
+        rows,
+        error,
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        onSelect,
+        onExpand,
+        actionResolver,
+      }}
+      status={tableStatus()}
+      fetchItems={getContentViews}
       canSelectAll={false}
-      onExpand={onExpand}
-      actionResolver={actionResolver}
-      error={error}
+      cells={columns}
+      autocompleteEndpoint="/content_views/auto_complete_search"
     />
   );
 };
 
 ContentViewTable.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape({})),
+  response: PropTypes.shape({
+    results: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
   status: PropTypes.string.isRequired,
   error: PropTypes.oneOfType([
     PropTypes.shape({}),
@@ -98,7 +113,7 @@ ContentViewTable.propTypes = {
 
 ContentViewTable.defaultProps = {
   error: null,
-  items: [],
+  response: { results: [] },
 };
 
 export default ContentViewTable;