@ynput/ayon-addon-dev 0.2.0 → 0.3.0

package/AGENTS.md

@@ -185,6 +185,6 @@ import { ayonAddonLint } from '@ynput/ayon-addon-dev/eslint'
 export default defineConfig([..., ...ayonAddonLint])
 ```
 
-Flags imports that bypass AYON's copies: `react-router-dom`, `react-router` and `react-toastify`
-(use `@ynput/ayon-addon`), `@ynput/ayon-addon/host`, and a manifest importing
+Flags imports that bypass AYON's copies: `react-router-dom`, `react-router`, `react-toastify` and
+`use-query-params` (use `@ynput/ayon-addon`), `@ynput/ayon-addon/host`, and a manifest importing
 `@ynput/ayon-addon` instead of `@ynput/ayon-addon/manifest`.

package/dist/eslint.js

@@ -17,6 +17,7 @@ export const ayonAddonLint = [
                         viaAddonApi('react-router-dom', 'the router hooks and Link'),
                         viaAddonApi('react-router', 'the router hooks and Link'),
                         viaAddonApi('react-toastify', 'toast'),
+                        viaAddonApi('use-query-params', 'useQueryParam, useQueryParams and the params'),
                         {
                             name: '@ynput/ayon-addon/host',
                             message: '@ynput/ayon-addon/host is for AYON itself, not for addons.',

package/dist/shell/index.js

@@ -2,17 +2,19 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback, createContext, useContext, useState, useMemo, useEffect, useSyncExternalStore, Component, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { provideHost, isKnownSlot, getRegistry, contributionTitle, getHost, registerManifest, setManifestsLoading } from "@ynput/ayon-addon/host";
-import { useGetProjectFoldersQuery, useGetCurrentUserQuery, usersApi, useListProjectsQuery, useGetEntitiesDetailsPanelQuery, useGetProjectQuery, useGetUsersAssigneeQuery, createStandaloneStore } from "@ynput/ayon-frontend-shared/api";
-import { AddonMoreMenu, AddonEntityPicker, SlicerHost, ProjectPageLayoutHost, JsonViewer, AddonButton, useAddonCustomizeSections, useAddonTableShortcuts, shortcutEntities, SettingsPanel, AddonDialog, useStudioPageSlotContext, useProjectPageSlotContext, SplitterStyles, LoginPage, AddonServices } from "@ynput/ayon-frontend-shared/components";
+import { useGetProjectFoldersQuery, useGetCurrentUserQuery, usersApi, useListProjectsQuery, useGetEntitiesDetailsPanelQuery, useGetUsersQuery, useGetProjectQuery, useGetUsersAssigneeQuery, createStandaloneStore } from "@ynput/ayon-frontend-shared/api";
+import { AddonMoreMenu, AddonEntityPicker, SlicerHost, ProjectPageLayoutHost, JsonViewer, AddonButton, useUserDetailsSlotContext, useAddonUserMenuItems, AddonUserDetailsSections, useAddonCustomizeSections, useAddonTableShortcuts, shortcutEntities, SettingsPanel, AddonDialog, useStudioPageSlotContext, useProjectPageSlotContext, SplitterStyles, LoginPage, AddonServices } from "@ynput/ayon-frontend-shared/components";
 import { useGlobalContext, usePowerpack, useMenuContext, useSettingsPanel, useScopedDetailsPanel, EntityUpdatesProvider, GlobalProvider, PowerpackProvider, MenuProvider, URIProvider, DetailsPanelProvider, PiPProvider, DeleteEntitiesProvider, SettingsPanelProvider, ProjectContextProvider, ProjectFoldersContextProvider } from "@ynput/ayon-frontend-shared/context";
 import { buildProjectsTableData, ProjectsTable, PROJECTS_LIST_MENU_ID, parseProjectFolderRowId } from "@ynput/ayon-frontend-shared/ProjectsTable";
 import { getProjectDisplayName, clearAccessToken, storeAccessToken } from "@ynput/ayon-frontend-shared/util";
 import { Button, Icon, Dropdown, Dialog, InputText } from "@ynput/ayon-react-components";
-import { useContributions, prefetchPiece, runContribution, EntityPicker, ContributionView } from "@ynput/ayon-addon";
+import { useContributions, prefetchPiece, runContribution, EntityPicker, ContributionView, useUser as useUser$1 } from "@ynput/ayon-addon";
 import { useCreateContextMenu, ContextMenuProvider, GlobalContextMenu } from "@ynput/ayon-frontend-shared/ContextMenu";
 import { useDispatch, Provider } from "react-redux";
 import { BrowserRouter, useNavigate, useSearchParams, useParams, useLocation } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
+import { QueryParamProvider } from "use-query-params";
+import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
 import { Splitter, SplitterPanel } from "primereact/splitter";
 import { useAddonTableColumns, useAddonEntityMenuItems, AddonColumnDataScope, ProjectDataProvider } from "@ynput/ayon-frontend-shared/ProjectTreeTable";
 import { SLOT_DOCS } from "@ynput/ayon-addon/check";
@@ -403,6 +405,19 @@ const SLOT_AREAS = [
         ]
       }
     ]
+  },
+  {
+    label: "Settings",
+    icon: "settings",
+    sections: [
+      {
+        label: "User details",
+        slots: [
+          { slot: "userDetails.section", label: "Sections" },
+          { slot: "userDetails.menuItem", label: "More menu" }
+        ]
+      }
+    ]
   }
 ];
 const slotPath = (slot) => {
@@ -415,7 +430,14 @@ const slotPath = (slot) => {
   return ["Other", slot];
 };
 const slotIcon = (slot) => SLOT_AREAS.find((area) => area.sections.some((s) => s.slots.some((x) => x.slot === slot)))?.icon || "extension";
-const NO_PROJECT = ["studio.page", "header.item", "projectList.menuItem", "app.service"];
+const NO_PROJECT = [
+  "studio.page",
+  "header.item",
+  "projectList.menuItem",
+  "app.service",
+  "userDetails.section",
+  "userDetails.menuItem"
+];
 const PROJECTS = ["studio.page", "projectList.menuItem"];
 const ENTITIES = [
   "detailsPanel.tab",
@@ -436,7 +458,8 @@ const RUN = [
   "projectList.menuItem",
   "slicer.menuItem",
   "entityMenuItem",
-  "table.shortcut"
+  "table.shortcut",
+  "userDetails.menuItem"
 ];
 const needsProject = (slot) => !!slot && !NO_PROJECT.includes(slot);
 const needsProjects = (slot) => !!slot && PROJECTS.includes(slot);
@@ -1215,6 +1238,59 @@ const ServiceStage = ({ contribution, selection }) => {
   useReport(contribution, context, true);
   return /* @__PURE__ */ jsx(ServiceNote, {});
 };
+const UserDetailsStage = ({ contribution }) => {
+  const signedIn = useUser$1();
+  const { data: users = [], isLoading } = useGetUsersQuery({ selfName: signedIn?.name });
+  const [picked, setPicked] = useState();
+  const fallback = useMemo(
+    () => users.find((u) => u.name === signedIn?.name && !u.isService) ?? users.find((u) => !u.isService && u.active !== false),
+    [users, signedIn?.name]
+  );
+  const target = users.find((u) => u.name === picked) ?? fallback;
+  const selected = useMemo(() => target ? [target] : [], [target]);
+  const context = useUserDetailsSlotContext(selected, false);
+  const isMenuItem = contribution.slot === "userDetails.menuItem";
+  useReport(contribution, context, !!target, isMenuItem);
+  const { topItems, items } = useAddonUserMenuItems(context);
+  if (isLoading) return /* @__PURE__ */ jsx(Hint, { children: "Loading users…" });
+  if (!target) return /* @__PURE__ */ jsx(Hint, { children: "No users to show." });
+  return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", style: { justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: "min(420px, 100%)", display: "flex", flexDirection: "column", gap: 4 },
+      "data-shell-surface": "user-details",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ayon-shell-bar", children: [
+          /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              value: [target.name],
+              options: users.map((u) => ({
+                value: u.name,
+                label: u.isService ? `${u.name} (service)` : u.attrib?.fullName || u.name
+              })),
+              search: true,
+              onChange: (names) => setPicked(names[0]),
+              style: { minWidth: 200 }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "spacer" }),
+          [...topItems, ...items].map((item) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: item.icon,
+              label: item.label,
+              variant: "text",
+              onClick: () => item.onClick?.()
+            },
+            item.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(AddonUserDetailsSections, { context })
+      ]
+    }
+  ) });
+};
 const HeaderStage = ({ contribution, selection }) => {
   const { contributions } = useContributions("header.item");
   const [context, setContext] = useState();
@@ -1468,6 +1544,9 @@ const Stage = ({
         return /* @__PURE__ */ jsx(TableStage, { ...props });
       case "app.service":
         return /* @__PURE__ */ jsx(ServiceStage, { ...props });
+      case "userDetails.section":
+      case "userDetails.menuItem":
+        return /* @__PURE__ */ jsx(UserDetailsStage, { ...props });
       default:
         return /* @__PURE__ */ jsxs(Hint, { children: [
           "The shell has no stage for ",
@@ -1624,7 +1703,7 @@ const Shell = ({ options, mode }) => {
   return /* @__PURE__ */ jsxs(Provider, { store, children: [
     /* @__PURE__ */ jsx(SplitterStyles, {}),
     /* @__PURE__ */ jsxs(BrowserRouter, { children: [
-      mode === "live" ? /* @__PURE__ */ jsx(SignedIn, { options, children: /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }) }) : /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }),
+      /* @__PURE__ */ jsx(QueryParamProvider, { adapter: ReactRouter6Adapter, options: { updateType: "replaceIn" }, children: mode === "live" ? /* @__PURE__ */ jsx(SignedIn, { options, children: /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }) }) : /* @__PURE__ */ jsx(AppProviders, { children: /* @__PURE__ */ jsx(Workbench, { options, mode }) }) }),
       /* @__PURE__ */ jsx(ToastContainer, { position: "bottom-right", theme: "dark" })
     ] })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ynput/ayon-addon-dev",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Dev tooling for AYON addon frontends: Vite plugin, dev server, CLI, lint preset",
   "repository": {
     "type": "git",
@@ -41,16 +41,17 @@
   },
   "peerDependencies": {
     "@module-federation/vite": ">=1.14",
-    "@ynput/ayon-addon": "0.2.0",
+    "@ynput/ayon-addon": "0.4.0",
     "vite": ">=6",
-    "@ynput/ayon-frontend-shared": ">=0.7.6",
-    "@ynput/ayon-react-components": "^1.25.0",
+    "@ynput/ayon-frontend-shared": ">=0.8.1",
+    "@ynput/ayon-react-components": "^1.25.1",
     "primereact": ">=9",
     "react": ">=18",
     "react-dom": ">=18",
     "react-redux": ">=9",
     "react-router-dom": ">=7",
     "react-toastify": ">=9",
+    "use-query-params": ">=2",
     "playwright": ">=1.40",
     "@rtk-query/codegen-openapi": ">=2"
   },