katello 3.18.5 → 4.0.0.rc1

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilters.js

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Label } from '@patternfly/react-core';
+import { TableVariant } from '@patternfly/react-table';
+import { STATUS } from 'foremanReact/constants';
+import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import TableWrapper from '../../../../components/Table/TableWrapper';
+import onSelect from '../../../../components/Table/helpers';
+import { getContentViewFilters } from '../ContentViewDetailActions';
+import {
+  selectCVFilters,
+  selectCVFiltersStatus,
+  selectCVFiltersError,
+} from '../ContentViewDetailSelectors';
+import { truncate } from '../../../../utils/helpers';
+import ContentType from './ContentType';
+
+// won't be needed when details pages are built, linking to old pages for now
+const cvFilterUrl = (cvId, filterId, type, errataByDate) => {
+  const repoType = type === 'docker' ? 'docker' : 'yum';
+  const filterType = errataByDate ? 'errata_by_date' : type;
+  const base = `/content_views/${cvId}/repositories/${repoType}/filters/${filterId}`;
+  const endings = {
+    rpm: '/package/details',
+    package_group: '/package-group/list',
+    erratum: '/errata/list',
+    errata_by_date: '/errata/date_type',
+    modulemd: '/module-stream/list',
+    docker: '/docker/details',
+  };
+
+  return base + endings[filterType];
+};
+
+const ContentViewFilters = ({ cvId }) => {
+  const response = useSelector(state => selectCVFilters(state, cvId), shallowEqual);
+  const status = useSelector(state => selectCVFiltersStatus(state, cvId), shallowEqual);
+  const error = useSelector(state => selectCVFiltersError(state, cvId), shallowEqual);
+  const [rows, setRows] = useState([]);
+  const [metadata, setMetadata] = useState({});
+  const [searchQuery, updateSearchQuery] = useState('');
+  const loading = status === STATUS.PENDING;
+
+  const columnHeaders = [
+    __('Name'),
+    __('Description'),
+    __('Updated'),
+    __('Content type'),
+    __('Inclusion type'),
+  ];
+
+  const buildRows = (results) => {
+    const newRows = [];
+    results.forEach((filter) => {
+      let errataByDate = false;
+      const {
+        id, name, type, description, updated_at: updatedAt, inclusion,
+      } = filter;
+      if (filter.type === 'erratum' && filter.rules[0].types) errataByDate = true;
+
+      const cells = [
+        { title: <a href={cvFilterUrl(cvId, id, type, errataByDate)}>{name}</a> },
+        truncate(description || ''),
+        { title: <LongDateTime date={updatedAt} showRelativeTimeTooltip /> },
+        { title: <ContentType type={type} errataByDate={errataByDate} /> },
+        {
+          title: (
+            <Label color={inclusion && 'blue'}>
+              {inclusion ? 'Include' : 'Exclude'}
+            </Label>),
+        },
+      ];
+
+      newRows.push({ cells });
+    });
+    return newRows;
+  };
+
+  useEffect(() => {
+    const { results, ...meta } = response;
+    setMetadata(meta);
+
+    if (!loading && results) {
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [JSON.stringify(response)]);
+
+  const emptyContentTitle = __("You currently don't have any filters for this content view.");
+  const emptyContentBody = __("Add filters using the 'Add filter' button above."); // needs link
+  const emptySearchTitle = __('No matching filters found');
+  const emptySearchBody = __('Try changing your search settings.');
+
+  return (
+    <TableWrapper
+      {...{
+        rows,
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        error,
+        status,
+      }}
+      onSelect={onSelect(rows, setRows)}
+      cells={columnHeaders}
+      variant={TableVariant.compact}
+      autocompleteEndpoint="/content_view_filters/auto_complete_search"
+      fetchItems={params => getContentViewFilters(cvId, params)}
+    />);
+};
+
+
+ContentViewFilters.propTypes = {
+  cvId: PropTypes.number.isRequired,
+};
+
+export default ContentViewFilters;

data/webpack/scenes/ContentViews/Details/Filters/__tests__/contentViewFilters.fixtures.json

@@ -0,0 +1,134 @@
+{
+  "total":6,
+  "subtotal":6,
+  "page":"1",
+  "per_page":"20",
+  "error":null,
+  "search":null,
+  "sort":{
+     "by":"name",
+     "order":"asc"
+  },
+  "results":[
+     {
+        "inclusion":true,
+        "id":4,
+        "name":"af1",
+        "description":"A really great filter",
+        "created_at":"2020-12-07 09:58:36 -0500",
+        "updated_at":"2020-12-07 10:42:05 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"rpm",
+        "rules":[
+           
+        ]
+     },
+     {
+        "inclusion":false,
+        "id":5,
+        "name":"Another filter",
+        "description":"hey",
+        "created_at":"2020-12-07 12:59:12 -0500",
+        "updated_at":"2020-12-07 12:59:12 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"package_group",
+        "rules":[
+           
+        ]
+     },
+     {
+        "inclusion":true,
+        "id":6,
+        "name":"f2",
+        "description":null,
+        "created_at":"2020-12-08 09:26:11 -0500",
+        "updated_at":"2020-12-08 09:26:11 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"erratum",
+        "rules":[
+           {
+              "content_view_filter_id":6,
+              "errata_id":"RHEA-2012:0059",
+              "date_type":"updated",
+              "id":3,
+              "created_at":"2020-12-08 10:32:25 -0500",
+              "updated_at":"2020-12-08 10:32:25 -0500"
+           }
+        ]
+     },
+     {
+        "inclusion":false,
+        "id":7,
+        "name":"f3",
+        "description":null,
+        "created_at":"2020-12-08 09:26:27 -0500",
+        "updated_at":"2020-12-08 09:26:27 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"erratum",
+        "rules":[
+           {
+              "content_view_filter_id":7,
+              "types":[
+                 "security",
+                 "enhancement",
+                 "bugfix"
+              ],
+              "date_type":"updated",
+              "id":2,
+              "created_at":"2020-12-08 09:26:27 -0500",
+              "updated_at":"2020-12-08 09:26:27 -0500"
+           }
+        ]
+     },
+     {
+        "inclusion":false,
+        "id":8,
+        "name":"f4",
+        "description":null,
+        "created_at":"2020-12-08 09:26:51 -0500",
+        "updated_at":"2020-12-08 09:26:51 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"modulemd",
+        "rules":[
+           
+        ]
+     },
+     {
+        "inclusion":true,
+        "id":9,
+        "name":"f5",
+        "description":null,
+        "created_at":"2020-12-08 09:32:53 -0500",
+        "updated_at":"2020-12-08 09:32:53 -0500",
+        "content_view":{
+        },
+        "repositories":[
+           
+        ],
+        "type":"docker",
+        "rules":[
+           
+        ]
+     }
+  ]
+}

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>
   );
 };