@skillcdn/console 0.4.1 → 0.4.2

package/dist/console.js

@@ -14,6 +14,8 @@ import { MyDecisions } from "./components/my-decisions.js";
 import { PackTokenWays } from "./components/pack-token.js";
 import { PAGE_SIZE } from "./components/paged.js";
 import { ListingForm, PeopleList } from "./components/people.js";
+import { PluginFrame, PluginWidgets } from "./components/plugin-frame.js";
+import { PluginSettingsList, PluginSettingsView } from "./components/plugin-settings.js";
 import { MemberList, ProjectForm, ProjectList, ProjectMark, } from "./components/projects.js";
 import { RemotePicturesContext } from "./components/remote-pictures.js";
 import { GoalTimeline } from "./components/roadmap.js";
@@ -33,7 +35,8 @@ import { useConsoleData } from "./data.js";
 import { monthOf, today } from "./dates.js";
 import { DocsPage } from "./docs-page.js";
 import { chooseLanguage, DEFAULT_LANGUAGES, LanguageContext, useWords, } from "./i18n/index.js";
-import { boardHref, calendarHref, customPageHref, decisionHref, decisionsHref, docHref, goalHref, matchRoute, newDecisionHref, newGoalHref, newTaskHref, PATHS, personAgentsHref, personWorkHref, projectHref, projectSettingsHref, roadmapHref, settingsHref, signInFailureOf, taskHref, withoutSignInParam, workHref, } from "./router.js";
+import { pluginNavItems, pluginPagesAt, pluginWordOf } from "./plugin-nav.js";
+import { boardHref, calendarHref, customPageHref, decisionHref, decisionsHref, docHref, goalHref, matchRoute, newDecisionHref, newGoalHref, newTaskHref, PATHS, personAgentsHref, personWorkHref, pluginHref, pluginSettingsHref, projectHref, projectSettingsHref, roadmapHref, settingsHref, signInFailureOf, taskHref, withoutSignInParam, workHref, } from "./router.js";
 import { projectPath } from "./routes.js";
 import { errorWords, useAction } from "./use-action.js";
 export const DEFAULT_COMPONENTS = {
@@ -192,17 +195,87 @@ function NotWithToken() {
 }
 function ProjectsPage(props) {
     const words = useWords().projects;
-    const { data, components, navigation } = props;
+    const { data, components, navigation, client, language } = props;
+    const me = data.me;
+    /** The plugins' widgets at a place of this page (ADR-0054), for the person's roles. */
+    const widgets = (place) => me === undefined ? null : (_jsx(PluginWidgets, { plugins: data.plugins, place: place, me: me, language: language, client: client, navigation: navigation, nameOf: (name) => pluginWordOf(name, language) }));
     const { busy, error, act } = useAction();
     const href = (project) => projectHref(project.key);
     // A project is made by an administrator (ADR-0045): a member sees the list alone, the form's
     // address included.
     const administrator = data.me?.person?.role === "admin";
     const making = props.making && administrator;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.title }), administrator && !making && (_jsx(LinkButton, { href: PATHS.newProject, variant: "primary", children: words.newProject }))] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), making && (_jsx("section", { className: "sc-panel sc-panel-form", "aria-label": words.form.aria, children: _jsx(ProjectForm, { busy: busy, skillsSource: data.me?.workspace.skills.source, organizationAddress: data.me?.workspace.skills.address ?? null, onSubmit: (input, icon) => void act(async () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sc-page-head", children: [_jsx("h1", { className: "sc-page-title", children: words.title }), administrator && !making && (_jsx(LinkButton, { href: PATHS.newProject, variant: "primary", children: words.newProject }))] }), error !== undefined && _jsx(Callout, { tone: "danger", children: error }), widgets("home:top"), making && (_jsx("section", { className: "sc-panel sc-panel-form", "aria-label": words.form.aria, children: _jsx(ProjectForm, { busy: busy, skillsSource: data.me?.workspace.skills.source, organizationAddress: data.me?.workspace.skills.address ?? null, onSubmit: (input, icon) => void act(async () => {
                         const made = await data.actions.createProject(input, icon instanceof File ? uploadOf(icon) : undefined);
                         navigation.replace(projectHref(made.key));
-                    }), onCancel: () => navigation.back(PATHS.projects) }) })), _jsx(components.ProjectList, { projects: data.projects, projectHref: href, onOpen: (project) => navigation.go(href(project)), empty: _jsx(EmptyState, { title: words.empty.title, body: administrator ? words.empty.body : words.empty.bodyMember, action: administrator ? (_jsx(LinkButton, { href: PATHS.newProject, children: words.newProject })) : undefined }) })] }));
+                    }), onCancel: () => navigation.back(PATHS.projects) }) })), _jsx(components.ProjectList, { projects: data.projects, projectHref: href, onOpen: (project) => navigation.go(href(project)), empty: _jsx(EmptyState, { title: words.empty.title, body: administrator ? words.empty.body : words.empty.bodyMember, action: administrator ? (_jsx(LinkButton, { href: PATHS.newProject, children: words.newProject })) : undefined }) }), widgets("home:bottom")] }));
+}
+/**
+ * A plugin's page (ADR-0054): the sub-tabs of its pages at the level, where it has several, above
+ * the frame of the one shown, the first when the address names none. Nothing for a plugin the
+ * person has no page of, or that is not on the project.
+ */
+function PluginPage(props) {
+    const words = useWords();
+    const { route, data, project, client, language, navigation } = props;
+    const plugin = data.plugins.find((candidate) => candidate.key === route.plugin && candidate.state === "enabled");
+    const bound = route.level === "workspace" ||
+        data.projectPlugins.some((candidate) => candidate.key === route.plugin);
+    const pages = plugin === undefined ? [] : pluginPagesAt(plugin, route.level);
+    const page = route.page === undefined ? pages[0] : pages.find((p) => p.key === route.page);
+    if (plugin === undefined || !bound || page === undefined || data.me === undefined) {
+        return _jsx(EmptyState, { title: words.plugins.noPage.title, body: words.plugins.noPage.body });
+    }
+    const projectKey = route.level === "project" ? route.project : undefined;
+    return (_jsxs(_Fragment, { children: [pages.length > 1 && (_jsx("nav", { className: "sc-subtabs", "aria-label": pluginWordOf(plugin.name, language), children: pages.map((candidate) => (_jsx("a", { href: pluginHref(plugin.key, candidate.key, projectKey), className: candidate.key === page.key ? "sc-tab sc-tab-current" : "sc-tab", "aria-current": candidate.key === page.key ? "page" : undefined, children: pluginWordOf(candidate.name, language) }, candidate.key))) })), _jsx(PluginFrame, { plugin: plugin, page: page.key, project: project, path: route.rest, me: data.me, language: language, client: client, navigation: navigation, events: project === undefined ? undefined : data.events, title: words.plugins.frame(pluginWordOf(page.name, language)) }, `${plugin.key}:${page.key}:${projectKey ?? ""}`)] }));
+}
+/**
+ * The plugins' settings (docs/specs/plugins.md, "The settings pages"): the list, or one plugin
+ * whole, read again after every change; for an administrator.
+ */
+function PluginSettingsPage(props) {
+    const words = useWords();
+    const { data, client, language, navigation } = props;
+    const settings = words.plugins.settings;
+    const administrator = data.me?.person?.role === "admin";
+    const [detail, setDetail] = useState(undefined);
+    const [failure, setFailure] = useState(undefined);
+    const key = props.plugin;
+    const read = useCallback(async () => {
+        if (key === undefined) {
+            return;
+        }
+        try {
+            setDetail(await client.plugin(key).get());
+            setFailure(undefined);
+        }
+        catch (error) {
+            setFailure(error instanceof ApiError ? error.message : words.common.somethingWentWrong);
+        }
+    }, [client, key, words.common.somethingWentWrong]);
+    useEffect(() => {
+        setDetail(undefined);
+        void read();
+    }, [read]);
+    if (!administrator) {
+        return _jsx(NothingHere, {});
+    }
+    if (key === undefined) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sc-page-head", children: _jsx("h1", { className: "sc-page-title", children: settings.title }) }), _jsx(PluginSettingsList, { plugins: data.plugins, language: language, href: (plugin) => pluginSettingsHref(plugin.key) })] }));
+    }
+    if (failure !== undefined) {
+        return _jsx(EmptyState, { title: words.common.somethingWentWrong, body: failure });
+    }
+    if (detail === undefined) {
+        return (_jsx("div", { className: "sc-loading", children: _jsx(Spinner, { label: words.common.loading }) }));
+    }
+    return (_jsx(PluginSettingsView, { detail: detail, projects: data.projects, people: data.people, language: language, client: client, onChanged: async () => {
+            await read();
+            await data.actions.refreshPlugins();
+        }, onPurged: () => {
+            void data.actions.refreshPlugins();
+            navigation.replace(pluginSettingsHref());
+        } }));
 }
 /**
  * The archive of the board (ADR-0029): the tasks put away, newest first, a page at a time from
@@ -513,6 +586,9 @@ function ProjectPage(props) {
     if (route.name === "settings") {
         return (_jsx(ProjectSettingsPage, { route: route, project: project, data: data, navigation: navigation }));
     }
+    if (route.name === "plugin") {
+        return (_jsx(PluginPage, { route: route, data: data, project: project, client: props.client, language: props.language, navigation: navigation }));
+    }
     return _jsx(NothingHere, {});
 }
 /**
@@ -602,7 +678,7 @@ function ProjectSettingsPage(props) {
  */
 function WorkspaceSettingsPage(props) {
     const words = useWords();
-    const { form, data, navigation } = props;
+    const { form, data, navigation, language } = props;
     const { busy, error, act } = useAction();
     const administrator = data.me?.person?.role === "admin";
     const workspace = data.me?.workspace;
@@ -662,11 +738,11 @@ function WorkspaceSettingsPage(props) {
                                 navigation.replace(PATHS.settings);
                             }), onCancel: () => navigation.back(PATHS.settings) })] })] }));
     }
