katello 4.5.1 → 4.8.0.rc2

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';

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

@@ -1,10 +1,7 @@
 import { STATUS } from 'foremanReact/constants';
 
-export const getHostIds = () => {
-  const url = new URL(window.location);
-  const hostId = url.searchParams.get('host_id');
-
-  if (hostId) return [hostId];
+export const getHostIds = (hostIdFromUrl) => {
+  if (hostIdFromUrl) return [hostIdFromUrl];
 
   const cookie = document.cookie.split('; ')
     .find(row => row.startsWith('_ForemanSelectedhosts'));

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

@@ -1,125 +1,169 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { Alert, Grid, GridItem, List, ListItem } from '@patternfly/react-core';
+import { Alert, Grid, GridItem, PageSection, Title } from '@patternfly/react-core';
 
 import { translate as __ } from 'foremanReact/common/I18n';
-import { STATUS } from 'foremanReact/constants';
 import { foremanUrl } from 'foremanReact/common/helpers';
+import { STATUS } from 'foremanReact/constants';
+import BreadcrumbBar from 'foremanReact/components/BreadcrumbBar';
+import Head from 'foremanReact/components/Head';
 
 import { selectApiDataStatus,
   selectApiContentViewStatus,
   selectApiChangeContentStatus,
-  selectContentHostsIds,
-  selectHostsWithoutContent,
-  selectEnvironments,
+  selectContentHosts,
+  selectContentHostsWithoutContent,
   selectContentSources,
   selectJobInvocationPath,
   selectContentViews,
   selectTemplate } from './selectors';
+
 import { getHostIds, formIsLoading } from './helpers';
-import { getFormData, changeContentSource, getContentViews } from './actions';
+import { useUrlParams } from '../../../components/Table/TableHooks';
+import {
+  getFormData,
+  getProxy,
+  changeContentSource,
+  getContentViews,
+} from './actions';
 import ContentSourceForm from './components/ContentSourceForm';
 import ContentSourceTemplate from './components/ContentSourceTemplate';
+import Hosts from './components/Hosts';
 import './styles.scss';
 
 const ChangeContentSourcePage = () => {
   const dispatch = useDispatch();
 
+  const urlParams = useUrlParams();
   const apiDataStatus = useSelector(selectApiDataStatus);
   const apiContentViewStatus = useSelector(selectApiContentViewStatus);
   const apiChangeStatus = useSelector(selectApiChangeContentStatus);
 
   const isLoading = formIsLoading(apiDataStatus, apiContentViewStatus, apiChangeStatus);
 
-  const contentHostsIds = useSelector(selectContentHostsIds);
-  const hostsWithoutContent = useSelector(selectHostsWithoutContent);
-  const environments = useSelector(selectEnvironments);
+  const contentHosts = useSelector(selectContentHosts);
+  const hostsWithoutContent = useSelector(selectContentHostsWithoutContent);
   const contentSources = useSelector(selectContentSources);
   const jobInvocationPath = useSelector(selectJobInvocationPath);
 
   const template = useSelector(selectTemplate);
   const contentViews = useSelector(selectContentViews);
 
-  const [environmentId, setEnvironmentId] = useState();
-  const [contentViewId, setContentViewId] = useState();
-  const [contentSourceId, setContentSourceId] = useState();
+  const [contentSourceId, setCapsuleId] = useState('');
+  const [selectedEnvironment, setSelectedEnvironment] = useState([]);
+  const [contentViewName, setContentViewName] = useState('');
+
+  const contentViewId = contentViews?.find(cv => cv.name === contentViewName)?.id;
+  const noHostSpecified = getHostIds(urlParams.host_id).length === 0 && urlParams.searchParam === '';
+  const environmentId = selectedEnvironment[0]?.id;
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    dispatch(changeContentSource(environmentId, contentViewId, contentSourceId, contentHostsIds));
+    dispatch(changeContentSource(
+      environmentId,
+      contentViewId,
+      contentSourceId,
+      contentHosts.map(h => h.id),
+      jobInvocationPath,
+    ));
   };
 
-  const handleEnvironment = (envId) => {
-    if (envId) {
-      dispatch(getContentViews(envId));
+  const handleContentSource = (id) => {
+    setCapsuleId(id);
+    setSelectedEnvironment([]);
+    setContentViewName('');
+
+    if (id) {
+      dispatch(getProxy(id));
     }
+  };
+
+  const breadcrumbItems = () => {
+    const linkHosts = { caption: __('Hosts'), url: foremanUrl('/hosts') };
+    const linkContent = { caption: __('Change host content source') };
 
-    setEnvironmentId(envId);
-    setContentViewId('');
+    if (urlParams.host_id) {
+      const hostName = contentHosts.concat(hostsWithoutContent)
+        .find(h => `${h.id}` === urlParams.host_id)?.name;
+
+      return ([linkHosts, { caption: hostName, url: foremanUrl(`/new/hosts/${hostName}`) }, linkContent]);
+    }
+    return ([linkHosts, linkContent]);
   };
 
-  const IgnoredHostsAlert = () => (
-    <Alert
-      variant="warning"
-      title={__('Some hosts are ignored!')}
-      className="cs_alert"
-      isExpandable
-    >
-      <p>
-        { __('The following hosts are not registered as Content Hosts, so they will be ignored:') }
-      </p>
-      { hostsWithoutContent.map(name => (
-        <List>
-          <ListItem>
-            <a href={foremanUrl(`/hosts/${name}`)}>{name}</a>
-          </ListItem>
-        </List>))}
-    </Alert>);
+  const handleEnvironment = (selection) => {
+    setSelectedEnvironment(selection);
+    setContentViewName('');
 
+    if (selection[0].id) {
+      dispatch(getContentViews(selection[0].id));
+    }
+  };
   useEffect(() => {
-    dispatch(getFormData());
-  }, [dispatch]);
-
-  if (getHostIds().length === 0) {
-    return (
-      <Grid className="margin-40">
-        <GridItem span={7}>
-          <Alert
-            variant="danger"
-            title={__('No hosts with content source found!')}
-          />
-          { hostsWithoutContent.length > 0 && <IgnoredHostsAlert /> }
-        </GridItem>
-      </Grid>);
-  }
+    dispatch(getFormData(getHostIds(urlParams.host_id), urlParams.searchParam));
+  }, [dispatch, urlParams.host_id, urlParams.searchParam]);
 
   return (
-    <Grid className="margin-40">
-      <GridItem span={7}>
-        <h1>{__('Change host content source')}</h1>
-
-        { hostsWithoutContent.length > 0 && <IgnoredHostsAlert /> }
-      </GridItem>
-
-      <ContentSourceForm
-        handleSubmit={handleSubmit}
-        environments={environments}
-        handleEnvironment={handleEnvironment}
-        environmentId={environmentId}
-        contentViews={contentViews}
-        handleContentView={setContentViewId}
-        contentViewId={contentViewId}
-        contentSources={contentSources}
-        contentSourceId={contentSourceId}
-        handleContentSource={setContentSourceId}
-        contentHostsIds={contentHostsIds}
-        isLoading={isLoading}
-      />
-      { apiChangeStatus === STATUS.RESOLVED &&
-      <ContentSourceTemplate template={template} jobInvocationPath={jobInvocationPath} /> }
-    </Grid>
+    <>
+      <Head>
+        <title>{__('Change host content source')}</title>
+      </Head>
+      <PageSection
+        isFilled
+        variant="light"
+      >
+        <div className="margin-left-20">
+          <BreadcrumbBar
+            breadcrumbItems={breadcrumbItems()}
+          />
+        </div>
+        <Grid className="margin-left-20">
+          <GridItem span={7}>
+            <Title
+              headingLevel="h5"
+              size="2xl"
+            >
+              {__('Change host content source')}
+            </Title>
+          </GridItem>
+          {noHostSpecified &&
+            <GridItem span={7}>
+              <Alert
+                variant="danger"
+                className="margin-top-20"
+                title={__('No hosts were specified')}
+              />
+            </GridItem>
+        }
+          { !noHostSpecified &&
+          <>
+            <Hosts
+              contentHosts={contentHosts}
+              hostsWithoutContent={hostsWithoutContent}
+            />
+
+            <ContentSourceForm
+              handleSubmit={handleSubmit}
+              handleEnvironment={handleEnvironment}
+              environments={selectedEnvironment}
+              contentViews={contentViews}
+              handleContentView={setContentViewName}
+              contentViewName={contentViewName}
+              contentSources={contentSources}
+              contentSourceId={contentSourceId}
+              handleContentSource={handleContentSource}
+              contentHosts={contentHosts}
+              isLoading={isLoading}
+              hostsUpdated={apiChangeStatus === STATUS.RESOLVED}
+            />
+          </> }
+          { apiChangeStatus === STATUS.RESOLVED &&
+          <ContentSourceTemplate template={template} jobInvocationPath={jobInvocationPath} /> }
+        </Grid>
+      </PageSection>
+    </>
   );
 };
 

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

@@ -3,8 +3,9 @@ import {
   selectAPIResponse,
   selectAPIError,
 } from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
 
-import { CHANGE_CONTENT_SOURCE_DATA, CHANGE_CONTENT_SOURCE, CHANGE_CONTENT_SOURCE_VIEWS } from './constants';
+import { CHANGE_CONTENT_SOURCE_DATA, CHANGE_CONTENT_SOURCE_PROXY, CHANGE_CONTENT_SOURCE, CHANGE_CONTENT_SOURCE_VIEWS } from './constants';
 
 // API statuses
 export const selectApiDataStatus = state =>
@@ -19,14 +20,14 @@ export const selectApiChangeContentStatus = state =>
 export const selectError = state => selectAPIError(state, CHANGE_CONTENT_SOURCE);
 
 // Selectors
-export const selectContentHostsIds = state =>
-  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).content_hosts_ids || [];
+export const selectContentHosts = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).content_hosts || [];
 
