@ynput/ayon-addon-dev 0.2.1 → 0.4.0

package/dist/shell/index.js

@@ -2,13 +2,13 @@ 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, useAddonContextMenu, JsonViewer, AddonButton, AddonProfileSections, 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";
@@ -158,6 +158,7 @@ const ProjectList = ({ multiSelect = false }) => {
 };
 const provideShellHost = () => provideHost({
   useUser,
+  useContextMenu: useAddonContextMenu,
   components: {
     ProjectPageLayout: ProjectPageLayoutHost,
     Slicer: SlicerHost,
@@ -405,6 +406,24 @@ const SLOT_AREAS = [
         ]
       }
     ]
+  },
+  {
+    label: "Settings",
+    icon: "settings",
+    sections: [
+      {
+        label: "User details",
+        slots: [
+          { slot: "userDetails.section", label: "Sections" },
+          { slot: "userDetails.menuItem", label: "More menu" }
+        ]
+      }
+    ]
+  },
+  {
+    label: "Account",
+    icon: "account_circle",
+    sections: [{ label: "Profile", slots: [{ slot: "profile.section", label: "Sections" }] }]
   }
 ];
 const slotPath = (slot) => {
@@ -417,7 +436,15 @@ 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",
+  "profile.section"
+];
 const PROJECTS = ["studio.page", "projectList.menuItem"];
 const ENTITIES = [
   "detailsPanel.tab",
@@ -438,7 +465,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);
@@ -1217,6 +1245,79 @@ const ServiceStage = ({ contribution, selection }) => {
   useReport(contribution, context, true);
   return /* @__PURE__ */ jsx(ServiceNote, {});
 };
+const PROFILE_CONTEXT = {};
+const ProfileStage = ({ contribution }) => {
+  const user2 = useUser$1();
+  const { powerLicense, isLoading } = usePowerpack();
+  const hidden = !!contribution.powerFeature && (isLoading || !powerLicense);
+  useReport(contribution, PROFILE_CONTEXT, !!user2 && !hidden);
+  if (!user2) return /* @__PURE__ */ jsx(Hint, { children: "Signing in…" });
+  return /* @__PURE__ */ jsx("div", { className: "ayon-shell-body", style: { justifyContent: "center" }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { width: "min(600px, 100%)", display: "flex", flexDirection: "column", gap: 4 },
+      "data-shell-surface": "profile",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ayon-shell-bar", children: /* @__PURE__ */ jsx("strong", { children: user2.fullName || user2.name }) }),
+        hidden && !isLoading && /* @__PURE__ */ jsx(Hint, { children: "A power feature: this section shows with a Power Pack licence only." }),
+        /* @__PURE__ */ jsx(AddonProfileSections, {})
+      ]
+    }
+  ) });
+};
+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();
@@ -1470,6 +1571,11 @@ 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 });
+      case "profile.section":
+        return /* @__PURE__ */ jsx(ProfileStage, { ...props });
       default:
         return /* @__PURE__ */ jsxs(Hint, { children: [
           "The shell has no stage for ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ynput/ayon-addon-dev",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Dev tooling for AYON addon frontends: Vite plugin, dev server, CLI, lint preset",
   "repository": {
     "type": "git",
@@ -41,9 +41,9 @@
   },
   "peerDependencies": {
     "@module-federation/vite": ">=1.14",
-    "@ynput/ayon-addon": "0.3.0",
+    "@ynput/ayon-addon": "0.5.0",
     "vite": ">=6",
-    "@ynput/ayon-frontend-shared": ">=0.8.0",
+    "@ynput/ayon-frontend-shared": ">=0.9.0",
     "@ynput/ayon-react-components": "^1.25.1",
     "primereact": ">=9",
     "react": ">=18",