-    return (_jsxs(_Fragment, { children: [head, error !== undefined && _jsx(Callout, { tone: "danger", children: error }), workspace !== undefined && (_jsxs("section", { className: "sc-panel", "aria-label": words.settings.workspace.aria, children: [_jsxs("div", { className: "sc-section-head", children: [_jsx("h2", { className: "sc-section-title", children: words.settings.workspace.title }), administrator && (_jsx("a", { className: "sc-button sc-button-secondary sc-button-sm", href: settingsHref("workspace"), children: words.common.edit }))] }), _jsx(WorkspaceSettingsView, { workspace: workspace })] })), _jsxs("section", { className: "sc-panel", "aria-label": words.rules.title, children: [_jsx("h2", { className: "sc-section-title", children: words.rules.title }), rules === undefined ? (_jsx(Spinner, { label: words.rules.loading })) : (_jsx(RulesView, { rules: rules, scope: "workspace", editHref: administrator ? settingsHref("rules") : undefined, onArchive: administrator
+    return (_jsxs(_Fragment, { children: [head, error !== undefined && _jsx(Callout, { tone: "danger", children: error }), workspace !== undefined && (_jsxs("section", { className: "sc-panel", "aria-label": words.settings.workspace.aria, children: [_jsxs("div", { className: "sc-section-head", children: [_jsx("h2", { className: "sc-section-title", children: words.settings.workspace.title }), administrator && (_jsx("a", { className: "sc-button sc-button-secondary sc-button-sm", href: settingsHref("workspace"), children: words.common.edit }))] }), _jsx(WorkspaceSettingsView, { workspace: workspace, console: data.me?.console })] })), _jsxs("section", { className: "sc-panel", "aria-label": words.rules.title, children: [_jsx("h2", { className: "sc-section-title", children: words.rules.title }), rules === undefined ? (_jsx(Spinner, { label: words.rules.loading })) : (_jsx(RulesView, { rules: rules, scope: "workspace", editHref: administrator ? settingsHref("rules") : undefined, onArchive: administrator
                             ? () => void act(async () => {
                                 setRules(await data.actions.archiveRules());
                             })
-                            : undefined, busy: busy }))] }), _jsxs("section", { className: "sc-panel", "aria-label": words.settings.categories, children: [_jsx("h2", { className: "sc-section-title", children: words.settings.categories }), data.categories.length > 0 && (_jsx("p", { className: "sc-category-chips", children: data.categories.map((category) => (_jsx(CategoryBadge, { category: category }, category.key))) })), _jsx(LinkButton, { href: PATHS.categories, children: words.settings.manageCategories })] }), skills !== undefined && (_jsxs("section", { className: "sc-panel", "aria-label": words.settings.skills, children: [_jsx("h2", { className: "sc-section-title", children: words.settings.skills }), _jsxs("dl", { className: "sc-facts sc-facts-plain", children: [_jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsSource }), _jsx("dd", { children: _jsx("a", { href: skills.source, target: "_blank", rel: "noopener noreferrer", children: skills.source }) })] }), _jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsAddress }), _jsx("dd", { children: skills.address === null ? (words.settings.noSkillsAddress) : (_jsx("a", { href: `${skills.source}${skills.address}`, target: "_blank", rel: "noopener noreferrer", children: _jsx("code", { children: skills.address }) })) })] }), skills.address !== null && (_jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsToken }), _jsxs("dd", { children: [skills.packToken == null ? (_jsx("span", { className: "sc-muted", children: words.projects.settings.packTokenNone })) : (_jsxs(_Fragment, { children: [words.projects.settings.packTokenSet, " ", _jsx(Time, { iso: skills.packToken.setAt })] })), administrator && (_jsxs(_Fragment, { children: [" ", _jsx("a", { href: settingsHref("pack-token"), children: skills.packToken == null
+                            : undefined, busy: busy }))] }), administrator && (_jsxs("section", { className: "sc-panel", "aria-label": words.plugins.settings.title, children: [_jsx("h2", { className: "sc-section-title", children: words.plugins.settings.title }), data.plugins.length === 0 ? (_jsx("p", { className: "sc-settings-hint", children: words.plugins.settings.empty.body })) : (_jsx(PluginSettingsList, { plugins: data.plugins, language: language, href: (plugin) => pluginSettingsHref(plugin.key) }))] })), _jsxs("section", { className: "sc-panel", "aria-label": words.settings.categories, children: [_jsx("h2", { className: "sc-section-title", children: words.settings.categories }), data.categories.length > 0 && (_jsx("p", { className: "sc-category-chips", children: data.categories.map((category) => (_jsx(CategoryBadge, { category: category }, category.key))) })), _jsx(LinkButton, { href: PATHS.categories, children: words.settings.manageCategories })] }), skills !== undefined && (_jsxs("section", { className: "sc-panel", "aria-label": words.settings.skills, children: [_jsx("h2", { className: "sc-section-title", children: words.settings.skills }), _jsxs("dl", { className: "sc-facts sc-facts-plain", children: [_jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsSource }), _jsx("dd", { children: _jsx("a", { href: skills.source, target: "_blank", rel: "noopener noreferrer", children: skills.source }) })] }), _jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsAddress }), _jsx("dd", { children: skills.address === null ? (words.settings.noSkillsAddress) : (_jsx("a", { href: `${skills.source}${skills.address}`, target: "_blank", rel: "noopener noreferrer", children: _jsx("code", { children: skills.address }) })) })] }), skills.address !== null && (_jsxs("div", { children: [_jsx("dt", { children: words.settings.skillsToken }), _jsxs("dd", { children: [skills.packToken == null ? (_jsx("span", { className: "sc-muted", children: words.projects.settings.packTokenNone })) : (_jsxs(_Fragment, { children: [words.projects.settings.packTokenSet, " ", _jsx(Time, { iso: skills.packToken.setAt })] })), administrator && (_jsxs(_Fragment, { children: [" ", _jsx("a", { href: settingsHref("pack-token"), children: skills.packToken == null
                                                             ? words.projects.settings.packTokenAdd
                                                             : words.projects.settings.packTokenEdit })] }))] })] }))] }), _jsx("p", { className: "sc-muted", children: words.settings.skillsFromConfiguration })] }))] }));
 }
