[OPIK-4721] Use playground permission (#5922)

* [OPIK-4721] add new permission

* [OPIK-4721] add page guards

* [OPIK-4721] hide playground in sidebar menu

* [OPIK-4721] hide playground CTAs

* [OPIK-4721] guard confirmation dialog

Author: anastasiapyzhik

apps/opik-frontend/src/plugins/comet/PermissionsProvider.tsx

@@ -33,6 +33,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
     canUpdateAlerts,
     canAnnotateTraceSpanThread,
     canTagTrace,
+    canUsePlayground,
     isPending,
   } = useUserPermission();
 
@@ -65,6 +66,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
         canUpdateAlerts,
         canAnnotateTraceSpanThread,
         canTagTrace,
+        canUsePlayground,
       },
       isPending,
     }),
@@ -95,6 +97,7 @@ const PermissionsProvider: React.FC<{ children: ReactNode }> = ({
       canUpdateAlerts,
       canAnnotateTraceSpanThread,
       canTagTrace,
+      canUsePlayground,
       isPending,
     ],
   );

apps/opik-frontend/src/plugins/comet/types.ts

@@ -87,6 +87,7 @@ export enum ManagementPermissionsNames {
   COMMENT_WRITE = "comment_write",
   ONLINE_EVALUATION_RULE_UPDATE = "online_evaluation_rule_update",
   ALERT_UPDATE = "alert_update",
+  PLAYGROUND_USE = "playground_use",
 }
 
 export interface UserPermission {

apps/opik-frontend/src/plugins/comet/useUserPermission.ts

@@ -228,6 +228,11 @@ const useUserPermission = (config?: { enabled?: boolean }) => {
     [checkNullablePermission],
   );
 
+  const canUsePlayground = useMemo(
+    () => checkNullablePermission(ManagementPermissionsNames.PLAYGROUND_USE),
+    [checkNullablePermission],
+  );
+
   return {
     canInviteMembers,
     isWorkspaceOwner,
@@ -257,6 +262,7 @@ const useUserPermission = (config?: { enabled?: boolean }) => {
     canUpdateAlerts,
     canAnnotateTraceSpanThread,
     canTagTrace,
+    canUsePlayground,
     isPending: isEnabled && isPending,
   };
 };

apps/opik-frontend/src/types/permissions.ts

@@ -25,6 +25,7 @@ export interface Permissions {
   canUpdateAlerts: boolean;
   canAnnotateTraceSpanThread: boolean;
   canTagTrace: boolean;
+  canUsePlayground: boolean;
 }
 
 export interface PermissionsContextValue {
@@ -60,6 +61,7 @@ export const DEFAULT_PERMISSIONS: PermissionsContextValue = {
     canUpdateAlerts: true,
     canAnnotateTraceSpanThread: true,
     canTagTrace: true,
+    canUsePlayground: true,
   },
   isPending: false,
 };

apps/opik-frontend/src/v1/layout/PlaygroundPageGuard/index.tsx

@@ -0,0 +1,17 @@
+import { usePermissions } from "@/contexts/PermissionsContext";
+import NoAccessPageGuard from "@/v1/layout/NoAccessPageGuard/NoAccessPageGuard";
+
+const PlaygroundPageGuard = () => {
+  const {
+    permissions: { canUsePlayground },
+  } = usePermissions();
+
+  return (
+    <NoAccessPageGuard
+      canViewPage={canUsePlayground}
+      message="You don't have permissions to use playground in this workspace."
+    />
+  );
+};
+
+export default PlaygroundPageGuard;

apps/opik-frontend/src/v1/layout/SideBar/SideBarMenuItems.tsx

@@ -27,13 +27,19 @@ interface SideBarMenuItemsProps {
 const SideBarMenuItems: React.FC<SideBarMenuItemsProps> = ({ expanded }) => {
   const { activeWorkspaceName: workspaceName } = useAppStore();
   const {
-    permissions: { canViewExperiments, canViewDashboards, canViewDatasets },
+    permissions: {
+      canViewExperiments,
+      canViewDashboards,
+      canViewDatasets,
+      canUsePlayground,
+    },
   } = usePermissions();
 
   const menuItems = getMenuItems({
     canViewExperiments,
     canViewDashboards,
     canViewDatasets,
+    canUsePlayground,
   });
 
   const { data: projectData } = useProjectsList(

apps/opik-frontend/src/v1/layout/SideBar/helpers/getMenuItems.ts

@@ -21,10 +21,12 @@ const getMenuItems = ({
   canViewExperiments,
   canViewDashboards,
   canViewDatasets,
+  canUsePlayground,
 }: {
   canViewExperiments: boolean;
   canViewDashboards: boolean;
   canViewDatasets: boolean;
+  canUsePlayground: boolean;
 }): MenuItemGroup[] => {
   return [
     {
@@ -115,13 +117,17 @@ const getMenuItems = ({
           label: "Prompt library",
           count: "prompts",
         },
-        {
-          id: "playground",
-          path: "/$workspaceName/playground",
-          type: MENU_ITEM_TYPE.router,
-          icon: Blocks,
-          label: "Playground",
-        },
+        ...(canUsePlayground
+          ? [
+              {
+                id: "playground",
+                path: "/$workspaceName/playground",
+                type: MENU_ITEM_TYPE.router as const,
+                icon: Blocks,
+                label: "Playground",
+              },
+            ]
+          : []),
       ],
     },
     {

apps/opik-frontend/src/v1/pages-shared/traces/TraceDetailsPanel/TraceDataViewer/PromptsTab.tsx

@@ -12,6 +12,7 @@ import get from "lodash/get";
 import { FileTerminal, GitCommitVertical } from "lucide-react";
 import useAppStore from "@/store/AppStore";
 import { useIsFeatureEnabled } from "@/contexts/feature-toggles-provider";
+import { usePermissions } from "@/contexts/PermissionsContext";
 import { FeatureToggleKeys } from "@/types/feature-toggles";
 import TryInPlaygroundButton from "@/v1/pages/PromptPage/TryInPlaygroundButton";
 import PromptContentView, {
@@ -71,6 +72,10 @@ const PromptsTab: React.FunctionComponent<PromptsTabProps> = ({
   data,
   search,
 }) => {
+  const {
+    permissions: { canUsePlayground },
+  } = usePermissions();
+
   const rawPrompts = get(
     data.metadata as Record<string, unknown>,
     "opik_prompts",
@@ -129,10 +134,12 @@ const PromptsTab: React.FunctionComponent<PromptsTabProps> = ({
               search={search}
               templateStructure={rawPrompts[index]?.template_structure}
               playgroundButton={
-                <TryInPlaygroundButton
-                  prompt={promptInfo}
-                  ButtonComponent={CustomUseInPlaygroundButton}
-                />
+                canUsePlayground ? (
+                  <TryInPlaygroundButton
+                    prompt={promptInfo}
+                    ButtonComponent={CustomUseInPlaygroundButton}
+                  />
+                ) : null
               }
             />
           </AccordionContent>

apps/opik-frontend/src/v1/pages/EvaluationSuiteItemsPage/UseEvaluationSuiteDropdown.tsx

@@ -33,9 +33,11 @@ function UseEvaluationSuiteDropdown({
   const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
 
   const {
-    permissions: { canViewExperiments, canCreateExperiments },
+    permissions: { canViewExperiments, canCreateExperiments, canUsePlayground },
   } = usePermissions();
 
+  const hasAnyAction = canUsePlayground || canCreateExperiments;
+
   const { loadPlayground, isPlaygroundEmpty, isPendingProviderKeys } =
     useLoadPlayground();
 
@@ -55,6 +57,8 @@ function UseEvaluationSuiteDropdown({
     }
   };
 
+  if (!hasAnyAction) return null;
+
   return (
     <>
       {canViewExperiments && (
@@ -65,19 +69,21 @@ function UseEvaluationSuiteDropdown({
           datasetName={datasetName}
         />
       )}
-      <ConfirmDialog
-        key={`confirm-dialog-${resetKeyRef.current}`}
-        open={openConfirmDialog}
-        setOpen={setOpenConfirmDialog}
-        onConfirm={handleLoadPlayground}
-        title={`Load ${
-          isEvalSuite ? "evaluation suite" : "dataset"
-        } into playground`}
-        description={`Loading this ${
-          isEvalSuite ? "evaluation suite" : "dataset"
-        } into the Playground will replace any unsaved changes. This action cannot be undone.`}
-        confirmText={`Load ${isEvalSuite ? "evaluation suite" : "dataset"}`}
-      />
+      {canUsePlayground && (
+        <ConfirmDialog
+          key={`confirm-dialog-${resetKeyRef.current}`}
+          open={openConfirmDialog}
+          setOpen={setOpenConfirmDialog}
+          onConfirm={handleLoadPlayground}
+          title={`Load ${
+            isEvalSuite ? "evaluation suite" : "dataset"
+          } into playground`}
+          description={`Loading this ${
+            isEvalSuite ? "evaluation suite" : "dataset"
+          } into the Playground will replace any unsaved changes. This action cannot be undone.`}
+          confirmText={`Load ${isEvalSuite ? "evaluation suite" : "dataset"}`}
+        />
+      )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant="outline" size="sm" disabled={disabled}>
@@ -86,20 +92,22 @@ function UseEvaluationSuiteDropdown({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-80">
-          <DropdownMenuItem
-            onClick={handleOpenPlaygroundClick}
-            disabled={disabled || isPendingProviderKeys}
-          >
-            <Blocks className="mr-2 mt-0.5 size-4 shrink-0 self-start" />
-            <div className="comet-body-s flex flex-col">
-              <span>Open in Playground</span>
-              <span className="text-light-slate">
-                Test prompts over your{" "}
-                {isEvalSuite ? "evaluation suite" : "dataset"} and run
-                evaluations interactively
-              </span>
-            </div>
-          </DropdownMenuItem>
+          {canUsePlayground && (
+            <DropdownMenuItem
+              onClick={handleOpenPlaygroundClick}
+              disabled={disabled || isPendingProviderKeys}
+            >
+              <Blocks className="mr-2 mt-0.5 size-4 shrink-0 self-start" />
+              <div className="comet-body-s flex flex-col">
+                <span>Open in Playground</span>
+                <span className="text-light-slate">
+                  Test prompts over your{" "}
+                  {isEvalSuite ? "evaluation suite" : "dataset"} and run
+                  evaluations interactively
+                </span>
+              </div>
+            </DropdownMenuItem>
+          )}
           {canCreateExperiments && (
             <DropdownMenuItem
               onClick={() => {

apps/opik-frontend/src/v1/pages/PromptPage/PromptTab/PromptTab.tsx

@@ -26,12 +26,17 @@ import ChatPromptView from "./ChatPromptView";
 import TextPromptView from "./TextPromptView";
 import TagListRenderer from "@/shared/TagListRenderer/TagListRenderer";
 import usePromptVersionsUpdateMutation from "@/api/prompts/usePromptVersionsUpdateMutation";
+import { usePermissions } from "@/contexts/PermissionsContext";
 
 interface PromptTabInterface {
   prompt?: PromptWithLatestVersion;
 }
 
 const PromptTab = ({ prompt }: PromptTabInterface) => {
+  const {
+    permissions: { canUsePlayground },
+  } = usePermissions();
+
   const [openUseThisPrompt, setOpenUseThisPrompt] = useState(false);
   const [openEditPrompt, setOpenEditPrompt] = useState(false);
   const [versionToRestore, setVersionToRestore] =
@@ -120,8 +125,13 @@ const PromptTab = ({ prompt }: PromptTabInterface) => {
           <Info className="mr-1.5 size-3.5" />
           Use this prompt
         </Button>
-        <TryInPlaygroundButton prompt={prompt} activeVersion={activeVersion} />
-        {!isChatPrompt && (
+        {canUsePlayground && (
+          <TryInPlaygroundButton
+            prompt={prompt}
+            activeVersion={activeVersion}
+          />
+        )}
+        {canUsePlayground && !isChatPrompt && (
           <ImproveInPlaygroundButton
             prompt={prompt}
             activeVersion={activeVersion}