Skip to content

Commit 7564d87

Browse files
MetRonnieMetRonnie
committed
Tidy/simplify
1 parent 528751c commit 7564d87

File tree

4 files changed

+41
-67
lines changed

4 files changed

+41
-67
lines changed

‎src/components/cylc/tree/TreeItem.vue‎

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -105,46 +105,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
105105
class="text-grey d-flex flex-nowrap flex-row align-center"
106106
v-if="jobMessageOutputs && jobMessageOutputs.length > 0"
107107
>
108-
<!--
109-
We had a tricky bug in #530 due to the :key here. In summary, the list
110-
that is backing this component changes. It contains zero or more entries,
111-
up to N (5 at the time of writing).
112-
Initially we used `:key=customOutput.id` here. But Vue tried to avoid
113-
changing the DOM elements, which caused some elements to be out of order
114-
in the final rendered UI (as Vue was trying to optimize and keep the
115-
DOM elements in-place whenever possible).
116-
That behaviour is not deterministic, so sometimes you would have the list
117-
in order. The fix was to use a key that combines a string with the list
118-
iteration `index` (the `:key` value must be unique, so we used output-chip
119-
prefix).
120-
@see https://github.com/cylc/cylc-ui/pull/530#issuecomment-781076619
121-
-->
122-
<v-tooltip
123-
v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
124-
:key="`output-chip-${index}`"
125-
:activator="null"
108+
<v-defaults-provider
109+
:defaults="{
110+
VChip: { size: 'small', density: 'comfortable', class: 'ml-2' }
111+
}"
126112
>
127-
<template v-slot:activator="{ props }">
128-
<v-chip
129-
v-bind="props"
130-
:class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
131-
class="ml-2 message-output"
132-
size="small"
133-
>
134-
{{ customOutput.label }}
135-
</v-chip>
136-
</template>
137-
<span>{{ customOutput.message }}</span>
138-
</v-tooltip>
139-
<v-chip
140-
v-if="jobMessageOutputs.length > 5"
141-
class="ml-2 bg-grey text-white"
142-
size="small"
143-
link
144-
@click="toggleExpandCollapse()"
145-
>
146-
+{{ jobMessageOutputs.length - 5 }}
147-
</v-chip>
113+
<v-chip
114+
v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
115+
:key="`${customOutput.label}-${index}`"
116+
:class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
117+
class="message-output"
118+
>
119+
{{ customOutput.label }}
120+
<v-tooltip :text="customOutput.message"/>
121+
</v-chip>
122+
<v-chip
123+
v-if="jobMessageOutputs.length > 5"
124+
class="bg-grey text-white"
125+
@click="toggleExpandCollapse()"
126+
>
127+
+{{ jobMessageOutputs.length - 5 }}
128+
</v-chip>
129+
</v-defaults-provider>
148130
</span>
149131
</template>
150132
</div>

