@appscode/design-system 1.0.43-alpha.72 → 1.0.43-alpha.76

package/base/utilities/dark-theme.scss

@@ -15,7 +15,7 @@ $dark-bg-light: var(--dark-bg-light);
   --ac-white-light: #3f3f3f;
   --ac-white-lighter: #2e323c;
   --ac-label-text: #8c8c8c;
-  --ac-bg-light-gray: #2e323c;
+  --ac-bg-light-gray: #252830;
 
   --ac-color-value: hsl(
     var(--font-hsl-hue),

package/components/_ac-options.scss

@@ -56,13 +56,14 @@
   }
 
   .options-items {
-    box-shadow: $ac-shadow-1;
     border-radius: 4px;
     position: absolute;
     z-index: 99;
     background-color: $ac-white;
     min-width: 160px;
     top: 30px;
+    padding: 5px 0;
+    border: 1px solid $ac-white-light;
 
     li {
       .list-button {
@@ -78,8 +79,8 @@
         display: block;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary;
         }
 
         span {
@@ -93,14 +94,14 @@
 
       a {
         font-size: $font-size-small;
-        padding: 10px 30px;
+        padding: 10px 15px;
         display: block;
         text-decoration: none !important;
         color: $ac-color-text !important;
 
         &:hover {
-          background-color: $ac-primary;
-          color: $ac-white !important;
+          background-color: $ac-bg-light-gray;
+          color: $ac-primary !important;
         }
       }
     }

package/package.json

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

package/vue-components/v2/editor/Editor.vue

@@ -19,6 +19,7 @@
         },
         theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
     />
@@ -34,6 +35,7 @@
         },
         theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
@@ -72,7 +74,11 @@ export default {
     editorTheme: {
       type: String,
       default: ""
-    }
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    },
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),

package/vue-components/v2/modal/Modal.vue

@@ -17,6 +17,7 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="require('@/assets/images/icons/close-icon.svg')"
                 @click.stop="destroyModal"
               />
@@ -36,7 +37,10 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -62,6 +66,10 @@ export default {
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    }
   },
 
   components: {
@@ -102,6 +110,7 @@ export default {
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      alt=""
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="uid"
+    :options="options"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    username: {
+      type: String,
+      default: "",
+    },
+    imagePath: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      clusters: [],
+      options: [],
+    };
+  },
+
+  computed: {
+    selectClusterOptions() {
+      return this.clusters
+        .filter(
+          (cluster) =>
+            cluster.status.phase === "Connected" ||
+            cluster.status.phase === "PrivateConnected"
+        )
+        .map((cluster) => {
+          return {
+            name: cluster.spec.name,
+            displayName: cluster.spec.displayName,
+            provider: cluster.spec.provider,
+            uid: cluster.spec.uid,
+            location: cluster.spec.location,
+          };
+        });
+    },
+  },
+
+  methods: {
+    async checkStatus(clusterName) {
+      try {
+        await this.$axios.get(
+          `/clusters/${this.username}/${clusterName}/status`
+        );
+        return true;
+      } catch (err) {
+        return false;
+      }
+    },
+    async getClusters() {
+      if (this.username) {
+        const url = `/clusters/${this.username}`;
+
+        try {
+          const resp = await this.$axios.get(url);
+          this.clusters = (resp.data && resp.data.items) || [];
+
+          // preselect the cluster
+          const selectedCluster = this.clusters.find(
+            (cluster) => cluster.spec.name === this.$route.params.cluster
+          );
+          this.selectedCluster = {
+            name: selectedCluster.spec.name,
+            displayName: selectedCluster.spec.displayName,
+            provider: selectedCluster.spec.provider,
+            uid: selectedCluster.spec.uid,
+            location: selectedCluster.spec.location,
+          };
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    },
+
+    getProviderIcon(provider) {
+      return this.imagePath[provider] || this.imagePath["default"];
+    },
+  },
+
+  created() {
+    this.getClusters();
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.selectedCluster = n;
+      },
+    },
+    selectClusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        this.options = [];
+        if (list) {
+          list.forEach(async (item) => {
+            const resp = await this.checkStatus(item.name);
+            if (resp) this.options.push(item);
+          });
+        }
+      },
+    },
+  },
+};
+</script>

package/vue-components/v3/editor/Editor.vue

@@ -20,6 +20,7 @@
         },
         theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
     />
@@ -35,6 +36,7 @@
         },
         theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
@@ -74,7 +76,11 @@ export default defineComponent({
     editorTheme: {
       type: String,
       default: ""
-    }
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    },
   },
 
   emits: ["update:modelValue"],

package/vue-components/v3/modal/Modal.vue

@@ -17,6 +17,7 @@
             <header-item>
               <ac-button
                 modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
               />
@@ -36,7 +37,10 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>
@@ -64,6 +68,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   emits: ["closemodal"],
 
@@ -116,6 +124,7 @@ export default defineComponent({
       document.addEventListener("keydown", this.onKeyDown);
     },
     destroyModal() {
+      if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      alt=""
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="uid"
+    :options="options"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    username: {
+      type: String,
+      default: "",
+    },
+    imagePath: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      clusters: [],
+      options: [],
+    };
+  },
+
+  computed: {
+    selectClusterOptions() {
+      return this.clusters
+        .filter(
+          (cluster) =>
+            cluster.status.phase === "Connected" ||
+            cluster.status.phase === "PrivateConnected"
+        )
+        .map((cluster) => {
+          return {
+            name: cluster.spec.name,
+            displayName: cluster.spec.displayName,
+            provider: cluster.spec.provider,
+            uid: cluster.spec.uid,
+            location: cluster.spec.location,
+          };
+        });
+    },
+  },
+
+  methods: {
+    async checkStatus(clusterName) {
+      try {
+        await this.$axios.get(
+          `/clusters/${this.username}/${clusterName}/status`
+        );
+        return true;
+      } catch (err) {
+        return false;
+      }
+    },
+    async getClusters() {
+      if (this.username) {
+        const url = `/clusters/${this.username}`;
+
+        try {
+          const resp = await this.$axios.get(url);
+          this.clusters = (resp.data && resp.data.items) || [];
+
+          // preselect the cluster
+          const selectedCluster = this.clusters.find(
+            (cluster) => cluster.spec.name === this.$route.params.cluster
+          );
+          this.selectedCluster = {
+            name: selectedCluster.spec.name,
+            displayName: selectedCluster.spec.displayName,
+            provider: selectedCluster.spec.provider,
+            uid: selectedCluster.spec.uid,
+            location: selectedCluster.spec.location,
+          };
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    },
+
+    getProviderIcon(provider) {
+      return this.imagePath[provider] || this.imagePath["default"];
+    },
+  },
+
+  created() {
+    this.getClusters();
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.selectedCluster = n;
+      },
+    },
+    selectClusterOptions: {
+      deep: true,
+      immediate: true,
+      async handler(list) {
+        this.options = [];
+        if (list) {
+          list.forEach(async (item) => {
+            const resp = await this.checkStatus(item.name);
+            if (resp) this.options.push(item);
+          });
+        }
+      },
+    },
+  },
+});
+</script>