MS: Flow Conditions Change

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/flow-condition-modal.module.scss

@@ -1,6 +1,6 @@
 .DisabledConditionInput {
   :global(.view-lines) {
     cursor: not-allowed;
-    background-color: #d9d9d9;
+    background-color: rgb(245, 245, 245);
   }
 }

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/flow-condition-modal.tsx

@@ -36,9 +36,15 @@ type FlowConditionModalProps = {
   element?: Element;
   open: boolean;
   onClose: () => void;
+  readOnly?: boolean;
 };
 
-const FlowConditionModal: React.FC<FlowConditionModalProps> = ({ element, open, onClose }) => {
+const FlowConditionModal: React.FC<FlowConditionModalProps> = ({
+  element,
+  open,
+  onClose,
+  readOnly = false,
+}) => {
   const [description, setDescription] = useState('');
   const [isDefault, setIsDefault] = useState(false);
 
@@ -117,7 +123,11 @@ const FlowConditionModal: React.FC<FlowConditionModalProps> = ({ element, open,
       >
         <Form layout="vertical">
           <Form.Item label="Description">
-            <Input value={description} onChange={(e) => setDescription(e.target.value)} />
+            <Input
+              value={description}
+              disabled={readOnly}
+              onChange={(e) => setDescription(e.target.value)}
+            />
           </Form.Item>
           <Form.Item label="Condition">
             <div
@@ -126,16 +136,16 @@ const FlowConditionModal: React.FC<FlowConditionModalProps> = ({ element, open,
                 height: '32px',
                 padding: '0.25rem 0.6875rem',
                 borderRadius: '0.375rem',
-                cursor: isDefault ? 'not-allowed' : undefined,
-                backgroundColor: isDefault ? '#d9d9d9' : undefined,
+                cursor: isDefault || readOnly ? 'not-allowed' : undefined,
+                backgroundColor: isDefault || readOnly ? 'rgb(245, 245, 245)' : undefined,
               }}
             >
               <Editor
                 defaultValue=""
                 defaultLanguage="typescript"
                 theme="vs-light"
                 options={{
-                  readOnly: isDefault,
+                  readOnly: isDefault || readOnly,
                   automaticLayout: true,
                   fontSize: 14,
                   wordWrap: 'off',
@@ -157,12 +167,16 @@ const FlowConditionModal: React.FC<FlowConditionModalProps> = ({ element, open,
                   minimap: { enabled: false },
                 }}
                 onMount={handleEditorMount}
-                className={cn({ [styles.DisabledConditionInput]: isDefault })}
+                className={cn({ [styles.DisabledConditionInput]: isDefault || readOnly })}
               />
             </div>
           </Form.Item>
           <Form.Item label="Default">
-            <Checkbox checked={isDefault} onChange={(e) => setIsDefault(e.target.checked)} />
+            <Checkbox
+              checked={isDefault}
+              disabled={readOnly}
+              onChange={(e) => setIsDefault(e.target.checked)}
+            />
           </Form.Item>
         </Form>
       </Modal>

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler-toolbar.tsx

@@ -116,6 +116,7 @@ const ModelerToolbar = ({
   const { isListView, processContextPath } = useProcessView();
 
   const modeler = useModelerStateStore((state) => state.modeler);
+  const isExecutable = useModelerStateStore((state) => state.isExecutable);
   const selectedElementId = useModelerStateStore((state) => state.selectedElementId);
   const selectedElement = modeler
     ? selectedElementId
@@ -489,6 +490,7 @@ const ModelerToolbar = ({
             open={showFlowNodeConditionModal}
             onClose={() => setShowFlowNodeConditionModal(false)}
             element={selectedElement}
+            readOnly={isListView || !editingEnabled || !isExecutable}
           />
         </>
       )}