Add dropdown selector for knative domain

when instance-level domain exists, provide it as an option

app/assets/javascripts/clusters/clusters_bundle.js

@@ -259,7 +259,7 @@ export default class Clusters {
     eventHub.$on('installApplication', this.installApplication);
     eventHub.$on('updateApplication', data => this.updateApplication(data));
     eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data));
-    eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data));
+    eventHub.$on('setKnativeDomain', data => this.setKnativeDomain(data));
     eventHub.$on('uninstallApplication', data => this.uninstallApplication(data));
     eventHub.$on('setCrossplaneProviderStack', data => this.setCrossplaneProviderStack(data));
     eventHub.$on('setIngressModSecurityEnabled', data => this.setIngressModSecurityEnabled(data));
@@ -275,7 +275,7 @@ export default class Clusters {
     eventHub.$off('installApplication', this.installApplication);
     eventHub.$off('updateApplication', this.updateApplication);
     eventHub.$off('saveKnativeDomain');
-    eventHub.$off('setKnativeHostname');
+    eventHub.$off('setKnativeDomain');
     eventHub.$off('setCrossplaneProviderStack');
     eventHub.$off('uninstallApplication');
     eventHub.$off('setIngressModSecurityEnabled');
@@ -521,10 +521,15 @@ export default class Clusters {
     });
   }
 
