katello 4.3.0 → 4.4.0.rc1

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

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import {
+  Grid,
+  GridItem,
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  ExpandableSection,
+  ExpandableSectionToggle,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import { copyToClipboard } from '../helpers';
+
+const ContentSourceTemplate = ({ template, jobInvocationPath }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isCopied, setCopied] = useState(false);
+
+  const handleCopy = (e) => {
+    copyToClipboard(e, template);
+    setCopied(true);
+  };
+
+  const actions = (
+    <CodeBlockAction>
+      <ClipboardCopyButton
+        onClick={e => handleCopy(e)}
+        exitDelay={600}
+        maxWidth="110px"
+        variant="plain"
+      >
+        {isCopied ? __('Copied to clipboard') : __('Copy to clipboard')}
+      </ClipboardCopyButton>
+    </CodeBlockAction>
+  );
+
+  return (
+    <Grid>
+      <GridItem span={7}>
+        <h1>
+          {__("What's next?")}
+        </h1>
+        <p>
+          {jobInvocationPath && (
+          <>
+            <a href={jobInvocationPath}>
+              {__('Run job invocation')}
+            </a>
+          &nbsp;
+            {__('to update configuration on all hosts, or')}
+          </>
+      )}
+        &nbsp;
+          {__('update configuration on the hosts manually:')}
+        </p>
+      </GridItem>
+      <GridItem span={7}>
+        <CodeBlock actions={actions} className="cs_template_code">
+          <CodeBlockCode>
+            {__('Change content source')}
+            <ExpandableSection isExpanded={isExpanded} isDetached>
+              {template}
+            </ExpandableSection>
+          </CodeBlockCode>
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={() => setIsExpanded(!isExpanded)}
+            contentId="code-block-expand"
+            direction="up"
+          >
+            {isExpanded ? 'Show less' : 'Show more'}
+          </ExpandableSectionToggle>
+        </CodeBlock>
+      </GridItem>
+    </Grid>);
+};
+
+ContentSourceTemplate.propTypes = {
+  template: PropTypes.string,
+  jobInvocationPath: PropTypes.string,
+};
+
+ContentSourceTemplate.defaultProps = {
+  template: '',
+  jobInvocationPath: '',
+};
+
+export default ContentSourceTemplate;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  GridItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+const FormField = ({
+  label, id, value, items, onChange, isLoading, contentHostsCount,
+}) => (
+  <GridItem span={7}>
+    <FormGroup label={label} fieldId={id} isRequired>
+      <FormSelect
+        value={value}
+        onChange={v => onChange(v)}
+        className="without_select2"
+        isDisabled={isLoading || items.length === 0 || contentHostsCount === 0}
+        id={`${id}_select`}
+        isRequired
+      >
+        <FormSelectOption key={0} value="" label={__('Select ...')} />
+        { items.map(item => (
+          <FormSelectOption key={item.id} value={item.id} label={item.name} />
+          ))}
+      </FormSelect>
+    </FormGroup>
+  </GridItem>
+);
+
+FormField.propTypes = {
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChange: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  contentHostsCount: PropTypes.number.isRequired,
+};
+
+export default FormField;

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

@@ -0,0 +1,3 @@
+export const CHANGE_CONTENT_SOURCE_DATA = 'CHANGE_CONTENT_SOURCE_DATA';
+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

