katello 4.0.3 → 4.1.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewVersions.test.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
+import ContentViewVersions from '../ContentViewVersions';
+
+const cvVersionsData = require('./contentViewVersions.fixtures.json');
+const emptyCVVersionData = require('./emptyCVVersion.fixtures.json');
+
+const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
+const cvVersions = api.getApiUrl('/content_view_versions/');
+const autocompleteUrl = '/content_view_versions/auto_complete_search';
+
+let firstVersion;
+let searchDelayScope;
+let autoSearchScope;
+
+beforeEach(() => {
+  const { results } = cvVersionsData;
+  [firstVersion] = results;
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+});
+
+afterEach(() => {
+  nock.cleanAll();
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+});
+
+test('Can call API and show versions on page load', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsData);
+
+  const { getByText, queryByText } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
+  // Assert that the CV version is now showing on the screen, but wait for it to appear.
+  await patientlyWaitFor(() => {
+    expect(getByText(`Version ${firstVersion.version}`)).toBeTruthy();
+  });
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Can link to view environment and see publish time', async () => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsData);
+
+  const { getByText, getAllByText } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    // Able to display multiple env of version with humanized published/promoted date
+    expect(getAllByText('Library')[0].closest('a'))
+      .toHaveAttribute('href', '/lifecycle_environments/1');
+    expect(getByText('5 days ago')).toBeTruthy();
+    expect(getAllByText('dev')[0].closest('a'))
+      .toHaveAttribute('href', '/lifecycle_environments/2');
+    expect(getAllByText('4 days ago')[0]).toBeTruthy();
+
+    // Able to display empty text for version in no environments
+    expect(getAllByText('No environments')).toHaveLength(3);
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Can show package and erratas and link to list page', async () => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsData);
+
+  const { getByText, getAllByText } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+
+  await patientlyWaitFor(() => {
+    expect(getAllByText(8)[0].closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/packages/');
+    expect(getAllByText(15)[0].closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/errata/');
+    expect(getByText(5).closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/errata?queryPagedSearch=%20type%20%3D%20security');
+    expect(getByText(3).closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/errata?queryPagedSearch=%20type%20%3D%20bugfix');
+    expect(getByText(7).closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/errata?queryPagedSearch=%20type%20%3D%20enhancement');
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Can show additional content and link to list page', async () => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, cvVersionsData);
+
+  const { getByText } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+
+  await patientlyWaitFor(() => {
+    expect(getByText('3 Files').closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/file/');
+    expect(getByText('1 Deb Packages').closest('a'))
+      .toHaveAttribute('href', '/content_views/5/versions/11/deb/');
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Can load for empty versions', async () => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .query(true)
+    .reply(200, emptyCVVersionData);
+
+  const { queryByText } = renderWithRedux(
+    <ContentViewVersions cvId={5} />,
+    renderOptions,
+  );
+
+  expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
+  await patientlyWaitFor(() =>
+    expect(queryByText("You currently don't have any versions for this content view.")).toBeTruthy());
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});

data/webpack/scenes/ContentViews/Details/Versions/__tests__/emptyCVVersion.fixtures.json

@@ -0,0 +1,13 @@
+{
+  "total": 0,
+  "subtotal": 0,
+  "page": "1",
+  "per_page": "20",
+  "error": null,
+  "search": null,
+  "sort": {
+    "by": "version",
+    "order": "desc"
+  },
+  "results": []
+}

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

@@ -11,9 +11,11 @@ const cvDetailData = require('./contentViewDetails.fixtures.json');
 const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
 const cvDetailsPath = api.getApiUrl('/content_views/1');
 
-// The Repositories tab will load in the background, prevent this by mocking
+// The tabs will load in the background, prevent this by mocking
 jest.mock('../Repositories/ContentViewRepositories.js', () => () => 'mocked!');
 jest.mock('../Filters/ContentViewFilters.js', () => () => 'mocked!');
+jest.mock('../Histories/ContentViewHistories.js', () => () => 'mocked!');
+jest.mock('../Versions/ContentViewVersions.js', () => () => 'mocked!');
 
 test('Can call API and show details on page load', async (done) => {
   const { label, name, description } = cvDetailData;

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

@@ -3,7 +3,6 @@
   "composite": false,
   "component_ids": [],
   "default": false,
-  "force_puppet_environment": false,
   "version_count": 5,
   "latest_version": "5.0",
   "auto_publish": false,
@@ -55,7 +54,6 @@
       "content_type": "yum"
     }
   ],
-  "puppet_modules": [],
   "versions": [
     {
       "id": 956,

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex, FlexItem } from '@patternfly/react-core';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import ComponentEnvironments from '../Details/ComponentContentViews/ComponentEnvironments';
+
+const ContentViewVersionCell = ({
+  id, latestVersion, latestVersionId, latestVersionEnvironments,
+}) => (
+  <Flex grow={{ default: 'grow' }}>
+    <FlexItem>
+      <a href={urlBuilder(`content_views/${id}/versions/${latestVersionId}`, '')}>{`Version ${latestVersion}`}</a>
+    </FlexItem>
+    <FlexItem>
+      <ComponentEnvironments environments={latestVersionEnvironments} />
+    </FlexItem>
+  </Flex>
+);
+
+ContentViewVersionCell.propTypes = {
+  id: PropTypes.number.isRequired,
+  latestVersion: PropTypes.string.isRequired,
+  latestVersionId: PropTypes.number,
+  latestVersionEnvironments: PropTypes.instanceOf(Array),
+};
+
+ContentViewVersionCell.defaultProps = {
+  latestVersionId: null,
+  latestVersionEnvironments: [],
+};
+
+export default ContentViewVersionCell;
+

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { Button } from '@patternfly/react-core';
+import { TableVariant } from '@patternfly/react-table';
 import TableWrapper from '../../../components/Table/TableWrapper';
 import tableDataGenerator from './tableDataGenerator';
 import getContentViews from '../ContentViewsActions';
@@ -11,7 +12,7 @@ import CopyContentViewModal from '../Copy/CopyContentViewModal';
 
 const ContentViewTable = ({ response, status, error }) => {
   const [table, setTable] = useState({ rows: [], columns: [] });
-  const [rowMapping, setRowMapping] = useState({});
+  const [rowMappingIds, setRowMappingIds] = useState([]);
   const [searchQuery, updateSearchQuery] = useState('');
   const { results, ...metadata } = response;
   const loadingResponse = status === STATUS.PENDING;
@@ -26,15 +27,12 @@ const ContentViewTable = ({ response, status, error }) => {
   useEffect(
     () => {
       if (!loadingResponse && results) {
-        const { updatedRowMap, ...tableData } = tableDataGenerator(
-          results,
-          rowMapping,
-        );
+        const { newRowMappingIds, ...tableData } = tableDataGenerator(results);
         setTable(tableData);
-        setRowMapping(updatedRowMap);
+        setRowMappingIds(newRowMappingIds);
       }
     },
-    [results, JSON.stringify(rowMapping)], // use JSON to check obj values eq not reference eq
+    [results, loadingResponse, setTable, setRowMappingIds],
   );
 
   const onSelect = (_event, isSelected, rowId) => {
@@ -49,19 +47,13 @@ const ContentViewTable = ({ response, status, error }) => {
     setTable(prevTable => ({ ...prevTable, rows }));
   };
 
-  const onExpand = (_event, rowIndex, colIndex, isOpen) => {
-    const { rows } = table;
-    // adjust for the selection checkbox cell being counted in the index
-    const adjustedColIndex = colIndex - 1;
-
-    if (!isOpen) {
-      setRowMapping((prev) => {
-        const updatedMap = { ...prev[rowIndex], expandedColumn: adjustedColIndex };
-        return { ...prev, [rowIndex]: updatedMap };
-      });
+  const onCollapse = (event, rowId, isOpen) => {
+    let rows;
+    if (rowId === -1) {
+      rows = table.rows.map(row => ({ ...row, isOpen }));
     } else {
-      // Keep id in object to not throw off tableStatus id checks
-      setRowMapping(prev => ({ ...prev, [rowIndex]: { id: prev[rowIndex].id } }));
+      rows = [...table.rows];
+      rows[rowId].isOpen = isOpen;
     }
 
     setTable(prevTable => ({ ...prevTable, rows }));
@@ -69,19 +61,21 @@ const ContentViewTable = ({ response, status, error }) => {
 
   const actionResolver = (rowData, { _rowIndex }) => {
     // don't show actions for the expanded parts
-    if (rowData.parent || rowData.compoundParent || rowData.noactions) return null;
+    if (rowData.parent !== undefined || 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',
+        isDisabled: true,
         onClick: (_event, rowId, rowInfo) => {
           console.log(`clicked on row ${JSON.stringify(rowInfo)}`);
         },
       },
       {
         title: 'Promote',
+        isDisabled: true,
         onClick: (_event, rowId, rowInfo) => console.log(`clicked on row ${rowInfo.cvName}`),
       },
       {
@@ -94,6 +88,7 @@ const ContentViewTable = ({ response, status, error }) => {
       },
       {
         title: 'Delete',
+        isDisabled: true,
         onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
       },
     ];
@@ -102,7 +97,6 @@ const ContentViewTable = ({ response, status, error }) => {
   // 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 &&
@@ -129,13 +123,14 @@ const ContentViewTable = ({ response, status, error }) => {
         emptySearchTitle,
         emptySearchBody,
         onSelect,
-        onExpand,
         actionResolver,
         searchQuery,
         updateSearchQuery,
       }}
+      variant={TableVariant.compact}
       status={tableStatus()}
       fetchItems={getContentViews}
+      onCollapse={onCollapse}
       canSelectAll={false}
       cells={columns}
       autocompleteEndpoint="/content_views/auto_complete_search"

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

@@ -1,137 +1,86 @@
 import React from 'react';
-import { compoundExpand, fitContent } from '@patternfly/react-table';
-import {
-  ScreenIcon,
-  ContainerNodeIcon,
-} from '@patternfly/react-icons';
+import { fitContent, expandable } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { translate as __ } from 'foremanReact/common/I18n';
-
-import IconWithCount from '../components/IconWithCount';
-import DetailsExpansion from '../expansions/DetailsExpansion';
-import EnvironmentsExpansion from '../expansions/EnvironmentsExpansion';
-import VersionsExpansion from '../expansions/VersionsExpansion';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
 import ContentViewIcon from '../components/ContentViewIcon';
-import DetailsContainer from '../Details/DetailsContainer';
+import DetailsExpansion from '../expansions/DetailsExpansion';
+import ContentViewVersionCell from './ContentViewVersionCell';
+import InactiveText from '../components/InactiveText';
+import LastSync from '../Details/Repositories/LastSync';
 
 export const buildColumns = () => [
-  { title: __('Type'), transforms: [fitContent] },
-  __('Name'), __('Last published'), __('Details'),
-  { title: __('Environments'), cellTransforms: [compoundExpand] },
-  { title: __('Versions'), cellTransforms: [compoundExpand] },
+  { title: __('Type'), cellFormatters: [expandable], transforms: [fitContent] },
+  __('Name'), __('Last published'), __('Last task'), __('Latest version'),
 ];
 
-const buildRow = (contentView, openColumn) => {
+const buildRow = (contentView) => {
+  /* eslint-disable max-len */
   const {
-    id, composite, name, environments, versions, last_published: lastPublished,
+    id, composite, name, last_published: lastPublished, latest_version: latestVersion, latest_version_id: latestVersionId,
+    latest_version_environments: latestVersionEnvironments, last_task: lastTask,
   } = contentView;
+  /* eslint-enable max-len */
+  const { last_sync_words: lastSyncWords } = lastTask || {};
   const row = [
     { title: <ContentViewIcon composite={composite ? true : undefined} /> },
     { title: <Link to={urlBuilder('labs/content_views', '', id)}>{name}</Link> },
-    lastPublished || 'Not yet published',
-    { title: __('Details'), props: { isOpen: false, ariaControls: `cv-details-expansion-${id}` } },
-    {
-      title: <IconWithCount Icon={ScreenIcon} count={environments.length} title={`environments-icon-${id}`} />,
-      props: { isOpen: false, ariaControls: `cv-environments-expansion-${id}` },
-    },
+    { title: lastPublished ? <LongDateTime date={lastPublished} showRelativeTimeTooltip /> : <InactiveText text={__('Not yet published')} /> },
+    { title: <LastSync lastSync={lastTask} lastSyncWords={lastSyncWords} emptyMessage="N/A" /> },
     {
-      title: <IconWithCount Icon={ContainerNodeIcon} count={versions.length} title={`versions-icon-${id}`} />,
-      props: { isOpen: false, ariaControls: `cv-versions-expansion-${id}` },
+      title: latestVersion ? <ContentViewVersionCell {...{
+ id, latestVersion, latestVersionId, latestVersionEnvironments,
+}}
+      /> : <InactiveText style={{ marginTop: '0.5em', marginBottom: '0.5em' }} text={__('Not yet published')} />,
     },
   ];
-  if (openColumn) row[openColumn].props.isOpen = true;
   return row;
 };
 
-const buildDetailDropdowns = (id, rowIndex, openColumn) => {
-  const cvId = { cvId: id };
-  const expansionProps = { ...cvId, className: 'pf-m-no-padding' };
-  const containerProps = column => ({ ...cvId, isOpen: openColumn === column });
-  const offsetColumn = 3; // index of first expandable column
+const buildExpandableRows = (contentViews) => {
+  const rows = [];
+  let cvCount = 0;
 
-  let detailDropdowns = [
-    {
-      compoundParent: offsetColumn,
-      cells: [
-        {
-          title: (
-            <DetailsContainer {...containerProps(offsetColumn + 1)}>
-              <DetailsExpansion {...expansionProps} />
-            </DetailsContainer>),
-          props: { colSpan: 6 },
-        },
-      ],
-    },
-    {
-      compoundParent: offsetColumn + 1,
+  contentViews.forEach((contentView) => {
+    const {
+      id, name, description, activation_keys: activationKeys, hosts,
+    } = contentView;
+    const cells = buildRow(contentView);
+    const cellParent = {
+      cvId: id, cvName: name, isOpen: false, cells,
+    };
+    rows.push(cellParent);
+    const cellChild = {
+      parent: cvCount,
       cells: [
         {
-          title: (
-            <DetailsContainer {...containerProps(offsetColumn + 2)}>
-              <EnvironmentsExpansion {...expansionProps} />
-            </DetailsContainer>),
-          props: { colSpan: 6 },
+          title: <DetailsExpansion cvId={id} {...{ activationKeys, hosts }} />,
+          props: {
+            colSpan: 2,
+          },
         },
-      ],
-    },
-    {
-      compoundParent: offsetColumn + 2,
-      cells: [
         {
-          title: (
-            <DetailsContainer {...containerProps(offsetColumn + 3)}>
-              <VersionsExpansion {...expansionProps} />
-            </DetailsContainer>),
-          props: { colSpan: 6 },
+          title: description || <InactiveText text={__('No description')} />,
+          props: {
+            colSpan: 4,
+          },
         },
       ],
-    },
-  ];
-
-  detailDropdowns = detailDropdowns.map(detail => ({ ...detail, parent: rowIndex }));
-
-  return detailDropdowns;
-};
-
-const buildRowsAndMapping = (contentViews, newRowMapping) => {
-  const updatedRowMap = { ...newRowMapping };
-  const rows = [];
-
-  contentViews.forEach((contentView) => {
-    const { id, name } = contentView;
-    const rowIndex = rows.length;
-    const needsUpdate = !Object.keys(updatedRowMap).find(i => updatedRowMap[i].id === id) ||
-                        !Object.keys(updatedRowMap[rowIndex] || {}).includes('expandedColumn');
-    if (needsUpdate) updatedRowMap[rowIndex] = { expandedColumn: null, id };
-    const openColumn = updatedRowMap[rowIndex].expandedColumn;
-    const cells = buildRow(contentView, openColumn);
-    const isOpen = !!openColumn;
-
-    rows.push({
-      cvId: id, cvName: name, isOpen, cells,
-    });
-    rows.push(...buildDetailDropdowns(id, rowIndex, openColumn));
+    };
+    rows.push(cellChild);
+    cvCount = rows.length;
   });
-
-  return { rows, updatedRowMap };
+  return { rows };
 };
 
-const tableDataGenerator = (results, rowMapping) => {
-  // If a search was performed or perPage has changed, we can clear mapping
-  const prevRowMapping = (results.length === Object.keys(rowMapping).length) ? rowMapping : {};
-  const newRowMapping = {};
+const tableDataGenerator = (results) => {
   const contentViews = results || [];
   const columns = buildColumns();
-  const contentViewIds = contentViews.map(cv => cv.id);
-
-  // Only keep the relevant rows to keep the table status check accurate
-  Object.entries(prevRowMapping).forEach(([rowId, value]) => {
-    if (contentViewIds.includes(value.id)) newRowMapping[rowId] = value;
-  });
-  const { updatedRowMap, rows } = buildRowsAndMapping(contentViews, newRowMapping);
-
-  return { updatedRowMap, rows, columns };
+  const newRowMappingIds = [];
+  const { rows } = buildExpandableRows(contentViews);
+  rows.forEach(row => row.cvId && newRowMappingIds.push(row.cvId));
+  return { newRowMappingIds, rows, columns };
 };
 
 export default tableDataGenerator;

data/webpack/scenes/ContentViews/__tests__/basicContentViews.fixtures.js

@@ -6,12 +6,14 @@ const buildContentView = id => ({
   repositories: [],
   versions: [],
   last_published: 'Not Yet Published',
+  activation_keys: [],
+  hosts: [],
 });
 
 const createBasicCVs = (amount) => {
   const response = {
-    total: 100,
-    subtotal: 100,
+    total: amount,
+    subtotal: amount,
     page: 1,
     per_page: 20,
     error: null,
@@ -23,7 +25,7 @@ const createBasicCVs = (amount) => {
     results: [],
   };
 
-  [...Array(amount).keys()].forEach((_, i) => response.results.push(buildContentView(i)));
+  [...Array(amount).keys()].forEach((_, i) => response.results.push(buildContentView(i + 1)));
 
   return response;
 };

data/webpack/scenes/ContentViews/__tests__/contentViewList.fixtures.json

@@ -14,9 +14,21 @@
       "composite": false,
       "component_ids": [],
       "default": false,
-      "force_puppet_environment": false,
       "version_count": 1,
       "latest_version": "1.0",
+      "latest_version_id": 11,
+      "latest_version_environments": [
+        {
+          "id": 1,
+          "name": "Library",
+          "label": "Library"
+        },
+        {
+          "id": 2,
+          "name": "dev",
+          "label": "dev"
+        }
+        ],
       "auto_publish": false,
       "solve_dependencies": false,
       "repository_ids": [
@@ -52,7 +64,6 @@
           "content_type": "yum"
         }
       ],
-      "puppet_modules": [],
       "versions": [
         {
           "id": 2,
@@ -65,7 +76,23 @@
       ],
       "components": [],
       "content_view_components": [],
-      "activation_keys": [],
+      "activation_keys": [
+        {
+          "id": 1,
+          "name": "test_ack_key"
+        }
+      ],
+      "hosts": [
+        {
+          "id": 1,
+          "name": "katello-client1.samir.example.com"
+        }
+      ],
+      "last_task": {
+        "id": "54088dac-b990-491c-a891-1d7d1a3f5161",
+        "result": "successful",
+        "last_sync_words": "3 days"
+      },
       "next_version": "2.0",
       "last_published": "2020-03-19 15:09:11 UTC",
       "permissions": {
@@ -83,7 +110,6 @@
         28
       ],
       "default": false,
-      "force_puppet_environment": false,
       "version_count": 0,
       "latest_version": null,
       "auto_publish": false,
@@ -161,7 +187,6 @@
           "content_type": "yum"
         }
       ],
-      "puppet_modules": [],
       "versions": [],
       "components": [
         {