@appscode/design-system 2.6.14 → 2.6.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.6.14",
+  "version": "2.6.15",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/types/cluster.ts

@@ -4,3 +4,11 @@ export interface SelectedClusterType {
   provider: string;
   location: string;
 }
+
+export interface SwitchCluster {
+  name: string;
+  displayName: string;
+  provider: string;
+  location?: string;
+  status?: string;
+}

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
-import type { SelectedClusterType } from "../../types/cluster";
+import type { SwitchCluster } from "../../types/cluster";
+import Badge from "../badge-tags/Badge.vue";
 
 const Multiselect = defineAsyncComponent(() => import("vue-multiselect"));
 
 interface Props {
   sidebarCollapsed?: boolean;
   mouseHover?: boolean;
-  clusterOptions?: Array<SelectedClusterType>;
+  clusterOptions?: Array<SwitchCluster>;
   modelValue?: string;
 }
 
@@ -20,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 
-const selectedCluster = ref<SelectedClusterType | null>(null);
+const selectedCluster = ref<SwitchCluster | null>(null);
 const selectedClusterName = ref<null | string>(null);
 
 const getProviderIcon = (provider: string) => {
@@ -100,15 +101,23 @@ watch(
       </div>
     </template>
     <template #option="props">
-      <div class="is-flex is-align-items-center">
+      <div class="is-flex is-align-items-center is-fullwidth" :class="{ 'is-disabled': props.option?.$isDisabled }">
         <img
           class="mr-15"
           :src="getProviderIcon(props.option.provider)"
           onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         />
-        <div>
-          <p>{{ props.option.displayName }}</p>
+        <div class="is-fullwidth">
+          <p class="is-flex is-justify-content-space-between is-fullwidth">
+            <span>{{ props.option.displayName }}</span>
+            <badge
+              v-if="props.option?.$isDisabled"
+              modifierClasses="is-warning is-outlined"
+              :label="props.option?.status || 'Not Available'"
+            >
+            </badge>
+          </p>
           <p class="location">{{ props.option.location }}</p>
         </div>
       </div>

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -49,7 +49,7 @@ watch(
         <img :src="icon" alt="icon" />
       </span>
       <strong>{{ title }}</strong>
-      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel">NEW</span>
+      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel ml-8">NEW</span>
     </router-link>
   </li>
 </template>