katello 3.18.0.rc2.1 → 4.0.0.rc2

data/webpack/scenes/ContentViews/Details/Filters/__tests__/contentViewFilters.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
+import api from '../../../../../services/api';
+import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import ContentViewFilters from '../ContentViewFilters';
+import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
+
+const cvFilterFixtures = require('./contentViewFilters.fixtures.json');
+
+const cvFilters = api.getApiUrl('/content_view_filters');
+const autocompleteUrl = '/content_view_filters/auto_complete_search';
+const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
+
+let firstFilter;
+let lastFilter;
+let searchDelayScope;
+let autoSearchScope;
+beforeEach(() => {
+  const { results } = cvFilterFixtures;
+  [firstFilter] = results;
+  [lastFilter] = results.slice(-1);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+  // Autosearch can cause some asynchronous issues with the typing timeout, using basic search
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', false);
+});
+
+afterEach(() => {
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  nock.cleanAll();
+});
+
+test('Can call API and show filters on page load', async (done) => {
+  const { name, description } = firstFilter;
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const scope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const { getByText, queryByText } =
+    renderWithRedux(<ContentViewFilters cvId={1} />, renderOptions);
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(name)).toBeNull();
+  await patientlyWaitFor(() => {
+    expect(getByText(name)).toBeInTheDocument();
+    expect(getByText(description)).toBeInTheDocument();
+    expect(getByText(lastFilter.name)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Can search for filter', async (done) => {
+  const { name, description } = firstFilter;
+  const searchQueryMatcher = actualParams => actualParams?.search?.includes(name);
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, searchQueryMatcher);
+  const initialScope = nockInstance
+    .get(cvFilters)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+  const searchResultScope = nockInstance
+    .get(cvFilters)
+    .query(searchQueryMatcher)
+    .reply(200, { results: [firstFilter] });
+
+  const { queryByText, getByLabelText, getByText } = renderWithRedux(
+    <ContentViewFilters cvId={1} />,
+    renderOptions,
+  );
+
+  // Looking for description because the name is in the search bar and could match
+  await patientlyWaitFor(() => expect(getByText(description)).toBeInTheDocument());
+  // Search for a filter by name
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: name } });
+  getByLabelText(/search button/i).click();
+  // Only the first filter should be showing, not the last one
+  await patientlyWaitFor(() => {
+    expect(getByText(description)).toBeInTheDocument();
+    expect(queryByText(lastFilter.name)).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(withSearchScope);
+  assertNockRequest(initialScope);
+  assertNockRequest(searchResultScope, done);
+});

data/webpack/scenes/ContentViews/Details/Repositories/ContentViewRepositories.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { Bullseye, Split, SplitItem } from '@patternfly/react-core';
 import { TableVariant, fitContent } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
@@ -8,37 +8,47 @@ import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import PropTypes from 'prop-types';
 
 import TableWrapper from '../../../../components/Table/TableWrapper';
-import { getContentViewRepositories } from '../ContentViewDetailActions';
-import { selectCVRepos, selectCVReposStatus, selectCVReposError } from '../ContentViewDetailSelectors';
+import onSelect from '../../../../components/Table/helpers';
+import { getContentViewRepositories, getRepositoryTypes } from '../ContentViewDetailActions';
+import {
+  selectCVRepos,
+  selectCVReposStatus,
+  selectCVReposError,
+  selectRepoTypes,
+  selectRepoTypesStatus,
+} from '../ContentViewDetailSelectors';
 import { ADDED, NOT_ADDED, ALL_STATUSES } from '../../ContentViewsConstants';
 import ContentCounts from './ContentCounts';
 import LastSync from './LastSync';
 import RepoAddedStatus from './RepoAddedStatus';
 import RepoIcon from './RepoIcon';
-import SelectableDropdown from './SelectableDropdown';
+import SelectableDropdown from '../../../../components/SelectableDropdown';
+import { capitalize } from '../../../../utils/helpers';
 
 const allRepositories = 'All repositories';
 
