katello 4.3.0.rc1 → 4.3.0.rc4

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -10,6 +10,7 @@ import { createContentView } from '../ContentViewsActions';
 import { selectCreateContentViews, selectCreateContentViewStatus, selectCreateContentViewError } from './ContentViewCreateSelectors';
 import { LabelDependencies, LabelAutoPublish, LabelImportOnly } from './ContentViewFormComponents';
 import ContentViewIcon from '../components/ContentViewIcon';
+import './CreateContentViewForm.scss';
 
 const CreateContentViewForm = ({ setModalOpen }) => {
   const dispatch = useDispatch();
@@ -63,6 +64,8 @@ const CreateContentViewForm = ({ setModalOpen }) => {
     return (<Redirect to={`/content_views/${id}`} />);
   }
 
+  const submitDisabled = name.length <= 2 || label.length <= 2 || saving;
+
   return (
     <Form onSubmit={(e) => {
       e.preventDefault();
@@ -106,6 +109,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         <Grid hasGutter>
           <GridItem span={6}>
             <Tile
+              style={{ height: '100%' }}
               isStacked
               aria-label="component_tile"
               icon={<ContentViewIcon composite={false} />}
@@ -114,11 +118,12 @@ const CreateContentViewForm = ({ setModalOpen }) => {
               onClick={() => { setComponent(true); setComposite(false); }}
               isSelected={component}
             >
-              {__('Single content view consisting of repositories')}
+              {__('Single content view consisting of e.g. repositories')}
             </Tile>
           </GridItem>
           <GridItem span={6}>
             <Tile
+              style={{ height: '100%' }}
               isStacked
               aria-label="composite_tile"
               icon={<ContentViewIcon composite />}
@@ -166,7 +171,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
         <Button
           aria-label="create_content_view"
           variant="primary"
-          isDisabled={saving}
+          isDisabled={submitDisabled}
           type="submit"
         >
           {__('Create content view')}

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.scss

@@ -0,0 +1,7 @@
+.pf-c-tile__title {
+  font-size: 16px;
+}
+
+.pf-c-tile__icon {
+  min-height: 38px;
+}

data/webpack/scenes/ContentViews/Create/__tests__/createContentView.test.js

@@ -69,9 +69,9 @@ test('Displays dependent fields correctly', () => {
   expect(getByText('Label')).toBeInTheDocument();
   expect(getByText('Composite content view')).toBeInTheDocument();
   expect(getByText('Component content view')).toBeInTheDocument();
-  expect(getByText('Solve Dependencies')).toBeInTheDocument();
-  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
-  expect(getByText('Import Only')).toBeInTheDocument();
+  expect(getByText('Solve dependencies')).toBeInTheDocument();
+  expect(queryByText('Auto publish')).not.toBeInTheDocument();
+  expect(getByText('Import only')).toBeInTheDocument();
 
   // label auto_set
   fireEvent.change(getByLabelText('input_name'), { target: { value: '123 2123' } });
@@ -79,13 +79,13 @@ test('Displays dependent fields correctly', () => {
 
   // display Auto Publish when Composite CV
   fireEvent.click(getByLabelText('composite_tile'));
-  expect(queryByText('Solve Dependencies')).not.toBeInTheDocument();
-  expect(getByText('Auto Publish')).toBeInTheDocument();
-  expect(queryByText('Import Only')).not.toBeInTheDocument();
+  expect(queryByText('Solve dependencies')).not.toBeInTheDocument();
+  expect(getByText('Auto publish')).toBeInTheDocument();
+  expect(queryByText('Import only')).not.toBeInTheDocument();
 
   // display Solve Dependencies when Component CV
   fireEvent.click(getByLabelText('component_tile'));
-  expect(getByText('Solve Dependencies')).toBeInTheDocument();
-  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
-  expect(getByText('Import Only')).toBeInTheDocument();
+  expect(getByText('Solve dependencies')).toBeInTheDocument();
+  expect(queryByText('Auto publish')).not.toBeInTheDocument();
+  expect(getByText('Import only')).toBeInTheDocument();
 });

data/webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js

@@ -62,7 +62,7 @@ const ContentViewDeleteWizard =
 
     const environmentSelectionStep = {
       id: 1,
-      name: __('Remove from environments'),
+      name: __('Remove versions from environments'),
       component: <CVDeleteEnvironmentSelection />,
     };
     const affectedHostsStep = {
@@ -78,7 +78,7 @@ const ContentViewDeleteWizard =
     };
     const reviewStep = {
       id: 4,
-      name: __('Review'),
+      name: __('Review details'),
       component: <CVDeletionReview />,
       canJumpTo: canReview,
       nextButtonText: __('Delete'),
@@ -135,7 +135,7 @@ const ContentViewDeleteWizard =
         setSelectedCVNameForHosts,
         affectedActivationKeys,
         affectedHosts,
-        }}
+      }}
       >
         <Wizard
           title={__('Delete content view')}
@@ -143,9 +143,9 @@ const ContentViewDeleteWizard =
           steps={steps}
           startAtStep={currentStep}
           onClose={() => {
-              setIsOpen(false);
-              setCurrentStep(0);
-            }}
+            setIsOpen(false);
+            setCurrentStep(0);
+          }}
           isOpen={show}
         />
       </CVDeleteContext.Provider>

data/webpack/scenes/ContentViews/Delete/Steps/CVDeleteEnvironmentsSelection.js

@@ -9,6 +9,7 @@ import { pluralize } from '../../../../utils/helpers';
 import Loading from '../../../../components/Loading';
 import './CVEnvironmentSelectionForm.scss';
 import InactiveText from '../../components/InactiveText';
+import WizardHeader from '../../components/WizardHeader';
 
 const CVDeleteEnvironmentSelection = () => {
   const {
@@ -35,25 +36,26 @@ const CVDeleteEnvironmentSelection = () => {
 
   return (
     <>
-      <h2>{__('Remove versions from environments')}</h2>
-      {!resolved && <Loading loadingText={__('Loading versions')} />}
-      {resolved &&
-        <>
+      <WizardHeader
+        title={__('Remove versions from environments')}
+        description={resolved &&
           <Flex>
-            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            <FlexItem style={{ marginRight: '8px' }}><ExclamationTriangleIcon /></FlexItem>
             {versionCount ?
-              (
-                <FlexItem style={{ marginBottom: '0.5em' }}>
-                  {__(`${pluralize(versionCount, 'content view version')} in the environments below will be removed when content view is deleted`)}
-                </FlexItem>
-              ) :
-              (
-                <FlexItem style={{ marginBottom: '0.5em' }}>
-                  {__('This content view does not have any versions associated.')}
-                </FlexItem>
-              )
+              <FlexItem>
+                {__(`${pluralize(versionCount, 'content view version')} in the environments below will be removed when content view is deleted`)}
+              </FlexItem>
+              :
+              <FlexItem>
+                {__('This content view does not have any versions associated.')}
+              </FlexItem>
             }
-          </Flex>
+          </Flex>}
+      />
+      {!resolved ?
+        <Loading loadingText={__('Loading versions')} /> :
+        <>
+
           {results?.map((version, index) => (
             <ExpandableSection
               key={version.id}
@@ -72,27 +74,27 @@ const CVDeleteEnvironmentSelection = () => {
                   </Thead>
                   <Tbody>
                     {version?.environments?.map((env, rowIndex) => {
-                  const {
-                    id, name, activation_key_count: akCount, host_count: hostCount,
-                  } = env;
-                  return (
-                    <Tr key={`${name}_${id}`}>
-                      <Td
-                        key={`${name}__${id}_select`}
-                        select={{
-                          rowIndex,
-                          isSelected: true,
-                          disable: true,
-                        }}
-                      />
-                      <Td>
-                        {name}
-                      </Td>
-                      <Td>{hostCount}</Td>
-                      <Td>{akCount}</Td>
-                    </Tr>
-                  );
-                })}
+                      const {
+                        id, name, activation_key_count: akCount, host_count: hostCount,
+                      } = env;
+                      return (
+                        <Tr key={`${name}_${id}`}>
+                          <Td
+                            key={`${name}__${id}_select`}
+                            select={{
+                              rowIndex,
+                              isSelected: true,
+                              disable: true,
+                            }}
+                          />
+                          <Td>
+                            {name}
+                          </Td>
+                          <Td>{hostCount}</Td>
+                          <Td>{akCount}</Td>
+                        </Tr>
+                      );
+                    })}
                   </Tbody>
                 </TableComposable> :
                 <InactiveText text={__('This version is not promoted to any environments.')} />

data/webpack/scenes/ContentViews/Delete/Steps/CVDeletionFinish.js

@@ -1,9 +1,10 @@
 import React, { useContext, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-import { getContentViewVersions, removeContentViewVersion } from '../../Details/ContentViewDetailActions';
+import { removeContentViewVersion } from '../../Details/ContentViewDetailActions';
 import { selectRemoveCVVersionResponse, selectRemoveCVVersionStatus } from '../../Details/ContentViewDetailSelectors';
 import getContentViews from '../../ContentViewsActions';
 import CVDeleteContext from '../CVDeleteContext';
@@ -23,14 +24,19 @@ const CVDeletionFinish = () => {
   const removeResolved = removeCVStatus === STATUS.RESOLVED;
   const dispatch = useDispatch();
   const [removeDispatched, setRemoveDispatched] = useState(false);
+  const { push } = useHistory();
 
   useDeepCompareEffect(() => {
     if (removeResolved && removeDispatched) {
+      dispatch(getContentViews());
+      push('/content_views');
       setIsOpen(false);
-      dispatch(getContentViewVersions(cvId));
-      dispatch(getContentViews);
     }
-  }, [removeCVResponse, removeResolved, setIsOpen, dispatch, cvId, removeDispatched]);
+    if (removeCVStatus === STATUS.ERROR) {
+      setIsOpen(false);
+    }
+  }, [removeCVResponse, removeCVStatus, removeResolved,
+    setIsOpen, dispatch, cvId, removeDispatched, push]);
 
   useDeepCompareEffect(() => {
     if (!removeDispatched) {

data/webpack/scenes/ContentViews/Delete/Steps/CVDeletionReview.js

@@ -6,6 +6,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import CVDeleteContext from '../CVDeleteContext';
 import { selectCVActivationKeys, selectCVHosts } from '../../Details/ContentViewDetailSelectors';
 import { pluralize } from '../../../../utils/helpers';
+import WizardHeader from '../../components/WizardHeader';
 
 const CVDeletionReview = () => {
   const {
@@ -19,42 +20,43 @@ const CVDeletionReview = () => {
   const { results: akResponse } = activationKeysResponse || {};
   return (
     <>
-      <h2>{__('Review Details')}</h2>
-      {cvEnvironments.length ?
-        (__('This content view will be deleted along with all versions from the environments listed below. ' +
-          'Changes listed below will be effective after clicking Delete.')) :
-        (__('This content view will be deleted. Changes will be effective after clicking Delete.'))
-      }
+      <WizardHeader
+        title={__('Review details')}
+        description={cvEnvironments.length ?
+          (__('This content view will be deleted along with all versions from the environments listed below. ' +
+            'Changes listed below will be effective after clicking Delete.')) :
+          (__('This content view will be deleted. Changes will be effective after clicking Delete.'))}
+      />
       {(cvEnvironments.length !== 0) &&
-      <>
-        <h3>{__('Environments')}</h3>
-        <Flex>
-          <FlexItem><ExclamationTriangleIcon /></FlexItem>
-          <FlexItem style={{ marginBottom: '0.5em' }}>{__('All versions will be removed from these environments')}</FlexItem>
-        </Flex>
-        <Flex>
-          {cvEnvironments?.map(({ name, id }) =>
-            <FlexItem key={name}><Label isTruncated color="purple" href={`/lifecycle_environments/${id}`}>{name}</Label></FlexItem>)}
-        </Flex>
-      </>}
+        <>
+          <h3>{__('Environments')}</h3>
+          <Flex>
+            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            <FlexItem style={{ marginBottom: '0.5em' }}>{__('All versions will be removed from these environments')}</FlexItem>
+          </Flex>
+          <Flex>
+            {cvEnvironments?.map(({ name, id }) =>
+              <FlexItem key={name}><Label isTruncated color="purple" href={`/lifecycle_environments/${id}`}>{name}</Label></FlexItem>)}
+          </Flex>
+        </>}
       {affectedHosts &&
-      <>
-        <h3>{__('Content hosts')}</h3>
-        <Flex>
-          <FlexItem><ExclamationTriangleIcon /></FlexItem>
-          <FlexItem><p>{__(`${pluralize(hostResponse.length, 'host')} will be moved to content view ${selectedCVNameForHosts} in `)}</p></FlexItem>
-          <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForHost[0].id}`}>{selectedEnvForHost[0].name}</Label></FlexItem>
-        </Flex>
-      </>}
+        <>
+          <h3>{__('Content hosts')}</h3>
+          <Flex>
+            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            <FlexItem><p>{__(`${pluralize(hostResponse.length, 'host')} will be moved to content view ${selectedCVNameForHosts} in `)}</p></FlexItem>
+            <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForHost[0].id}`}>{selectedEnvForHost[0].name}</Label></FlexItem>
+          </Flex>
+        </>}
       {affectedActivationKeys &&
-      <>
-        <h3>{__('Activation keys')}</h3>
-        <Flex>
-          <FlexItem><ExclamationTriangleIcon /></FlexItem>
-          <FlexItem><p>{__(`${pluralize(akResponse.length, 'activation key')} will be moved to content view ${selectedCVNameForAK} in `)}</p></FlexItem>
-          <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForAK[0].id}`}>{selectedEnvForAK[0].name}</Label></FlexItem>
-        </Flex>
-      </>}
+        <>
+          <h3>{__('Activation keys')}</h3>
+          <Flex>
+            <FlexItem><ExclamationTriangleIcon /></FlexItem>
+            <FlexItem><p>{__(`${pluralize(akResponse.length, 'activation key')} will be moved to content view ${selectedCVNameForAK} in `)}</p></FlexItem>
+            <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForAK[0].id}`}>{selectedEnvForAK[0].name}</Label></FlexItem>
+          </Flex>
+        </>}
     </>
   );
 };

data/webpack/scenes/ContentViews/Delete/__tests__/contentViewDelete.test.js

@@ -75,7 +75,9 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
     .query(true)
     .reply(200, cvDetailsData);
 
-  const { getByText, getAllByLabelText, queryByText } =
+  const {
+    getAllByText, getByText, getAllByLabelText, queryByText,
+  } =
     renderWithRedux(<ContentViewsPage />, renderOptions);
   expect(queryByText(firstCV.name)).toBeNull();
   // Assert that the CV name is now showing on the screen, but wait for it to appear.
@@ -84,7 +86,7 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
   fireEvent.click(getAllByLabelText('Actions')[0]);
   expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(getByText('Delete'));
-  await patientlyWaitFor(() => expect(queryByText('Remove versions from environments')).toBeInTheDocument());
+  await patientlyWaitFor(() => expect(getAllByText('Remove versions from environments')[1]).toBeInTheDocument());
 
   assertNockRequest(scope);
   assertNockRequest(scopeBookmark);
@@ -117,7 +119,6 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
 
   const cvVersionsScope = nockInstance
     .get(cvVersionsPath)
-    .times(2)
     .query(true)
     .reply(200, cvVersionsData);
 
@@ -126,13 +127,17 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
     .query(true)
     .reply(200, cvDetailsData);
 
+  const cvRedirectScope = nockInstance
+    .get(api.getApiUrl('/content_views?organization_id=1&nondefault=true&include_permissions=true'))
+    .reply(200, cvIndexData);
+
   const cvDeleteParams = {
     destroy_content_view: true,
     system_content_view_id: 2,
     system_environment_id: 9,
     key_content_view_id: 2,
     key_environment_id: 9,
-    id: '20',
+    id: 20,
   };
 
   const cvDeleteScope = nockInstance
@@ -166,7 +171,7 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(getByText('Delete'));
   await patientlyWaitFor(() => {
-    expect(queryByText('Remove versions from environments')).toBeInTheDocument();
+    expect(getAllByText('Remove versions from environments')[1]).toBeInTheDocument();
     expect(queryByText('Version 1.0')).toBeInTheDocument();
   });
   fireEvent.click(getByText('Next'));
@@ -210,7 +215,7 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   // Move to Review
   fireEvent.click(getByText('Next'));
   await patientlyWaitFor(() => {
-    expect(getByText('Review Details')).toBeInTheDocument();
+    expect(getAllByText('Review details')[1]).toBeInTheDocument();
     expect(getByText('Environments')).toBeInTheDocument();
     expect(getByText('Content hosts')).toBeInTheDocument();
     expect(getByText('1 host will be moved to content view cv2 in')).toBeInTheDocument();
@@ -237,5 +242,5 @@ test('Can open Delete wizard and delete CV with all steps', async (done) => {
   assertNockRequest(activationKeysScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(cvDeleteScope);
-  assertNockRequest(cvVersionsScope, done);
+  assertNockRequest(cvRedirectScope, done);
 });

data/webpack/scenes/ContentViews/Delete/__tests__/cvVersionsData.fixtures.json

@@ -246,7 +246,6 @@
       "srpm_count": 0,
       "module_stream_count": 14,
       "package_count": 22,
-      "ostree_branch_count": null,
       "component_view_count": 0,
       "python_repository_count": 1,
       "deb_repository_count": 0,
@@ -517,8 +516,7 @@
       "srpm_count": 0,
       "module_stream_count": 14,
       "package_count": 22,
-      "ostree_branch_count": null,
-      "component_view_count": 0,
+           "component_view_count": 0,
       "python_repository_count": 1,
       "deb_repository_count": 1,
       "file_repository_count": 1,
@@ -680,7 +678,6 @@
       "srpm_count": 0,
       "module_stream_count": 0,
       "package_count": 0,
-      "ostree_branch_count": null,
       "component_view_count": 0,
       "python_repository_count": 0,
       "deb_repository_count": 0,
@@ -843,7 +840,6 @@
       "srpm_count": 0,
       "module_stream_count": 0,
       "package_count": 0,
-      "ostree_branch_count": null,
       "component_view_count": 0,
       "python_repository_count": 0,
       "deb_repository_count": 0,
@@ -862,4 +858,4 @@
       }
     }
   ]
-}
+}

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

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Label, Flex, FlexItem } from '@patternfly/react-core';
+import { Label } from '@patternfly/react-core';
+
+const ComponentEnvironments = ({ environments }) => environments.map((env, index) => (
+  <Label
+    key={env.id}
+    style={{ margin: `4px 0 4px ${index > 0 ? '4px' : '0'}` }}
+    color="purple"
+    href={`/lifecycle_environments/${env.id}`}
+    isTruncated
+  >
+    {`${env.name}`}
+  </Label>
+));
 
-const ComponentEnvironments = ({ environments }) => {
-  const envList = environments.map(env =>
-    (
-      <FlexItem key={env.id} style={{ marginTop: '0.25em', marginBottom: '0.25em' }}>
-        <Label color="purple" href={`/lifecycle_environments/${env.id}`} isTruncated>{`${env.name}`}</Label>
-      </FlexItem>
-    ));
-  return (
-    <Flex grow={{ default: 'grow' }} spaceItems={{ default: 'spaceItemsSm' }}>
-      {envList}
-    </Flex>
-  );
-};
 
 ComponentEnvironments.propTypes = {
   environments: PropTypes.instanceOf(Array),

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

@@ -1,8 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDispatch, useSelector } from 'react-redux';
-import { Bullseye, Split, SplitItem, Button, ActionList,
-  ActionListItem, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import {
+  Bullseye, Split, SplitItem, Button, ActionList,
+  ActionListItem, Dropdown, DropdownItem, KebabToggle,
+} from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { TableVariant, fitContent, TableText } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
@@ -34,6 +36,8 @@ import '../../../../components/EditableTextInput/editableTextInput.scss';
 import ComponentContentViewAddModal from './ComponentContentViewAddModal';
 import ComponentContentViewBulkAddModal from './ComponentContentViewBulkAddModal';
 import { hasPermission } from '../../helpers';
+import InactiveText from '../../components/InactiveText';
+
 
 const ContentViewComponents = ({ cvId, details }) => {
   const response = useSelector(state => selectCVComponents(state, cvId));
@@ -136,34 +140,38 @@ const ContentViewComponents = ({ cvId, details }) => {
         { title: <Bullseye><ContentViewIcon composite={false} /></Bullseye> },
         { title: <a href={urlBuilder('content_views', '') + id}>{name}</a> },
         {
-          title:
-  <Split>
-    <SplitItem>
-      <ComponentVersion {...{ componentCV }} />
-    </SplitItem>
-    {hasPermission(permissions, 'edit_content_views') && componentCvId && cvVersion &&
-    <SplitItem>
-      <Button
-        className="foreman-edit-icon"
-        aria-label="edit_version"
-        variant="plain"
-        onClick={() => {
+          title: (
+            <Split>
+              <SplitItem>
+                <ComponentVersion {...{ componentCV }} />
+              </SplitItem>
+              {hasPermission(permissions, 'edit_content_views') && componentCvId && cvVersion &&
+                <SplitItem>
+                  <Button
+                    className="foreman-edit-icon"
+                    aria-label="edit_version"
+                    variant="plain"
+                    onClick={() => {
                       onAdd({
                         componentCvId: id, published: cvVersion, added: componentCvId, latest,
                       });
                     }}
-      >
-        <PencilAltIcon />
-      </Button>
-    </SplitItem>}
-  </Split>,
+                  >
+                    <PencilAltIcon />
+                  </Button>
+                </SplitItem>}
+            </Split>),
         },
-        { title: environments ? <ComponentEnvironments {...{ environments }} /> : __('Not yet published') },
+        { title: environments ? <ComponentEnvironments {...{ environments }} /> : <InactiveText text={__('Not yet published')} /> },
         { title: <Link to={urlBuilder(`content_views/${id}#repositories`, '')}>{repositories ? repositories.length : 0}</Link> },
         {
           title: <AddedStatusLabel added={!!componentCvId} />,
         },
-        { title: <TableText wrapModifier="truncate">{description || __('No description')}</TableText> },
+        {
+          title: description ?
+            <TableText wrapModifier="truncate">{description}</TableText> :
+            <InactiveText text={__('No description')} />,
+        },
       ];
       newRows.push({
         componentCvId: id,
@@ -201,9 +209,6 @@ const ContentViewComponents = ({ cvId, details }) => {
   ];
 
   const dropdownItems = [
-    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!(bulkAddEnabled())} component="button" onClick={addBulk}>
-      {__('Add')}
-    </DropdownItem>,
     <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!(bulkRemoveEnabled())} component="button" onClick={removeBulk}>
       {__('Remove')}
     </DropdownItem>,
@@ -252,7 +257,7 @@ const ContentViewComponents = ({ cvId, details }) => {
           <Split hasGutter>
             <SplitItem>
               <SelectableDropdown
-                items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+                items={[ALL_STATUSES, ADDED, NOT_ADDED]}
                 title={__('Status')}
                 selected={statusSelected}
                 setSelected={setStatusSelected}
@@ -290,12 +295,12 @@ const ContentViewComponents = ({ cvId, details }) => {
               aria-label="edit_component_modal"
             />}
           {bulkAdding &&
-          <ComponentContentViewBulkAddModal
-            cvId={compositeCvEditing}
-            rowsToAdd={selectedComponentsToAdd}
-            onClose={() => setBulkAdding(false)}
-            aria-label="bulk_add_components_modal"
-          />}
+            <ComponentContentViewBulkAddModal
+              cvId={compositeCvEditing}
+              rowsToAdd={selectedComponentsToAdd}
+              onClose={() => setBulkAdding(false)}
+              aria-label="bulk_add_components_modal"
+            />}
         </>
       }
     />