Proposal for handling of missing/removed modules (#310)

frontend/src/framework/Module.tsx

@@ -36,7 +36,7 @@ export class Module<StateType extends StateBaseType> {
     private _defaultTitle: string;
     public viewFC: ModuleFC<StateType>;
     public settingsFC: ModuleFC<StateType>;
-    private _importState: ImportState;
+    protected _importState: ImportState;
     private _moduleInstances: ModuleInstance<StateType>[];
     private _defaultState: StateType | null;
     private _stateOptions: StateOptions<StateType> | undefined;

frontend/src/framework/ModuleRegistry.ts

@@ -3,6 +3,7 @@ import { Module } from "./Module";
 import { DrawPreviewFunc } from "./Preview";
 import { StateBaseType, StateOptions } from "./StateStore";
 import { SyncSettingKey } from "./SyncSettings";
+import { ModuleNotFoundPlaceholder } from "./internal/ModuleNotFoundPlaceholder";
 
 export type RegisterModuleOptions = {
     moduleName: string;
@@ -13,8 +14,19 @@ export type RegisterModuleOptions = {
     description?: string;
 };
 
+export class ModuleNotFoundError extends Error {
+    readonly moduleName: string;
+    constructor(moduleName: string) {
+        super(
+            `Module '${moduleName}' not found. Did you forget to register your module in 'src/modules/registerAllModules.ts'?`
+        );
+        this.moduleName = moduleName;
+    }
+}
+
 export class ModuleRegistry {
     private static _registeredModules: Record<string, Module<any>> = {};
+    private static _moduleNotFoundPlaceholders: Record<string, Module<any>> = {};
 
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     private constructor() {}
@@ -44,15 +56,20 @@ export class ModuleRegistry {
             module.setDefaultState(defaultState, options);
             return module as Module<ModuleStateType>;
         }
-        throw "Did you forget to register your module in 'src/modules/registerAllModules.ts'?";
+        throw new ModuleNotFoundError(moduleName);
     }
 
     static getModule(moduleName: string): Module<any> {
         const module = this._registeredModules[moduleName];
         if (module) {
             return module as Module<any>;
         }
-        throw "Did you forget to register your module in 'src/modules/registerAllModules.ts'?";
+        const placeholder = this._moduleNotFoundPlaceholders[moduleName];
+        if (placeholder) {
+            return placeholder as Module<any>;
+        }
+        this._moduleNotFoundPlaceholders[moduleName] = new ModuleNotFoundPlaceholder(moduleName);
+        return this._moduleNotFoundPlaceholders[moduleName] as Module<any>;
     }
 
     static getRegisteredModules(): Record<string, Module<any>> {

frontend/src/framework/internal/ModuleNotFoundPlaceholder.tsx

@@ -0,0 +1,61 @@
+import { ImportState, Module } from "@framework/Module";
+import { ModuleInstance } from "@framework/ModuleInstance";
+import { Button } from "@lib/components/Button";
+import { Tag } from "@lib/components/Tag";
+import { BugReport, Forum, WebAssetOff } from "@mui/icons-material";
+
+export class ModuleNotFoundPlaceholder extends Module<Record<string, never>> {
+    constructor(moduleName: string) {
+        super(moduleName, moduleName, [], {}, null);
+        this._importState = ImportState.Imported;
+    }
+
+    makeInstance(instanceNumber: number): ModuleInstance<Record<string, never>> {
+        const instance = super.makeInstance(instanceNumber);
+        instance.setDefaultState({});
+        return instance;
+    }
+
+    viewFC = () => {
+        function reportIssue() {
+            window.open("https://github.com/equinor/webviz/issues/new", "_blank");
+        }
+
+        function startDiscussion() {
+            window.open(
+                "https://github.com/equinor/webviz/discussions/new?category=announcements&welcome_text=true",
+                "_blank"
+            );
+        }
+
+        return (
+            <div className="w-full h-full flex flex-col items-center justify-center gap-6">
+                <WebAssetOff fontSize="large" className="text-gray-400" />
+                <span className="text-lg text-red-500">
+                    Module <Tag label={this.getName()} /> not found.
+                </span>
+                <span className="text-sm text-gray-600 text-center">
+                    The module is no longer available and might have been removed from the application. You can safely
+                    remove the module instance by clicking on the cross in its header. If you are wondering why this
+                    module has been removed, please get in touch with us on GitHub.
+                </span>
+                <div className="flex gap-4">
+                    <Button startIcon={<BugReport fontSize="small" />} onClick={reportIssue}>
+                        Report issue
+                    </Button>
+                    <Button startIcon={<Forum fontSize="small" />} onClick={startDiscussion}>
+                        Start discussion
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    settingsFC = () => {
+        return (
+            <div>
+                Module <Tag label={this.getName()} /> not found.
+            </div>
+        );
+    };
+}