-  setKnativeHostname(data) {
+  setKnativeDomain(data) {
     const appId = data.id;
-    this.store.updateAppProperty(appId, 'isEditingHostName', true);
-    this.store.updateAppProperty(appId, 'hostname', data.hostname);
+    this.store.updateAppProperty(appId, 'isEditingDomain', true);
+    this.store.updateAppProperty(appId, 'hostname', data.domain);
+    this.store.updateAppProperty(
+      appId,
+      'pagesDomain',
+      data.domainId ? { id: data.domainId, domain: data.domain } : null,
+    );
   }
 
   setCrossplaneProviderStack(data) {

app/assets/javascripts/clusters/components/applications.vue

@@ -240,16 +240,20 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
     this.helmInstallIllustration = helmInstallIllustration;
   },
   methods: {
-    saveKnativeDomain(hostname) {
+    saveKnativeDomain() {
       eventHub.$emit('saveKnativeDomain', {
         id: 'knative',
-        params: { hostname },
+        params: {
+          hostname: this.applications.knative.hostname,
+          pages_domain_id: this.applications.knative.pagesDomain?.id,
+        },
       });
     },
-    setKnativeHostname(hostname) {
-      eventHub.$emit('setKnativeHostname', {
+    setKnativeDomain({ domainId, domain }) {
+      eventHub.$emit('setKnativeDomain', {
         id: 'knative',
-        hostname,
+        domainId,
+        domain,
       });
     },
     setCrossplaneProviderStack(stack) {
@@ -591,7 +595,10 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
         :request-reason="applications.knative.requestReason"
         :installed="applications.knative.installed"
         :install-failed="applications.knative.installFailed"
-        :install-application-request-params="{ hostname: applications.knative.hostname }"
+        :install-application-request-params="{
+          hostname: applications.knative.hostname,
+          pages_domain_id: applications.knative.pagesDomain && applications.knative.pagesDomain.id,
+        }"
         :installed-via="installedVia"
         :uninstallable="applications.knative.uninstallable"
         :uninstall-successful="applications.knative.uninstallSuccessful"
@@ -628,7 +635,7 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
             :knative="knative"
             :ingress-dns-help-path="ingressDnsHelpPath"
             @save="saveKnativeDomain"
-            @set="setKnativeHostname"
+            @set="setKnativeDomain"
           />
         </div>
       </application-row>

app/assets/javascripts/clusters/components/knative_domain_editor.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownItem,
+  GlLoadingIcon,
+  GlSearchBoxByType,
+} from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import { __, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 import { APPLICATION_STATUS } from '~/clusters/constants';
 
@@ -13,6 +19,10 @@ export default {
     LoadingButton,
     ClipboardButton,
     GlLoadingIcon,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
+    GlSearchBoxByType,
   },
   props: {
     knative: {
@@ -25,6 +35,11 @@ export default {
       required: false,
     },
   },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
   computed: {
     saveButtonDisabled() {
       return [UNINSTALLING, UPDATING].includes(this.knative.status);
@@ -49,9 +64,31 @@ export default {
         return this.knative.hostname;
       },
       set(hostname) {
-        this.$emit('set', hostname);
+        this.selectCustomDomain(hostname);
       },
     },
+    domainDropdownText() {
+      return this.knativeHostname || s__('ClusterIntegration|Select existing domain or use new');
+    },
+    useQueryText() {
+      return sprintf(
+        s__('ClusterIntegration|Use %{query}'),
+        {
+          query: `<code>${this.searchQuery}</code>`,
+        },
+        false,
+      );
+    },
+    availableDomains() {
+      return this.knative.availableDomains || [];
+    },
+    filteredDomains() {
+      const query = this.searchQuery.toLowerCase();
+      return this.availableDomains.filter(({ domain }) => domain.toLowerCase().includes(query));
+    },
+    showDomainsDropdown() {
+      return this.availableDomains.length > 0;
+    },
   },
   watch: {
     knativeUpdateSuccessful(updateSuccessful) {
@@ -60,6 +97,14 @@ export default {
       }
     },
   },
+  methods: {
+    selectDomain({ id, domain }) {
+      this.$emit('set', { domain, domainId: id });
+    },
+    selectCustomDomain(domain) {
+      this.$emit('set', { domain, domainId: null });
+    },
+  },
 };
 </script>
 
@@ -72,22 +117,49 @@ export default {
       {{ s__('ClusterIntegration|Something went wrong while updating Knative domain name.') }}
     </div>
 
-    <template>
-      <div
-        :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }"
-        class="form-group col-sm-12 mb-0"
+    <div
+      :class="{ 'col-md-6': knativeInstalled, 'col-12': !knativeInstalled }"
+      class="form-group col-sm-12 mb-0"
+    >
+      <label for="knative-domainname">
+        <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
+      </label>
+
+      <gl-dropdown
+        v-if="showDomainsDropdown"
+        :text="domainDropdownText"
+        toggle-class="dropdown-menu-toggle"
+        class="w-100 mb-2"
       >
-        <label for="knative-domainname">
-          <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
-        </label>
-        <input
-          id="knative-domainname"
-          v-model="knativeHostname"
-          type="text"
-          class="form-control js-knative-domainname"
+        <gl-search-box-by-type
+          v-model.trim="searchQuery"
+          :placeholder="s__('ClusterIntegration|Search domains')"
+          class="m-2"
         />
-      </div>
-    </template>
+        <gl-dropdown-item
+          v-for="domain in filteredDomains"
+          :key="domain.id"
+          @click="selectDomain(domain)"
+        >
+          <span class="ml-1">{{ domain.domain }}</span>
+        </gl-dropdown-item>
+        <template v-if="searchQuery">
+          <gl-dropdown-divider />
+          <gl-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
+            <span class="ml-1" v-html="useQueryText"></span>
+          </gl-dropdown-item>
+        </template>
+      </gl-dropdown>
+
+      <input
+        v-else
+        id="knative-domainname"
+        v-model="knativeHostname"
+        type="text"
+        class="form-control js-knative-domainname"
+      />
+    </div>
+
     <template v-if="knativeInstalled">
       <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
         <label for="knative-endpoint">
@@ -144,7 +216,7 @@ export default {
         :loading="saving"
         :disabled="saveButtonDisabled"
         :label="saveButtonLabel"
-        @click="$emit('save', knativeHostname)"
+        @click="$emit('save')"
       />
     </template>
   </div>

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -93,7 +93,7 @@ export default class ClusterStore {
           ...applicationInitialState,
           title: s__('ClusterIntegration|Knative'),
           hostname: null,
-          isEditingHostName: false,
+          isEditingDomain: false,
           externalIp: null,
           externalHostname: null,
           updateSuccessful: false,
@@ -234,7 +234,12 @@ export default class ClusterStore {
           'jupyter',
         );
       } else if (appId === KNATIVE) {
-        if (!this.state.applications.knative.isEditingHostName) {
+        if (serverAppEntry.available_domains) {
+          this.state.applications.knative.availableDomains = serverAppEntry.available_domains;
+        }
+        if (!this.state.applications.knative.isEditingDomain) {
+          this.state.applications.knative.pagesDomain =
+            serverAppEntry.pages_domain || this.state.applications.knative.pagesDomain;
           this.state.applications.knative.hostname =
             serverAppEntry.hostname || this.state.applications.knative.hostname;
         }

app/controllers/clusters/applications_controller.rb

@@ -47,7 +47,7 @@ class Clusters::ApplicationsController < Clusters::BaseController
   end
 
   def cluster_application_params
-    params.permit(:application, :hostname, :email, :stack, :modsecurity_enabled, :modsecurity_mode)
+    params.permit(:application, :hostname, :pages_domain_id, :email, :stack, :modsecurity_enabled, :modsecurity_mode)
   end
 
   def cluster_application_destroy_params