From 7ed5fcb500736d377c4c06feca5f01f40baa4073 Mon Sep 17 00:00:00 2001
From: Mark Sujew <mark.sujew@typefox.io>
Date: Mon, 22 Apr 2024 17:11:28 +0200
Subject: [PATCH] Fix notebook widget icon on reload (#13612)

---
 .../browser/notebook-editor-widget-factory.ts | 23 +++++++++++++++----
 .../src/browser/notebook-editor-widget.tsx    |  2 +-
 .../notebooks/notebook-kernels-main.ts        |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/notebook/src/browser/notebook-editor-widget-factory.ts b/packages/notebook/src/browser/notebook-editor-widget-factory.ts
index fc9d90d0ac109..3582f867e4beb 100644
--- a/packages/notebook/src/browser/notebook-editor-widget-factory.ts
+++ b/packages/notebook/src/browser/notebook-editor-widget-factory.ts
@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { URI } from '@theia/core';
+import { nls, URI } from '@theia/core';
 import { WidgetFactory, NavigatableWidgetOptions, LabelProvider } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { NotebookEditorWidget, NotebookEditorWidgetContainerFactory, NotebookEditorProps } from './notebook-editor-widget';
@@ -51,10 +51,13 @@ export class NotebookEditorWidgetFactory implements WidgetFactory {
 
         const editor = await this.createEditor(uri, options.notebookType);
 
-        const icon = this.labelProvider.getIcon(uri);
-        editor.title.label = this.labelProvider.getName(uri);
-        editor.title.iconClass = icon + ' file-icon';
-
+        this.setLabels(editor, uri);
+        const labelListener = this.labelProvider.onDidChange(event => {
+            if (event.affects(uri)) {
+                this.setLabels(editor, uri);
+            }
+        });
+        editor.onDidDispose(() => labelListener.dispose());
         return editor;
     }
 
@@ -67,4 +70,14 @@ export class NotebookEditorWidgetFactory implements WidgetFactory {
         });
     }
 
+    private setLabels(editor: NotebookEditorWidget, uri: URI): void {
+        editor.title.caption = uri.path.fsPath();
+        if (editor.model?.readOnly) {
+            editor.title.caption += ` • ${nls.localizeByDefault('Read-only')}`;
+        }
+        const icon = this.labelProvider.getIcon(uri);
+        editor.title.label = this.labelProvider.getName(uri);
+        editor.title.iconClass = icon + ' file-icon';
+    }
+
 }
diff --git a/packages/notebook/src/browser/notebook-editor-widget.tsx b/packages/notebook/src/browser/notebook-editor-widget.tsx
index a9fc8c2514b4b..5c4cac3870f60 100644
--- a/packages/notebook/src/browser/notebook-editor-widget.tsx
+++ b/packages/notebook/src/browser/notebook-editor-widget.tsx
@@ -118,7 +118,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     readonly onPostRendererMessage = this.onPostRendererMessageEmitter.event;
 
     protected readonly onDidReceiveKernelMessageEmitter = new Emitter<unknown>();
-    readonly onDidRecieveKernelMessage = this.onDidReceiveKernelMessageEmitter.event;
+    readonly onDidReceiveKernelMessage = this.onDidReceiveKernelMessageEmitter.event;
 
     protected readonly renderers = new Map<CellKind, CellRenderer>();
     protected _model?: NotebookModel;
diff --git a/packages/plugin-ext/src/main/browser/notebooks/notebook-kernels-main.ts b/packages/plugin-ext/src/main/browser/notebooks/notebook-kernels-main.ts
index f15101052a421..8572ebee91f17 100644
--- a/packages/plugin-ext/src/main/browser/notebooks/notebook-kernels-main.ts
+++ b/packages/plugin-ext/src/main/browser/notebooks/notebook-kernels-main.ts
@@ -145,7 +145,7 @@ export class NotebookKernelsMainImpl implements NotebookKernelsMain {
         this.notebookEditorWidgetService = container.get(NotebookEditorWidgetService);
 
         this.notebookEditorWidgetService.onDidAddNotebookEditor(editor => {
-            editor.onDidRecieveKernelMessage(async message => {
+            editor.onDidReceiveKernelMessage(async message => {
                 const kernel = this.notebookKernelService.getSelectedOrSuggestedKernel(editor.model!);
                 if (kernel) {
                     this.proxy.$acceptKernelMessageFromRenderer(kernel.handle, editor.id, message);