katello 4.5.0 → 4.6.0.rc1

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditCredentials.js

@@ -0,0 +1,354 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import {
+  ActionGroup,
+  Button,
+  Form,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  Modal,
+  ModalVariant,
+  Radio,
+  Switch,
+  TextInput,
+} from '@patternfly/react-core';
+import { editACS, getACSDetails } from '../../ACSActions';
+import {
+  selectContentCredentials,
+  selectContentCredentialsStatus,
+} from '../../../ContentCredentials/ContentCredentialSelectors';
+import Loading from '../../../../components/Loading';
+import { getContentCredentials } from '../../../ContentCredentials/ContentCredentialActions';
+import { CONTENT_CREDENTIAL_CERT_TYPE } from '../../../ContentCredentials/ContentCredentialConstants';
+
+const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
+  const {
+    verify_ssl: verifySsl,
+    ssl_ca_cert: sslCACert,
+    ssl_client_cert: sslClientCert,
+    ssl_client_key: sslClientKey,
+    upstream_username: username,
+    upstream_password_exists: passwordExists,
+  } = acsDetails;
+  const dispatch = useDispatch();
+  const contentCredentials = useSelector(selectContentCredentials);
+  const contentCredentialsStatus = useSelector(selectContentCredentialsStatus);
+  const [acsVerifySSL, setAcsVerifySSL] = useState(verifySsl);
+  const [acsUsername, setAcsUsername] = useState(username);
+  const [acsPassword, setAcsPassword] = useState(passwordExists ? '*****' : '');
+  const [acsCAcert, setAcsCAcert] = useState(sslCACert?.id);
+  const [acsSslClientCert, setAcsSslClientCert] = useState(sslClientCert?.id);
+  const [acsSslClientKey, setAcsSslClientKey] = useState(sslClientKey?.id);
+  const getAuthenticationState = () => {
+    if (username) {
+      return 'manual';
+    } else if (acsSslClientCert || acsSslClientKey) {
+      return 'credentials';
+    }
+    return 'none';
+  };
+  const [authentication, setAuthentication] = useState(getAuthenticationState());
+  const [saving, setSaving] = useState(false);
+
+  useEffect(
+    () => {
+      dispatch(getContentCredentials({ content_type: CONTENT_CREDENTIAL_CERT_TYPE }));
+    },
+    [dispatch],
+  );
+
+  const onSubmit = () => {
+    setSaving(true);
+    let params = {
+      verify_ssl: acsVerifySSL,
+      ssl_ca_cert_id: acsCAcert,
+    };
+
+    if (authentication === 'credentials') {
+      params = {
+        ssl_client_cert_id: acsSslClientCert,
+        ssl_client_key_id: acsSslClientKey,
+        upstream_username: null,
+        upstream_password: null,
+        ...params,
+      };
+    }
+    if (authentication === 'manual') {
+      params = {
+        upstream_username: acsUsername,
+        upstream_password: acsPassword === '*****' ? '*****' : acsPassword,
+        ssl_client_cert_id: null,
+        ssl_client_key_id: null,
+        ...params,
+      };
+      if (params.upstream_password === '*****') {
+        delete params.upstream_password;
+      }
+    }
+    if (authentication === 'none') {
+      params = {
+        upstream_username: null,
+        upstream_password: null,
+        ssl_client_cert_id: null,
+        ssl_client_key_id: null,
+        ...params,
+      };
+    }
+    dispatch(editACS(
+      acsId,
+      params,
+      () => {
+        dispatch(getACSDetails(acsId));
+        onClose();
+      },
+      () => {
+        setSaving(false);
+      },
+    ));
+  };
+
+  if (contentCredentialsStatus === STATUS.PENDING) {
+    return <Loading loadingText={__('Fetching content credentials')} />;
+  }
+
+  return (
+    <Modal
+      title={__('Edit Alternate content source credentials')}
+      variant={ModalVariant.large}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <FormGroup label={__('Verify SSL')} fieldId="verify_ssl">
+          <Switch
+            id="verify-ssl-switch"
+            aria-label="verify-ssl-switch"
+            isChecked={acsVerifySSL}
+            onChange={checked => setAcsVerifySSL(checked)}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('SSL CA certificate')}
+          type="string"
+          fieldId="ca_cert"
+        >
+          <FormSelect
+            isRequired
+            value={acsCAcert}
+            onChange={value => setAcsCAcert(value)}
+            aria-label="sslCAcert_select"
+          >
+            {
+                [
+                  <FormSelectOption
+                    key="placeholder"
+                    value=""
+                    label={__('Select a CA certificate')}
+                  />,
+                ].concat(contentCredentials?.map(cc => (
+                  <FormSelectOption
+                    key={cc.id}
+                    value={cc.id}
+                    label={cc.name}
+                  />
+                )))
+            }
+          </FormSelect>
+        </FormGroup>
+        <Radio
+          label={__('Manual authentication')}
+          id="manual_auth"
+          name="manual_auth"
+          aria-label="manual_auth"
+          isChecked={authentication === 'manual'}
+          onChange={() => {
+            setAuthentication('manual');
+            setAcsSslClientCert('');
+            setAcsSslClientKey('');
+          }}
+        />
+        {authentication === 'manual' &&
+        <>
+          <FormGroup
+            label={__('Username')}
+            type="string"
+            fieldId="acs_username"
+            isRequired
+          >
+            <TextInput
+              isRequired
+              type="text"
+              id="acs_username_field"
+              name="acs_username_field"
+              aria-label="acs_username_field"
+              value={acsUsername}
+              onChange={(value) => {
+                setAcsUsername(value);
+              }}
+            />
+
+          </FormGroup>
+          <FormGroup
+            label={__('Password')}
+            type="password"
+            fieldId="acs_password"
+          >
+            <TextInput
+              isRequired
+              type="password"
+              id="acs_password_field"
+              name="acs_password_field"
+              aria-label="acs_password_field"
+              value={acsPassword}
+              onChange={(value) => {
+                setAcsPassword(value);
+              }}
+            />
+          </FormGroup>
+        </>
+                }
+        <Radio
+          label={__('Content credentials')}
+          id="content_credentials"
+          aria-label="content_credentials"
+          name="content_cred_auth"
+          isChecked={authentication === 'credentials'}
+          onChange={() => {
+            setAuthentication('credentials');
+            setAcsUsername('');
+            setAcsPassword('');
+          }}
+        />
+        {authentication === 'credentials' &&
+        <>
+          <FormGroup
+            label={__('SSL client certificate')}
+            type="string"
+            fieldId="ssl_client_cert"
+          >
+            <FormSelect
+              isRequired
+              value={acsSslClientCert}
+              onChange={value => setAcsSslClientCert(value)}
+              aria-label="ssl_client_cert_select"
+            >
+              {
+                [
+                  <FormSelectOption
+                    key="placeholder"
+                    value=""
+                    label={__('Select a client certificate')}
+                  />,
+                ].concat(contentCredentials?.map(cc => (
+                  <FormSelectOption
+                    key={cc.id}
+                    value={cc.id}
+                    label={cc.name}
+                  />
+                )))
+              }
+            </FormSelect>
+          </FormGroup>
+          <FormGroup
+            label={__('SSL client key')}
+            type="string"
+            fieldId="client_key"
+          >
+            <FormSelect
+              isRequired
+              value={acsSslClientKey}
+              onChange={value => setAcsSslClientKey(value)}
+              aria-label="sslCAcert_select"
+            >
+              {
+                [
+                  <FormSelectOption
+                    key="placeholder"
+                    value=""
+                    label={__('Select a client key')}
+                  />,
+                ].concat(contentCredentials?.map(cc => (
+                  <FormSelectOption
+                    key={cc.id}
+                    value={cc.id}
+                    label={cc.name}
+                  />
+                )))
+              }
+            </FormSelect>
+          </FormGroup>
+        </>}
+        <Radio
+          label={__('None')}
+          id="none"
+          name="none"
+          aria-label="none"
+          isChecked={authentication === 'none'}
+          onChange={() => {
+            setAuthentication('none');
+            setAcsSslClientCert('');
+            setAcsSslClientKey('');
+            setAcsUsername('');
+            setAcsPassword('');
+          }}
+        />
+        <ActionGroup>
+          <Button
+            ouiaId="edit-acs-details-submit"
+            aria-label="edit_acs_details"
+            variant="primary"
+            isDisabled={saving}
+            isLoading={saving}
+            type="submit"
+          >
+            {__('Save')}
+          </Button>
+          <Button ouiaId="edit-acs-details-cancel" variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+ACSEditCredentials.propTypes = {
+  acsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func.isRequired,
+  acsDetails: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    id: PropTypes.number,
+    verify_ssl: PropTypes.bool,
+    ssl_ca_cert: PropTypes.shape({ id: PropTypes.number }),
+    ssl_client_cert: PropTypes.shape({ id: PropTypes.number }),
+    ssl_client_key: PropTypes.shape({ id: PropTypes.number }),
+    upstream_username: PropTypes.string,
+    upstream_password_exists: PropTypes.bool,
+  }),
+};
+
+ACSEditCredentials.defaultProps = {
+  acsDetails: {
+    name: '',
+    description: '',
+    id: undefined,
+    verify_ssl: false,
+    ssl_ca_cert: { id: undefined },
+    ssl_client_cert: { id: undefined },
+    ssl_client_key: { id: undefined },
+    upstream_username: undefined,
+    upstream_password_exists: false,
+  },
+};
+
+export default ACSEditCredentials;

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditDetails.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { ActionGroup, Button, Form, FormGroup, Modal, ModalVariant, TextArea, TextInput } from '@patternfly/react-core';
+import { editACS, getACSDetails } from '../../ACSActions';
+
+const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
+  const { name, description } = acsDetails;
+  const dispatch = useDispatch();
+  const [acsName, setACSName] = useState(name);
+  const [acsDescription, setAcsDescription] = useState(description || '');
+  const [saving, setSaving] = useState(false);
+
+  const onSubmit = () => {
+    setSaving(true);
+    dispatch(editACS(
+      acsId,
+      { acsId, name: acsName, description: acsDescription },
+      () => {
+        dispatch(getACSDetails(acsId));
+        onClose();
+      },
+      () => {
+        setSaving(false);
+      },
+    ));
+  };
+
+  return (
+    <Modal
+      title={__('Edit Alternate content source details')}
+      variant={ModalVariant.small}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <FormGroup label={__('Name')} isRequired fieldId="acs_name">
+          <TextInput
+            isRequired
+            type="text"
+            id="acs_name_field"
+            name="acs_name_field"
+            aria-label="acs_name_field"
+            value={acsName}
+            onChange={(value) => {
+              setACSName(value);
+            }}
+          />
+        </FormGroup>
+        <FormGroup
+          label={__('Description')}
+          type="string"
+          fieldId="acs_description"
+        >
+          <TextArea
+            value={acsDescription}
+            onChange={(value) => {
+              setAcsDescription(value);
+            }}
+            name="acs_description_field"
+            id="acs_description_field"
+          />
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            ouiaId="edit-acs-details-submit"
+            aria-label="edit_acs_details"
+            variant="primary"
+            isDisabled={saving || acsName.length === 0}
+            isLoading={saving}
+            type="submit"
+          >
+            {__('Edit ACS details')}
+          </Button>
+          <Button ouiaId="edit-acs-details-cancel" variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+ACSEditDetails.propTypes = {
+  acsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func.isRequired,
+  acsDetails: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    id: PropTypes.number,
+  }),
+};
+
+ACSEditDetails.defaultProps = {
+  acsDetails: { name: '', description: '', id: undefined },
+};
+
+export default ACSEditDetails;

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditProducts.js

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { ActionGroup, Button, DualListSelector, Form, Modal, ModalVariant } from '@patternfly/react-core';
+import { editACS, getACSDetails, getProducts } from '../../ACSActions';
+import Loading from '../../../../components/Loading';
+import { selectProducts, selectProductsStatus } from '../../ACSSelectors';
+
+const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
+  const { products } = acsDetails;
+  const dispatch = useDispatch();
+  const [saving, setSaving] = useState(false);
+  const [
+    acsProducts, setAcsProducts,
+  ] = useState(products.map(product => product.name));
+  const [productIds, setProductIds] = useState(products.map(product => product.id));
+  const availableProducts = useSelector(selectProducts);
+  const status = useSelector(selectProductsStatus);
+  const { results } = availableProducts;
+  const [availableOptions, setAvailableOptions] =
+        useState((results?.map(product => product.name))?.filter(p => !acsProducts.includes(p)));
+  const onListChange = (newAvailableOptions, newChosenOptions) => {
+    setAvailableOptions(newAvailableOptions);
+    setAcsProducts(newChosenOptions);
+    setProductIds(results?.filter(product =>
+      newChosenOptions.includes(product.name))?.map(p => p?.id));
+  };
+
+  useDeepCompareEffect(() => {
+    if (results && status === STATUS.RESOLVED) {
+      setAvailableOptions(results?.map(product =>
+        product.name).filter(p => !acsProducts.includes(p)));
+    }
+  }, [results, status, setAvailableOptions, acsProducts]);
+
+  useEffect(
+    () => {
+      dispatch(getProducts());
+    },
+    [dispatch],
+  );
+
+  const onSubmit = () => {
+    setSaving(true);
+    dispatch(editACS(
+      acsId,
+      { acsId, product_ids: productIds },
+      () => {
+        dispatch(getACSDetails(acsId));
+        onClose();
+      },
+      () => {
+        setSaving(false);
+      },
+    ));
+  };
+
+  if (status === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  return (
+    <Modal
+      title={__('Edit Alternate content source products')}
+      variant={ModalVariant.small}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <DualListSelector
+          isSearchable
+          availableOptions={availableOptions}
+          chosenOptions={acsProducts}
+          addAll={onListChange}
+          removeAll={onListChange}
+          addSelected={onListChange}
+          removeSelected={onListChange}
+          id="selector"
+        />
+        <ActionGroup>
+          <Button
+            ouiaId="edit-acs-details-submit"
+            aria-label="edit_acs_details"
+            variant="primary"
+            isDisabled={saving}
+            isLoading={saving}
+            type="submit"
+          >
+            {__('Edit ACS products')}
+          </Button>
+          <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+ACSEditProducts.propTypes = {
+  acsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func.isRequired,
+  acsDetails: PropTypes.shape({
+    products: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
+};
+
+ACSEditProducts.defaultProps = {
+  acsDetails: { products: [], id: undefined },
+};
+
+export default ACSEditProducts;

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditSmartProxies.js

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { ActionGroup, Button, DualListSelector, Form, Modal, ModalVariant } from '@patternfly/react-core';
+import { editACS, getACSDetails } from '../../ACSActions';
+import { selectSmartProxy, selectSmartProxyStatus } from '../../../SmartProxy/SmartProxyContentSelectors';
+import { getSmartProxies } from '../../../SmartProxy/SmartProxyContentActions';
+import Loading from '../../../../components/Loading';
+
+const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
+  const { smart_proxies: smartProxies } = acsDetails;
+  const dispatch = useDispatch();
+  const [saving, setSaving] = useState(false);
+  const [
+    acsSmartProxies, setAcsSmartProxies,
+  ] = useState(smartProxies.map(proxy => proxy.name));
+  const availableSmartProxies = useSelector(selectSmartProxy);
+  const status = useSelector(selectSmartProxyStatus);
+  const { results } = availableSmartProxies;
+  const [availableOptions, setAvailableOptions] =
+        useState(results?.map(proxy => proxy.name).filter(p => !acsSmartProxies.includes(p)));
+  const onListChange = (newAvailableOptions, newChosenOptions) => {
+    setAvailableOptions(newAvailableOptions);
+    setAcsSmartProxies(newChosenOptions);
+  };
+
+  useDeepCompareEffect(() => {
+    if (results && status === STATUS.RESOLVED) {
+      setAvailableOptions(results?.map(proxy =>
+        proxy.name).filter(p => !acsSmartProxies.includes(p)));
+    }
+  }, [results, status, setAvailableOptions, acsSmartProxies]);
+
+  useEffect(
+    () => {
+      dispatch(getSmartProxies());
+    },
+    [dispatch],
+  );
+
+  const onSubmit = () => {
+    setSaving(true);
+    dispatch(editACS(
+      acsId,
+      { acsId, smart_proxy_names: acsSmartProxies },
+      () => {
+        dispatch(getACSDetails(acsId));
+        onClose();
+      },
+      () => {
+        setSaving(false);
+      },
+    ));
+  };
+
+  if (status === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  return (
+    <Modal
+      title={__('Edit Alternate content source details')}
+      variant={ModalVariant.small}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <DualListSelector
+          isSearchable
+          availableOptions={availableOptions}
+          chosenOptions={acsSmartProxies}
+          addAll={onListChange}
+          removeAll={onListChange}
+          addSelected={onListChange}
+          removeSelected={onListChange}
+          id="selector"
+        />
+        <ActionGroup>
+          <Button
+            ouiaId="edit-acs-details-submit"
+            aria-label="edit_acs_details"
+            variant="primary"
+            isDisabled={saving}
+            isLoading={saving}
+            type="submit"
+          >
+            {__('Edit ACS smart proxies')}
+          </Button>
+          <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+ACSEditSmartProxies.propTypes = {
+  acsId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func.isRequired,
+  acsDetails: PropTypes.shape({
+    smart_proxies: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
+};
+
+ACSEditSmartProxies.defaultProps = {
+  acsDetails: { smart_proxies: [], id: undefined },
+};
+
+export default ACSEditSmartProxies;