@rancher/shell 1.2.3 → 2.0.1

package/dialog/AddCustomBadgeDialog.vue

@@ -12,6 +12,9 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import ColorInput from '@shell/components/form/ColorInput';
 import { parseColor, textColor } from '@shell/utils/color';
 import { NORMAN } from '@shell/config/types';
+import { abbreviateClusterName } from '@shell/utils/cluster';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import ClusterIconMenu from '@shell/components/ClusterIconMenu';
 
 export default {
   name:       'AddCustomBadgeDialog',
@@ -23,88 +26,178 @@ export default {
     LabeledInput,
     ColorInput,
     ClusterBadge,
+    ClusterIconMenu,
     ClusterProviderIcon,
   },
-
+  props: {
+    isCreate:        { type: Boolean, default: false },
+    clusterName:     { type: String, default: '' },
+    mode:            { type: String, default: _CREATE },
+    clusterExplorer: {
+      type:    Object,
+      default: null
+    },
+  },
   data() {
     return {
-      useCustomBadge:   null,
+      useCustomComment: null,
       errors:           [],
       badgeBgColor:     '',
-      badgeDescription: '',
+      badgeComment:     '',
       badgeAsIcon:      null,
+      badgeColorPicker: false,
       letter:           '',
+      cluster:          {},
     };
   },
+  created() {
+    if (this.clusterExplorer) {
+      this.setBadgeProperties(this.clusterExplorer);
+    }
 
-  fetch() {
-    if (this.currentCluster.metadata?.annotations) {
-      this.badgeDescription = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.TEXT];
-      this.useCustomBadge = this.badgeDescription?.length > 0;
-      this.badgeDescription = this.badgeDescription || 'Example Text';
-      this.badgeBgColor = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.COLOR] || '#ff0000';
+    if (this.isCreate) {
+      this.setBadgeProperties(this.getPreviewCluster);
+    }
+  },
 
-      this.badgeAsIcon = !!this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || false;
+  async fetch() {
+    // INFO: Do not fetch the cluster object if it's a create or cluster explorer since it won't exist
+    if (this.isCreate || this.clusterExplorer) {
+      return;
+    }
+    // INFO: Fetch the cluster object if it's an edit
+    await this.$store.dispatch('rancher/find', { type: NORMAN.CLUSTER, id: this.currentCluster?.id });
 
-      this.letter = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || this.badgeDescription.substring(0, 2);
+    if (this.currentCluster.metadata?.annotations) {
+      this.badgeComment = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.TEXT];
+      this.useCustomComment = this.badgeComment?.length > 0;
+      this.badgeBgColor = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.COLOR] || 'transparent';
+      this.badgeAsIcon = !!this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || false;
+      this.badgeColorPicker = this.badgeBgColor !== 'transparent';
+      this.letter = this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || abbreviateClusterName(this.currentCluster.nameDisplay);
     }
   },
