Lumino tab titles - distinguish between log view tabs

changes.d/2290.feat.md

@@ -0,0 +1 @@
+Added tooltip to distinguish between multiple log view tabs.

src/components/cylc/workspace/Lumino.vue

@@ -27,6 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :is="props.allViews.get(name).component"
       :workflow-name="workflowName"
       v-model:initial-options="views.get(id).initialOptions"
+      :widgetID="id"
       class="h-100"
     />
   </WidgetComponent>

src/components/cylc/workspace/luminoWidget.js

@@ -66,6 +66,10 @@ export class LuminoWidget extends Widget {
     // which cause the tab panel to be updated.
     this.title.label = this.name
     this.title.closable = this.closable
+    eventBus.on(`lumino:update-tab:${this.id}`, ({ title, caption }) => {
+      this.title.label = title
+      this.title.caption = caption
+    })
     super.onBeforeAttach(msg)
   }
 
@@ -79,6 +83,7 @@ export class LuminoWidget extends Widget {
   onCloseRequest (msg) {
     // Emit an event so that the Vue component knows that it needs to be removed too
     eventBus.emit('lumino:deleted', this.id)
+    eventBus.off(`lumino:update-tab:${this.id}`)
     super.onCloseRequest(msg)
   }
 

src/styles/cylc/_workflow.scss → src/styles/cylc/_workspace.scss

@@ -35,21 +35,18 @@
 
     .lm-BoxPanel {
       flex: 1 1 auto;
-      .lm-TabBar-content {
-        padding-left: 0;
-      }
     }
   }
 }
 
 .lm-TabBar-tab {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #C0C0C0;
+  flex-basis: 10rem !important; // Min width of tab
 }
 .lm-TabBar-tabLabel {
   font-family: settings.$body-font-family;
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 .lm-TabBar-tabCloseIcon {
   color: inherit;

src/styles/index.scss

@@ -29,7 +29,7 @@
 @use "cylc/table";
 @use "cylc/user_profile";
 @use "cylc/warning";
-@use "cylc/workflow";
+@use "cylc/workspace";
 @use "cylc/tooltip";
 @use "cylc/mutation_form";
 @use "cylc/menu";

src/views/Log.vue

@@ -201,6 +201,7 @@ import CopyBtn from '@/components/core/CopyBtn.vue'
 import { Alert } from '@/model/Alert.model'
 import { getJobLogFileFromState } from '@/model/JobState.model'
 import { useLogWordWrapDefault } from '@/composables/localStorage'
+import { eventBus } from '@/services/eventBus'
 
 /**
  * Query used to retrieve data for the Log view.
@@ -314,6 +315,12 @@ export default {
 
   props: {
     initialOptions,
+    /** ID of widget if the log view is in a Lumino tab. */
+    widgetID: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   setup (props, { emit }) {
@@ -429,7 +436,18 @@ export default {
         id: this.id ?? undefined, // (do not trigger the callback on null ⇄ undefined)
         file: this.file ?? undefined
       }),
-      async ({ id }, old) => {
+      async ({ id, file }, old) => {
+        // update the widget tab caption when the id or file change
+        if (this.widgetID) {
+          const prefix = this.relativeID ? `${this.relativeID} – ` : ''
+          eventBus.emit(
+            `lumino:update-tab:${this.widgetID}`,
+            {
+              title: this.jobLog ? 'Log – Job' : 'Log – Workflow',
+              caption: `${prefix}${file ?? 'No file selected'}`,
+            }
+          )
+        }
         // update the query when the id or file change
         this.updateQuery()
         // refresh the file & file list when the id changes