@appscode/design-system 1.0.43-alpha.167 → 1.0.43-alpha.168

package/package.json

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

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

@@ -2,37 +2,47 @@
   <div class="ac-preview is-active is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div class="ac-preview-body mt-0 pt-20">
-        <div
-          v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
-          class="left-content"
-        >
-          <div class="ac-files pt-0">
-            <ul v-if="!isPreviewLoading">
-              <li
-                v-for="(previewYaml, idx) in filteredYamls"
-                :key="previewYaml.name + idx"
-                :class="{ 'is-active': activeKey === previewYaml.uid }"
-              >
-                <a @click.prevent="setActivePreview(previewYaml.uid)">
-                  <span>
-                    <img
-                      src="~@appscode/design-system-images/icons/file-icon.svg"
-                      alt=""
-                    />
-                  </span>
-                  <span>{{ previewYaml.name }}</span>
-                </a>
-              </li>
-            </ul>
-            <sidebar-loader v-else />
+      <div 
+        class="ac-preview-body mt-0 pt-20"
+        :class="{ 'is-justify-content-center': isYamlsEmpty && !isPreviewLoading }"
+      >
+        <strong v-if="isYamlsEmpty && !isPreviewLoading">
+          No Data Available
+          <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+        </strong>
+        <template v-else>
+          <div
+            v-if="!isPreviewLoading && previewYamls"
+            class="left-content"
+          >
+            <div class="ac-files pt-0">
+              <ul v-if="!isPreviewLoading">
+                <li
+                  v-for="(previewYaml, idx) in filteredYamls"
+                  :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }"
+                  :title="previewYaml.name"
+                >
+                  <a @click.prevent="setActivePreview(previewYaml.uid)">
+                    <span>
+                      <img
+                        src="~@appscode/design-system-images/icons/file-icon.svg"
+                        alt=""
+                      />
+                    </span>
+                    <span>{{ previewYaml.name }}</span>
+                  </a>
+                </li>
+              </ul>
+              <sidebar-loader v-else />
+            </div>
           </div>
-        </div>
-        <div class="right-content">
           <div class="right-content">
             <resource-loader v-if="isPreviewLoading" />
+            <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
+            <strong v-else-if="hideValue"> *************** </strong>
             <editor
-              v-else-if="!isPreviewLoading && !hideValue"
+              v-else
               v-model="activeFile.content"
               :original-value="originalValue"
               :language="activeFile.format"
@@ -40,9 +50,8 @@
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
             />
-            <span v-else> *************** </span>
           </div>
-        </div>
+        </template>
       </div>
     </div>
   </div>
@@ -132,6 +141,15 @@ export default defineComponent({
         return element.uid === this.activeKey;
       });
       return val === undefined ? false : true;
+    },
+    isYamlsEmpty(){
+      return this.filteredYamls.length === 0; 
+    },
+    isYamlsNotSelected(){
+      const val = this.filteredYamls.find(element => {
+        return element.uid === this.activeKey;
+      })
+      return val === undefined;
     }
   },
   methods: {

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

@@ -9,6 +9,7 @@
         <ac-button
           modifier-classes="is-square is-primary"
           :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
+          :disabled="previewYamls.length === 0"
           @click.prevent="toggleHideValue = !toggleHideValue"
         />
       </header-item>