-// checkbox_name: API_name
-const repoTypes = {
-  [allRepositories]: 'all',
-  'Yum repositories': 'yum',
-  'File repositories': 'file',
-  'Container repositories': 'docker',
-  'OSTree repositories': 'ostree', // ostree is deprecated?
+// Add any exceptions to the display names here
+// [API_value]: displayed_value
+const repoTypeNames = {
+  docker: 'Container',
+  ostree: 'OSTree',
 };
 
 const ContentViewRepositories = ({ cvId }) => {
+  const dispatch = useDispatch();
   const response = useSelector(state => selectCVRepos(state, cvId), shallowEqual);
   const status = useSelector(state => selectCVReposStatus(state, cvId), shallowEqual);
   const error = useSelector(state => selectCVReposError(state, cvId), shallowEqual);
+  const repoTypesResponse = useSelector(state => selectRepoTypes(state), shallowEqual);
+  const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state), shallowEqual);
 
   const [rows, setRows] = useState([]);
   const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const [typeSelected, setTypeSelected] = useState(allRepositories);
   const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
-
+  // repoTypes object format: [displayed_value]: API_value
+  const [repoTypes, setRepoTypes] = useState({});
 
   const columnHeaders = [
     { title: __('Type'), transforms: [fitContent] },
@@ -80,18 +90,6 @@ const ContentViewRepositories = ({ cvId }) => {
     return newRows;
   };
 
-  const onSelect = (_event, isSelected, rowId) => {
-    let newRows;
-    if (rowId === -1) {
-      newRows = rows.map(row => ({ ...row, selected: isSelected }));
-    } else {
-      newRows = [...rows];
-      newRows[rowId].selected = isSelected;
-    }
-
-    setRows(newRows);
-  };
-
   const getCVReposWithOptions = (params = {}) => {
     const allParams = { ...params };
     if (typeSelected !== 'All repositories') allParams.content_type = repoTypes[typeSelected];
@@ -109,6 +107,25 @@ const ContentViewRepositories = ({ cvId }) => {
     }
   }, [JSON.stringify(response)]);
 
+  useEffect(() => {
+    dispatch(getRepositoryTypes());
+  }, []);
+
+  // Get repo type filter selections dynamically from the API
+  useEffect(() => {
+    if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
+      const allRepoTypes = {};
+      allRepoTypes[allRepositories] = 'all';
+      repoTypesResponse.forEach((type) => {
+        const { name } = type;
+        const typeFullName = Object.prototype.hasOwnProperty.call(repoTypeNames, name) ?
+          repoTypeNames[name] : capitalize(name);
+        allRepoTypes[`${typeFullName} Repositories`] = name;
+      });
+      setRepoTypes(allRepoTypes);
+    }
+  }, [JSON.stringify(repoTypesResponse), repoTypesStatus]);
+
   const emptyContentTitle = __("You currently don't have any repositories to add to this content view.");
   const emptyContentBody = __('Please add some repositories.'); // needs link
   const emptySearchTitle = __('No matching repositories found');