-export const selectHostsWithoutContent = state =>
+export const selectContentHostsWithoutContent = state =>
   selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).hosts_without_content || [];
 
 export const selectEnvironments = state =>
-  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).environments || [];
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_PROXY).lifecycle_environments || [];
 
 export const selectContentSources = state =>
   selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).content_sources || [];
@@ -37,6 +38,9 @@ export const selectJobInvocationPath = state =>
 export const selectContentViews = state =>
   selectAPIResponse(state, CHANGE_CONTENT_SOURCE_VIEWS).results || [];
 
+export const selectContentViewsStatus = state =>
+  selectAPIStatus(state, CHANGE_CONTENT_SOURCE_VIEWS) || STATUS.PENDING;
+
 export const selectTemplate = state =>
   selectAPIResponse(state, CHANGE_CONTENT_SOURCE) || '';
 

data/webpack/scenes/Hosts/ChangeContentSource/styles.scss

@@ -6,6 +6,14 @@
   margin-bottom: 40px;
 }
 
-.margin-40 {
-  margin: 40px;
+.margin-left-20 {
+  margin-left: 20px;
+}
+
+.margin-top-20 {
+  margin-top: 20px;
+}
+
+.set-select-width {
+  width: 60%
 }

data/webpack/scenes/ModuleStreams/Details/ModuleDetailsSchema.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import ModuleStreamDetailArtifacts from './ModuleStreamDetailArtifacts';
+import ModuleStreamDetailProfiles from './Profiles/ModuleStreamDetailProfiles';
 import ContentDetailInfo from '../../../components/Content/Details/ContentDetailInfo';
 import ContentDetailRepositories from '../../../components/Content/Details/ContentDetailRepositories';
 
@@ -16,7 +17,7 @@ export const displayMap = new Map([
 ]);
 
 export default (detailInfo) => {
-  const { repositories, artifacts } = detailInfo;
+  const { repositories, profiles, artifacts } = detailInfo;
 
   return [
     {
@@ -36,6 +37,14 @@ export default (detailInfo) => {
     },
     {
       key: 3,
+      tabHeader: __('Profiles'),
+      tabContent: (profiles && profiles.length ?
+        <ModuleStreamDetailProfiles profiles={profiles} /> :
+        __('No profiles to show')
+      ),
+    },
+    {
+      key: 4,
       tabHeader: __('Artifacts'),
       tabContent: (artifacts && artifacts.length ?
         <ModuleStreamDetailArtifacts artifacts={artifacts} /> :

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetails.js

@@ -42,7 +42,7 @@ class ModuleStreamDetails extends Component {
     };
 
     return (
-      <div>
+      <div style={{ margin: '24px' }}>
         {!loading && <BreadcrumbsBar
           isLoadingResources={loading}
           onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}

data/webpack/scenes/ModuleStreams/Details/__tests__/__snapshots__/ModuleStreamDetails.test.js.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Module stream details page rendering renders with loading state 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "margin": "24px",
+    }
+  }
+>
   <ContentDetails
     contentDetails={
       Object {
@@ -76,6 +82,11 @@ exports[`Module stream details page rendering renders with loading state 1`] = `
         },
         Object {
           "key": 3,
+          "tabContent": "No profiles to show",
+          "tabHeader": "Profiles",
+        },
+        Object {
+          "key": 4,
           "tabContent": "No artifacts to show",
           "tabHeader": "Artifacts",
         },
@@ -86,7 +97,13 @@ exports[`Module stream details page rendering renders with loading state 1`] = `
 `;
 
 exports[`Module stream details page rendering renders with module stream provided 1`] = `
-<div>
+<div
+  style={
+    Object {
+      "margin": "24px",
+    }
+  }
+>
   <BreadcrumbsBar
     breadcrumbItems={
       Array [
@@ -392,6 +409,84 @@ exports[`Module stream details page rendering renders with module stream provide
         },
         Object {
           "key": 3,
+          "tabContent": <ModuleStreamDetailProfiles
+            profiles={
+              Array [
+                Object {
+                  "id": 37,
+                  "name": "default",
+                  "rpms": Array [
+                    Object {
+                      "id": 108,
+                      "name": "perl",
+                    },
+                    Object {
+                      "id": 110,
+                      "name": "foo",
+                    },
+                    Object {
+                      "id": 111,
+                      "name": "rpm_0",
+                    },
+                    Object {
+                      "id": 112,
+                      "name": "rpm_1",
+                    },
+                    Object {
+                      "id": 113,
+                      "name": "rpm_2",
+                    },
+                    Object {
+                      "id": 114,
+                      "name": "rpm_3",
+                    },
+                    Object {
+                      "id": 115,
+                      "name": "rpm_4",
+                    },
+                    Object {
+                      "id": 116,
+                      "name": "rpm_5",
+                    },
+                    Object {
+                      "id": 117,
+                      "name": "rpm_6",
+                    },
+                    Object {
+                      "id": 118,
+                      "name": "rpm_7",
+                    },
+                    Object {
+                      "id": 119,
+                      "name": "rpm_8",
+                    },
+                    Object {
+                      "id": 120,
+                      "name": "rpm_9",
+                    },
+                    Object {
+                      "id": 121,
+                      "name": "rpm_10",
+                    },
+                  ],
+                },
+                Object {
+                  "id": 38,
+                  "name": "minimal",
+                  "rpms": Array [
+                    Object {
+                      "id": 84,
+                      "name": "python2-avocado",
+                    },
+                  ],
+                },
+              ]
+            }
+          />,
+          "tabHeader": "Profiles",
+        },
+        Object {
+          "key": 4,
           "tabContent": <ModuleStreamDetailArtifacts
             artifacts={
               Array [

data/webpack/scenes/ModuleStreams/ModuleStreamsPage.js

@@ -32,14 +32,6 @@ class ModuleStreamsPage extends Component {
     this.props.getModuleStreams({ search });
   };
 
-  getAutoCompleteParams = search => ({
-    endpoint: '/module_streams/auto_complete_search',
-    params: {
-      organization_id: orgId(),
-      search,
-    },
-  });
-
   updateSearchQuery = (searchQuery) => {
     this.setState({ searchQuery });
   };
@@ -52,7 +44,9 @@ class ModuleStreamsPage extends Component {
         content={moduleStreams}
         tableSchema={TableSchema}
         onSearch={this.onSearch}
-        getAutoCompleteParams={this.getAutoCompleteParams}
+        autocompleteEndpoint="/katello/api/v2/module_streams"
+        autocompleteQueryParams={{ organization_id: orgId() }}
+        bookmarkController="katello_module_streams"
         updateSearchQuery={this.updateSearchQuery}
         initialInputValue={this.state.searchQuery}
         onPaginationChange={this.onPaginationChange}

data/webpack/scenes/ModuleStreams/__tests__/__snapshots__/ModuleStreamPage.test.js.snap

@@ -2,8 +2,14 @@
 
 exports[`Module streams page should render and contain appropiate components 1`] = `
 <ContentPage
+  autocompleteEndpoint="/katello/api/v2/module_streams"
+  autocompleteQueryParams={
+    Object {
+      "organization_id": 1,
+    }
+  }
+  bookmarkController="katello_module_streams"
   content={Object {}}
-  getAutoCompleteParams={[Function]}
   header="Module Streams"
   initialInputValue=""
   onPaginationChange={[Function]}

data/webpack/scenes/Organizations/OrganizationSelectors.js

@@ -9,6 +9,7 @@ import {
 } from './OrganizationConstants';
 
 export const selectOrganizationState = state => state.katello.organization;
+export const selectOrgLoading = state => state.katello.organization.loading;
 
 export const selectManifestName = state =>
   selectOrganizationState(state).owner_details?.upstreamConsumer?.name;

data/webpack/scenes/RedHatRepositories/components/Search.js

@@ -2,9 +2,9 @@
 import React, { Component } from 'react';
 import { DropdownButton, MenuItem } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import '../index.scss';
-import Search from '../../../components/Search/index';
 import { orgId } from '../../../services/api';
 
 class RepositorySearch extends Component {
@@ -29,7 +29,6 @@ class RepositorySearch extends Component {
     ];
     this.state = { searchList: this.dropDownItems[0] };
     this.onSearch = this.onSearch.bind(this);
-    this.getAutoCompleteParams = this.getAutoCompleteParams.bind(this);
   }
 
   onSearch(search) {
@@ -41,23 +40,24 @@ class RepositorySearch extends Component {
     this.props.onSelectSearchList(searchList.key);
   }
 
-  getAutoCompleteParams(search) {
-    const params = {
-      organization_id: orgId(),
-      search,
-    };
+  getAutoCompleteEndpoint() {
     let endpoint = '';
     if (this.state.searchList.key === 'enabled') {
-      params.enabled = true;
-      endpoint = '/repositories/auto_complete_search';
+      endpoint = '/katello/api/v2/repositories/auto_complete_search';
     } else if (this.state.searchList.key === 'available') {
-      endpoint = '/repository_sets/auto_complete_search';
+      endpoint = '/katello/api/v2/repository_sets/auto_complete_search';
+    }
+
+    return endpoint;
+  }
+
+  autocompleteQueryParams() {
+    const params = { organization_id: orgId() };
+    if (this.state.searchList.key === 'enabled') {
+      params.enabled = true;
     }
 
-    return {
-      endpoint,
-      params,
-    };
+    return params;
   }
 
   render() {
@@ -77,9 +77,15 @@ class RepositorySearch extends Component {
               </MenuItem>
             ))}
         </DropdownButton>
-        <Search
+        <SearchBar
+          data={{
+            autocomplete: {
+              url: this.getAutoCompleteEndpoint(),
+              apiParams: this.autocompleteQueryParams(),
+            },
+            bookmarks: {},
+          }}
           onSearch={this.onSearch}
-          getAutoCompleteParams={this.getAutoCompleteParams}
         />
       </div>
     );