katello 4.3.0.rc4 → 4.4.0.rc2

data/webpack/scenes/AnsibleCollections/AnsibleCollectionsReducer.js

@@ -9,31 +9,31 @@ const initialState = initialApiState;
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case ANSIBLE_COLLECTIONS_REQUEST: {
-      return state.set('loading', true);
-    }
-    case ANSIBLE_COLLECTIONS_SUCCESS: {
-      const {
-        results, page, per_page, subtotal, // eslint-disable-line camelcase
-      } = action.response;
-      return state.merge({
-        results,
-        loading: false,
-        pagination: {
-          page: Number(page),
-          perPage: Number(per_page || state.pagination.perPage), // eslint-disable-line camelcase
-        },
-        itemCount: Number(subtotal),
-      });
-    }
-    case ANSIBLE_COLLECTIONS_ERROR: {
-      return state.merge({
-        error: action.error,
-        loading: false,
-      });
-    }
-    default: {
-      return state;
-    }
+  case ANSIBLE_COLLECTIONS_REQUEST: {
+    return state.set('loading', true);
+  }
+  case ANSIBLE_COLLECTIONS_SUCCESS: {
+    const {
+      results, page, per_page, subtotal, // eslint-disable-line camelcase
+    } = action.response;
+    return state.merge({
+      results,
+      loading: false,
+      pagination: {
+        page: Number(page),
+        perPage: Number(per_page || state.pagination.perPage), // eslint-disable-line camelcase
+      },
+      itemCount: Number(subtotal),
+    });
+  }
+  case ANSIBLE_COLLECTIONS_ERROR: {
+    return state.merge({
+      error: action.error,
+      loading: false,
+    });
+  }
+  default: {
+    return state;
+  }
   }
 };

data/webpack/scenes/AnsibleCollections/Details/AnsibleCollectionDetailsReducer.js

