katello 4.3.0.rc4 → 4.4.0.rc2

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnTypeForm.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import {
+  ActionGroup,
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  Text,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { noop } from 'foremanReact/common/helpers';
+
+import { CDN_URL, CDN } from './CdnConfigurationConstants';
+import { updateCdnConfiguration } from '../../../Organizations/OrganizationActions';
+import {
+  selectUpdatingCdnConfiguration,
+} from '../../../Organizations/OrganizationSelectors';
+import './CdnConfigurationForm.scss';
+
+const CdnTypeForm = ({ showUpdate, onUpdate, url }) => {
+  const dispatch = useDispatch();
+  const [cdnUrl, setCdnUrl] = useState(url);
+  const [updateEnabled, setUpdateEnabled] = useState(showUpdate);
+  const updatingCdnConfiguration = useSelector(state => selectUpdatingCdnConfiguration(state));
+  const firstUpdate = useRef(true);
+
+  useEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+    setUpdateEnabled(true);
+  }, [cdnUrl]);
+
+  const performUpdate = () => {
+    setUpdateEnabled(false);
+    dispatch(updateCdnConfiguration({
+      type: CDN,
+      url: cdnUrl,
+    }, onUpdate));
+  };
+
+  return (
+    <Form isHorizontal>
+      <div id="update-hint-cdn" className="margin-top-16">
+        <Text>
+          <FormattedMessage
+            id="cdn-configuration-type"
+            defaultMessage={__('Red Hat content will be consumed from the {type}.')}
+            values={{
+              type: <strong>{__('Red Hat CDN')}</strong>,
+            }}
+          />
+          <br />
+          {showUpdate &&
+          <FormattedMessage
+            id="cdn-configuration-type-cdn"
+            defaultMessage={__('Click {update} below to save changes.')}
+            values={{
+              update: <strong>{__('Update')}</strong>,
+            }}
+          />
+          }
+        </Text>
+      </div>
+      <FormGroup label={__('URL')} isRequired>
+        <TextInput
+          aria-label="cdn-url"
+          type="text"
+          value={cdnUrl}
+          onChange={setCdnUrl}
+          isDisabled={updatingCdnConfiguration}
+        />
+      </FormGroup>
+
+      <ActionGroup>
+        <Button
+          aria-label="update-cdn-configuration"
+          variant="secondary"
+          onClick={performUpdate}
+          isDisabled={updatingCdnConfiguration || !updateEnabled || !cdnUrl}
+          isLoading={updatingCdnConfiguration}
+        >
+          {__('Update')}
+        </Button>
+      </ActionGroup>
+    </Form>
+
+  );
+};
+
+CdnTypeForm.propTypes = {
+  showUpdate: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func,
+  url: PropTypes.string,
+};
+
+CdnTypeForm.defaultProps = {
+  url: CDN_URL,
+  onUpdate: noop,
+};
+
+export default CdnTypeForm;

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/UpstreamServerTypeForm.js

