@gadmin2n/schematics 0.0.64 → 0.0.65

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/page/Components/PageFormModal.tsx

@@ -0,0 +1,731 @@
+import React, { useEffect, useMemo, useState } from "react";
+import type { PageMenuTreeNode, PageResourceAssignment, ResourceDefinition } from "../types";
+import { useModalForm } from "@refinedev/antd";
+import { type HttpError, type RedirectAction } from "@refinedev/core";
+import {
+  Form,
+  Input,
+  Modal,
+  Space,
+  Tag,
+  TreeSelect,
+  Typography,
+  Transfer,
+  Checkbox,
+  Table,
+  Divider,
+} from "antd";
+import type { TransferProps } from "antd";
+import { PageFieldSelector } from "../queries";
+
+type PageFormFieldValues = {
+  name?: string;
+  zhName?: string;
+  enName?: string;
+  code?: string;
+  path?: string | null;
+  isVirtual?: boolean;
+  parentId?: number | null;
+  description?: string;
+  iframeUrl?: string;
+  externalRedirectUrl?: string;
+  selectedResourceIds?: number[];
+  resourcePermissionAssignments?: Record<number, string[]>;
+};
+
+const AVAILABLE_PERMISSION_ACTIONS = ["readAny", "createAny", "updateAny", "deleteAny"];
+
+const SPECIAL_CHARACTER_VALIDATION_PATTERN = /[^\u4e00-\u9fa5a-zA-Z0-9\s\-_/]/;
+
+interface PageFormModalProps {
+  formActionType: "create" | "edit";
+  editingPageId?: number;
+  redirectAfterSubmit?: RedirectAction;
+  onFormSubmitSuccess?: () => void;
+  onModalCancel?: () => void;
+  parentPageTreeOptions?: PageMenuTreeNode[];
+  allAvailableResources?: ResourceDefinition[];
+  currentResourceAssignments?: PageResourceAssignment[];
+  allPagesData?: any[]; // All pages data for duplication check
+  defaultParentId?: number | null; // Default parent ID for create mode
+  defaultPathPrefix?: string; // Default path prefix for create mode
+}
+
+const buildPageTreeNodeLookupMap = (
+  treeNodes?: PageMenuTreeNode[],
+): Map<string, PageMenuTreeNode> => {
+  const nodeLookupMap = new Map<string, PageMenuTreeNode>();
+
+  const traverseAndAddToMap = (nodes?: PageMenuTreeNode[]) => {
+    nodes?.forEach(node => {
+      nodeLookupMap.set(String(node.value), node);
+      if (node.children?.length) {
+        traverseAndAddToMap(node.children);
+      }
+    });
+  };
+
+  traverseAndAddToMap(treeNodes);
+  return nodeLookupMap;
+};
+
+export const PageFormModal: React.FC<PageFormModalProps> = ({
+  formActionType,
+  editingPageId,
+  redirectAfterSubmit,
+  onModalCancel,
+  onFormSubmitSuccess,
+  parentPageTreeOptions,
+  allAvailableResources = [],
+  currentResourceAssignments = [],
+  allPagesData = [],
+  defaultParentId,
+  defaultPathPrefix = "",
+}) => {
+  const { formProps, modalProps, onFinish, close } = useModalForm<
+    any,
+    HttpError,
+    PageFormFieldValues
+  >({
+    resource: "page",
+    action: formActionType,
+    id: editingPageId,
+    defaultVisible: true,
+    redirect: redirectAfterSubmit,
+    onMutationSuccess: () => {
+      onFormSubmitSuccess?.();
+    },
+    meta: {
+      select: PageFieldSelector,
+    },
+  });
+
+  // Watch form values for conditional field visibility
+  const isVirtual = Form.useWatch("isVirtual", formProps.form);
+  const iframeUrl = Form.useWatch("iframeUrl", formProps.form);
+  const externalRedirectUrl = Form.useWatch("externalRedirectUrl", formProps.form);
+  const hasExternalUrl = !!(
+    (iframeUrl && /^(https?:\/\/|\/\w)/.test(iframeUrl.trim())) ||
+    (externalRedirectUrl && /^https?:\/\//.test(externalRedirectUrl.trim()))
+  );
+
+  const [selectedResourceIds, setSelectedResourceIds] = useState<string[]>([]);
+  const [resourcePermissionMap, setResourcePermissionMap] = useState<Record<number, string[]>>({});
+  const [permissionValidationError, setPermissionValidationError] = useState<string>("");
+  const [initialResourceAssignments, setInitialResourceAssignments] = useState<{
+    resourceIds: string[];
+    permissionMap: Record<number, string[]>;
+  }>({ resourceIds: [], permissionMap: {} });
+  const [initialFormValues, setInitialFormValues] = useState<PageFormFieldValues>({});
+  const [isCodeManuallyEdited, setIsCodeManuallyEdited] = useState(false);
+  const [isPathManuallyEdited, setIsPathManuallyEdited] = useState(false);
+
+  // Set default values for create mode with parent
+  useEffect(() => {
+    if (formActionType === "create" && formProps.form) {
+      const initialValues: Partial<PageFormFieldValues> = {};
+      
+      if (defaultParentId) {
+        initialValues.parentId = defaultParentId;
+      }
+      if (defaultPathPrefix) {
+        initialValues.path = defaultPathPrefix;
+      }
+      
+      if (Object.keys(initialValues).length > 0) {
+        formProps.form.setFieldsValue(initialValues);
+      }
+    }
+  }, [formActionType, defaultParentId, defaultPathPrefix, formProps.form]);
+
+  useEffect(() => {
+    if (formActionType === "edit" && currentResourceAssignments.length > 0) {
+      const initialSelectedIds = currentResourceAssignments.map(assignment =>
+        String(assignment.resourceId),
+      );
+      setSelectedResourceIds(initialSelectedIds);
+
+      const initialPermissionMap: Record<number, string[]> = {};
+      currentResourceAssignments.forEach(assignment => {
+        initialPermissionMap[assignment.resourceId] = [...assignment.assignedPermissions];
+      });
+      setResourcePermissionMap(initialPermissionMap);
+
+      // Store initial state for comparison
+      setInitialResourceAssignments({
+        resourceIds: [...initialSelectedIds],
+        permissionMap: JSON.parse(JSON.stringify(initialPermissionMap)),
+      });
+    }
+  }, [formActionType, currentResourceAssignments]);
+
+  // Store initial form values when form is loaded in edit mode
+  useEffect(() => {
+    if (formActionType === "edit" && formProps.form) {
+      const currentValues = formProps.form.getFieldsValue();
+      setInitialFormValues({
+        name: currentValues.name,
+        zhName: currentValues.zhName,
+        enName: currentValues.enName,
+        code: currentValues.code,
+        path: currentValues.path,
+        isVirtual: currentValues.isVirtual,
+        parentId: currentValues.parentId,
+        description: currentValues.description,
+        iframeUrl: currentValues.iframeUrl,
+        externalRedirectUrl: currentValues.externalRedirectUrl,
+      });
+    }
+  }, [formActionType, formProps.form, formProps.initialValues]);
+
+  const resourceTransferDataSource = useMemo(() => {
+    return allAvailableResources.map(resource => ({
+      key: String(resource.id),
+      title: resource.name,
+      description: resource.description || "",
+    }));
+  }, [allAvailableResources]);
+
+  const handleResourceTransferChange: TransferProps["onChange"] = newTargetKeys => {
+    setSelectedResourceIds(newTargetKeys as string[]);
+
+    const newResourceIds = new Set(newTargetKeys.map(key => Number(key)));
+    setResourcePermissionMap(prevMap => {
+      const updatedMap: Record<number, string[]> = {};
+      Object.keys(prevMap).forEach(resourceIdStr => {
+        const resourceId = Number(resourceIdStr);
+        if (newResourceIds.has(resourceId)) {
+          updatedMap[resourceId] = prevMap[resourceId];
+        }
+      });
+      newTargetKeys.forEach(key => {
+        const resourceId = Number(key);
+        if (!updatedMap[resourceId]) {
+          updatedMap[resourceId] = []; // Initialize with empty array, user must select at least one permission
+        }
+      });
+      return updatedMap;
+    });
+
+    // Clear validation error when user changes resource selection
+    if (permissionValidationError) {
+      setPermissionValidationError("");
+    }
+  };
+
+  const handleResourcePermissionChange = (
+    resourceId: number,
+    permissionAction: string,
+    isChecked: boolean,
+  ) => {
+    setResourcePermissionMap(prevMap => {
+      const currentPermissions = prevMap[resourceId] || [];
+      let updatedPermissions: string[];
+
+      if (isChecked) {
+        updatedPermissions = [...currentPermissions, permissionAction];
+      } else {
+        updatedPermissions = currentPermissions.filter(action => action !== permissionAction);
+      }
+
+      return {
+        ...prevMap,
+        [resourceId]: updatedPermissions,
+      };
+    });
+
+    // Clear validation error when user makes changes
+    if (permissionValidationError) {
+      setPermissionValidationError("");
+    }
+  };
+
+  const filteredParentPageTreeOptions = useMemo(() => {
+    if (formActionType !== "edit" || !editingPageId || !parentPageTreeOptions) {
+      return parentPageTreeOptions;
+    }
+
+    const filterOutCurrentPage = (nodes: PageMenuTreeNode[]): PageMenuTreeNode[] => {
+      return nodes
+        .filter(node => String(node.value) !== String(editingPageId))
+        .map(node => ({
+          ...node,
+          children: node.children ? filterOutCurrentPage(node.children) : undefined,
+        }));
+    };
+
+    return filterOutCurrentPage(parentPageTreeOptions);
+  }, [parentPageTreeOptions, formActionType, editingPageId]);
+
+  formProps.onFinish = values => {
+    // Clear path when external URL is configured (iframe or redirect)
+    if (!hasExternalUrl) {
+      values.path = null;
+    }
+
+    // Validate that each selected resource has at least one permission
+    const resourcesWithoutPermissions: string[] = [];
+    selectedResourceIds.forEach(resourceIdStr => {
+      const resourceId = Number(resourceIdStr);
+      const permissions = resourcePermissionMap[resourceId] || [];
+      if (permissions.length === 0) {
+        const resource = allAvailableResources.find(r => r.id === resourceId);
+        resourcesWithoutPermissions.push(resource?.name || `Resource ${resourceId}`);
+      }
+    });
+
+    if (resourcesWithoutPermissions.length > 0) {
+      setPermissionValidationError(
+        `The following resources must have at least one permission selected: ${resourcesWithoutPermissions.join(", ")}`,
+      );
+      return;
+    }
+
+    // In edit mode, check if anything has changed
+    if (formActionType === "edit") {
+      // Check if form fields have changed
+      const formFieldsChanged =
+        values.name !== initialFormValues.name ||
+        values.zhName !== initialFormValues.zhName ||
+        values.enName !== initialFormValues.enName ||
+        values.code !== initialFormValues.code ||
+        values.path !== initialFormValues.path ||
+        values.description !== initialFormValues.description ||
+        values.isVirtual !== initialFormValues.isVirtual ||
+        values.parentId !== initialFormValues.parentId ||
+        values.iframeUrl !== initialFormValues.iframeUrl ||
+        values.externalRedirectUrl !== initialFormValues.externalRedirectUrl;
+
+      // Check if resource assignments have changed
+      const resourceIdsChanged =
+        selectedResourceIds.length !== initialResourceAssignments.resourceIds.length ||
+        selectedResourceIds.some(id => !initialResourceAssignments.resourceIds.includes(id));
+
+      let permissionsChanged = false;
+      if (!resourceIdsChanged) {
+        // Check if permissions for any resource have changed
+        for (const resourceIdStr of selectedResourceIds) {
+          const resourceId = Number(resourceIdStr);
+          const currentPermissions = resourcePermissionMap[resourceId] || [];
+          const initialPermissions = initialResourceAssignments.permissionMap[resourceId] || [];
+
+          if (
+            currentPermissions.length !== initialPermissions.length ||
+            currentPermissions.some(p => !initialPermissions.includes(p))
+          ) {
+            permissionsChanged = true;
+            break;
+          }
+        }
+      }
+
+      // If nothing has changed, don't submit
+      if (!formFieldsChanged && !resourceIdsChanged && !permissionsChanged) {
+        Modal.info({
+          title: "No Changes Detected",
+          content:
+            "No changes have been made to the form. The form will be closed without submitting.",
+        });
+        close();
+        return;
+      }
+
+      // Build the submit payload with only changed data
+      const formattedValuesForSubmit: any = {
+        ...values,
+        parentId: values.parentId ? Number(values.parentId) : null,
+      };
+
+      // Only include resourceAssignments if they changed
+      if (resourceIdsChanged || permissionsChanged) {
+        formattedValuesForSubmit.resourceAssignments = selectedResourceIds.map(resourceIdStr => {
+          const resourceId = Number(resourceIdStr);
+          const resource = allAvailableResources.find(r => r.id === resourceId);
+          return {
+            resourceId,
+            resourceName: resource?.name || "",
+            assignedPermissions: resourcePermissionMap[resourceId] || [],
+          };
+        });
+      }
+      onFinish(formattedValuesForSubmit);
+    } else {
+      // In create mode, always submit all data
+      const resourceAssignmentsForSubmit = selectedResourceIds.map(resourceIdStr => {
+        const resourceId = Number(resourceIdStr);
+        const resource = allAvailableResources.find(r => r.id === resourceId);
+        return {
+          resourceId,
+          resourceName: resource?.name || "",
+          assignedPermissions: resourcePermissionMap[resourceId] || [],
+        };
+      });
+
+      const formattedValuesForSubmit = {
+        ...values,
+        parentId: values.parentId ? Number(values.parentId) : null,
+        resourceAssignments: resourceAssignmentsForSubmit,
+      };
+
+      onFinish(formattedValuesForSubmit);
+    }
+  };
+
+  const resourcePermissionTableColumns = [
+    {
+      title: "Resource Name",
+      dataIndex: "resourceName",
+      key: "resourceName",
+      width: "30%",
+    },
+    {
+      title: "Permissions",
+      key: "permissions",
+      render: (_: any, record: { resourceId: number; resourceName: string }) => (
+        <Space>
+          {AVAILABLE_PERMISSION_ACTIONS.map(permissionAction => (
+            <Checkbox
+              key={`${record.resourceId}-${permissionAction}`}
+              checked={resourcePermissionMap[record.resourceId]?.includes(permissionAction)}
+              onChange={e =>
+                handleResourcePermissionChange(
+                  record.resourceId,
+                  permissionAction,
+                  e.target.checked,
+                )
+              }
+            >
+              {permissionAction}
+            </Checkbox>
+          ))}
+        </Space>
+      ),
+    },
+  ];
+
+  const selectedResourcesForPermissionTable = useMemo(() => {
+    return selectedResourceIds.map(resourceIdStr => {
+      const resourceId = Number(resourceIdStr);
+      const resource = allAvailableResources.find(r => r.id === resourceId);
+      return {
+        resourceId,
+        resourceName: resource?.name || `Resource ${resourceId}`,
+      };
+    });
+  }, [selectedResourceIds, allAvailableResources]);
+
+  return (
+    <Modal
+      {...modalProps}
+      width={800}
+      onCancel={() => {
+        if (onModalCancel) {
+          onModalCancel();
+          return;
+        }
+        close();
+      }}
+      title={formActionType === "create" ? "Create New Page" : "Edit Page"}
+    >
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          rules={[
+            { required: true, message: "Page name is required" },
+            {
+              validator: (_, value) => {
+                if (!value || !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error("Special characters are not allowed in page name."),
+                );
+              },
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) {
+                  return Promise.resolve();
+                }
+
+                const trimmedValue = value.trim();
+
+                // Check if page name already exists (case-insensitive)
+                const isDuplicate = allPagesData.some((page: any) => {
+                  // Skip current page when editing
+                  if (formActionType === "edit" && page.id === editingPageId) {
+                    return false;
+                  }
+                  return page.name?.toLowerCase() === trimmedValue.toLowerCase();
+                });
+
+                if (isDuplicate) {
+                  return Promise.reject(
+                    new Error(
+                      "⚠️ Warning: Page Name already exists. It's recommended to use a unique name.",
+                    ),
+                  );
+                }
+
+                return Promise.resolve();
+              },
+            },
+          ]}
+          name="name"
+          label="Page Name"
+        >
+          <Input
+            placeholder="Enter the page name (e.g., User Management)."
+            onChange={e => {
+              const nameValue = e.target.value;
+              // Auto-generate code from name if code hasn't been manually edited
+              if (!isCodeManuallyEdited && nameValue) {
+                const generatedCode = nameValue
+                  .trim()
+                  .toLowerCase()
+                  .replace(/[\s-]+/g, "_") // Replace spaces and hyphens with underscores
+                  .replace(/[^a-z0-9_]/g, ""); // Remove invalid characters
+                formProps.form?.setFieldsValue({ code: generatedCode });
+              }
+              // Auto-generate path from name if path hasn't been manually edited (only in create mode)
+              if (!isPathManuallyEdited && nameValue && formActionType === "create") {
+                const generatedPathSegment = nameValue
+                  .trim()
+                  .toLowerCase()
+                  .replace(/[\s_]+/g, "-") // Replace spaces and underscores with hyphens
+                  .replace(/[^a-z0-9-/]/g, ""); // Remove invalid characters
+                const newPath = defaultPathPrefix + generatedPathSegment;
+                formProps.form?.setFieldsValue({ path: newPath });
+              }
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          rules={[
+            { required: true, message: "Page Code is required" },
+            {
+              pattern: /^[a-zA-Z0-9_]+$/,
+              message: "Page Code can only contain letters, numbers and underscores",
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) {
+                  return Promise.resolve();
+                }
+
+                const trimmedValue = value.trim();
+
+                // Check if page code already exists (case-insensitive)
+                const isDuplicate = allPagesData.some((page: any) => {
+                  // Skip current page when editing
+                  if (formActionType === "edit" && page.id === editingPageId) {
+                    return false;
+                  }
+                  return page.code?.toLowerCase() === trimmedValue.toLowerCase();
+                });
+
+                if (isDuplicate) {
+                  return Promise.reject(
+                    new Error("Page Code already exists. Please use a different code."),
+                  );
+                }
+
+                return Promise.resolve();
+              },
+            },
+          ]}
+          name="code"
+          label="Page Code(建议使用根据Page Name自动生成的值。一旦保存，不建议修改，因为前端会使用它作为菜单标识)"
+        >
+          <Input
+            placeholder="Enter the page code (e.g., user_management)"
+            onChange={() => {
+              // Mark as manually edited when user types in this field
+              if (!isCodeManuallyEdited) {
+                setIsCodeManuallyEdited(true);
+              }
+            }}
+          />
+        </Form.Item>
+        <Form.Item name="isVirtual" valuePropName="checked">
+          <Checkbox>Is Virtual Page</Checkbox>
+        </Form.Item>
+        {!isVirtual && (
+          <>
+            <Form.Item name="parentId" label="Parent Page (Menu Position)">
+              {filteredParentPageTreeOptions?.length ? (
+                <TreeSelect
+                  style={{ width: "100%" }}
+                  treeData={filteredParentPageTreeOptions}
+                  treeDefaultExpandAll
+                  allowClear
+                  placeholder="Select parent page (leave empty for root level)"
+                />
+              ) : (
+                <>
+                  <Typography.Text type="secondary">
+                    No parent pages available. This page will be created at root level.
+                  </Typography.Text>
+                  <Input type="hidden" />
+                </>
+              )}
+            </Form.Item>
+            <Form.Item
+              name="zhName"
+              label="Chinese Name (中文菜单名)"
+              tooltip="用于菜单显示的中文名称"
+            >
+              <Input placeholder="输入中文菜单名 (例如: 用户管理)" />
+            </Form.Item>
+            <Form.Item
+              name="enName"
+              label="English Name (英文菜单名)"
+              tooltip="Menu display name in English"
+            >
+              <Input placeholder="Enter English menu name (e.g., User Management)" />
+            </Form.Item>
+            <Form.Item
+              name="iframeUrl"
+              label={"Iframe URL"}
+              tooltip={{
+                title: (
+                  <div>
+                    <p style={{ marginBottom: 8 }}>
+                      设置后，页面将以 iframe 形式加载该 URL，而非内部组件渲染。
+                    </p>
+                    <p style={{ marginBottom: 4 }}>
+                      <strong>支持的模板变量：</strong>
+                    </p>
+                    <ul style={{ margin: 0, paddingLeft: 16 }}>
+                      <li>
+                        <code>{"{{locale}}"}</code> → 当前语言 (en/zh)
+                      </li>
+                    </ul>
+                    <p style={{ marginTop: 8 }}>
+                      支持完整 URL 或相对路径（如 /path/to/page）
+                    </p>
+                  </div>
+                ),
+                overlayStyle: { maxWidth: 320 },
+              }}
+              dependencies={["externalRedirectUrl"]}
+              rules={[
+                {
+                  validator: (_, value) => {
+                    if (value?.trim() && externalRedirectUrl?.trim()) {
+                      return Promise.reject(new Error("不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个"));
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input placeholder="e.g. https://example.com/page or /relative/path" />
+            </Form.Item>
+            <Form.Item
+              name="externalRedirectUrl"
+              dependencies={["iframeUrl"]}
+              label={"External Redirect URL"}
+              tooltip={{
+                title: <p style={{ marginBottom: 8 }}>设置后，页面将打开一个新标签并跳转到指定的外部链接。</p>,
+                overlayStyle: { maxWidth: 320 },
+              }}
+              rules={[
+                {
+                  type: "url",
+                  message: "Please enter a valid URL",
+                },
+                {
+                  validator: (_, value) => {
+                    if (value?.trim() && iframeUrl?.trim()) {
+                      return Promise.reject(new Error("不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个"));
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input placeholder="e.g. https://oit-erp.woa.com" />
+            </Form.Item>
+            {hasExternalUrl && (
+              <Form.Item
+                rules={[
+                  {
+                    validator: (_, value) => {
+                      if (!value || !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)) {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(
+                        new Error("Special characters are not allowed in path.")
+                      );
+                    },
+                  },
+                ]}
+                name="path"
+                label="Page Path"
+                tooltip="仅当前端 routeRegistry 中未注册该 page code 时需要填写（如 iframe/外部链接页面）。前端已注册的页面会自动匹配路径，无需手动填写。"
+              >
+                <Input
+                  placeholder="Enter the URL path (e.g., /administration/page-management)"
+                  onChange={() => {
+                    // Mark as manually edited when user types in this field
+                    if (!isPathManuallyEdited) {
+                      setIsPathManuallyEdited(true);
+                    }
+                  }}
+                />
+              </Form.Item>
+            )}
+          </>
+        )}
+        <Form.Item name="description" label="Page Description">
+          <Input.TextArea rows={2} placeholder="Enter a brief description of this page's purpose" />
+        </Form.Item>
+        <Divider>Resource Assignment & Permissions</Divider>
+        <Form.Item label="Select Resources to Assign">
+          <Transfer
+            dataSource={resourceTransferDataSource}
+            titles={["Available Resources", "Assigned Resources"]}
+            targetKeys={selectedResourceIds}
+            onChange={handleResourceTransferChange}
+            render={item => item.title}
+            showSearch
+            filterOption={(inputValue, item) =>
+              item.title.toLowerCase().includes(inputValue.toLowerCase()) ||
+              item.description.toLowerCase().includes(inputValue.toLowerCase())
+            }
+            listStyle={{ width: 280, height: 250 }}
+          />
+        </Form.Item>
+        {selectedResourceIds.length > 0 && (
+          <Form.Item
+            label="Configure Permissions for Each Resource"
+            validateStatus={permissionValidationError ? "error" : ""}
+            help={permissionValidationError || ""}
+          >
+            <Table
+              dataSource={selectedResourcesForPermissionTable}
+              columns={resourcePermissionTableColumns}
+              rowKey="resourceId"
+              pagination={false}
+              size="small"
+              bordered
+            />
+          </Form.Item>
+        )}
+        {formActionType === "edit" && currentResourceAssignments.length > 0 && (
+          <Form.Item label="Current Permission Overview">
+            <Space wrap>
+              {Array.from(
+                new Set(currentResourceAssignments.flatMap(a => a.assignedPermissions)),
+              ).map(permissionAction => (
+                <Tag key={permissionAction} color="blue">
+                  {permissionAction}
+                </Tag>
+              ))}
+            </Space>
+          </Form.Item>
+        )}
+      </Form>
+    </Modal>
+  );
+};