@@ -832,9 +908,15 @@ function PersonWorkPage(props) {
 }
 function WorkspacePage(props) {
     const words = useWords();
-    const { route, data, components, navigation } = props;
+    const { route, data, components, navigation, client, language } = props;
     const [fresh, setFresh] = useState(undefined);
     const { busy, error, act } = useAction();
+    if (route.name === "plugin" && route.level === "workspace") {
+        return (_jsx(PluginPage, { route: route, data: data, project: undefined, client: client, language: language, navigation: navigation }));
+    }
+    if (route.name === "plugins-settings") {
+        return (_jsx(PluginSettingsPage, { plugin: route.plugin, data: data, client: client, language: language, navigation: navigation }));
+    }
     if (route.name === "work") {
         return _jsx(WorkPage, { data: data, components: components, week: route.week });
     }
@@ -845,7 +927,7 @@ function WorkspacePage(props) {
         return _jsx(PersonWorkPage, { id: route.id, data: data, components: components, week: route.week });
     }
     if (route.name === "workspace-settings") {
-        return _jsx(WorkspaceSettingsPage, { form: route.form, data: data, navigation: navigation });
+        return (_jsx(WorkspaceSettingsPage, { form: route.form, data: data, navigation: navigation, language: language }));
     }
     if (route.name === "categories") {
         const me = data.me?.person ?? undefined;
@@ -966,13 +1048,6 @@ export function createConsole(config = {}) {
                             current: route.name === "agents" || route.name === "new-token",
                         },
                     ]),
