Merge pull request #35 from lukashornych/dev

UX improvements and bugfixes

src/components/base/VLoadingCircular.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+/**
+ * Pre-configured loading spinner icon
+ */
+
+const props = withDefaults(defineProps<{
+    size?: number
+}>(), {
+    size: 24
+})
+</script>
+
+<template>
+    <VProgressCircular
+        indeterminate
+        :size="size"
+        width="3"
+    />
+</template>
+
+<style lang="scss" scoped>
+</style>

src/components/base/VTreeViewItem.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import VLoadingCircular from '@/components/base/VLoadingCircular.vue'
 
 export interface Props {
     openable?: boolean,
     isOpen?: boolean,
     prependIcon: string,
+    loading?: boolean,
     actions?: object[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
     openable: false,
     isOpen: false,
+    loading: false,
     actions: () => []
 })
 
@@ -47,11 +50,16 @@ function openActions(): void {
 
             </VIcon>
 
-            <VIcon>
+            <VLoadingCircular v-if="loading" />
+            <VIcon v-else>
                 {{ prependIcon }}
             </VIcon>
             <span class="text-truncate">
-                <slot />
+                <slot>
+                    <span class="text-disabled">
+                        No items found
+                    </span>
+                </slot>
             </span>
             <VMenu
                 v-if="actions && actions.length > 0"

src/components/base/VTreeViewItemEmpty.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <VListItem>
+        <span class="pl-8 text-disabled">
+            No items found
+        </span>
+    </VListItem>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/components/lab/editor/LabEditorLoadingScreen.vue

@@ -3,13 +3,13 @@
  * Generic loading screen to display while a tab component is being initialized.
  */
 
-import VLoadingIcon from '@/components/base/VLoadingIcon.vue'
+import VLoadingCircular from '@/components/base/VLoadingCircular.vue'
 </script>
 
 <template>
     <div class="loading-screen">
         <div class="loading-screen-info">
-            <VLoadingIcon width="3rem" height="3rem"/>
+            <VLoadingCircular :size="48" />
             <span>Loading, please wait ...</span>
         </div>
     </div>

src/components/lab/editor/data-grid/LabEditorDataGrid.vue

@@ -21,12 +21,13 @@ import CodemirrorOneLine from '@/components/base/CodemirrorOneLine.vue'
 import { QueryLanguage } from '@/model/lab'
 import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 
 const dataGridConsoleService: DataGridConsoleService = useDataGridConsoleService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<DataGridConsoleParams, DataGridConsoleData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 // static data
 const path = ref<string[]>([
@@ -99,7 +100,7 @@ const propertyDetailValue = ref<string>('')
 
 const initialized = ref<boolean>(false)
 
-
+emit('ready')
 onBeforeMount(() => {
     // note: we can't use async/await here, because that would make this component async which currently doesn't seem to work
     // properly in combination with dynamic <component> rendering and tabs

src/components/lab/explorer/LabExplorerCatalogItem.vue

@@ -12,6 +12,7 @@ import { SchemaViewerRequest } from '@/model/editor/schema-viewer-request'
 import { CatalogSchemaPointer } from '@/model/editor/schema-viewer'
 import { Catalog, CatalogSchema } from '@/model/evitadb'
 import { Toaster, useToaster } from '@/services/editor/toaster'
+import VTreeViewItemEmpty from '@/components/base/VTreeViewItemEmpty.vue'
 
 enum ActionType {
     OpenEvitaQLConsole = 'open-evitaql-console',
@@ -63,16 +64,20 @@ const connection = inject('connection') as EvitaDBConnection
 
 const catalogSchema = ref<CatalogSchema>()
 provide<Ref<CatalogSchema | undefined>>('catalogSchema', catalogSchema)
+const loading = ref<boolean>(false)
 
 async function loadCatalogSchema(): Promise<void> {
     if (catalogSchema.value !== undefined || props.catalog.corrupted) {
         return
     }
+
+    loading.value = true
     try {
         catalogSchema.value = await labService.getCatalogSchema(connection, props.catalog.name)
     } catch (e: any) {
         toaster.error(e)
     }
+    loading.value = false
 }
 
 function handleAction(action: string) {
@@ -126,6 +131,7 @@ function handleAction(action: string) {
                 openable
                 :is-open="isOpen"
                 prepend-icon="mdi-book-open"
+                :loading="loading"
                 :actions="actions"
                 @click="loadCatalogSchema"
                 @click:action="handleAction"
@@ -149,11 +155,16 @@ function handleAction(action: string) {
         </template>
 
         <div v-if="!catalog.corrupted && catalogSchema !== undefined">
-            <LabExplorerCollectionItem
-                v-for="entitySchema in Object.values(catalogSchema.entitySchemas)"
-                :key="entitySchema.name"
-                :entity-schema="entitySchema"
-            />
+            <template v-if="Object.values(catalogSchema.entitySchemas).length > 0">
+                <LabExplorerCollectionItem
+                    v-for="entitySchema in Object.values(catalogSchema.entitySchemas)"
+                    :key="entitySchema.name"
+                    :entity-schema="entitySchema"
+                />
+            </template>
+            <template v-else>
+                <VTreeViewItemEmpty />
+            </template>
         </div>
     </VListGroup>
 </template>

src/components/lab/explorer/LabExplorerConnectionItem.vue

@@ -11,6 +11,7 @@ import LabExplorerConnectionRemoveDialog from './LabExplorerConnectionRemoveDial
 import { GraphQLConsoleRequest } from '@/model/editor/graphql-console-request'
 import { GraphQLInstanceType } from '@/model/editor/graphql-console'
 import { EditorService, useEditorService } from '@/services/editor/editor.service'
+import VTreeViewItemEmpty from '@/components/base/VTreeViewItemEmpty.vue'
 
 enum ActionType {
     OpenGraphQLSystemAPIConsole = 'open-graphql-system-api-console',
@@ -55,16 +56,20 @@ if (!labService.isReadOnly() && !props.connection.preconfigured) {
 }
 const removeConnectionDialogOpen = ref<boolean>(false)
 const catalogs = ref<Catalog[]>()
+const loading = ref<boolean>(false)
 
 async function loadCatalogs(): Promise<void> {
     if (catalogs.value !== undefined) {
         return
     }
+
+    loading.value = true
     try {
         catalogs.value = await labService.getCatalogs(props.connection)
     } catch (e: any) {
         toaster.error(e)
     }
+    loading.value = false
 }
 
 function handleAction(action: string, payload?: any) {
@@ -97,6 +102,7 @@ function handleAction(action: string, payload?: any) {
                 openable
                 :is-open="isOpen"
                 prepend-icon="mdi-server"
+                :loading="loading"
                 :actions="actions"
                 @click="loadCatalogs"
                 @click:action="handleAction"
@@ -108,11 +114,16 @@ function handleAction(action: string, payload?: any) {
         <div
             v-if="catalogs !== undefined"
         >
-            <LabExplorerCatalogItem
-                v-for="catalog in catalogs"
-                :key="catalog.name"
-                :catalog="catalog"
-            />
+            <template v-if="catalogs.length > 0">
+                <LabExplorerCatalogItem
+                    v-for="catalog in catalogs"
+                    :key="catalog.name"
+                    :catalog="catalog"
+                />
+            </template>
+            <template v-else>
+                <VTreeViewItemEmpty />
+            </template>
         </div>
 
         <LabExplorerConnectionRemoveDialog

src/store/modules/lab.ts

@@ -64,22 +64,24 @@ const state = (): LabState => {
         preconfiguredConnections = (JSON.parse(preconfiguredConnectionsCookie) as Array<any>)
                 .map(connection => EvitaDBConnection.fromJson(connection, true))
     }
+    // automatic demo connection configuration for easier development
+    if (import.meta.env.DEV) {
+        preconfiguredConnections.push(new EvitaDBConnection(
+            'demo',
+            'Demo',
+            false,
+            'https://demo.evitadb.io/lab/api',
+            'https://demo.evitadb.io:5555/rest',
+            'https://demo.evitadb.io:5555/gql'
+        ))
+    }
+
     // load user-defined connections from local storage
     const userConnections: EvitaDBConnection[] = storage.getItem(
         LabStorageVersionedItemType.Connections,
         (item: string) => JSON.parse(item) as EvitaDBConnection[]
     ) as EvitaDBConnection[]
 
-    // demo connection for easier debugging
-    // userConnections.push(new EvitaDBConnection(
-    //     'demo',
-    //     'Demo',
-    //     false,
-    //     'https://demo.evitadb.io/lab/api',
-    //     'https://demo.evitadb.io:5555/rest',
-    //     'https://demo.evitadb.io:5555/gql'
-    // ))
-
     return {
         storage,
         readOnly,