feat: Change Beta Tag and UI Enhancements for Node Components (#4417)

📝 (NodeName/index.tsx): Add beta prop to NodeName component for better handling of beta features
📝 (NodeStatus/index.tsx): Import Badge component and add beta badge for beta nodes
📝 (GenericNode/index.tsx): Import Badge component and add beta badge for beta nodes
📝 (nodeToolbarComponent/index.tsx): Add border styling to nodeToolbarComponent for better visual separation
📝 (index.css): Update accent-pink and accent-pink-foreground colors for better contrast

src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx

@@ -13,6 +13,7 @@ export default function NodeName({
   showNode,
   validationStatus,
   isOutdated,
+  beta,
 }: {
   display_name?: string;
   selected: boolean;
@@ -20,6 +21,7 @@ export default function NodeName({
   showNode: boolean;
   validationStatus: VertexBuildTypeAPI | null;
   isOutdated: boolean;
+  beta: boolean;
 }) {
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(display_name);
@@ -88,6 +90,7 @@ export default function NodeName({
             className={cn(
               "max-w-44 truncate text-[14px]",
               validationStatus?.data?.duration && "max-w-36",
+              validationStatus?.data?.duration && beta && "max-w-20",
               isOutdated && "max-w-40",
               !showNode && "max-w-28",
             )}

src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx

@@ -3,6 +3,7 @@ import useIconStatus from "@/CustomNodes/hooks/use-icons-status";
 import useUpdateValidationStatus from "@/CustomNodes/hooks/use-update-validation-status";
 import useValidationStatusString from "@/CustomNodes/hooks/use-validation-status-string";
 import ShadTooltip from "@/components/shadTooltipComponent";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   ICON_STROKE_WIDTH,
@@ -187,7 +188,7 @@ export default function NodeStatus({
 
   return (
     <>
-      <div className="flex flex-shrink-0 items-center gap-1">
+      <div className="flex flex-shrink-0 items-center">
         {isOutdated && !isUserEdited && (
           <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
             <Button
@@ -203,53 +204,69 @@ export default function NodeStatus({
             </Button>
           </ShadTooltip>
         )}
-        <ShadTooltip
-          content={
-            buildStatus === BuildStatus.BUILDING ? (
-              <span> {STATUS_BUILDING} </span>
-            ) : buildStatus === BuildStatus.INACTIVE ? (
-              <span> {STATUS_INACTIVE} </span>
-            ) : !validationStatus ? (
-              <span className="flex">{STATUS_BUILD}</span>
-            ) : (
-              <div className="max-h-100 p-2">
-                <div className="max-h-80 overflow-auto">
-                  {validationString && (
-                    <div className="ml-1 pb-2 text-status-red">
-                      {validationString}
+
+        <div className="flex items-center gap-2 self-center">
+          <ShadTooltip
+            content={
+              buildStatus === BuildStatus.BUILDING ? (
+                <span> {STATUS_BUILDING} </span>
+              ) : buildStatus === BuildStatus.INACTIVE ? (
+                <span> {STATUS_INACTIVE} </span>
+              ) : !validationStatus ? (
+                <span className="flex">{STATUS_BUILD}</span>
+              ) : (
+                <div className="max-h-100 p-2">
+                  <div className="max-h-80 overflow-auto">
+                    {validationString && (
+                      <div className="ml-1 pb-2 text-status-red">
+                        {validationString}
+                      </div>
+                    )}
+                    {lastRunTime && (
+                      <div className={runClass}>
+                        <div>{RUN_TIMESTAMP_PREFIX}</div>
+                        <div className="ml-1 text-status-blue">
+                          {lastRunTime}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <div className={runClass}>
+                    <div>Duration:</div>
+                    <div className="ml-1 text-status-blue">
+                      {validationStatus?.data.duration}
                     </div>
-                  )}
-                  {lastRunTime && (
-                    <div className={runClass}>
-                      <div>{RUN_TIMESTAMP_PREFIX}</div>
-                      <div className="ml-1 text-status-blue">{lastRunTime}</div>
-                    </div>
-                  )}
-                </div>
-                <div className={runClass}>
-                  <div>Duration:</div>
-                  <div className="ml-1 text-status-blue">
-                    {validationStatus?.data.duration}
                   </div>
                 </div>
-              </div>
-            )
-          }
-          side="bottom"
-        >
-          <div className="cursor-help">
-            {conditionSuccess && validationStatus?.data?.duration ? (
-              <div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-emerald-50 px-1 text-[11px] font-bold text-emerald-500">
-                <Check className="h-4 w-4 items-center self-center" />
-                <span>
-                  {normalizeTimeString(validationStatus?.data?.duration)}
-                </span>
-              </div>
-            ) : (
-              iconStatus
-            )}
-          </div>
-        </ShadTooltip>
+              )
+            }
+            side="bottom"
+          >
+            <div className="cursor-help">
+              {conditionSuccess && validationStatus?.data?.duration ? (
+                <div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-accent-emerald px-1 text-[11px] font-bold text-accent-emerald-foreground">
+                  <Check className="h-4 w-4 items-center self-center" />
+                  <span>
+                    {normalizeTimeString(validationStatus?.data?.duration)}
+                  </span>
+                </div>
+              ) : (
+                <div className="flex items-center self-center">
+                  {iconStatus}
+                </div>
+              )}
+            </div>
+          </ShadTooltip>
+
+          {data.node?.beta && showNode && (
+            <Badge
+              size="sq"
+              className="pointer-events-none mr-1 flex h-[22px] w-10 justify-center rounded-[8px] bg-accent-pink text-accent-pink-foreground"
+            >
+              <span className="text-[11px]">BETA</span>
+            </Badge>
+          )}
+        </div>
 
         <ShadTooltip content={getTooltipContent()}>
           <div

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { BorderBeam } from "@/components/ui/border-beams";
 import { BuildStatus } from "@/constants/enums";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
@@ -287,7 +288,7 @@ export default function GenericNode({
         className={cn(
           borderColor,
           showNode
-            ? "w-80 rounded-xl"
+            ? "w-80 rounded-xl shadow-sm hover:shadow-md"
             : `h-[4.065rem] w-48 rounded-[0.75rem] ${!selected ? "border-[1px] border-border ring-[0.5px] ring-border" : ""}`,
           "generic-node-div group/node relative",
           !hasOutputs && "pb-4",
@@ -302,13 +303,6 @@ export default function GenericNode({
             size={300}
           />
         )}
-        <div>
-          {data.node?.beta && showNode && (
-            <div className="h-8 rounded-t-[12px] bg-accent-pink px-4 pt-2 text-[11px] font-medium text-accent-pink-foreground">
-              BETA
-            </div>
-          )}
-        </div>
 
         <div
           data-testid={`${data.id}-main-node`}
@@ -343,6 +337,7 @@ export default function GenericNode({
                   showNode={showNode}
                   validationStatus={validationStatus}
                   isOutdated={isOutdated}
+                  beta={data.node?.beta || false}
                 />
               </div>
             </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -325,7 +325,7 @@ export default function NodeToolbarComponent({
   return (
     <>
       <div className="noflow nowheel nopan nodelete nodrag">
-        <div className="flex items-center gap-1 rounded-lg bg-background p-1 shadow-sm">
+        <div className="flex items-center gap-1 rounded-lg border-[1px] border-border bg-background p-1 shadow-sm">
           {hasCode && (
             <ShadTooltip
               content={

src/frontend/src/style/index.css

@@ -263,13 +263,12 @@
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
     --emerald-success: 160.1 84.1% 39.4%;
-    --accent-emerald-foreground: 161.4 93.5% 30.4%;
     --placeholder: 240 5% 64.9%;
     --hard-zinc: 240 5.2% 33.9%;
     --smooth-red: 0 93.3% 94.1%;
 
-    --accent-pink: 327.3 73.3% 97.1%;
-    --accent-pink-foreground: 333.3 71.4% 50.6%;
+    --accent-pink: 335.9 69% 30.4%;
+    --accent-pink-foreground: 330.4 81.2% 60.4%;
 
     --inner-yellow: 47.9 95.8% 53.1%;
     --inner-yellow-foreground: 35.5 91.7% 32.9%;