katello 4.2.2 → 4.3.0.rc1

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

@@ -1,34 +1,57 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { Route } from 'react-router-dom';
 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';
+import cvVersionsData from './contentViewVersions.fixtures.json';
+import emptyCVVersionData from './emptyCVVersion.fixtures.json';
+import cvVersionsTasksData from './contentViewVersionsWithTask.fixtures.json';
+import contentViewTaskInProgressResponseData from './contentViewTaskInProgressResponse.fixtures.json';
+import contentViewTaskResponseData from './contentViewTaskResponse.fixtures.json';
+import cvDetailData from '../../../../ContentViews/__tests__/mockDetails.fixtures.json';
+import environmentPathsData from '../../../Publish/__tests__/environmentPaths.fixtures.json';
 
-const cvVersionsData = require('./contentViewVersions.fixtures.json');
-const emptyCVVersionData = require('./emptyCVVersion.fixtures.json');
-const cvVersionsTasksData = require('./contentViewVersionsWithTask.fixtures.json');
-const contentViewTaskInProgressResponseData = require('./contentViewTaskInProgressResponse.fixtures.json');
-const contentViewTaskResponseData = require('./contentViewTaskResponse.fixtures.json');
+const cvPromotePath = api.getApiUrl('/content_view_versions/10/promote');
+const promoteResponseData = contentViewTaskInProgressResponseData;
 
-const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
-const cvVersions = api.getApiUrl('/content_view_versions/');
+
+const environmentPathsPath = api.getApiUrl('/organizations/1/environments/paths');
+
+const withCVRoute = component => <Route path="/content_views/:id">{component}</Route>;
+
+const renderOptions = {
+  apiNamespace: `${CONTENT_VIEWS_KEY}_VERSIONS_5`,
+  routerParams: {
+    initialEntries: [{ pathname: '/content_views/5' }],
+    initialIndex: 1,
+  },
+};
+
+const cvVersions = api.getApiUrl('/content_view_versions');
 const autocompleteUrl = '/content_view_versions/auto_complete_search';
 const taskPollingUrl = '/foreman_tasks/api/tasks/6b900ff8-62bb-42ac-8c45-da86b7258520';
 
 let firstVersion;
 let searchDelayScope;
 let autoSearchScope;
+let envScope;
 
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
   searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
   autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  envScope = nockInstance
+    .get(environmentPathsPath)
+    .query(true)
+    .reply(200, environmentPathsData);
 });
 
 afterEach(() => {
   nock.cleanAll();
+  assertNockRequest(envScope);
   assertNockRequest(searchDelayScope);
   assertNockRequest(autoSearchScope);
 });
