katello 4.3.0.rc1 → 4.3.0.rc4

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

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { STATUS } from 'foremanReact/constants';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+import { FormGroup, Checkbox, TextContent } from '@patternfly/react-core';
 import { selectEnvironmentPaths, selectEnvironmentPathsStatus } from './EnvironmentPathSelectors';
 import EnvironmentLabels from '../EnvironmentLabels';
 import './EnvironmentPaths.scss';
@@ -36,41 +36,40 @@ const EnvironmentPaths = ({
   /* eslint-disable react/no-array-index-key */
   return (
     <>
-      <b
-        style={{ marginBottom: '1em' }}
-      >{headerText}
-      </b>
-      <Form style={{ marginTop: '1em' }}>{results.map((path, count) => {
-        const {
-          environments,
-        } = path || {};
-        return (
-          <React.Fragment key={count}>
-            <FormGroup key={`fg-${count}`} isInline fieldId="environment-checkbox-group">
-              {environments.map(env =>
+      <TextContent>{headerText}</TextContent>
+      <div>
+        {results.map((path, index) => {
+          const {
+            environments,
+          } = path || {};
+          return (
+            <div className="env-path" key={index}>
+              {index === 0 && <hr />}
+              <FormGroup key={`fg-${index}`} isInline fieldId="environment-checkbox-group">
+                {environments.map(env =>
                 (<Checkbox
                   isChecked={(publishing && env.library) ||
-                  envCheckedInList(env, userCheckedItems) ||
-                  envCheckedInList(env, promotedEnvironments)}
+                    envCheckedInList(env, userCheckedItems) ||
+                    envCheckedInList(env, promotedEnvironments)}
                   isDisabled={(publishing && env.library)
-                  || envCheckedInList(env, promotedEnvironments)}
-                  style={{ marginRight: '3px', marginBottom: '1px' }}
-                  className="env-labels-with-pointer"
-                  key={`${env.id}${count}`}
-                  id={`${env.id}${count}`}
+                    || envCheckedInList(env, promotedEnvironments)}
+                  className="env-path__labels-with-pointer"
+                  key={`${env.id}${index}`}
+                  id={`${env.id}${index}`}
                   label={<EnvironmentLabels environments={env} />}
                   aria-label={env.label}
                   onChange={checked => oncheckedChange(checked, env)}
                 />))}
-            </FormGroup>
-            <hr key={`hr${count}`} style={{ margin: '0em' }} />
-          </React.Fragment>
-        );
-      })}
-      </Form>
+              </FormGroup>
+              <hr />
+            </div>
+          );
+        })
+          /* eslint-enable react/no-array-index-key */
+        }
+      </div>
     </>
   );
-  /* eslint-enable react/no-array-index-key */
 };
 
 EnvironmentPaths.propTypes = {

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

@@ -1,8 +1,20 @@
-.env-labels-with-pointer {
-  &:not(:last-child):after {
-    content: '>';
-    margin-top: 3px;
+.env-path {
+  .pf-c-form__group {
+    margin: 20px 0;
+  }
+
+  .env-path__labels-with-pointer {
+    &:not(:last-child):after {
+      content: '>';
+      margin-top: 3px;
+    }
+
+    display: inline-flex;
+    margin: 3px 1px;
+    align-items: center;
+  }
+
+  hr {
+    margin: 0;
   }
-  display: inline-flex;
-  margin-top: 3px;
 }

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, TextContent, Text, TextVariants, Flex, FlexItem } from '@patternfly/react-core';
+
+const WizardHeader = ({
+  title,
+  description,
+}) => (
+  <Grid style={{ gridGap: '24px' }}>
+    {title &&
+      <TextContent>
+        <Text component={TextVariants.h2}>{title}</Text>
+      </TextContent>}
+    {description &&
+      <TextContent>
+        <Flex flex={{ default: 'inlineFlex' }}>
+          <FlexItem>
+            <TextContent>
+              {description}
+            </TextContent>
+          </FlexItem>
+        </Flex>
+      </TextContent>}
+  </Grid>
+);
+
+WizardHeader.propTypes = {
+  title: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  description: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+};
+
+WizardHeader.defaultProps = {
+  title: undefined,
+  description: undefined,
+};
+
+
+export default WizardHeader;

data/webpack/scenes/ContentViews/components/contentViewIcon.scss

@@ -1,9 +1,20 @@
 .svg-centered-container {
   display: flex;
   align-items: center;
+  align-content: center;
+
+  .composite-component-count {
+    min-width: 10px;
+    text-align: center;
+  }
 }
 
-.svg-icon-centered {
-  margin: 0 5px;
+.svg-icon-composite {
+  margin: 0 6px;
   display: block;
 }
+
+.svg-icon-component {
+  margin: 0 9px;
+  display: block;
+}

data/webpack/scenes/Organizations/OrganizationActions.js

@@ -1,4 +1,6 @@
+import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToSnakeCase } from 'foremanReact/common/helpers';
+import { API_OPERATIONS, put } from 'foremanReact/redux/API';
 
 import api, { orgId } from '../../services/api';
 
@@ -6,10 +8,9 @@ import {
   GET_ORGANIZATION_REQUEST,
   GET_ORGANIZATION_SUCCESS,
   GET_ORGANIZATION_FAILURE,
-  SAVE_ORGANIZATION_REQUEST,
-  SAVE_ORGANIZATION_SUCCESS,
-  SAVE_ORGANIZATION_FAILURE,
+  UPDATE_CDN_CONFIGURATION_KEY,
 } from './OrganizationConstants';
+import { getResponseErrorMsgs } from '../../utils/helpers';
 
 export const loadOrganization = (extendedParams = {}) => async (dispatch) => {
   dispatch({ type: GET_ORGANIZATION_REQUEST });
@@ -32,28 +33,25 @@ export const loadOrganization = (extendedParams = {}) => async (dispatch) => {
   }
 };
 
-export const saveOrganization = (extendedParams = {}) => async (dispatch) => {
-  dispatch({ type: SAVE_ORGANIZATION_REQUEST });
+const updateCdnConfigurationSuccessToast = () => __('CDN Configuration updated.');
+const updateCdnConfigurationErrorToast = (error) => {
+  const messages = getResponseErrorMsgs(error.response);
+  return messages;
+};
 
-  const params = {
-    ...{ id: orgId() },
-    ...propsToSnakeCase(extendedParams),
-  };
-  try {
-    const { data } = await api.put(`/organizations/${orgId()}`, params);
-    const result = dispatch({
-      type: SAVE_ORGANIZATION_SUCCESS,
-      response: data,
-    });
-    // TODO: Necessary because of https://projects.theforeman.org/issues/26420
-    dispatch(loadOrganization());
-    return result;
-  } catch (error) {
-    return dispatch({
-      type: SAVE_ORGANIZATION_FAILURE,
-      result: error,
-    });
-  }
+export const updateCdnConfiguration = (params) => {
+  const nonNullParams = Object.keys(params)
+    .filter(key => params[key] !== null)
+    .reduce((a, k) => ({ ...a, [k]: params[k] }), {});
+
+  return put({
+    type: API_OPERATIONS.PUT,
+    key: UPDATE_CDN_CONFIGURATION_KEY,
+    url: api.getApiUrl(`/organizations/${orgId()}/cdn_configuration`),
+    params: nonNullParams,
+    errorToast: error => updateCdnConfigurationErrorToast(error),
+    successToast: response => updateCdnConfigurationSuccessToast(response),
+  });
 };
 
 export default loadOrganization;

data/webpack/scenes/Organizations/OrganizationConstants.js

@@ -2,6 +2,4 @@ export const GET_ORGANIZATION_REQUEST = 'GET_ORGANIZATION_REQUEST';
 export const GET_ORGANIZATION_SUCCESS = 'GET_ORGANIZATION_SUCCESS';
 export const GET_ORGANIZATION_FAILURE = 'GET_ORGANIZATION_FAILURE';
 
-export const SAVE_ORGANIZATION_REQUEST = 'SAVE_ORGANIZATION_REQUEST';
-export const SAVE_ORGANIZATION_SUCCESS = 'SAVE_ORGANIZATION_SUCCESS';
-export const SAVE_ORGANIZATION_FAILURE = 'SAVE_ORGANIZATION_FAILURE';
+export const UPDATE_CDN_CONFIGURATION_KEY = 'UPDATE_CDN_CONFIGURATION';

data/webpack/scenes/Organizations/OrganizationReducer.js

@@ -4,9 +4,6 @@ import {
   GET_ORGANIZATION_REQUEST,
   GET_ORGANIZATION_SUCCESS,
   GET_ORGANIZATION_FAILURE,
-  SAVE_ORGANIZATION_REQUEST,
-  SAVE_ORGANIZATION_SUCCESS,
-  SAVE_ORGANIZATION_FAILURE,
 } from './OrganizationConstants';
 
 const initialState = Immutable({ loading: false });
@@ -14,16 +11,12 @@ const initialState = Immutable({ loading: false });
 export default (state = initialState, action) => {
   switch (action.type) {
     case GET_ORGANIZATION_REQUEST:
-    case SAVE_ORGANIZATION_REQUEST:
       return state.set('loading', true);
 
     case GET_ORGANIZATION_SUCCESS:
-    case SAVE_ORGANIZATION_SUCCESS: {
       return Immutable({ loading: false, ...action.response });
-    }
 
     case GET_ORGANIZATION_FAILURE:
-    case SAVE_ORGANIZATION_FAILURE:
       return Immutable({ error: action.error });
 
     default:

data/webpack/scenes/Organizations/OrganizationSelectors.js

@@ -1,3 +1,13 @@
+import {
+  selectAPIStatus,
+} from 'foremanReact/redux/API/APISelectors';
+
+import { STATUS } from 'foremanReact/constants';
+
+import {
+  UPDATE_CDN_CONFIGURATION_KEY,
+} from './OrganizationConstants';
+
 export const selectOrganizationState = state => state.katello.organization;
 
 export const selectManifestName = state =>
@@ -16,3 +26,9 @@ export const selectIsManifestImported = state =>
 
 export const selectSimpleContentAccessEnabled = state =>
   selectOrganizationState(state).simple_content_access;
+
+export const selectCdnConfigurationUpdateStatus = state =>
+  selectAPIStatus(state, UPDATE_CDN_CONFIGURATION_KEY);
+
+export const selectUpdatingCdnConfiguration = state =>
+  selectCdnConfigurationUpdateStatus(state) === STATUS.PENDING;

data/webpack/scenes/Organizations/__tests__/OrganizationActions.test.js

@@ -1,5 +1,3 @@
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
 import thunk from 'redux-thunk';
 import Immutable from 'seamless-immutable';
 import configureMockStore from 'redux-mock-store';
@@ -8,11 +6,9 @@ import {
   requestSuccessResponse,
   getSuccessActions,
   getFailureActions,
-  saveSuccessActions,
-  saveFailureActions,
 } from './organizations.fixtures';
 
-import { loadOrganization, saveOrganization } from '../OrganizationActions';
+import { loadOrganization } from '../OrganizationActions';
 
 const mockStore = configureMockStore([thunk]);
 const store = mockStore({ organization: Immutable({}) });
@@ -40,20 +36,4 @@ describe('organization actions', () => {
     await store.dispatch(loadOrganization());
     expect(store.getActions()).toEqual(getSuccessActions);
   });
-
-  it('creates SAVE_ORGANIZATION_REQUEST and then fails with 422', async () => {
-    const mock = new MockAdapter(axios);
-    mock.onPut('/katello/api/v2/organizations/1').reply(422);
-
-    await store.dispatch(saveOrganization());
-    expect(store.getActions()).toEqual(saveFailureActions);
-  });
-
-  it('creates SAVE_ORGANIZATION_REQUEST and ends with success', async () => {
-    const mock = new MockAdapter(axios);
-    mock.onPut('/katello/api/v2/organizations/1').reply(200, requestSuccessResponse);
-
-    await store.dispatch(saveOrganization());
-    expect(store.getActions()).toEqual(saveSuccessActions);
-  });
 });

data/webpack/scenes/Organizations/__tests__/OrganizationReducer.test.js

@@ -33,24 +33,4 @@ describe('organizations reducer', () => {
       error: 'Unable to process request.',
     })).toEqual(errorState);
   });
-
-  it('should keep loading state on SAVE_ORGANIZATION_REQUEST', () => {
-    expect(reducer(initialState, {
-      type: types.SAVE_ORGANIZATION_REQUEST,
-    })).toEqual(loadingState);
-  });
-
-  it('should flatten organization response SAVE_ORGANIZATION_SUCCESS', () => {
-    expect(reducer(initialState, {
-      type: types.SAVE_ORGANIZATION_SUCCESS,
-      response: requestSuccessResponse,
-    })).toEqual(successState);
-  });
-
-  it('should have error on SAVE_ORGANIZATION_FAILURE', () => {
-    expect(reducer(initialState, {
-      type: types.SAVE_ORGANIZATION_FAILURE,
-      error: 'Unable to process request.',
-    })).toEqual(errorState);
-  });
 });