@@ -0,0 +1,259 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import {
+  ActionGroup,
+  Alert,
+  Button,
+  Form,
+  FormAlert,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  TextInput,
+  Text,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { noop } from 'foremanReact/common/helpers';
+
+import { UPSTREAM_SERVER, DEFAULT_CONTENT_VIEW_LABEL, DEFAULT_LIFECYCLE_ENVIRONMENT_LABEL } from './CdnConfigurationConstants';
+import EditableTextInput from '../../../../components/EditableTextInput';
+
+import {
+  selectUpdatingCdnConfiguration,
+} from '../../../Organizations/OrganizationSelectors';
+
+import { updateCdnConfiguration } from '../../../Organizations/OrganizationActions';
+import './CdnConfigurationForm.scss';
+
+const UpstreamServerTypeForm = ({
+  showUpdate, contentCredentials, cdnConfiguration, onUpdate,
+}) => {
+  const dispatch = useDispatch();
+  const urlValue = cdnConfiguration.type === UPSTREAM_SERVER ? cdnConfiguration.url : '';
+  const [url, setUrl] = useState(urlValue);
+  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 [contentViewLabel, setContentViewLabel] =
+    useState(cdnConfiguration.upstream_content_view_label);
+
+  const [lifecycleEnvironmentLabel, setLifecycleEnvironmentLabel] =
+    useState(cdnConfiguration.upstream_lifecycle_environment_label);
+
+  const [updateEnabled, setUpdateEnabled] = useState(false);
+
+  const firstUpdate = useRef(true);
+  useEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+    setUpdateEnabled(true);
+  }, [url, username, password, organizationLabel,
+    contentViewLabel, lifecycleEnvironmentLabel,
+    sslCaCredentialId, cdnConfiguration]);
+
+  const editPassword = (value) => {
+    if (value === null) {
+      setPassword('');
+    } else {
+      setPassword(value);
+    }
+  };
+  const hasPassword = (cdnConfiguration.password_exists && !password)
+      || password?.length > 0;
+
+  const requiredFields = [username, organizationLabel, sslCaCredentialId];
+
+  if (!hasPassword) {
+    requiredFields.push(password);
+  }
+
+  const validated = !requiredFields.some(field => !field);
+  const onError = () => setUpdateEnabled(true);
+
+  const performUpdate = () => {
+    setUpdateEnabled(false);
+    dispatch(updateCdnConfiguration({
+      url,
+      username,
+      password,
+      upstream_organization_label: organizationLabel,
+      ssl_ca_credential_id: sslCaCredentialId,
+      upstream_content_view_label: contentViewLabel,
+      upstream_lifecycle_environment_label: lifecycleEnvironmentLabel,
+      type: UPSTREAM_SERVER,
+    }, onUpdate, onError));
+  };
+
+  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>
+        )}
+
+        <div id="update-hint-upstream-server" className="margin-top-16">
+          <Text>
+            <FormattedMessage
+              id="cdn-configuration-type"
+              defaultMessage={__('Red Hat content will be consumed from an {type}.')}
+              values={{
+                type: <strong>{__('upstream Foreman server')}</strong>,
+              }}
+            />
+            <br />
+            {showUpdate &&
+            <FormattedMessage
+              id="cdn-configuration-type-upstream-server"
+              defaultMessage={__('Provide the required information and click {update} below to save changes.')}
+              values={{
+                update: <strong>{__('Update')}</strong>,
+              }}
+            />
+            }
+          </Text>
+        </div>
+        <FormGroup
+          label={__('URL')}
+          isRequired
+        >
+          <TextInput
+            aria-label="cdn-url"
+            type="text"
+            value={url || ''}
+            onChange={value => setUrl(value)}
+            isDisabled={updatingCdnConfiguration}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Username')}
+          isRequired
+        >
+          <TextInput
+            aria-label="cdn-username"
+            type="text"
+            value={username || ''}
+            onChange={value => setUsername(value)}
+            isDisabled={updatingCdnConfiguration}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Password')}
+          isRequired
+        >
+          <EditableTextInput
+            attribute="cdn-password"
+            value={password}
+            isPassword
+            hasPassword={hasPassword}
+            onEdit={editPassword}
+            isDisabled={updatingCdnConfiguration}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Organization label')}
+          isRequired
+        >
+          <TextInput
+            aria-label="cdn-organization-label"
+            type="text"
+            value={organizationLabel || ''}
+            isDisabled={updatingCdnConfiguration}
+            onChange={setOrganizationLabel}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Lifecycle Environment Label')}
+        >
+          <TextInput
+            aria-label="cdn-lifecycle-environment-label"
+            type="text"
+            value={lifecycleEnvironmentLabel || DEFAULT_LIFECYCLE_ENVIRONMENT_LABEL}
+            isDisabled={updatingCdnConfiguration}
+            onChange={setLifecycleEnvironmentLabel}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Content view label')}
+        >
+          <TextInput
+            aria-label="cdn-content-view-label"
+            type="text"
+            value={contentViewLabel || DEFAULT_CONTENT_VIEW_LABEL}
+            isDisabled={updatingCdnConfiguration}
+            onChange={setContentViewLabel}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('SSL CA Content Credential')}
+          isRequired
+        >
+          <FormSelect
+            aria-label="cdn-ssl-ca-content-credential"
+            value={sslCaCredentialId || ''}
+            isDisabled={updatingCdnConfiguration}
+            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-upstream-configuration"
+            variant="secondary"
+            onClick={performUpdate}
+            isDisabled={updatingCdnConfiguration || !validated || !updateEnabled}
+            isLoading={updatingCdnConfiguration}
+          >
+            {__('Update')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </div>
+  );
+};
+
+UpstreamServerTypeForm.propTypes = {
+  showUpdate: PropTypes.bool.isRequired,
+  contentCredentials: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  })),
+  cdnConfiguration: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string,
+    username: PropTypes.string,
+    upstream_organization_label: PropTypes.string,
+    upstream_content_view_label: PropTypes.string,
+    upstream_lifecycle_environment_label: PropTypes.string,
+    ssl_ca_credential_id: PropTypes.number,
+    password_exists: PropTypes.bool,
+  }),
+  onUpdate: PropTypes.func,
+};
+
+UpstreamServerTypeForm.defaultProps = {
+  contentCredentials: [],
+  cdnConfiguration: {},
+  onUpdate: noop,
+};
+
+export default UpstreamServerTypeForm;

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/__tests__/AirGappedTypeForm.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+import { renderWithRedux, fireEvent } from 'react-testing-lib-wrapper';
+import AirGappedTypeForm from '../AirGappedTypeForm';
+import { nockInstance, assertNockRequest } from '../../../../../test-utils/nockWrapper';
+import { updateCdnConfigurationSuccessResponse } from '../../../../Organizations/__tests__/organizations.fixtures';
+import { AIRGAPPED } from '../CdnConfigurationConstants';
+
+import api from '../../../../../services/api';
+
+afterEach(cleanup);
+const updateCdnConfigurationPath = api.getApiUrl('/organizations/1/cdn_configuration');
+
+const updateButtonName = 'update-airgapped-configuration';
+
+const organization = {
+  id: 1,
+};
+
+const initialState = {
+  katello: {
+    organization,
+  },
+};
+
+
+test('Can update to Airgapped type', async (done) => {
+  const { getByLabelText } = renderWithRedux(<AirGappedTypeForm
+    showUpdate
+  />, { initialState });
+
+  const updateCdnConfigurationRequest = nockInstance
+    .put(updateCdnConfigurationPath, {
+      type: AIRGAPPED,
+    })
+    .reply(200, updateCdnConfigurationSuccessResponse);
+
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'false');
+
+  const updateButton = getByLabelText(updateButtonName);
+  fireEvent.click(updateButton);
+  assertNockRequest(updateCdnConfigurationRequest, done);
+});
+

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/__tests__/CdnTypeForm.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+import { renderWithRedux, fireEvent } from 'react-testing-lib-wrapper';
+import CdnTypeForm from '../CdnTypeForm';
+import { nockInstance, assertNockRequest } from '../../../../../test-utils/nockWrapper';
+import { updateCdnConfigurationSuccessResponse } from '../../../../Organizations/__tests__/organizations.fixtures';
+import { CDN, CDN_URL } from '../CdnConfigurationConstants';
+
+import api from '../../../../../services/api';
+
+afterEach(cleanup);
+const updateCdnConfigurationPath = api.getApiUrl('/organizations/1/cdn_configuration');
+
+const updateButtonName = 'update-cdn-configuration';
+const organization = {
+  id: 1,
+};
+
+const initialState = {
+  katello: {
+    organization,
+  },
+};
+
+test('Can update to cdn type', async (done) => {
+  const { getByLabelText } = renderWithRedux(<CdnTypeForm
+    showUpdate
+    url={CDN_URL}
+  />, { initialState });
+
+  const updateCdnConfigurationRequest = nockInstance
+    .put(updateCdnConfigurationPath, {
+      url: CDN_URL,
+      type: CDN,
+    })
+    .reply(200, updateCdnConfigurationSuccessResponse);
+
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'false');
+
+  const updateButton = getByLabelText(updateButtonName);
+  fireEvent.click(updateButton);
+  assertNockRequest(updateCdnConfigurationRequest, done);
+});
+
+test('Can update the cdn url', async (done) => {
+  const { getByLabelText } = renderWithRedux(<CdnTypeForm
+    showUpdate={false}
+    url={CDN_URL}
+  />, { initialState });
+
+  const updateCdnConfigurationRequest = nockInstance
+    .put(updateCdnConfigurationPath, {
+      url: 'http://cdn.example.com',
+      type: CDN,
+    })
+    .reply(200, updateCdnConfigurationSuccessResponse);
+
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'true');
+
+  const url = getByLabelText('cdn-url');
+  fireEvent.change(url, { target: { value: 'http://cdn.example.com' } });
+
+  const updateButton = getByLabelText(updateButtonName);
+  expect(updateButton).toHaveAttribute('aria-disabled', 'false');
+  fireEvent.click(updateButton);
+  assertNockRequest(updateCdnConfigurationRequest, done);
+});

