From 676829fff05318b800aec1aa923d0b884672cb10 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 19 Nov 2024 15:25:09 -0300 Subject: [PATCH 1/9] Added warning color --- src/frontend/src/style/index.css | 4 ++++ src/frontend/tailwind.config.mjs | 1 + 2 files changed, 5 insertions(+) diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css index 27dda94f5705..b9d45413d9c1 100644 --- a/src/frontend/src/style/index.css +++ b/src/frontend/src/style/index.css @@ -96,6 +96,8 @@ --note-blue: 213.3 96.9% 87.3%; /* hsl(213.3, 96.9%, 87.3%) */ --note-lime: 80.9 88.5% 79.6%; /* hsl(80.9, 88.5%, 79.6%) */ + --warning: 48 96.6% 76.7%; /* hsl(48, 96.6%, 76.7%) */ + --error-red: 0, 86%, 97%; /*hsla(0, 86%, 97%)*/ --error-red-border: 0, 96%, 89%; /*hsla(0,96%,89%)*/ @@ -204,6 +206,8 @@ --note-blue: 211.7 96.4% 78.4%; /* hsl(211.7, 96.4%, 78.4%) */ --note-lime: 82 84.5% 67.1%; /* hsl(82, 84.5%, 67.1%) */ + --warning: 45.9 96.7% 64.5%; /* hsl(45.9, 96.7%, 64.5%) */ + --node-selected: 234 89% 74%; --ice: #60a5fa; diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index d920e4ac0dc8..5a00e575525c 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -108,6 +108,7 @@ const config = { "status-red": "var(--status-red)", "status-yellow": "var(--status-yellow)", "status-gray": "var(--status-gray)", + warning: "hsl(var(--warning))", "success-background": "var(--success-background)", "success-foreground": "var(--success-foreground)", "accent-pink": "hsl(var(--accent-pink))", From 1bb7c5c637d3ec3c2ded1f97d07252c4e726c5fe Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 19 Nov 2024 15:54:49 -0300 Subject: [PATCH 2/9] Implemented more colors --- src/frontend/src/style/index.css | 4 ++++ src/frontend/tailwind.config.mjs | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css index b9d45413d9c1..58c46731cf0e 100644 --- a/src/frontend/src/style/index.css +++ b/src/frontend/src/style/index.css @@ -97,6 +97,8 @@ --note-lime: 80.9 88.5% 79.6%; /* hsl(80.9, 88.5%, 79.6%) */ --warning: 48 96.6% 76.7%; /* hsl(48, 96.6%, 76.7%) */ + --warning-foreground: 240 6% 10%; /* hsl(240, 6%, 10%) */ + --warning-text: 0 0% 100%; /* hsl(0, 0%, 100%) */ --error-red: 0, 86%, 97%; /*hsla(0, 86%, 97%)*/ --error-red-border: 0, 96%, 89%; /*hsla(0,96%,89%)*/ @@ -207,6 +209,8 @@ --note-lime: 82 84.5% 67.1%; /* hsl(82, 84.5%, 67.1%) */ --warning: 45.9 96.7% 64.5%; /* hsl(45.9, 96.7%, 64.5%) */ + --warning-foreground: 240 6% 10%; /* hsl(240, 6%, 10%) */ + --warning-text: 0 0% 100%; /* hsl(0, 0%, 100%) */ --node-selected: 234 89% 74%; diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index 5a00e575525c..3455040f0768 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -108,7 +108,11 @@ const config = { "status-red": "var(--status-red)", "status-yellow": "var(--status-yellow)", "status-gray": "var(--status-gray)", - warning: "hsl(var(--warning))", + warning: { + DEFAULT: "hsl(var(--warning))", + foreground: "hsl(var(--warning-foreground))", + text: "hsl(var(--warning-text))", + }, "success-background": "var(--success-background)", "success-foreground": "var(--success-foreground)", "accent-pink": "hsl(var(--accent-pink))", From 4d218e4e0c7cff69e00dfef0658fa43a100d7527 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 19 Nov 2024 15:54:56 -0300 Subject: [PATCH 3/9] Implemented warning button variant --- src/frontend/src/components/ui/button.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx index a4328af41730..0e190a42ea68 100644 --- a/src/frontend/src/components/ui/button.tsx +++ b/src/frontend/src/components/ui/button.tsx @@ -15,7 +15,9 @@ const buttonVariants = cva( outline: "border border-input hover:bg-input hover:text-accent-foreground ", primary: - "border bg-background text-secondary-foreground hover:bg-muted dark:hover:bg-muted hover:shadow-sm", + "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm", + warning: + "bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm", secondary: "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5", ghost: From bafb5d2ba3c01195b464c43caf7c3480ee14072f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 19 Nov 2024 15:55:09 -0300 Subject: [PATCH 4/9] Added warning section to node --- .../src/CustomNodes/GenericNode/index.tsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 07f92d823517..0413a694dddc 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -349,6 +349,27 @@ export default function GenericNode({ )} > {memoizedNodeToolbarComponent} + {isOutdated && !isUserEdited && ( +
+ + + Update Ready + + +
+ )}
)} @@ -432,7 +451,6 @@ export default function GenericNode({
)} - {showNode && (
{/* increase height!! */} From 93f51d9fd0662b3b6ff03f2af13a4db2e0249bdb Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 19 Nov 2024 15:55:24 -0300 Subject: [PATCH 5/9] Removed warning button and added warning outline to outdated components --- .../components/NodeStatus/index.tsx | 40 ++++++++----------- 1 file changed, 16 insertions(+), 24 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index 579233ccecb9..05a30be9fe83 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -11,7 +11,6 @@ import { STATUS_BUILD, STATUS_BUILDING, STATUS_INACTIVE, - TOOLTIP_OUTDATED_NODE, } from "@/constants/constants"; import { BuildStatus } from "@/constants/enums"; import { track } from "@/customization/utils/analytics"; @@ -39,8 +38,6 @@ export default function NodeStatus({ buildStatus, isOutdated, isUserEdited, - handleUpdateCode, - loadingUpdate, getValidationStatus, }: { nodeId: string; @@ -53,8 +50,6 @@ export default function NodeStatus({ buildStatus: BuildStatus; isOutdated: boolean; isUserEdited: boolean; - handleUpdateCode: () => void; - loadingUpdate: boolean; getValidationStatus: (data) => VertexBuildTypeAPI | null; }) { const nodeId_ = data.node?.flow?.data @@ -102,7 +97,13 @@ export default function NodeStatus({ ? " border ring-[0.75px] ring-muted-foreground border-muted-foreground hover:shadow-node" : "border ring-[0.5px] hover:shadow-node ring-border"; let frozenClass = selected ? "border-ring-frozen" : "border-frozen"; - return frozen ? frozenClass : className; + let updateClass = + isOutdated && !isUserEdited ? "border-warning border-2" : ""; + return isOutdated && !isUserEdited + ? updateClass + : frozen + ? frozenClass + : className; }; const getNodeBorderClassName = ( selected: boolean, @@ -125,7 +126,15 @@ export default function NodeStatus({ setBorderColor( getNodeBorderClassName(selected, showNode, buildStatus, validationStatus), ); - }, [selected, showNode, buildStatus, validationStatus, frozen]); + }, [ + selected, + showNode, + buildStatus, + validationStatus, + isOutdated, + isUserEdited, + frozen, + ]); useEffect(() => { if (buildStatus === BuildStatus.BUILT && !isBuilding) { @@ -188,22 +197,6 @@ export default function NodeStatus({ return ( <>
- {isOutdated && !isUserEdited && ( - - - - )} -
)}
-
Date: Wed, 20 Nov 2024 15:43:29 -0300 Subject: [PATCH 6/9] Added negative margin top to node for it to not move when updatable --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 0413a694dddc..71237f4ec4bb 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -337,7 +337,7 @@ export default function GenericNode({ Object.values(data.node.template).some((field) => field.tool_mode); return ( - <> +
{memoizedNodeToolbarComponent} {isOutdated && !isUserEdited && ( -
+
)}
- +
); } From 07745c4c876c5ec44854fb30d47f27589f1b28a8 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 20 Nov 2024 15:51:33 -0300 Subject: [PATCH 7/9] Fixed border to be consistent --- .../GenericNode/components/NodeStatus/index.tsx | 8 ++------ src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index 05a30be9fe83..304ddb6cb8c3 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -98,12 +98,8 @@ export default function NodeStatus({ : "border ring-[0.5px] hover:shadow-node ring-border"; let frozenClass = selected ? "border-ring-frozen" : "border-frozen"; let updateClass = - isOutdated && !isUserEdited ? "border-warning border-2" : ""; - return isOutdated && !isUserEdited - ? updateClass - : frozen - ? frozenClass - : className; + isOutdated && !isUserEdited ? "border-warning ring-2 ring-warning" : ""; + return cn(frozen ? frozenClass : className, updateClass); }; const getNodeBorderClassName = ( selected: boolean, diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 71237f4ec4bb..8db6b0ad6635 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -350,7 +350,7 @@ export default function GenericNode({ > {memoizedNodeToolbarComponent} {isOutdated && !isUserEdited && ( -
+
Date: Wed, 20 Nov 2024 15:53:06 -0300 Subject: [PATCH 8/9] removed unused code --- src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx b/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx index 95a0b8124afc..e70f7e470dcc 100644 --- a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx @@ -1,7 +1,6 @@ import { componentsToIgnoreUpdate } from "@/constants/constants"; import { useEffect } from "react"; import { NodeDataType } from "../../types/flow"; -import { nodeNames } from "../../utils/styleUtils"; const useCheckCodeValidity = ( data: NodeDataType, From e787d2248ebdcd047c89e1d2d29d201d3ce7df00 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 21 Nov 2024 15:39:55 +0000 Subject: [PATCH 9/9] [autofix.ci] apply automated fixes --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 8db6b0ad6635..f971b1f7c12e 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -350,7 +350,7 @@ export default function GenericNode({ > {memoizedNodeToolbarComponent} {isOutdated && !isUserEdited && ( -
+