data/webpack/scenes/Organizations/__tests__/organizations.fixtures.js

@@ -8,6 +8,40 @@ export const loadingState = Immutable({
   loading: true,
 });
 
+export const updateCdnConfigurationSuccessResponse = Immutable({
+  id: '6c536461-e7e3-421a-9d7a-780a39cd8fb4',
+  label: 'Actions::Katello::CdnConfiguration::Update',
+  pending: false,
+  action: 'Update CDN Configuration',
+  username: 'admin',
+  started_at: '2021-11-16 12:00:46 -0500',
+  ended_at: '2021-11-16 12:00:47 -0500',
+  state: 'stopped',
+  result: 'success',
+  progress: 1,
+  input: {
+    locale: 'en',
+    current_request_id: '7a0d7e03-ced1-4925-8790-79b73d25d29b',
+    current_timezone: 'America/New_York',
+    current_organization_id: 4,
+    current_location_id: 2,
+    current_user_id: 4,
+  },
+  output: {},
+  humanized: {
+    action: 'Update CDN Configuration',
+    input: [],
+    output: '',
+    errors: [],
+  },
+  cli_example: null,
+  start_at: '2021-11-16 12:00:46 -0500',
+  available_actions: {
+    cancellable: false,
+    resumable: false,
+  },
+});
+
 export const requestSuccessResponse = Immutable({
   label: 'Default_Organization',
   owner_details: {
@@ -77,26 +111,3 @@ export const getFailureActions = [
     type: 'GET_ORGANIZATION_FAILURE',
   },
 ];
-
-export const saveSuccessActions = [
-  {
-    type: 'SAVE_ORGANIZATION_REQUEST',
-  },
-  {
-    response: requestSuccessResponse,
-    type: 'SAVE_ORGANIZATION_SUCCESS',
-  },
-  {
-    type: 'GET_ORGANIZATION_REQUEST',
-  },
-];
-
-export const saveFailureActions = [
-  {
-    type: 'SAVE_ORGANIZATION_REQUEST',
-  },
-  {
-    result: new Error('Request failed with status code 422'),
-    type: 'SAVE_ORGANIZATION_FAILURE',
-  },
-];

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationForm.js

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  ActionGroup,
+  Alert,
+  Button,
+  Form,
+  FormAlert,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  TextInput,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import EditableTextInput from '../../../components/EditableTextInput';
+
+import {
+  selectUpdatingCdnConfiguration,
+} from '../../Organizations/OrganizationSelectors';
+
+import { updateCdnConfiguration } from '../../Organizations/OrganizationActions';
+import './CdnConfigurationForm.scss';
+
+const CdnConfigurationForm = (props) => {
+  const {
+    contentCredentials,
+    cdnConfiguration,
+  } = props;
+
+  const dispatch = useDispatch();
+
+  const [url, setUrl] = useState(cdnConfiguration.url);
+  const [username, setUsername] = useState(cdnConfiguration.username);
+  const [password, setPassword] = useState(null);
+  const [organizationLabel, setOrganizationLabel] =
+    useState(cdnConfiguration.upstream_organization_label);
+  const [sslCaCredentialId, setSslCaCredentialId] = useState(cdnConfiguration.ssl_ca_credential_id);
+  const updatingCdnConfiguration = useSelector(state => selectUpdatingCdnConfiguration(state));
+
+  const editPassword = (value) => {
+    if (value === null) {
+      setPassword('');
+    } else {
+      setPassword(value);
+    }
+  };
+
+  const hasPassword = (cdnConfiguration.password_exists && password === null)
+    || password?.length > 0;
+
+  const requiresValidation = username || password || organizationLabel || sslCaCredentialId;
+
+  const requiredFields = [username, organizationLabel, sslCaCredentialId];
+
+  if (!hasPassword) {
+    requiredFields.push(password);
+  }
+
+  const validated = requiresValidation ?
+    !requiredFields.some(field => !field) :
+    true;
+
+  const performUpdate = () => {
+    dispatch(updateCdnConfiguration({
+      url,
+      username,
+      password,
+      upstream_organization_label: organizationLabel,
+      ssl_ca_credential_id: sslCaCredentialId,
+    }));
+  };
+
+  return (
+    <div id="cdn-configuration">
+      <Form isHorizontal>
+        { !validated && (
+          <FormAlert>
+            <Alert
+              variant="danger"
+              title={__('Username, Password, Organization Label, and SSL CA Content Credential must be provided together.')}
+              aria-live="polite"
+              isInline
+            />
+          </FormAlert>
+        )}
+        <FormGroup
+          label={__('URL')}
+          isRequired
+        >
+          <TextInput
+            isRequired
+            aria-label="cdn-url"
+            type="text"
+            value={url || ''}
+            onChange={value => setUrl(value)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Username')}
+          isRequired={requiresValidation}
+        >
+          <TextInput
+            aria-label="cdn-username"
+            type="text"
+            value={username || ''}
+            onChange={value => setUsername(value)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Password')}
+          isRequired={requiresValidation}
+        >
+          <EditableTextInput
+            attribute="cdn-password"
+            value={password}
+            isPassword
+            hasPassword={hasPassword}
+            onEdit={editPassword}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Organization Label')}
+          isRequired={requiresValidation}
+        >
+          <TextInput
+            aria-label="cdn-organization-label"
+            type="text"
+            value={organizationLabel || ''}
+            onChange={value => setOrganizationLabel(value)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('SSL CA Content Credential')}
+          isRequired={requiresValidation}
+        >
+          <FormSelect
+            aria-label="cdn-ssl-ca-content-credential"
+            value={sslCaCredentialId || ''}
+            onChange={value => setSslCaCredentialId(value)}
+          >
+            <FormSelectOption label={__('Select one')} isDisabled isPlaceholder />
+            {contentCredentials.map(cred =>
+              <FormSelectOption data-testid="ssl-ca-content-credential-option" key={cred.id} value={cred.id} label={cred.name} />)}
+          </FormSelect>
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            aria-label="update-cdn-configuration"
+            variant="secondary"
+            onClick={performUpdate}
+            isDisabled={updatingCdnConfiguration || !validated}
+            isLoading={updatingCdnConfiguration}
+          >
+            {__('Update')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </div>
+  );
+};
+
+CdnConfigurationForm.propTypes = {
+  contentCredentials: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  })),
+  cdnConfiguration: PropTypes.shape({
+    url: PropTypes.string,
+    username: PropTypes.string,
+    upstream_organization_label: PropTypes.string,
+    ssl_ca_credential_id: PropTypes.number,
+    password_exists: PropTypes.bool,
+  }),
+};
+
+CdnConfigurationForm.defaultProps = {
+  contentCredentials: [],
+  cdnConfiguration: {},
+};
+
+export default CdnConfigurationForm;

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationForm.scss

@@ -0,0 +1,3 @@
+.pf-c-form__group.pf-m-action {
+  margin-top: 0px;
+}