-
+  watch: {
+    // INFO: If the user has a custom comment, set the badge text
+    useCustomComment: {
+      handler(neu, old) {
+        if (neu !== old) {
+          this.badgeComment = neu ? this.badgeComment : '';
+        }
+      },
+      immediate: true,
+    },
+    badgeColorPicker: {
+      handler() {
+        this.badgeBgColor = this.badgeColorPicker ? this.badgeBgColor : 'transparent';
+      },
+      immediate: true,
+    },
+    badgeAsIcon: {
+      handler(neu, old) {
+        if (neu !== old) {
+          this.letter = neu ? this.letter : abbreviateClusterName(this.clusterName);
+        }
+      },
+      immediate: true,
+    },
+  },
   computed: {
     ...mapGetters(['currentCluster']),
-
-    previewColor() {
-      return textColor(parseColor(this.badgeBgColor)) || '#ffffff';
-    },
+    ...mapGetters('customisation', ['getPreviewCluster']),
     canSubmit() {
-      return this.badgeDescription.length >= 1;
+      if (this.mode === _CREATE) {
+        return this.badgeAsIcon || this.useCustomComment;
+      }
+
+      if (this.mode === _EDIT) {
+        if (this.useCustomComment && this.badgeComment.length <= 0) {
+          return false;
+        }
+
+        if (this.badgeAsIcon && this.letter.length <= 0) {
+          return false;
+        }
+
+        return true;
+      }
+
+      return this.badgeAsIcon !== this.currentCluster.metadata?.annotations[CLUSTER_BADGE.ICON_TEXT] || this.useCustomComment !== !!this.currentCluster.metadata?.annotations[CLUSTER_BADGE.TEXT] || (this.badgeAsIcon && this.letter.length > 1);
     },
     // Fake cluster object for use with badge component
     previewCluster() {
-      // Make cluster object that is enough for the badge component to work
-      return {
-        isLocal:         this.currentCluster.isLocal,
-        providerNavLogo: this.currentCluster.providerNavLogo,
-        badge:           {
-          text:      this.badgeDescription,
-          color:     this.badgeBgColor,
-          textColor: textColor(parseColor(this.badgeBgColor)),
-          iconText:  this.badgeAsIcon ? this.letter.toUpperCase() : '',
-        }
-      };
+      return this.isCreate || !this.currentCluster ? this.generateBadgeObject(false, '', true) : this.generateBadgeObject(this.currentCluster.isLocal, this.currentCluster.providerNavLogo, this.currentCluster.ready);
     },
 
-    mode() {
-      return !!this.useCustomBadge ? 'edit' : 'view';
+    displayClusterPrevIcon() {
+      return !this.badgeAsIcon ? { ...this.previewCluster.badge, iconText: null } : this.previewCluster?.badge;
     },
-  },
 
+    previewName() {
+      if (this.isCreate || this.clusterExplorer) {
+        return this.clusterName;
+      }
+
+      return this.currentCluster?.nameDisplay || '';
+    },
+  },
   methods: {
     close() {
       this.$emit('close');
     },
 
+    // INFO: Set the badge properties based on the cluster object
+    setBadgeProperties(cluster) {
+      this.cluster = cluster;
+      this.badgeAsIcon = this.cluster?.badge?.iconText?.length > 0 || false;
+      this.letter = this.cluster?.badge?.iconText || abbreviateClusterName(this.clusterName);
+      this.useCustomComment = this.cluster?.badge?.text?.length > 0 || false;
+      this.badgeBgColor = this.cluster?.badge?.color || 'transparent';
+      this.badgeComment = this.cluster?.badge?.text || null;
+      this.badgeColorPicker = this.badgeBgColor !== 'transparent';
+    },
+
+    // INFO: Generate a badge object for the preview cluster
+    generateBadgeObject(isLocal, providerNavLogo, ready) {
+      return {
+        isLocal,
+        providerNavLogo,
+        ready:              ready ?? true,
+        removePreviewColor: !this.badgeAsIcon,
+        badge:              {
+          text:      this.badgeComment,
+          color:     this.badgeBgColor,
+          textColor: textColor(parseColor(this.badgeBgColor)),
+          iconText:  this.badgeAsIcon ? this.letter.toUpperCase() : abbreviateClusterName(this.previewName),
+        }
+      };
+    },
+
     async apply(buttonDone) {
       try {
-        // Fetch the Norman cluster object
-        const norman = await this.$store.dispatch('rancher/find', { type: NORMAN.CLUSTER, id: this.currentCluster.id });
-
-        delete norman.annotations[CLUSTER_BADGE.TEXT];
-        delete norman.annotations[CLUSTER_BADGE.COLOR];
-        delete norman.annotations[CLUSTER_BADGE.ICON_TEXT];
-
-        if (this.useCustomBadge) {
-          this.$set(norman.annotations, CLUSTER_BADGE.TEXT, this.badgeDescription);
-          this.$set(norman.annotations, CLUSTER_BADGE.COLOR, this.badgeBgColor);
-          if (this.badgeAsIcon) {
-            this.$set(norman.annotations, CLUSTER_BADGE.ICON_TEXT, this.letter.toUpperCase());
-          }
-        }
+        // INFO: If we're editing a cluster, update the cluster object
+        if (!this.isCreate && !this.clusterExplorer) {
+          const norman = await this.$store.dispatch('rancher/find', { type: NORMAN.CLUSTER, id: this.currentCluster?.id });
+
+          delete norman.annotations[CLUSTER_BADGE.COLOR];
+          delete norman.annotations[CLUSTER_BADGE.ICON_TEXT];
+          delete norman.annotations[CLUSTER_BADGE.TEXT];
+
+          this.$set(norman.annotations, CLUSTER_BADGE.COLOR, this.badgeColorPicker ? this.badgeBgColor : 'transparent');
+          this.$set(norman.annotations, CLUSTER_BADGE.ICON_TEXT, this.letter.toUpperCase());
+          this.$set(norman.annotations, CLUSTER_BADGE.TEXT, this.badgeComment);
 
-        await norman.save();
+          await norman.save();
 
-        buttonDone(true);
-        this.close();
+          buttonDone(true);
+          this.close();
+        } else {
+          // INFO: If it's a create, update the preview cluster object in the store.
+          this.$store.commit('customisation/setPreviewCluster', { ...this.previewCluster });
+
+          buttonDone(true);
+          this.close();
+        }
       } catch (err) {
         this.errors = exceptionToErrorsArray(err);
         buttonDone(false);
@@ -128,86 +221,83 @@ export default {
 
     <div
       slot="body"
-      class="pl-10 pr-10 cluster-badge-body"
+      class="cluster-badge-body"
     >
       <div>{{ t('clusterBadge.modal.previewTitle') }}</div>
+      <div class="badge-preview">
+        <div class="badge-preview-sidenav">
+          <p> {{ t('clusterBadge.modal.previewSide') }}</p>
 
-      <div class="mt-10 pl-20 row preview-row">
-        <div class="badge-preview col span-12">
-          <ClusterProviderIcon
-            v-if="useCustomBadge"
-            :cluster="previewCluster"
-          />
-          <ClusterProviderIcon
-            v-else
-            :cluster="currentCluster"
-          />
-          <div class="cluster-name">
-            {{ currentCluster.nameDisplay }}
+          <div>
+            <ClusterIconMenu :cluster="previewCluster" />
+            <span>{{ clusterName }}</span>
+          </div>
+        </div>
+        <span class="badge-preview-separator" />
+        <div class="badge-preview-header">
+          <p> {{ t('clusterBadge.modal.previewHeader') }}</p>
+          <div
+            class="col span-12"
+          >
+            <ClusterProviderIcon
+              :cluster="{...previewCluster, badge: displayClusterPrevIcon}"
+            />
+            <div class="cluster-name">
+              {{ previewName }}
+            </div>
+            <ClusterBadge
+              v-if="useCustomComment"
+              :cluster="previewCluster"
+            />
           </div>
-          <ClusterBadge
-            v-if="useCustomBadge"
-            :cluster="previewCluster"
-          />
         </div>
       </div>
 
-      <div class="row mt-10">
-        <div class="col">
+      <div class="badge-customisation">
+        <!-- Badge abbreviation toggle & customisation -->
+        <div class="badge-customisation-badge">
           <Checkbox
-            v-model="useCustomBadge"
-            :label="t('clusterBadge.modal.checkbox')"
-            class="mt-10"
+            v-model="badgeAsIcon"
+            :label="t('clusterBadge.modal.badgeAsIcon')"
+
+            :tooltip="t('clusterBadge.modal.maxCharsTooltip')"
           />
-        </div>
-      </div>
 
-      <div class="options">
-        <div class="row mt-10">
-          <div class="col span-12">
-            <LabeledInput
-              v-model.trim="badgeDescription"
-              :mode="mode"
-              :label="t('clusterBadge.modal.description')"
-              :maxlength="32"
-              :required="true"
-            />
-          </div>
+          <LabeledInput
+            v-model.trim="letter"
+            :disabled="!badgeAsIcon"
+            class="badge-icon-text"
+            :label="t('clusterBadge.modal.iconText')"
+            :maxlength="3"
+          />
         </div>
 
-        <div class="row mt-10">
-          <div class="col span-12">
-            <ColorInput
-              v-model="badgeBgColor"
-              :mode="mode"
-              :default-value="badgeBgColor"
-              :label="t('clusterBadge.modal.badgeBgColor')"
-            />
-          </div>
-        </div>
+        <!-- Comment toggle & customisation section -->
+        <div>
+          <Checkbox
+            v-model="useCustomComment"
+            :label="t('clusterBadge.modal.checkbox')"
+          />
 
-        <div class="row mt-10">
-          <div class="col">
-            <Checkbox
-              v-model="badgeAsIcon"
-              :mode="mode"
-              :label="t('clusterBadge.modal.badgeAsIcon')"
-              class="mt-10"
-              :tooltip="t('clusterBadge.modal.maxCharsTooltip')"
-            />
-          </div>
+          <LabeledInput
+            v-model.trim="badgeComment"
+            :disabled="!useCustomComment"
+            :label="t('clusterBadge.modal.comment')"
+            :maxlength="32"
+          />
         </div>
-        <div class="row mt-10">
-          <div class="col">
-            <LabeledInput
-              v-model.trim="letter"
-              :disabled="!badgeAsIcon"
-              class="badge-icon-text"
-              :mode="mode"
-              :label="t('clusterBadge.modal.iconText')"
-              :maxlength="2"
-            />
-          </div>
+
+        <!-- Color toggle & customisation section -->
+        <div class="badge-customisation-color">
+          <Checkbox
+            v-model="badgeColorPicker"
+            :label="t('clusterBadge.modal.badgeBgColor')"
+          />
+          <ColorInput
+            v-model="badgeBgColor"
+            :disabled="!badgeColorPicker"
+            :default-value="badgeBgColor"
+          />
         </div>
       </div>
     </div>
@@ -239,67 +329,134 @@ export default {
   </Card>
 </template>
 <style lang='scss' scoped>
-  .prompt-badge {
-    margin: 0;
+.card-container {
+  padding: 1rem;
+}
+
+.badge-preview {
+  display: flex;
+  width: 100%;
+  gap: 40px;
+  padding: 10px 5px;
+  margin-bottom: 30px;
+  margin-top: 5px;
+  background: var(--body-bg);
+  border-radius: 5px;
+
+  p {
+    font-size: 11px;
+    font-weight: light;
+    padding: 5px 0;
+  }
 
-    .cluster-badge-body {
-      min-height: 50px;
+  &-sidenav {
+    display: flex;
+    flex-direction: column;
+
+    div {
       display: flex;
-      flex-direction: column;
-
-      .preview-row {
-        height: 32px;
-
-        .badge-preview {
-          align-items: center;
-          display: flex;
-          height: 32px;
-          white-space: nowrap;
-
-          .cluster-name {
-            margin: 0 10px;
-            font-size: 16px;
-          }
-
-          .cluster-badge-icon-preview {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 5px;
-            font-weight: bold;
-          }
-
-          .cluster-badge-preview {
-            cursor: default;
-            border-radius: 10px;
-            font-size: 12px;
-            padding: 2px 10px;
-          }
-        }
-      }
+      gap: 10px;
+      align-items: center;
+    }
+  }
+
+  &-separator {
+    display: flex;
+    border-left: 1px solid var(--border);
+    width: 2px;
+    height: 30px;
+    align-self: end;
+  }
+
+   &-header {
+    display: flex;
+    flex-direction: column;
 
-      ::v-deep .badge-icon-text input {
-        text-transform: uppercase;
+    div {
+      display: flex;
+      min-height: 32px;
+      align-items: center;
+
+      .cluster-badge {
+        min-height: auto;
       }
     }
   }
+}
 
-  .bottom {
+.prompt-badge {
+  margin: 0;
+
+  .cluster-badge-body {
+    min-height: 50px;
     display: flex;
     flex-direction: column;
-    flex: 1;
 
-    .banner {
-      margin-top: 0;
+    .cluster-name {
+      margin: 0 10px;
+      font-size: 16px;
+    }
+
+    .cluster-badge-icon-preview {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      font-weight: bold;
+    }
+
+    .cluster-badge-preview {
+      cursor: default;
+      border-radius: 10px;
+      font-size: 12px;
+      padding: 2px 10px;
+    }
+
+    ::v-deep .badge-icon-text input {
+      text-transform: uppercase;
     }
+  }
+}
+
+.badge-customisation {
+  display: flex;
+  gap: 10px;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 10px;
 
-    .buttons {
+    .color-input {
       display: flex;
-      justify-content: flex-end;
-      width: 100%;
+      padding: 6px 10px;
+      min-height: 61px;
     }
   }
 
+  &-color {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
+.bottom {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .banner {
+    margin-top: 0;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+}
 </style>