fix(bugs): Update dependencies and enhance UI components (#4478)

platform/ui-next/package.json

@@ -53,7 +53,6 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-shepherd": "6.1.1",
-    "sanitize-html": "^2.13.1",
     "shepherd.js": "13.0.3",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../components/DropdownMenu';
 import { Icons } from '../../components/Icons/Icons';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/Tooltip/Tooltip';
-import sanitizeHtml from 'sanitize-html';
 
 /**
  * DataRow is a complex UI component that displays a selectable, interactive row with hierarchical data.
@@ -131,7 +130,7 @@ const DataRow: React.FC<DataRowProps> = ({
           key={`empty-${indent}`}
           className="h-2"
         ></div>
-      ); // Empty row
+      );
     }
     const cleanText = decodeHTML(text);
     return (
@@ -142,11 +141,11 @@ const DataRow: React.FC<DataRowProps> = ({
         {indentation}
         {cleanText.includes(':') ? (
           <>
-            <span className="font-medium">{sanitizeHtml(cleanText.split(':')[0])}:</span>
-            {sanitizeHtml(cleanText.split(':')[1])}
+            <span className="font-medium">{cleanText.split(':')[0]}:</span>
+            {cleanText.split(':')[1]}
           </>
         ) : (
-          <span className="font-medium">{sanitizeHtml(cleanText)}</span>
+          <span className="font-medium">{cleanText}</span>
         )}
       </div>
     );

platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx

@@ -51,17 +51,19 @@ export const AddSegmentRow: React.FC<AddSegmentRowProps> = ({ children = null, s
 
   return (
     <div className="bg-primary-dark my-px flex h-7 w-full items-center justify-between rounded pl-0.5 pr-7">
-      {allowAddSegment ? (
-        <Button
-          size="sm"
-          variant="ghost"
-          className="pr pl-0.5"
-          onClick={() => onSegmentAdd(segmentationIdToUse)}
-        >
-          <Icons.Add />
-          Add Segment
-        </Button>
-      ) : null}
+      <div className="flex-1">
+        {allowAddSegment ? (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="pr pl-0.5"
+            onClick={() => onSegmentAdd(segmentationIdToUse)}
+          >
+            <Icons.Add />
+            Add Segment
+          </Button>
+        ) : null}
+      </div>
       <Button
         size="icon"
         variant="ghost"

platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx

@@ -61,7 +61,7 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
     info: seg.segmentation.cachedStats?.info,
   }));
 
-  const allowExport = exportOptions.find(
+  const allowExport = exportOptions?.find(
     ({ segmentationId }) => segmentationId === activeSegmentation.id
   )?.isExportable;
 

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -149,6 +149,7 @@ const SidePanel = ({
   activeTabIndex: activeTabIndexProp = null,
   tabs,
   onOpen,
+  onClose,
   expandedWidth = 280,
   onActiveTabIndexChange,
 }) => {
@@ -167,9 +168,11 @@ const SidePanel = ({
       setPanelOpen(panelOpen);
       if (panelOpen && onOpen) {
         onOpen();
+      } else if (onClose && !panelOpen) {
+        onClose();
       }
     },
-    [onOpen]
+    [onOpen, onClose]
   );
 
   const updateActiveTabIndex = useCallback(
@@ -407,6 +410,7 @@ SidePanel.propTypes = {
     ),
   ]),
   onOpen: PropTypes.func,
+  onClose: PropTypes.func,
   onActiveTabIndexChange: PropTypes.func,
   expandedWidth: PropTypes.number,
 };