katello 4.3.0.rc4 → 4.4.0.rc2

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

@@ -18,8 +18,8 @@ let autoSearchScope;
 beforeEach(() => {
   const { results } = historyData;
   [firstHistory] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 });
 
 afterEach(() => {

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

@@ -41,7 +41,7 @@ const ContentCounts = ({ productId, repoId, counts }) => {
   Object.keys(counts).forEach((type) => {
     const count = counts[type];
     let info = repoLabels[type];
-    const config = ContentConfig().find(typeConfig =>
+    const config = ContentConfig.find(typeConfig =>
       typeConfig.names.singularLabel === type);
 
     if (config) {

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

@@ -143,14 +143,35 @@ const ContentViewRepositories = ({ cvId, details }) => {
 
   const onAdd = (repos) => {
     const { repository_ids: repositoryIds = [] } = details;
-    dispatch(updateContentView(cvId, { repository_ids: repositoryIds.concat(repos) }));
+    dispatch(updateContentView(
+      cvId,
+      { repository_ids: repositoryIds.concat(repos) },
+      () =>
+        dispatch(getContentViewRepositories(
+          cvId,
+          typeSelected !== 'All repositories' ? {
+            content_type: repoTypes[typeSelected],
+          } : {},
+          statusSelected,
+        )),
+    ));
   };
 
   const onRemove = (repos) => {
     const reposToDelete = [].concat(repos);
     const { repository_ids: repositoryIds = [] } = details;
     const deletedRepos = repositoryIds.filter(x => !reposToDelete.includes(x));
-    dispatch(updateContentView(cvId, { repository_ids: deletedRepos }));
+    dispatch(updateContentView(
+      cvId, { repository_ids: deletedRepos },
+      () =>
+        dispatch(getContentViewRepositories(
+          cvId,
+          typeSelected !== 'All repositories' ? {
+            content_type: repoTypes[typeSelected],
+          } : {},
+          statusSelected,
+        )),
+    ));
   };
 
   const addBulk = () => {
@@ -263,7 +284,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
             <SplitItem>
               <ActionList>
                 <ActionListItem>
-                  <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="secondary" aria-label="add_repositories">
+                  <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="primary" aria-label="add_repositories">
                     {__('Add repositories')}
                   </Button>
                 </ActionListItem>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
 
 import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
 import api from '../../../../../services/api';
@@ -23,8 +23,8 @@ let autoSearchScope;
 beforeEach(() => {
   const { results } = repoData;
   [firstRepo] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  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'))
@@ -66,7 +66,7 @@ test('Can enable and disable add repositories button', async (done) => {
 
 test('Can add repositories', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const cvAddparams = { repository_ids: [58, 62, 64, 106] };
+  const cvAddparams = { include_permissions: true, repository_ids: [58, 62, 64, 106] };
 
   const repoAddscope = nockInstance
     .put(cvDetailsPath, cvAddparams)
@@ -92,16 +92,19 @@ test('Can add repositories', async (done) => {
   expect(getByLabelText('add_repositories')).toHaveAttribute('aria-disabled', 'true');
   getByLabelText('Select all rows').click();
   getByLabelText('add_repositories').click();
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
+
   assertNockRequest(repoAddscope);
 
   assertNockRequest(cvDetailScope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
+  act(done);
 });
 
 test('Can remove repositories', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const cvRemoveParams = { repository_ids: [58, 62, 64] };
+  const cvRemoveParams = { include_permissions: true, repository_ids: [58, 62, 64] };
   const scope = nockInstance
     .get(cvAllRepos)
     .query(true)
@@ -131,9 +134,12 @@ test('Can remove repositories', async (done) => {
     expect(getByLabelText('bulk_remove')).toBeInTheDocument();
   });
   getByLabelText('bulk_remove').click();
+  await patientlyWaitFor(() => expect(getByText(firstRepo.name)).toBeInTheDocument());
+
   assertNockRequest(repoRemoveScope);
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(cvDetailScope);
   assertNockRequest(scope, done);
+  act(done);
 });

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionContent.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
-import ContentConfig from './../../../Content/ContentConfig';
+import { camelCase } from 'lodash';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import ContentConfig from '../../../Content/ContentConfig';
 import InactiveText from '../../components/InactiveText';
 
 const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
@@ -17,24 +18,26 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
   } = cvVersion;
 
 
-  const genericContentTypes = ContentConfig().filter(({ names: { singularLabel } }) => {
-    // Ansible Collections has a tab in version details so it's handled separately below.
-    if (singularLabel === 'ansible_collection') return false;
-    const countLabel = `${singularLabel}_count`;
-    return !!cvVersion[countLabel];
-  }).map(({ names: { singularLabel, singularLowercase, pluralLowercase } }) => {
-    const countParam = `${singularLabel}_count`;
-    const count = cvVersion[countParam];
-    return {
-      label: count > 1 ? pluralLowercase : singularLowercase,
-      count,
-    };
-  });
+  const contentConfigTypes = ContentConfig.filter(({ names: { singularLabel } }) =>
+    !!cvVersion[`${singularLabel}_count`])
+    .map(({
+      names: {
+        singularLabel, singularLowercase, pluralLowercase, pluralLabel,
+      },
+    }) => {
+      const countParam = `${singularLabel}_count`;
+      const count = cvVersion[countParam];
+      return {
+        pluralLabel,
+        label: count > 1 ? pluralLowercase : singularLowercase,
+        count,
+      };
+    });
 
   const noCounts =
     !Number(debCount) && !Number(dockerManifestCount) && !Number(dockerTagCount) &&
     !Number(fileCount) && !Number(moduleStreamCount) && !Number(ansibleCollectionCount) &&
-    !genericContentTypes?.length;
+    !contentConfigTypes?.length;
 
   if (noCounts) {
     return <InactiveText text={__('No content')} />;
@@ -59,7 +62,7 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
       {dockerManifestCount > 0 && dockerTagCount > 0 &&
         <>
           <Link to={`/versions/${versionId}/dockerTags`}>
-            {`${dockerTagCount} Docker tags`}
+            {`${dockerTagCount} Container tags`}
           </Link><br />
           <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/dockerTags`, '')}>{`${dockerManifestCount} Container manifests`}</a><br />
         </>
@@ -69,16 +72,13 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
           <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/files`, '')}>{`${fileCount} Files`}</a><br />
         </>
       }
-      {ansibleCollectionCount > 0 &&
-        <>
-          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/ansibleCollections`, '')}>{`${ansibleCollectionCount} Collections`}</a><br />
-        </>
-      }
-      {genericContentTypes?.length > 0 &&
-        genericContentTypes.map(({ label, count }) => (
-          <span key={label} style={{ whiteSpace: 'pre-line' }}>
-            {`${count} ${label}`}
-          </span>))
+      {contentConfigTypes?.length > 0 &&
+        contentConfigTypes.map(({ label, count, pluralLabel }) => (
+          <React.Fragment key={label}>
+            <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/${camelCase(pluralLabel)}`, '')}>
+              {`${count} ${label}`}
+            </a><br />
+          </React.Fragment>))
       }
     </>
   );

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -92,7 +92,7 @@ const ContentViewVersions = ({ cvId, details }) => {
       { title: <ContentViewVersionEnvironments {...{ environments }} /> },
       {
         title: Number(packageCount) ?
-          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/packages`, '')}>{packageCount}</a> :
+          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/rpmPackages`, '')}>{packageCount}</a> :
           <InactiveText text={__('No packages')} />,
       },
       { title: <ContentViewVersionErrata {...{ cvId, versionId, errataCounts }} /> },

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVEnvironmentSelectionForm.js

@@ -96,24 +96,24 @@ const CVEnvironmentSelectionForm = () => {
               id, name, activation_key_count: akCount,
               host_count: hostCount,
             }, rowIndex) =>
-            (
-              <Tr key={`${name}_${id}`}>
-                <Td
-                  key={`${name}__${id}_select`}
-                  select={{
-                    rowIndex,
-                    onSelect: (event, isSelected) => onSelect(event, isSelected, id),
-                    isSelected: selectedEnvSet.has(id) || deleteFlow || removeDeletionFlow,
-                    disable: deleteFlow || removeDeletionFlow,
-                  }}
-                />
-                <Td>
-                  {name}
-                </Td>
-                <Td>{hostCount}</Td>
-                <Td>{akCount}</Td>
-              </Tr>
-            ))
+              (
+                <Tr key={`${name}_${id}`}>
+                  <Td
+                    key={`${name}__${id}_select`}
+                    select={{
+                      rowIndex,
+                      onSelect: (event, isSelected) => onSelect(event, isSelected, id),
+                      isSelected: selectedEnvSet.has(id) || deleteFlow || removeDeletionFlow,
+                      disable: deleteFlow || removeDeletionFlow,
+                    }}
+                  />
+                  <Td>
+                    {name}
+                  </Td>
+                  <Td>{hostCount}</Td>
+                  <Td>{akCount}</Td>
+                </Tr>
+              ))
             }
           </Tbody>
         </TableComposable>}

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignActivationKeysForm.js

@@ -117,9 +117,9 @@ const CVReassignActivationKeysForm = () => {
       >
         <AffectedActivationKeys
           {...{
-          cvId,
-          versionEnvironments,
-          selectedEnvSet,
+            cvId,
+            versionEnvironments,
+            selectedEnvSet,
           }}
           deleteCV={false}
         />

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignHostsForm.js

@@ -114,9 +114,9 @@ const CVReassignHostsForm = () => {
       >
         <AffectedHosts
           {...{
-          cvId,
-          versionEnvironments,
-          selectedEnvSet,
+            cvId,
+            versionEnvironments,
+            selectedEnvSet,
           }}
           deleteCV={false}
         />

data/webpack/scenes/ContentViews/Details/Versions/Delete/__tests__/cvVersionRemove.test.js

@@ -34,8 +34,8 @@ let envScope;
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -131,8 +131,8 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const hostAutocompleteUrl = '/hosts/auto_complete_search';
   const hostAutocompleteScope = mockForemanAutocomplete(nockInstance, hostAutocompleteUrl);
-  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)
@@ -223,8 +223,8 @@ test('Can open Remove wizard and remove version from environment with activation
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const akAutocompleteUrl = '/activation_keys/auto_complete_search';
   const akAutocompleteScope = mockAutocomplete(nockInstance, akAutocompleteUrl);
-  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)

data/webpack/scenes/ContentViews/Details/Versions/Delete/affectedActivationKeys.js

@@ -71,7 +71,7 @@ const AffectedActivationKeys = ({
             </Td>
             <Td><EnvironmentLabels environments={environment} /></Td>
           </Tr>
-            ))
+        ))
         }
       </Tbody>
     </TableWrapper>

