chore: sync macros and dashboard fixes to the current PR end state

src/components/settings/SettingsMacrosTabExpert.vue

@@ -517,17 +517,26 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixi
         })
     }
 
+    get macroListLoaded() {
+        return this.klipperReadyForGui
+    }
+
+    findMacro(macroname: string) {
+        return this.allMacros.find((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase())
+    }
+
     existsMacro(macroname: string) {
-        return (
-            this.allMacros.findIndex((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase()) !== -1
-        )
+        if (!this.macroListLoaded) return true
+
+        return this.findMacro(macroname) !== undefined
     }
 
     getMacroDescription(macroname: string) {
-        const macro = this.allMacros.find((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase())
-        if (!macro) return this.$t('Settings.MacrosTab.DeletedMacro')
+        const macro = this.findMacro(macroname)
+        if (macro) return macro.description ?? null
+        if (!this.macroListLoaded) return null
 
-        return macro?.description ?? null
+        return this.$t('Settings.MacrosTab.DeletedMacro')
     }
 
     updateMacrogroupOption(option: string, newVal: boolean | string) {

src/pages/Dashboard.vue

@@ -81,6 +81,7 @@ interface DashboardColumn {
 })
 export default class PageDashboard extends Mixins(DashboardMixin) {
     dragHandle = '.panel-header-icon'
+    dragGroup = 'dashboard-panels'
 
     dragging = false
     resizeObserver: ResizeObserver | null = null
@@ -120,10 +121,6 @@ export default class PageDashboard extends Mixins(DashboardMixin) {
         return output
     }
 
-    get dragGroup() {
-        return `dashboard-${this.viewport}`
-    }
-
     extractPanelName(name: string) {
         return name.split('_')[0] + '-panel'
     }
@@ -176,10 +173,8 @@ export default class PageDashboard extends Mixins(DashboardMixin) {
     outline-color: var(--v-primary-base);
     background-color: rgba(125, 125, 125, 0.06);
 }
-</style>
 
-<style>
-.dashboard-dropzone .panel-header-icon {
+.dashboard-dropzone ::v-deep .panel-header-icon {
     cursor: grab;
     user-select: none;
     -webkit-touch-callout: none;
@@ -189,7 +184,7 @@ export default class PageDashboard extends Mixins(DashboardMixin) {
     cursor: grabbing;
 }
 
-.dashboard--dragging .panel > * {
+.dashboard--dragging ::v-deep .panel > * {
     pointer-events: none;
 }
 
@@ -203,7 +198,7 @@ export default class PageDashboard extends Mixins(DashboardMixin) {
     pointer-events: none;
 }
 
-.dashboard-panel--dragged > *:not(.panel-toolbar) {
+.dashboard-panel--dragged ::v-deep > *:not(.panel-toolbar) {
     display: none !important;
 }
 </style>

src/store/gui/getters.ts

@@ -158,7 +158,6 @@ export const getters: GetterTree<GuiState, RootState> = {
             return panels.filter((element) => allPossiblePanels.includes(element.name))
         },
 
-    // return the unfiltered layout, to save it back without losing hidden or unavailable panels
     getStoredPanels: (state) => (viewport: string, column: number) => {
         const layoutName = (column ? `${viewport}Layout${column}` : `${viewport}Layout`) as keyof GuiStateDashboard
         const panels = state.dashboard[layoutName] as GuiStateLayoutoption[]

tests/components/settings/settingsMacrosTabExpert.spec.ts

@@ -7,6 +7,7 @@ type ComponentOptions = {
     macros?: Partial<PrinterStateMacro>[]
     group?: Partial<GuiMacrosStateMacrogroup>
     search?: string | null
+    klipperReady?: boolean
 }
 
 interface MacrosTabExpert {
@@ -15,17 +16,27 @@ interface MacrosTabExpert {
     allMacros: PrinterStateMacro[]
     filteredMacros: PrinterStateMacro[]
     availableMacros: PrinterStateMacro[]
+    macroListLoaded: boolean
     existsMacro(macroname: string): boolean
     getMacroDescription(macroname: string): string | null
 }
 
 const MacrosTabExpertClass = SettingsMacrosTabExpert as unknown as new () => MacrosTabExpert
 
 const createComponent = (options: ComponentOptions = {}) => {
+    const klipperReady = options.klipperReady ?? true
+
     const component = new MacrosTabExpertClass()
 
     Object.defineProperty(component, '$store', {
         value: {
+            state: {
+                socket: { isConnected: klipperReady },
+                server: {
+                    klippy_connected: klipperReady,
+                    klippy_state: klipperReady ? 'ready' : 'shutdown',
+                },
+            },
             getters: {
                 'printer/getMacros': options.macros ?? [],
                 'gui/macros/getMacrogroup': () => options.group,
@@ -139,5 +150,19 @@ describe('SettingsMacrosTabExpert', () => {
 
             expect(component.getMacroDescription('START_PRINT')).toBeNull()
         })
+
+        it('does not report macros as deleted while klipper is not ready', () => {
+            const component = createComponent({ macros: [], klipperReady: false })
+
+            expect(component.existsMacro('START_PRINT')).toBe(true)
+            expect(component.getMacroDescription('START_PRINT')).toBeNull()
+        })
+
+        it('reports a macro as deleted once klipper is ready with a genuinely empty macro list', () => {
+            const component = createComponent({ macros: [], klipperReady: true })
+
+            expect(component.existsMacro('START_PRINT')).toBe(false)
+            expect(component.getMacroDescription('START_PRINT')).toBe('Settings.MacrosTab.DeletedMacro')
+        })
     })
 })