-                // The settings are read by everyone: the rules every agent follows, the categories and
-                // what the colours mean, where the skills come from; kept by an administrator.
-                {
-                    href: PATHS.settings,
-                    label: words.nav.settings,
-                    current: route.name === "workspace-settings" || route.name === "categories",
-                },
                 ...pages
                     .filter((candidate) => candidate.level === "workspace")
                     .map((candidate) => ({
@@ -982,6 +1057,26 @@ export function createConsole(config = {}) {
                         route.level === "workspace" &&
                         route.page === candidate.key,
                 })),
+                // The plugins' tabs (ADR-0054): the groups that hold a plugin the person has a page of.
+                ...pluginNavItems({
+                    plugins: data.plugins,
+                    level: "workspace",
+                    current: {
+                        plugin: route.name === "plugin" && route.level === "workspace" ? route.plugin : undefined,
+                    },
+                    words,
+                    language: pack.tag,
+                }),
+                // The settings are read by everyone: the rules every agent follows, the categories and
+                // what the colours mean, where the skills come from, the plugins; kept by an
+                // administrator. Last, after the organization's own tabs and the plugins'.
+                {
+                    href: PATHS.settings,
+                    label: words.nav.settings,
+                    current: route.name === "workspace-settings" ||
+                        route.name === "categories" ||
+                        route.name === "plugins-settings",
+                },
             ];
             const nav = projectKey === undefined
                 ? workspaceNav
