working permissions dialog, no styling

console/.vscode/settings.json

@@ -1,7 +1,12 @@
 {
-    "cSpell.words": [
-        "SELECTABLES",
-        "Synnax",
-        "ungroup"
-    ]
-}
+  "cSpell.words": [
+    "lineplot",
+    "SELECTABLES",
+    "stringifier",
+    "Synnax",
+    "synnaxlabs",
+    "tanstack",
+    "telem",
+    "ungroup"
+  ]
+}

console/src/cluster/Connect.tsx

@@ -14,6 +14,7 @@ import {
   Synnax as CSynnax,
   type SynnaxProps,
   synnaxPropsZ,
+  user,
 } from "@synnaxlabs/client";
 import {
   Align,
@@ -104,7 +105,11 @@ export const Connect = ({ onClose }: Layout.RendererProps): ReactElement => {
       );
       dispatch(setActive(state.clusterKey));
       const client = new CSynnax(data);
-      Permissions.setCurrentUserPermissions(client, dispatch);
+      const user_ = await client.user.retrieveByName(data.username);
+      const policies = await client.access.policy.retrieveFor(
+        user.ontologyID(user_.key),
+      );
+      dispatch(Permissions.set({ policies }));
       onClose();
     })();
   };

console/src/cluster/Dropdown.tsx

@@ -9,17 +9,19 @@
 
 import "@/cluster/Dropdown.css";
 
-import { Synnax as CSynnax } from "@synnaxlabs/client";
+import { Synnax as CSynnax, user } from "@synnaxlabs/client";
 import { Icon } from "@synnaxlabs/media";
 import {
   Align,
   Button,
   Dropdown as Core,
   List as CoreList,
   Menu as PMenu,
+  Status,
   Synnax,
   Text,
 } from "@synnaxlabs/pluto";
+import { useMutation } from "@tanstack/react-query";
 import {
   type MouseEvent,
   type PropsWithChildren,
@@ -37,26 +39,52 @@ import { Layout } from "@/layout";
 import { Link } from "@/link";
 import { Permissions } from "@/permissions";
 
+const useHandleConnect = (): ((key: string | null) => void) => {
+  const dispatch = useDispatch();
+  const addStatus = Status.useAggregator();
+  const allClusters = useSelectMany();
+  return useMutation<void, Error, string | null>({
+    onMutate: (key) => {
+      dispatch(setActive(key));
+      dispatch(Permissions.giveAllPermissions());
+    },
+    mutationFn: async (key) => {
+      if (key == null) return;
+      const cluster = allClusters.find((c) => c.key === key);
+      if (cluster == null) throw new Error(`Cluster with key ${key} not found`);
+      const client = new CSynnax(cluster.props);
+      const username = client.props.username;
+      const user_ = await client.user.retrieveByName(username);
+      const policies = await client.access.policy.retrieveFor(
+        user.ontologyID(user_.key),
+      );
+      dispatch(Permissions.set({ policies }));
+    },
+    onError: (error) => {
+      dispatch(Permissions.clear());
+      addStatus({
+        variant: "error",
+        message: "Failed to connect to cluster",
+        description: error.message,
+      });
+    },
+  }).mutate;
+};
+
 export const List = (): ReactElement => {
   const menuProps = PMenu.useContextMenu();
   const dispatch = useDispatch();
   const allClusters = useSelectMany();
   const active = useSelect();
   const openWindow = Layout.usePlacer();
   const selected = active?.key ?? null;
-
-  const handleConnect = (key: string | null): void => {
-    dispatch(setActive(key));
-    const cluster = allClusters.find((c) => c.key === key);
-    const client = cluster == null ? null : new CSynnax(cluster.props);
-    Permissions.setCurrentUserPermissions(client, dispatch);
-  };
+  const handleConnect = useHandleConnect();
 
   const handleRemove = (keys: string[]): void => {
     dispatch(remove({ keys }));
     if (active != null && keys.includes(active?.key)) {
       dispatch(setActive(null));
-      dispatch(Permissions.clear());
+      dispatch(Permissions.giveAllPermissions());
     }
   };
 

console/src/ontology/Toolbar.tsx

@@ -13,21 +13,19 @@ import { type ReactElement } from "react";
 
 import { Cluster } from "@/cluster";
 import { ToolbarHeader, ToolbarTitle } from "@/components";
-import { Layout } from "@/layout";
+import { type Layout } from "@/layout";
 import { Tree } from "@/ontology/Tree";
 
-const ResourcesTree = (): ReactElement => {
-  return (
-    <Align.Space empty style={{ height: "100%", position: "relative" }}>
-      <ToolbarHeader>
-        <ToolbarTitle icon={<Icon.Resources />}>Resources</ToolbarTitle>
-      </ToolbarHeader>
-      <Cluster.NoneConnectedBoundary>
-        <Tree />
-      </Cluster.NoneConnectedBoundary>
-    </Align.Space>
-  );
-};
+const ResourcesTree = (): ReactElement => (
+  <Align.Space empty style={{ height: "100%", position: "relative" }}>
+    <ToolbarHeader>
+      <ToolbarTitle icon={<Icon.Resources />}>Resources</ToolbarTitle>
+    </ToolbarHeader>
+    <Cluster.NoneConnectedBoundary>
+      <Tree />
+    </Cluster.NoneConnectedBoundary>
+  </Align.Space>
+);
 
 export const Toolbar: Layout.NavDrawerItem = {
   key: "resources",

console/src/palette/Palette.tsx

@@ -51,7 +51,8 @@ import { type Ontology } from "@/ontology";
 import { type Service } from "@/ontology/service";
 import { TooltipContent } from "@/palette/Tooltip";
 import { type Mode, type TriggerConfig } from "@/palette/types";
-import { RootState, type RootStore } from "@/store";
+import { Permissions } from "@/permissions";
+import { type RootState, type RootStore } from "@/store";
 
 export interface PaletteProps {
   commands: Command[];
@@ -113,6 +114,12 @@ export const Palette = ({
   const dropdown = Dropdown.use();
 
   const [value, setValue] = useState("");
+  const store = useStore<RootState>();
+
+  const newCommands = commands.filter((c) => {
+    if (c.visible == null) return true;
+    return c.visible(store.getState());
+  });
 
   const handleTrigger = useCallback(
     ({ triggers, stage }: Triggers.UseEvent) => {
@@ -132,8 +139,7 @@ export const Palette = ({
   Triggers.use({ triggers, callback: handleTrigger });
 
   const placer = Layout.usePlacer();
-  const d = useDispatch();
-  const store = useStore<RootState>();
+  const dispatch = useDispatch();
 
   const handleDrop = useCallback(
     ({ items: [item] }: Haul.OnDropProps, cursor?: xy.XY) => {
@@ -147,7 +153,7 @@ export const Palette = ({
           position: cursor ? xy.translate(cursor, { x: -80, y: -45 }) : undefined,
         }),
       );
-      d(
+      dispatch(
         Layout.moveMosaicTab({
           windowKey: key,
           key: 1,
@@ -203,7 +209,7 @@ export const Palette = ({
           <PaletteDialogContent
             value={value}
             onChange={setValue}
-            commands={commands}
+            commands={newCommands}
             services={services}
             commandSymbol={commandSymbol}
             resourceTypes={services}
@@ -461,6 +467,7 @@ export interface Command {
   key: string;
   name: ReactElement | string;
   icon?: ReactElement;
+  visible?: (state: Permissions.StoreState) => boolean;
   onSelect: (ctx: CommandSelectionContext) => void;
   actions?: CommandActionProps[];
 }