katello 4.5.1 → 4.8.0.rc2

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSCredentials.js

@@ -8,6 +8,7 @@ import {
   FormSelectOption,
   TextInput,
   Radio,
+  Switch,
 } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import ACSCreateContext from '../ACSCreateContext';
@@ -17,9 +18,9 @@ import Loading from '../../../../components/Loading';
 
 const ACSCredentials = () => {
   const {
-    authentication, setAuthentication, username, setUsername, password, setPassword,
+    acsType, authentication, setAuthentication, username, setUsername, password, setPassword,
     sslCert, setSslCert, sslKey, setSslKey, caCert, setCACert,
-    setSslCertName, setSslKeyName, setCACertName,
+    setSslCertName, setSslKeyName, setCACertName, verifySSL, setVerifySSL,
   } = useContext(ACSCreateContext);
 
   const contentCredentials = useSelector(selectContentCredentials);
@@ -31,16 +32,22 @@ const ACSCredentials = () => {
 
   const getCertName = id => contentCredentials?.filter(cc => Number(cc.id) === Number(id))[0]?.name;
 
+  const description = acsType === 'rhui' ?
+    __('Choose content credentials if required for this RHUI source.') :
+    __('Enter basic authentication information or choose content credentials if required for this source.');
+
   return (
     <>
       <WizardHeader
         title={__('Credentials')}
-        description={__('Enter basic authentication information or choose content credentials if required for this source.')}
+        description={description}
       />
       <Form>
+        {(acsType !== 'rhui') &&
         <Radio
           label={__('Manual authentication')}
           id="manual_auth"
+          ouiaId="manual_auth"
           name="manual_auth"
           aria-label="manual_auth"
           isChecked={authentication === 'manual'}
@@ -52,6 +59,7 @@ const ACSCredentials = () => {
             setSslKeyName('');
           }}
         />
+        }
         {(authentication === 'manual') &&
           <>
             <FormGroup
@@ -64,6 +72,7 @@ const ACSCredentials = () => {
                 isRequired
                 type="text"
                 id="acs_username_field"
+                ouiaId="acs_username_field"
                 name="acs_username_field"
                 aria-label="acs_username_field"
                 value={username}
@@ -80,6 +89,7 @@ const ACSCredentials = () => {
                 isRequired
                 type="password"
                 id="acs_password_field"
+                ouiaId="acs_password_field"
                 name="acs_password_field"
                 aria-label="acs_password_field"
                 value={password}
@@ -91,6 +101,7 @@ const ACSCredentials = () => {
         <Radio
           label={__('Content credentials')}
           id="content_credentials"
+          ouiaId="content_credentials"
           aria-label="content_credentials"
           name="content_cred_auth"
           isChecked={authentication === 'content_credentials'}
@@ -156,6 +167,7 @@ const ACSCredentials = () => {
           label={__('None')}
           id="none"
           name="none"
+          ouiaId="none"
           aria-label="none"
           isChecked={authentication === ''}
           onChange={() => {
@@ -168,12 +180,27 @@ const ACSCredentials = () => {
             setPassword('');
           }}
         />
+        <FormGroup label={__('Verify SSL')} fieldId="verify_ssl">
+          <Switch
+            id="verify-ssl-switch"
+            ouiaId="verify-ssl-switch"
+            aria-label="verify-ssl-switch"
+            isChecked={verifySSL}
+            onChange={checked => setVerifySSL(checked)}
+          />
+        </FormGroup>
         <FormGroup
           label={__('SSL CA certificate')}
           type="string"
           fieldId="ca_cert"
         >
-          <FormSelect isRequired value={caCert} onChange={(value) => { setCACert(value); setCACertName(getCertName(value)); }} aria-label="sslCAcert_select">
+          <FormSelect
+            isDisabled={!verifySSL}
+            isRequired
+            value={caCert}
+            onChange={(value) => { setCACert(value); setCACertName(getCertName(value)); }}
+            aria-label="sslCAcert_select"
+          >
             {
               [
                 <FormSelectOption

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSProducts.js

@@ -0,0 +1,44 @@
+import React, { useContext, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { DualListSelector } from '@patternfly/react-core';
+import ACSCreateContext from '../ACSCreateContext';
+import WizardHeader from '../../../ContentViews/components/WizardHeader';
+import { selectProducts } from '../../ACSSelectors';
+
+const ACSProducts = () => {
+  const {
+    setProductIds, productNames, setProductNames,
+  } = useContext(ACSCreateContext);
+  const availableProducts = useSelector(selectProducts);
+  const { results } = availableProducts;
+  const [availableOptions, setAvailableOptions] = useState(results?.map(product =>
+    product.name)?.filter(pName => !productNames.includes(pName)));
+  const onListChange = (newAvailableOptions, newChosenOptions) => {
+    setAvailableOptions(newAvailableOptions);
+    setProductNames(newChosenOptions);
+    setProductIds(results?.filter(product =>
+      newChosenOptions.includes(product.name))?.map(p => p?.id));
+  };
+
+  return (
+    <>
+      <WizardHeader
+        title={__('Select products')}
+        description={__('Select products to associate to this source.')}
+      />
+      <DualListSelector
+        isSearchable
+        availableOptions={availableOptions}
+        chosenOptions={productNames}
+        addAll={onListChange}
+        removeAll={onListChange}
+        addSelected={onListChange}
+        removeSelected={onListChange}
+        id="product_selector"
+      />
+    </>
+  );
+};
+
+export default ACSProducts;

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSReview.js

@@ -1,29 +1,30 @@
 import React, { useContext } from 'react';
+import { capitalize, upperCase } from 'lodash';
 import { translate as __ } from 'foremanReact/common/I18n';
-import {
-  TextContent,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants,
-} from '@patternfly/react-core';
+import { TextContent, TextList, TextListItem, TextListItemVariants, TextListVariants } from '@patternfly/react-core';
 import ACSCreateContext from '../ACSCreateContext';
 import WizardHeader from '../../../ContentViews/components/WizardHeader';
+import InactiveText from '../../../ContentViews/components/InactiveText';
 
 const ACSReview = () => {
   const {
     name, description, acsType, contentType,
-    smartProxies, url, subpaths, verifySSL,
+    smartProxies, useHttpProxies, url, subpaths, verifySSL,
     authentication, sslCertName, sslKeyName, username,
-    password, caCertName,
+    password, caCertName, productNames,
   } = useContext(ACSCreateContext);
 
   return (
     <>
       <WizardHeader
-        title={__('Review Details')}
-        description={__('Review the information below and click Add to add your source. ' +
-          'To edit details in previous steps, click Back or any step on the left.')}
+        title={__('Review details')}
+        description={
+          <>
+            {__('Review the information below and click ')}<strong>{__('Add')}</strong>{__(' to add your source. ' +
+                'To edit details in previous steps, click ')}<strong>{__('Back')}</strong>{__(' or any step on the left.')
+            }
+          </>
+        }
       />
       <TextContent>
         <TextList component={TextListVariants.dl}>
@@ -33,7 +34,7 @@ const ACSReview = () => {
           </TextListItem>
           <TextListItem component={TextListItemVariants.dt}>{__('Source type')}</TextListItem>
           <TextListItem component={TextListItemVariants.dd}>
-            {acsType}
+            {acsType === 'rhui' ? upperCase(acsType) : capitalize(acsType)}
           </TextListItem>
           <TextListItem component={TextListItemVariants.dt}>{__('Description')}</TextListItem>
           <TextListItem component={TextListItemVariants.dd}>
@@ -41,60 +42,84 @@ const ACSReview = () => {
           </TextListItem>
           <TextListItem component={TextListItemVariants.dt}>{__('Content type')}</TextListItem>
           <TextListItem component={TextListItemVariants.dd}>
-            {contentType}
+            {capitalize(contentType)}
           </TextListItem>
           <TextListItem component={TextListItemVariants.dt}>{__('Smart proxies')}</TextListItem>
           <TextListItem component={TextListItemVariants.dd}>
-            {smartProxies}
+            {smartProxies.join(', ')}
           </TextListItem>
-          <TextListItem component={TextListItemVariants.dt}>{__('Base URL')}</TextListItem>
+          <TextListItem component={TextListItemVariants.dt}>{__('Use HTTP Proxies')}</TextListItem>
           <TextListItem component={TextListItemVariants.dd}>
-            {url}
+            {useHttpProxies ? __('Yes') : __('No')}
           </TextListItem>
-          <TextListItem component={TextListItemVariants.dt}>{__('Subpaths')}</TextListItem>
-          <TextListItem component={TextListItemVariants.dd}>
-            {subpaths}
-          </TextListItem>
-          <TextListItem component={TextListItemVariants.dt}>{__('Verify SSL')}</TextListItem>
-          <TextListItem component={TextListItemVariants.dd}>
-            {verifySSL ? __('Yes') : __('No')}
-          </TextListItem>
-          <TextListItem component={TextListItemVariants.dt}>{__('CA Cert')}</TextListItem>
-          <TextListItem component={TextListItemVariants.dd}>
-            {caCertName}
-          </TextListItem>
-          {authentication === 'manual' && (
+          {(acsType === 'custom' || acsType === 'rhui') &&
             <>
-              <TextListItem component={TextListItemVariants.dt}>{__('Authentication type')}</TextListItem>
-              <TextListItem component={TextListItemVariants.dd}>
-                {__('Manual')}
+              <TextListItem component={TextListItemVariants.dt}>
+                {__('Base URL')}
               </TextListItem>
-              <TextListItem component={TextListItemVariants.dt}>{__('Username')}</TextListItem>
               <TextListItem component={TextListItemVariants.dd}>
-                {username}
+                {url}
               </TextListItem>
-              <TextListItem component={TextListItemVariants.dt}>{__('Password')}</TextListItem>
+              <TextListItem component={TextListItemVariants.dt}>{__('Subpaths')}</TextListItem>
               <TextListItem component={TextListItemVariants.dd}>
-                {password}
+                {subpaths}
               </TextListItem>
-            </>
-          )}
-          {authentication === 'content_credentials' && (
-            <>
-              <TextListItem component={TextListItemVariants.dt}>{__('Authentication type')}</TextListItem>
+              <TextListItem component={TextListItemVariants.dt}>{__('Verify SSL')}</TextListItem>
               <TextListItem component={TextListItemVariants.dd}>
-                {__('Content credential')}
+                {verifySSL ? __('Yes') : __('No')}
               </TextListItem>
-              <TextListItem component={TextListItemVariants.dt}>{__('SSL Cert')}</TextListItem>
+              <TextListItem component={TextListItemVariants.dt}>{__('SSL CA certificate')}</TextListItem>
               <TextListItem component={TextListItemVariants.dd}>
-                {sslCertName}
+                {caCertName}
               </TextListItem>
-              <TextListItem component={TextListItemVariants.dt}>{__('Client key')}</TextListItem>
+              {authentication === 'manual' && (
+                <>
+                  <TextListItem
+                    component={TextListItemVariants.dt}
+                  >{__('Authentication type')}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {__('Manual')}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dt}>{__('Username')}</TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {username}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dt}>{__('Password')}</TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {password.length > 0 ? '••••••••' : <InactiveText text={__('N/A')} />}
+                  </TextListItem>
+                </>
+              )}
+              {authentication === 'content_credentials' && (
+                <>
+                  <TextListItem
+                    component={TextListItemVariants.dt}
+                  >{__('Authentication type')}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {__('Content credential')}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dt}>{__('SSL client certificate')}</TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {sslCertName}
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.dt}>{__('SSL client key')}</TextListItem>
+                  <TextListItem component={TextListItemVariants.dd}>
+                    {sslKeyName}
+                  </TextListItem>
+                </>
+              )}
+            </>
+            }
+          {acsType === 'simplified' &&
+            <>
+              <TextListItem component={TextListItemVariants.dt}>{__('Products')}</TextListItem>
               <TextListItem component={TextListItemVariants.dd}>
-                {sslKeyName}
+                {productNames.join(', ')}
               </TextListItem>
             </>
-          )}
+            }
         </TextList>
       </TextContent>
     </>

data/webpack/scenes/AlternateContentSources/Create/Steps/ACSSmartProxies.js

@@ -1,18 +1,26 @@
 import React, { useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { DualListSelector } from '@patternfly/react-core';
+import {
+  DualListSelector,
+  FormGroup,
+  Switch,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import ACSCreateContext from '../ACSCreateContext';
 import WizardHeader from '../../../ContentViews/components/WizardHeader';
 import { selectSmartProxy } from '../../../SmartProxy/SmartProxyContentSelectors';
+import { HelpToolTip } from '../../../ContentViews/Create/ContentViewFormComponents';
 
 const ACSSmartProxies = () => {
   const {
-    smartProxies, setSmartProxies,
+    smartProxies, setSmartProxies, useHttpProxies, setUseHttpProxies,
   } = useContext(ACSCreateContext);
   const availableSmartProxies = useSelector(selectSmartProxy);
   const { results } = availableSmartProxies;
-  const [availableOptions, setAvailableOptions] = useState(results?.map(proxy => proxy.name));
+  const [availableOptions, setAvailableOptions] = useState(results?.map(proxy =>
+    proxy.name)?.filter(sp => !smartProxies.includes(sp)));
   const onListChange = (newAvailableOptions, newChosenOptions) => {
     setAvailableOptions(newAvailableOptions);
     setSmartProxies(newChosenOptions);
@@ -34,6 +42,25 @@ const ACSSmartProxies = () => {
         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"
+          ouiaId="use-http-proxies-switch"
+          aria-label="use-http-proxies-switch"
+          isChecked={useHttpProxies}
+          onChange={checked => setUseHttpProxies(checked)}
+        />
+      </FormGroup>
     </>
   );
 };

data/webpack/scenes/AlternateContentSources/Create/Steps/AcsUrlPaths.js

@@ -1,68 +1,92 @@
 import React, { useContext } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
+  ClipboardCopy,
   Form,
   FormGroup,
   TextInput,
   TextArea,
-  Switch,
 } from '@patternfly/react-core';
 import ACSCreateContext from '../ACSCreateContext';
 import WizardHeader from '../../../ContentViews/components/WizardHeader';
+import { areSubPathsValid, isValidUrl } from '../../helpers';
 
 const AcsUrlPaths = () => {
   const {
-    url, setUrl, subpaths, setSubpaths, verifySSL, setVerifySSL,
+    acsType, url, setUrl, subpaths, setSubpaths,
   } = useContext(ACSCreateContext);
 
+  const urlValidated = (url === '' || isValidUrl(url, acsType)) ? 'default' : 'error';
+  const subPathValidated = areSubPathsValid(subpaths) ? 'default' : 'error';
+
+  const baseURLplaceholder = acsType === 'rhui' ?
+    'https://rhui-server.example.com/pulp/content' :
+    'http:// or https://';
+  const helperTextInvalid = acsType === 'rhui' ?
+    'http://rhui-server.example.com/pulp/content or https://rhui-server.example.com/pulp/content' :
+    'http://, https:// or file://';
+  let headerDescription =
+    __('Enter in the base path and any subpaths that should be searched for alternate content.');
+  headerDescription = acsType === 'rhui' ?
+    `${headerDescription}${__(' The base path must be a web address pointing to the root RHUI content directory.')}` :
+    `${headerDescription}${__(' The base path can be a web address or a filesystem location.')}`;
+
   return (
     <>
       <WizardHeader
         title={__('URL and paths')}
-        description={__('Enter in the base path and any subpaths that should be searched for alternate content. ' +
-          'The base path can be a web address or a filesystem location.')}
+        description={headerDescription}
       />
       <Form>
         <FormGroup
           label={__('Base URL')}
-          type="string"
           fieldId="acs_base_url"
+          helperTextInvalid={helperTextInvalid}
+          validated={urlValidated}
           isRequired
         >
           <TextInput
             isRequired
-            type="text"
+            type="url"
             id="acs_base_url_field"
+            ouiaId="acs_base_url_field"
             name="acs_base_url_field"
             aria-label="acs_base_url_field"
-            placeholder="https:// or file://"
+            placeholder={baseURLplaceholder}
             value={url}
-            onChange={(value) => { setUrl(value); }}
+            validated={urlValidated}
+            onChange={value => setUrl(value)}
           />
         </FormGroup>
+        {acsType === 'rhui' &&
+        <>
+          {__('On the RHUA Instance, check the available repositories.')}
+          <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+            rhui-manager repo list
+          </ClipboardCopy>
+          {__('Find the relative path for each RHUI repository and combine them in a comma-separated list.')}
+          <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+            rhui-manager repo info --repo_id your_repo_id
+          </ClipboardCopy>
+        </>
+        }
         <FormGroup
           label={__('Subpaths')}
           type="string"
           fieldId="acs_subpaths"
-          isRequired
+          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={subpaths}
-            onChange={(value) => { setSubpaths(value); }}
+            validated={subPathValidated}
+            onChange={value => setSubpaths(value)}
             name="acs_subpath_field"
             id="acs_subpath_field"
             aria-label="acs_subpath_field"
           />
         </FormGroup>
-        <FormGroup label={__('Verify SSL')} fieldId="verify_ssl">
-          <Switch
-            id="verify-ssl-switch"
-            aria-label="verify-ssl-switch"
-            isChecked={verifySSL}
-            onChange={checked => setVerifySSL(checked)}
-          />
-        </FormGroup>
       </Form>
     </>
   );

data/webpack/scenes/AlternateContentSources/Create/Steps/NameACS.js

@@ -31,6 +31,7 @@ const NameACS = () => {
             isRequired
             type="text"
             id="acs_name_field"
+            ouiaId="acs_name_field"
             name="acs_name_field"
             aria-label="acs_name_field"
             value={name}

data/webpack/scenes/AlternateContentSources/Create/Steps/SelectSource.js

@@ -1,24 +1,32 @@
 import React, { useContext } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
-  Tile,
-  Flex,
-  FlexItem,
+  Alert,
+  ClipboardCopy,
+  Grid,
+  GridItem,
   Form,
   FormGroup,
   FormSelect,
   FormSelectOption,
+  Tile,
 } from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
 import ACSCreateContext from '../ACSCreateContext';
 import WizardHeader from '../../../ContentViews/components/WizardHeader';
 
 const SelectSource = () => {
   const {
-    acsType, setAcsType, contentType, setContentType,
+    acsType, setAcsType, contentType, setContentType, setAuthentication,
   } = useContext(ACSCreateContext);
 
   const onSelect = (event) => {
     setAcsType(event.currentTarget.id);
+    if (event.currentTarget.id === 'rhui') {
+      setAuthentication('content_credentials');
+    } else {
+      setAuthentication('');
+    }
   };
   const onKeyDown = (event) => {
     if (event.key === ' ' || event.key === 'Enter') {
@@ -27,16 +35,21 @@ const SelectSource = () => {
     }
   };
 
-  const typeOptions = [
-    { value: 'yum', label: __('Yum') },
-    { value: 'file', label: __('File') },
-  ];
+  const typeOptions = [{ value: 'yum', label: __('Yum') }];
+  if (acsType !== 'rhui') {
+    typeOptions.push({ value: 'file', label: __('File') });
+  }
 
   return (
     <>
       <WizardHeader
         title={__('Select source type')}
-        description={__('Indicate the source type.')}
+        description={__('Alternate content sources define new locations to download content from at repository or smart proxy sync time.')}
+      />
+      <FormattedMessage
+        className="acs-blurb"
+        id="acs-blurb"
+        defaultMessage={__('Content will be synced from the alternate content source first, then the original source if the ACS is not reachable.')}
       />
       <Form>
         <FormGroup
@@ -45,11 +58,47 @@ const SelectSource = () => {
           fieldId="source_type"
           isRequired
         >
-          <Flex>
-            <FlexItem>
-              <Tile title={__('Custom')} isStacked id="custom" onClick={onSelect} onKeyDown={onKeyDown} isSelected={acsType === 'custom'} />{' '}
-            </FlexItem>
-          </Flex>
+          <Grid hasGutter>
+            <GridItem span={4} rowSpan={2}>
+              <Tile
+                title={__('Custom')}
+                isStacked
+                id="custom"
+                onClick={onSelect}
+                onKeyDown={onKeyDown}
+                style={{ height: '100%' }}
+                isSelected={acsType === 'custom'}
+              >
+                {__('Define repositories structured under a common web or filesystem path.')}
+              </Tile>
+            </GridItem>
+            <GridItem span={4} rowSpan={2}>
+              <Tile
+                title={__('Simplified')}
+                isStacked
+                id="simplified"
+                onClick={onSelect}
+                onKeyDown={onKeyDown}
+                style={{ height: '100%' }}
+                isSelected={acsType === 'simplified'}
+              >
+                {__('Sync smart proxy content directly from upstream repositories by selecting the desired products.')}
+              </Tile>
+            </GridItem>
+            <GridItem span={4} rowSpan={2}>
+              <Tile
+                title={__('RHUI')}
+                isStacked
+                id="rhui"
+                onClick={onSelect}
+                onKeyDown={onKeyDown}
+                style={{ height: '100%' }}
+                isSelected={acsType === 'rhui'}
+              >
+                {__('Define RHUI repository paths with guided steps.')}
+              </Tile>
+            </GridItem>
+          </Grid>
         </FormGroup>
         <FormGroup
           label={__('Content type')}
@@ -57,18 +106,38 @@ const SelectSource = () => {
           fieldId="content_type"
           isRequired
         >
-          <FormSelect isRequired value={contentType} onChange={(value) => { setContentType(value); }} aria-label="FormSelect Input">
+          <FormSelect
+            isRequired
+            isDisabled={acsType === 'rhui'}
+            value={contentType}
+            onChange={(value) => {
+              setContentType(value);
+            }}
+            aria-label="FormSelect Input"
+          >
             {
-          typeOptions.map(option => (
-            <FormSelectOption
-              key={option.value}
-              value={option.value}
-              label={option.label}
-            />
-          ))
-        }
+              typeOptions.map(option => (
+                <FormSelectOption
+                  key={option.value}
+                  value={option.value}
+                  label={option.label}
+                />
+              ))
+            }
           </FormSelect>
         </FormGroup>
+        {acsType === 'rhui' &&
+        <>
+          <Alert variant="info" title={__('Generate RHUI certificates for the desired repositories as necessary.')} />
+          <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+            rhui-manager client cert --name rhui-acs-certs --days 365 --dir /root
+            --repo_label rhui-repo-1,rhui-repo-2
+          </ClipboardCopy>
+          <a href="/content_credentials">
+            {__('Create content credentials with the generated SSL certificate and key.')}
+          </a>
+        </>
+        }
       </Form>
     </>
   );