Update custom rule node

wso2 · Dec 8, 2024 · 727dafe · 727dafe
1 parent ba964ff
commit 727dafe
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 1 deletion.
diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.scss b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.scss
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+:root {
+    --wso2is-flow-builder-rule-background-color: #002e58;
+    --wso2is-flow-builder-rule-action-panel-height: 44px;
+    --wso2is-flow-builder-rule-remove-button-color: var(--oxygen-palette-grey-500);
+    --wso2is-flow-builder-rule-remove-button-hover-color: var(--oxygen-palette-primary-contrastText);
+    --wso2is-flow-builder-rule-content-box-width: 150px;
+}
+
+.flow-builder-rule {
+    background-color: var(--wso2is-flow-builder-rule-background-color);
+    border-radius: var(--oxygen-shape-borderRadius);
+
+    .flow-builder-rule-content {
+        display: flex;
+        flex-flow: column nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        text-align: left;
+
+        .flow-builder-rule-content-box {
+            padding: 32px;
+            width: var(--wso2is-flow-builder-rule-content-box-width);
+            cursor: auto;
+        }
+    }
+
+    .flow-builder-rule-action-panel {
+        padding: 10px 14px;
+        height: var(--wso2is-flow-builder-rule-action-panel-height);
+
+        .flow-builder-rule-id {
+            color: var(--oxygen-palette-primary-contrastText);
+        }
+
+        .flow-builder-rule-remove-button {
+            border: 2px solid var(--wso2is-flow-builder-rule-remove-button-color);
+            padding: 2px;
+            color: var(--wso2is-flow-builder-rule-remove-button-color);
+
+            &:hover {
+                border-color: var(--wso2is-flow-builder-rule-remove-button-hover-color);
+                color: var(--wso2is-flow-builder-rule-remove-button-hover-color);
+            }
+        }
+    }
+}
diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Box from "@oxygen-ui/react/Box";
+import IconButton from "@oxygen-ui/react/IconButton";
+import Paper from "@oxygen-ui/react/Paper";
+import Tooltip from "@oxygen-ui/react/Tooltip";
+import Typography from "@oxygen-ui/react/Typography";
+import { XMarkIcon } from "@oxygen-ui/react-icons";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import { Handle, Node, Position, useNodeId, useReactFlow } from "@xyflow/react";
+import React, {
+    DragEvent,
+    FunctionComponent,
+    MouseEvent,
+    MutableRefObject,
+    ReactElement,
+    useCallback,
+    useRef
+} from "react";
+import "./rule.scss";
+
+/**
+ * Props interface of {@link Rule}
+ */
+export interface RulePropsInterface extends Node, IdentifiableComponentInterface {}
+
+/**
+ * Node for representing an empty step in the flow builder.
+ *
+ * @param props - Props injected to the component.
+ * @returns Rule Node component.
+ */
+export const Rule: FunctionComponent<RulePropsInterface> = ({
+    data,
+    "data-componentid": componentId = "rule"
+}: RulePropsInterface): ReactElement => {
+    const nodeId: string = useNodeId();
+    const { deleteElements } = useReactFlow();
+
+    const ref: MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+    const handleDragOver: (event: DragEvent) => void = useCallback((event: DragEvent) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    }, []);
+
+    const handleDrop: (e: DragEvent) => void = useCallback(
+        (event: DragEvent) => {
+            event.preventDefault();
+        },
+        [ data?.type ]
+    );
+
+    return (
+        <div
+            ref={ ref }
+            className="flow-builder-rule"
+            data-componentid={ componentId }
+            onDrop={ handleDrop }
+            onDrag={ handleDragOver }
+        >
+            <Box display="flex" justifyContent="space-between" className="flow-builder-rule-action-panel">
+                <Typography
+                    variant="body2"
+                    data-componentid={ `${componentId}-heading-text` }
+                    className="flow-builder-rule-id"
+                >
+                    Rule
+                </Typography>
+                <Tooltip title={ "Remove" }>
+                    <IconButton
+                        size="small"
+                        onClick={ (_: MouseEvent<HTMLButtonElement>) => {
+                            deleteElements({ nodes: [ { id: nodeId } ] });
+                        } }
+                        className="flow-builder-rule-remove-button"
+                    >
+                        <XMarkIcon />
+                    </IconButton>
+                </Tooltip>
+            </Box>
+            <Handle type="target" position={ Position.Left } />
+            <Box className="flow-builder-rule-content nodrag" data-componentid={ `${componentId}-inner` }>
+                <Paper className="flow-builder-rule-content-box" elevation={ 0 } variant="outlined"></Paper>
+            </Box>
+            <Handle type="source" position={ Position.Right } id="a" />
+        </div>
+    );
+};
+
+export default Rule;
diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss
@@ -21,6 +21,7 @@
     --wso2is-flow-builder-step-action-panel-height: 44px;
     --wso2is-flow-builder-step-remove-button-color: var(--oxygen-palette-grey-500);
     --wso2is-flow-builder-step-remove-button-hover-color: var(--oxygen-palette-primary-contrastText);
+    --wso2is-flow-builder-step-content-box-width: 350px;
     --wso2is-flow-builder-step-content-form-field-drag-handle-width: 25px;
 }
 
@@ -38,7 +39,7 @@
 
         .flow-builder-step-content-box {
             padding: 32px;
-            width: 350px;
+            width: var(--wso2is-flow-builder-step-content-box-width);
             cursor: auto;
         }