🐛 Bugfix: Fix various issues when the Agent's permissions are set to READ_ONLY. #2510 #2551

[Specification Details]
1. When the Agent permission is READ_ONLY, agents cannot be deleted, and versions cannot be published or edited.
2. List of tools that can be disabled when Agent permission is READ_ONLY

Author: YehongPan

frontend/app/[locale]/agents/AgentVersionCard.tsx

@@ -28,6 +28,7 @@ import {
   DescriptionsProps,
   Modal,
   Dropdown,
+  Tooltip,
   theme
 } from "antd";
 import { ExclamationCircleFilled } from '@ant-design/icons';
@@ -149,6 +150,13 @@ export function VersionCardItem({
   const { tools: toolList } = useToolList();
   const { agents: agentList } = useAgentList(user?.tenantId ?? null);
 
+  // Get current agent's permission from agent list
+  const currentAgent = useMemo(() => {
+    return agentList.find((a: Agent) => a.id === String(agentId));
+  }, [agentList, agentId]);
+
+  const isReadOnly = currentAgent?.permission === "READ_ONLY";
+
   // Modal state
   const [compareModalOpen, setCompareModalOpen] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
@@ -366,25 +374,44 @@ export function VersionCardItem({
                 items: [
                   {
                     key: 'edit',
-                    label: t("common.edit"),
+                    label: isReadOnly ? (
+                      <Tooltip title={t("agent.noEditPermission")}>
+                        <span>{t("common.edit")}</span>
+                      </Tooltip>
+                    ) : (
+                      t("common.edit")
+                    ),
                     icon: <Edit size={14} />,
+                    disabled: isReadOnly,
                     onClick: () => setEditModalOpen(true)
                   },
                   {
                     key: 'rollback',
-                    label: t("agent.version.rollback"),
+                    label: isReadOnly ? (
+                      <Tooltip title={t("agent.noEditPermission")}>
+                        <span>{t("agent.version.rollback")}</span>
+                      </Tooltip>
+                    ) : (
+                      t("agent.version.rollback")
+                    ),
                     icon: <RotateCcw size={14} />,
-                    disabled: isCurrentVersion || version.status.toLowerCase() === "disabled",
+                    disabled: isReadOnly || isCurrentVersion || version.status.toLowerCase() === "disabled",
                     onClick: handleRollbackClick
                   },
                   {
                     type: 'divider',
                   },
                   {
                     key: 'delete',
-                    label: t("common.delete"),
+                    label: isReadOnly ? (
+                      <Tooltip title={t("agent.noEditPermission")}>
+                        <span>{t("common.delete")}</span>
+                      </Tooltip>
+                    ) : (
+                      t("common.delete")
+                    ),
                     icon: <Trash2 size={14} />,
-                    disabled: isCurrentVersion,
+                    disabled: isReadOnly || isCurrentVersion,
                     danger: true,
                     onClick: handleDeleteClick,
                   },

frontend/app/[locale]/agents/components/agentConfig/ToolManagement.tsx

@@ -75,7 +75,15 @@ export default function ToolManagement({
   const { t } = useTranslation("common");
   const queryClient = useQueryClient();
 
-  const editable = currentAgentId || isCreatingMode;
+  // Get current agent permission from store
+  const currentAgentPermission = useAgentConfigStore(
+    (state) => state.currentAgentPermission
+  );
+
+  // Check if current agent is read-only (only when agent is selected and permission is READ_ONLY)
+  const isReadOnly = !isCreatingMode && currentAgentId !== undefined && currentAgentPermission === "READ_ONLY";
+
+  const editable = (currentAgentId || isCreatingMode) && !isReadOnly;
 
   // Get state from store
   const originalSelectedTools = useAgentConfigStore(
@@ -423,8 +431,16 @@ export default function ToolManagement({
                           );
                           const isDisabledDueToVlm = isToolDisabledDueToVlm(tool.name, isVlmConfigured);
                           const isDisabledDueToEmbedding = isToolDisabledDueToEmbedding(tool.name, isEmbeddingConfigured);
-                          const isDisabled = isDisabledDueToVlm || isDisabledDueToEmbedding;
-                          return (
+                          const isDisabled = isDisabledDueToVlm || isDisabledDueToEmbedding || isReadOnly;
+                          // Tooltip priority: permission > VLM > Embedding
+                          const tooltipTitle = isReadOnly
+                            ? t("agent.noEditPermission")
+                            : isDisabledDueToVlm
+                            ? t("toolPool.vlmDisabledTooltip")
+                            : isDisabledDueToEmbedding
+                            ? t("toolPool.embeddingDisabledTooltip")
+                            : undefined;
+                          const toolCard = (
                             <div
                               key={tool.id}
                               className={`border-2 rounded-md p-2 flex items-center justify-between transition-all duration-300 ease-in-out min-h-[52px] shadow-sm ${
@@ -491,6 +507,13 @@ export default function ToolManagement({
                               />
                             </div>
                           );
+                          return tooltipTitle ? (
+                            <Tooltip key={tool.id} title={tooltipTitle}>
+                              {toolCard}
+                            </Tooltip>
+                          ) : (
+                            toolCard
+                          );
                         })}
                       </div>
                     ),
@@ -513,8 +536,16 @@ export default function ToolManagement({
                 const isSelected = originalSelectedToolIdsSet.has(tool.id);
                 const isDisabledDueToVlm = isToolDisabledDueToVlm(tool.name, isVlmConfigured);
                 const isDisabledDueToEmbedding = isToolDisabledDueToEmbedding(tool.name, isEmbeddingConfigured);
-                const isDisabled = isDisabledDueToVlm || isDisabledDueToEmbedding;
-                return (
+                const isDisabled = isDisabledDueToVlm || isDisabledDueToEmbedding || isReadOnly;
+                // Tooltip priority: permission > VLM > Embedding
+                const tooltipTitle = isReadOnly
+                  ? t("agent.noEditPermission")
+                  : isDisabledDueToVlm
+                  ? t("toolPool.vlmDisabledTooltip")
+                  : isDisabledDueToEmbedding
+                  ? t("toolPool.embeddingDisabledTooltip")
+                  : undefined;
+                const toolCard = (
                   <div
                     key={tool.id}
                     className={`border-2 rounded-md p-2 flex items-center justify-between transition-all duration-300 ease-in-out min-h-[52px] shadow-sm ${
@@ -579,6 +610,13 @@ export default function ToolManagement({
                     />
                   </div>
                 );
+                return tooltipTitle ? (
+                  <Tooltip key={tool.id} title={tooltipTitle}>
+                    {toolCard}
+                  </Tooltip>
+                ) : (
+                  toolCard
+                );
               })}
             </div>
           )}

frontend/app/[locale]/agents/components/agentManage/AgentList.tsx

@@ -506,22 +506,34 @@ export default function AgentList({
                       </span>
                     </Tooltip>
 
-                    <Tooltip title={t("agent.contextMenu.delete")}>
+                    <Tooltip
+                      title={
+                        agent.permission === "READ_ONLY"
+                          ? t("agent.noEditPermission")
+                          : t("agent.contextMenu.delete")
+                      }
+                    >
                       <span>
                         <Button
                           type="text"
                           size="small"
                           icon={
                             <Trash2
                               className="w-4 h-4"
-                              style={{ color: token.colorError }}
+                              style={{
+                                color:
+                                  agent.permission === "READ_ONLY"
+                                    ? token.colorTextDisabled
+                                    : token.colorError,
+                              }}
                             />
                           }
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             handleDeleteAgentWithConfirm(agent);
                           }}
+                          disabled={agent.permission === "READ_ONLY"}
                           className="agent-action-button agent-action-button-red"
                         />
                       </span>