@@ -121,7 +138,6 @@ const ContentViewRepositories = ({ cvId }) => {
       {...{
         rows,
         metadata,
-        onSelect,
         emptyContentTitle,
         emptyContentBody,
         emptySearchTitle,
@@ -132,6 +148,7 @@ const ContentViewRepositories = ({ cvId }) => {
         status,
         activeFilters,
       }}
+      onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
@@ -146,6 +163,8 @@ const ContentViewRepositories = ({ cvId }) => {
             selected={typeSelected}
             setSelected={setTypeSelected}
             placeholderText="Type"
+            loading={repoTypesStatus === STATUS.PENDING}
+            error={repoTypesStatus === STATUS.ERROR}
           />
         </SplitItem>
         <SplitItem>

data/webpack/scenes/ContentViews/Details/Repositories/__tests__/contentViewDetailRepos.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, patientlyWaitForRemoval, fireEvent } from 'react-testing-lib-wrapper';
 
 import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
@@ -12,15 +12,22 @@ const autocompleteUrl = '/repositories/auto_complete_search';
 const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
 const cvAllRepos = api.getApiUrl('/content_views/1/repositories/show_all');
 const cvRepos = api.getApiUrl('/content_views/1/repositories');
+const repoTypesResponse = [{ name: 'deb' }, { name: 'docker' }, { name: 'file' }, { name: 'ostree' }, { name: 'puppet' }, { name: 'yum' }];
 
 let firstRepo;
 let searchDelayScope;
 let autoSearchScope;
+
 beforeEach(() => {
   const { results } = repoData;
   [firstRepo] = results;
   searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
   autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  nockInstance
+    .persist() // match any query to this endpoint, gets cleaned up by `nock.cleanAll()`
+    .get(api.getApiUrl('/repositories/repository_types'))
+    .query(true)
+    .reply(200, repoTypesResponse);
 });
 
 afterEach(() => {
@@ -47,7 +54,6 @@ test('Can call API and show repositories on page load', async (done) => {
   // Assert that the repo name is now showing on the screen, but wait for it to appear.
   await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
 
-
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
@@ -57,23 +63,27 @@ test('Can filter by repository type', async (done) => {
 
   const allTypesScope = nockInstance
     .get(cvAllRepos)
-    .query(true)
+    .query(queryObj => !queryObj.content_type) // no content_type param to match all repos
     .reply(200, repoData);
 
-  // With the yum checkbox unchecked, we can expect the query params to not include 'yum'
   const noYumScope = nockInstance
     .get(cvAllRepos)
     .query(queryObj => queryObj.content_type === 'yum')
     .reply(200, repoData);
 
-  const { getByLabelText } = renderWithRedux(<ContentViewRepositories cvId={1} />, renderOptions);
+  const { getByLabelText, getByText } =
+    renderWithRedux(<ContentViewRepositories cvId={1} />, renderOptions);
 
+  await patientlyWaitForRemoval(() => getByLabelText('Type spinner'));
   // Patternfly's Select component makes it hard to attach a label, the existing options aren't
-  // working as expected, so querying by container label and getting first button to open dropdown
+  // working as expected, so querying by container label and getting the button
   const toggleContainer = getByLabelText('select Type container');
   const toggleButton = toggleContainer.querySelector('button');
   fireEvent.click(toggleButton); // Open type dropdown
-  fireEvent.click(getByLabelText('select Yum repositories')); // select yum repos
+  const selectYum = getByLabelText('select Yum Repositories');
+  fireEvent.click(selectYum); // select yum repos
+  await patientlyWaitForRemoval(() => getByText('Loading'));
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeTruthy());
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(allTypesScope);

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

@@ -13,6 +13,7 @@ const cvDetailsPath = api.getApiUrl('/content_views/1');
 
 // The Repositories tab will load in the background, prevent this by mocking
 jest.mock('../Repositories/ContentViewRepositories.js', () => () => 'mocked!');
+jest.mock('../Filters/ContentViewFilters.js', () => () => 'mocked!');
 
 test('Can call API and show details on page load', async (done) => {
   const { label, name, description } = cvDetailData;
@@ -98,7 +99,30 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
   fireEvent.click(getByLabelText(checkboxLabel));
   await patientlyWaitFor(() => expect(getByLabelText(checkboxLabel).checked).toBeTruthy());
 
+  const disabledImportLabel = /import_only_switch/;
+  expect(getByLabelText(disabledImportLabel)).toBeInTheDocument();
+  expect(getByLabelText(disabledImportLabel)).toHaveAttribute('disabled');
+
   assertNockRequest(getscope);
   assertNockRequest(updatescope);
   assertNockRequest(afterUpdateScope, done);
 });
+
+test('Can link to view tasks', async () => {
+  const scope = nockInstance
+    .get(cvDetailsPath)
+    .query(true)
+    .reply(200, cvDetailData);
+
+  const { getByText } = renderWithRedux(
+    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getByText(/view tasks/i).closest('a'))
+      .toHaveAttribute('href', '/foreman_tasks/tasks?search=resource_type%3D+Katello%3A%3AContentView+resource_id%3D1');
+  });
+
+  assertNockRequest(scope);
+});

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

@@ -2,11 +2,12 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-
+import { Button } from '@patternfly/react-core';
 import TableWrapper from '../../../components/Table/TableWrapper';
 import tableDataGenerator from './tableDataGenerator';
-import actionResolver from './actionResolver';
 import getContentViews from '../ContentViewsActions';
+import CreateContentViewModal from '../Create/CreateContentViewModal';
+import CopyContentViewModal from '../Copy/CopyContentViewModal';
 
 const ContentViewTable = ({ response, status, error }) => {
   const [table, setTable] = useState({ rows: [], columns: [] });
@@ -14,6 +15,13 @@ const ContentViewTable = ({ response, status, error }) => {
   const [searchQuery, updateSearchQuery] = useState('');
   const { results, ...metadata } = response;
   const loadingResponse = status === STATUS.PENDING;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [copy, setCopy] = useState(false);
+  const [actionableCvId, setActionableCvId] = useState('');
+  const [actionableCvName, setActionableCvName] = useState('');
+  function openForm() {
+    setIsModalOpen(true);
+  }
 
   useEffect(
     () => {
@@ -59,6 +67,38 @@ const ContentViewTable = ({ response, status, error }) => {
     setTable(prevTable => ({ ...prevTable, rows }));
   };
 
+  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 ${JSON.stringify(rowInfo)}`);
+        },
+      },
+      {
+        title: 'Promote',
+        onClick: (_event, rowId, rowInfo) => console.log(`clicked on row ${rowInfo.cvName}`),
+      },
+      {
+        title: 'Copy',
+        onClick: (_event, rowId, rowInfo) => {
+          setCopy(true);
+          setActionableCvId(rowInfo.cvId.toString());
+          setActionableCvName(rowInfo.cvName);
+        },
+      },
+      {
+        title: 'Delete',
+        onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+      },
+    ];
+    /* eslint-enable no-console */
+  };
   // Prevents flash of "No Content" before rows are loaded
   const tableStatus = () => {
     if (typeof results === 'undefined') return status; // will handle errored state
@@ -99,7 +139,17 @@ const ContentViewTable = ({ response, status, error }) => {
       canSelectAll={false}
       cells={columns}
       autocompleteEndpoint="/content_views/auto_complete_search"
-    />
+    >
+      <React.Fragment>
+        <Button onClick={openForm} variant="primary" aria-label="create_content_view">
+          Create content view
+        </Button>
+        <CreateContentViewModal show={isModalOpen} setIsOpen={setIsModalOpen} aria-label="create_content_view_modal" />
+      </React.Fragment>
+      <React.Fragment>
+        <CopyContentViewModal cvId={actionableCvId} cvName={actionableCvName} show={copy} setIsOpen={setCopy} aria-label="copy_content_view_modal" />
+      </React.Fragment>
+    </TableWrapper>
   );
 };
 

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

@@ -41,7 +41,6 @@ const buildRow = (contentView, openColumn) => {
     },
   ];
   if (openColumn) row[openColumn].props.isOpen = true;
-
   return row;
 };
 
@@ -100,7 +99,7 @@ const buildRowsAndMapping = (contentViews, newRowMapping) => {
   const rows = [];
 
   contentViews.forEach((contentView) => {
-    const { id } = 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');
@@ -109,7 +108,9 @@ const buildRowsAndMapping = (contentViews, newRowMapping) => {
     const cells = buildRow(contentView, openColumn);
     const isOpen = !!openColumn;
 
-    rows.push({ isOpen, cells });
+    rows.push({
+      cvId: id, cvName: name, isOpen, cells,
+    });
     rows.push(...buildDetailDropdowns(id, rowIndex, openColumn));
   });