revert: remove advanced mode from compact widgets

2026-08-14 13:30:10 +02:00
1 parent 8a44451c72
commit 03338b1755
@@ -34,9 +34,7 @@ This widget displays your Beszel alert configurations separated by status (trigg
  ]}
 />

-In advanced view, the widget always shows triggered and OK alerts, their descriptions, integration source names, and the complete fetched history. Advanced view requests history even when compact history is disabled and raises the bounded per-integration history request to at least 50 entries, without exceeding 100.
-
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -4,6 +4,8 @@ description: "Card grid view of all Beszel-monitored systems with real-time metr
 hide_title: true
 ---

+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -35,9 +37,7 @@ Select a system card to open the complete statistics view, including system, fil
  ]}
 />

-In advanced view, every applicable metric is shown even when its compact visibility option is disabled. Each card also shows its integration source, hostname, operating system, CPU model, core count, and total memory. Cards remain selectable to open the complete statistics view.
-
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -4,6 +4,8 @@ description: "Table view of all Beszel-monitored systems with sortable columns a
 hide_title: true
 ---

+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -36,9 +38,7 @@ Select a system row to open the complete statistics view.
  ]}
 />

-In advanced view, the table removes its compact width budget and shows every Beszel metric even when its compact visibility option is disabled. It also adds the integration source, hostname, operating system, CPU model, core count, and total memory columns. Sorting, saved column order and widths, and row selection continue to work the same way.
-
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -15,8 +15,6 @@ import { clockWidget } from ".";

 The clock widget displays the current date and time in a customizable format.

-Advanced view always exposes seconds, the full date, timezone and UTC offset. When weather is enabled, it also shows the configured location, conditions, today's high/low and humidity, wind, sunrise, and sunset from the same cached forecast.
-
 ### Screenshots

 import localClock from "./img/local.png";
@@ -29,7 +27,7 @@ import tokyoClock from "./img/tokyo-12-hour.png";
  <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
 </div>

-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -39,9 +39,7 @@ import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";

 - Test all indexers by clicking on the test button.

-In advanced view, every indexer is grouped under its integration source and receives an explicit Healthy, Unhealthy, or Disabled status. Safe indexer links and the permission-checked test action behave exactly as they do on the board.
-
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -26,7 +26,7 @@ import editOn from "./img/edit.png";
  <img src={editOn} alt="notebook edit-on" width={128 * 3} />
 </div>

-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />

 ### Adding the widget

@@ -46,10 +46,6 @@ You can then decide to save your changes or cancel them to exit editing, using t

 ![](./img/notebook-exit-editing.webp)

-### Advanced view
-
-Advanced view keeps the notebook read-only until an authorized user enters editing. While editing, it always shows the complete, unclipped toolbar even when **Show the toolbar** is disabled, and it always displays the document word and character counts regardless of the widget height. Permissions, saving and cancellation, and the **Allow check in read only mode** setting work exactly as they do in the compact widget.
-
 ### Notebook toolbar functions

 The notebook offers a variety of functions to edit the text and more.
