From 328fac39a26281bd3e9c344850fd957829f6809b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 6 Nov 2024 11:09:33 +0000
Subject: [PATCH] fix: console errors from highlight component and tag key prop
 placement (#8669)

Addressing some oversights that led to browser console errors.

This PR fixes console errors related to the recently introduced
highlight component (#8643) and tag row component in the new flag
metadata panel (#8663).
---
 .../component/common/Highlight/Highlight.tsx  | 26 ++++++++++++-------
 .../FeatureOverviewMetaData/TagRow.tsx        |  2 +-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/common/Highlight/Highlight.tsx b/frontend/src/component/common/Highlight/Highlight.tsx
index b4e66197f977..e977fc3e7bf2 100644
--- a/frontend/src/component/common/Highlight/Highlight.tsx
+++ b/frontend/src/component/common/Highlight/Highlight.tsx
@@ -1,5 +1,5 @@
 import { alpha, styled } from '@mui/material';
-import type { ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useHighlightContext } from './HighlightContext';
 import type { HighlightKey } from './HighlightProvider';
 
@@ -27,17 +27,23 @@ const StyledHighlight = styled('div', {
     },
 }));
 
-interface IHighlightProps {
+interface IHighlightProps extends HTMLAttributes<HTMLDivElement> {
     highlightKey: HighlightKey;
     children: ReactNode;
 }
 
-export const Highlight = ({ highlightKey, children }: IHighlightProps) => {
-    const { isHighlighted } = useHighlightContext();
+export const Highlight = forwardRef<HTMLDivElement, IHighlightProps>(
+    ({ highlightKey, children, ...props }, ref) => {
+        const { isHighlighted } = useHighlightContext();
 
-    return (
-        <StyledHighlight highlighted={isHighlighted(highlightKey)}>
-            {children}
-        </StyledHighlight>
-    );
-};
+        return (
+            <StyledHighlight
+                ref={ref}
+                highlighted={isHighlighted(highlightKey)}
+                {...props}
+            >
+                {children}
+            </StyledHighlight>
+        );
+    },
+);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
index 1ec11675a0bc..583b771110e9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/TagRow.tsx
@@ -128,13 +128,13 @@ export const TagRow = ({ feature }: IFeatureOverviewSidePanelTagsProps) => {
                                 const tagLabel = `${tag.type}:${tag.value}`;
                                 return (
                                     <Tooltip
+                                        key={tagLabel}
                                         title={
                                             tagLabel.length > 35 ? tagLabel : ''
                                         }
                                         arrow
                                     >
                                         <StyledAddedTag
-                                            key={tagLabel}
                                             label={tagLabel}
                                             size='small'
                                             deleteIcon={