Edit Knative domain after it has been deployed

What does this MR do?

This MR adds the ability to edit Knative domain after it has been deployed.

What are the relevant issue numbers?

Closes #56937 (closed)

Successful update

Update failure

To simulate an "Update failure", the following commands can be executed:

Open rails console: bundle exec rails console

In rails console execute the following:

1. cluster = Clusters::Cluster.find <id> Note: <id> can be found in the browser url when navigating to the cluster
2. knative = cluster.application_knative
3. knative.update!(status: 6)

The runner on the specified cluster should now be in the update_errored state, and should display the Retry upgrade button

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests added for this feature/bug
• Tested in all supported browsers
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides

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

@@ -477,91 +477,98 @@ export default {
           </p>
 
           <div class="row">
-          <template v-if="knativeInstalled">
-            <div class="form-group col-9 mb-0">
-              <label for="knative-domainname">
-                <strong>
-                  {{ s__('ClusterIntegration|Knative Domain Name:') }}
-                </strong>
-              </label>
-              <input
-                id="knative-domainname"
-                v-model="applications.knative.hostname"
-                v-once
-                type="text"
-                class="form-control js-domainname"
-              />
-            </div>
-          </template>
-          <template v-else-if="helmInstalled && rbac">
-            <div class="form-group">
-              <label for="knative-domainname">
-                <strong>
-                  {{ s__('ClusterIntegration|Knative Domain Name:') }}
-                </strong>
-              </label>
-              <input
-                id="knative-domainname"
-                v-model="applications.knative.hostname"
-                type="text"
-                class="form-control js-domainname"
-              />
-            </div>
-          </template>
-          <template v-if="knativeInstalled">
-            <div class="form-group col-3 pl-0 mb-0">
-              <label for="knative-ip-address">
-                <strong>
-                  {{ s__('ClusterIntegration|Knative IP Address:') }}
-                </strong>
-              </label>
-              <div v-if="knativeExternalIp" class="input-group">
+            <template v-if="knativeInstalled">
+              <div class="form-group col-md-8 col-lg-9 mb-0">
+                <label for="knative-domainname">
+                  <strong>
+                    {{ s__('ClusterIntegration|Knative Domain Name:') }}
+                  </strong>
+                </label>
                 <input
-                  id="knative-ip-address"
-                  :value="knativeExternalIp"
+                  id="knative-domainname"
+                  v-model="applications.knative.hostname"
+                  v-once
                   type="text"
-                  class="form-control js-ip-address"
-                  readonly
+                  class="form-control js-domainname"
                 />
-                <span class="input-group-append">
-                  <clipboard-button
-                    :text="knativeExternalIp"
-                    :title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')"
-                    class="input-group-text js-clipboard-btn"
+              </div>
+            </template>
+            <template v-else-if="helmInstalled && rbac">
+              <div class="form-group col-12">
+                <label for="knative-domainname">
+                  <strong>
+                    {{ s__('ClusterIntegration|Knative Domain Name:') }}
+                  </strong>
+                </label>
+                <input
+                  id="knative-domainname"
+                  v-model="applications.knative.hostname"
+                  type="text"
+                  class="form-control js-domainname"
+                />
+              </div>
+            </template>
+            <template v-if="knativeInstalled">
+              <div class="form-group col-md-4 col-lg-3 pl-md-0 mb-0 mt-sm-3 mt-md-0">
+                <label for="knative-ip-address">
+                  <strong>
+                    {{ s__('ClusterIntegration|Knative IP Address:') }}
+                  </strong>
+                </label>
+                <div v-if="knativeExternalIp" class="input-group">
+                  <input
+                    id="knative-ip-address"
+                    :value="knativeExternalIp"
+                    type="text"
+                    class="form-control js-ip-address"
+                    readonly
                   />
-                </span>
+                  <span class="input-group-append">
+                    <clipboard-button
+                      :text="knativeExternalIp"
+                      :title="s__('ClusterIntegration|Copy Knative IP Address to clipboard')"
+                      class="input-group-text js-clipboard-btn"
+                    />
+                  </span>
+                </div>
+                <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
               </div>
-              <input v-else type="text" class="form-control js-ip-address" readonly value="?" />
-            </div>
 
-            <p v-if="!knativeExternalIp" class="settings-message js-no-ip-message">
-              {{
-                s__(`ClusterIntegration|The IP address is in
+              <p v-if="!knativeExternalIp" class="settings-message js-no-ip-message m-3">
+                {{
+                  s__(`ClusterIntegration|The IP address is in
               the process of being assigned. Please check your Kubernetes
               cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
-              }}
-            </p>
+                }}
+              </p>
 
-            <div class="row col-12 ml-0">
-            <p class="form-text text-muted col-9 p-0">
-              {{
-                s__(`ClusterIntegration|To access your application after deployment, point a wildcard DNS to the IP address.`)
-              }}
-            </p>
-            <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer" class="col-3 mt-1">
-              {{ __('More information') }}
-            </a>
-            </div>
+              <div class="row col-12 ml-0">
+                <p class="form-text text-muted col-9 p-0">
+                  {{
+                    s__(
+                      `ClusterIntegration|To access your application after deployment, point a wildcard DNS to the IP address.`,
+                    )
+                  }}
+                </p>
+                <a
+                  :href="ingressDnsHelpPath"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="col-3 mt-1"
+                >
+                  {{ __('More information') }}
+                </a>
+              </div>
 
-            <loading-button
-              v-if="knativeExternalIp"
-              class="btn btn-success js-cluster-application-upgrade-button mt-2 ml-3"
-              :loading="isUpdatingDomain"
-              :disabled="isUpdatingDomain"
-              :label="s__('ClusterIntegration|Save changes')"
-              @click="upgradeClicked"
-            />
-          </template>
+              <loading-button
+                v-if="knativeExternalIp"
+                class="btn btn-success js-cluster-application-upgrade-button mt-2 ml-3"
+                :loading="isUpdatingDomain"
+                :disabled="isUpdatingDomain"
+                :label="s__('ClusterIntegration|Save changes')"
+                @click="upgradeClicked"
+              />
+            </template>
           </div>
         </div>
       </application-row>