katello 4.2.2 → 4.3.0.rc1

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js

@@ -1,7 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDispatch, useSelector } from 'react-redux';
-import { Bullseye, Split, SplitItem, Button } from '@patternfly/react-core';
+import { Bullseye, Split, SplitItem, Button, ActionList,
+  ActionListItem, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { TableVariant, fitContent, TableText } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
@@ -31,15 +32,17 @@ import { ADDED, ALL_STATUSES, NOT_ADDED } from '../../ContentViewsConstants';
 import SelectableDropdown from '../../../../components/SelectableDropdown/SelectableDropdown';
 import '../../../../components/EditableTextInput/editableTextInput.scss';
 import ComponentContentViewAddModal from './ComponentContentViewAddModal';
+import ComponentContentViewBulkAddModal from './ComponentContentViewBulkAddModal';
+import { hasPermission } from '../../helpers';
 
 const ContentViewComponents = ({ cvId, details }) => {
   const response = useSelector(state => selectCVComponents(state, cvId));
   const status = useSelector(state => selectCVComponentsStatus(state, cvId));
   const error = useSelector(state => selectCVComponentsError(state, cvId));
+  const { results, ...metadata } = response;
   const componentAddedStatus = useSelector(state => selectCVComponentAddStatus(state, cvId));
   const componentRemovedStatus = useSelector(state => selectCVComponentRemoveStatus(state, cvId));
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
   const [versionEditing, setVersionEditing] = useState(false);
@@ -47,6 +50,9 @@ const ContentViewComponents = ({ cvId, details }) => {
   const [componentCvEditing, setComponentCvEditing] = useState(null);
   const [componentLatest, setComponentLatest] = useState(false);
   const [componentId, setComponentId] = useState(null);
+  const [selectedComponentsToAdd, setSelectedComponentsToAdd] = useState(null);
+  const [bulkAdding, setBulkAdding] = useState(false);
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
   const dispatch = useDispatch();
 
   const columnHeaders = [
@@ -62,21 +68,22 @@ const ContentViewComponents = ({ cvId, details }) => {
   const addComponentsResolved = componentAddedStatus === STATUS.RESOLVED;
   const removeComponentsResolved = componentRemovedStatus === STATUS.RESOLVED;
 
-  const { label } = details || {};
+  const { label, permissions } = details || {};
 
   const bulkRemoveEnabled = () => rows.some(row => row.selected && row.added);
+  const bulkAddEnabled = () => rows.some(row => row.selected && !row.added);
 
   const onAdd = useCallback(({
     componentCvId, published, added, latest,
   }) => {
-    if (published) {
-      dispatch(getContentViewDetails(componentCvId));
+    if (published) { // If 1 or more versions present, open a modal to let user select version
+      dispatch(getContentViewDetails(componentCvId, 'bulk_add'));
       setVersionEditing(true);
       setCompositeCvEditing(cvId);
       setComponentCvEditing(componentCvId);
       setComponentLatest(latest);
       setComponentId(added);
-    } else {
+    } else { // if no versions are present, default to always latest and add cv without modal
       dispatch(addComponent({
         compositeContentViewId: cvId,
         components: [{ latest: true, content_view_id: componentCvId }],
@@ -93,6 +100,13 @@ const ContentViewComponents = ({ cvId, details }) => {
     }));
   };
 
+  const addBulk = () => {
+    const rowsToAdd = rows.filter(row => row.selected && !row.added);
+    setSelectedComponentsToAdd(rowsToAdd);
+    setCompositeCvEditing(cvId);
+    setBulkAdding(true);
+  };
+
   const onRemove = (componentIdToRemove) => {
     dispatch(removeComponent({
       compositeContentViewId: cvId,
@@ -100,11 +114,16 @@ const ContentViewComponents = ({ cvId, details }) => {
     }));
   };
 
-  const buildRows = useCallback((results) => {
+  const toggleBulkAction = () => {
+    setBulkActionOpen(!bulkActionOpen);
+  };
+
+  const buildRows = useCallback(() => {
     const newRows = [];
     results.forEach((componentCV) => {
       const {
-        id: componentCvId, content_view: cv, content_view_version: cvVersion, latest,
+        id: componentCvId, content_view: cv, content_view_version: cvVersion,
+        latest, component_content_view_versions: componentCvVersions,
       } = componentCV;
       const { environments, repositories } = cvVersion || {};
       const {
@@ -115,24 +134,24 @@ const ContentViewComponents = ({ cvId, details }) => {
 
       const cells = [
         { title: <Bullseye><ContentViewIcon composite={false} /></Bullseye> },
-        { title: <Link to={urlBuilder('labs/content_views', '', id)}>{name}</Link> },
+        { title: <a href={urlBuilder('content_views', '') + id}>{name}</a> },
         {
           title:
   <Split>
     <SplitItem>
       <ComponentVersion {...{ componentCV }} />
     </SplitItem>
-    {componentCvId && cvVersion &&
+    {hasPermission(permissions, 'edit_content_views') && componentCvId && cvVersion &&
     <SplitItem>
       <Button
         className="foreman-edit-icon"
         aria-label="edit_version"
         variant="plain"
         onClick={() => {
-                            onAdd({
-                              componentCvId: id, published: cvVersion, added: componentCvId, latest,
-                            });
-                          }}
+                      onAdd({
+                        componentCvId: id, published: cvVersion, added: componentCvId, latest,
+                      });
+                    }}
       >
         <PencilAltIcon />
       </Button>
@@ -140,18 +159,24 @@ const ContentViewComponents = ({ cvId, details }) => {
   </Split>,
         },
         { title: environments ? <ComponentEnvironments {...{ environments }} /> : __('Not yet published') },
-        { title: <Link to={urlBuilder(`labs/content_views/${id}#repositories`, '')}>{ repositories ? repositories.length : 0 }</Link> },
+        { title: <Link to={urlBuilder(`content_views/${id}#repositories`, '')}>{repositories ? repositories.length : 0}</Link> },
         {
           title: <AddedStatusLabel added={!!componentCvId} />,
         },
         { title: <TableText wrapModifier="truncate">{description || __('No description')}</TableText> },
       ];
       newRows.push({
-        componentCvId: id, added: componentCvId, published: cvVersion, latest, cells,
+        componentCvId: id,
+        componentCvName: name,
+        added: componentCvId,
+        componentCvVersions,
+        published: cvVersion,
+        latest,
+        cells,
       });
     });
     return newRows;
-  }, [onAdd]);
+  }, [onAdd, results, permissions]);
 
   const actionResolver = (rowData, { _rowIndex }) => [
     {
@@ -175,21 +200,28 @@ const ContentViewComponents = ({ cvId, details }) => {
     },
   ];
 
+  const dropdownItems = [
+    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!(bulkAddEnabled())} component="button" onClick={addBulk}>
+      {__('Add')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!(bulkRemoveEnabled())} component="button" onClick={removeBulk}>
+      {__('Remove')}
+    </DropdownItem>,
+  ];
+
   const emptyContentTitle = __(`No content views belong to ${label}`);
   const emptyContentBody = __('Please add some content views.');
   const emptySearchTitle = __('No matching content views found');
   const emptySearchBody = __('Try changing your search settings.');
-  const activeFilters = statusSelected && statusSelected !== ALL_STATUSES;
+  const activeFilters = [statusSelected];
+  const defaultFilters = [ALL_STATUSES];
 
   useDeepCompareEffect(() => {
-    const { results, ...meta } = response;
-    setMetadata(meta);
-
     if (!loading && results) {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [response, buildRows, loading]);
+  }, [results, response, buildRows, loading]);
 
   return (
     <TableWrapper
@@ -205,8 +237,9 @@ const ContentViewComponents = ({ cvId, details }) => {
         error,
         status,
         activeFilters,
-        actionResolver,
+        defaultFilters,
       }}
+      actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
       onSelect={onSelect(rows, setRows)}
       cells={columnHeaders}
       variant={TableVariant.compact}
@@ -214,35 +247,58 @@ const ContentViewComponents = ({ cvId, details }) => {
       fetchItems={useCallback(params =>
         getContentViewComponents(cvId, params, statusSelected), [cvId, statusSelected])}
       additionalListeners={[statusSelected, addComponentsResolved, removeComponentsResolved]}
-    >
-      <Split hasGutter>
-        <SplitItem>
-          <SelectableDropdown
-            items={[ADDED, NOT_ADDED, ALL_STATUSES]}
-            title={__('Status')}
-            selected={statusSelected}
-            setSelected={setStatusSelected}
-            placeholderText={__('Status')}
-          />
-        </SplitItem>
-        <SplitItem>
-          <Button onClick={removeBulk} isDisabled={!(bulkRemoveEnabled())} variant="secondary" aria-label="remove_components">
-            {__('Remove content views')}
-          </Button>
-        </SplitItem>
-      </Split>
-      {versionEditing &&
-        <ComponentContentViewAddModal
-          cvId={compositeCvEditing}
-          componentCvId={componentCvEditing}
-          componentId={componentId}
-          latest={componentLatest}
-          show={versionEditing}
-          setIsOpen={setVersionEditing}
-          aria-label="copy_content_view_modal"
-        />
+      actionButtons={
+        <>
+          <Split hasGutter>
+            <SplitItem>
+              <SelectableDropdown
+                items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+                title={__('Status')}
+                selected={statusSelected}
+                setSelected={setStatusSelected}
+                placeholderText={__('Status')}
+              />
+            </SplitItem>
+            {hasPermission(permissions, 'edit_content_views') &&
+              <SplitItem>
+                <ActionList>
+                  <ActionListItem>
+                    <Button onClick={addBulk} isDisabled={!(bulkAddEnabled())} variant="secondary" aria-label="bulk_add_components">
+                      {__('Add content views')}
+                    </Button>
+                  </ActionListItem>
+                  <ActionListItem>
+                    <Dropdown
+                      toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                      isOpen={bulkActionOpen}
+                      isPlain
+                      dropdownItems={dropdownItems}
+                    />
+                  </ActionListItem>
+                </ActionList>
+              </SplitItem>
+            }
+          </Split>
+          {versionEditing &&
+            <ComponentContentViewAddModal
+              cvId={compositeCvEditing}
+              componentCvId={componentCvEditing}
+              componentId={componentId}
+              latest={componentLatest}
+              show={versionEditing}
+              setIsOpen={setVersionEditing}
+              aria-label="edit_component_modal"
+            />}
+          {bulkAdding &&
+          <ComponentContentViewBulkAddModal
+            cvId={compositeCvEditing}
+            rowsToAdd={selectedComponentsToAdd}
+            onClose={() => setBulkAdding(false)}
+            aria-label="bulk_add_components_modal"
+          />}
+        </>
       }
-    </TableWrapper>
+    />
   );
 };
 
@@ -250,12 +306,14 @@ ContentViewComponents.propTypes = {
   cvId: PropTypes.number.isRequired,
   details: PropTypes.shape({
     label: PropTypes.string,
+    permissions: PropTypes.shape({}),
   }),
 };
 
 ContentViewComponents.defaultProps = {
   details: {
     label: '',
+    permissions: {},
   },
 };
 

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/contentViewComponents.fixtures.json

@@ -76,8 +76,8 @@
       },
       "content_view": {
         "id": 13,
-        "name": "10",
-        "label": "10",
+        "name": "cv-10",
+        "label": "cv-10",
         "description": "",
         "next_version": 34,
         "latest_version": "33.0",
@@ -122,7 +122,21 @@
           }
         ],
         "repositories": []
-      }
+      },
+      "component_content_view_versions": [
+        {
+          "id": 36,
+          "version": "1.0"
+        },
+        {
+          "id": 42,
+          "version": "3.0"
+        },
+        {
+          "id": 44,
+          "version": "4.0"
+        }
+      ]
     },
     {
       "latest": true,
@@ -140,14 +154,15 @@
       },
       "content_view": {
         "id": 9,
-        "name": "6",
-        "label": "6",
+        "name": "cv-6",
+        "label": "cv-6",
         "description": "",
         "next_version": 1,
         "latest_version": null,
         "version_count": 0
       },
-      "content_view_version": null
+      "content_view_version": null,
+      "component_content_view_versions": []
     }
   ]
 }

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/contentViewComponents.test.js

@@ -4,13 +4,14 @@ import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting }
 import api from '../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
 import ContentViewComponents from '../ContentViewComponents';
-
-const cvComponentData = require('./contentViewComponents.fixtures.json');
-const cvUnpublishedComponentData = require('./unpublishedCVComponents.fixtures.json');
-const cvPublishedComponentData = require('./publishedContentViewDetails.fixtures.json');
+import cvComponentData from './contentViewComponents.fixtures.json';
+import cvUnpublishedComponentData from './unpublishedCVComponents.fixtures.json';
+import cvPublishedComponentData from './publishedContentViewDetails.fixtures.json';
+import cvDetails from '../../__tests__/contentViewDetails.fixtures.json';
 
 const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
-const cvComponents = api.getApiUrl('/content_views/4/content_view_components/show_all?per_page=20&page=1&status=All');
+const cvComponentsWithoutSearch = api.getApiUrl('/content_views/4/content_view_components/show_all?per_page=20&page=1&status=All');
+const cvComponents = api.getApiUrl('/content_views/4/content_view_components/show_all?per_page=20&page=1&search=&status=All');
 const addComponentURL = api.getApiUrl('/content_views/4/content_view_components/add');
 const publishedComponentDetailsURL = api.getApiUrl('/content_views/13');
 const removeComponentURL = api.getApiUrl('/content_views/4/content_view_components/remove');
@@ -41,7 +42,7 @@ test('Can call API and show components on page load', async (done) => {
     .reply(200, cvComponentData);
 
   const { getByText, queryByText } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
 
@@ -63,7 +64,7 @@ test('Can call API and show unpublished components', async (done) => {
   const unpublishedComponent = cvUnpublishedComponentData.results[1];
 
   const { getByText, queryByText, getAllByText } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
 
@@ -85,7 +86,7 @@ test('Can link to view environment', async () => {
     .reply(200, cvComponentData);
 
   const { getAllByText } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
 
@@ -114,7 +115,7 @@ test('Can search for component content views in composite view', async (done) =>
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, searchQueryMatcher);
   const { getByText, queryByText, getByLabelText } =
-    renderWithRedux(<ContentViewComponents cvId={4} />, renderOptions);
+    renderWithRedux(<ContentViewComponents cvId={4} details={cvDetails} />, renderOptions);
 
   // Basic results showing
   await patientlyWaitFor(() => {
@@ -152,7 +153,16 @@ test('Can handle no components being present', async (done) => {
     .get(cvComponents)
     .reply(200, noResults);
 
-  const mockDetails = { label: 'test_empty' };
+  const mockDetails = {
+    label: 'test_empty',
+    permissions: {
+      view_content_views: true,
+      edit_content_views: true,
+      destroy_content_views: true,
+      publish_content_views: true,
+      promote_or_remove_content_views: true,
+    },
+  };
   const { queryByText } =
     renderWithRedux(<ContentViewComponents cvId={4} details={mockDetails} />, renderOptions);
 
@@ -165,7 +175,7 @@ test('Can handle no components being present', async (done) => {
 test('Can add published component views to content view with modal', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance
-    .get(cvComponents)
+    .get(cvComponentsWithoutSearch)
     .reply(200, cvComponentData);
 
   const returnScope = nockInstance
@@ -174,6 +184,7 @@ test('Can add published component views to content view with modal', async (done
 
   const publishedComponentVersionsScope = nockInstance
     .get(publishedComponentDetailsURL)
+    .query(true)
     .reply(200, cvPublishedComponentData);
 
   const addComponentParams = {
@@ -188,7 +199,7 @@ test('Can add published component views to content view with modal', async (done
   const {
     getByText, getByLabelText, queryByLabelText, getAllByLabelText,
   } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
   await patientlyWaitFor(() => {
@@ -217,7 +228,7 @@ test('Can add published component views to content view with modal', async (done
 test('Can add unpublished component views to content view', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance
-    .get(cvComponents)
+    .get(cvComponentsWithoutSearch)
     .reply(200, cvComponentData);
 
   const returnScope = nockInstance
@@ -234,7 +245,7 @@ test('Can add unpublished component views to content view', async (done) => {
     .reply(200, {});
 
   const { getByText, getAllByLabelText } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
   await patientlyWaitFor(() => {
@@ -253,7 +264,7 @@ test('Can add unpublished component views to content view', async (done) => {
 test('Can remove component views from content view', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance
-    .get(cvComponents)
+    .get(cvComponentsWithoutSearch)
     .reply(200, cvComponentData);
 
   const returnScope = nockInstance
@@ -270,7 +281,7 @@ test('Can remove component views from content view', async (done) => {
     .reply(200, {});
 
   const { getByText, getAllByLabelText } = renderWithRedux(
-    <ContentViewComponents cvId={4} />,
+    <ContentViewComponents cvId={4} details={cvDetails} />,
     renderOptions,
   );
   await patientlyWaitFor(() => {
@@ -285,3 +296,56 @@ test('Can remove component views from content view', async (done) => {
   assertNockRequest(removeComponentScope);
   assertNockRequest(returnScope, done);
 });
+
+test('Can bulk add component views to content view with modal', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvComponentsWithoutSearch)
+    .reply(200, cvComponentData);
+
+  const returnScope = nockInstance
+    .get(cvComponents)
+    .reply(200, cvComponentData);
+
+  const addComponentParams = {
+    compositeContentViewId: 4,
+    components: [{ content_view_version_id: 44 }, { latest: true, content_view_id: 9 }],
+  };
+
+  const addComponentScope = nockInstance
+    .put(addComponentURL, addComponentParams)
+    .reply(200, {});
+
+  const {
+    getByText, getByLabelText, queryByText,
+  } = renderWithRedux(
+    <ContentViewComponents cvId={4} details={cvDetails} />,
+    renderOptions,
+  );
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('Select row 2')).toBeInTheDocument();
+    expect(getByLabelText('bulk_add_components')).toHaveAttribute('aria-disabled', 'true');
+  });
+  fireEvent.click(getByLabelText('Select row 2'));
+  fireEvent.click(getByLabelText('Select row 3'));
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('bulk_add_components')).toHaveAttribute('aria-disabled', 'false');
+  });
+  fireEvent.click(getByLabelText('bulk_add_components'));
+  await patientlyWaitFor(() => {
+    expect(getByText('Add component content views')).toBeInTheDocument();
+  });
+  fireEvent.click(getByLabelText('version-select-cv-10'));
+  fireEvent.click(getByLabelText('cv-10-3.0'));
+
+  fireEvent.click(getByLabelText('add_components'));
+  await patientlyWaitFor(() => {
+    expect(queryByText('Add component content views')).not.toBeInTheDocument();
+    expect(getByLabelText('bulk_add_components')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+  assertNockRequest(addComponentScope);
+  assertNockRequest(returnScope, done);
+});