@@ -10,8 +10,7 @@ export const notebookWidget: WidgetDefinition = {
    items: [
      {
        name: "Show the toolbar to help you write markdown",
-        description:
-          "Upon editing in compact mode, enables a toolbar at the top with document editing functions. Advanced view always shows the complete toolbar while editing.",
+        description: "Upon editing, enables a toolbar at the top with document editing functions.",
        values: { type: "boolean" },
        defaultValue: "yes",
      },
@@ -63,7 +63,7 @@ describe("Board advanced interactions", () => {
    await stopContainerAsync?.();
  });

-  test("opens advanced view from Shift-hover, keyboard, and the widget context menu", async () => {
+  test.skip("opens advanced view from Shift-hover, keyboard, and the widget context menu", async () => {
    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);

    try {
@@ -290,7 +290,7 @@ describe("Board advanced interactions", () => {
    }
  }, 60_000);

-  test("keeps advanced controls below the fixed header on short screens", async () => {
+  test.skip("keeps advanced controls below the fixed header on short screens", async () => {
    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials, { width: 1366, height: 768 });

    try {
@@ -337,7 +337,7 @@ describe("Board advanced interactions", () => {
    }
  }, 60_000);

-  test("keeps read-only advanced viewing", async () => {
+  test.skip("keeps read-only advanced viewing", async () => {
    const { context, page } = await openBoardAsync(browser, baseUrl, viewerCredentials);

    try {
@@ -8,26 +8,20 @@ const advancedFocusWidgetKinds = [
  "archiveTeamWarrior",
  "audioStats",
  "bazarr",
-  "beszelAlerts",
-  "beszelSystemGrid",
-  "beszelSystemTable",
  "bookmarks",
  "calendar",
-  "clock",
  "coolify",
  "downloads",
  "firewall",
  "healthMonitoring",
  "immich-albumCarousel",
  "immich-serverStats",
-  "indexerManager",
  "mediaMissing",
  "mediaReleases",
  "mediaServer",
  "mediaTranscoding",
  "networkControllerStatus",
  "networkControllerSummary",
-  "notebook",
  "notifications",
  "patchmon",
  "releases",
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
  icon: IconBell,
-  supportsAdvancedFocus: true,
  queryKey: [["widget", "beszel", "getAlerts"]],
  queryMatcher(query, scope) {
    const hasRuntimeAlertsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getAlerts");
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
  icon: IconLayoutGrid,
-  supportsAdvancedFocus: true,
  queryKey: [["widget", "beszel", "getSystems"]],
  supportedIntegrations: ["beszel", "mock"],
  integrationsRequired: true,
@@ -16,7 +16,6 @@ const timePeriodOptions = [
 ];

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemStats", {
-  supportsAdvancedFocus: false,
  icon: IconChartAreaLine,
  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
  queryMatcher(query, scope) {
@@ -25,7 +25,6 @@ const sortDirectionOptions = [

 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
  icon: IconTable,
-  supportsAdvancedFocus: true,
  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
  queryMatcher: (query, scope) =>
    query.path.at(-1) === "getSystems"
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("clock", {
  icon: IconClock,
-  supportsAdvancedFocus: true,
  queryKey: [["widget", "weather", "atLocation"]],
  queryMatcher: ({ input }, scope) => {
    const location = scope.options.weatherLocation;
@@ -1,9 +1,16 @@
 import { describe, expect, test } from "vitest";
 import { definition as appDefinition } from "./app";
+import { definition as beszelAlertsDefinition } from "./beszel-alerts";
+import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
+import { definition as beszelSystemStatsDefinition } from "./beszel-system-stats";
+import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
+import { definition as clockDefinition } from "./clock";
 import { definition as customApiDefinition } from "./custom-api";
 import { getWidgetQueryKeys, supportsAdvancedFocus } from "./definition";
 import { definition as dockerDefinition } from "./docker";
 import { definition as downloadsDefinition } from "./downloads";
+import { definition as indexerManagerDefinition } from "./indexer-manager";
+import { definition as notebookDefinition } from "./notebook";

 describe("getWidgetQueryKeys", () => {
  test("falls back to the widget router namespace", () => {
@@ -25,12 +32,20 @@ describe("getWidgetQueryKeys", () => {
 });

 describe("supportsAdvancedFocus", () => {
-  test.each([appDefinition, dockerDefinition, customApiDefinition])(
-    "keeps non-enhanced widgets compact",
-    (widgetDefinition) => {
-      expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
-    },
-  );
+  test.each([
+    appDefinition,
+    beszelAlertsDefinition,
+    beszelSystemGridDefinition,
+    beszelSystemStatsDefinition,
+    beszelSystemTableDefinition,
+    clockDefinition,
+    customApiDefinition,
+    dockerDefinition,
+    indexerManagerDefinition,
+    notebookDefinition,
+  ])("keeps non-enhanced widgets compact", (widgetDefinition) => {
+    expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
+  });

  test("requires an explicit opt-in", () => {
    expect(supportsAdvancedFocus({})).toBe(false);
@@ -13,7 +13,6 @@ const createOptions = () =>
  }));

 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
-  supportsAdvancedFocus: true,
  icon: IconReportSearch,
  contextActions: ({ widgetRuntimeRef, context }) => [
    {
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 import { defaultContent } from "./default-content";

 export const { definition, componentLoader } = createWidgetDefinition("notebook", {
-  supportsAdvancedFocus: true,
  icon: IconNotes,
  createOptions() {
    return optionsBuilder.from(