fix: update design of update component (#4761)

* Added warning color

* Implemented more colors

* Implemented warning button variant

* Added warning section to node

* Removed warning button and added warning outline to outdated components

* Added negative margin top to node for it to not move when updatable

* Fixed border to be consistent

* removed unused code

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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,9 @@ 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 ring-2 ring-warning" : "";
+    return cn(frozen ? frozenClass : className, updateClass);
   };
   const getNodeBorderClassName = (
     selected: boolean,
@@ -125,7 +122,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 +193,6 @@ export default function NodeStatus({
   return (
     <>
       <div className="flex flex-shrink-0 items-center">
-        {isOutdated && !isUserEdited && (
-          <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
-            <Button
-              onClick={handleUpdateCode}
-              unstyled
-              className={"hit-area-icon button-run-bg group p-1"}
-              loading={loadingUpdate}
-            >
-              <IconComponent
-                name="AlertTriangle"
-                className="icon-size text-placeholder-foreground group-hover:text-foreground"
-              />
-            </Button>
-          </ShadTooltip>
-        )}
-
         <div className="flex items-center gap-2 self-center">
           <ShadTooltip
             styleClasses={cn(
@@ -272,7 +261,6 @@ export default function NodeStatus({
             </Badge>
           )}
         </div>
-
         <ShadTooltip content={getTooltipContent()}>
           <div
             ref={divRef}

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 (
-    <>
+    <div className={cn(isOutdated && !isUserEdited ? "relative -mt-10" : "")}>
       <div
         className={cn(
           borderColor,
@@ -349,6 +349,27 @@ export default function GenericNode({
         )}
       >
         {memoizedNodeToolbarComponent}
+        {isOutdated && !isUserEdited && (
+          <div className="flex h-10 w-full items-center gap-4 rounded-t-[0.69rem] bg-warning p-2 px-4 text-warning-foreground">
+            <ForwardedIconComponent
+              name="AlertTriangle"
+              strokeWidth={1.5}
+              className="h-[18px] w-[18px] shrink-0"
+            />
+            <span className="flex-1 truncate text-sm font-medium">
+              Update Ready
+            </span>
+            <Button
+              variant="warning"
+              size="iconMd"
+              className="shrink-0 px-2.5 text-xs"
+              onClick={handleUpdateCode}
+              loading={loadingUpdate}
+            >
+              Update
+            </Button>
+          </div>
+        )}
         <div
           data-testid={`${data.id}-main-node`}
           className={cn(
@@ -415,8 +436,6 @@ export default function GenericNode({
                 buildStatus={buildStatus}
                 isOutdated={isOutdated}
                 isUserEdited={isUserEdited}
-                handleUpdateCode={handleUpdateCode}
-                loadingUpdate={loadingUpdate}
                 getValidationStatus={getValidationStatus}
               />
             )}
@@ -432,7 +451,6 @@ export default function GenericNode({
             </div>
           )}
         </div>
-
         {showNode && (
           <div className="relative">
             {/* increase height!! */}
@@ -509,6 +527,6 @@ export default function GenericNode({
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }

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,

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:

src/frontend/src/style/index.css

@@ -96,6 +96,10 @@
     --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%) */
+    --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%)*/
 
@@ -204,6 +208,10 @@
     --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%) */
+    --warning-foreground: 240 6% 10%; /* hsl(240, 6%, 10%) */
+    --warning-text: 0 0% 100%; /* hsl(0, 0%, 100%) */
+
     --node-selected: 234 89% 74%;
 
     --ice: #60a5fa;

src/frontend/tailwind.config.mjs

@@ -108,6 +108,11 @@ const config = {
         "status-red": "var(--status-red)",
         "status-yellow": "var(--status-yellow)",
         "status-gray": "var(--status-gray)",
+        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))",