[CCR] Adjust spacing around descriptions in list views, link to transport port docs, etc

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js

@@ -128,7 +128,7 @@ export const AutoFollowPatternList = injectI18n(
             </EuiFlexItem>
           </EuiFlexGroup>
 
-          <EuiSpacer />
+          <EuiSpacer size="m" />
         </Fragment>
       );
     }

x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js

@@ -10,6 +10,7 @@ import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { getIndexListUri } from '../../../../../../../../index_management/public/services/navigation';
 
 import {
+  EuiButton,
   EuiButtonEmpty,
   EuiCodeEditor,
   EuiDescriptionList,
@@ -23,7 +24,6 @@ import {
   EuiFlyoutHeader,
   EuiHealth,
   EuiIcon,
-  EuiLink,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
@@ -48,7 +48,6 @@ export class DetailPanelUi extends Component {
   renderFollowerIndex() {
     const {
       followerIndex: {
-        name,
         remoteCluster,
         leaderIndex,
         isPaused,
@@ -66,8 +65,6 @@ export class DetailPanelUi extends Component {
       },
     } = this.props;
 
-    const indexManagementUri = getIndexListUri(`name:${name}`);
-
     return (
       <Fragment>
         <EuiFlyoutBody>
@@ -324,15 +321,6 @@ export class DetailPanelUi extends Component {
 
             <EuiSpacer size="l" />
 
-            <EuiLink
-              href={indexManagementUri}
-            >
-              <FormattedMessage
-                id="xpack.crossClusterReplication.followerIndexDetailPanel.viewIndexLink"
-                defaultMessage="View your follower index in Index Management"
-              />
-            </EuiLink>
-
             {shards && shards.map((shard, i) => (
               <Fragment key={i}>
                 <EuiSpacer size="m" />
@@ -436,6 +424,8 @@ export class DetailPanelUi extends Component {
       closeDetailPanel,
     } = this.props;
 
+    const indexManagementUri = getIndexListUri(`name:${followerIndex.name}`);
+
     return (
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
@@ -452,22 +442,37 @@ export class DetailPanelUi extends Component {
             </EuiButtonEmpty>
           </EuiFlexItem>
 
-          {followerIndex && (
-            <EuiFlexItem grow={false}>
-              <ContextMenu
-                iconSide="left"
-                iconType="arrowUp"
-                anchorPosition="upRight"
-                label={(
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  href={indexManagementUri}
+                >
                   <FormattedMessage
-                    id="xpack.crossClusterReplication.followerIndexDetailPanel.manageButtonLabel"
-                    defaultMessage="Manage"
+                    id="xpack.crossClusterReplication.followerIndexDetailPanel.viewIndexLink"
+                    defaultMessage="View in Index Management"
                   />
-                )}
-                followerIndices={[followerIndex]}
-              />
-            </EuiFlexItem>
-          )}
+                </EuiButton>
+              </EuiFlexItem>
+
+              {followerIndex && (
+                <EuiFlexItem grow={false}>
+                  <ContextMenu
+                    iconSide="left"
+                    iconType="arrowUp"
+                    anchorPosition="upRight"
+                    label={(
+                      <FormattedMessage
+                        id="xpack.crossClusterReplication.followerIndexDetailPanel.manageButtonLabel"
+                        defaultMessage="Manage"
+                      />
+                    )}
+                    followerIndices={[followerIndex]}
+                  />
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
     );

x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js

@@ -124,7 +124,7 @@ export const FollowerIndicesList = injectI18n(
             </EuiFlexItem>
           </EuiFlexGroup>
 
-          <EuiSpacer />
+          <EuiSpacer size="m" />
         </Fragment>
       );
     }

x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap

@@ -166,7 +166,16 @@ Array [
               class="euiFormHelpText euiFormRow__text"
               id="mockId-help"
             >
-              An IP address or host name, followed by the transport port of the remote cluster.
+              An IP address or host name, followed by the 
+              <a
+                class="euiLink euiLink--primary"
+                href="undefinedguide/en/elasticsearch/reference/undefined/modules-transport.html"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                transport port
+              </a>
+               of the remote cluster.
             </div>
           </div>
         </div>
@@ -430,7 +439,16 @@ Array [
       class="euiFormHelpText euiFormRow__text"
       id="mockId-help"
     >
-      An IP address or host name, followed by the transport port of the remote cluster.
+      An IP address or host name, followed by the 
+      <a
+        class="euiLink euiLink--primary"
+        href="undefinedguide/en/elasticsearch/reference/undefined/modules-transport.html"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        transport port
+      </a>
+       of the remote cluster.
     </div>
   </div>,
   <div

x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js

@@ -31,7 +31,10 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { skippingDisconnectedClustersUrl } from '../../../services/documentation_links';
+import {
+  skippingDisconnectedClustersUrl,
+  transportPortUrl,
+} from '../../../services/documentation_links';
 import { validateName, validateSeeds, validateSeed } from './validators';
 
 const defaultFields = {
@@ -264,7 +267,17 @@ export const RemoteClusterForm = injectI18n(
             helpText={(
               <FormattedMessage
                 id="xpack.remoteClusters.remoteClusterForm.sectionSeedsHelpText"
-                defaultMessage="An IP address or host name, followed by the transport port of the remote cluster."
+                defaultMessage="An IP address or host name, followed by the {transportPort} of the remote cluster."
+                values={{
+                  transportPort: (
+                    <EuiLink href={transportPortUrl} target="_blank">
+                      <FormattedMessage
+                        id="xpack.remoteClusters.remoteClusterForm.sectionSeedsHelpText.transportPortLinkText"
+                        defaultMessage="transport port"
+                      />
+                    </EuiLink>
+                  ),
+                }}
               />
             )}
             isInvalid={showErrors}

x-pack/plugins/remote_clusters/public/services/documentation_links.js

@@ -10,3 +10,4 @@ const esBase = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LIN
 
 export const skippingDisconnectedClustersUrl = `${esBase}/modules-cross-cluster-search.html#_skipping_disconnected_clusters`;
 export const remoteClustersUrl = `${esBase}/modules-remote-clusters.html`;
+export const transportPortUrl = `${esBase}/modules-transport.html`;