@@ -7,24 +7,24 @@ import {
 
 export default (state = initialApiState, action) => {
   switch (action.type) {
-    case ANSIBLE_COLLECTION_DETAILS_REQUEST: {
-      return state.set('loading', true);
-    }
-    case ANSIBLE_COLLECTION_DETAILS_SUCCESS: {
-      const ansibleCollectionDetails = action.response;
-      return state.merge({
-        ...ansibleCollectionDetails,
-        loading: false,
-      });
-    }
-    case ANSIBLE_COLLECTION_DETAILS_ERROR: {
-      return state.merge({
-        error: action.payload.message,
-        loading: false,
-      });
-    }
-    default: {
-      return state;
-    }
+  case ANSIBLE_COLLECTION_DETAILS_REQUEST: {
+    return state.set('loading', true);
+  }
+  case ANSIBLE_COLLECTION_DETAILS_SUCCESS: {
+    const ansibleCollectionDetails = action.response;
+    return state.merge({
+      ...ansibleCollectionDetails,
+      loading: false,
+    });
+  }
+  case ANSIBLE_COLLECTION_DETAILS_ERROR: {
+    return state.merge({
+      error: action.payload.message,
+      loading: false,
+    });
+  }
+  default: {
+    return state;
+  }
   }
 };

data/webpack/scenes/AnsibleCollections/Details/__tests__/AnsibleCollectionDetails.test.js

@@ -2,8 +2,6 @@ import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 import AnsibleCollectionDetails from '../AnsibleCollectionDetails';
 import { details, loadingState } from './AnsibleCollectionDetails.fixtures';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper');
-
 const mockFunc = jest.fn();
 
 const baseProps = {

data/webpack/scenes/AnsibleCollections/__tests__/AnsibleCollectionPage.test.js

@@ -4,8 +4,6 @@ import toJson from 'enzyme-to-json';
 import AnsibleCollectionsPage from '../AnsibleCollectionsPage';
 import ContentPage from '../../../components/Content/ContentPage';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Ansible Collections page', () => {
   it('should render and contain appropiate components', async () => {
     const ansibleCollections = {};

data/webpack/scenes/AnsibleCollections/__tests__/AnsibleCollectionsTable.test.js

@@ -5,8 +5,6 @@ import ContentTable from '../../../components/Content/ContentTable';
 import TableSchema from '../../AnsibleCollections/AnsibleCollectionsTableSchema';
 import { Table } from '../../../components/pf3Table';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Ansible Collections table', () => {
   it('should render and contain appropiate components', async () => {
     const ansibleCollections = {

data/webpack/scenes/Content/ContentConfig.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import ContentInfo from './Details/ContentInfo';
@@ -7,7 +6,8 @@ import LastSync from '../ContentViews/Details/Repositories/LastSync';
 import ContentRepositories from './Details/ContentRepositories';
 import ContentCounts from '../ContentViews/Details/Repositories/ContentCounts';
 
-export default () => [
+// Keep in mind when editing this file that the ContentViewVersionDetailConfig consumes this array.
+export default [
   {
     names: {
       pluralTitle: __('Python Packages'),
@@ -18,7 +18,7 @@ export default () => [
       singularLabel: 'python_package',
     },
     columnHeaders: [
-      { title: __('Name'), getProperty: unit => (<Link to={urlBuilder(`content/python_packages/${unit?.id}`, '')}>{unit?.name}</Link>) },
+      { title: __('Name'), getProperty: unit => (<a href={urlBuilder(`content/python_packages/${unit?.id}`, '')}>{unit?.name}</a>) },
       { title: __('Version'), getProperty: unit => unit?.version },
       { title: __('Filename'), getProperty: unit => unit?.filename },
     ],
@@ -82,6 +82,57 @@ export default () => [
       pluralLabel: 'ostree_refs',
       singularLabel: 'ostree_ref',
     },
+    columnHeaders: [
+      { title: __('Name'), getProperty: unit => (<a href={urlBuilder(`content/ostree_refs/${unit?.id}`, '')}>{unit?.name}</a>) },
+      { title: __('Version'), getProperty: unit => unit?.version },
+    ],
+    tabs: [
+      {
+        tabKey: 'details',
+        title: __('Details'),
+        getContent: (contentType, id, tabKey) => <ContentInfo {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          { title: __('Name'), getProperty: unit => unit?.name },
+          { title: __('Version'), getProperty: unit => unit?.version },
+        ],
+      },
+      {
+        tabKey: 'repositories',
+        title: __('Repositories'),
+        getContent: (contentType, id, tabKey) =>
+          <ContentRepositories {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          {
+            title: __('Name'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/repositories/${unit?.id}`, '')}>{unit?.name}</a>,
+          },
+          {
+            title: __('Product'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}`, '')}>{unit?.product.name}</a>,
+          },
+          {
+            title: __('Sync Status'),
+            getProperty: unit =>
+              (<LastSync
+                startedAt={unit?.started_at}
+                lastSyncWords={unit?.last_sync_words}
+                lastSync={unit?.last_sync}
+              />),
+          },
+          {
+            title: __('Content Count'),
+            getProperty: unit =>
+              (<ContentCounts
+                productId={unit.product.id}
+                repoId={unit.id}
+                counts={unit.content_counts}
+              />),
+          },
+        ],
+      },
+    ],
   },
   {
     names: {
@@ -93,11 +144,10 @@ export default () => [
       singularLabel: 'ansible_collection',
     },
     columnHeaders: [
-      { title: __('Name'), getProperty: unit => (<Link to={urlBuilder(`content/ansible_collections/${unit?.id}`, '')}>{unit?.name}</Link>) },
+      { title: __('Name'), getProperty: unit => (<a href={urlBuilder(`content/ansible_collections/${unit?.id}`, '')}>{unit?.name}</a>) },
       { title: __('Author'), getProperty: unit => unit?.namespace },
       { title: __('Version'), getProperty: unit => unit?.version },
       { title: __('Checksum'), getProperty: unit => unit?.checksum },
-
     ],
     tabs: [
       {

data/webpack/scenes/Content/ContentPage.js

@@ -27,7 +27,7 @@ const ContentPage = () => {
       const types = {};
       contentTypesResponse.forEach((type) => {
         if (type.generic_browser) {
-          const typeConfig = ContentConfig().find(config =>
+          const typeConfig = ContentConfig.find(config =>
             config.names.singularLabel === type.label);
           if (typeConfig) {
             const { names } = typeConfig;
@@ -70,16 +70,16 @@ const ContentPage = () => {
   }
 
   return (
-    <Grid className="grid-with-margin">
-      <GridItem span={12}>
+    <Grid>
+      <GridItem span={12} className="margin-24">
         <TextContent>
           <Text component={TextVariants.h1}>{__(`${selectedContentType}`)}</Text>
         </TextContent>
       </GridItem>
       <GridItem span={12}>
         <ContentTable {...{
- selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
-}}
+          selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
+        }}
         />
       </GridItem>
     </Grid>

data/webpack/scenes/Content/Details/ContentDetails.js

@@ -16,7 +16,7 @@ const ContentDetails = () => {
 
   const { id, content_type: contentType } = useParams();
   const contentId = Number(id);
-  const config = ContentConfig().find(type =>
+  const config = ContentConfig.find(type =>
     type.names.pluralLabel === contentType);
   const { pluralTitle, pluralLabel } = config.names;
 
@@ -38,29 +38,31 @@ const ContentDetails = () => {
   }
 
   return (
-    <Grid className="grid-with-margin">
-      <Breadcrumb style={{ marginTop: '15px', marginBottom: '15px' }}>
-        <BreadcrumbItem
-          aria-label="content_breadcrumb"
-          render={() => (<Link to={`/content/${pluralLabel}`}>{pluralTitle}</Link>)}
-        />
-        <BreadcrumbItem
-          aria-label="content_breadcrumb_content"
-          isActive
-        > {contentDetailsResponse.name}
-        </BreadcrumbItem>
-      </Breadcrumb>
-      <GridItem span={12} >
-        <Flex>
-          <TextContent>
-            <Text component={TextVariants.h1}> {contentDetailsResponse.name} </Text>
-          </TextContent>
-        </Flex>
-      </GridItem>
+    <Grid>
+      <Grid className="margin-16-24">
+        <Breadcrumb>
+          <BreadcrumbItem
+            aria-label="content_breadcrumb"
+            render={() => (<Link to={`/content/${pluralLabel}`}>{pluralTitle}</Link>)}
+          />
+          <BreadcrumbItem
+            aria-label="content_breadcrumb_content"
+            isActive
+          > {contentDetailsResponse.name}
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <GridItem span={12} className="margin-top-24">
+          <Flex>
+            <TextContent>
+              <Text component={TextVariants.h1}> {contentDetailsResponse.name} </Text>
+            </TextContent>
+          </Flex>
+        </GridItem>
+      </Grid>
       <GridItem span={12}>
         <RoutedTabs tabs={tabs} baseUrl={`/${contentType}/${contentId}`} defaultTabIndex={0} />
       </GridItem>
-    </Grid>
+    </Grid >
   );
 };
 export default ContentDetails;

data/webpack/scenes/Content/Details/ContentInfo.js

@@ -19,7 +19,7 @@ const ContentInfo = ({ contentType, id, tabKey }) => {
   const detailsResponse = useSelector(selectContentDetails);
   const detailsStatus = useSelector(selectContentDetailsStatus);
 
-  const config = contentConfig().find(type => type.names.pluralLabel === contentType);
+  const config = contentConfig.find(type => type.names.pluralLabel === contentType);
   const { columnHeaders } = config.tabs.find(header => header.tabKey === tabKey);
 
   useEffect(() => {
@@ -33,7 +33,7 @@ const ContentInfo = ({ contentType, id, tabKey }) => {
   }
 
   return (
-    <TextContent>
+    <TextContent className="margin-0-24">
       <TextList component={TextListVariants.dl}>
         {columnHeaders.map((col, index) => [
           <TextListItem

data/webpack/scenes/Content/Details/ContentRepositories.js

@@ -20,7 +20,7 @@ const ContentRepositories = ({ contentType, id, tabKey }) => {
   const [searchQuery, updateSearchQuery] = useState('');
   const { results, ...metadata } = response;
 
-  const config = contentConfig().find(type => type.names.pluralLabel === contentType);
+  const config = contentConfig.find(type => type.names.pluralLabel === contentType);
   const typeSingularLabel = config.names.singularLabel;
   const { columnHeaders } = config.tabs.find(header => header.tabKey === tabKey);
 

data/webpack/scenes/Content/Details/__tests__/contentDetail.test.js

@@ -59,8 +59,8 @@ test('Can call API for Python package details and show details tab on page load'
 test('Can call API for Python package repository details and show repositories tab', async (done) => {
   const autocompleteUrl = '/repositories/auto_complete_search';
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  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');
 
   const results = pythonPackageRepositoryDetailsResponse.results[0];
   const repoName = results.name;
@@ -122,8 +122,8 @@ test('Can call API for Ansible collection details and show details tab on page l
 test('Can call API for Ansible collection repository details and show repositories tab', async (done) => {
   const autocompleteUrl = '/repositories/auto_complete_search';
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  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');
 
   const results = ansibleCollectionRepositoryDetailsResponse.results[0];
   const repoName = results.name;

data/webpack/scenes/Content/Table/ContentTable.js

@@ -18,7 +18,7 @@ const ContentTable = ({
   const [searchQuery, updateSearchQuery] = useState('');
   const { results, ...metadata } = response;
 
-  const { columnHeaders } = contentConfig().find(type =>
+  const { columnHeaders } = contentConfig.find(type =>
     type.names.singularLabel === contentTypes[selectedContentType][0]);
 
   return (
@@ -78,7 +78,7 @@ const ContentTable = ({
 ContentTable.propTypes = {
   selectedContentType: PropTypes.string.isRequired,
   setSelectedContentType: PropTypes.func.isRequired,
-  contentTypes: PropTypes.objectOf(PropTypes.array).isRequired,
+  contentTypes: PropTypes.shape({}).isRequired,
   showContentTypeSelector: PropTypes.bool,
 };
 

data/webpack/scenes/Content/__tests__/contentTable.test.js

@@ -16,8 +16,8 @@ let searchDelayScope;
 let autoSearchScope;
 
 beforeEach(() => {
-  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(() => {
@@ -74,7 +74,7 @@ test('Can call API for Ansible collections and show table on page load', async (
     renderWithRedux(<ContentTable
       contentTypes={mockContentTypes}
       selectedContentType="Ansible Collections"
-      setSelectedContentType={() => {}}
+      setSelectedContentType={() => { }}
       showContentTypeSelector={false}
     />);
 

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -1,4 +1,5 @@
 import { translate as __ } from 'foremanReact/common/I18n';
+import { toUpper } from 'lodash';
 
 const CONTENT_VIEWS_KEY = 'CONTENT_VIEWS';
 export const CREATE_CONTENT_VIEW_KEY = 'CONTENT_VIEW_CREATE';
@@ -22,11 +23,11 @@ export const RPM_PACKAGE_GROUPS_CONTENT = 'RPM_PACKAGE_GROUPS_CONTENT';
 export const REPOSITORY_CONTENT = 'REPOSITORY_CONTENT';
 export const ERRATA_CONTENT = 'ERRATA_CONTENT';
 export const DOCKER_TAGS_CONTENT = 'DOCKER_TAGS_CONTENT';
-export const ANSIBLE_COLLECTIONS_CONTENT = 'ANSIBLE_COLLECTIONS_CONTENT';
 export const MODULE_STREAMS_CONTENT = 'MODULE_STREAMS_CONTENT';
 export const DEB_PACKAGES_CONTENT = 'DEB_PACKAGES_CONTENT';
 export const RPM_PACKAGES_CONTENT = 'RPM_PACKAGES_CONTENT';
 export const FILE_CONTENT = 'FILE_CONTENT';
+export const generatedContentKey = pluralLabel => `${toUpper(pluralLabel)}_CONTENT`;
 export const cvDetailsKey = cvId => `${CONTENT_VIEWS_KEY}_${cvId}`;
 export const cvDetailsRepoKey = cvId => `${CONTENT_VIEWS_KEY}_REPOSITORIES_${cvId}`;
 export const cvFilterRepoKey = filterId => `CV_FILTER_REPOSITORIES_${filterId}`;
@@ -55,9 +56,9 @@ export const addComponentSuccessMessage = component => (component ? __('Updated
 
 
 // Repo added to content view status display and key
-export const ADDED = __('Added');
-export const NOT_ADDED = __('Not added');
-export const ALL_STATUSES = __('All');
+export const ADDED = 'Added';
+export const NOT_ADDED = 'Not added';
+export const ALL_STATUSES = 'All';
 
 export const REPOSITORY_TYPES = 'REPOSITORY_TYPES';
 export const FILTER_TYPES = ['rpm', 'package_group', 'erratum_date', 'erratum_id', 'docker', 'modulemd'];

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -5,19 +5,23 @@ import ContentViewsTable from './Table/ContentViewsTable';
 import ContentViewsCounter from './components/ContentViewsCounter';
 
 const ContentViewsPage = () => (
-  <Grid className="grid-with-margin">
-    <GridItem span={12}>
-      <TextContent>
-        <Text component={TextVariants.h1}>{__('Content Views')}</Text>
-      </TextContent>
-    </GridItem>
-    <GridItem span={12}>
-      <ContentViewsCounter />
-    </GridItem>
-    <GridItem span={12}>
-      <ContentViewsTable />
-    </GridItem>
-  </Grid>
+  <>
+    <Grid className="margin-24">
+      <GridItem span={12}>
+        <TextContent>
+          <Text component={TextVariants.h1}>{__('Content views')}</Text>
+        </TextContent>
+      </GridItem>
+      <GridItem span={12} className="margin-top-8">
+        <ContentViewsCounter />
+      </GridItem>
+    </Grid>
+    <Grid>
+      <GridItem span={12}>
+        <ContentViewsTable />
+      </GridItem>
+    </Grid>
+  </>
 );
 
 export default ContentViewsPage;

data/webpack/scenes/ContentViews/Copy/CopyContentViewForm.js

@@ -61,7 +61,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
         <Button
           aria-label="copy_content_view"
           variant="primary"
-          isDisabled={name.length <= 2 || saving}
+          isDisabled={!name?.length || saving}
           type="submit"
         >
           {__('Copy content view')}

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

@@ -61,10 +61,11 @@ const CreateContentViewForm = ({ setModalOpen }) => {
 
   if (redirect) {
     const { id } = response;
-    return (<Redirect to={`/content_views/${id}`} />);
+    if (composite) { return (<Redirect to={`/content_views/${id}#/contentviews`} />); }
+    return (<Redirect to={`/content_views/${id}#/repositories`} />);
   }
 
-  const submitDisabled = name.length <= 2 || label.length <= 2 || saving;
+  const submitDisabled = !name?.length || !label?.length || saving;
 
   return (
     <Form onSubmit={(e) => {

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

@@ -107,8 +107,8 @@ const CVDeletionReassignHostsForm = () => {
       >
         <AffectedHosts
           {...{
-          cvId,
-        }}
+            cvId,
+          }}
           versionEnvironments={cvEnvironments}
           deleteCV
         />

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

@@ -44,8 +44,8 @@ beforeEach(() => {
     .get('/api/v2/bookmarks')
     .query(true)
     .reply(200, {});
-  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(() => {
@@ -99,12 +99,12 @@ test('Can call API for CVs and show Delete Wizard for the row', async (done) =>
 test('Can open Delete wizard and delete CV with all steps', async (done) => {
   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 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 autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
 

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Modal, ModalVariant, FormSelect,
+  Flex, Modal, ModalVariant, FormSelect,
   FormSelectOption, Checkbox, Form, FormGroup,
-  ActionGroup, Button,
+  ActionGroup, Button, Tooltip,
 } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
@@ -116,21 +117,31 @@ const ComponentContentViewAddModal = ({
           </FormSelect>
         </FormGroup>
         <FormGroup fieldId="latest">
-          <Checkbox
-            style={{ marginTop: 0 }}
-            id="latest"
-            name="latest"
-            label={__('Always update to latest version')}
-            isChecked={formLatest}
-            onChange={checked => updateLatest(checked)}
-          />
+          <Flex style={{ display: 'inline-flex' }}>
+            <Checkbox
+              style={{ marginTop: 0 }}
+              id="latest"
+              name="latest"
+              label={__('Always update to latest version')}
+              isChecked={formLatest}
+              onChange={checked => updateLatest(checked)}
+            />
+            <Tooltip
+              position="top"
+              content={
+                __('This content view will be automatically updated to the latest version.')
+              }
+            >
+              <OutlinedQuestionCircleIcon />
+            </Tooltip>
+          </Flex>
         </FormGroup>
         <ActionGroup>
           <Button aria-label="add_component" variant="primary" type="submit">{__('Submit')}</Button>
           <Button variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>
         </ActionGroup>
       </Form>
-    </Modal>);
+    </Modal >);
 };
 
 ComponentContentViewAddModal.propTypes = {