feat: API key restriction

apps/client/src/ee/api-key/pages/user-api-keys.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Anchor, Alert, Button, Group, Space, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
@@ -15,6 +16,7 @@ import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
 import { IApiKey } from "@/ee/api-key";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import useUserRole from "@/hooks/use-user-role.tsx";
 
 export default function UserApiKeys() {
   const { t } = useTranslation();
@@ -26,7 +28,10 @@ export default function UserApiKeys() {
   const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
   const { data, isLoading } = useGetApiKeysQuery({ cursor });
   const [workspace] = useAtom(workspaceAtom);
+  const { isAdmin } = useUserRole();
   const mcpEnabled = workspace?.settings?.ai?.mcp === true;
+  const restrictToAdmins = workspace?.settings?.api?.restrictToAdmins === true;
+  const canCreate = !restrictToAdmins || isAdmin;
 
   const handleCreateSuccess = (response: IApiKey) => {
     setCreatedApiKey(response);
@@ -60,8 +65,8 @@ export default function UserApiKeys() {
         {t("for usage details.")}
       </Text>
 
-      {mcpEnabled && (
-        <Alert variant="light" color="blue" mb="md" p="sm">
+      {mcpEnabled && canCreate && (
+        <Alert variant="light" color="blue" mb="md" p="sm" icon={<IconInfoCircle />}>
           <Text size="sm">
             {t(
               "Your workspace has MCP enabled. Use your API key to connect AI assistants.",
@@ -83,11 +88,19 @@ export default function UserApiKeys() {
         </Alert>
       )}
 
-      <Group justify="flex-end" mb="md">
-        <Button onClick={() => setCreateModalOpened(true)}>
-          {t("Create API Key")}
-        </Button>
-      </Group>
+      {canCreate ? (
+        <Group justify="flex-end" mb="md">
+          <Button onClick={() => setCreateModalOpened(true)}>
+            {t("Create API Key")}
+          </Button>
+        </Group>
+      ) : restrictToAdmins ? (
+        <Alert variant="light" color="yellow" mb="md" p="sm" icon={<IconInfoCircle />}>
+          <Text size="sm">
+            {t("API key creation is restricted to admins by your workspace administrator.")}
+          </Text>
+        </Alert>
+      ) : null}
 
       <ApiKeyTable
         apiKeys={data?.items || []}