@@ -0,0 +1,27 @@
+import { STATUS } from 'foremanReact/constants';
+
+export const getHostIds = () => {
+  const cookie = document.cookie.split('; ')
+    .find(row => row.startsWith('_ForemanSelectedhosts'));
+  const params = new URLSearchParams(cookie);
+  const ids = params.get('_ForemanSelectedhosts');
+
+  if (ids) return JSON.parse(ids);
+  return [];
+};
+
+export const formIsLoading = (data, contentView, change) => (
+  data === STATUS.PENDING ||
+  contentView === STATUS.PENDING ||
+  change === STATUS.PENDING
+);
+
+export const copyToClipboard = (event, textToCopy) => {
+  const clipboard = event.currentTarget.parentElement;
+  const el = document.createElement('textarea');
+  el.value = textToCopy;
+  clipboard.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  clipboard.removeChild(el);
+};

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

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { Alert, Grid, GridItem, List, ListItem } from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+import { selectApiDataStatus,
+  selectApiContentViewStatus,
+  selectApiChangeContentStatus,
+  selectContentHostsIds,
+  selectHostsWithoutContent,
+  selectEnvironments,
+  selectContentSources,
+  selectJobInvocationPath,
+  selectContentViews,
+  selectTemplate } from './selectors';
+import { getHostIds, formIsLoading } from './helpers';
+import { getFormData, changeContentSource, getContentViews } from './actions';
+import ContentSourceForm from './components/ContentSourceForm';
+import ContentSourceTemplate from './components/ContentSourceTemplate';
+import './styles.scss';
+
+const ChangeContentSourcePage = () => {
+  const dispatch = useDispatch();
+
+  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 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 handleSubmit = (e) => {
+    e.preventDefault();
+
+    dispatch(changeContentSource(environmentId, contentViewId, contentSourceId, contentHostsIds));
+  };
+
+  const handleEnvironment = (envId) => {
+    if (envId) {
+      dispatch(getContentViews(envId));
+    }
+
+    setEnvironmentId(envId);
+    setContentViewId('');
+  };
+
+  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>);
+
+  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>);
+  }
+
+  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>
+  );
+};
+
+export default ChangeContentSourcePage;

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

@@ -0,0 +1,42 @@
+import {
+  selectAPIStatus,
+  selectAPIResponse,
+  selectAPIError,
+} from 'foremanReact/redux/API/APISelectors';
+
+import { CHANGE_CONTENT_SOURCE_DATA, CHANGE_CONTENT_SOURCE, CHANGE_CONTENT_SOURCE_VIEWS } from './constants';
+
+// API statuses
+export const selectApiDataStatus = state =>
+  selectAPIStatus(state, CHANGE_CONTENT_SOURCE_DATA);
+
+export const selectApiContentViewStatus = state =>
+  selectAPIStatus(state, CHANGE_CONTENT_SOURCE_VIEWS);
+
+export const selectApiChangeContentStatus = state =>
+  selectAPIStatus(state, CHANGE_CONTENT_SOURCE);
+
+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 selectHostsWithoutContent = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).hosts_without_content || [];
+
+export const selectEnvironments = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).environments || [];
+
+export const selectContentSources = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).content_sources || [];
+
+export const selectJobInvocationPath = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_DATA).job_invocation_path;
+
+export const selectContentViews = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE_VIEWS).results || [];
+
+export const selectTemplate = state =>
+  selectAPIResponse(state, CHANGE_CONTENT_SOURCE) || '';
+

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

@@ -0,0 +1,11 @@
+.cs_template_code pre {
+  border: 0px !important;
+}
+
+.cs_alert {
+  margin-bottom: 40px;
+}
+
+.margin-40 {
+  margin: 40px;
+}

data/webpack/scenes/ModuleStreams/Details/Profiles/__tests__/ModuleStreamDetailProfiles.test.js

