Merge branch 'chore/remove-critical-norm' into 'main'

Chore/remove critical norm

See merge request ics/sp/2025/n25b/pepperplus-ui!55

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -1,6 +1,8 @@
 // This program has been developed by students from the bachelor Computer Science at Utrecht
 // University within the Software Project course.
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
+import { useEffect } from "react";
+import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
   type NodeProps,
   Position,
@@ -39,7 +41,7 @@ export type NormNode = Node<NormNodeData>
  */
 export default function NormNode(props: NodeProps<NormNode>) {
   const data = props.data;
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
   const checkbox_id = `goal_${props.id}_checkbox`;
@@ -47,10 +49,28 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const setValue = (value: string) => {
     updateNodeData(props.id, {norm: value});
   }
+  //this function is commented out, because of lack of backend implementation.
+  //If you wish to set critical norms, in the UI side, you can uncomment and use this function.
+  
+  // const setCritical = (value: boolean) => {
+  //   updateNodeData(props.id, {...data, critical: value});
+  // }
+  useEffect(() => {
+    const normText = data.norm || "";
+    
+    const startsWithNumberWarning: EditorWarning = {
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Norms are not allowed to start with a number."
+    };
 
-  const setCritical = (value: boolean) => {
-    updateNodeData(props.id, {...data, critical: value});
-  }
+    if (/^\d/.test(normText)) {
+      registerWarning(startsWithNumberWarning);
+    } else {
+      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
+    }
+  }, [data.norm, props.id, registerWarning, unregisterWarning]);
 
   return <>
     <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -64,7 +84,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
-      <div className={"flex-row gap-md align-center"}>
+      {/*There is no backend implementation yet of how critical norms would
+      be treated differently than normal norms. The commented code below shows
+      how you could add the UI side, if you wish to implement */}
+      {/* <div className={"flex-row gap-md align-center"}>
         <label htmlFor={checkbox_id}>Critical:</label>
         <input
           id={checkbox_id}
@@ -72,7 +95,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
           checked={data.critical || false}
           onChange={(e) => setCritical(e.target.checked)}
         />
-      </div>
+      </div> */}
 
 
       {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">

test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx

@@ -699,15 +699,12 @@ describe('NormNode', () => {
         />
       );
 
-      const checkbox = screen.getByLabelText('Critical:');
-      await user.click(checkbox);
-
       await waitFor(() => {
         const state = useFlowStore.getState();
         expect(state.nodes).toHaveLength(1);
         expect(state.nodes[0].id).toBe('norm-1');
         expect(state.nodes[0].data.norm).toBe('');
-        expect(state.nodes[0].data.critical).toBe(true);
+
       });
     });