katello 4.6.2.1 → 4.7.0.rc1

data/webpack/scenes/AlternateContentSources/Details/ACSExpandableDetails.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -18,13 +19,15 @@ import {
   TextListItem,
   TextListItemVariants,
   TextListVariants,
+  Flex,
+  FlexItem,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import { STATUS } from 'foremanReact/constants';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { getACSDetails } from '../ACSActions';
-import { selectACSDetails, selectACSDetailsStatus } from '../ACSSelectors';
+import { selectACSDetails, selectACSDetailsError, selectACSDetailsStatus } from '../ACSSelectors';
 import Loading from '../../../components/Loading';
 import InactiveText from '../../ContentViews/components/InactiveText';
 import ACSEditDetails from './EditModals/ACSEditDetails';
@@ -32,12 +35,17 @@ import ACSEditURLPaths from './EditModals/ACSEditURLPaths';
 import ACSEditSmartProxies from './EditModals/ACSEditSmartProxies';
 import ACSEditCredentials from './EditModals/ACSEditCredentials';
 import ACSEditProducts from './EditModals/ACSEditProducts';
+import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
+import '../Acs.scss';
+import { hasPermission } from '../../ContentViews/helpers';
+import { HelpToolTip } from '../../ContentViews/Create/ContentViewFormComponents';
 
-const ACSExpandableDetails = () => {
+const ACSExpandableDetails = ({ expandedId }) => {
   const { id } = useParams();
-  const acsId = Number(id);
+  const acsId = Number(expandedId) || Number(id);
   const details = useSelector(state => selectACSDetails(state, acsId));
   const status = useSelector(state => selectACSDetailsStatus(state, acsId));
+  const error = useSelector(state => selectACSDetailsError(state, acsId));
   const dispatch = useDispatch();
   const [showDetails, setShowDetails] = useState(true);
   const [showSmartProxies, setShowSmartProxies] = useState(false);
@@ -56,7 +64,7 @@ const ACSExpandableDetails = () => {
     }
   }, [acsId, details, dispatch]);
 
-  if (status === STATUS.PENDING) return <Loading />;
+  if (status === STATUS.PENDING) return <Loading skeleton />;
 
   const {
     name,
@@ -66,17 +74,23 @@ const ACSExpandableDetails = () => {
     description,
     base_url: url,
     smart_proxies: smartProxies,
+    use_http_proxies: useHttpProxies,
     verify_ssl: verifySsl,
     ssl_ca_cert: sslCaCert,
     ssl_client_cert: sslClientCert,
     ssl_client_key: sslClientKey,
     upstream_username: username,
     products,
+    permissions,
   } = details;
+  if (error) {
+    return <EmptyStateMessage error={error} />;
+  }
+  const canEdit = hasPermission(permissions, 'edit_alternate_content_sources');
   return (
     <>
       <Stack>
-        <StackItem>
+        <StackItem className="primary-detail-stack-items-border">
           <Split>
             <SplitItem isFilled>
               <ExpandableSectionToggle
@@ -90,9 +104,10 @@ const ACSExpandableDetails = () => {
                 }}
                 contentId="showDetails"
               >
-                {showDetails ? __('Hide details') : __('Show details')}
+                {__('Details')}
               </ExpandableSectionToggle>
             </SplitItem>
+            {canEdit &&
             <SplitItem>
               <Button
                 ouiaId="edit-details-pencil-edit"
@@ -101,18 +116,19 @@ const ACSExpandableDetails = () => {
                 isSmall
                 icon={<PencilAltIcon />}
                 onClick={() => setEditDetailsModalOpen(true)}
-              >{__('Edit Details')}
+              >{__('Edit')}
               </Button>
             </SplitItem>
+            }
           </Split>
         </StackItem>
-        <StackItem>
+        <StackItem className="primary-detail-stack-items-border">
           <ExpandableSection
             isExpanded={showDetails}
             isDetached
             contentId="showDetails"
           >
-            <TextContent className="margin-0-24">
+            <TextContent className="margin-0-24 expandable-section-text">
               <TextList component={TextListVariants.dl}>
                 <TextListItem component={TextListItemVariants.dt}>
                   {__('Name')}
@@ -130,7 +146,7 @@ const ACSExpandableDetails = () => {
                   aria-label="name_text_value"
                   component={TextListItemVariants.dd}
                 >
-                  {description}
+                  {description || <InactiveText text="N/A" />}
                 </TextListItem>
                 <TextListItem component={TextListItemVariants.dt}>
                   {__('Type')}
@@ -154,7 +170,7 @@ const ACSExpandableDetails = () => {
             </TextContent>
           </ExpandableSection>
         </StackItem>
-        <StackItem>
+        <StackItem className="primary-detail-stack-items-border">
           <Split>
             <SplitItem isFilled>
               <ExpandableSectionToggle
@@ -164,12 +180,14 @@ const ACSExpandableDetails = () => {
                   setShowSmartProxies(expanded);
                   setShowUrlPaths(false);
                   setShowCredentials(false);
+                  setShowProducts(false);
                 }}
                 contentId="showSmartProxies"
               >
-                {showSmartProxies ? 'Hide smart proxies' : 'Show smart proxies'}
+                {__('Smart proxies')}
               </ExpandableSectionToggle>
             </SplitItem>
+            {canEdit &&
             <SplitItem>
               <Button
                 ouiaId="edit-smart-proxies-pencil-edit"
@@ -178,18 +196,19 @@ const ACSExpandableDetails = () => {
                 isSmall
                 icon={<PencilAltIcon />}
                 onClick={() => setEditSmartProxiesModalOpen(true)}
-              >{__('Edit smart proxies')}
+              >{__('Edit')}
               </Button>
             </SplitItem>
+            }
           </Split>
         </StackItem>
-        <StackItem>
+        <StackItem className="primary-detail-stack-items-border">
           <ExpandableSection
             isDetached
             contentId="showSmartProxies"
             isExpanded={showSmartProxies}
           >
-            <List className="margin-0-24" isPlain isBordered>
+            <List className="margin-0-24 expandable-section-text" isPlain isBordered>
               {smartProxies?.length > 0 && smartProxies.map(sp =>
                 (
                   <ListItem key={sp?.id} aria-label="smartproxy_value">
@@ -200,6 +219,24 @@ const ACSExpandableDetails = () => {
               <InactiveText text="N/A" />
                             }
             </List>
+            <TextContent className="margin-0-24 expandable-section-text" style={{ marginTop: '24px' }}>
+              <TextList component={TextListVariants.dl}>
+                <TextListItem component={TextListItemVariants.dt}>
+                  <Flex spaceItems={{ default: 'spaceItemsNone' }}>
+                    <FlexItem aria-label="httpProxyTitle">{__('Use HTTP proxies')}</FlexItem>
+                    <FlexItem>
+                      <HelpToolTip tooltip={__('Alternate content sources use the HTTP proxy of their assigned smart proxy for communication.')} />
+                    </FlexItem>
+                  </Flex>
+                </TextListItem>
+                <TextListItem
+                  aria-label="useHttpProxies_value"
+                  component={TextListItemVariants.dd}
+                >
+                  {useHttpProxies ? 'true' : 'false'}
+                </TextListItem>
+              </TextList>
+            </TextContent>
           </ExpandableSection>
         </StackItem>
         {acsType === 'simplified' &&
@@ -218,9 +255,10 @@ const ACSExpandableDetails = () => {
                   isExpanded={showProducts}
                   contentId="showProducts"
                 >
-                  {showProducts ? 'Hide products' : 'Show products'}
+                  {__('Products')}
                 </ExpandableSectionToggle>
               </SplitItem>
+              {canEdit &&
               <SplitItem>
                 <Button
                   ouiaId="edit-products-pencil-edit"
@@ -229,9 +267,10 @@ const ACSExpandableDetails = () => {
                   isSmall
                   icon={<PencilAltIcon />}
                   onClick={() => setEditProductsModalOpen(true)}
-                >{__('Edit products')}
+                >{__('Edit')}
                 </Button>
               </SplitItem>
+              }
             </Split>
           </StackItem>
           <StackItem>
@@ -240,7 +279,7 @@ const ACSExpandableDetails = () => {
               contentId="showProducts"
               isExpanded={showProducts}
             >
-              <List className="margin-0-24" isPlain isBordered>
+              <List className="margin-0-24 expandable-section-text" isPlain isBordered>
                 {products.map(product =>
                   (
                     <ListItem key={product?.id} aria-label="product_value">
@@ -252,9 +291,9 @@ const ACSExpandableDetails = () => {
           </StackItem>
         </>
                 }
-        {acsType === 'custom' &&
+        {(acsType === 'custom' || acsType === 'rhui') &&
         <>
-          <StackItem>
+          <StackItem className="primary-detail-stack-items-border">
             <Split>
               <SplitItem isFilled>
                 <ExpandableSectionToggle
@@ -267,9 +306,10 @@ const ACSExpandableDetails = () => {
                   isExpanded={showUrlPaths}
                   contentId="showUrlPaths"
                 >
-                  {showUrlPaths ? 'Hide URL and subpaths' : 'Show URL and subpaths'}
+                  {__('URL and subpaths')}
                 </ExpandableSectionToggle>
               </SplitItem>
+              {canEdit &&
               <SplitItem>
                 <Button
                   ouiaId="edit-urls-pencil-edit"
@@ -278,18 +318,19 @@ const ACSExpandableDetails = () => {
                   isSmall
                   icon={<PencilAltIcon />}
                   onClick={() => setEditUrlModalOpen(true)}
-                >{__('Edit URL and subpaths')}
+                >{__('Edit')}
                 </Button>
               </SplitItem>
+              }
             </Split>
           </StackItem>
-          <StackItem>
+          <StackItem className="primary-detail-stack-items-border">
             <ExpandableSection
               contentId="showUrlPaths"
               isDetached
               isExpanded={showUrlPaths}
             >
-              <TextContent className="margin-0-24">
+              <TextContent className="margin-0-24 expandable-section-text">
                 <TextList component={TextListVariants.dl}>
                   <TextListItem component={TextListItemVariants.dt}>
                     {__('URL')}
@@ -313,7 +354,7 @@ const ACSExpandableDetails = () => {
               </TextContent>
             </ExpandableSection>
           </StackItem>
-          <StackItem>
+          <StackItem className="primary-detail-stack-items-border">
             <Split>
               <SplitItem isFilled>
                 <ExpandableSectionToggle
@@ -326,9 +367,10 @@ const ACSExpandableDetails = () => {
                   isExpanded={showCredentials}
                   contentId="showCredentials"
                 >
-                  {showCredentials ? 'Hide credentials' : 'Show credentials'}
+                  {__('Credentials')}
                 </ExpandableSectionToggle>
               </SplitItem>
+              {canEdit &&
               <SplitItem>
                 <Button
                   ouiaId="edit-credentials-pencil-edit"
@@ -337,18 +379,19 @@ const ACSExpandableDetails = () => {
                   isSmall
                   icon={<PencilAltIcon />}
                   onClick={() => setEditCredentialsModalOpen(true)}
-                >{__('Edit credentials')}
+                >{__('Edit')}
                 </Button>
               </SplitItem>
+              }
             </Split>
           </StackItem>
-          <StackItem>
+          <StackItem className="primary-detail-stack-items-border">
             <ExpandableSection
               isExpanded={showCredentials}
               contentId="showCredentials"
               isDetached
             >
-              <TextContent className="margin-0-24">
+              <TextContent className="margin-0-24 expandable-section-text">
                 <TextList component={TextListVariants.dl}>
                   <TextListItem component={TextListItemVariants.dt}>
                     {__('Verify SSL')}
@@ -456,4 +499,15 @@ const ACSExpandableDetails = () => {
   );
 };
 
+ACSExpandableDetails.propTypes = {
+  expandedId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+};
+
+ACSExpandableDetails.defaultProps = {
+  expandedId: null,
+};
+
 export default ACSExpandableDetails;

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

@@ -13,8 +13,8 @@ import {
   Modal,
   ModalVariant,
   Radio,
-  Switch,
   TextInput,
+  Switch,
 } from '@patternfly/react-core';
 import { editACS, getACSDetails } from '../../ACSActions';
 import {
@@ -27,22 +27,22 @@ import { CONTENT_CREDENTIAL_CERT_TYPE } from '../../../ContentCredentials/Conten
 
 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,
+    verify_ssl: verifySsl,
   } = 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 [acsVerifySSL, setAcsVerifySSL] = useState(verifySsl);
   const getAuthenticationState = () => {
     if (username) {
       return 'manual';
@@ -64,8 +64,8 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
   const onSubmit = () => {
     setSaving(true);
     let params = {
-      verify_ssl: acsVerifySSL,
       ssl_ca_cert_id: acsCAcert,
+      verify_ssl: acsVerifySSL,
     };
 
     if (authentication === 'credentials') {
@@ -117,7 +117,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
 
   return (
     <Modal
-      title={__('Edit Alternate content source credentials')}
+      title={__('Edit credentials')}
       variant={ModalVariant.large}
       isOpen
       onClose={onClose}
@@ -143,6 +143,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
         >
           <FormSelect
             isRequired
+            isDisabled={!acsVerifySSL}
             value={acsCAcert}
             onChange={value => setAcsCAcert(value)}
             aria-label="sslCAcert_select"
@@ -310,7 +311,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             isLoading={saving}
             type="submit"
           >
-            {__('Save')}
+            {__('Edit')}
           </Button>
           <Button ouiaId="edit-acs-details-cancel" variant="link" onClick={onClose}>
             {__('Cancel')}
@@ -328,12 +329,12 @@ ACSEditCredentials.propTypes = {
     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,
+    verify_ssl: PropTypes.bool,
   }),
 };
 
@@ -342,12 +343,12 @@ ACSEditCredentials.defaultProps = {
     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,
+    verify_ssl: false,
   },
 };
 

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

@@ -29,7 +29,7 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
 
   return (
     <Modal
-      title={__('Edit Alternate content source details')}
+      title={__('Edit details')}
       variant={ModalVariant.small}
       isOpen
       onClose={onClose}
@@ -76,7 +76,7 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
             isLoading={saving}
             type="submit"
           >
-            {__('Edit ACS details')}
+            {__('Edit')}
           </Button>
           <Button ouiaId="edit-acs-details-cancel" variant="link" onClick={onClose}>
             {__('Cancel')}

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

@@ -64,7 +64,7 @@ const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
 
   return (
     <Modal
-      title={__('Edit Alternate content source products')}
+      title={__('Edit products')}
       variant={ModalVariant.small}
       isOpen
       onClose={onClose}
@@ -94,7 +94,7 @@ const ACSEditProducts = ({ onClose, acsId, acsDetails }) => {
             isLoading={saving}
             type="submit"
           >
-            {__('Edit ACS products')}
+            {__('Edit')}
           </Button>
           <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
             {__('Cancel')}

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

@@ -4,15 +4,28 @@ 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 {
+  ActionGroup,
+  Button,
+  DualListSelector,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  Switch,
+  Flex,
+  FlexItem,
+} 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';
+import { HelpToolTip } from '../../../ContentViews/Create/ContentViewFormComponents';
 
 const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
-  const { smart_proxies: smartProxies } = acsDetails;
+  const { smart_proxies: smartProxies, use_http_proxies: useHttpProxies } = acsDetails;
   const dispatch = useDispatch();
+  const [acsUseHttpProxies, setAcsUseHttpProxies] = useState(useHttpProxies);
   const [saving, setSaving] = useState(false);
   const [
     acsSmartProxies, setAcsSmartProxies,
@@ -45,7 +58,7 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
     setSaving(true);
     dispatch(editACS(
       acsId,
-      { acsId, smart_proxy_names: acsSmartProxies },
+      { acsId, smart_proxy_names: acsSmartProxies, use_http_proxies: acsUseHttpProxies },
       () => {
         dispatch(getACSDetails(acsId));
         onClose();
@@ -62,8 +75,8 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
 
   return (
     <Modal
-      title={__('Edit Alternate content source details')}
-      variant={ModalVariant.small}
+      title={__('Edit smart proxies')}
+      variant={ModalVariant.medium}
       isOpen
       onClose={onClose}
       appendTo={document.body}
@@ -83,6 +96,24 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
           removeSelected={onListChange}
           id="selector"
         />
+        <FormGroup
+          label={
+            <Flex spaceItems={{ default: 'spaceItemsNone' }}>
+              <FlexItem>{__('Use HTTP proxies')}</FlexItem>
+              <FlexItem>
+                <HelpToolTip tooltip={__('Alternate content sources use the HTTP proxy of their assigned smart proxy for communication.')} />
+              </FlexItem>
+            </Flex>
+        }
+          fieldId="use_http_proxies"
+        >
+          <Switch
+            id="use-http-proxies-switch"
+            aria-label="use-http-proxies-switch"
+            isChecked={acsUseHttpProxies}
+            onChange={checked => setAcsUseHttpProxies(checked)}
+          />
+        </FormGroup>
         <ActionGroup>
           <Button
             ouiaId="edit-acs-details-submit"
@@ -92,7 +123,7 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
             isLoading={saving}
             type="submit"
           >
-            {__('Edit ACS smart proxies')}
+            {__('Edit')}
           </Button>
           <Button ouiaId="edit-acs-smart-proxies-cancel" variant="link" onClick={onClose}>
             {__('Cancel')}
@@ -108,11 +139,12 @@ ACSEditSmartProxies.propTypes = {
   onClose: PropTypes.func.isRequired,
   acsDetails: PropTypes.shape({
     smart_proxies: PropTypes.arrayOf(PropTypes.shape({})),
+    use_http_proxies: PropTypes.bool,
   }),
 };
 
 ACSEditSmartProxies.defaultProps = {
-  acsDetails: { smart_proxies: [], id: undefined },
+  acsDetails: { smart_proxies: [], id: undefined, use_http_proxies: false },
 };
 
 export default ACSEditSmartProxies;

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

@@ -4,6 +4,7 @@ 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';
+import { areSubPathsValid, isValidUrl } from '../../helpers';
 
 const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
   const { subpaths, base_url: url } = acsDetails;
@@ -11,10 +12,15 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
   const [acsUrl, setAcsUrl] = useState(url);
   const [acsSubpath, setAcsSubpath] = useState(subpaths.join() || '');
   const [saving, setSaving] = useState(false);
+  const subPathValidated = areSubPathsValid(acsSubpath) ? 'default' : 'error';
+  const urlValidated = (acsUrl === '' || isValidUrl(acsUrl)) ? 'default' : 'error';
 
   const onSubmit = () => {
     setSaving(true);
-    let params = { id: acsId, base_url: acsUrl };
+    let params = {
+      id: acsId,
+      base_url: acsUrl,
+    };
     if (acsSubpath !== '') {
       params = { subpaths: acsSubpath.split(','), ...params };
     } else {
@@ -35,7 +41,7 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
 
   return (
     <Modal
-      title={__('Edit Alternate content source URL and subpaths')}
+      title={__('Edit URL and subpaths')}
       variant={ModalVariant.small}
       isOpen
       onClose={onClose}
@@ -50,6 +56,8 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
           label={__('Base URL')}
           type="string"
           fieldId="acs_base_url"
+          helperTextInvalid="http://, https:// or file://"
+          validated={urlValidated}
           isRequired
         >
           <TextInput
@@ -60,22 +68,22 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
             aria-label="acs_base_url_field"
             placeholder="https:// or file://"
             value={acsUrl}
-            onChange={(value) => {
-              setAcsUrl(value);
-            }}
+            validated={urlValidated}
+            onChange={value => setAcsUrl(value)}
           />
         </FormGroup>
         <FormGroup
           label={__('Subpaths')}
           type="string"
           fieldId="acs_subpaths"
+          helperTextInvalid={__('Comma-separated list of subpaths. All subpaths must have a slash at the end and none at the front.')}
+          validated={subPathValidated}
         >
           <TextArea
             placeholder="test/repo1/, test/repo2/,"
             value={acsSubpath}
-            onChange={(value) => {
-              setAcsSubpath(value);
-            }}
+            validated={subPathValidated}
+            onChange={value => setAcsSubpath(value)}
             name="acs_subpath_field"
             id="acs_subpath_field"
             aria-label="acs_subpath_field"
@@ -86,11 +94,15 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
             ouiaId="edit-acs-url-submit"
             aria-label="edit_acs_url"
             variant="primary"
-            isDisabled={saving || acsUrl.length === 0}
+            isDisabled={saving ||
+                acsUrl.length === 0 ||
+                subPathValidated === 'error' ||
+                urlValidated === 'error'
+            }
             isLoading={saving}
             type="submit"
           >
-            {__('Edit ACS')}
+            {__('Edit')}
           </Button>
           <Button ouiaId="edit-acs-url-cancel" variant="link" onClick={onClose}>
             {__('Cancel')}
@@ -112,7 +124,11 @@ ACSEditURLPaths.propTypes = {
 };
 
 ACSEditURLPaths.defaultProps = {
-  acsDetails: { base_url: '', subpaths: '', id: undefined },
+  acsDetails: {
+    base_url: '',
+    subpaths: '',
+    id: undefined,
+  },
 };
 
 export default ACSEditURLPaths;