data/webpack/scenes/Subscriptions/Manifest/{__tests__/CdnConfigurationForm.test.js → CdnConfigurationTab/__tests__/UpstreamServerTypeForm.test.js}

@@ -2,20 +2,27 @@ import React from 'react';
 import { cleanup } from '@testing-library/react';
 import { renderWithRedux, fireEvent, patientlyWaitFor } from 'react-testing-lib-wrapper';
 import userEvent from '@testing-library/user-event';
-import CdnConfigurationForm from '../CdnConfigurationForm';
-import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
-import { updateCdnConfigurationSuccessResponse } from '../../../Organizations/__tests__/organizations.fixtures';
-import api from '../../../../services/api';
+import UpstreamServerTypeForm from '../UpstreamServerTypeForm';
+import { nockInstance, assertNockRequest } from '../../../../../test-utils/nockWrapper';
+import { updateCdnConfigurationSuccessResponse } from '../../../../Organizations/__tests__/organizations.fixtures';
+import { UPSTREAM_SERVER } from '../CdnConfigurationConstants';
+
+import api from '../../../../../services/api';
 
 afterEach(cleanup);
 const updateCdnConfigurationPath = api.getApiUrl('/organizations/1/cdn_configuration');
 
+const updateButtonName = 'update-upstream-configuration';
+
 const cdnConfiguration = {
   url: 'http://currentcdn.example.com',
   username: 'CurrentUser',
   password_exists: false,
   upstream_organization_label: 'CurrentOrg',
   ssl_ca_credential_id: 2,
+  type: UPSTREAM_SERVER,
+  upstream_lifecycle_environment_label: 'Library',
+  upstream_content_view_label: 'CV',
 };
 
 const organization = {
@@ -39,8 +46,9 @@ const contentCredentials = [
   },
 ];
 
