General BugFixes (#530)

🐛 fix(parameterComponent): fix key prop warning by generating rando key
using new function getRandomKeyByssmm
✨ feat(parameterComponent): add support for dynamic rendering of
parameter component by grouping data by family
🐛 fix(menuBar): fix DropdownMenuTrigger component by adding asChild prop
🐛 fix(card.tsx): change p tag to div tag to fix accessibility issue
🐛 fix(extraSidebarComponent): fix key prop warning by adding key prop to
Tooltip component
✨ feat(utils.ts): add new function getRandomKeyByssmm to generate random
keys for components

src/frontend/package-lock.json

@@ -427,14 +427,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/types/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -931,9 +923,9 @@
       "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.4.1",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.2.tgz",
-      "integrity": "sha512-loCXUOLzIC3jp50RFOKXZ/kQjjz26ryr/23M+FWG9jrmAv8lRf3DUfC2AiVZ3+K316GOhB08CR+Povwz8e9mDw==",
+      "integrity": "sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==",
       "dependencies": {
         "@floating-ui/core": "^1.3.1"
       }
@@ -1003,19 +995,24 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
+      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.17",
+      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "dependencies": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+    },
     "node_modules/@mole-inc/bin-wrapper": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/@mole-inc/bin-wrapper/-/bin-wrapper-8.0.1.tgz",
@@ -3447,7 +3444,7 @@
       "version": "16.18.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
       "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -5013,9 +5010,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.434",
+      "version": "1.4.438",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.434.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz",
-      "integrity": "sha512-5Gvm09UZTQRaWrimRtWRO5rvaX6Kpk5WHAPKDa7A4Gj6NIPuJ8w8WNpnxCXdd+CJJt6RBU6tUw0KyULoW6XuHw=="
+      "integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -5507,6 +5504,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -8280,9 +8278,9 @@
       }
     },
     "node_modules/pirates": {
-      "version": "4.0.5",
+      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
       "engines": {
         "node": ">= 6"
       }

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

@@ -1,6 +1,7 @@
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import {
   classNames,
+  getRandomKeyByssmm,
   groupByFamily,
   isValidConnection,
 } from "../../../../utils";
@@ -79,10 +80,10 @@ export default function ParameterComponent({
 
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle);
-
+    
     refHtml.current = groupedObj.map((item, i) => (
       <span
-        key={i}
+        key={getRandomKeyByssmm()}
         className={classNames(
           i > 0 ? "items-center flex mt-3" : "items-center flex"
         )}
@@ -102,20 +103,19 @@ export default function ParameterComponent({
             -&nbsp;
             {item.type.split(", ").length > 2
               ? item.type.split(", ").map((el, i) => (
-                  <>
+                  <React.Fragment key={el + i}>
-                    <span key={i}>
+                    <span>
-                      {i == item.type.split(", ").length - 1
+                      {i === item.type.split(", ").length - 1 ? el : (el += `, `)}
-                        ? el
-                        : (el += `, `)}
                     </span>
-                    {i % 2 == 0 && i > 0 && <br></br>}
+                    {i % 2 === 0 && i > 0 && <br />}
-                  </>
+                  </React.Fragment>
                 ))
               : item.type}
           </span>
         </span>
       </span>
     ));
+    
   }, [tooltipTitle]);
 
   return (

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -53,7 +53,7 @@ export const MenuBar = ({ flows, tabId }) => {
       </Link>
       <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
             <Button
               className="gap-2 flex items-center max-w-[200px]"
               variant="primary"

src/frontend/src/components/ui/card.tsx

@@ -47,7 +47,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}

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

@@ -160,6 +160,7 @@ export default function ExtraSidebar() {
                         content={t}
                         delayDuration={1500}
                         side="right"
+                        key={i}
                       >
                         <div key={k} data-tooltip-id={t}>
                           <div

src/frontend/src/utils.ts

@@ -812,3 +812,10 @@ export function getRandomName(
   // Return title case final name
   return toTitleCase(final_name);
 }
+
+export function getRandomKeyByssmm(): string{
+  const now = new Date();
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
+  return seconds + milliseconds;
+}