Use less cryptic error message for missing Knative domain

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32799

app/assets/javascripts/clusters/clusters_bundle.js

@@ -468,6 +468,11 @@ export default class Clusters {
         return;
       }
 
+      if (appId === KNATIVE && !params.hostname && !params.pages_domain_id) {
+        reject(s__('ClusterIntegration|You must specify a domain before you can install Knative.'));
+        return;
+      }
+
       resolve();
     });
   }
@@ -520,6 +525,7 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'isEditingDomain', true);
     this.store.updateAppProperty(appId, 'hostname', domain);
     this.store.updateAppProperty(appId, 'pagesDomain', domainId ? { id: domainId, domain } : null);
+    this.store.updateAppProperty(appId, 'validationError', null);
   }
 
   setCrossplaneProviderStack(data) {

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

@@ -82,6 +82,9 @@ export default {
     showDomainsDropdown() {
       return this.availableDomains.length > 0;
     },
+    validationError() {
+      return this.knative.validationError;
+    },
   },
   watch: {
     knativeUpdateSuccessful(updateSuccessful) {
@@ -157,6 +160,8 @@ export default {
         type="text"
         class="form-control js-knative-domainname"
       />
+
+      <span v-if="validationError" class="gl-field-error">{{ validationError }}</span>
     </div>
 
     <template v-if="knativeInstalled">

locale/gitlab.pot

@@ -5368,6 +5368,9 @@ msgstr ""
 msgid "ClusterIntegration|You must have an RBAC-enabled cluster to install Knative."
 msgstr ""
 
+msgid "ClusterIntegration|You must specify a domain before you can install Knative."
+msgstr ""
+
 msgid "ClusterIntegration|You should select at least two subnets"
 msgstr ""
 

spec/frontend/clusters/clusters_bundle_spec.js

@@ -268,13 +268,18 @@ describe('Clusters', () => {
 
       cluster.store.state.applications[applicationId].status = INSTALLABLE;
 
+      const params = {};
+      if (applicationId === 'knative') {
+        params.hostname = 'test-example.com';
+      }
+
       // eslint-disable-next-line promise/valid-params
       cluster
-        .installApplication({ id: applicationId })
+        .installApplication({ id: applicationId, params })
         .then(() => {
           expect(cluster.store.state.applications[applicationId].status).toEqual(INSTALLING);
           expect(cluster.store.state.applications[applicationId].requestReason).toEqual(null);
-          expect(cluster.service.installApplication).toHaveBeenCalledWith(applicationId, undefined);
+          expect(cluster.service.installApplication).toHaveBeenCalledWith(applicationId, params);
           done();
         })
         .catch();