Merge pull request #2056 from MetRonnie/tidy

MetRonnie · web-flow · commit cd586af67d1b · 2025-03-10T16:03:23.000Z
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
@@ -105,46 +105,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               class="text-grey d-flex flex-nowrap flex-row align-center"
               v-if="jobMessageOutputs && jobMessageOutputs.length > 0"
             >
-              <!--
-                We had a tricky bug in #530 due to the :key here. In summary, the list
-                that is backing this component changes. It contains zero or more entries,
-                up to N (5 at the time of writing).
-                Initially we used `:key=customOutput.id` here. But Vue tried to avoid
-                changing the DOM elements, which caused some elements to be out of order
-                in the final rendered UI (as Vue was trying to optimize and keep the
-                DOM elements in-place whenever possible).
-                That behaviour is not deterministic, so sometimes you would have the list
-                in order. The fix was to use a key that combines a string with the list
-                iteration `index` (the `:key` value must be unique, so we used output-chip
-                prefix).
-                @see https://github.com/cylc/cylc-ui/pull/530#issuecomment-781076619
-              -->
-              <v-tooltip
-                v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
-                :key="`output-chip-${index}`"
-                :activator="null"
+              <v-defaults-provider
+                :defaults="{
+                  VChip: { size: 'small', density: 'comfortable', class: 'ml-2' }
+                }"
               >
-                <template v-slot:activator="{ props }">
-                  <v-chip
-                    v-bind="props"
-                    :class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
-                    class="ml-2 message-output"
-                    size="small"
-                  >
-                    {{ customOutput.label }}
-                  </v-chip>
-                </template>
-                <span>{{ customOutput.message }}</span>
-              </v-tooltip>
-              <v-chip
-                v-if="jobMessageOutputs.length > 5"
-                class="ml-2 bg-grey text-white"
-                size="small"
-                link
-                @click="toggleExpandCollapse()"
-              >
-                +{{ jobMessageOutputs.length - 5 }}
-              </v-chip>
+                <v-chip
+                  v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
+                  :key="`${customOutput.label}-${index}`"
+                  :class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
+                  class="message-output"
+                >
+                  {{ customOutput.label }}
+                  <v-tooltip :text="customOutput.message"/>
+                </v-chip>
+                <v-chip
+                  v-if="jobMessageOutputs.length > 5"
+                  class="bg-grey text-white"
+                  @click="toggleExpandCollapse()"
+                >
+                  +{{ jobMessageOutputs.length - 5 }}
+                </v-chip>
+              </v-defaults-provider>
             </span>
           </template>
         </div>
diff --git a/src/graphql/index.js b/src/graphql/index.js
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { SubscriptionClient } from 'subscriptions-transport-ws'
 import {
   ApolloClient,
   ApolloLink,
@@ -25,7 +26,6 @@ import {
 import { getMainDefinition } from '@apollo/client/utilities'
 import { WebSocketLink } from '@apollo/client/link/ws'
 import { setContext } from '@apollo/client/link/context'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { store } from '@/store/index'
 import { createUrl, getCylcHeaders } from '@/utils/urls'
 
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
@@ -197,15 +197,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
                 <v-select
                   v-model="defaultView"
-                  :items="defaultViews"
-                  :prepend-inner-icon="$options.allViews.get(defaultView).icon"
+                  :items="Array.from(workflowViews.keys())"
+                  :prepend-inner-icon="workflowViews.get(defaultView).icon"
                   data-cy="select-default-view"
                   :menu-props="{ 'data-cy': 'select-default-view-menu' }"
                 >
                   <template v-slot:item="{ item, props }">
                     <v-list-item
                       v-bind="props"
-                      :prepend-icon="$options.allViews.get(item.value).icon"
+                      :prepend-icon="workflowViews.get(item.value).icon"
                     />
                   </template>
                 </v-select>
@@ -223,7 +223,7 @@ import { mapState } from 'vuex'
 import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@mdi/js'
 import { useCyclePointsOrderDesc, useJobTheme, useReducedAnimation } from '@/composables/localStorage'
 import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize } from '@/utils/font-size'
-import { allViews, useDefaultView } from '@/views/views.js'
+import { workflowViews, useDefaultView } from '@/views/views.js'
 import Job from '@/components/cylc/Job.vue'
 import JobState from '@/model/JobState.model'
 import { upperFirst } from 'lodash-es'
@@ -244,21 +244,12 @@ export default {
       jobTheme: useJobTheme(),
       reducedAnimation: useReducedAnimation(),
       upperFirst,
+      workflowViews,
     }
   },
 
   computed: {
     ...mapState('user', ['user']),
-
-    defaultViews () {
-      const views = Array.from(this.$options.allViews.keys())
-
-      // filter out the "Info" view as this cannot presently be opened on the
-      // workflow itself, only jobs inside of the workflow
-      // https://github.com/cylc/cylc-ui/issues/1898 will resolve this
-      views.pop('Info')
-      return views
-    }
   },
 
   methods: {
@@ -268,8 +259,6 @@ export default {
     getCurrentFontSize,
   },
 
-  allViews,
-
   vuetifyDefaults: {
     global: {
       hideDetails: true,
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div data-cy="workspace-view">
     <Toolbar
-      :views="workspaceViews"
+      :views="workflowViews"
       :workflow-name="workflowName"
     />
     <div
@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { ref } from 'vue'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { allViews, workspaceViews } from '@/views/views.js'
+import { allViews, workflowViews } from '@/views/views.js'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionMixin from '@/mixins/subscription'
 import ViewState from '@/model/ViewState.model'
@@ -69,7 +69,7 @@ export default {
 
     return {
       allViews,
-      workspaceViews,
+      workflowViews,
       lumino,
     }
   },
diff --git a/src/views/views.js b/src/views/views.js
@@ -47,11 +47,13 @@ const InfoView = defineAsyncComponent(() => import('@/views/Info.vue'))
 export const TREE = 'Tree'
 
 /**
- * A map of the views that can be opened in a workspace directly.
+ * A map of the views that can be opened for a workflow.
  *
  * Note, some views may require additional context to open.
+ *
+ * @type {Map<string, CylcView>}
  */
-export const workspaceViews = new Map([
+export const workflowViews = new Map([
   [TREE, { component: TreeView, icon: mdiFileTree }],
   ['Table', { component: TableView, icon: mdiTable }],
   ['Graph', { component: GraphView, icon: mdiGraph }],
@@ -60,6 +62,11 @@ export const workspaceViews = new Map([
   ['Gantt', { component: GanttView, icon: mdiChartGantt }],
 ])
 
+// Development views that we don't want in production:
+if (import.meta.env.MODE !== 'production') {
+  workflowViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
+}
+
 /**
  * A map of Vue views or components.
  *
@@ -72,16 +79,12 @@ export const workspaceViews = new Map([
  * @type {Map<string, CylcView>}
  */
 export const allViews = new Map([
-  ...workspaceViews,
+  ...workflowViews,
+  // For now, Info view cannot be opened for a workflow, but this will be resolved by
+  // https://github.com/cylc/cylc-ui/issues/1898
   ['Info', { component: InfoView, icon: mdiInformationOutline }],
 ])
 
-// Development views that we don't want in production:
-if (import.meta.env.MODE !== 'production') {
-  allViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
-  workspaceViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
-}
-
 export const useDefaultView = () => {
   const defaultView = useLocalStorage('defaultView', TREE)
   // Check if the view is implemented (in case we remove/rename a view in future)
