feat(editor): surface unregistered and mysql synced menus

Author: dnlblasco

resources/js/components/MenuSidebar.tsx

@@ -61,6 +61,20 @@ export function MenuSidebar({ menus, activeKey, onOpen, onDelete }: MenuSidebarP
     );
 }
 
+function describe(menu: MenuDescriptor): string {
+    const notes = [`${menu.itemCount} entries`];
+
+    if (menu.source === 'mysql') {
+        notes.push('synced from MySQL, edits go to the database');
+    }
+
+    if (!menu.registered) {
+        notes.push('not listed in settings.yml, the plugin does not load it');
+    }
+
+    return `${menu.fileName} (${notes.join('; ')})`;
+}
+
 function MenuRow({
     menu,
     active,
@@ -77,12 +91,14 @@ function MenuRow({
             <button
                 type="button"
                 onClick={() => onOpen(menu)}
-                title={`${menu.fileName} (${menu.itemCount} entries)`}
+                title={describe(menu)}
                 className={`flex-1 truncate px-3 py-1 text-left text-sm ${
                     active ? 'bg-slate-800 text-sky-300' : 'text-slate-300 hover:bg-slate-800/60'
                 }`}
             >
                 {menu.fileName}
+                {menu.source === 'mysql' && <span className="ml-1 text-xs text-sky-500">sync</span>}
+                {!menu.registered && <span className="ml-1 text-xs text-amber-500">unregistered</span>}
             </button>
             {onDelete !== null && (
                 <button

resources/js/editor/__tests__/store.test.ts

@@ -3,7 +3,16 @@ import { activeTab, editorReducer, hasUnsavedWork, initialStore, isDirty, type E
 import type { MenuDescriptor } from '../../types/editor';
 
 function menu(fileName: string, platform = 'JAVA'): MenuDescriptor {
-    return { fileName, menuName: fileName, platform, type: 'CHEST', openCommand: '', itemCount: 0 };
+    return {
+        fileName,
+        menuName: fileName,
+        platform,
+        type: 'CHEST',
+        openCommand: '',
+        itemCount: 0,
+        registered: true,
+        source: 'disk',
+    };
 }
 
 function withTabs(...fileNames: string[]): EditorStore {

resources/js/editor/demo.ts

@@ -32,5 +32,5 @@ export async function fetchDemoMenu(menu: MenuDescriptor): Promise<string> {
 }
 
 function descriptor(platform: string, fileName: string, menuName: string, type: string): MenuDescriptor {
-    return { fileName, menuName, platform, type, openCommand: '', itemCount: 0 };
+    return { fileName, menuName, platform, type, openCommand: '', itemCount: 0, registered: true, source: 'disk' };
 }

resources/js/editor/menus.ts

@@ -57,6 +57,8 @@ export const SETTINGS_DESCRIPTOR: MenuDescriptor = {
     type: 'CONFIG',
     openCommand: '',
     itemCount: 0,
+    registered: true,
+    source: 'disk',
 };
 
 /** Stable identity of an open tab. */

resources/js/types/editor.ts

@@ -31,6 +31,10 @@ export interface MenuDescriptor {
     type: string;
     openCommand: string;
     itemCount: number;
+    /** False when the file sits in the folder but is not listed in settings.yml, so the plugin never loads it. */
+    registered: boolean;
+    /** Where the content lives: a menu synced from MySQL is not edited on disk. */
+    source: 'disk' | 'mysql';
 }
 
 export interface MenuContent {