‎src/views/UserProfile.vue‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -197,15 +197,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
197197
</v-col>
198198
<v-select
199199
v-model="defaultView"
200-
:items="defaultViews"
201-
:prepend-inner-icon="$options.allViews.get(defaultView).icon"
200+
:items="Array.from(workflowViews.keys())"
201+
:prepend-inner-icon="workflowViews.get(defaultView).icon"
202202
data-cy="select-default-view"
203203
:menu-props="{ 'data-cy': 'select-default-view-menu' }"
204204
>
205205
<template v-slot:item="{ item, props }">
206206
<v-list-item
207207
v-bind="props"
208-
:prepend-icon="$options.allViews.get(item.value).icon"
208+
:prepend-icon="workflowViews.get(item.value).icon"
209209
/>
210210
</template>
211211
</v-select>
@@ -223,7 +223,7 @@ import { mapState } from 'vuex'
223223
import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@mdi/js'
224224
import { useCyclePointsOrderDesc, useJobTheme, useReducedAnimation } from '@/composables/localStorage'
225225
import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize } from '@/utils/font-size'
226-
import { allViews, useDefaultView } from '@/views/views.js'
226+
import { workflowViews, useDefaultView } from '@/views/views.js'
227227
import Job from '@/components/cylc/Job.vue'
228228
import JobState from '@/model/JobState.model'
229229
import { upperFirst } from 'lodash-es'
@@ -244,21 +244,12 @@ export default {
244244
jobTheme: useJobTheme(),
245245
reducedAnimation: useReducedAnimation(),
246246
upperFirst,
247+
workflowViews,
247248
}
248249
},
249250
250251
computed: {
251252
...mapState('user', ['user']),
252-
253-
defaultViews () {
254-
const views = Array.from(this.$options.allViews.keys())
255-
256-
// filter out the "Info" view as this cannot presently be opened on the
257-
// workflow itself, only jobs inside of the workflow
258-
// https://github.com/cylc/cylc-ui/issues/1898 will resolve this
259-
views.pop('Info')
260-
return views
261-
}
262253
},
263254
264255
methods: {
@@ -268,8 +259,6 @@ export default {
268259
getCurrentFontSize,
269260
},
270261
271-
allViews,
272-
273262
vuetifyDefaults: {
274263
global: {
275264
hideDetails: true,

‎src/views/Workspace.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
1818
<template>
1919
<div data-cy="workspace-view">
2020
<Toolbar
21-
:views="workspaceViews"
21+
:views="workflowViews"
2222
:workflow-name="workflowName"
2323
/>
2424
<div
@@ -38,7 +38,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
3838
<script>
3939
import { ref } from 'vue'
4040
import { onBeforeRouteUpdate } from 'vue-router'
41-
import { allViews, workspaceViews } from '@/views/views.js'
41+
import { allViews, workflowViews } from '@/views/views.js'
4242
import graphqlMixin from '@/mixins/graphql'
4343
import subscriptionMixin from '@/mixins/subscription'
4444
import ViewState from '@/model/ViewState.model'
@@ -69,7 +69,7 @@ export default {
6969
7070
return {
7171
allViews,
72-
workspaceViews,
72+
workflowViews,
7373
lumino,
7474
}
7575
},

‎src/views/views.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,13 @@ const InfoView = defineAsyncComponent(() => import('@/views/Info.vue'))
4747
export const TREE = 'Tree'
4848

4949
/**
50-
* A map of the views that can be opened in a workspace directly.
50+
* A map of the views that can be opened for a workflow.
5151
*
5252
* Note, some views may require additional context to open.
53+
*
54+
* @type {Map<string, CylcView>}
5355
*/
54-
export const workspaceViews = new Map([
56+
export const workflowViews = new Map([
5557
[TREE, { component: TreeView, icon: mdiFileTree }],
5658
['Table', { component: TableView, icon: mdiTable }],
5759
['Graph', { component: GraphView, icon: mdiGraph }],
@@ -60,6 +62,11 @@ export const workspaceViews = new Map([
6062
['Gantt', { component: GanttView, icon: mdiChartGantt }],
6163
])
6264

65+
// Development views that we don't want in production:
66+
if (import.meta.env.MODE !== 'production') {
67+
workflowViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
68+
}
69+
6370
/**
6471
* A map of Vue views or components.
6572
*
@@ -72,16 +79,12 @@ export const workspaceViews = new Map([
7279
* @type {Map<string, CylcView>}
7380
*/
7481
export const allViews = new Map([
75-
...workspaceViews,
82+
...workflowViews,
83+
// For now, Info view cannot be opened for a workflow, but this will be resolved by
84+
// https://github.com/cylc/cylc-ui/issues/1898
7685
['Info', { component: InfoView, icon: mdiInformationOutline }],
7786
])
7887

79-
// Development views that we don't want in production:
80-
if (import.meta.env.MODE !== 'production') {
81-
allViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
82-
workspaceViews.set('SimpleTree', { component: SimpleTreeView, icon: mdiTree })
83-
}
84-
8588
export const useDefaultView = () => {
8689
const defaultView = useLocalStorage('defaultView', TREE)
8790
// Check if the view is implemented (in case we remove/rename a view in future)

0 commit comments

Comments
 (0)