katello 4.5.1 → 4.8.0.rc2

data/webpack/scenes/ContentViews/Details/Histories/__tests__/contentViewHistory.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
 
-import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
 import ContentViewHistories from '../ContentViewHistories';
@@ -12,20 +12,10 @@ const cvHistories = api.getApiUrl('/content_views/1/history');
 const autocompleteUrl = '/content_views/1/history/auto_complete_search';
 
 let firstHistory;
-let searchDelayScope;
-let autoSearchScope;
 
 beforeEach(() => {
   const { results } = historyData;
   [firstHistory] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  nock.cleanAll();
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
 });
 
 test('Can call API and show history on page load', async (done) => {

data/webpack/scenes/ContentViews/Details/Promote/ContentViewVersionPromote.js

@@ -111,6 +111,7 @@ const ContentViewVersionPromote = ({
     <Modal
       title={__(`Promote version ${versionNameToPromote}`)}
       isOpen
+      ouiaId="promote-version"
       variant={ModalVariant.large}
       onClose={() => {
         setIsOpen(false);
@@ -137,6 +138,7 @@ const ContentViewVersionPromote = ({
           </FormGroup>
           {!alertDismissed && forcePromote.length > 0 && (
             <Alert
+              ouiaId="force-promotion-alert"
               variant="info"
               isInline
               title={__('Force promotion')}

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

@@ -91,7 +91,10 @@ const ContentViewRepositories = ({ cvId, details }) => {
   const [repoTypes, setRepoTypes] = useState({});
   const [bulkActionOpen, setBulkActionOpen] = useState(false);
   const { repository_ids: repositoryIds = [] } = details;
-
+  const resetFilters = () => {
+    setTypeSelected(allRepositories);
+    setStatusSelected(ALL_STATUSES);
+  };
   const {
     isSelected,
     selectOne,
@@ -243,11 +246,13 @@ const ContentViewRepositories = ({ cvId, details }) => {
         defaultFilters,
         selectedCount,
         selectNone,
+        resetFilters,
       }}
       ouiaId="content-view-repositories-table"
       {...selectAll}
       variant={TableVariant.compact}
-      autocompleteEndpoint="/repositories/auto_complete_search"
+      autocompleteEndpoint="/katello/api/v2/repositories"
+      bookmarkController="katello_content_view_repositories"
       fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[typeSelected, statusSelected]}
       displaySelectAllCheckbox={hasPermission(permissions, 'edit_content_views')}
@@ -297,7 +302,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
       }
     >
       <Thead>
-        <Tr key="version-header">
+        <Tr key="version-header" ouiaId="version-header">
           {hasPermission(permissions, 'edit_content_views') && <Th key="select-all" />}
           {columnHeaders.map((title, index) => {
             if (index === 0) {
@@ -325,6 +330,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
                 <Td>
                   <Checkbox
                     id={id}
+                    ouiaId={`repository-checkbox-${id}`}
                     isChecked={isSelected(id)}
                     onChange={selected =>
                       selectOne(selected, id, repo)

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
 
-import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
 import ContentViewRepositories from '../ContentViewRepositories';
@@ -17,14 +17,10 @@ const repoTypesResponse = [{ name: 'deb' }, { name: 'docker' }, { name: 'file' }
 const cvDetailsPath = api.getApiUrl('/content_views/1');
 
 let firstRepo;
-let searchDelayScope;
-let autoSearchScope;
 
 beforeEach(() => {
   const { results } = repoData;
   [firstRepo] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   nockInstance
     .persist() // match any query to this endpoint, gets cleaned up by `nock.cleanAll()`
     .get(api.getApiUrl('/repositories/repository_types'))
@@ -32,12 +28,6 @@ beforeEach(() => {
     .reply(200, repoTypesResponse);
 });
 
-afterEach(() => {
-  nock.cleanAll();
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
-});
-
 jest.mock('react-intl', () => ({ addLocaleData: () => { }, FormattedDate: () => 'mocked' }));
 
 test('Can enable and disable add repositories button', async (done) => {

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReassignActivationKeys.js

@@ -18,10 +18,8 @@ import {
   ExpandableSection,
   Popover,
   PopoverPosition,
-  Select,
   SelectDirection,
   SelectOption,
-  TextContent,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
@@ -39,6 +37,7 @@ import {
   getEnvironmentList,
   getNumberOfActivationKeys,
 } from '../BulkDeleteHelpers';
+import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
 
 export default () => {
   const dispatch = useDispatch();
@@ -107,6 +106,11 @@ export default () => {
     setSelectedEnvForAK(value);
   };
 
+  const onClear = () => {
+    setSelectedCVForAK(null);
+    setSelectedEnvForAK([]);
+  };
+
   const onSelect = (_event, selection) => {
     setSelectedCVForAK(selection);
     setToggleCVSelect(false);
@@ -170,16 +174,11 @@ export default () => {
         headerText={__('Select an environment')}
         multiSelect={false}
       />
-      <TextContent>
-        {__('Select a content view')}
-      </TextContent>
-      <Select
+      <ContentViewSelect
         selections={selectedCVForAK}
         onSelect={onSelect}
+        onClear={onClear}
         isDisabled={cvInEnvLoading || !selectOptions?.length || !selectedEnvForAK?.length}
-        id="selectCV"
-        name="selectCV"
-        aria-label="selectCV"
         placeholderText={placeHolder}
         isOpen={toggleCVSelect}
         onToggle={setToggleCVSelect}
@@ -189,7 +188,7 @@ export default () => {
         width={350}
       >
         {selectOptions}
-      </Select>
+      </ContentViewSelect>
     </>
   );
 };

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReassignHosts.js

@@ -18,10 +18,8 @@ import {
   ExpandableSection,
   Popover,
   PopoverPosition,
-  Select,
   SelectDirection,
   SelectOption,
-  TextContent,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
@@ -40,6 +38,7 @@ import {
   getNumberOfActivationKeys,
   getNumberOfHosts,
 } from '../BulkDeleteHelpers';
+import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
 
 export default () => {
   const dispatch = useDispatch();
@@ -115,6 +114,15 @@ export default () => {
     }
   };
 
+  const onClear = () => {
+    setSelectedCVForHosts(null);
+    setSelectedEnvForHosts([]);
+    if (numberOfAKs) {
+      setSelectedCVForAK(null);
+      setSelectedEnvForAK([]);
+    }
+  };
+
   const onSelect = (_event, selection) => {
     setSelectedCVForHosts(selection);
     if (numberOfAKs) {
@@ -194,16 +202,11 @@ export default () => {
         headerText={__('Select an environment')}
         multiSelect={false}
       />
-      <TextContent>
-        {__('Select a content view')}
-      </TextContent>
-      <Select
+      <ContentViewSelect
         selections={selectedCVForHosts}
         onSelect={onSelect}
+        onClear={onClear}
         isDisabled={cvInEnvLoading || !selectOptions?.length || !selectedEnvForHosts?.length}
-        id="selectCV"
-        name="selectCV"
-        aria-label="selectCV"
         placeholderText={placeHolder}
         isOpen={toggleCVSelect}
         onToggle={setToggleCVSelect}
@@ -213,7 +216,7 @@ export default () => {
         width={350}
       >
         {selectOptions}
-      </Select>
+      </ContentViewSelect>
     </>
   );
 };

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReviewEnvironments.js

@@ -64,9 +64,9 @@ export default () => {
               __('{versionOrVersions} {versionList} will be removed from the listed environment and will no longer be available for promotion.')}
           />}
       />
-      <TableComposable variant={TableVariant.compact}>
+      <TableComposable ouiaId="bulk-delete-env-table" variant={TableVariant.compact}>
         <Thead>
-          <Tr>
+          <Tr ouiaId="bulk-delete-env-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
           </Tr>
@@ -80,7 +80,7 @@ export default () => {
             activation_key_count: akCount,
             host_count: hostCount,
           }) => (
-            <Tr key={`${name}_${id}`}>
+            <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
               <Td>
                 <Label
                   /* TODO: Add "isCompact" to this on update of patternfly */

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/__tests__/BulkDeleteModal.test.js

@@ -41,6 +41,9 @@ const renderOptions = {
         response: contentViewData, status: STATUS.RESOLVED,
       },
     },
+    katello: {
+      hostDetails: {},
+    },
   },
 };
 

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.js

@@ -0,0 +1,151 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
+import CVVersionCompareHeader from './CVVersionCompareHeader';
+import { selectCVDetails, selectCVVersionDetails, selectCVVersionDetailsStatus } from '../../ContentViewDetailSelectors';
+import getCVVersionCompareTableConfigs from './CVVersionCompareConfig';
+import CVVersionCompareTable from './CVVersionCompareTable';
+import getContentViewDetails, { getContentViewVersionDetails } from '../../ContentViewDetailActions';
+import Loading from '../../../../../components/Loading';
+import './CVVersionCompare.scss';
+import EmptyStateMessage from '../../../../../components/Table/EmptyStateMessage';
+
+const CVVersionCompare = ({
+  cvId,
+  versionIds,
+  versionLabels,
+}) => {
+  const dispatch = useDispatch();
+  const { versionOneId: initialVersionOneId, versionTwoId: initialVersionTwoId } = versionIds;
+  const { versionOneLabel: initialVersionOne, versionTwoLabel: initialVersionTwo } = versionLabels;
+  const { versions: cvDetails } = useSelector(state => selectCVDetails(state, cvId));
+  const [versionOne, setVersionOne] = useState(initialVersionOne);
+  const [versionTwo, setVersionTwo] = useState(initialVersionTwo);
+  const getIdFromVersion = useCallback(version => (cvDetails?.find(result =>
+    Number(result.version) === Number(version))?.id), [cvDetails]);
+
+  const versionOneDetails = useSelector(state =>
+    selectCVVersionDetails(state, String(getIdFromVersion(versionOne)
+      ?? initialVersionOneId), cvId));
+  const versionTwoDetails = useSelector(state =>
+    selectCVVersionDetails(state, String(getIdFromVersion(versionTwo)
+      ?? initialVersionTwoId), cvId));
+
+  const [selectedViewBy, setSelectedViewBy] = useState('All');
+  const tableConfigs = getCVVersionCompareTableConfigs({
+    versionOne,
+    versionTwo,
+    versionOneId: String(getIdFromVersion(versionOne)),
+    versionTwoId: String(getIdFromVersion(versionTwo)),
+    viewBy: selectedViewBy.toLowerCase(),
+  });
+
+  const filteredTableConfigs = tableConfigs.filter(({ getCountKey }) =>
+    !!getCountKey(versionOneDetails, versionTwoDetails));
+  const versionOneDetailsStatus = useSelector(state =>
+    selectCVVersionDetailsStatus(state, String(getIdFromVersion(versionOne)
+      ?? initialVersionOneId), cvId));
+  const versionTwoDetailsStatus = useSelector(state =>
+    selectCVVersionDetailsStatus(state, String(getIdFromVersion(versionTwo)
+      ?? initialVersionTwoId), cvId));
+
+  const [currentActiveTab, setCurrentActiveTab] = useState(__('Repositories'));
+  const onSelect = (_e, eventKey) => {
+    // This prevents needless pushing on repeated clicks of a tab
+    if (currentActiveTab !== eventKey) {
+      setCurrentActiveTab(eventKey);
+    }
+  };
+  const activeTableConfig = filteredTableConfigs.find(config =>
+    String(currentActiveTab) === config.name);
+  const showTabs = filteredTableConfigs.length > 0;
+  const showCompareTable = !(versionOneDetailsStatus === STATUS.PENDING
+    ||
+    versionTwoDetailsStatus === STATUS.PENDING) && versionOne && versionTwo;
+
+  useEffect(() => {
+    if (!cvDetails) {
+      dispatch(getContentViewDetails(cvId));
+    }
+  }, [dispatch, cvDetails, cvId]);
+
+  useEffect(() => {
+    if (cvDetails) {
+      dispatch(getContentViewVersionDetails(String(getIdFromVersion(versionOne)
+        ?? initialVersionOneId), cvId));
+      dispatch(getContentViewVersionDetails(String(getIdFromVersion(versionTwo)
+        ?? initialVersionTwoId), cvId));
+    }
+  }, [dispatch, versionOne, versionTwo, cvId, getIdFromVersion, cvDetails,
+    initialVersionOneId, initialVersionTwoId]);
+
+  return (
+    <>
+      <CVVersionCompareHeader
+        versionOne={versionOne}
+        versionTwo={versionTwo}
+        cvId={cvId}
+        setVersionOne={setVersionOne}
+        setVersionTwo={setVersionTwo}
+        selectedViewBy={selectedViewBy}
+        setSelectedViewBy={setSelectedViewBy}
+      />
+      {showTabs && (
+        (showCompareTable &&
+          <div className="grid-with-top-border">
+            <Tabs
+              isVertical
+              activeKey={currentActiveTab}
+              onSelect={onSelect}
+              ouiaId="cv-version-compare-tabs"
+            >
+              {filteredTableConfigs.map((config) => {
+                const { name } = config;
+                return (
+                  <Tab
+                    key={name}
+                    eventKey={name}
+                    title={
+                      <>
+                        <TabTitleText>{name}</TabTitleText>
+                      </>}
+                  />
+                );
+              })}
+            </Tabs>
+            <div className="compare-table-container">
+              <CVVersionCompareTable
+                tableConfig={activeTableConfig}
+                versionOne={versionOne}
+                versionTwo={versionTwo}
+                currentActiveKey={currentActiveTab}
+                selectedViewBy={selectedViewBy}
+              />
+            </div>
+          </div >) || <Loading />)
+      }
+      {!showTabs &&
+      <EmptyStateMessage
+        title={__('Empty content view versions')}
+        body={__('No content in selected versions.')}
+        search
+      />
+      }
+    </>
+  );
+};
+CVVersionCompare.propTypes = {
+  cvId: PropTypes.number.isRequired,
+  versionIds: PropTypes.shape({
+    versionOneId: PropTypes.string,
+    versionTwoId: PropTypes.string,
+  }).isRequired,
+  versionLabels: PropTypes.shape({
+    versionOneLabel: PropTypes.string,
+    versionTwoLabel: PropTypes.string,
+  }).isRequired,
+};
+export default CVVersionCompare;

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.scss

@@ -0,0 +1,82 @@
+.content-view-header-content {
+  padding-top: 24px;
+
+  .pf-c-content {
+    dl {
+      margin: 0;
+    }
+  }
+
+  .pf-l-flex {
+    padding-top: 24px;
+  }
+}
+
+.grid-with-top-border {
+  border-top: 1px solid #d2d2d2;
+  margin-top: 24px;
+  display: flex;
+
+  .compare-table-container {
+    flex-grow: 4;
+  }
+  .pf-c-tabs.pf-m-vertical {
+    max-width: 230px;
+    border-right: 1px solid #d2d2d2;
+    height: unset;
+
+    .pf-c-tabs__item {
+      margin-top: 0;
+
+      button {
+        align-items: center;
+
+        .pf-c-label__content {
+          &::before {
+            border: none;
+          }
+        }
+      }
+
+      &.pf-m-current .pf-c-label__content {
+        font-weight: bold;
+      }
+    }
+  }
+
+  .pf-l-grid.pf-m-gutter {
+    display: initial;
+    width: 100%;
+  }
+}
+
+.cvv-spaced-tooltip {
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.cvv-compare-bordered-table-header {
+  th:nth-last-child(-n+2) {
+    padding-left: 2rem;
+  }
+
+  th:nth-last-child(3) {
+    margin-left: 2rem;
+    border-right:  var(--pf-global--BorderWidth--sm);
+    border-right-color: var(--pf-c-table--BorderColor);
+    border-right-style: inset;
+  }
+}
+
+.cvv-compare-bordered-table-rows {
+  td:nth-last-child(3) {
+    border-right:  var(--pf-global--BorderWidth--sm);
+    border-right-color: var(--pf-c-table--BorderColor);
+    border-right-style: inset;
+  }
+
+  td:nth-last-child(-n+2) {
+    padding-left: 4rem;
+  }
+}