katello 4.6.2.1 → 4.7.0.rc1

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

@@ -41,7 +41,11 @@ const ContentViewTable = () => {
   const [actionableCvName, setActionableCvName] = useState('');
   const dispatch = useDispatch();
   const metadata = omit(response, ['results']);
-  const { can_create: canCreate = false, results } = response;
+  const {
+    can_create: canCreate = false,
+    can_view: canView = false,
+    results,
+  } = response;
   const columnHeaders = [
     __('Type'),
     __('Name'),
@@ -152,6 +156,7 @@ const ContentViewTable = () => {
         fetchItems,
         showPrimaryAction,
       }}
+      hideSearch={!canView}
       ouiaId="content-views-table"
       additionalListeners={[activeSortColumn, activeSortDirection]}
       bookmarkController="katello_content_views"
@@ -168,7 +173,7 @@ const ContentViewTable = () => {
         </Button >) : undefined}
       actionButtons={
         <>
-          {results?.length !== 0 &&
+          {results?.length !== 0 && canCreate &&
             <Button ouiaId="create-content-view" onClick={openForm} variant="primary" aria-label="create_content_view">
               {__('Create content view')}
             </Button>
@@ -214,7 +219,7 @@ const ContentViewTable = () => {
       }
     >
       <Thead>
-        <Tr>
+        <Tr ouiaId="cvTableHeaderRow">
           <Th key="expand-carat" />
           {columnHeaders.map(col => (
             <Th
@@ -249,7 +254,7 @@ const ContentViewTable = () => {
           const isExpanded = tableRowIsExpanded(cvId);
           return (
             <Tbody isExpanded={isExpanded} key={`${cvId}_${createdAt}`}>
-              <Tr key={cvId}>
+              <Tr key={cvId} ouiaId={`ContentViewTableRow-${cvId}`}>
                 <Td
                   expand={{
                     rowIndex,
@@ -279,7 +284,7 @@ const ContentViewTable = () => {
                   }}
                 />
               </Tr>
-              <Tr key="child_row" isExpanded={isExpanded}>
+              <Tr key="child_row" ouiaId={`ContentViewTableRowChild-${cvId}`} isExpanded={isExpanded}>
                 <Td colSpan={2}>
                   <ExpandableRowContent>
                     <DetailsExpansion

data/webpack/scenes/ContentViews/__tests__/basicContentViews.fixtures.js

@@ -15,6 +15,8 @@ const createBasicCVs = (amount) => {
     total: amount,
     subtotal: amount,
     page: 1,
+    can_create: true,
+    can_view: true,
     per_page: 20,
     error: null,
     search: null,

data/webpack/scenes/ContentViews/__tests__/contentViewList.fixtures.json

@@ -10,6 +10,7 @@
     "order": "asc"
   },
   "can_create": true,
+  "can_view": true,
   "results": [
     {
       "composite": false,

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -22,17 +22,6 @@ let scopeBookmark;
 beforeEach(() => {
   const { results } = cvIndexData;
   [firstCV] = results;
-  scopeBookmark = nockInstance
-    .get('/api/v2/bookmarks')
-    .query(true)
-    .reply(200, {});
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
 });
 
 test('Can call API for CVs and show on screen on page load', async (done) => {
@@ -41,6 +30,12 @@ test('Can call API for CVs and show on screen on page load', async (done) => {
     .get(cvIndexPath)
     .query(true)
     .reply(200, cvIndexData);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   const { queryByText, queryAllByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
@@ -56,6 +51,8 @@ test('Can call API for CVs and show on screen on page load', async (done) => {
 
   assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(scope, done);
 });
 
@@ -65,6 +62,12 @@ test('Can show last task and link to it', async (done) => {
     .get(cvIndexPath)
     .query(true)
     .reply(200, cvIndexData);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   const { getByText, queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
@@ -81,6 +84,8 @@ test('Can show last task and link to it', async (done) => {
 
   assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
 
@@ -90,6 +95,12 @@ test('Can show latest version and link to it', async (done) => {
     .get(cvIndexPath)
     .query(true)
     .reply(200, cvIndexData);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   const {
     getByText,
@@ -114,6 +125,8 @@ test('Can show latest version and link to it', async (done) => {
   });
   assertNockRequest(scopeBookmark);
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
 
@@ -123,6 +136,12 @@ test('Can expand cv and show activation keys and hosts', async (done) => {
     .get(cvIndexPath)
     .query(true)
     .reply(200, cvIndexData);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   const {
     queryByLabelText,
@@ -152,18 +171,21 @@ test('Can expand cv and show activation keys and hosts', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(scopeBookmark);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
 
 test('Can handle no Content Views being present', async (done) => {
-  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-
   const noResults = {
     total: 0,
     subtotal: 0,
     page: 1,
     per_page: 20,
     results: [],
+    can_view: true,
+    can_create: true,
   };
   const scope = nockInstance
     .get(cvIndexPath)
@@ -173,12 +195,10 @@ test('Can handle no Content Views being present', async (done) => {
 
   expect(queryByText(firstCV.name)).toBeNull();
   await patientlyWaitFor(() => expect(queryByText(/don't have any Content views/i)).toBeInTheDocument());
-  assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
 
 test('Can handle errored response', async (done) => {
-  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const scope = nockInstance
     .get(cvIndexPath)
     .query(true)
@@ -188,7 +208,6 @@ test('Can handle errored response', async (done) => {
 
   expect(queryByText(firstCV.name)).toBeNull();
   await patientlyWaitFor(() => expect(queryByText(/Something went wrong! Please check server logs!/i)).toBeInTheDocument());
-  assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
 
@@ -201,11 +220,20 @@ test('Can handle unpublished Content Views', async (done) => {
     .get(cvIndexPath)
     .query(true)
     .reply(200, unpublishedCVData);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   const { getAllByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
   await patientlyWaitFor(() => expect(getAllByText(/not yet published/i).length).toBeGreaterThan(0));
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(scopeBookmark);
   assertNockRequest(scope, done);
 });
 
@@ -215,6 +243,12 @@ test('Can handle pagination', async (done) => {
   const cvIndexFirstPage = { ...cvIndexLarge, ...{ results: results.slice(0, 20) } };
   const cvIndexSecondPage = { ...cvIndexLarge, page: 2, results: results.slice(20, 40) };
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
 
   // Match first page API request
   const firstPageScope = nockInstance
@@ -249,6 +283,9 @@ test('Can handle pagination', async (done) => {
     expect(queryByText(results[41].name)).not.toBeInTheDocument();
   });
   assertNockRequest(autocompleteScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(scopeBookmark);
   assertNockRequest(firstPageScope);
   assertNockRequest(secondPageScope, done); // Only pass jest callback to the last API request
 });
@@ -264,6 +301,13 @@ test('Can search for specific Content View', async (done) => {
 
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, matchQuery);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
+
   const initialScope = nockInstance
     .get(cvIndexPath)
     .query(true)
@@ -291,6 +335,9 @@ test('Can search for specific Content View', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(scopeBookmark);
   assertNockRequest(initialScope);
   assertNockRequest(withSearchScope);
   assertNockRequest(searchResultScope, done);
@@ -301,10 +348,23 @@ test('No results message is shown for empty search', async (done) => {
   const query = `name = \"${cvname}\"`;
   const matchQuery = actualParams => actualParams?.search?.includes(cvname);
   const emptyResults = {
-    total: 0, subtotal: 0, page: 1, per_page: 20, search: query, results: [],
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    per_page: 20,
+    search: query,
+    results: [],
+    can_view: true,
+    can_create: true,
   };
 
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+  scopeBookmark = nockInstance
+    .get('/api/v2/bookmarks')
+    .query(true)
+    .reply(200, {});
   const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, matchQuery);
   const initialScope = nockInstance
     .get(cvIndexPath)
@@ -324,20 +384,22 @@ test('No results message is shown for empty search', async (done) => {
   await patientlyWaitFor(() => expect(getByText(/No matching content views found/i)).toBeInTheDocument());
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(scopeBookmark);
   assertNockRequest(initialScope);
   assertNockRequest(withSearchScope);
   assertNockRequest(searchResultScope, done);
 });
 
 test('Displays Create Content View and opens modal with Form', async () => {
-  mockAutocomplete(nockInstance, autocompleteUrl);
-
   const noResults = {
     total: 0,
     subtotal: 0,
     page: 1,
     per_page: 20,
     can_create: true,
+    can_view: true,
     results: [],
   };
   nockInstance

data/webpack/scenes/ContentViews/components/CVBreadCrumb.js

@@ -101,7 +101,7 @@ const CVBreadcrumb = () => {
     filterDetails, filterDetailsStatus, breadcrumbItems, setBreadcrumbItems]);
 
   return (
-    <Breadcrumb className="margin-bottom-24">
+    <Breadcrumb ouiaId="cv-breadcrumb" className="margin-bottom-24">
       {
         Object.keys(breadcrumbItems)?.sort()?.map(key => (
           <BreadcrumbItem

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -58,6 +58,7 @@ const EnvironmentPaths = ({
                     className="env-path__labels-with-pointer"
                     key={`${env.id}${index}`}
                     id={`${env.id}${index}`}
+                    ouiaId={`${env.id}${index}`}
                     label={<EnvironmentLabels environments={env} isDisabled={isDisabled} />}
                     aria-label={env.label}
                     onChange={checked => oncheckedChange(checked, env)}

data/webpack/scenes/ContentViews/components/InactiveText.js

@@ -4,7 +4,15 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 
 const InactiveText = props => (
   <TextContent>
-    <Text component={TextVariants.small} {...props}>{props.text}</Text>
+    <Text
+      ouiaId="inactive-text"
+      component={TextVariants.small}
+      style={{
+        display: 'inline-flex', alignItems: 'center', margin: 0,
+      }}
+      {...props}
+    >{props.text}
+    </Text>
   </TextContent>
 );
 

data/webpack/scenes/ContentViews/expansions/RelatedCompositeContentViewsModal.js

@@ -35,6 +35,7 @@ const RelatedCompositeContentViewsModal = ({
       </Button>
       <Modal
         title={__('Related composite content views')}
+        ouiaId="related-composite-cvs"
         variant={ModalVariant.large}
         isOpen={isOpen}
         description={description()}
@@ -45,10 +46,11 @@ const RelatedCompositeContentViewsModal = ({
       >
         <TableComposable
           aria-label={`${cvId}_table`}
+          ouiaId={`${cvId}_table`}
           variant="compact"
         >
           <Thead>
-            <Tr>
+            <Tr ouiaId="table-header-row">
               {columns.map((column, columnIndex) => (
                 <Th key={columnIndex}>{column}</Th>
               ))}
@@ -56,7 +58,7 @@ const RelatedCompositeContentViewsModal = ({
           </Thead>
           <Tbody>
             {relatedCompositeCVs.map(cv => (
-              <Tr key={cv.id}>
+              <Tr key={cv.id} ouiaId={`row-${cv.id}`}>
                 <Td key={`${cv.id}_${cv.name}`} dataLabel={columns[cv.id]}>
                   <Link to={`${urlBuilder('content_views', '')}${cv.id}`}>{cv.name}</Link>
                 </Td>

data/webpack/scenes/ContentViews/expansions/RelatedContentViewComponentsModal.js

@@ -50,6 +50,7 @@ const RelatedContentViewsModal = ({ cvName, cvId, relatedCVCount }) => {
         <GridItem span={12}>
           <Modal
             title={__('Related content views')}
+            ouiaId="related-cvs"
             variant={ModalVariant.medium}
             isOpen={isOpen}
             description={description()}
@@ -76,13 +77,13 @@ const RelatedContentViewsModal = ({ cvName, cvId, relatedCVCount }) => {
               emptySearchBody={__('Try changing your search settings.')}
             >
               <Thead>
-                <Tr>
+                <Tr ouiaId="column-headers">
                   <Th key="name_col">{__('Name')}</Th>
                 </Tr>
               </Thead>
               <Tbody>
                 {results?.map(details => (
-                  <Tr key={`${details.content_view.id}`}>
+                  <Tr key={`${details.content_view.id}`} ouiaId={`${details.content_view.id}`}>
                     <Td>
                       <Link to={urlBuilder(`content_views/${details.content_view.id}`, '')}>{details.content_view.name}</Link>
                     </Td>

data/webpack/scenes/Hosts/ChangeContentSource/actions.js

@@ -3,19 +3,19 @@ import { foremanUrl } from 'foremanReact/common/helpers';
 import { get, post, put } from 'foremanReact/redux/API';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import { CHANGE_CONTENT_SOURCE_DATA,
+import {
+  CHANGE_CONTENT_SOURCE_DATA,
+  CHANGE_CONTENT_SOURCE_PROXY,
   CHANGE_CONTENT_SOURCE,
-  CHANGE_CONTENT_SOURCE_VIEWS } from './constants';
+  CHANGE_CONTENT_SOURCE_VIEWS,
+} from './constants';
 
-import { getHostIds } from './helpers';
-
-export const getFormData = () =>
-  post({
-    key: CHANGE_CONTENT_SOURCE_DATA,
-    url: foremanUrl('/change_host_content_source/data'),
-    params: { host_ids: getHostIds() },
-    errorToast: () => __('Something went wrong while getting the data. See the logs for more information'),
-  });
+export const getFormData = (hostIds, search) => (post({
+  key: CHANGE_CONTENT_SOURCE_DATA,
+  url: foremanUrl('/change_host_content_source/data'),
+  params: { host_ids: hostIds, search },
+  errorToast: () => __('Something went wrong while getting the data. See the logs for more information'),
+}));
 
 export const changeContentSource = (environmentId, contentViewId, contentSourceId, hostIds) =>
   put({
@@ -31,6 +31,13 @@ export const changeContentSource = (environmentId, contentViewId, contentSourceI
     errorToast: () => __('Something went wrong while updating the content source. See the logs for more information'),
   });
 
+export const getProxy = id =>
+  get({
+    key: CHANGE_CONTENT_SOURCE_PROXY,
+    url: foremanUrl(`/katello/api/capsules/${id}`),
+    errorToast: () => __('Something went wrong while loading the Smart Proxy. See the logs for more information'),
+  });
+
 export const getContentViews = environmentId =>
   get({
     key: CHANGE_CONTENT_SOURCE_VIEWS,

data/webpack/scenes/Hosts/ChangeContentSource/components/ContentSourceForm.js

@@ -22,13 +22,20 @@ const ContentSourceForm = ({
   contentSources,
   handleContentSource,
   contentSourceId,
-  contentHostsIds,
+  contentHosts,
   isLoading,
 }) => {
   const formIsValid = () => (!!environmentId &&
     !!contentViewId &&
     !!contentSourceId &&
-    contentHostsIds.length !== 0);
+    contentHosts.length !== 0);
+
+  const contentSourcesIsDisabled = (isLoading || contentSources.length === 0 ||
+    contentHosts.length === 0);
+  const environmentIsDisabled = (isLoading || environments.length === 0 ||
+    contentSourceId === '');
+  const viewIsDisabled = (isLoading || contentViews.length === 0 ||
+    contentSourceId === '' || environmentId === '');
 
   return (
     <Form
@@ -36,10 +43,10 @@ const ContentSourceForm = ({
       className="content_source_form"
       isHorizontal
     >
-      <Grid hasGutter>
-        <FormField label={__('Environment')} id="change_cs_environment" value={environmentId} items={environments} onChange={handleEnvironment} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
-        <FormField label={__('Content View')} id="change_cs_content_view" value={contentViewId} items={contentViews} onChange={handleContentView} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
-        <FormField label={__('Content Source')} id="change_cs_content_source" value={contentSourceId} items={contentSources} onChange={handleContentSource} isLoading={isLoading} contentHostsCount={contentHostsIds.length} />
+      <Grid hasGutter className="margin-top-16">
+        <FormField label={__('Content source')} id="change_cs_content_source" value={contentSourceId} items={contentSources} onChange={handleContentSource} isDisabled={contentSourcesIsDisabled} />
+        <FormField label={__('Environment')} id="change_cs_environment" value={environmentId} items={environments} onChange={handleEnvironment} isDisabled={environmentIsDisabled} />
+        <FormField label={__('Content view')} id="change_cs_content_view" value={contentViewId} items={contentViews} onChange={handleContentView} isDisabled={viewIsDisabled} />
 
         <GridItem>
           <ActionGroup>
@@ -69,7 +76,7 @@ ContentSourceForm.propTypes = {
   contentSources: PropTypes.arrayOf(PropTypes.shape({})),
   handleContentSource: PropTypes.func.isRequired,
   contentSourceId: PropTypes.string,
-  contentHostsIds: PropTypes.arrayOf(PropTypes.number),
+  contentHosts: PropTypes.arrayOf(PropTypes.shape({})),
   isLoading: PropTypes.bool,
 };
 
@@ -80,7 +87,7 @@ ContentSourceForm.defaultProps = {
   contentViewId: '',
   contentSources: [],
   contentSourceId: '',
-  contentHostsIds: [],
+  contentHosts: [],
   isLoading: false,
 };
 

data/webpack/scenes/Hosts/ChangeContentSource/components/FormField.js

@@ -9,7 +9,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 
 const FormField = ({
-  label, id, value, items, onChange, isLoading, contentHostsCount,
+  label, id, value, items, onChange, isDisabled,
 }) => (
   <GridItem span={7}>
     <FormGroup label={label} fieldId={id} isRequired>
@@ -17,7 +17,7 @@ const FormField = ({
         value={value}
         onChange={v => onChange(v)}
         className="without_select2"
-        isDisabled={isLoading || items.length === 0 || contentHostsCount === 0}
+        isDisabled={isDisabled}
         id={`${id}_select`}
         isRequired
       >
@@ -36,8 +36,7 @@ FormField.propTypes = {
   value: PropTypes.string.isRequired,
   items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   onChange: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  contentHostsCount: PropTypes.number.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
 };
 
 export default FormField;

data/webpack/scenes/Hosts/ChangeContentSource/components/Hosts.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import {
+  GridItem,
+  Label,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import HostsModal from './HostsModal';
+
+const Hosts = ({
+  contentHosts, hostsWithoutContent,
+}) => {
+  const [modalHosts, setModalHosts] = useState(false);
+  const [modalIgnored, setModalIgnored] = useState(false);
+
+  const titleHosts = __('Hosts to update');
+  const titleIgnored = __('Ignored hosts');
+
+  return (
+    <>
+      <GridItem span={7}>
+        {hostsWithoutContent.length > 0 &&
+        <p>
+          { __('Some hosts are not registered as content hosts and will be ignored.') }
+        </p>
+}
+        {contentHosts.length > 0 && (<Label color="green" href="#" onClick={() => setModalHosts(true)}>{titleHosts}: {contentHosts.length}</Label>)}
+        {' '}
+        {hostsWithoutContent.length > 0 && (<Label color="orange" href="#" onClick={() => setModalIgnored(true)}>{titleIgnored}: {hostsWithoutContent.length}</Label>)}
+
+        <HostsModal
+          hosts={contentHosts}
+          isOpen={modalHosts}
+          setModalOpenState={setModalHosts}
+          modalTitle={titleHosts}
+        />
+        <HostsModal
+          hosts={hostsWithoutContent}
+          isOpen={modalIgnored}
+          setModalOpenState={setModalIgnored}
+          modalTitle={titleIgnored}
+        />
+      </GridItem>
+    </>
+  );
+};
+
+Hosts.propTypes = {
+  contentHosts: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  hostsWithoutContent: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+export default Hosts;

data/webpack/scenes/Hosts/ChangeContentSource/components/HostsModal.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  List, ListItem,
+  SearchInput,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+import PropTypes from 'prop-types';
+
+const HostsModal = ({
+  hosts, isOpen, setModalOpenState, modalTitle,
+}) => {
+  const [search, setSearch] = useState('');
+
+  return (
+    <Modal
+      variant={ModalVariant.small}
+      title={modalTitle}
+      position="top"
+      isOpen={isOpen}
+      onClose={() => setModalOpenState(false)}
+    >
+      <SearchInput
+        placeholder={__('Search')}
+        value={search}
+        onChange={v => setSearch(v)}
+        onClear={() => setSearch('')}
+      />
+      <List isPlain isBordered className="margin-top-16">
+        {(search ? hosts.filter(h => (`${h.name}`).includes(search)) : hosts).map(h => (
+          <ListItem key={h.id}>
+            <Button
+              component="a"
+              href={foremanUrl(`/new/hosts/${h.name}`)}
+              variant="link"
+              target="_blank"
+              isInline
+            >
+              {h.name}
+            </Button>
+          </ListItem>
+        ))}
+      </List>
+    </Modal>);
+};
+
+HostsModal.propTypes = {
+  hosts: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setModalOpenState: PropTypes.func.isRequired,
+  modalTitle: PropTypes.string.isRequired,
+};
+
+export default HostsModal;

data/webpack/scenes/Hosts/ChangeContentSource/constants.js

@@ -1,3 +1,4 @@
 export const CHANGE_CONTENT_SOURCE_DATA = 'CHANGE_CONTENT_SOURCE_DATA';
+export const CHANGE_CONTENT_SOURCE_PROXY = 'CHANGE_CONTENT_SOURCE_PROXY';
 export const CHANGE_CONTENT_SOURCE = 'CHANGE_CONTENT_SOURCE';
 export const CHANGE_CONTENT_SOURCE_VIEWS = 'CHANGE_CONTENT_SOURCE_VIEWS';