Files
paseo/packages/app/e2e/browser/plugin-settings.spec.ts
T
Mohamed Boudra 6740d41fab Open plugin settings from a cog, with a tab per settings screen (#8675)
* feat(app): open plugin settings from a cog with a tab per screen

The plugin row shows a settings button next to its switch when the plugin
registers settings screens. The actions menu keeps Logs, Reload and Remove.
The settings page shows one tab per registered screen; a plugin with one
screen shows no tabs. Tabs swap screenId in place, so existing
plugins/[pluginId]/[screenId] links and openSettings keep working.

* fix(app): render settings tab icons inside the plugin's runtime

Component icons now mount under the installation provider, so plugin SDK
hooks such as useTranslation work. Each icon has its own error boundary;
an icon that throws leaves its tab with the label alone.

* feat(app): name only the plugin in its settings page header

The header shows the plugin's manifest name, or its id when it has none,
for single- and multi-screen plugins alike. The selected tab names the
screen. The Plugins page and the header share one plugin list query.

* feat(app): show plugin display names and a Settings tooltip on the cog

Plugin rows on Settings → Plugins show the manifest name, falling back to
the id; when a name is set, the id stays visible beneath it. The row's
controls, logs sheet, confirmations and feedback use the same name.
The cog is a ToolbarButton labeled Settings, with a matching tooltip.
2026-11-04 07:19:13 +07:00

103 lines
3.2 KiB
TypeScript

import {
test,
openDisplaySettings,
openCompactDisplaySettings,
groupByWorkspace,
hideMetadata,
reloadSavedDisplaySettings,
editTitle,
replaceTitle,
saveTitle,
expectTitleRequired,
expectSavedTitle,
changeMetadataFromAnotherClient,
expectConflictPreservesDraft,
discardTitle,
returnAndReopenSettings,
returnToPluginsPage,
expectSettingsUnavailable,
openPluginsPage,
expectActionsMenuWithoutSettings,
expectNoSettingsCogWithoutScreens,
openTabbedSettings,
selectSettingsTab,
openTabbedSettingsLink,
expectSettingsTooltip,
expectNamedPluginRow,
} from "../support/helpers/plugin-settings";
test("display preferences survive a reload", async ({ page }) => {
await openDisplaySettings(page);
await groupByWorkspace(page);
await hideMetadata(page);
await reloadSavedDisplaySettings(page);
});
test("invalid titles stay editable until a valid title is saved", async ({ page }) => {
await openDisplaySettings(page);
await editTitle(page, "");
await saveTitle(page);
await expectTitleRequired(page);
await replaceTitle(page, "My monitor");
await saveTitle(page);
await expectSavedTitle(page, "My monitor");
});
test("another client's save preserves a conflicting draft", async ({ page }) => {
await openDisplaySettings(page);
await editTitle(page, "Unsaved title");
await changeMetadataFromAnotherClient(page);
await saveTitle(page);
await expectConflictPreservesDraft(page, "Unsaved title");
await discardTitle(page);
});
test("Back to plugins returns from a plugin settings screen", async ({ page }) => {
await openDisplaySettings(page);
await returnToPluginsPage(page);
});
test("plugin settings open from the cog and show a tab per screen", async ({ page }) => {
await openPluginsPage(page);
await test.step("plugin rows show the display name", async () => {
await expectNamedPluginRow(page);
});
await test.step("the cog explains itself", async () => {
await expectSettingsTooltip(page);
});
await test.step("the actions menu keeps only plugin actions", async () => {
await expectActionsMenuWithoutSettings(page);
});
await test.step("tabs switch between the plugin's settings screens", async () => {
await openTabbedSettings(page);
await selectSettingsTab(page, "Advanced");
await selectSettingsTab(page, "General");
await returnToPluginsPage(page);
});
await test.step("a plugin without settings screens shows no cog", async () => {
await expectNoSettingsCogWithoutScreens(page);
});
});
test("a settings screen link opens its tab", async ({ page }) => {
await openTabbedSettingsLink(page, "Advanced");
});
test.describe("compact plugin settings", () => {
test.use({ viewport: { width: 390, height: 844 } });
test("Back and plugin re-enable restore the settings screen", async ({
page,
settingsPlugin,
}) => {
await openCompactDisplaySettings(page);
await groupByWorkspace(page);
await hideMetadata(page);
await returnAndReopenSettings(page);
await settingsPlugin.disablePlugin("settings-example");
await expectSettingsUnavailable(page);
await settingsPlugin.enablePlugin("settings-example");
await reloadSavedDisplaySettings(page);
});
});