Resolve "Add a link to documentation on how to get external ip in the Kubernetes cluster details page"

6 files changed, 35 insertions, 4 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 4dddb6eb0d6..fd2d1276230 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -35,10 +35,11 @@ export default class Clusters {
       clusterStatus,
       clusterStatusReason,
       helpPath,
+      ingressHelpPath,
     } = document.querySelector('.js-edit-cluster-form').dataset;
 
     this.store = new ClustersStore();
-    this.store.setHelpPath(helpPath);
+    this.store.setHelpPaths(helpPath, ingressHelpPath);
     this.store.updateStatus(clusterStatus);
     this.store.updateStatusReason(clusterStatusReason);
     this.service = new ClustersService({
@@ -93,6 +94,7 @@ export default class Clusters {
           props: {
             applications: this.state.applications,
             helpPath: this.state.helpPath,
+            ingressHelpPath: this.state.ingressHelpPath,
           },
         });
       },
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index ff2e0768a87..3b7195de635 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -18,6 +18,11 @@
         required: false,
         default: '',
       },
+      ingressHelpPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
     },
     computed: {
       generalApplicationDescription() {
@@ -59,13 +64,28 @@
           false,
         );
 
+        const externalIpParagraph = sprintf(
+          _.escape(s__(
+            `ClusterIntegration|After installing Ingress, you will need to point your wildcard DNS
+            at the generated external IP address in order to view your app after it is deployed. %{ingressHelpLink}`,
+          )), {
+            ingressHelpLink: `<a href="${this.ingressHelpPath}">
+              ${_.escape(s__('ClusterIntegration|More information'))}
+            </a>`,
+          },
+          false,
+        );
+
         return `
           <p>
             ${descriptionParagraph}
           </p>
-          <p class="append-bottom-0">
+          <p>
             ${extraCostParagraph}
           </p>
+          <p class="settings-message append-bottom-0">
+            ${externalIpParagraph}
+          </p>
         `;
       },
       gitlabRunnerDescription() {
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index bd4a1fb37f9..49c3d184ef9 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -4,6 +4,7 @@ export default class ClusterStore {
   constructor() {
     this.state = {
       helpPath: null,
+      ingressHelpPath: null,
       status: null,
       statusReason: null,
       applications: {
@@ -39,8 +40,9 @@ export default class ClusterStore {
     };
   }
 
-  setHelpPath(helpPath) {
+  setHelpPaths(helpPath, ingressHelpPath) {
     this.state.helpPath = helpPath;
+    this.state.ingressHelpPath = ingressHelpPath;
   }
 
   updateStatus(status) {
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index 2049105dff6..048bcb542be 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -13,7 +13,8 @@
   toggle_status: @cluster.enabled? ? 'true': 'false',
   cluster_status: @cluster.status_name,
   cluster_status_reason: @cluster.status_reason,
-  help_path: help_page_path('user/project/clusters/index.md', anchor: 'installing-applications') } }
+  help_path: help_page_path('user/project/clusters/index.md', anchor: 'installing-applications'),
+  ingress_help_path: help_page_path('user/project/clusters/index.md', anchor: 'getting-the-external-ip-address') } }
 
   .js-cluster-application-notice
     .flash-container
diff --git a/changelogs/unreleased/42693-42693-add-a-link-to-documentation-on-how-to-get-external-ip-in-the-kubernetes-cluster-details-page.yml b/changelogs/unreleased/42693-42693-add-a-link-to-documentation-on-how-to-get-external-ip-in-the-kubernetes-cluster-details-page.yml
new file mode 100644
index 00000000000..aeadf8ffc4a
--- /dev/null
+++ b/changelogs/unreleased/42693-42693-add-a-link-to-documentation-on-how-to-get-external-ip-in-the-kubernetes-cluster-details-page.yml
@@ -0,0 +1,5 @@
+---
+title: Add a link to documentation on how to get external ip in the Kubernetes cluster details page
+merge_request: 16937
+author:
+type: added
diff --git a/spec/javascripts/clusters/stores/clusters_store_spec.js b/spec/javascripts/clusters/stores/clusters_store_spec.js
index ec2889355e6..726a4ed30de 100644
--- a/spec/javascripts/clusters/stores/clusters_store_spec.js
+++ b/spec/javascripts/clusters/stores/clusters_store_spec.js
@@ -58,6 +58,7 @@ describe('Clusters Store', () => {
 
       expect(store.state).toEqual({
         helpPath: null,
+        ingressHelpPath: null,
         status: mockResponseData.status,
         statusReason: mockResponseData.status_reason,
         applications: {