Simplify app toolbar

jsconfig.json

@@ -12,7 +12,8 @@
     "compilerOptions": {
         // "checkJs": true,
         "paths": {
-            "@/*": ["./src/*"]
+            "@/*": ["./src/*"],
+            "$tests/*": ["./tests/*"]
         }
     },
     "watchOptions": {

src/App.vue

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <v-defaults-provider :defaults="vuetifyDefaults">
     <v-app :class="`job_theme--${jobTheme}`">
-      <component :is="layout" :showSidebar="showSidebar">
+      <component :is="layout">
         <router-view/>
       </component>
     </v-app>
@@ -36,8 +36,6 @@ const route = useRoute()
 
 const layout = computed(() => `${route.meta.layout || DEFAULT_LAYOUT}-layout`)
 
-const showSidebar = computed(() => route.meta.showSidebar ?? true)
-
 const jobTheme = useJobTheme()
 
 const vuetifyDefaults = useDynamicVuetifyDefaults()

src/components/cylc/Toolbar.vue

@@ -28,15 +28,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <!-- burger button -->
     <v-btn
-      icon
+      v-if="drawerEnabled"
+      :icon="drawer ? icons.mdiMenuOpen : icons.mdiMenuClose"
       @click.stop="toggleDrawer"
       id="toggle-drawer"
-    >
-      <v-icon>{{ drawer ? icons.backBurger : icons.list }}</v-icon>
-    </v-btn>
+    />
     <!-- title -->
     <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
+      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary"
+      :class="drawerEnabled ? 'ml-0' : null"
     >
       {{ title }}
     </v-toolbar-title>
@@ -52,7 +52,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-btn
           id="workflow-mutate-button"
           v-command-menu="currentWorkflow"
-          :icon="icons.menu"
+          :icon="icons.mdiMicrosoftXboxControllerMenu"
           size="small"
           density="comfortable"
         />
@@ -184,7 +184,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       >
         <v-list>
           <v-list-item
-            v-for="[name, view] in views"
+            v-for="[name, view] in workflowViews"
             :id="`toolbar-add-${name}-view`"
             :key="name"
             @click="eventBus.emit('add-view', { name })"
@@ -212,6 +212,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <v-btn
       icon
       size="small"
+      data-cy="user-avatar-btn"
     >
       <v-avatar
         color="primary"
@@ -250,7 +251,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { inject } from 'vue'
+import { inject, computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { mapState } from 'vuex'
 import {
   mdiCog,
@@ -259,18 +261,18 @@ import {
   mdiPlay,
   mdiPlusBoxMultiple,
   mdiStop,
-  mdiViewList,
-  mdiBackburger,
   mdiAccount,
   mdiChevronDown,
   mdiArrowULeftTop,
   mdiInformationOutline,
+  mdiMenuOpen,
+  mdiMenuClose,
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { until } from '@/utils/reactivity'
 import { useDrawer, toolbarHeight } from '@/utils/toolbar'
 import WorkflowState from '@/model/WorkflowState.model'
-import graphql from '@/mixins/graphql'
+import { useGraphQL } from '@/mixins/graphql'
 import {
   mutationStatus
 } from '@/utils/aotf'
@@ -280,6 +282,7 @@ import gql from 'graphql-tag'
 import { eventBus } from '@/services/eventBus'
 import { upperFirst } from 'lodash-es'
 import WarningIcon from '@/components/cylc/WarningIcon.vue'
+import { workflowViews } from '@/views/views'
 
 const QUERY = gql(`
 subscription Workflow ($workflowId: ID) {
@@ -327,25 +330,40 @@ fragment PrunedDelta on Pruned {
 export default {
   name: 'Toolbar',
 
-  setup () {
-    const { drawer, toggleDrawer } = useDrawer()
+  setup (props) {
+    const route = useRoute()
+
+    const { variables, workflowName, workflowID } = useGraphQL()
+
+    /** Show workflow name as title if we are navigated to one, otherwise the generic route title. */
+    const title = computed(
+      () => workflowName.value || route.meta?.title || route.name
+    )
+
+    const { drawer, drawerEnabled, toggleDrawer } = useDrawer()
 
     const uisVersionInfo = inject('versionInfo')
     const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
 
     return {
       eventBus,
       drawer,
+      drawerEnabled,
       toggleDrawer,
       toolbarHeight,
+      variables,
+      title,
+      workflowName,
+      workflowID,
       uisFlowVersion,
+      workflowViews,
       icons: {
         add: mdiPlusBoxMultiple,
         hold: mdiPause,
         info: mdiInformationOutline,
-        list: mdiViewList,
-        backBurger: mdiBackburger,
-        menu: mdiMicrosoftXboxControllerMenu,
+        mdiMenuOpen,
+        mdiMenuClose,
+        mdiMicrosoftXboxControllerMenu,
         run: mdiPlay,
         stop: mdiStop,
         mdiCog,
@@ -361,26 +379,9 @@ export default {
   },
 
   mixins: [
-    graphql,
     subscriptionComponentMixin
   ],
 
-  props: {
-    /**
-     * All possible view component classes that can be rendered
-     *
-     * @type {Map<string, import('@/views/views.js').CylcView>}
-     */
-    views: {
-      type: Map,
-      default: () => new Map()
-    },
-    workflowName: {
-      type: String,
-      default: null
-    }
-  },
-
   data: () => ({
     expecting: {
       // store state from mutations in order to compute the "enabled" attrs
@@ -392,7 +393,6 @@ export default {
   }),
 
   computed: {
-    ...mapState('app', ['title']),
     ...mapState('user', ['user']),
     ...mapState('workflows', ['cylcTree']),
     query () {
@@ -408,7 +408,7 @@ export default {
     },
     currentWorkflow () {
       if (!this.workflowName) return null
-      return this.cylcTree.$index[this.workflowId]
+      return this.cylcTree.$index[this.workflowID]
     },
     isRunning () {
       return (

src/components/cylc/workspace/Lumino.vue

@@ -39,7 +39,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :id="id"
   >
     <component
-      :is="props.allViews.get(name).component"
+      :is="allViews.get(name).component"
       :workflow-name="workflowName"
       v-model:initial-options="views.get(id).initialOptions"
       :widgetID="id"
@@ -63,7 +63,7 @@ import { LuminoWidget } from '@/components/cylc/workspace/luminoWidget'
 import { BoxPanel, DockPanel, Widget } from '@lumino/widgets'
 import { watchWithControl } from '@/utils/reactivity'
 import { replacer, reviver } from '@/utils/json'
-import { useDefaultView } from '@/views/views'
+import { allViews, useDefaultView } from '@/views/views'
 import { eventBus } from '@/services/eventBus'
 import { useWorkspaceLayoutsCache } from '@/composables/cacheStorage'
 
@@ -91,15 +91,6 @@ const props = defineProps({
     type: String,
     required: true
   },
-  /**
-   * All possible view component classes that can be rendered
-   *
-   * @type {Map<string, import('@/views/views.js').CylcView>}
-   */
-  allViews: {
-    type: Map,
-    required: true
-  },
 })
 
 const emit = defineEmits([

src/layouts/Default.vue

@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <ConnectionStatus :is-offline="offline" />
-    <Drawer v-if="showSidebar" />
+    <Drawer v-if="drawerEnabled" />
     <CommandMenu/>
 
     <v-main>
-      <Toolbar v-if="showToolbar" />
+      <Toolbar />
       <alert />
       <div
         id="core-view"
@@ -35,79 +35,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   </div>
 </template>
 
-<script>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { mapState } from 'vuex'
+<script setup>
+import { computed, onErrorCaptured } from 'vue'
 import { store } from '@/store/index'
-import { allViews } from '@/views/views'
 import { Alert as AlertModel } from '@/model/Alert.model'
 import Alert from '@/components/core/Alert.vue'
 import Drawer from '@/components/cylc/Drawer.vue'
 import Toolbar from '@/components/cylc/Toolbar.vue'
-import { toolbarHeight } from '@/utils/toolbar'
+import { toolbarHeight, useDrawer } from '@/utils/toolbar'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus.vue'
 import CommandMenu from '@/components/cylc/commandMenu/Menu.vue'
 
-export default {
-  name: 'Default',
+const { drawerEnabled } = useDrawer()
 
-  setup () {
-    const route = useRoute()
-    /**
-     * Views that display workflows. For these views, we do not
-     * want to display the default Toolbar—the Workspace view
-     * has its own Toolbar that communicates with the Workflow
-     * component (e.g. the Workflow Toolbar owns a button that
-     * triggers the action to add a new Tree or Table View, so the events
-     * are passed down from the parent Workflow View).
-     */
-    const workflowViews = [
-      ...allViews.keys(),
-      'Workspace',
-    ]
-
-    /** Whether to show app toolbar (not the workspace view toolbar). */
-    const showToolbar = computed(
-      () => !workflowViews.includes(route.name)
-    )
-    const coreViewStyle = computed(() => ({
-      marginTop: '0px',
-      height: showToolbar.value ? `calc(100vh - ${toolbarHeight}px)` : '100vh'
-    }))
-
-    return {
-      showToolbar,
-      coreViewStyle,
-    }
-  },
-
-  components: {
-    ConnectionStatus,
-    CommandMenu,
-    Alert,
-    Drawer,
-    Toolbar
-  },
-
-  props: {
-    showSidebar: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
+const coreViewStyle = {
+  height: `calc(100vh - ${toolbarHeight}px)`
+}
 
-  computed: {
-    ...mapState(['offline'])
-  },
+const offline = computed(() => store.state.offline)
 
-  errorCaptured (error, vm, info) {
-    if (import.meta.env.MODE !== 'production') {
-      store.dispatch('setAlert', new AlertModel(error, 'error'))
-    }
-    // Stop error propagating further:
-    return false
+onErrorCaptured((error, vm, info) => {
+  if (import.meta.env.MODE !== 'production') {
+    store.dispatch('setAlert', new AlertModel(error, 'error'))
   }
-}
+  // Stop error propagating further:
+  return false
+})
 </script>

src/layouts/Empty.vue

@@ -20,13 +20,3 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <slot />
   </v-main>
 </template>
-
-<script>
-export default {
-  name: 'Empty'
-}
-</script>
-
-<style scoped>
-
-</style>