@checkmate-monitor/queue-frontend 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @checkmate-monitor/queue-frontend
 
+## 0.0.4
+
+### Patch Changes
+
+- 32ea706: ### User Menu Loading State Fix
+
+  Fixed user menu items "popping in" one after another due to independent async permission checks.
+
+  **Changes:**
+
+  - Added `UserMenuItemsContext` interface with `permissions` and `hasCredentialAccount` to `@checkmate-monitor/frontend-api`
+  - `LoginNavbarAction` now pre-fetches all permissions and credential account info before rendering the menu
+  - All user menu item components now use the passed context for synchronous permission checks instead of async hooks
+  - Uses `qualifyPermissionId` helper for fully-qualified permission IDs
+
+  **Result:** All menu items appear simultaneously when the user menu opens.
+
+- Updated dependencies [52231ef]
+- Updated dependencies [b0124ef]
+- Updated dependencies [54cc787]
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [32ea706]
+  - @checkmate-monitor/ui@0.1.2
+  - @checkmate-monitor/common@0.2.0
+  - @checkmate-monitor/frontend-api@0.1.0
+  - @checkmate-monitor/queue-common@0.0.3
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [0f8cc7d]
+  - @checkmate-monitor/frontend-api@0.0.3
+  - @checkmate-monitor/ui@0.1.1
+
 ## 0.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkmate-monitor/queue-frontend",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/UserMenuItems.tsx

@@ -1,19 +1,25 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { ListOrdered } from "lucide-react";
-import { useApi, permissionApiRef } from "@checkmate-monitor/frontend-api";
+import type { UserMenuItemsContext } from "@checkmate-monitor/frontend-api";
 import { DropdownMenuItem } from "@checkmate-monitor/ui";
-import { resolveRoute } from "@checkmate-monitor/common";
-import { queueRoutes } from "@checkmate-monitor/queue-common";
+import { qualifyPermissionId, resolveRoute } from "@checkmate-monitor/common";
+import {
+  queueRoutes,
+  permissions,
+  pluginMetadata,
+} from "@checkmate-monitor/queue-common";
 
-export const QueueUserMenuItems = () => {
-  const permissionApi = useApi(permissionApiRef);
-  const { allowed: canRead, loading } = permissionApi.useResourcePermission(
-    "queue",
-    "read"
+export const QueueUserMenuItems = ({
+  permissions: userPerms,
+}: UserMenuItemsContext) => {
+  const qualifiedId = qualifyPermissionId(
+    pluginMetadata,
+    permissions.queueRead
   );
+  const canRead = userPerms.includes("*") || userPerms.includes(qualifiedId);
 
-  if (loading || !canRead) {
+  if (!canRead) {
     return <React.Fragment />;
   }
 

package/src/index.tsx

@@ -2,9 +2,10 @@ import {
   rpcApiRef,
   ApiRef,
   UserMenuItemsSlot,
+  createSlotExtension,
+  createFrontendPlugin,
 } from "@checkmate-monitor/frontend-api";
 import { queueApiRef, type QueueApiClient } from "./api";
-import { createFrontendPlugin } from "@checkmate-monitor/frontend-api";
 import { QueueConfigPage } from "./pages/QueueConfigPage";
 import { QueueUserMenuItems } from "./components/UserMenuItems";
 import {
@@ -33,11 +34,10 @@ export const queuePlugin = createFrontendPlugin({
     },
   ],
   extensions: [
-    {
+    createSlotExtension(UserMenuItemsSlot, {
       id: "queue.user-menu.items",
-      slot: UserMenuItemsSlot,
       component: QueueUserMenuItems,
-    },
+    }),
   ],
 });