npm - @webiny/app-admin - Versions diffs - 6.6.0-alpha.0 → 6.6.0-alpha.2 - Mend

@webiny/app-admin 6.6.0-alpha.0 → 6.6.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (293) hide show

package/presentation/accessManagement/teams/TeamsPresenter.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { StringFormatter } from "../../../features/stringFormatter/abstractions.js";
 import { ListPresenter } from "../../../presentation/listPresenter/abstractions.js";
 import { FormModelFactory } from "../../../features/formModel/abstractions.js";
 import type { Team } from "../../../features/accessManagement/types.js";
@@ -16,13 +17,14 @@ declare class TeamsPresenterImpl implements ITeamsPresenter {
     private updateTeamUseCase;
     private deleteTeamUseCase;
     private cache;
+    private stringFormatter;
     private _selectedTeam;
     private _loading;
     private _saving;
     private _showForm;
     private _form;
     private _isNew;
-    constructor(_listPresenter: ListPresenter.Interface<Team>, formModelFactory: FormModelFactory.Interface, listTeamsUseCase: ListTeamsUseCase.Interface, getTeamUseCase: GetTeamUseCase.Interface, createTeamUseCase: CreateTeamUseCase.Interface, updateTeamUseCase: UpdateTeamUseCase.Interface, deleteTeamUseCase: DeleteTeamUseCase.Interface, cache: TeamsListCache.Interface);
+    constructor(_listPresenter: ListPresenter.Interface<Team>, formModelFactory: FormModelFactory.Interface, listTeamsUseCase: ListTeamsUseCase.Interface, getTeamUseCase: GetTeamUseCase.Interface, createTeamUseCase: CreateTeamUseCase.Interface, updateTeamUseCase: UpdateTeamUseCase.Interface, deleteTeamUseCase: DeleteTeamUseCase.Interface, cache: TeamsListCache.Interface, stringFormatter: StringFormatter.Interface);
     get vm(): ITeamsPresenterViewModel;
     get list(): ListPresenter.Interface<Team>;
     init(): void;

package/presentation/accessManagement/teams/TeamsPresenter.js CHANGED Viewed

@@ -1,5 +1,6 @@
+import { z } from "zod";
 import { computed, makeAutoObservable, runInAction } from "mobx";
-import slugify from "slugify";
+import { StringFormatter } from "../../../features/stringFormatter/abstractions.js";
 import { ListPresenter } from "../../listPresenter/abstractions.js";
 import { FormModelFactory } from "../../../features/formModel/abstractions.js";
 import { ListTeamsUseCase, TeamsListCache } from "../../../features/accessManagement/teams/listTeams/abstractions.js";
@@ -10,7 +11,7 @@ import { DeleteTeamUseCase } from "../../../features/accessManagement/teams/dele
 import { TeamsPresenter } from "./abstractions.js";
 import { TeamsDataSource } from "./TeamsDataSource.js";
 class TeamsPresenterImpl {
-    constructor(_listPresenter, formModelFactory, listTeamsUseCase, getTeamUseCase, createTeamUseCase, updateTeamUseCase, deleteTeamUseCase, cache){
+    constructor(_listPresenter, formModelFactory, listTeamsUseCase, getTeamUseCase, createTeamUseCase, updateTeamUseCase, deleteTeamUseCase, cache, stringFormatter){
         this._listPresenter = _listPresenter;
         this.formModelFactory = formModelFactory;
         this.listTeamsUseCase = listTeamsUseCase;
@@ -19,6 +20,7 @@ class TeamsPresenterImpl {
         this.updateTeamUseCase = updateTeamUseCase;
         this.deleteTeamUseCase = deleteTeamUseCase;
         this.cache = cache;
+        this.stringFormatter = stringFormatter;
         this._selectedTeam = null;
         this._loading = false;
         this._saving = false;
@@ -33,6 +35,7 @@ class TeamsPresenterImpl {
             updateTeamUseCase: false,
             deleteTeamUseCase: false,
             cache: false,
+            stringFormatter: false,
             vm: computed
         });
     }
@@ -80,7 +83,7 @@ class TeamsPresenterImpl {
                 this._form.setData({
                     name: team.name,
                     slug: team.slug,
-                    description: team.description,
+                    description: team.description ?? "",
                     roles: team.roles || []
                 });
             });
@@ -134,14 +137,12 @@ class TeamsPresenterImpl {
                     this._form.setData({
                         name: team.name,
                         slug: team.slug,
-                        description: team.description,
+                        description: team.description ?? "",
                         roles: team.roles || []
                     });
                 });
                 return team;
             }
