Merge pull request #237 from lukashornych/235-global-status-bar-support

feat(#235): global status bar support with editor and subject path statuses

documentation/developer/guidelines.md

@@ -31,13 +31,13 @@ export function useService(): Service {
 }
 ```
 
-For component tree dependency injection a `dependecies.ts` file should be created where the components for a feature are 
+For component tree dependency injection a `dependecies.ts` file should be created where the components for a feature are
 places with proper injection keys and `provideX` and `injectX` methods so that the keys are not spread across components.
 
 ### UI
 
 Complex components that access data should adhere to the [Model-View-ViewModel architecture](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel),
-preferably in conjunction with the [mediator pattern](https://en.wikipedia.org/wiki/Mediator_pattern) in form of 
+preferably in conjunction with the [mediator pattern](https://en.wikipedia.org/wiki/Mediator_pattern) in form of
 custom service for the component to abstract access to generic services.
 
 ![Component-service hierarchy](assets/component-service-hierarchy.svg)
@@ -56,13 +56,15 @@ VConfirmDialogButton
 
 ##### Tab windows
 
+TODO document approach to creating new tab window types and available tooling
+
 Use `VTabToolbar` for toolbars within tab window content.
 
 ##### Lists
 
 Use `VListItemDivider` for delimiting list items in **each** non-menu lists.
 
-Use `VListItemLazyIterator` if you need client-side with "load next" pagination for lists. Usually useful for 
+Use `VListItemLazyIterator` if you need client-side with "load next" pagination for lists. Usually useful for
 optimizing GUI rendering for lots of components.
 
 ##### Expansion panels
@@ -111,13 +113,13 @@ The `master` branch is for the released versions of the evitaLab only. The `dev`
 code is at, and to where the feature branches are merged into. Finally, feature branches are created for each issues
 to fix a bug or create new feature. These are then merged into the `dev` branch for eventual release.
 
-When fixing a bug or creating new feature, **always** create new feature branch from the `dev` branch. Or for hotfixes, 
+When fixing a bug or creating new feature, **always** create new feature branch from the `dev` branch. Or for hotfixes,
 create new bug fixing branch from the `master`, but such branch cannot do more than fix a bug in non-breaking way.
 
 ### Commits
 
-We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for Git commit messages and pull requests 
-for 2 reasons: 
+We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for Git commit messages and pull requests
+for 2 reasons:
 
 - the commits are more transparent
 - we have GitHub CI/CD hooked onto it, to automatically build and version the evitaLab

package.json

@@ -18,7 +18,7 @@
     "@connectrpc/connect-web": "^1.4.0",
     "@connectrpc/protoc-gen-connect-es": "^1.4.0",
     "@ddietr/codemirror-themes": "^1.4.2",
-    "@lukashornych/codemirror-lang-evitaql": "1.2.5",
+    "@lukashornych/codemirror-lang-evitaql": "1.3.0",
     "@mdi/font": "7.0.96",
     "@types/dompurify": "^3.0.4",
     "@types/keymaster": "^1.6.33",

src/modules/backup-viewer/components/BackupViewer.vue

@@ -14,6 +14,13 @@ import TaskList from '@/modules/task-viewer/components/TaskList.vue'
 import BackupList from '@/modules/backup-viewer/components/BackupList.vue'
 import BackupCatalogButton from '@/modules/backup-viewer/components/BackupCatalogButton.vue'
 import RestoreLocalBackupFileButton from '@/modules/backup-viewer/components/RestoreLocalBackupFileButton.vue'
+import { TabComponentExpose } from '@/modules/workspace/tab/model/TabComponentExpose'
+import { SubjectPath } from '@/modules/workspace/status-bar/model/subject-path-status/SubjectPath'
+import {
+    ConnectionSubjectPath
+} from '@/modules/connection/workspace/status-bar/model/subject-path-status/ConnectionSubjectPath'
+import { SubjectPathItem } from '@/modules/workspace/status-bar/model/subject-path-status/SubjectPathItem'
+import { BackupViewerTabDefinition } from '@/modules/backup-viewer/model/BackupViewerTabDefinition'
 
 const shownTaskStates: TaskState[] = [TaskState.WaitingForPrecondition, TaskState.Running, TaskState.Queued, TaskState.Failed]
 const shownTaskTypes: string[] = [backupTaskName, restoreTaskName]
@@ -22,11 +29,22 @@ const { t } = useI18n()
 
 const props = defineProps<TabComponentProps<BackupViewerTabParams, VoidTabData>>()
 const emit = defineEmits<TabComponentEvents>()
+defineExpose<TabComponentExpose>({
+    path(): SubjectPath | undefined {
+        return new ConnectionSubjectPath(
+            props.params.connection,
+            [SubjectPathItem.significant(
+                BackupViewerTabDefinition.icon(),
+                t('backupViewer.title')
+            )]
+        )
+    }
+})
 
 const taskListRef = ref<typeof TaskList>()
 const backupListRef = ref<typeof BackupList>()
 
-const path: List<string> = List([t('backupViewer.title')])
+const title: List<string> = List.of(t('backupViewer.title'))
 
 const backupsInPreparationPresent = ref<boolean>(false)
 
@@ -44,7 +62,7 @@ emit('ready')
 
 <template>
     <div class="backup-viewer">
-        <VTabToolbar prepend-icon="mdi-cloud-download-outline" :path="path">
+        <VTabToolbar :prepend-icon="BackupViewerTabDefinition.icon()" :title="title">
             <template #append>
                 <VBtn icon @click="reloadBackups">
                     <VIcon>mdi-refresh</VIcon>

src/modules/backup-viewer/model/BackupViewerTabDefinition.ts

@@ -5,14 +5,19 @@ import { BackupViewerTabParams } from '@/modules/backup-viewer/model/BackupViewe
 import BackupViewer from '@/modules/backup-viewer/components/BackupViewer.vue'
 
 export class BackupViewerTabDefinition extends TabDefinition<BackupViewerTabParams, VoidTabData> {
+
     constructor(title: string, params: BackupViewerTabParams) {
         super(
             undefined,
             title,
-            'mdi-cloud-download-outline',
+            BackupViewerTabDefinition.icon(),
             markRaw(BackupViewer as DefineComponent<any, any, any>),
             params,
             new VoidTabData()
         )
     }
+
+    static icon(): string {
+        return 'mdi-cloud-download-outline'
+    }
 }

src/modules/backup-viewer/service/BackupViewerTabFactory.ts

@@ -6,6 +6,7 @@ import { BackupViewerTabDefinition } from "../model/BackupViewerTabDefinition";
 import { TabParamsDto } from "@/modules/workspace/tab/model/TabParamsDto";
 import { BackupViewerTabParamsDto } from "../model/BackupViewerTabParamsDto";
 import { BackupViewerTabParams } from '@/modules/backup-viewer/model/BackupViewerTabParams'
+import { i18n } from '@/vue-plugins/i18n'
 
 export const backupsTabFactoryInjectionKey: InjectionKey<BackupViewerTabFactory> = Symbol('BackupsTabFactory')
 
@@ -31,9 +32,12 @@ export class BackupViewerTabFactory {
         )
     }
 
-    // todo lho i18n
     private constructTitle(connection: Connection): string {
-        return `Catalog backups [${connection.name}]`
+        return i18n.global.t(
+            'backupViewer.definition.title',
+            { connectionName: connection.name }
+        )
+
     }
 
     private restoreTabParamsFromSerializable(json: TabParamsDto): BackupViewerTabParams {

src/modules/base/component/VTabToolbar.vue

@@ -4,6 +4,7 @@
  */
 import { computed } from 'vue'
 import { List } from 'immutable'
+import VTabToolbarTitle from '@/modules/base/component/VTabToolbarTitle.vue'
 
 type Flag = {
     title: string,
@@ -12,7 +13,7 @@ type Flag = {
 
 const props = withDefaults(defineProps<{
     prependIcon: string,
-    path: List<string>,
+    title: List<string>,
     flags?: List<string>
 }>(), {
     flags: () => List()
@@ -46,11 +47,8 @@ const normalizedFlags = computed<List<Flag>>(() => {
         />
 
         <VToolbarTitle class="ml-0 font-weight-bold">
-            <div style="display: flex">
-                <VBreadcrumbs
-                    :items="path.toArray()"
-                    class="pl-0 pr-0 pt-0 pb-0 mr-4"
-                />
+            <div class="tab-toolbar__title">
+                <VTabToolbarTitle :title="title" />
 
                 <VChipGroup v-if="normalizedFlags">
                     <VChip
@@ -76,5 +74,11 @@ const normalizedFlags = computed<List<Flag>>(() => {
 <style lang="scss" scoped>
 .tab-toolbar {
     z-index: 100;
+
+    &__title {
+        display: flex;
+        column-gap: 1rem;
+        align-items: center;
+    }
 }
 </style>

src/modules/base/component/VTabToolbarTitle.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Immutable from 'immutable'
+
+const props = defineProps<{
+    title: Immutable.List<string>
+}>()
+</script>
+
+<template>
+    <div class="tab-toolbar-title">
+        <template v-for="(item, index) in title" :key="index">
+            <span
+                v-if="index < title.size - 1"
+                class="text-subtitle-1 text-disabled"
+            >
+                {{ item }}
+            </span>
+            <span v-else>
+                {{ item }}
+            </span>
+
+            <VIcon
+                v-if="(index + 1) < title.size"
+                icon="mdi-chevron-right"
+                size="16"
+                class="mx-1"
+            />
+        </template>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.tab-toolbar-title {
+    display: flex;
+    align-items: center;
+}
+</style>

src/modules/code-editor/component/VInlineQueryEditor.vue

@@ -23,8 +23,11 @@ import { computed, ref } from 'vue'
 import { EditorView } from 'codemirror'
 import { Keymap, useKeymap } from '@/modules/keymap/service/Keymap'
 import { Command } from '@/modules/keymap/model/Command'
+import { workspaceStatusBarIntegration } from '@/modules/code-editor/extension/workspaceStatusBarIntegration'
+import { useWorkspaceService, WorkspaceService } from '@/modules/workspace/service/WorkspaceService'
 
 const keymap: Keymap = useKeymap()
+const workspaceService: WorkspaceService = useWorkspaceService()
 
 const props = withDefaults(
     defineProps<{
@@ -71,6 +74,7 @@ const extensions: Extension[] = [
     ]),
     dracula,
     EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr),
+    workspaceStatusBarIntegration(workspaceService),
     ...props.additionalExtensions
 ]
 

src/modules/code-editor/component/VPreviewEditor.vue

@@ -9,6 +9,10 @@ import { basicSetup, EditorView } from 'codemirror'
 import { dracula } from '@ddietr/codemirror-themes/dracula.js'
 import { ref } from 'vue'
 import { ViewUpdate } from '@codemirror/view'
+import { useWorkspaceService, WorkspaceService } from '@/modules/workspace/service/WorkspaceService'
+import { workspaceStatusBarIntegration } from '@/modules/code-editor/extension/workspaceStatusBarIntegration'
+
+const workspaceService: WorkspaceService = useWorkspaceService()
 
 const props = withDefaults(
     defineProps<{
@@ -29,6 +33,7 @@ const extensions: Extension[] = [
     basicSetup,
     dracula,
     EditorState.readOnly.of(true),
+    workspaceStatusBarIntegration(workspaceService),
     ...props.additionalExtensions
 ]