@@ -1029,12 +1124,6 @@ export function createConsole(config = {}) {
                         label: words.nav.members,
                         current: route.name === "members",
                     },
-                    // Read by every member: what the project is, and what its agents are asked (ADR-0023).
-                    {
-                        href: projectHref(projectKey, "settings"),
-                        label: words.nav.settings,
-                        current: route.name === "settings",
-                    },
                     ...pages
                         .filter((candidate) => candidate.level === "project")
                         .map((candidate) => ({
@@ -1044,6 +1133,23 @@ export function createConsole(config = {}) {
                             route.level === "project" &&
                             route.page === candidate.key,
                     })),
+                    ...pluginNavItems({
+                        plugins: data.plugins,
+                        level: "project",
+                        project: { key: projectKey, plugins: data.projectPlugins },
+                        current: {
+                            plugin: route.name === "plugin" && route.level === "project" ? route.plugin : undefined,
+                        },
+                        words,
+                        language: pack.tag,
+                    }),
+                    // Read by every member: what the project is, and what its agents are asked
+                    // (ADR-0023). Last, after the organization's own tabs and the plugins'.
+                    {
+                        href: projectHref(projectKey, "settings"),
+                        label: words.nav.settings,
+                        current: route.name === "settings",
+                    },
                 ];
             /** A page of the console's own at the address, or nothing there. */
             const customPageOf = (key, level) => {
@@ -1058,13 +1164,13 @@ export function createConsole(config = {}) {
                 page = _jsx(NotWithToken, {});
             }
             else if (route.name === "projects" || route.name === "new-project") {
-                page = (_jsx(ProjectsPage, { data: data, components: components, navigation: navigation, making: route.name === "new-project" }));
+                page = (_jsx(ProjectsPage, { data: data, components: components, navigation: navigation, client: client, language: pack.tag, making: route.name === "new-project" }));
             }
             else if (route.name === "custom" && route.level === "workspace") {
                 page = customPageOf(route.page, "workspace");
             }
             else if (projectKey === undefined) {
-                page = (_jsx(WorkspacePage, { route: route, data: data, components: components, navigation: navigation }));
+                page = (_jsx(WorkspacePage, { route: route, data: data, components: components, navigation: navigation, client: client, language: pack.tag }));
             }
             else if (data.projectError !== undefined) {
                 page = (_jsx(EmptyState, { title: words.common.noSuchProject.title, body: words.common.noSuchProject.body, action: _jsx(LinkButton, { href: PATHS.projects, children: words.nav.projects }) }));
@@ -1076,7 +1182,7 @@ export function createConsole(config = {}) {
                 page = customPageOf(route.page, "project");
             }
             else {
-                page = (_jsx(ProjectPage, { route: route, project: project, data: data, components: components, navigation: navigation }));
+                page = (_jsx(ProjectPage, { route: route, project: project, data: data, components: components, navigation: navigation, client: client, language: pack.tag }));
             }
             content = (_jsx(components.Shell, { title: title, brand: config.brand, project: projectKey === undefined
                     ? undefined
@@ -1092,7 +1198,11 @@ export function createConsole(config = {}) {
                     route.name === "calendar" ||
                     (route.name === "goal" && route.form === undefined) ||
                     (route.name === "custom" &&
-                        pages.some((candidate) => candidate.key === route.page && candidate.wide === true)), onNavigate: (href) => navigation.go(href), onSignOut: viaToken ? undefined : () => void data.actions.signOut(), children: page }));
+                        pages.some((candidate) => candidate.key === route.page && candidate.wide === true)) ||
+                    (route.name === "plugin" &&
+                        data.plugins.some((candidate) => candidate.key === route.plugin &&
+                            pluginPagesAt(candidate, route.level).some((candidate, index) => candidate.wide &&
+                                (route.page === undefined ? index === 0 : candidate.key === route.page)))), onNavigate: (href) => navigation.go(href), onSignOut: viaToken ? undefined : () => void data.actions.signOut(), children: page }));
         }
         return (_jsx(LanguageContext.Provider, { value: pack, children: _jsx(RemotePicturesContext.Provider, { value: pictureSrc, children: content }) }));
     }