Improve cluster apps installation flow

1 files changed, 88 insertions, 49 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 651f3b50236..0452729d3ff 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -2,6 +2,7 @@
   /* eslint-disable vue/require-default-prop */
   import { s__, sprintf } from '../../locale';
   import eventHub from '../event_hub';
+  import identicon from '../../vue_shared/components/identicon.vue';
   import loadingButton from '../../vue_shared/components/loading_button.vue';
   import {
     APPLICATION_STATUS,
@@ -13,6 +14,7 @@
   export default {
     components: {
       loadingButton,
+      identicon,
     },
     props: {
       id: {
@@ -31,6 +33,16 @@
         type: String,
         required: false,
       },
+      logoUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       status: {
         type: String,
         required: false,
@@ -60,6 +72,18 @@
       isKnownStatus() {
         return Object.values(APPLICATION_STATUS).includes(this.status);
       },
+      isInstalled() {
+        return (
+          this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
+        );
+      },
+      hasLogo() {
+        return !!this.logoUrl;
+      },
+      identiconId() {
+        // generate a deterministic integer id for the identicon background
+        return this.id.charCodeAt(0);
+      },
       rowJsClass() {
         return `js-cluster-application-row-${this.id}`;
       },
@@ -128,37 +152,81 @@
 
 <template>
   <div
-    :class="rowJsClass"
-    class="gl-responsive-table-row gl-responsive-table-row-col-span"
+    :class="[
+      rowJsClass,
+      isInstalled && 'cluster-application-installed',
+      disabled && 'cluster-application-disabled'
+    ]"
+    class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
   >
     <div
       class="gl-responsive-table-row-layout"
       role="row"
     >
-      <a
-        v-if="titleLink"
-        :href="titleLink"
-        target="blank"
-        rel="noopener noreferrer"
+      <div
+        class="table-section append-right-8 section-align-top"
         role="gridcell"
-        class="table-section section-15 section-align-top js-cluster-application-title"
       >
-        {{ title }}
-      </a>
-      <span
-        v-else
-        class="table-section section-15 section-align-top js-cluster-application-title"
-      >
-        {{ title }}
-      </span>
+        <img
+          v-if="hasLogo"
+          :src="logoUrl"
+          :alt="`${title} logo`"
+          class="cluster-application-logo avatar s40"
+        />
+        <identicon
+          v-else
+          :entity-id="identiconId"
+          :entity-name="title"
+          size-class="s40"
+        />
+      </div>
       <div
-        class="table-section section-wrap"
+        class="table-section cluster-application-description section-wrap"
         role="gridcell"
       >
+        <strong>
+          <a
+            v-if="titleLink"
+            :href="titleLink"
+            target="blank"
+            rel="noopener noreferrer"
+            class="js-cluster-application-title"
+          >
+            {{ title }}
+          </a>
+          <span
+            v-else
+            class="js-cluster-application-title"
+          >
+            {{ title }}
+          </span>
+        </strong>
         <slot name="description"></slot>
+        <div
+          v-if="hasError || isUnknownStatus"
+          class="cluster-application-error text-danger prepend-top-10"
+        >
+          <p class="js-cluster-application-general-error-message append-bottom-0">
+            {{ generalErrorDescription }}
+          </p>
+          <ul v-if="statusReason || requestReason">
+            <li
+              v-if="statusReason"
+              class="js-cluster-application-status-error-message"
+            >
+              {{ statusReason }}
+            </li>
+            <li
+              v-if="requestReason"
+              class="js-cluster-application-request-error-message"
+            >
+              {{ requestReason }}
+            </li>
+          </ul>
+        </div>
       </div>
       <div
-        :class="{ 'section-20': showManageButton, 'section-15': !showManageButton }"
+        :class="{ 'section-25': showManageButton, 'section-15': !showManageButton }"
         class="table-section table-button-footer section-align-top"
         role="gridcell"
       >
@@ -168,6 +236,7 @@
         >
           <a
             :href="manageLink"
+            :class="{ disabled: disabled }"
             class="btn"
           >
             {{ manageButtonLabel }}
@@ -176,7 +245,7 @@
         <div class="btn-group table-action-buttons">
           <loading-button
             :loading="installButtonLoading"
-            :disabled="installButtonDisabled"
+            :disabled="disabled || installButtonDisabled"
             :label="installButtonLabel"
             class="js-cluster-application-install-button"
             @click="installClicked"
@@ -184,35 +253,5 @@
         </div>
       </div>
     </div>
-    <div
-      v-if="hasError || isUnknownStatus"
-      class="gl-responsive-table-row-layout"
-      role="row"
-    >
-      <div
-        class="alert alert-danger alert-block append-bottom-0 clusters-error-alert"
-        role="gridcell"
-      >
-        <div>
-          <p class="js-cluster-application-general-error-message">
-            {{ generalErrorDescription }}
-          </p>
-          <ul v-if="statusReason || requestReason">
-            <li
-              v-if="statusReason"
-              class="js-cluster-application-status-error-message"
-            >
-              {{ statusReason }}
-            </li>
-            <li
-              v-if="requestReason"
-              class="js-cluster-application-request-error-message"
-            >
-              {{ requestReason }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
   </div>
 </template>