data/webpack/scenes/ContentViews/Details/Versions/Delete/affectedHosts.js

@@ -72,7 +72,7 @@ const AffectedHosts = ({
             <Td><EnvironmentLabels environments={environment} /></Td>
           </Tr>
         ))
-      }
+        }
       </Tbody>
     </TableWrapper>
   );

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailConfig.js

@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
-import { startCase } from 'lodash';
+import { startCase, camelCase } from 'lodash';
 import {
   BugIcon,
   SecurityIcon,
   EnhancementIcon,
 } from '@patternfly/react-icons';
 import {
-  getAnsibleCollections,
   getContentViewVersions,
   getDebPackages,
   getDockerTags,
@@ -20,10 +19,9 @@ import {
   getPackageGroups,
   getRepositories,
   getRPMPackages,
+  getContent,
 } from '../../ContentViewDetailActions';
 import {
-  selectAnsibleCollections,
-  selectAnsibleCollectionsStatus,
   selectCVVersions,
   selectCVVersionsStatus,
   selectDebPackages,
@@ -42,11 +40,15 @@ import {
   selectRPMPackageGroupsStatus,
   selectRPMPackages,
   selectRPMPackagesStatus,
+  selectContent,
+  selectContentStatus,
 } from '../../ContentViewDetailSelectors';
 import ContentViewVersionRepositoryCell from './ContentViewVersionRepositoryCell';
+import ContentConfig from '../../../../Content/ContentConfig';
 
 export const TableType = PropTypes.shape({
   name: PropTypes.string,
+  route: PropTypes.string,
   getCountKey: PropTypes.func,
   repoType: PropTypes.string,
   responseSelector: PropTypes.func,
@@ -64,6 +66,7 @@ export const TableType = PropTypes.shape({
 export default ({ cvId, versionId }) => [
   {
     name: __('Components'),
+    route: 'components',
     getCountKey: item => item?.component_view_count,
     responseSelector: state => selectCVVersions(state, cvId),
     statusSelector: state => selectCVVersionsStatus(state, cvId),
@@ -91,6 +94,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Repositories'),
+    route: 'repositories',
     getCountKey: item => item?.repositories?.length,
     responseSelector: state => selectRepositories(state),
     statusSelector: state => selectRepositoriesStatus(state),
@@ -127,6 +131,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('RPM Packages'),
+    route: 'rpmPackages',
     repoType: 'yum',
     getCountKey: item => item?.rpm_count,
     responseSelector: state => selectRPMPackages(state),
@@ -148,6 +153,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('RPM Package Groups'),
+    route: 'rpmPackageGroups',
     repoType: 'yum',
     getCountKey: item => item?.package_group_count,
     responseSelector: state => selectRPMPackageGroups(state),
@@ -161,6 +167,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Files'),
+    route: 'files',
     repoType: 'file',
     getCountKey: item => item?.file_count,
     responseSelector: state => selectFiles(state),
@@ -180,6 +187,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Errata'),
+    route: 'errata',
     repoType: 'yum',
     getCountKey: item => item?.erratum_count,
     responseSelector: state => selectErrata(state),
@@ -233,6 +241,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Module Streams'),
+    route: 'moduleStreams',
     repoType: 'yum',
     getCountKey: item => item?.module_stream_count,
     responseSelector: state => selectModuleStreams(state),
@@ -255,6 +264,7 @@ export default ({ cvId, versionId }) => [
   },
   {
     name: __('Deb Packages'),
+    route: 'debPackages',
     repoType: 'deb',
     getCountKey: item => item?.deb_count,
     responseSelector: state => selectDebPackages(state),
@@ -274,37 +284,8 @@ export default ({ cvId, versionId }) => [
     ],
   },
   {
-    name: __('Ansible Collections'),
-    repoType: 'ansible_collection',
-    getCountKey: item => item?.ansible_collection_count,
-    responseSelector: state => selectAnsibleCollections(state),
-    statusSelector: state => selectAnsibleCollectionsStatus(state),
-    autocompleteEndpoint: `/ansible_collections/auto_complete_search?content_view_version_id=${versionId}`,
-    fetchItems: params => getAnsibleCollections({ content_view_version_id: versionId, ...params }),
-    columnHeaders: [
-      {
-        title: __('Name'),
-        getProperty: item => (
-          <a href={urlBuilder(`ansible_collections/${item?.id}`, '')}>
-            {item?.name}
-          </a>),
-      },
-      {
-        title: __('Author'),
-        getProperty: item => item?.namespace,
-      },
-      {
-        title: __('Version'),
-        getProperty: item => item?.version,
-      },
-      {
-        title: __('Checksum'),
-        getProperty: item => item?.checksum,
-      },
-    ],
-  },
-  {
-    name: __('Docker Tags'),
+    name: __('Container tags'),
+    route: 'dockerTags',
     repoType: 'docker',
     getCountKey: item => item?.docker_tag_count,
     responseSelector: state => selectDockerTags(state),
@@ -329,4 +310,19 @@ export default ({ cvId, versionId }) => [
       { title: __('Product Name'), getProperty: item => item?.product?.name },
     ],
   },
+  ...ContentConfig.map(({
+    names: { pluralTitle, pluralLabel, singularLabel },
+    columnHeaders,
+  }) => ({
+    name: pluralTitle,
+    route: camelCase(pluralLabel),
+    repoType: singularLabel,
+    getCountKey: item => item[`${singularLabel}_count`],
+    responseSelector: state => selectContent(pluralLabel, state),
+    statusSelector: state => selectContentStatus(pluralLabel, state),
+    autocompleteEndpoint: `/${pluralLabel}/auto_complete_search?content_view_version_id=${versionId}`,
+    fetchItems: params =>
+      getContent(pluralLabel, { content_view_version_id: versionId, ...params }),
+    columnHeaders,
+  })),
 ];

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.js

@@ -3,7 +3,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useParams, Route, useHistory, useLocation, Redirect, Switch } from 'react-router-dom';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { STATUS } from 'foremanReact/constants';
-import { isEmpty, camelCase, first } from 'lodash';
+import { isEmpty, first } from 'lodash';
 import { Grid, Tabs, Tab, TabTitleText, Label } from '@patternfly/react-core';
 import { number, shape } from 'prop-types';
 import './ContentViewVersionDetails.scss';
@@ -68,13 +68,14 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
   const filteredTableConfigs = tableConfigs.filter(({ getCountKey }) => !!getCountKey(response));
   const { repositories } = versionDetails;
   const showTabs = filteredTableConfigs.length > 0 && repositories;
-  const getCurrentActiveKey = tab ?? camelCase(first(filteredTableConfigs)?.name);
+  const getCurrentActiveKey = tab ?? first(filteredTableConfigs)?.route;
 
   return (
     <Grid>
       <ContentViewVersionDetailsHeader
         versionDetails={versionDetails}
         onEdit={editDiscription}
+        loading={status === STATUS.PENDING}
         details={details}
       />
       {showTabs &&
@@ -84,10 +85,10 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
             onSelect={onSelect}
             isVertical
           >
-            {filteredTableConfigs.map(({ name, getCountKey }) => (
+            {filteredTableConfigs.map(({ route, name, getCountKey }) => (
               <Tab
-                key={name}
-                eventKey={camelCase(name)}
+                key={route}
+                eventKey={route}
                 title={
                   <>
                     <TabTitleText>{name}</TabTitleText>
@@ -100,9 +101,9 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
           <Switch>
             {filteredTableConfigs.map(config => (
               <Route
-                key={camelCase(config.name)}
+                key={config.route}
                 exact
-                path={`/versions/:versionId([0-9]+)/${camelCase(config.name)}`}
+                path={`/versions/:versionId([0-9]+)/${config.route}`}
               >
                 <ContentViewVersionDetailsTable
                   tableConfig={config}
@@ -111,7 +112,7 @@ const ContentViewVersionDetails = ({ cvId, details }) => {
               </Route>))
             }
             <Redirect
-              to={`/versions/${versionId}/${camelCase(first(filteredTableConfigs).name)}`}
+              to={`/versions/${versionId}/${first(filteredTableConfigs).route}`}
             />
           </Switch>
         </div>

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.scss

@@ -20,16 +20,20 @@
   .pf-c-tabs.pf-m-vertical {
     max-width: 230px;
     border-right: 1px solid #d2d2d2;
+
     .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;
       }
@@ -37,8 +41,7 @@
   }
 
   .pf-l-grid.pf-m-gutter {
-    padding: 24px;
     display: initial;
     width: 100%;
   }
-}
+}