DBZ-8590: Update feedback points

debezium · Jan 26, 2025 · ffcb78d · ffcb78d
1 parent d9fcbf4
commit ffcb78d
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 296 deletions.
diff --git a/debezium-platform-stage/src/components/pipelineDesigner/CreationFlowTransform.tsx b/debezium-platform-stage/src/components/pipelineDesigner/CreationFlowTransform.tsx
@@ -275,7 +275,7 @@ const CreationFlowTransform: React.FC<CreationFlowTransformProps> = ({
         label: transformName,
         sourcePosition: "left",
         targetPosition: "right",
-        ...(transformPredicate && {
+        ...(transformPredicate?.type && {
           predicate: {
             label: transformPredicate.type.split(".").pop(),
             negate: transformPredicate.negate,

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/DataNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/DataNode.tsx
@@ -86,7 +86,6 @@ const DataNode: React.FC<DataNodeProps> = ({ data }) => {
             style={{ cursor: "auto", minWidth: 110 }}
           >
             <CardBody style={{ padding: 7 }} className="pf-v5-u-box-shadow-md">
-              {/* <Bullseye> */}
               <Stack>
                 <StackItem
                   style={{
@@ -119,11 +118,7 @@ const DataNode: React.FC<DataNodeProps> = ({ data }) => {
                 <StackItem
                   style={{
                     paddingTop: 3,
-                    // paddingInlineEnd: 5,
-                    // paddingInlineStart: 5,
                     textAlign: "center",
-                    // display: "flex",
-                    // justifyContent: "center",
                   }}
                 >
                   <Content
@@ -134,7 +129,6 @@ const DataNode: React.FC<DataNodeProps> = ({ data }) => {
                   </Content>
                 </StackItem>
               </Stack>
-              {/* </Bullseye> */}
             </CardBody>
           </Card>
           {data.type === "destination" && (

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/DataSelectorNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/DataSelectorNode.tsx
@@ -1,9 +1,4 @@
-import {
-  Card,
-  CardBody,
-  Stack,
-  StackItem,
-} from "@patternfly/react-core";
+import { Card, CardBody, Stack, StackItem } from "@patternfly/react-core";
 import { Handle, Position } from "reactflow";
 import "./DataNode.css";
 import { DataSinkIcon, DataSourceIcon } from "@patternfly/react-icons";
@@ -61,11 +56,9 @@ const DataSelectorNode: React.FC<DataSelectorNodeProps> = ({ data }) => {
               }}
               className="pf-v5-u-box-shadow-md"
             >
-              {/* <Bullseye> */}
               <Stack>
                 <StackItem
                   style={{
-                    // textAlign: "center",
                     display: "flex",
                     justifyContent: "center",
                     paddingBottom: "5px",
@@ -105,13 +98,11 @@ const DataSelectorNode: React.FC<DataSelectorNodeProps> = ({ data }) => {
                     )}
                   </div>
                 </StackItem>
-                {/* <Divider /> */}
                 {data.welcomeFlow ? (
                   <StackItem>{data.label}</StackItem>
                 ) : (
                   <StackItem
                     style={{
-                      // paddingTop: "2px",
                       display: "flex",
                       justifyContent: "center",
                     }}
@@ -120,7 +111,6 @@ const DataSelectorNode: React.FC<DataSelectorNodeProps> = ({ data }) => {
                   </StackItem>
                 )}
               </Stack>
-              {/* </Bullseye> */}
             </CardBody>
           </Card>
           {data.type === AppStrings.destination && (

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/DebeziumNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/DebeziumNode.tsx
@@ -4,7 +4,6 @@ import "./DebeziumNode.css";
 import dbz from "../../assets/debeziumNoText.png";
 import { useData } from "../../appLayout/AppContext";
 import { AppColors } from "@utils/constants";
-// import { Button } from "@patternfly/react-core";
 
 interface DebeziumNodeProps {
   data: {

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/PipelineDestinationModel.tsx b/debezium-platform-stage/src/components/pipelineDesigner/PipelineDestinationModel.tsx
@@ -10,7 +10,6 @@ import {
 } from "@patternfly/react-core";
 import React, { useCallback, useEffect, useState } from "react";
 import { Destination, fetchData } from "../../apis/apis";
-// import { CreateDestinationForm } from "../../pages/Destination/CreateDestinationForm";
 import { useQuery } from "react-query";
 import { API_URL } from "../../utils/constants";
 import SourceDestinationSelectionList from "../SourceDestinationSelectionList";
@@ -107,7 +106,6 @@ const PipelineDestinationModel: React.FC<PipelineDestinationModelProps> = ({
       <Divider style={{ marginTop: "10px" }} />
       {isCreateChecked === id2 &&
         (selectedDestination === "" ? (
-          //   <TextContent style={{ padding: "10px" }}>
           <Content component="p">
             <b>
               Select the type of destination you want to connect from the list
@@ -116,8 +114,6 @@ const PipelineDestinationModel: React.FC<PipelineDestinationModelProps> = ({
             </b>
           </Content>
         ) : (
-          // </TextContent>
-          // <TextContent style={{ padding: "10px" }}>
           <Content component="p">
             <b>
               Fill out the below form or use the smart editor to setup a new
@@ -126,7 +122,6 @@ const PipelineDestinationModel: React.FC<PipelineDestinationModelProps> = ({
               smart editor.
             </b>
           </Content>
-          // </TextContent>
         ))}
 
       {isCreateChecked === id1 ? (

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/TransformAdditionNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/TransformAdditionNode.tsx
@@ -1,6 +1,4 @@
-import {
-  Button,
-} from "@patternfly/react-core";
+import { Button } from "@patternfly/react-core";
 import { Handle, Position } from "reactflow";
 import "./TransformAdditionNode.css";
 
@@ -37,50 +35,17 @@ const TransformAdditionNode: React.FC<TransformAdditionNodeProps> = ({
           }
         >
           <Handle type="target" id="smt-input" position={data.targetPosition} />
-          {/* <Card ouiaId="BasicCard" isCompact isPlain>
-            <CardBody
-              style={{
-                paddingTop: 8,
-                paddingBottom: 2,
-                paddingLeft: 5,
-                paddingRight: 5,
-              }}
-            >
-              <Bullseye>
-                <div>
-                  <OptimizeIcon style={{ fontSize: 15 }} />
-                </div>
-              </Bullseye>
-            </CardBody>
-            <CardFooter
-              style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 4 }}
-            >
-              {data.action ? (
-                data.action
-              ) : (
-                <Button
-                  variant="link"
-                  style={{ paddingRight: 5, paddingLeft: 5, fontSize: ".7em" }}
-                  size="sm"
-                  icon={<PlusIcon />}
-                  onClick={() => {}}
-                >
-                  {data.label}
-                </Button>
-              )}
-            </CardFooter>
-          </Card> */}
-           {data.action ? (
-                data.action
-              ) : (
-                <Button
-                  variant="plain"
-                  style={{ paddingRight: 5, paddingLeft: 5, fontSize: ".7em" }}
-                  size="sm"
-                  icon={<PlusIcon />}
-                  onClick={() => {}}
-                />
-              )}
+          {data.action ? (
+            data.action
+          ) : (
+            <Button
+              variant="plain"
+              style={{ paddingRight: 5, paddingLeft: 5, fontSize: ".7em" }}
+              size="sm"
+              icon={<PlusIcon />}
+              onClick={() => {}}
+            />
+          )}
           <Handle
             type="source"
             id="smt-output"

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/TransformCollapsedNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/TransformCollapsedNode.tsx
@@ -1,6 +1,5 @@
 import { Handle, Position } from "reactflow";
 import "./DebeziumNode.css";
-
 import { useData } from "../../appLayout/AppContext";
 import { AppColors } from "@utils/constants";
 import {

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/TransformLinkNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/TransformLinkNode.tsx
@@ -81,12 +81,9 @@ const TransformLinkNode: React.FC<TransformLinkNodeProps> = ({ data }) => {
                 paddingRight: "5px",
               }}
             >
-              {/* <Bullseye> */}
-
               <Stack>
                 <StackItem
                   style={{
-                    // textAlign: "center",
                     display: "flex",
                     justifyContent: "center",
                     paddingBottom: 5,
@@ -111,11 +108,7 @@ const TransformLinkNode: React.FC<TransformLinkNodeProps> = ({ data }) => {
                 <StackItem
                   style={{
                     paddingTop: 3,
-                    // paddingInlineEnd: 5,
-                    // paddingInlineStart: 5,
                     textAlign: "center",
-                    // display: "flex",
-                    // justifyContent: "center",
                   }}
                 >
                   <Content

diff --git a/debezium-platform-stage/src/components/pipelineDesigner/TransformSelectorNode.tsx b/debezium-platform-stage/src/components/pipelineDesigner/TransformSelectorNode.tsx
@@ -3,12 +3,7 @@ import "./DebeziumNode.css";
 
 import { useData } from "../../appLayout/AppContext";
 import { AppColors } from "@utils/constants";
-import {
-  Card,
-  CardBody,
-  Stack,
-  StackItem,
-} from "@patternfly/react-core";
+import { Card, CardBody, Stack, StackItem } from "@patternfly/react-core";
 import { DataProcessorIcon } from "@patternfly/react-icons";
 
 interface TransformSelectorNodeProps {
@@ -50,52 +45,46 @@ const TransformSelectorNode: React.FC<TransformSelectorNodeProps> = ({
             style={{ cursor: "auto", width: 110 }}
           >
             <CardBody
-                style={{
-                  paddingTop: "5px",
-                  paddingBottom: "2px",
-                  paddingLeft: "10px",
-                  paddingRight: "10px",
-                }}
+              style={{
+                paddingTop: "5px",
+                paddingBottom: "2px",
+                paddingLeft: "10px",
+                paddingRight: "10px",
+              }}
               className="pf-v5-u-box-shadow-md"
             >
-              {/* <Bullseye> */}
-                <Stack>
-                  <StackItem
+              <Stack>
+                <StackItem
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    paddingBottom: "5px",
+                  }}
+                >
+                  <div
                     style={{
-                      // textAlign: "center",
-                      display: "flex",
+                      display: "inline-flex",
                       justifyContent: "center",
-                      paddingBottom: "5px",
+                      alignItems: "center",
+                      backgroundColor:
+                        "var(--pf-global--palette--black-200, #f5f5f5)",
+                      borderRadius: "5px",
+                      width: "30px",
+                      height: "30px",
                     }}
                   >
-                    <div
-                      style={{
-                        display: "inline-flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        backgroundColor:
-                          "var(--pf-global--palette--black-200, #f5f5f5)",
-                        borderRadius: "5px",
-                        width: "30px",
-                        height: "30px",
-                      }}
-                    >
-                      <DataProcessorIcon style={{ fontSize: 15 }} />
-                    </div>
-                    {/* <div>
-                      <DataProcessorIcon style={{ fontSize: 18 }} />
-                    </div> */}
-                  </StackItem>
-                  {/* <Divider /> */}
-                  <StackItem
-                   style={{
-                    // paddingTop: "2px",
+                    <DataProcessorIcon style={{ fontSize: 15 }} />
+                  </div>
+                </StackItem>
+                <StackItem
+                  style={{
                     display: "flex",
                     justifyContent: "center",
                   }}
-                  >{data.action}</StackItem>
-                </Stack>
-              {/* </Bullseye> */}
+                >
+                  {data.action}
+                </StackItem>
+              </Stack>
             </CardBody>
           </Card>
           <Handle

diff --git a/debezium-platform-stage/src/pages/Pipeline/ConfigurePipeline.tsx b/debezium-platform-stage/src/pages/Pipeline/ConfigurePipeline.tsx
@@ -142,7 +142,7 @@ const ConfigurePipeline: React.FunctionComponent = () => {
   const handleCreatePipeline = async (values: Record<string, string>) => {
     console.log("values", values);
     setIsLoading(true);
-    if(!values["log-level"]) {
+    if (!values["log-level"]) {
       setLogLevelError(true);
       setIsLoading(false);
       return;
@@ -356,27 +356,25 @@ const ConfigurePipeline: React.FunctionComponent = () => {
                           fieldId="log-level-field"
                         >
                           <FormSelect
-                           value={getValue("log-level")}
-                          isRequired
-                          id={'log-level'}
-                          onChange={(_event, value) => {
-                            setValue("log-level", value);
-                            setLogLevelError(false);
-                          }}
-                          aria-label="FormSelect Input"
-                          ouiaId="BasicFormSelect"
-                          validated={
-                            logLevelError ? "error" : "default"
-                          }
+                            value={getValue("log-level")}
+                            isRequired
+                            id={"log-level"}
+                            onChange={(_event, value) => {
+                              setValue("log-level", value);
+                              setLogLevelError(false);
+                            }}
+                            aria-label="FormSelect Input"
+                            ouiaId="BasicFormSelect"
+                            validated={logLevelError ? "error" : "default"}
                           >
-                          {options.map((option, index) => (
-                            <FormSelectOption
-                            isDisabled={option.disabled}
-                            key={index}
-                            value={option.value}
-                            label={option.label}
-                            />
-                          ))}
+                            {options.map((option, index) => (
+                              <FormSelectOption
+                                isDisabled={option.disabled}
+                                key={index}
+                                value={option.value}
+                                label={option.label}
+                              />
+                            ))}
                           </FormSelect>
                         </FormGroup>
                       </FormSection>

diff --git a/debezium-platform-stage/src/pages/Pipeline/EditPipeline.tsx b/debezium-platform-stage/src/pages/Pipeline/EditPipeline.tsx
@@ -418,15 +418,13 @@ const EditPipeline: React.FunctionComponent = () => {
                   isMinimapVisible
                   language={Language.yaml}
                   height="450px"
-                  // className="custom-card-body"
                 />
               )}
             </PageSection>
             <PageSection className="pf-m-sticky-bottom" isFilled={false}>
               <ActionGroup className="create_pipeline-footer">
                 <Button
                   variant="primary"
-                  // onClick={handleCreateSource}
                   isLoading={isLoading}
                   isDisabled={isLoading}
                   type={ButtonType.submit}