-        } catch  {
-            return null;
         } finally{
             runInAction(()=>{
                 this._saving = false;
@@ -163,15 +164,10 @@ class TeamsPresenterImpl {
                     name: fields.text().label("Name").required("Name is required.").disabled(!canModify).onBlur((value, { form })=>{
                         const slugValue = form.field("slug").getValue();
                         if (slugValue || !value) return;
-                        form.field("slug").setValue(slugify(String(value), {
-                            replacement: "-",
-                            lower: true,
-                            remove: /[*#?<>_{}[\]+~.()'"!:;@]/g,
-                            trim: false
-                        }));
+                        form.field("slug").setValue(this.stringFormatter.slugify(String(value)));
                     }),
                     slug: fields.text().label("Slug").required("Slug is required.").disabled(!isNew || !canModify),
-                    description: fields.text().label("Description").renderer("textarea").defaultValue("").disabled(!canModify),
+                    description: fields.text().label("Description").renderer("textarea").defaultValue("").schema(z.string().max(500, "Description cannot be longer than 500 characters.")).disabled(!canModify),
                     roles: fields.rolesMultiSelect().label("Roles").required("Roles are required.").disabled(!canModify)
                 }),
             layout: (layout)=>[
@@ -192,7 +188,8 @@ const TeamsPresenter_TeamsPresenter = TeamsPresenter.createImplementation({
         CreateTeamUseCase,
         UpdateTeamUseCase,
         DeleteTeamUseCase,
-        TeamsListCache
+        TeamsListCache,
+        StringFormatter
     ]
 });
 export { TeamsPresenter_TeamsPresenter as TeamsPresenter };

package/presentation/accessManagement/teams/TeamsPresenter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"presentation/accessManagement/teams/TeamsPresenter.js","sources":["../../../../src/presentation/accessManagement/teams/TeamsPresenter.ts"],"sourcesContent":["import { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport slugify from \"slugify\";\nimport { ListPresenter } from \"~/presentation/listPresenter/abstractions.js\";\nimport { FormModelFactory } from \"~/features/formModel/abstractions.js\";\nimport type { IFormModel } from \"~/features/formModel/abstractions.js\";\nimport type { Team } from \"~/features/accessManagement/types.js\";\nimport {\n ListTeamsUseCase,\n TeamsListCache\n} from \"~/features/accessManagement/teams/listTeams/abstractions.js\";\nimport { GetTeamUseCase } from \"~/features/accessManagement/teams/getTeam/abstractions.js\";\nimport { CreateTeamUseCase } from \"~/features/accessManagement/teams/createTeam/abstractions.js\";\nimport { UpdateTeamUseCase } from \"~/features/accessManagement/teams/updateTeam/abstractions.js\";\nimport { DeleteTeamUseCase } from \"~/features/accessManagement/teams/deleteTeam/abstractions.js\";\nimport {\n TeamsPresenter as Abstraction,\n type ITeamsPresenter,\n type ITeamsPresenterViewModel\n} from \"./abstractions.js\";\nimport { TeamsDataSource } from \"./TeamsDataSource.js\";\n\nclass TeamsPresenterImpl implements ITeamsPresenter {\n private _selectedTeam: Team \| null = null;\n private _loading = false;\n private _saving = false;\n private _showForm = false;\n private _form: IFormModel;\n private _isNew = false;\n\n constructor(\n private _listPresenter: ListPresenter.Interface<Team>,\n private formModelFactory: FormModelFactory.Interface,\n private listTeamsUseCase: ListTeamsUseCase.Interface,\n private getTeamUseCase: GetTeamUseCase.Interface,\n private createTeamUseCase: CreateTeamUseCase.Interface,\n private updateTeamUseCase: UpdateTeamUseCase.Interface,\n private deleteTeamUseCase: DeleteTeamUseCase.Interface,\n private cache: TeamsListCache.Interface\n ) {\n this._form = this.buildForm(false, true);\n makeAutoObservable<\n TeamsPresenterImpl,\n \| \"formModelFactory\"\n \| \"listTeamsUseCase\"\n \| \"getTeamUseCase\"\n \| \"createTeamUseCase\"\n \| \"updateTeamUseCase\"\n \| \"deleteTeamUseCase\"\n \| \"cache\"\n >(this, {\n formModelFactory: false,\n listTeamsUseCase: false,\n getTeamUseCase: false,\n createTeamUseCase: false,\n updateTeamUseCase: false,\n deleteTeamUseCase: false,\n cache: false,\n vm: computed\n });\n }\n\n get vm(): ITeamsPresenterViewModel {\n const team = this._selectedTeam;\n const systemTeam = team !== null && team.system === true;\n const pluginTeam = team !== null && (team.plugin ?? false);\n\n return {\n selectedTeam: this._selectedTeam,\n loading: this._loading,\n saving: this._saving,\n showForm: this._showForm,\n canModify: !systemTeam && !pluginTeam,\n form: this._form.vm\n };\n }\n\n get list(): ListPresenter.Interface<Team> {\n return this._listPresenter;\n }\n\n init(): void {\n const dataSource = new TeamsDataSource(this.listTeamsUseCase, this.cache);\n\n this._listPresenter.init({\n dataSource,\n initialSort: { field: \"createdOn\", direction: \"DESC\" },\n limit: 1000\n });\n }\n\n async selectTeam(id: string): Promise<void> {\n runInAction(() => {\n this._loading = true;\n this._showForm = true;\n this._isNew = false;\n });\n\n try {\n const team = await this.getTeamUseCase.execute(id);\n const systemTeam = team.system === true;\n const pluginTeam = team.plugin ?? false;\n const canModify = !systemTeam && !pluginTeam;\n\n runInAction(() => {\n this._selectedTeam = team;\n this._form = this.buildForm(false, canModify);\n this._form.setData({\n name: team.name,\n slug: team.slug,\n description: team.description,\n roles: team.roles \|\| []\n });\n });\n } finally {\n runInAction(() => {\n this._loading = false;\n });\n }\n }\n\n createNew(): void {\n this._selectedTeam = null;\n this._isNew = true;\n this._form = this.buildForm(true, true);\n this._showForm = true;\n }\n\n deselect(): void {\n this._selectedTeam = null;\n this._showForm = false;\n }\n\n async save(): Promise<Team \| null> {\n const data = await this._form.submit();\n if (!data) {\n return null;\n }\n\n runInAction(() => {\n this._saving = true;\n });\n\n try {\n const roles = ((data.roles as any[]) \|\| []).map((r: any) =>\n typeof r === \"string\" ? r : r.id\n );\n const isUpdate = this._selectedTeam !== null && this._selectedTeam.createdOn;\n\n if (isUpdate) {\n const team = await this.updateTeamUseCase.execute(this._selectedTeam!.id, {\n name: data.name as string,\n description: data.description as string,\n roles\n });\n runInAction(() => {\n this._selectedTeam = team;\n });\n return team;\n } else {\n const team = await this.createTeamUseCase.execute({\n name: data.name as string,\n slug: data.slug as string,\n description: data.description as string,\n roles\n });\n runInAction(() => {\n this._selectedTeam = team;\n this._isNew = false;\n this._form = this.buildForm(false, true);\n this._form.setData({\n name: team.name,\n slug: team.slug,\n description: team.description,\n roles: team.roles \|\| []\n });\n });\n return team;\n }\n } catch {\n return null;\n } finally {\n runInAction(() => {\n this._saving = false;\n });\n }\n }\n\n async deleteTeam(id: string): Promise<void> {\n await this.deleteTeamUseCase.execute(id);\n\n runInAction(() => {\n if (this._selectedTeam !== null && this._selectedTeam.id === id) {\n this._selectedTeam = null;\n this._showForm = false;\n }\n });\n }\n\n private buildForm(isNew: boolean, canModify: boolean): IFormModel {\n return this.formModelFactory.create({\n fields: fields => ({\n name: fields\n .text()\n .label(\"Name\")\n .required(\"Name is required.\")\n .disabled(!canModify)\n .onBlur((value, { form }) => {\n const slugValue = form.field(\"slug\").getValue();\n if (slugValue \|\| !value) {\n return;\n }\n form.field(\"slug\").setValue(\n slugify(String(value), {\n replacement: \"-\",\n lower: true,\n remove: /[*#?<>_{}[\\]+~.()'\"!:;@]/g,\n trim: false\n })\n );\n }),\n slug: fields\n .text()\n .label(\"Slug\")\n .required(\"Slug is required.\")\n .disabled(!isNew \|\| !canModify),\n description: fields\n .text()\n .label(\"Description\")\n .renderer(\"textarea\")\n .defaultValue(\"\")\n .disabled(!canModify),\n roles: fields\n .rolesMultiSelect()\n .label(\"Roles\")\n .required(\"Roles are required.\")\n .disabled(!canModify)\n }),\n layout: layout => [\n layout.row(\"name\", \"slug\"),\n layout.row(\"description\"),\n layout.row(\"roles\")\n ]\n });\n }\n}\n\nexport const TeamsPresenter = Abstraction.createImplementation({\n implementation: TeamsPresenterImpl,\n dependencies: [\n ListPresenter,\n FormModelFactory,\n ListTeamsUseCase,\n GetTeamUseCase,\n CreateTeamUseCase,\n UpdateTeamUseCase,\n DeleteTeamUseCase,\n TeamsListCache\n ]\n});\n"],"names":["TeamsPresenterImpl","_listPresenter","formModelFactory","listTeamsUseCase","getTeamUseCase","createTeamUseCase","updateTeamUseCase","deleteTeamUseCase","cache","makeAutoObservable","computed","team","systemTeam","pluginTeam","dataSource","TeamsDataSource","id","runInAction","canModify","data","roles","r","isUpdate","isNew","fields","value","form","slugValue","slugify","String","layout","TeamsPresenter","Abstraction","ListPresenter","FormModelFactory","ListTeamsUseCase","GetTeamUseCase","CreateTeamUseCase","UpdateTeamUseCase","DeleteTeamUseCase","TeamsListCache"],"mappings":"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"}
1	+ {"version":3,"file":"presentation/accessManagement/teams/TeamsPresenter.js","sources":["../../../../src/presentation/accessManagement/teams/TeamsPresenter.ts"],"sourcesContent":["import { z } from \"zod\";\nimport { makeAutoObservable, runInAction, computed } from \"mobx\";\nimport { StringFormatter } from \"~/features/stringFormatter/abstractions.js\";\nimport { ListPresenter } from \"~/presentation/listPresenter/abstractions.js\";\nimport { FormModelFactory } from \"~/features/formModel/abstractions.js\";\nimport type { IFormModel } from \"~/features/formModel/abstractions.js\";\nimport type { Team } from \"~/features/accessManagement/types.js\";\nimport {\n ListTeamsUseCase,\n TeamsListCache\n} from \"~/features/accessManagement/teams/listTeams/abstractions.js\";\nimport { GetTeamUseCase } from \"~/features/accessManagement/teams/getTeam/abstractions.js\";\nimport { CreateTeamUseCase } from \"~/features/accessManagement/teams/createTeam/abstractions.js\";\nimport { UpdateTeamUseCase } from \"~/features/accessManagement/teams/updateTeam/abstractions.js\";\nimport { DeleteTeamUseCase } from \"~/features/accessManagement/teams/deleteTeam/abstractions.js\";\nimport {\n TeamsPresenter as Abstraction,\n type ITeamsPresenter,\n type ITeamsPresenterViewModel\n} from \"./abstractions.js\";\nimport { TeamsDataSource } from \"./TeamsDataSource.js\";\n\nclass TeamsPresenterImpl implements ITeamsPresenter {\n private _selectedTeam: Team \| null = null;\n private _loading = false;\n private _saving = false;\n private _showForm = false;\n private _form: IFormModel;\n private _isNew = false;\n\n constructor(\n private _listPresenter: ListPresenter.Interface<Team>,\n private formModelFactory: FormModelFactory.Interface,\n private listTeamsUseCase: ListTeamsUseCase.Interface,\n private getTeamUseCase: GetTeamUseCase.Interface,\n private createTeamUseCase: CreateTeamUseCase.Interface,\n private updateTeamUseCase: UpdateTeamUseCase.Interface,\n private deleteTeamUseCase: DeleteTeamUseCase.Interface,\n private cache: TeamsListCache.Interface,\n private stringFormatter: StringFormatter.Interface\n ) {\n this._form = this.buildForm(false, true);\n makeAutoObservable<\n TeamsPresenterImpl,\n \| \"formModelFactory\"\n \| \"listTeamsUseCase\"\n \| \"getTeamUseCase\"\n \| \"createTeamUseCase\"\n \| \"updateTeamUseCase\"\n \| \"deleteTeamUseCase\"\n \| \"cache\"\n \| \"stringFormatter\"\n >(this, {\n formModelFactory: false,\n listTeamsUseCase: false,\n getTeamUseCase: false,\n createTeamUseCase: false,\n updateTeamUseCase: false,\n deleteTeamUseCase: false,\n cache: false,\n stringFormatter: false,\n vm: computed\n });\n }\n\n get vm(): ITeamsPresenterViewModel {\n const team = this._selectedTeam;\n const systemTeam = team !== null && team.system === true;\n const pluginTeam = team !== null && (team.plugin ?? false);\n\n return {\n selectedTeam: this._selectedTeam,\n loading: this._loading,\n saving: this._saving,\n showForm: this._showForm,\n canModify: !systemTeam && !pluginTeam,\n form: this._form.vm\n };\n }\n\n get list(): ListPresenter.Interface<Team> {\n return this._listPresenter;\n }\n\n init(): void {\n const dataSource = new TeamsDataSource(this.listTeamsUseCase, this.cache);\n\n this._listPresenter.init({\n dataSource,\n initialSort: { field: \"createdOn\", direction: \"DESC\" },\n limit: 1000\n });\n }\n\n async selectTeam(id: string): Promise<void> {\n runInAction(() => {\n this._loading = true;\n this._showForm = true;\n this._isNew = false;\n });\n\n try {\n const team = await this.getTeamUseCase.execute(id);\n const systemTeam = team.system === true;\n const pluginTeam = team.plugin ?? false;\n const canModify = !systemTeam && !pluginTeam;\n\n runInAction(() => {\n this._selectedTeam = team;\n this._form = this.buildForm(false, canModify);\n this._form.setData({\n name: team.name,\n slug: team.slug,\n description: team.description ?? \"\",\n roles: team.roles \|\| []\n });\n });\n } finally {\n runInAction(() => {\n this._loading = false;\n });\n }\n }\n\n createNew(): void {\n this._selectedTeam = null;\n this._isNew = true;\n this._form = this.buildForm(true, true);\n this._showForm = true;\n }\n\n deselect(): void {\n this._selectedTeam = null;\n this._showForm = false;\n }\n\n async save(): Promise<Team \| null> {\n const data = await this._form.submit();\n if (!data) {\n return null;\n }\n\n runInAction(() => {\n this._saving = true;\n });\n\n try {\n const roles = ((data.roles as any[]) \|\| []).map((r: any) =>\n typeof r === \"string\" ? r : r.id\n );\n const isUpdate = this._selectedTeam !== null && this._selectedTeam.createdOn;\n\n if (isUpdate) {\n const team = await this.updateTeamUseCase.execute(this._selectedTeam!.id, {\n name: data.name as string,\n description: data.description as string,\n roles\n });\n runInAction(() => {\n this._selectedTeam = team;\n });\n return team;\n } else {\n const team = await this.createTeamUseCase.execute({\n name: data.name as string,\n slug: data.slug as string,\n description: data.description as string,\n roles\n });\n runInAction(() => {\n this._selectedTeam = team;\n this._isNew = false;\n this._form = this.buildForm(false, true);\n this._form.setData({\n name: team.name,\n slug: team.slug,\n description: team.description ?? \"\",\n roles: team.roles \|\| []\n });\n });\n return team;\n }\n // Errors deliberately propagate to the caller, which reports them to the user. This\n // used to be a bare `catch { return null }`, and `null` is also what `save()` returns\n // when client-side validation fails - so a rejected request looked to the view exactly\n // like a form that had not been submitted, and failed silently.\n } finally {\n runInAction(() => {\n this._saving = false;\n });\n }\n }\n\n async deleteTeam(id: string): Promise<void> {\n await this.deleteTeamUseCase.execute(id);\n\n runInAction(() => {\n if (this._selectedTeam !== null && this._selectedTeam.id === id) {\n this._selectedTeam = null;\n this._showForm = false;\n }\n });\n }\n\n private buildForm(isNew: boolean, canModify: boolean): IFormModel {\n return this.formModelFactory.create({\n fields: fields => ({\n name: fields\n .text()\n .label(\"Name\")\n .required(\"Name is required.\")\n .disabled(!canModify)\n .onBlur((value, { form }) => {\n const slugValue = form.field(\"slug\").getValue();\n if (slugValue \|\| !value) {\n return;\n }\n form.field(\"slug\").setValue(this.stringFormatter.slugify(String(value)));\n }),\n slug: fields\n .text()\n .label(\"Slug\")\n .required(\"Slug is required.\")\n .disabled(!isNew \|\| !canModify),\n description: fields\n .text()\n .label(\"Description\")\n .renderer(\"textarea\")\n .defaultValue(\"\")\n .schema(\n z.string().max(500, \"Description cannot be longer than 500 characters.\")\n )\n .disabled(!canModify),\n roles: fields\n .rolesMultiSelect()\n .label(\"Roles\")\n .required(\"Roles are required.\")\n .disabled(!canModify)\n }),\n layout: layout => [\n layout.row(\"name\", \"slug\"),\n layout.row(\"description\"),\n layout.row(\"roles\")\n ]\n });\n }\n}\n\nexport const TeamsPresenter = Abstraction.createImplementation({\n implementation: TeamsPresenterImpl,\n dependencies: [\n ListPresenter,\n FormModelFactory,\n ListTeamsUseCase,\n GetTeamUseCase,\n CreateTeamUseCase,\n UpdateTeamUseCase,\n DeleteTeamUseCase,\n TeamsListCache,\n StringFormatter\n ]\n});\n"],"names":["TeamsPresenterImpl","_listPresenter","formModelFactory","listTeamsUseCase","getTeamUseCase","createTeamUseCase","updateTeamUseCase","deleteTeamUseCase","cache","stringFormatter","makeAutoObservable","computed","team","systemTeam","pluginTeam","dataSource","TeamsDataSource","id","runInAction","canModify","data","roles","r","isUpdate","isNew","fields","value","form","slugValue","String","z","layout","TeamsPresenter","Abstraction","ListPresenter","FormModelFactory","ListTeamsUseCase","GetTeamUseCase","CreateTeamUseCase","UpdateTeamUseCase","DeleteTeamUseCase","TeamsListCache","StringFormatter"],"mappings":"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"}

package/presentation/accessManagement/teams/components/TeamsView.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from "react";
-export declare const TeamsView: (() => React.JSX.Element) & {
-    displayName: string;
+export declare const TeamsView: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
 };

package/presentation/accessManagement/teams/components/TeamsView.js CHANGED Viewed

@@ -147,12 +147,16 @@ const TeamsForm = observer(({ newEntry, id })=>{
         newEntry
     ]);
     const handleSave = useCallback(async ()=>{
-        const team = await presenter.save();
-        if (team) {
-            if (!vm.selectedTeam || vm.selectedTeam.id !== team.id) goToRoute(Routes.Teams.List, {
-                id: team.id
-            });
-            showSnackbar("Team saved successfully!");
+        try {
+            const team = await presenter.save();
+            if (team) {
+                if (!vm.selectedTeam || vm.selectedTeam.id !== team.id) goToRoute(Routes.Teams.List, {
+                    id: team.id
+                });
+                showSnackbar("Team saved successfully!");
+            }
+        } catch (e) {
+            showSnackbar(e.message);
         }
     }, [
         presenter,

package/presentation/accessManagement/teams/components/TeamsView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"presentation/accessManagement/teams/components/TeamsView.js","sources":["../../../../../src/presentation/accessManagement/teams/components/TeamsView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport {\n SplitView,\n LeftPanel,\n RightPanel,\n SimpleForm,\n SimpleFormHeader,\n SimpleFormContent,\n SimpleFormFooter,\n EmptyView,\n useSnackbar,\n useConfirmationDialog,\n SearchUI,\n useRouter,\n useRoute\n} from \"~/index.js\";\nimport { FormView } from \"~/features/formModel/FormView.js\";\nimport {\n Alert,\n Button,\n DataList,\n DataListModal,\n DeleteIcon,\n Grid,\n List,\n OverlayLoader,\n Select,\n Tooltip\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { TeamsPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport type { Team } from \"~/features/accessManagement/types.js\";\nimport { FormErrors } from \"~/index.js\";\n\nconst SORTERS = [\n { label: \"Newest to oldest\", sorter: \"createdOn_DESC\" },\n { label: \"Oldest to newest\", sorter: \"createdOn_ASC\" },\n { label: \"Name A-Z\", sorter: \"name_ASC\" },\n { label: \"Name Z-A\", sorter: \"name_DESC\" }\n];\n\nconst deserializeSorters = (data: string): [string, \"asc\" \| \"desc\"] => {\n const [field, order] = data.split(\"_\");\n return [field, order.toLowerCase() === \"asc\" ? \"asc\" : \"desc\"];\n};\n\nconst TeamsDataList = observer(({ activeId }: { activeId: string \| undefined }) => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { goToRoute } = useRouter();\n const { showSnackbar } = useSnackbar();\n const { showConfirmation } = useConfirmationDialog({\n dataTestId: \"default-data-list.delete-dialog\"\n });\n\n const [filter, setFilter] = useState(\"\");\n const [sort, setSort] = useState(SORTERS[0].sorter);\n\n const teams = presenter.list.vm.rows;\n const loading = presenter.list.vm.pagination.loading;\n\n const filteredData = useMemo(() => {\n if (filter === \"\") {\n return teams;\n }\n const lc = filter.toLowerCase();\n return teams.filter(\n (t: Team) =>\n t.name.toLowerCase().includes(lc) \|\|\n t.slug.toLowerCase().includes(lc) \|\|\n (t.description && t.description.toLowerCase().includes(lc))\n );\n }, [teams, filter]);\n\n const sortedData = useMemo(() => {\n if (!sort) {\n return filteredData;\n }\n const [key, order] = deserializeSorters(sort);\n return orderBy(filteredData, [key], [order]);\n }, [filteredData, sort]);\n\n const deleteItem = useCallback(\n (item: Team) => {\n showConfirmation(async () => {\n try {\n await presenter.deleteTeam(item.id);\n showSnackbar(`Team \"${item.slug}\" deleted.`);\n if (activeId === item.id) {\n goToRoute(Routes.Teams.List);\n }\n } catch (e: any) {\n showSnackbar(e.message);\n }\n });\n },\n [activeId]\n );\n\n return (\n <DataList\n title={\"Teams\"}\n refresh={null}\n actions={\n <Button\n text={\"New\"}\n icon={<AddIcon />}\n size={\"sm\"}\n className={\"ml-xs\"}\n data-testid=\"new-record-button\"\n onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n />\n }\n data={sortedData}\n loading={loading}\n search={\n <SearchUI\n value={filter}\n onChange={setFilter}\n inputPlaceholder={\"Search teams...\"}\n />\n }\n modalOverlay={\n <DataListModal.Content>\n <Grid>\n <Grid.Column span={12}>\n <Select\n value={sort}\n onChange={setSort}\n label={\"Sort by\"}\n options={SORTERS.map(({ label, sorter: value }) => ({\n label,\n value\n }))}\n />\n </Grid.Column>\n </Grid>\n </DataListModal.Content>\n }\n modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n >\n {({ data }: { data: Team[] }) => (\n <List data-testid=\"default-data-list\">\n {data.map(item => (\n <List.Item\n key={item.id}\n selected={item.id === activeId}\n title={item.name}\n description={item.description}\n onClick={() => goToRoute(Routes.Teams.List, { id: item.id })}\n actions={\n item.system \|\| item.plugin ? (\n <Tooltip\n content={\n item.system\n ? \"Cannot delete system teams.\"\n : \"Cannot delete teams registered via extensions.\"\n }\n trigger={<DeleteIcon disabled />}\n />\n ) : (\n <DeleteIcon\n onClick={() => deleteItem(item)}\n data-testid={\"default-data-list.delete\"}\n />\n )\n }\n />\n ))}\n </List>\n )}\n </DataList>\n );\n});\n\nconst TeamsForm = observer(({ newEntry, id }: { newEntry: boolean; id: string \| undefined }) => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { goToRoute } = useRouter();\n const { showSnackbar } = useSnackbar();\n const { vm } = presenter;\n\n useEffect(() => {\n if (id) {\n presenter.selectTeam(id);\n } else if (newEntry) {\n presenter.createNew();\n } else {\n presenter.deselect();\n }\n }, [id, newEntry]);\n\n const handleSave = useCallback(async () => {\n const team = await presenter.save();\n if (team) {\n if (!vm.selectedTeam \|\| vm.selectedTeam.id !== team.id) {\n goToRoute(Routes.Teams.List, { id: team.id });\n }\n showSnackbar(\"Team saved successfully!\");\n }\n }, [presenter, vm.selectedTeam]);\n\n if (!vm.showForm) {\n return (\n <EmptyView\n icon={<SettingsIcon />}\n title={\"Click on the left side list to display team details or create a...\"}\n action={\n <Button\n text={\"New Team\"}\n icon={<AddIcon />}\n data-testid=\"new-record-button\"\n onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n />\n }\n />\n );\n }\n\n return (\n <SimpleForm>\n {vm.loading \|\| vm.saving ? <OverlayLoader /> : null}\n <SimpleFormHeader\n title={vm.selectedTeam ? vm.selectedTeam.name \|\| \"Untitled\" : \"Untitled\"}\n />\n <SimpleFormContent>\n {vm.selectedTeam && vm.selectedTeam.system ? (\n <Alert type={\"info\"} title={\"Permissions are locked\"}>\n This is a protected system team and you can't modify its permissions.\n </Alert>\n ) : null}\n {vm.selectedTeam && vm.selectedTeam.plugin ? (\n <Alert type={\"info\"} title={\"Important\"}>\n This team is registered via an extension, and cannot be modified.\n </Alert>\n ) : null}\n <FormErrors form={vm.form} className={\"mb-md\"} />\n <FormView name={\"Team\"} form={vm.form} />\n </SimpleFormContent>\n <SimpleFormFooter>\n <Button\n variant={\"secondary\"}\n text={\"Cancel\"}\n onClick={() => goToRoute(Routes.Teams.List)}\n />\n {vm.canModify ? (\n <Button\n text={\"Save\"}\n data-testid=\"admin.am.team.new.save\"\n onClick={handleSave}\n />\n ) : null}\n </SimpleFormFooter>\n </SimpleForm>\n );\n});\n\nexport const TeamsView = observer(() => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { route } = useRoute(Routes.Teams.List);\n\n useEffect(() => {\n presenter.init();\n }, [presenter]);\n\n return (\n <SplitView>\n <LeftPanel>\n <TeamsDataList activeId={route.params.id} />\n </LeftPanel>\n <RightPanel>\n <TeamsForm newEntry={route.params.new === true} id={route.params.id} />\n </RightPanel>\n </SplitView>\n );\n});\n"],"names":["SORTERS","deserializeSorters","data","field","order","TeamsDataList","observer","activeId","presenter","useFeature","TeamsPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","filter","setFilter","useState","sort","setSort","teams","loading","filteredData","useMemo","lc","t","sortedData","key","orderBy","deleteItem","useCallback","item","Routes","e","DataList","Button","AddIcon","SearchUI","DataListModal","Grid","Select","label","value","List","Tooltip","DeleteIcon","TeamsForm","newEntry","id","vm","useEffect","handleSave","team","EmptyView","SettingsIcon","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","Alert","FormErrors","FormView","SimpleFormFooter","TeamsView","route","useRoute","SplitView","LeftPanel","RightPanel"],"mappings":"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"}
1	+ {"version":3,"file":"presentation/accessManagement/teams/components/TeamsView.js","sources":["../../../../../src/presentation/accessManagement/teams/components/TeamsView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport orderBy from \"lodash/orderBy.js\";\nimport { useFeature } from \"@webiny/app\";\nimport {\n SplitView,\n LeftPanel,\n RightPanel,\n SimpleForm,\n SimpleFormHeader,\n SimpleFormContent,\n SimpleFormFooter,\n EmptyView,\n useSnackbar,\n useConfirmationDialog,\n SearchUI,\n useRouter,\n useRoute\n} from \"~/index.js\";\nimport { FormView } from \"~/features/formModel/FormView.js\";\nimport {\n Alert,\n Button,\n DataList,\n DataListModal,\n DeleteIcon,\n Grid,\n List,\n OverlayLoader,\n Select,\n Tooltip\n} from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport { TeamsPresenterFeature } from \"../feature.js\";\nimport { Routes } from \"../../routes.js\";\nimport type { Team } from \"~/features/accessManagement/types.js\";\nimport { FormErrors } from \"~/index.js\";\n\nconst SORTERS = [\n { label: \"Newest to oldest\", sorter: \"createdOn_DESC\" },\n { label: \"Oldest to newest\", sorter: \"createdOn_ASC\" },\n { label: \"Name A-Z\", sorter: \"name_ASC\" },\n { label: \"Name Z-A\", sorter: \"name_DESC\" }\n];\n\nconst deserializeSorters = (data: string): [string, \"asc\" \| \"desc\"] => {\n const [field, order] = data.split(\"_\");\n return [field, order.toLowerCase() === \"asc\" ? \"asc\" : \"desc\"];\n};\n\nconst TeamsDataList = observer(({ activeId }: { activeId: string \| undefined }) => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { goToRoute } = useRouter();\n const { showSnackbar } = useSnackbar();\n const { showConfirmation } = useConfirmationDialog({\n dataTestId: \"default-data-list.delete-dialog\"\n });\n\n const [filter, setFilter] = useState(\"\");\n const [sort, setSort] = useState(SORTERS[0].sorter);\n\n const teams = presenter.list.vm.rows;\n const loading = presenter.list.vm.pagination.loading;\n\n const filteredData = useMemo(() => {\n if (filter === \"\") {\n return teams;\n }\n const lc = filter.toLowerCase();\n return teams.filter(\n (t: Team) =>\n t.name.toLowerCase().includes(lc) \|\|\n t.slug.toLowerCase().includes(lc) \|\|\n (t.description && t.description.toLowerCase().includes(lc))\n );\n }, [teams, filter]);\n\n const sortedData = useMemo(() => {\n if (!sort) {\n return filteredData;\n }\n const [key, order] = deserializeSorters(sort);\n return orderBy(filteredData, [key], [order]);\n }, [filteredData, sort]);\n\n const deleteItem = useCallback(\n (item: Team) => {\n showConfirmation(async () => {\n try {\n await presenter.deleteTeam(item.id);\n showSnackbar(`Team \"${item.slug}\" deleted.`);\n if (activeId === item.id) {\n goToRoute(Routes.Teams.List);\n }\n } catch (e: any) {\n showSnackbar(e.message);\n }\n });\n },\n [activeId]\n );\n\n return (\n <DataList\n title={\"Teams\"}\n refresh={null}\n actions={\n <Button\n text={\"New\"}\n icon={<AddIcon />}\n size={\"sm\"}\n className={\"ml-xs\"}\n data-testid=\"new-record-button\"\n onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n />\n }\n data={sortedData}\n loading={loading}\n search={\n <SearchUI\n value={filter}\n onChange={setFilter}\n inputPlaceholder={\"Search teams...\"}\n />\n }\n modalOverlay={\n <DataListModal.Content>\n <Grid>\n <Grid.Column span={12}>\n <Select\n value={sort}\n onChange={setSort}\n label={\"Sort by\"}\n options={SORTERS.map(({ label, sorter: value }) => ({\n label,\n value\n }))}\n />\n </Grid.Column>\n </Grid>\n </DataListModal.Content>\n }\n modalOverlayAction={<DataListModal.Trigger data-testid={\"default-data-list.filter\"} />}\n >\n {({ data }: { data: Team[] }) => (\n <List data-testid=\"default-data-list\">\n {data.map(item => (\n <List.Item\n key={item.id}\n selected={item.id === activeId}\n title={item.name}\n description={item.description}\n onClick={() => goToRoute(Routes.Teams.List, { id: item.id })}\n actions={\n item.system \|\| item.plugin ? (\n <Tooltip\n content={\n item.system\n ? \"Cannot delete system teams.\"\n : \"Cannot delete teams registered via extensions.\"\n }\n trigger={<DeleteIcon disabled />}\n />\n ) : (\n <DeleteIcon\n onClick={() => deleteItem(item)}\n data-testid={\"default-data-list.delete\"}\n />\n )\n }\n />\n ))}\n </List>\n )}\n </DataList>\n );\n});\n\nconst TeamsForm = observer(({ newEntry, id }: { newEntry: boolean; id: string \| undefined }) => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { goToRoute } = useRouter();\n const { showSnackbar } = useSnackbar();\n const { vm } = presenter;\n\n useEffect(() => {\n if (id) {\n presenter.selectTeam(id);\n } else if (newEntry) {\n presenter.createNew();\n } else {\n presenter.deselect();\n }\n }, [id, newEntry]);\n\n const handleSave = useCallback(async () => {\n try {\n const team = await presenter.save();\n if (team) {\n if (!vm.selectedTeam \|\| vm.selectedTeam.id !== team.id) {\n goToRoute(Routes.Teams.List, { id: team.id });\n }\n showSnackbar(\"Team saved successfully!\");\n }\n } catch (e: any) {\n showSnackbar(e.message);\n }\n }, [presenter, vm.selectedTeam]);\n\n if (!vm.showForm) {\n return (\n <EmptyView\n icon={<SettingsIcon />}\n title={\"Click on the left side list to display team details or create a...\"}\n action={\n <Button\n text={\"New Team\"}\n icon={<AddIcon />}\n data-testid=\"new-record-button\"\n onClick={() => goToRoute(Routes.Teams.List, { new: true })}\n />\n }\n />\n );\n }\n\n return (\n <SimpleForm>\n {vm.loading \|\| vm.saving ? <OverlayLoader /> : null}\n <SimpleFormHeader\n title={vm.selectedTeam ? vm.selectedTeam.name \|\| \"Untitled\" : \"Untitled\"}\n />\n <SimpleFormContent>\n {vm.selectedTeam && vm.selectedTeam.system ? (\n <Alert type={\"info\"} title={\"Permissions are locked\"}>\n This is a protected system team and you can't modify its permissions.\n </Alert>\n ) : null}\n {vm.selectedTeam && vm.selectedTeam.plugin ? (\n <Alert type={\"info\"} title={\"Important\"}>\n This team is registered via an extension, and cannot be modified.\n </Alert>\n ) : null}\n <FormErrors form={vm.form} className={\"mb-md\"} />\n <FormView name={\"Team\"} form={vm.form} />\n </SimpleFormContent>\n <SimpleFormFooter>\n <Button\n variant={\"secondary\"}\n text={\"Cancel\"}\n onClick={() => goToRoute(Routes.Teams.List)}\n />\n {vm.canModify ? (\n <Button\n text={\"Save\"}\n data-testid=\"admin.am.team.new.save\"\n onClick={handleSave}\n />\n ) : null}\n </SimpleFormFooter>\n </SimpleForm>\n );\n});\n\nexport const TeamsView = observer(() => {\n const { presenter } = useFeature(TeamsPresenterFeature);\n const { route } = useRoute(Routes.Teams.List);\n\n useEffect(() => {\n presenter.init();\n }, [presenter]);\n\n return (\n <SplitView>\n <LeftPanel>\n <TeamsDataList activeId={route.params.id} />\n </LeftPanel>\n <RightPanel>\n <TeamsForm newEntry={route.params.new === true} id={route.params.id} />\n </RightPanel>\n </SplitView>\n );\n});\n"],"names":["SORTERS","deserializeSorters","data","field","order","TeamsDataList","observer","activeId","presenter","useFeature","TeamsPresenterFeature","goToRoute","useRouter","showSnackbar","useSnackbar","showConfirmation","useConfirmationDialog","filter","setFilter","useState","sort","setSort","teams","loading","filteredData","useMemo","lc","t","sortedData","key","orderBy","deleteItem","useCallback","item","Routes","e","DataList","Button","AddIcon","SearchUI","DataListModal","Grid","Select","label","value","List","Tooltip","DeleteIcon","TeamsForm","newEntry","id","vm","useEffect","handleSave","team","EmptyView","SettingsIcon","SimpleForm","OverlayLoader","SimpleFormHeader","SimpleFormContent","Alert","FormErrors","FormView","SimpleFormFooter","TeamsView","route","useRoute","SplitView","LeftPanel","RightPanel"],"mappings":"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"}

package/presentation/commandPalette/CommandPalettePresenter.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { Command, CommandPalettePresenter as Abstraction, type CommandPaletteViewModel } from "./abstractions.js";
+export declare class CommandPalettePresenter implements Abstraction.Interface {
+    private getCommands;
+    private isOpen;
+    private activeCommandName;
+    private aiModeActive;
+    private query;
+    private resolvedCommands;
+    constructor(getCommands: () => Command.Interface[]);
+    init(): void;
+    get shortcutKeys(): Record<string, (e: KeyboardEvent) => void>;
+    get vm(): CommandPaletteViewModel;
+    open(): void;
+    close(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
+    toggle(): void;
+    useCommand(name: string): void;
+    cancelCommand(): void;
+}

package/presentation/commandPalette/CommandPalettePresenter.js ADDED Viewed

@@ -0,0 +1,91 @@
+import { makeAutoObservable } from "mobx";
+class CommandPalettePresenter {
+    constructor(getCommands){
+        this.getCommands = getCommands;
+        this.isOpen = false;
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+        this.resolvedCommands = [];
+        makeAutoObservable(this);
+    }
+    init() {
+        this.resolvedCommands = this.getCommands();
+    }
+    get shortcutKeys() {
+        const keys = {};
+        for (const cmd of this.resolvedCommands)if (cmd.shortcut) keys[cmd.shortcut] = (e)=>{
+            e.preventDefault();
+            this.useCommand(cmd.name);
+        };
+        return keys;
+    }
+    get vm() {
+        const activeCmd = null !== this.activeCommandName ? this.resolvedCommands.find((c)=>c.name === this.activeCommandName) : null;
+        return {
+            isOpen: this.isOpen,
+            aiModeActive: this.aiModeActive,
+            query: this.query,
+            commands: this.resolvedCommands.map((cmd)=>({
+                    name: cmd.name,
+                    label: cmd.label,
+                    description: cmd.description,
+                    icon: cmd.icon,
+                    category: cmd.category,
+                    keywords: cmd.keywords,
+                    shortcut: cmd.shortcut,
+                    hasDetailView: Boolean(cmd.detailView)
+                })),
+            activeCommand: activeCmd && activeCmd.detailView ? {
+                command: activeCmd,
+                DetailView: activeCmd.detailView
+            } : null
+        };
+    }
+    open() {
+        this.resolvedCommands = this.getCommands();
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+        this.activeCommandName = null;
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    enterAiMode() {
+        this.aiModeActive = true;
+        this.query = "";
+    }
+    exitAiMode() {
+        this.aiModeActive = false;
+        this.query = "";
+    }
+    setQuery(query) {
+        this.query = query;
+    }
+    toggle() {
+        if (this.isOpen) this.close();
+        else this.open();
+    }
+    useCommand(name) {
+        const cmd = this.resolvedCommands.find((c)=>c.name === name);
+        if (!cmd) return;
+        if (cmd.entersAiMode) return void this.enterAiMode();
+        if (cmd.detailView) {
+            this.activeCommandName = name;
+            this.isOpen = true;
+            return;
+        }
+        cmd.execute?.();
+        this.close();
+    }
+    cancelCommand() {
+        this.activeCommandName = null;
+    }
+}
+export { CommandPalettePresenter };
+//# sourceMappingURL=CommandPalettePresenter.js.map

package/presentation/commandPalette/CommandPalettePresenter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"presentation/commandPalette/CommandPalettePresenter.js","sources":["../../../src/presentation/commandPalette/CommandPalettePresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n Command,\n CommandPalettePresenter as Abstraction,\n type CommandPaletteViewModel\n} from \"./abstractions.js\";\n\nexport class CommandPalettePresenter implements Abstraction.Interface {\n private isOpen = false;\n private activeCommandName: string | null = null;\n private aiModeActive = false;\n private query = \"\";\n private resolvedCommands: Command.Interface[] = [];\n\n constructor(private getCommands: () => Command.Interface[]) {\n makeAutoObservable(this);\n }\n\n init(): void {\n this.resolvedCommands = this.getCommands();\n }\n\n get shortcutKeys(): Record<string, (e: KeyboardEvent) => void> {\n const keys: Record<string, (e: KeyboardEvent) => void> = {};\n for (const cmd of this.resolvedCommands) {\n if (cmd.shortcut) {\n keys[cmd.shortcut] = (e: KeyboardEvent) => {\n e.preventDefault();\n this.useCommand(cmd.name);\n };\n }\n }\n return keys;\n }\n\n get vm(): CommandPaletteViewModel {\n const activeCmd =\n this.activeCommandName !== null\n ? this.resolvedCommands.find(c => c.name === this.activeCommandName)\n : null;\n\n return {\n isOpen: this.isOpen,\n aiModeActive: this.aiModeActive,\n query: this.query,\n commands: this.resolvedCommands.map(cmd => ({\n name: cmd.name,\n label: cmd.label,\n description: cmd.description,\n icon: cmd.icon,\n category: cmd.category,\n keywords: cmd.keywords,\n shortcut: cmd.shortcut,\n hasDetailView: Boolean(cmd.detailView)\n })),\n activeCommand:\n activeCmd && activeCmd.detailView\n ? {\n command: activeCmd,\n DetailView: activeCmd.detailView\n }\n : null\n };\n }\n\n open(): void {\n this.resolvedCommands = this.getCommands();\n this.activeCommandName = null;\n this.aiModeActive = false;\n this.query = \"\";\n this.isOpen = true;\n }\n\n close(): void {\n this.isOpen = false;\n this.activeCommandName = null;\n this.aiModeActive = false;\n this.query = \"\";\n }\n\n enterAiMode(): void {\n this.aiModeActive = true;\n this.query = \"\";\n }\n\n exitAiMode(): void {\n this.aiModeActive = false;\n this.query = \"\";\n }\n\n setQuery(query: string): void {\n this.query = query;\n }\n\n toggle(): void {\n if (this.isOpen) {\n this.close();\n } else {\n this.open();\n }\n }\n\n useCommand(name: string): void {\n const cmd = this.resolvedCommands.find(c => c.name === name);\n if (!cmd) {\n return;\n }\n\n if (cmd.entersAiMode) {\n // A mode replaces the command list and keeps the input row, so the palette stays open.\n this.enterAiMode();\n return;\n }\n\n if (cmd.detailView) {\n this.activeCommandName = name;\n this.isOpen = true;\n return;\n }\n\n cmd.execute?.();\n this.close();\n }\n\n cancelCommand(): void {\n this.activeCommandName = null;\n }\n}\n"],"names":["CommandPalettePresenter","getCommands","makeAutoObservable","keys","cmd","e","activeCmd","c","Boolean","query","name"],"mappings":";AAOO,MAAMA;IAOT,YAAoBC,WAAsC,CAAE;aAAxCA,WAAW,GAAXA;aANZ,MAAM,GAAG;aACT,iBAAiB,GAAkB;aACnC,YAAY,GAAG;aACf,KAAK,GAAG;aACR,gBAAgB,GAAwB,EAAE;QAG9CC,mBAAmB,IAAI;IAC3B;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;IAC5C;IAEA,IAAI,eAA2D;QAC3D,MAAMC,OAAmD,CAAC;QAC1D,KAAK,MAAMC,OAAO,IAAI,CAAC,gBAAgB,CACnC,IAAIA,IAAI,QAAQ,EACZD,IAAI,CAACC,IAAI,QAAQ,CAAC,GAAG,CAACC;YAClBA,EAAE,cAAc;YAChB,IAAI,CAAC,UAAU,CAACD,IAAI,IAAI;QAC5B;QAGR,OAAOD;IACX;IAEA,IAAI,KAA8B;QAC9B,MAAMG,YACF,AAA2B,SAA3B,IAAI,CAAC,iBAAiB,GAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACC,CAAAA,IAAKA,EAAE,IAAI,KAAK,IAAI,CAAC,iBAAiB,IACjE;QAEV,OAAO;YACH,QAAQ,IAAI,CAAC,MAAM;YACnB,cAAc,IAAI,CAAC,YAAY;YAC/B,OAAO,IAAI,CAAC,KAAK;YACjB,UAAU,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAACH,CAAAA,MAAQ;oBACxC,MAAMA,IAAI,IAAI;oBACd,OAAOA,IAAI,KAAK;oBAChB,aAAaA,IAAI,WAAW;oBAC5B,MAAMA,IAAI,IAAI;oBACd,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,UAAUA,IAAI,QAAQ;oBACtB,eAAeI,QAAQJ,IAAI,UAAU;gBACzC;YACA,eACIE,aAAaA,UAAU,UAAU,GAC3B;gBACI,SAASA;gBACT,YAAYA,UAAU,UAAU;YACpC,IACA;QACd;IACJ;IAEA,OAAa;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;QACxC,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;QACb,IAAI,CAAC,MAAM,GAAG;IAClB;IAEA,QAAc;QACV,IAAI,CAAC,MAAM,GAAG;QACd,IAAI,CAAC,iBAAiB,GAAG;QACzB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,cAAoB;QAChB,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,aAAmB;QACf,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG;IACjB;IAEA,SAASG,KAAa,EAAQ;QAC1B,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,SAAe;QACX,IAAI,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,KAAK;aAEV,IAAI,CAAC,IAAI;IAEjB;IAEA,WAAWC,IAAY,EAAQ;QAC3B,MAAMN,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,IAAI,KAAKG;QACvD,IAAI,CAACN,KACD;QAGJ,IAAIA,IAAI,YAAY,EAAE,YAElB,IAAI,CAAC,WAAW;QAIpB,IAAIA,IAAI,UAAU,EAAE;YAChB,IAAI,CAAC,iBAAiB,GAAGM;YACzB,IAAI,CAAC,MAAM,GAAG;YACd;QACJ;QAEAN,IAAI,OAAO;QACX,IAAI,CAAC,KAAK;IACd;IAEA,gBAAsB;QAClB,IAAI,CAAC,iBAAiB,GAAG;IAC7B;AACJ"}

package/presentation/commandPalette/abstractions.d.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import type React from "react";
+import { Abstraction } from "@webiny/di";
+export interface CommandDetailProps {
+    command: ICommand;
+    onClose: () => void;
+    onBack: () => void;
+}
+/**
+ * A command registered with the command palette via dependency injection. Register an
+ * implementation with `Command.createImplementation(...)` and add it to the container;
+ * the palette resolves all of them with `container.resolveAll(Command)`.
+ */
+export interface ICommand {
+    name: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    keywords?: string[];
+    shortcut?: string;
+    execute?(params?: unknown): void | Promise<void>;
+    detailView?: React.ComponentType<CommandDetailProps>;
+    entersAiMode?: boolean;
+}
+export declare const Command: Abstraction<ICommand>;
+export declare namespace Command {
+    type Interface = ICommand;
+    type DetailProps = CommandDetailProps;
+}
+export interface CommandItemVm {
+    name: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    keywords?: string[];
+    shortcut?: string;
+    hasDetailView: boolean;
+}
+export interface ActiveCommandVm {
+    command: ICommand;
+    DetailView: React.ComponentType<CommandDetailProps>;
+}
+export interface CommandPaletteViewModel {
+    isOpen: boolean;
+    /**
+     * A mode is showing instead of the command list. The palette keeps ONE input row across every
+     * mode, so this is the palette's state rather than the mode's.
+     */
+    aiModeActive: boolean;
+    /**
+     * What the user has typed. Owned here rather than by the component because it is cleared
+     * whenever the palette opens, closes, or enters or leaves a mode.
+     */
+    query: string;
+    commands: CommandItemVm[];
+    activeCommand: ActiveCommandVm | null;
+}
+export interface ICommandPalettePresenter {
+    vm: CommandPaletteViewModel;
+    shortcutKeys: Record<string, (e: KeyboardEvent) => void>;
+    init(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    useCommand(name: string): void;
+    cancelCommand(): void;
+    enterAiMode(): void;
+    exitAiMode(): void;
+    setQuery(query: string): void;
+}
+export declare const CommandPalettePresenter: Abstraction<ICommandPalettePresenter>;
+export declare namespace CommandPalettePresenter {
+    type Interface = ICommandPalettePresenter;
+    type ViewModel = CommandPaletteViewModel;
+}

package/presentation/commandPalette/abstractions.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { createAbstraction } from "@webiny/feature/admin";
+import { Abstraction } from "@webiny/di";
+const Command = createAbstraction("Command");
+const CommandPalettePresenter = new Abstraction("CommandPalettePresenter");
+export { Command, CommandPalettePresenter };
+//# sourceMappingURL=abstractions.js.map

package/presentation/commandPalette/abstractions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"presentation/commandPalette/abstractions.js","sources":["../../../src/presentation/commandPalette/abstractions.ts"],"sourcesContent":["import type React from \"react\";\nimport { createAbstraction } from \"@webiny/feature/admin\";\nimport { Abstraction } from \"@webiny/di\";\n\nexport interface CommandDetailProps {\n command: ICommand;\n onClose: () => void;\n onBack: () => void;\n}\n\n/**\n * A command registered with the command palette via dependency injection. Register an\n * implementation with `Command.createImplementation(...)` and add it to the container;\n * the palette resolves all of them with `container.resolveAll(Command)`.\n */\nexport interface ICommand {\n name: string;\n label: string;\n description?: string;\n icon?: React.ReactNode;\n category?: string;\n keywords?: string[];\n /* Global hotkey (is-hotkey syntax, e.g. \"cmd+shift+m\") that runs this command. */\n shortcut?: string;\n /* Omitted by a command that only selects a mode; there is no action to run. */\n execute?(params?: unknown): void | Promise<void>;\n /* Optional React view rendered inside the palette when the command is selected. */\n detailView?: React.ComponentType<CommandDetailProps>;\n /*\n * Selecting this command switches the palette into AI mode rather than doing something. A mode\n * needs the shared input row, so the palette stays open and `execute` is never called.\n *\n * Named after the one mode that exists. If a second one ever arrives, this becomes\n * `entersMode: \"aiChat\"` and the palette looks the mode up by name instead of hardcoding it.\n */\n entersAiMode?: boolean;\n}\n\nexport const Command = createAbstraction<ICommand>(\"Command\");\n\nexport namespace Command {\n export type Interface = ICommand;\n export type DetailProps = CommandDetailProps;\n}\n\nexport interface CommandItemVm {\n name: string;\n label: string;\n description?: string;\n icon?: React.ReactNode;\n category?: string;\n keywords?: string[];\n shortcut?: string;\n hasDetailView: boolean;\n}\n\nexport interface ActiveCommandVm {\n command: ICommand;\n DetailView: React.ComponentType<CommandDetailProps>;\n}\n\nexport interface CommandPaletteViewModel {\n isOpen: boolean;\n /**\n * A mode is showing instead of the command list. The palette keeps ONE input row across every\n * mode, so this is the palette's state rather than the mode's.\n */\n aiModeActive: boolean;\n /**\n * What the user has typed. Owned here rather than by the component because it is cleared\n * whenever the palette opens, closes, or enters or leaves a mode.\n */\n query: string;\n commands: CommandItemVm[];\n activeCommand: ActiveCommandVm | null;\n}\n\nexport interface ICommandPalettePresenter {\n vm: CommandPaletteViewModel;\n shortcutKeys: Record<string, (e: KeyboardEvent) => void>;\n init(): void;\n open(): void;\n close(): void;\n toggle(): void;\n useCommand(name: string): void;\n cancelCommand(): void;\n enterAiMode(): void;\n exitAiMode(): void;\n setQuery(query: string): void;\n}\n\nexport const CommandPalettePresenter = new Abstraction<ICommandPalettePresenter>(\n \"CommandPalettePresenter\"\n);\n\nexport namespace CommandPalettePresenter {\n export type Interface = ICommandPalettePresenter;\n export type ViewModel = CommandPaletteViewModel;\n}\n"],"names":["Command","createAbstraction","CommandPalettePresenter","Abstraction"],"mappings":";;AAsCO,MAAMA,UAAUC,kBAA4B;AAqD5C,MAAMC,0BAA0B,IAAIC,YACvC"}

package/presentation/commandPalette/commands/AskAiCommand.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+/**
+ * Discoverable entry point for the palette's AI mode.
+ *
+ * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting
+ * this switches the palette instead of running an action, and the palette stays open. A command
+ * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.
+ *
+ * It exists as a command at all so it stays searchable ("ai", "ask", "assistant") for people who
+ * never learn the space shortcut.
+ */
+declare class AskAiCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    icon: React.JSX.Element;
+    entersAiMode: boolean;
+}
+export declare const AskAiCommand: typeof AskAiCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};

package/presentation/commandPalette/commands/AskAiCommand.js ADDED Viewed

@@ -0,0 +1,33 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/auto_awesome.svg";
+import { Command } from "../abstractions.js";
+class AskAiCommandImpl {
+    constructor(){
+        this.name = "admin.ai.ask";
+        this.label = "Ask AI";
+        this.description = "Ask about your content in plain language";
+        this.category = "Assistant";
+        this.keywords = [
+            "ai",
+            "ask",
+            "assistant",
+            "chat",
+            "search"
+        ];
+        this.icon = /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            size: "sm",
+            color: "neutral-strong",
+            label: ""
+        });
+        this.entersAiMode = true;
+    }
+}
+const AskAiCommand = Command.createImplementation({
+    implementation: AskAiCommandImpl,
+    dependencies: []
+});
+export { AskAiCommand };
+//# sourceMappingURL=AskAiCommand.js.map

package/presentation/commandPalette/commands/AskAiCommand.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"presentation/commandPalette/commands/AskAiCommand.js","sources":["../../../../src/presentation/commandPalette/commands/AskAiCommand.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as AiIcon } from \"@webiny/icons/auto_awesome.svg\";\nimport { Command } from \"../abstractions.js\";\n\n/**\n * Discoverable entry point for the palette's AI mode.\n *\n * `entersAiMode` rather than `execute`: the design keeps one input row across every mode, so selecting\n * this switches the palette instead of running an action, and the palette stays open. A command\n * without a `detailView` is otherwise executed and then closed, which a mode cannot survive.\n *\n * It exists as a command at all so it stays searchable (\"ai\", \"ask\", \"assistant\") for people who\n * never learn the space shortcut.\n */\nclass AskAiCommandImpl implements Command.Interface {\n name = \"admin.ai.ask\";\n label = \"Ask AI\";\n description = \"Ask about your content in plain language\";\n category = \"Assistant\";\n keywords = [\"ai\", \"ask\", \"assistant\", \"chat\", \"search\"];\n icon = <Icon icon={<AiIcon />} size=\"sm\" color=\"neutral-strong\" label=\"\" />;\n entersAiMode = true;\n}\n\nexport const AskAiCommand = Command.createImplementation({\n implementation: AskAiCommandImpl,\n dependencies: []\n});\n"],"names":["AskAiCommandImpl","Icon","AiIcon","AskAiCommand","Command"],"mappings":";;;;AAeA,MAAMA;;aACF,IAAI,GAAG;aACP,KAAK,GAAG;aACR,WAAW,GAAG;aACd,QAAQ,GAAG;aACX,QAAQ,GAAG;YAAC;YAAM;YAAO;YAAa;YAAQ;SAAS;aACvD,IAAI,GAAG,WAAP,GAAO,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAMA;YAAK,MAAK;YAAK,OAAM;YAAiB,OAAM;;aACtE,YAAY,GAAG;;AACnB;AAEO,MAAMC,eAAeC,QAAQ,oBAAoB,CAAC;IACrD,gBAAgBJ;IAChB,cAAc,EAAE;AACpB"}

package/presentation/commandPalette/commands/CopyCurrentUrlCommand.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import React from "react";
+import { Command } from "../abstractions.js";
+declare class CopyCurrentUrlCommandImpl implements Command.Interface {
+    name: string;
+    label: string;
+    description: string;
+    category: string;
+    keywords: string[];
+    icon: React.JSX.Element;
+    execute(): void;
+}
+export declare const CopyCurrentUrlCommand: typeof CopyCurrentUrlCommandImpl & {
+    __abstraction: import("@webiny/di").Abstraction<import("../abstractions.js").ICommand>;
+};
+export {};