@@ -41,7 +64,7 @@ test('Can call API and show versions on page load', async (done) => {
     .reply(200, cvVersionsData);
 
   const { getByText, queryByText } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
@@ -63,7 +86,7 @@ test('Can link to view environment and see publish time', async () => {
     .reply(200, cvVersionsData);
 
   const { getByText, getAllByText } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
@@ -92,22 +115,19 @@ test('Can show package and erratas and link to list page', async () => {
     .reply(200, cvVersionsData);
 
   const { getByText, getAllByText } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
 
   await patientlyWaitFor(() => {
     expect(getAllByText(8)[0].closest('a'))
-      .toHaveAttribute('href', '/content_views/5/versions/11/packages/');
+      .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');
+      .toHaveAttribute('href', '/content_views/5#/versions/11/errata/');
+    expect(getByText(5)).toBeInTheDocument();
+    expect(getByText(3)).toBeInTheDocument();
+    expect(getByText(7)).toBeInTheDocument();
   });
 
   assertNockRequest(autocompleteScope);
@@ -122,16 +142,16 @@ test('Can show additional content and link to list page', async () => {
     .reply(200, cvVersionsData);
 
   const { getByText } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     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/');
+      .toHaveAttribute('href', '/content_views/5#/versions/11/files/');
+    expect(getByText('1 Deb packages').closest('a'))
+      .toHaveAttribute('href', '/versions/11/debPackages');
   });
 
   assertNockRequest(autocompleteScope);
@@ -146,7 +166,7 @@ test('Can load for empty versions', async () => {
     .reply(200, emptyCVVersionData);
 
   const { queryByText } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
@@ -173,7 +193,7 @@ test('Can call API and show versions with tasks on page load', async (done) => {
   const {
     getByLabelText, queryByText,
   } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
@@ -212,7 +232,7 @@ test('Can reload versions upon task completion', async (done) => {
   const {
     getByText, queryByLabelText, getByLabelText, queryByText,
   } = renderWithRedux(
-    <ContentViewVersions cvId={5} />,
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
     renderOptions,
   );
 
@@ -237,3 +257,52 @@ test('Can reload versions upon task completion', async (done) => {
   // Assert CV Versions API is called upon task completion
   assertNockRequest(reloadScope, done);
 });
+
+test('Can open Promote Modal', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvVersions)
+    .times(2)
+    .query(true)
+    .reply(200, cvVersionsData);
+  const cvPromoteParams = {
+    id: 10, versionEnvironments: [], description: '', environment_ids: [5], force: true,
+  };
+
+  const promoteScope = nockInstance
+    .post(cvPromotePath, cvPromoteParams)
+    .reply(202, promoteResponseData);
+
+  const {
+    getByText, queryByText, getByLabelText, getAllByLabelText,
+  } = renderWithRedux(
+    withCVRoute(<ContentViewVersions cvId={5} details={cvDetailData} />),
+    renderOptions,
+  );
+
+  expect(queryByText(`Version ${firstVersion.version}`)).toBeNull();
+  await patientlyWaitFor(() => {
+    expect(getByText(`Version ${firstVersion.version}`)).toBeInTheDocument();
+  });
+  // Expand Row Action
+  expect(getAllByLabelText('Actions')[1]).toHaveAttribute('aria-expanded', 'false');
+  fireEvent.click(getAllByLabelText('Actions')[1]);
+  expect(getAllByLabelText('Actions')[1]).toHaveAttribute('aria-expanded', 'true');
+  fireEvent.click(getByText('Promote'));
+  await patientlyWaitFor(() => {
+    expect(getByText('Select a lifecycle environment from the available promotion paths to promote new version.')).toBeInTheDocument();
+    expect(getByLabelText('prod')).toBeInTheDocument();
+  });
+  // Select env prod
+  fireEvent.click(getByLabelText('prod'));
+  fireEvent.click(getByLabelText('promote_content_view'));
+  // Modal closes itself
+  await patientlyWaitFor(() => {
+    expect(queryByText('Select a lifecycle environment from the available promotion paths to promote new version.')).toBeNull();
+  });
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+  assertNockRequest(promoteScope);
+  // Page is refreshed
+  assertNockRequest(scope, done);
+});

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

@@ -537,7 +537,7 @@
           "triggered_by_id": null
         }
       ],
-      "ansible collection_count": 0,
+      "ansible_collection_count": 0,
       "deb_count": 0,
       "docker_manifest_count": 0,
       "docker_manifest_list_count": 0,
@@ -685,7 +685,7 @@
         "triggered_by_id": null
       },
       "active_history": [],
-      "ansible collection_count": 0,
+      "ansible_collection_count": 0,
       "deb_count": 0,
       "docker_manifest_count": 0,
       "docker_manifest_list_count": 0,

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { number, shape } from 'prop-types';
+import ContentViewVersions from './ContentViewVersions';
+import ContentViewVersionDetails from './VersionDetails/ContentViewVersionDetails';
+
+const ContentViewVersionsRoutes = ({ cvId, details }) => (
+  <>
+    <Route exact path="/versions">
+      <ContentViewVersions cvId={cvId} details={details} />
+    </Route>
+    <Route path="/versions/:versionId([0-9]+)">
+      <ContentViewVersionDetails cvId={cvId} details={details} />
+    </Route>
+  </>
+);
+
+ContentViewVersionsRoutes.propTypes = {
+  cvId: number.isRequired,
+  details: shape({
+    permissions: shape({}),
+  }).isRequired,
+};
+
+export default ContentViewVersionsRoutes;

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

@@ -1,32 +1,35 @@
 import React from 'react';
+import { Route } from 'react-router-dom';
 import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
-
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import ContentViewDetails from '../ContentViewDetails';
 import CONTENT_VIEWS_KEY from '../../ContentViewsConstants';
+import cvDetailData from './contentViewDetails.fixtures.json';
 
-const cvDetailData = require('./contentViewDetails.fixtures.json');
 
-const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
-const cvDetailsPath = api.getApiUrl('/content_views/1');
+const withCVRoute = component => <Route path="/content_views/:id([0-9]+)">{component}</Route>;
 
-// 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!');
-jest.mock('../../Publish/PublishContentViewWizard.js', () => () => 'mocked!');
+const renderOptions = {
+  apiNamespace: `${CONTENT_VIEWS_KEY}_1`,
+  routerParams: {
+    initialEntries: [{ pathname: '/content_views/1', hash: '#/details' }],
+    initialIndex: 1,
+  },
+};
+
+const cvDetailsPath = api.getApiUrl('/content_views/1');
 
 test('Can call API and show details on page load', async (done) => {
   const { label, name, description } = cvDetailData;
+
   const scope = nockInstance
     .get(cvDetailsPath)
     .query(true)
     .reply(200, cvDetailData);
 
   const { getByLabelText } = renderWithRedux(
-    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    withCVRoute(<ContentViewDetails />),
     renderOptions,
   );
 
@@ -34,8 +37,9 @@ test('Can call API and show details on page load', async (done) => {
     expect(getByLabelText('name text value')).toHaveTextContent(name);
     expect(getByLabelText('label text value')).toHaveTextContent(label);
     expect(getByLabelText('description text value')).toHaveTextContent(description);
-    expect(getByLabelText('cv_breadcrumb')).toBeInTheDocument();
-    expect(getByLabelText('cv_breadcrumb_cv')).toHaveTextContent(name);
+    expect(getByLabelText('a_cv_index')).toBeInTheDocument();
+    expect(getByLabelText(`b_${name}`)).toBeInTheDocument();
+    expect(getByLabelText('c_details')).toBeInTheDocument();
   });
 
   assertNockRequest(scope, done);
@@ -57,7 +61,7 @@ test('Can edit text details such as name', async (done) => {
     .reply(200, updatedCVDetails);
 
   const { getByLabelText } = renderWithRedux(
-    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    withCVRoute(<ContentViewDetails />),
     renderOptions,
   );
 
@@ -94,7 +98,7 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
     .reply(200, updatedCVDetails);
 
   const { getByLabelText } = renderWithRedux(
-    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    withCVRoute(<ContentViewDetails />),
     renderOptions,
   );
 
@@ -120,7 +124,7 @@ test('Can link to view tasks', async () => {
     .reply(200, cvDetailData);
 
   const { getByText } = renderWithRedux(
-    <ContentViewDetails match={{ params: { id: 1 } }} />,
+    withCVRoute(<ContentViewDetails />),
     renderOptions,
   );
 

data/webpack/scenes/ContentViews/Publish/__tests__/publishContentView.test.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import * as reactRedux from 'react-redux';
 import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
-
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import PublishContentViewWizard from '../PublishContentViewWizard';
-
-const cvDetailData = require('../../Details/__tests__/contentViewDetails.fixtures.json');
+import cvDetailData from '../../Details/__tests__/contentViewDetails.fixtures.json';
+import publishResponseData from './publishResponse.fixture.json';
+import environmentPathsData from './environmentPaths.fixtures.json';
 
 const cvPublishPath = api.getApiUrl('/content_views/1/publish');
-const publishResponseData = require('./publishResponse.fixture.json');
 
 const environmentPathsPath = api.getApiUrl('/organizations/1/environments/paths');
-const environmentPathsData = require('./environmentPaths.fixtures.json');
 
 test('Can call API and show Wizard', async (done) => {
   const scope = nockInstance

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

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { omit } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { Button } from '@patternfly/react-core';
@@ -12,6 +13,11 @@ import CreateContentViewModal from '../Create/CreateContentViewModal';
 import CopyContentViewModal from '../Copy/CopyContentViewModal';
 import PublishContentViewWizard from '../Publish/PublishContentViewWizard';
 import { selectContentViews, selectContentViewStatus, selectContentViewError } from '../ContentViewSelectors';
+import ContentViewVersionPromote from '../Details/Promote/ContentViewVersionPromote';
+import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
+import ContentViewDeleteWizard from '../Delete/ContentViewDeleteWizard';
+import getContentViewDetails, { getContentViewVersions } from '../Details/ContentViewDetailActions';
+import { hasPermission } from '../helpers';
 
 const ContentViewTable = () => {
   const response = useSelector(selectContentViews);
@@ -24,13 +30,17 @@ const ContentViewTable = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [copy, setCopy] = useState(false);
   const [cvResults, setCvResults] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [cvTableStatus, setCvTableStatus] = useState(STATUS.PENDING);
   const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
+  const [isPromoteModalOpen, setIsPromoteModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [actionableCvDetails, setActionableCvDetails] = useState({});
   const [actionableCvId, setActionableCvId] = useState('');
   const [actionableCvName, setActionableCvName] = useState('');
   const [currentStep, setCurrentStep] = useState(1);
+  const dispatch = useDispatch();
+  const metadata = omit(response, ['results']);
+  const { can_create: canCreate = false } = response;
 
   const openForm = () => setIsModalOpen(true);
 
@@ -45,6 +55,29 @@ const ContentViewTable = () => {
     setIsPublishModalOpen(true);
   };
 
+  const openPromoteModal = (rowInfo) => {
+    dispatch(getEnvironmentPaths());
+    setActionableCvDetails({
+      id: rowInfo.cvId.toString(),
+      latestVersionId: rowInfo.latestVersionId,
+      latestVersionEnvironments: rowInfo.latestVersionEnvironments,
+      latestVersionName: rowInfo.latestVersionName,
+    });
+    setIsPromoteModalOpen(true);
+  };
+
+  const openDeleteModal = (rowInfo) => {
+    dispatch(getContentViewDetails(rowInfo.cvId));
+    dispatch(getContentViewVersions(rowInfo.cvId));
+    setActionableCvDetails({
+      id: rowInfo.cvId.toString(),
+      name: rowInfo.cvName,
+      environments: rowInfo.environments,
+      versions: rowInfo.versions,
+    });
+    setIsDeleteModalOpen(true);
+  };
+
   useDeepCompareEffect(
     () => {
       // Prevents flash of "No Content" before rows are loaded
@@ -59,13 +92,12 @@ const ContentViewTable = () => {
         return STATUS.PENDING; // Fallback to pending
       };
 
-      const { results, ...meta } = response;
+      const { results } = response;
       if (status === STATUS.ERROR) {
         setCvTableStatus(tableStatus());
       }
       if (!loadingResponse && results) {
         setCvResults(results);
-        setMetadata(meta);
         setCurrentStep(1);
         const { newRowMappingIds, ...tableData } = tableDataGenerator(results);
         setTable(tableData);
@@ -74,21 +106,9 @@ const ContentViewTable = () => {
       }
     },
     [response, status, loadingResponse, setTable, setRowMappingIds,
-      setCvResults, setCvTableStatus, setCurrentStep, setMetadata, cvResults, rowMappingIds],
+      setCvResults, setCvTableStatus, setCurrentStep, cvResults, rowMappingIds],
   );
 
-  const onSelect = (_event, isSelected, rowId) => {
-    let rows;
-    if (rowId === -1) {
-      rows = table.rows.map(row => ({ ...row, selected: isSelected }));
-    } else {
-      rows = [...table.rows];
-      rows[rowId].selected = isSelected;
-    }
-
-    setTable(prevTable => ({ ...prevTable, rows }));
-  };
-
   const onCollapse = (event, rowId, isOpen) => {
     let rows;
     if (rowId === -1) {
@@ -104,36 +124,39 @@ const ContentViewTable = () => {
   const actionResolver = (rowData, { _rowIndex }) => {
     // don't show actions for the expanded parts
     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'),
-        onClick: (_event, rowId, rowInfo) => {
-          openPublishModal(rowInfo);
-        },
-      },
-      {
-        title: __('Promote'),
-        isDisabled: true,
-        onClick: (_event, rowId, rowInfo) => console.log(`clicked on row ${rowInfo.cvName}`),
+    const publishAction = {
+      title: __('Publish'),
+      onClick: (_event, _rowId, rowInfo) => {
+        openPublishModal(rowInfo);
       },
-      {
-        title: __('Copy'),
-        onClick: (_event, rowId, rowInfo) => {
-          setCopy(true);
-          setActionableCvId(rowInfo.cvId.toString());
-          setActionableCvName(rowInfo.cvName);
-        },
-      },
-      {
-        title: __('Delete'),
-        isDisabled: true,
-        onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
+    };
+
+    const promoteAction = {
+      title: __('Promote'),
+      isDisabled: !rowData.cvVersionCount,
+      onClick: (_event, _rowId, rowInfo) => openPromoteModal(rowInfo),
+    };
+
+    const copyAction = {
+      title: __('Copy'),
+      onClick: (_event, _rowId, rowInfo) => {
+        setCopy(true);
+        setActionableCvId(rowInfo.cvId.toString());
+        setActionableCvName(rowInfo.cvName);
       },
+    };
+
+    const deleteAction = {
+      title: __('Delete'),
+      onClick: (_event, _rowId, rowInfo) => openDeleteModal(rowInfo),
+    };
+
+    return [
+      ...(hasPermission(rowData.permissions, 'publish_content_views') ? [publishAction] : []),
+      ...(hasPermission(rowData.permissions, 'promote_or_remove_content_views') ? [promoteAction] : []),
+      ...(canCreate ? [copyAction] : []),
+      ...(hasPermission(rowData.permissions, 'destroy_content_views') ? [deleteAction] : []),
     ];
-    /* eslint-enable no-console */
   };
 
   const additionalListeners = new Array(isPublishModalOpen);
@@ -153,12 +176,12 @@ const ContentViewTable = () => {
         emptyContentBody,
         emptySearchTitle,
         emptySearchBody,
-        onSelect,
         actionResolver,
         searchQuery,
         updateSearchQuery,
         additionalListeners,
       }}
+      bookmarkController="katello_content_views"
       variant={TableVariant.compact}
       status={cvTableStatus}
       fetchItems={useCallback(getContentViews, [])}
@@ -166,28 +189,47 @@ const ContentViewTable = () => {
       canSelectAll={false}
       cells={columns}
       autocompleteEndpoint="/content_views/auto_complete_search"
-    >
-      <>
-        <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" />
-      </>
-      <>
-        <CopyContentViewModal cvId={actionableCvId} cvName={actionableCvName} show={copy} setIsOpen={setCopy} aria-label="copy_content_view_modal" />
-      </>
-      {isPublishModalOpen &&
+      actionButtons={
         <>
-          <PublishContentViewWizard
-            details={actionableCvDetails}
-            show={isPublishModalOpen}
-            setIsOpen={setIsPublishModalOpen}
+          {canCreate &&
+            <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" />
+          <CopyContentViewModal cvId={actionableCvId} cvName={actionableCvName} show={copy} setIsOpen={setCopy} aria-label="copy_content_view_modal" />
+          {isPublishModalOpen &&
+            <PublishContentViewWizard
+              details={actionableCvDetails}
+              show={isPublishModalOpen}
+              setIsOpen={setIsPublishModalOpen}
+              currentStep={currentStep}
+              setCurrentStep={setCurrentStep}
+              aria-label="publish_content_view_modal"
+            />
+          }
+          {isPromoteModalOpen &&
+            <ContentViewVersionPromote
+              cvId={actionableCvDetails.id}
+              versionIdToPromote={actionableCvDetails.latestVersionId}
+              versionNameToPromote={actionableCvDetails.latestVersionName}
+              versionEnvironments={actionableCvDetails.latestVersionEnvironments}
+              setIsOpen={setIsPromoteModalOpen}
+            />
+          }
+          {isDeleteModalOpen && <ContentViewDeleteWizard
+            cvId={actionableCvDetails.id}
+            cvEnvironments={actionableCvDetails.environments}
+            cvVersions={actionableCvDetails.versions}
+            show={isDeleteModalOpen}
+            setIsOpen={setIsDeleteModalOpen}
             currentStep={currentStep}
             setCurrentStep={setCurrentStep}
-            aria-label="publish_content_view_modal"
-          />
-        </>}
-    </TableWrapper>
+            aria-label="delete_content_view_modal"
+          />}
+        </>
+      }
+    />
   );
 };