katello 4.3.0.rc4 → 4.4.0.rc2

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

@@ -25,8 +25,8 @@ const DetailsExpansion = ({
         <RelatedCompositeContentViewsModal
           key={cvId}
           {...{
-         cvName, cvId, relatedCVCount, relatedCompositeCVs,
-        }}
+            cvName, cvId, relatedCVCount, relatedCompositeCVs,
+          }}
         />
       </>
     );

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

@@ -46,7 +46,7 @@ const RelatedContentViewsModal = ({ cvName, cvId, relatedCVCount }) => {
       <Button aria-label={`button_${cvId}`} variant="link" isInline onClick={handleModalToggle}>
         {relatedCVCount}
       </Button>
-      <Grid className="grid-with-margin">
+      <Grid>
         <GridItem span={12}>
           <Modal
             title={__('Related component content views')}
@@ -54,18 +54,18 @@ const RelatedContentViewsModal = ({ cvName, cvId, relatedCVCount }) => {
             isOpen={isOpen}
             description={description()}
             onClose={() => {
-                setIsOpen(false);
-              }}
+              setIsOpen(false);
+            }}
             appendTo={document.body}
           >
 
             <TableWrapper
               {...{
-              metadata,
-              searchQuery,
-              updateSearchQuery,
-              error,
-              status,
+                metadata,
+                searchQuery,
+                updateSearchQuery,
+                error,
+                status,
               }}
               fetchItems={useCallback(params => getContentViewComponents(cvId, params, 'Added'), [cvId])}
               variant={TableVariant.compact}

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

@@ -0,0 +1,43 @@
+
+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,
+  CHANGE_CONTENT_SOURCE,
+  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 changeContentSource = (environmentId, contentViewId, contentSourceId, hostIds) =>
+  put({
+    key: CHANGE_CONTENT_SOURCE,
+    url: foremanUrl('/api/v2/hosts/bulk/change_content_source'),
+    params: {
+      environment_id: environmentId,
+      content_view_id: contentViewId,
+      content_source_id: contentSourceId,
+      host_ids: hostIds,
+    },
+    successToast: () => __('Content source successfully updated.'),
+    errorToast: () => __('Something went wrong while updating the content source. See the logs for more information'),
+  });
+
+export const getContentViews = environmentId =>
+  get({
+    key: CHANGE_CONTENT_SOURCE_VIEWS,
+    url: foremanUrl('/katello/api/v2/content_views'),
+    params: {
+      environment_id: environmentId,
+      full_result: true,
+    },
+    errorToast: () => __('Something went wrong while loading the content views. See the logs for more information'),
+  });

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  ActionGroup,
+  Button,
+  Form,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import FormField from './FormField';
+
+const ContentSourceForm = ({
+  handleSubmit,
+  environments,
+  handleEnvironment,
+  environmentId,
+  contentViews,
+  handleContentView,
+  contentViewId,
+  contentSources,
+  handleContentSource,
+  contentSourceId,
+  contentHostsIds,
+  isLoading,
+}) => {
+  const formIsValid = () => (!!environmentId &&
+    !!contentViewId &&
+    !!contentSourceId &&
+    contentHostsIds.length !== 0);
+
+  return (
+    <Form
+      onSubmit={e => handleSubmit(e)}
+      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} />
+
+        <GridItem>
+          <ActionGroup>
+            <Button
+              variant="primary"
+              id="generate_btn"
+              onClick={e => handleSubmit(e)}
+              isDisabled={isLoading || !formIsValid()}
+              isLoading={isLoading}
+            >
+              {__('Change content source')}
+            </Button>
+          </ActionGroup>
+        </GridItem>
+      </Grid>
+    </Form>);
+};
+
+ContentSourceForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  environments: PropTypes.arrayOf(PropTypes.shape({})),
+  handleEnvironment: PropTypes.func.isRequired,
+  environmentId: PropTypes.string,
+  contentViews: PropTypes.arrayOf(PropTypes.shape({})),
+  handleContentView: PropTypes.func.isRequired,
+  contentViewId: PropTypes.string,
+  contentSources: PropTypes.arrayOf(PropTypes.shape({})),
+  handleContentSource: PropTypes.func.isRequired,
+  contentSourceId: PropTypes.string,
+  contentHostsIds: PropTypes.arrayOf(PropTypes.number),
+  isLoading: PropTypes.bool,
+};
+
+ContentSourceForm.defaultProps = {
+  environments: [],
+  environmentId: '',
+  contentViews: [],
+  contentViewId: '',
+  contentSources: [],
+  contentSourceId: '',
+  contentHostsIds: [],
+  isLoading: false,
+};
+
+export default ContentSourceForm;

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.shape({})).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/ModuleStreamDetailsReducer.js

@@ -7,27 +7,27 @@ import {
 
 export default (state = initialApiState, action) => {
   switch (action.type) {
-    case MODULE_STREAM_DETAILS_REQUEST: {
-      return state.set('loading', true);
-    }
+  case MODULE_STREAM_DETAILS_REQUEST: {
+    return state.set('loading', true);
+  }
 
-    case MODULE_STREAM_DETAILS_SUCCESS: {
-      const moduleStreamDetails = action.response;
+  case MODULE_STREAM_DETAILS_SUCCESS: {
+    const moduleStreamDetails = action.response;
 
-      return state.merge({
-        ...moduleStreamDetails,
-        loading: false,
-      });
-    }
+    return state.merge({
+      ...moduleStreamDetails,
+      loading: false,
+    });
+  }
 
-    case MODULE_STREAM_DETAILS_FAILURE: {
-      return state.merge({
-        error: action.payload.message,
-        loading: false,
-      });
-    }
+  case MODULE_STREAM_DETAILS_FAILURE: {
+    return state.merge({
+      error: action.payload.message,
+      loading: false,
+    });
+  }
 
-    default:
-      return state;
+  default:
+    return state;
   }
 };

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/ModuleStreamsReducer.js

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

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 = {