refactor(29444): add safeguards for deletion and editing

hivemq · Jan 15, 2025 · 3c5218c · 3c5218c
1 parent 692dd38
commit 3c5218c
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 11 deletions.
diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/components/forms/ReactFlowSchemaForm.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/components/forms/ReactFlowSchemaForm.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react'
+import { FC } from 'react'
 import Form from '@rjsf/chakra-ui'
 import { FormProps } from '@rjsf/core'
 import {
@@ -20,8 +20,6 @@ import { WarningIcon } from '@chakra-ui/icons'
 
 import { ArrayFieldItemTemplate } from '@/components/rjsf/ArrayFieldItemTemplate.tsx'
 import { ArrayFieldTemplate } from '@/components/rjsf/ArrayFieldTemplate.tsx'
-import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
-import { DesignerStatus } from '@datahub/types.ts'
 
 // overriding the heading definition
 function TitleFieldTemplate<T = unknown, S extends StrictRJSFSchema = RJSFSchema>({
@@ -154,16 +152,17 @@ function FieldTemplate<
   )
 }
 
-export const ReactFlowSchemaForm: FC<Omit<FormProps, 'validator' | 'templates' | 'liveValidate' | 'omitExtraData'>> = (
-  props
-) => {
-  const { uiSchema, ...rest } = props
-  const { status } = useDataHubDraftStore()
-  const isEditable = useMemo(() => status !== DesignerStatus.LOADED, [status])
+interface ReactFlowSchemaFormProps
+  extends Omit<FormProps, 'validator' | 'templates' | 'liveValidate' | 'omitExtraData'> {
+  isNodeEditable?: boolean
+}
+
+export const ReactFlowSchemaForm: FC<ReactFlowSchemaFormProps> = (props) => {
+  const { uiSchema, isNodeEditable = true, ...rest } = props
 
   return (
     <Form
-      readonly={status === DesignerStatus.LOADED}
+      readonly={!isNodeEditable}
       id="datahub-node-form"
       showErrorList="bottom"
       templates={{
@@ -176,7 +175,7 @@ export const ReactFlowSchemaForm: FC<Omit<FormProps, 'validator' | 'templates' |
       }}
       validator={validator}
       // TODO[NVL] Not sure we want to hide the validation when readonly
-      noValidate={!isEditable}
+      noValidate={!isNodeEditable}
       uiSchema={{
         ...uiSchema,
         'ui:submitButtonOptions': {

diff --git a/...edge/src/frontend/src/extensions/datahub/designer/behavior_policy/BehaviorPolicyPanel.tsx b/...edge/src/frontend/src/extensions/datahub/designer/behavior_policy/BehaviorPolicyPanel.tsx
@@ -9,11 +9,13 @@ import { useGetAllBehaviorPolicies } from '@datahub/api/hooks/DataHubBehaviorPol
 import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaForm.tsx'
 import { MOCK_BEHAVIOR_POLICY_SCHEMA } from '@datahub/designer/behavior_policy/BehaviorPolicySchema.ts'
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const BehaviorPolicyPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { t } = useTranslation('datahub')
   const { nodes } = useDataHubDraftStore()
   const { data: allPolicies } = useGetAllBehaviorPolicies({})
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const data = useMemo(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<BehaviorPolicyData> | undefined
@@ -31,8 +33,10 @@ export const BehaviorPolicyPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_BEHAVIOR_POLICY_SCHEMA.schema}
           uiSchema={MOCK_BEHAVIOR_POLICY_SCHEMA.uiSchema}
           customValidate={customValidate}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/client_filter/ClientFilterPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/client_filter/ClientFilterPanel.tsx
@@ -6,9 +6,11 @@ import { ClientFilterData, PanelProps } from '@datahub/types.ts'
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
 import { MOCK_CLIENT_FILTER_SCHEMA } from '@datahub/designer/client_filter/ClientFilterSchema.ts'
 import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaForm.tsx'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const ClientFilterPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { nodes } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const clients = useMemo(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<ClientFilterData> | undefined
@@ -17,8 +19,10 @@ export const ClientFilterPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_CLIENT_FILTER_SCHEMA.schema}
           uiSchema={MOCK_CLIENT_FILTER_SCHEMA.uiSchema}
           formData={{ clients: clients }}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/data_policy/DataPolicyPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/data_policy/DataPolicyPanel.tsx
@@ -9,11 +9,13 @@ import { MOCK_DATA_POLICY_SCHEMA } from '@datahub/designer/data_policy/DataPolic
 import { CustomValidator } from '@rjsf/utils'
 import { useGetAllDataPolicies } from '@datahub/api/hooks/DataHubDataPoliciesService/useGetAllDataPolicies.tsx'
 import { useTranslation } from 'react-i18next'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const DataPolicyPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { t } = useTranslation('datahub')
   const { nodes } = useDataHubDraftStore()
   const { data: allPolicies } = useGetAllDataPolicies()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const data = useMemo(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<DataPolicyData> | undefined
@@ -31,8 +33,10 @@ export const DataPolicyPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit })
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_DATA_POLICY_SCHEMA.schema}
           uiSchema={MOCK_DATA_POLICY_SCHEMA.uiSchema}
           formData={data}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/operation/OperationPanel.tsx
@@ -12,10 +12,12 @@ import { MOCK_OPERATION_SCHEMA } from '@datahub/designer/operation/OperationData
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
 import { getAllParents, isFunctionNodeType, reduceIdsFrom } from '@datahub/utils/node.utils.ts'
 import { DataHubNodeType, DataPolicyData, OperationData, PanelProps } from '@datahub/types.ts'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const OperationPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { t } = useTranslation('datahub')
   const { nodes, edges, functions } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const formData = useMemo(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<OperationData> | undefined
@@ -67,8 +69,10 @@ export const OperationPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) =
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_OPERATION_SCHEMA.schema}
           uiSchema={MOCK_OPERATION_SCHEMA.uiSchema}
           formData={formData}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/schema/SchemaPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/schema/SchemaPanel.tsx
@@ -15,10 +15,12 @@ import { datahubRJSFWidgets } from '@datahub/designer/datahubRJSFWidgets.tsx'
 import { MOCK_SCHEMA_SCHEMA } from '@datahub/designer/schema/SchemaData.ts'
 import { getSchemaFamilies } from '@datahub/designer/schema/SchemaNode.utils.ts'
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const SchemaPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { data: allSchemas } = useGetAllSchemas()
   const { nodes } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
   const [formData, setFormData] = useState<SchemaData | null>(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<SchemaData> | undefined
 
@@ -156,8 +158,10 @@ export const SchemaPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_SCHEMA_SCHEMA.schema}
           uiSchema={getUISchema(formData)}
           formData={formData}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/script/FunctionPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/script/FunctionPanel.tsx
@@ -12,10 +12,12 @@ import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaFo
 import { datahubRJSFWidgets } from '@datahub/designer/datahubRJSFWidgets.tsx'
 import { MOCK_FUNCTION_SCHEMA } from '@datahub/designer/script/FunctionData.ts'
 import { getScriptFamilies } from '@datahub/designer/schema/SchemaNode.utils.ts'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const FunctionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { data: allScripts } = useGetAllScripts({})
   const { nodes } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const [formData, setFormData] = useState<FunctionData | null>(() => {
     const sourceNode = nodes.find((node) => node.id === selectedNode) as Node<FunctionData> | undefined
@@ -118,8 +120,10 @@ export const FunctionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) =>
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           widgets={datahubRJSFWidgets}
           schema={MOCK_FUNCTION_SCHEMA.schema}
           uiSchema={getUISchema(formData)}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/topic_filter/TopicFilterPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/topic_filter/TopicFilterPanel.tsx
@@ -11,11 +11,13 @@ import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
 import { validateDuplicates } from '@datahub/utils/rjsf.utils.ts'
 import { ReactFlowSchemaForm } from '@datahub/components/forms/'
 import { useGetAllDataPolicies } from '@datahub/api/hooks/DataHubDataPoliciesService/useGetAllDataPolicies.tsx'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const TopicFilterPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { t } = useTranslation('datahub')
   const { isLoading, data } = useGetAllDataPolicies()
   const { nodes } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const listFilters = useMemo(() => {
     if (isLoading || !data) return undefined
@@ -49,8 +51,10 @@ export const TopicFilterPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit })
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_TOPIC_FILTER_SCHEMA.schema}
           uiSchema={MOCK_TOPIC_FILTER_SCHEMA.uiSchema}
           formData={formData}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/transition/TransitionPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/transition/TransitionPanel.tsx
@@ -19,9 +19,11 @@ import { MOCK_TRANSITION_SCHEMA } from '@datahub/designer/transition/TransitionD
 import { datahubRJSFWidgets } from '@datahub/designer/datahubRJSFWidgets.tsx'
 import { MOCK_BEHAVIOR_POLICY_SCHEMA } from '@datahub/designer/behavior_policy/BehaviorPolicySchema.ts'
 import { FiniteStateMachineFlow } from '@datahub/components/fsm/FiniteStateMachineFlow.tsx'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const TransitionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { nodes, edges } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   // TODO[NVL] Error messages?
   const parentPolicy = useMemo(() => {
@@ -113,8 +115,10 @@ export const TransitionPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit })
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_TRANSITION_SCHEMA.schema}
           uiSchema={{
             ...MOCK_TRANSITION_SCHEMA.uiSchema,

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/designer/validator/ValidatorPanel.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/designer/validator/ValidatorPanel.tsx
@@ -9,10 +9,12 @@ import { DataHubNodeType, PanelProps, ValidatorData } from '@datahub/types.ts'
 import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
 import { ReactFlowSchemaForm } from '@datahub/components/forms/ReactFlowSchemaForm.tsx'
 import { MOCK_VALIDATOR_SCHEMA } from '@datahub/designer/validator/DataPolicyValidator.ts'
+import { usePolicyGuards } from '@datahub/hooks/usePolicyGuards.tsx'
 
 export const ValidatorPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) => {
   const { t } = useTranslation('datahub')
   const { nodes } = useDataHubDraftStore()
+  const { guardAlert, isNodeEditable } = usePolicyGuards(selectedNode)
 
   const data = useMemo(() => {
     const adapterNode = nodes.find((e) => e.id === selectedNode) as Node<ValidatorData> | undefined
@@ -29,8 +31,10 @@ export const ValidatorPanel: FC<PanelProps> = ({ selectedNode, onFormSubmit }) =
 
   return (
     <Card>
+      {guardAlert && guardAlert}
       <CardBody>
         <ReactFlowSchemaForm
+          isNodeEditable={isNodeEditable}
           schema={MOCK_VALIDATOR_SCHEMA.schema}
           // uiSchema={MOCK_TOPIC_FILTER_SCHEMA.uiSchema}
           formData={data}

diff --git a/hivemq-edge/src/frontend/src/extensions/datahub/hooks/usePolicyGuards.tsx b/hivemq-edge/src/frontend/src/extensions/datahub/hooks/usePolicyGuards.tsx
@@ -0,0 +1,41 @@
+import useDataHubDraftStore from '@datahub/hooks/useDataHubDraftStore.ts'
+import { useMemo } from 'react'
+import { Node } from 'reactflow'
+import { DesignerStatus, TopicFilterData } from '@datahub/types.ts'
+import { canDeleteNode } from '@datahub/utils/node.utils.ts'
+import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react'
+
+export const usePolicyGuards = (selectedNode: string) => {
+  const { status } = useDataHubDraftStore()
+  const { nodes } = useDataHubDraftStore()
+
+  const adapterNode = useMemo(() => {
+    return nodes.find((e) => e.id === selectedNode) as Node<TopicFilterData> | undefined
+  }, [selectedNode, nodes])
+
+  const isPolicyEditable = useMemo(() => status !== DesignerStatus.LOADED, [status])
+
+  const protectedNode = adapterNode && canDeleteNode(adapterNode, status)
+  console.log('XXXXXX isPolicyEditable', isPolicyEditable, protectedNode)
+
+  let guardAlert = null
+  if (!isPolicyEditable) {
+    guardAlert = (
+      <Alert status="info" mb={5}>
+        <AlertIcon />
+        <AlertTitle>The policy is in read-only mode</AlertTitle>
+        The element cannot be modified
+      </Alert>
+    )
+  } else if (protectedNode && !protectedNode.delete) {
+    guardAlert = (
+      <Alert status="info" mb={5}>
+        <AlertIcon />
+        <AlertTitle>The element is protected</AlertTitle>
+        {protectedNode?.error}
+      </Alert>
+    )
+  }
+
+  return { status, isNodeEditable: isPolicyEditable && protectedNode && protectedNode?.delete, guardAlert: guardAlert }
+}