@@ -2,7 +2,6 @@ import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 import ModuleStreamDetailProfiles from '../ModuleStreamDetailProfiles';
 import { details } from '../../__tests__/moduleStreamDetails.fixtures';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper');
 
 const fixtures = {
   'renders with profiles': {

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

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

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

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

data/webpack/scenes/ModuleStreams/__tests__/ModuleStreamsTable.test.js

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

data/webpack/scenes/Organizations/OrganizationActions.js

@@ -39,7 +39,7 @@ const updateCdnConfigurationErrorToast = (error) => {
   return messages;
 };
 
-export const updateCdnConfiguration = (params) => {
+export const updateCdnConfiguration = (params, updateResults, onError) => {
   const nonNullParams = Object.keys(params)
     .filter(key => params[key] !== null)
     .reduce((a, k) => ({ ...a, [k]: params[k] }), {});
@@ -51,6 +51,10 @@ export const updateCdnConfiguration = (params) => {
     params: nonNullParams,
     errorToast: error => updateCdnConfigurationErrorToast(error),
     successToast: response => updateCdnConfigurationSuccessToast(response),
+    updateData: (_, resp) => {
+      updateResults(resp);
+    },
+    handleError: onError,
   });
 };
 

data/webpack/scenes/RedHatRepositories/RedHatRepositoriesPage.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { Grid, Row, Col } from 'react-bootstrap';
+import { Skeleton, Alert } from '@patternfly/react-core';
 import { Button } from 'patternfly-react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PermissionDenied from 'foremanReact/components/PermissionDenied';
@@ -15,6 +16,7 @@ import SearchBar from './components/SearchBar';
 import RecommendedRepositorySetsToggler from './components/RecommendedRepositorySetsToggler';
 import { getSetsComponent, getEnabledComponent } from './helpers';
 import api from '../../services/api';
+import { AIRGAPPED } from '../Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationConstants';
 
 class RedHatRepositoriesPage extends Component {
   componentDidMount() {
@@ -22,12 +24,13 @@ class RedHatRepositoriesPage extends Component {
   }
 
   loadData() {
+    this.props.loadOrganization();
     this.props.loadEnabledRepos();
     this.props.loadRepositorySets({ search: { filters: ['rpm'] } });
   }
 
   render() {
-    const { enabledRepositories, repositorySets } = this.props;
+    const { enabledRepositories, repositorySets, organization } = this.props;
     const { repoParams } = createEnabledRepoParams(enabledRepositories);
 
     if (!isEmpty(repositorySets.missingPermissions)) {
@@ -36,6 +39,26 @@ class RedHatRepositoriesPage extends Component {
     if (!isEmpty(enabledRepositories.missingPermissions)) {
       return <PermissionDenied missingPermissions={enabledRepositories.missingPermissions} />;
     }
+    if (!(organization?.cdn_configuration)) {
+      return <Skeleton />;
+    }
+    if (organization.cdn_configuration.type === AIRGAPPED) {
+      return (
+        <Grid id="redhatRepositoriesPage" bsClass="container-fluid">
+          <h1>{__('Red Hat Repositories')}</h1>
+          <Row className="toolbar-pf">
+            <Col>
+              <Alert
+                variant="info"
+                className="repo-sets-alert"
+                isInline
+                title={__('CDN configuration is set to Air-gapped (disconnected). Repository enablement/disablement is not permitted on this page.')}
+              />
+            </Col>
+          </Row>
+        </Grid>
+      );
+    }
 
     return (
       <Grid id="redhatRepositoriesPage" bsClass="container-fluid">
@@ -99,6 +122,7 @@ class RedHatRepositoriesPage extends Component {
 }
 
 RedHatRepositoriesPage.propTypes = {
+  loadOrganization: PropTypes.func.isRequired,
   loadEnabledRepos: PropTypes.func.isRequired,
   loadRepositorySets: PropTypes.func.isRequired,
   updateRecommendedRepositorySets: PropTypes.func.isRequired,
@@ -115,6 +139,12 @@ RedHatRepositoriesPage.propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     missingPermissions: PropTypes.array,
   }).isRequired,
+  organization: PropTypes.shape({
+    cdn_configuration: PropTypes.shape({
+      type: PropTypes.string,
+    }),
+  }).isRequired,
+
 };
 
 export default RedHatRepositoriesPage;

data/webpack/scenes/RedHatRepositories/__tests__/RedHatRepositoriesPage.test.js

@@ -9,6 +9,7 @@ describe('RedHatRepositories page', () => {
   const page = shallow(<RedHatRepositoriesPage
     loadEnabledRepos={jest.fn()}
     loadRepositorySets={jest.fn()}
+    loadOrganization={jest.fn()}
     updateRecommendedRepositorySets={jest.fn()}
     enabledRepositories={{
       loading: false,
@@ -22,11 +23,19 @@ describe('RedHatRepositories page', () => {
       search: {},
       missingPermissions: [],
     }}
+    organization={{
+      id: 1000,
+      cdn_configuration: {
+        type: 'redhat_cdn',
+        url: 'http://cdn.example.com',
+      },
+    }}
   />);
 
   const permissionDeniedPage = shallow(<RedHatRepositoriesPage
     loadEnabledRepos={jest.fn()}
     loadRepositorySets={jest.fn()}
+    loadOrganization={jest.fn()}
     updateRecommendedRepositorySets={jest.fn()}
     enabledRepositories={{
       loading: false,
@@ -39,6 +48,13 @@ describe('RedHatRepositories page', () => {
       search: {},
       missingPermissions: ['view_organizations'],
     }}
+    organization={{
+      id: 1000,
+      cdn_configuration: {
+        type: 'redhat_cdn',
+        url: 'http://cdn.example.com',
+      },
+    }}
   />);
 
   it('should render', async () => {

data/webpack/scenes/RedHatRepositories/__tests__/__snapshots__/RedHatRepositoriesPage.test.js.snap

@@ -112,9 +112,18 @@ exports[`RedHatRepositories page should render 1`] = `
           <div
             className="sticky-pagination sticky-pagination-grey"
           >
-            <PaginationWrapper
+            <Pagination
+              className={null}
+              isCompact={true}
+              itemCount={0}
+              noSidePadding={false}
               onChange={[Function]}
-              viewType="list"
+              onPerPageSelect={null}
+              onSetPage={null}
+              page={1}
+              perPage={null}
+              updateParamsByUrl={true}
+              variant="bottom"
             />
           </div>
         </ListView>

data/webpack/scenes/RedHatRepositories/helpers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ListView } from 'patternfly-react';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
+import Pagination from 'foremanReact/components/Pagination';
 
 import RepositorySet from './components/RepositorySet';
 import EnabledRepository from './components/EnabledRepository';
@@ -34,10 +34,10 @@ export const getSetsComponent = (repoSetsState, onPaginationChange) => {
     <ListView>
       <div className="sticky-pagination">
         <Pagination
-          viewType="list"
           itemCount={itemCount}
-          pagination={pagination}
           onChange={onPaginationChange}
+          isCompact
+          {...pagination}
         />
       </div>
       {results.map(set => <RepositorySet id={set.id} key={set.id} {...set} />)}
@@ -64,10 +64,10 @@ export const getEnabledComponent = (enabledReposState, onPaginationChange) => {
     <ListView>
       <div className="sticky-pagination sticky-pagination-grey">
         <Pagination
-          viewType="list"
+          isCompact
           itemCount={itemCount}
-          pagination={pagination}
           onChange={onPaginationChange}
+          {...pagination}
         />
       </div>
       {repositories.map(repo => <EnabledRepository key={repo.id} {...repo} />)}

data/webpack/scenes/RedHatRepositories/index.js

@@ -1,23 +1,31 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
 /* eslint-disable import/no-unresolved */
-
+import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { loadEnabledRepos } from '../../redux/actions/RedHatRepositories/enabled';
 import { loadRepositorySets, updateRecommendedRepositorySets } from '../../redux/actions/RedHatRepositories/sets';
 import RedHatRepositoriesPage from './RedHatRepositoriesPage';
+import * as organizationActions from '../Organizations/OrganizationActions';
 
 const mapStateToProps = ({
   katello: {
     redHatRepositories: { enabled, sets },
+    organization,
   },
 }) => ({
   enabledRepositories: enabled,
   repositorySets: sets,
+  organization,
 });
 
-export default connect(mapStateToProps, {
+// map action dispatchers to props
+const actions = {
+  ...organizationActions,
   loadEnabledRepos,
   loadRepositorySets,
   updateRecommendedRepositorySets,
-})(RedHatRepositoriesPage);
+};
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(RedHatRepositoriesPage);