-test('Can update the CDN configuration', async (done) => {
-  const { getByLabelText } = renderWithRedux(<CdnConfigurationForm
+test('Can update the upstream server configuration', async (done) => {
+  const { getByLabelText } = renderWithRedux(<UpstreamServerTypeForm
+    showUpdate
     cdnConfiguration={cdnConfiguration}
     contentCredentials={contentCredentials}
   />, { initialState });
@@ -52,6 +60,9 @@ test('Can update the CDN configuration', async (done) => {
       password: 'changeme',
       upstream_organization_label: 'Default_Organization',
       ssl_ca_credential_id: '1',
+      type: UPSTREAM_SERVER,
+      upstream_lifecycle_environment_label: 'Library',
+      upstream_content_view_label: 'CV',
     })
     .reply(200, updateCdnConfigurationSuccessResponse);
 
@@ -74,14 +85,15 @@ test('Can update the CDN configuration', async (done) => {
     '1',
   );
 
-  const updateButton = getByLabelText('update-cdn-configuration');
+  const updateButton = getByLabelText(updateButtonName);
   fireEvent.click(updateButton);
 
   assertNockRequest(updateCdnConfigurationRequest, done);
 });
 
 test('the form shall reflect the given cdnConfiguration', () => {
-  const { getAllByTestId, getByLabelText } = renderWithRedux(<CdnConfigurationForm
+  const { getAllByTestId, getByLabelText } = renderWithRedux(<UpstreamServerTypeForm
+    showUpdate
     cdnConfiguration={cdnConfiguration}
     contentCredentials={contentCredentials}
   />, { initialState });
@@ -96,19 +108,36 @@ test('the form shall reflect the given cdnConfiguration', () => {
   expect(options[1].selected).toBeTruthy();
 });
 
-test('resetting the password sends nothing to the API', async (done) => {
-  const { getByLabelText } = renderWithRedux(<CdnConfigurationForm />, { initialState });
-
-  const updateCdnConfigurationRequest = nockInstance
-    .put(updateCdnConfigurationPath, {}) // note the empty request body
-    .reply(200, updateCdnConfigurationSuccessResponse);
+test('resetting the password enables/disables appropriately', async (done) => {
+  const { getByLabelText } = renderWithRedux(<UpstreamServerTypeForm
+    showUpdate
+    cdnConfiguration={{ ...cdnConfiguration, password_exists: true }}
+  />, { initialState });
 
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'true');
   fireEvent.click(getByLabelText('edit cdn-password'));
   fireEvent.change(getByLabelText('cdn-password text input'), { target: { value: 'changeme' } });
   fireEvent.click(getByLabelText('clear cdn-password'));
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'true');
 
-  const updateButton = getByLabelText('update-cdn-configuration');
-  fireEvent.click(updateButton);
+  fireEvent.click(getByLabelText('edit cdn-password'));
+  fireEvent.change(getByLabelText('cdn-password text input'), { target: { value: 'changeme' } });
+  fireEvent.click(getByLabelText('submit cdn-password'));
 
-  assertNockRequest(updateCdnConfigurationRequest, done);
+  await patientlyWaitFor(() => expect(getByLabelText('cdn-password text value')).toBeInTheDocument());
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'false');
+  done();
+});
+
+test('update button disabled on incomplete information', async (done) => {
+  const { getByLabelText } = renderWithRedux(<UpstreamServerTypeForm
+    showUpdate
+    cdnConfiguration={{ ...cdnConfiguration, password_exists: true }}
+    contentCredentials={contentCredentials}
+  />, { initialState });
+
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'true');
+  fireEvent.change(getByLabelText('cdn-username'), { target: { value: 'user' } });
+  expect(getByLabelText(updateButtonName)).toHaveAttribute('aria-disabled', 'false');
+  done();
 });

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/index.js

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@patternfly/react-core';
+import { noop } from 'foremanReact/common/helpers';
+import CdnTypeForm from './CdnTypeForm';
+import AirGappedTypeForm from './AirGappedTypeForm';
+import UpstreamServerTypeForm from './UpstreamServerTypeForm';
+
+import './CdnConfigurationForm.scss';
+import { CDN_URL, CDN, AIRGAPPED, UPSTREAM_SERVER, CDN_CONFIGURATION_TYPES } from './CdnConfigurationConstants';
+
+const CdnConfigurationForm = (props) => {
+  const {
+    contentCredentials,
+    cdnConfiguration,
+    onUpdate,
+  } = props;
+
+  const [type, setType] = useState(cdnConfiguration.type);
+
+  const updateType = (connectionType) => {
+    if (type !== connectionType) {
+      setType(connectionType);
+    }
+  };
+
+  const cdnUrl = type !== cdnConfiguration.type ? CDN_URL : cdnConfiguration.url;
+
+  return (
+    <div id="cdn-configuration">
+      <ToggleGroup aria-label="Default with multiple selectable">
+        <ToggleGroupItem text={CDN_CONFIGURATION_TYPES[CDN]} key={0} buttonId="cdn" isSelected={type === CDN} onChange={() => updateType(CDN)} />
+        <ToggleGroupItem
+          text={CDN_CONFIGURATION_TYPES[UPSTREAM_SERVER]}
+          key={1}
+          buttonId="usptream_server"
+          isSelected={type === UPSTREAM_SERVER}
+          onChange={() => updateType(UPSTREAM_SERVER)}
+        />
+        <ToggleGroupItem text={CDN_CONFIGURATION_TYPES[AIRGAPPED]} key={2} buttonId="airgapped" isSelected={type === AIRGAPPED} onChange={() => updateType(AIRGAPPED)} />
+      </ToggleGroup>
+
+      { type === UPSTREAM_SERVER &&
+        <UpstreamServerTypeForm
+          cdnConfiguration={cdnConfiguration}
+          contentCredentials={contentCredentials}
+          onUpdate={onUpdate}
+          showUpdate={type !== cdnConfiguration.type}
+        />
+      }
+
+      { type === CDN &&
+        <CdnTypeForm
+          showUpdate={type !== cdnConfiguration.type}
+          onUpdate={onUpdate}
+          url={cdnUrl}
+        />
+      }
+      { type === AIRGAPPED &&
+        <AirGappedTypeForm
+          showUpdate={type !== cdnConfiguration.type}
+          onUpdate={onUpdate}
+        />
+      }
+    </div>
+  );
+};
+
+CdnConfigurationForm.propTypes = {
+  contentCredentials: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  })),
+  cdnConfiguration: PropTypes.shape({
+    type: PropTypes.string,
+    url: PropTypes.string,
+    username: PropTypes.string,
+    upstream_organization_label: PropTypes.string,
+    upstream_content_view_label: PropTypes.string,
+    upstream_lifecycle_environment_label: PropTypes.string,
+    ssl_ca_credential_id: PropTypes.number,
+    password_exists: PropTypes.bool,
+  }),
+  onUpdate: PropTypes.func,
+};
+
+CdnConfigurationForm.defaultProps = {
+  contentCredentials: [],
+  cdnConfiguration: {},
+  onUpdate: noop,
+};
+
+export default CdnConfigurationForm;