From 64ebeddb6e592beaa57eae87a314eedf71e5ddf2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 20 Jan 2025 17:01:10 -0700
Subject: [PATCH] onchagne appsegmetned update

---
 .../EditContentTopApp/EditContentTopApp.tsx   |  6 +--
 .../SelectAxisColumnContent/EditDisplayAs.tsx |  7 +--
 .../EditLabelStyle.tsx                        |  7 +--
 .../SelectAxisColumnContent/EditLineStyle.tsx |  2 +-
 .../app/app/collections/_CollectionHeader.tsx |  2 +-
 .../DatasetHeaderOptions.tsx                  |  9 ++--
 .../permissions/PermissionAppSegments.tsx     | 36 +---------------
 .../_ThreadItemsContainer.tsx                 |  1 +
 .../app/settings/users/ListUsersComponent.tsx |  3 +-
 .../settings/users/UserListPopupContainer.tsx |  2 +
 .../attributes/UserAttributesController.tsx   |  2 +
 .../UserDatasetGroupsController.tsx           |  2 +
 .../datasets/UserDatasetsController.tsx       |  2 +
 .../[userId]/teams/UserTeamsController.tsx    |  2 +
 ...BusterListSelectedOptionPopupContainer.tsx |  2 +-
 web/src/components/segmented/AppSegmented.tsx | 43 ++++++++++++++++---
 16 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/EditContentTopApp/EditContentTopApp.tsx b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/EditContentTopApp/EditContentTopApp.tsx
index fd0257cf9..ce7f60c8c 100644
--- a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/EditContentTopApp/EditContentTopApp.tsx
+++ b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/EditContentTopApp/EditContentTopApp.tsx
@@ -59,11 +59,7 @@ export const EditContentTopApp: React.FC<{
       .map((option) => {
         return {
           value: option.name,
-          label: (
-            <AppTooltip title={option.name}>
-              <span>{option.name}</span>
-            </AppTooltip>
-          )
+          label: option.name
         };
       })
       .filter((v) => {
diff --git a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
index a535a32fd..52bcd0650 100644
--- a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
+++ b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
@@ -1,14 +1,11 @@
 import { IBusterThreadMessageChartConfig } from '@/api/buster-rest/threads/threadConfigInterfaces';
-import React, { MouseEventHandler, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 import { LabelAndInput } from '../../../Common/LabelAndInput';
 import { AppMaterialIcons, AppSegmented, AppTooltip } from '@/components';
-import { Segmented, SegmentedProps } from 'antd';
 import { ChartType, ColumnSettings } from '@/components/charts/interfaces';
-import { SegmentedLabeledOption, SegmentedValue } from 'antd/es/segmented';
-import { useMemoizedFn } from 'ahooks';
 import { useEditAppSegmented } from './useEditAppSegmented';
 
-const options: SegmentedLabeledOption<SegmentedValue>[] = [
+const options = [
   {
     icon: <AppMaterialIcons icon="bar_chart" data-value="bar" />,
     value: 'bar',
diff --git a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
index 08b024455..e65b9eb22 100644
--- a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
+++ b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
@@ -28,11 +28,8 @@ export const EditLabelStyle: React.FC<{
     const filteredOptions = enabledOptions.map((option) => ColumnTypeIcon[option]);
     return filteredOptions.map((option) => ({
       value: option.value,
-      label: (
-        <AppTooltip mouseEnterDelay={0.75} className={cx(styles.icon)} title={option.tooltip}>
-          {option.icon}
-        </AppTooltip>
-      )
+      tooltip: option.tooltip,
+      icon: option.icon
     }));
   }, [enabledOptions]);
 
diff --git a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
index c90e934f4..723c20e3b 100644
--- a/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
+++ b/web/src/app/app/_controllers/ThreadController/ThreadControllerEditContent/SidebarStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
@@ -94,7 +94,7 @@ export const EditLineStyle: React.FC<{
       <LabelAndInput label="Line settings">
         <div className="flex justify-end">
           <AppSegmented
-            options={shownOptions as SegmentedProps['options']}
+            options={shownOptions}
             block={false}
             bordered={false}
             value={selectedOption}
diff --git a/web/src/app/app/collections/_CollectionHeader.tsx b/web/src/app/app/collections/_CollectionHeader.tsx
index 1a9633494..3daab7717 100644
--- a/web/src/app/app/collections/_CollectionHeader.tsx
+++ b/web/src/app/app/collections/_CollectionHeader.tsx
@@ -102,7 +102,7 @@ export const CollectionHeader: React.FC<{}> = React.memo(() => {
 });
 CollectionHeader.displayName = 'CollectionHeader';
 
-const filters: SegmentedLabeledOption<SegmentedValue>[] = [
+const filters = [
   {
     label: 'All',
     value: JSON.stringify({})
diff --git a/web/src/app/app/datasets/[datasetId]/_DatasetsIndividualHeader/DatasetHeaderOptions.tsx b/web/src/app/app/datasets/[datasetId]/_DatasetsIndividualHeader/DatasetHeaderOptions.tsx
index 472ef3630..800427f2f 100644
--- a/web/src/app/app/datasets/[datasetId]/_DatasetsIndividualHeader/DatasetHeaderOptions.tsx
+++ b/web/src/app/app/datasets/[datasetId]/_DatasetsIndividualHeader/DatasetHeaderOptions.tsx
@@ -24,14 +24,11 @@ export const DatasetsHeaderOptions: React.FC<{
     [isAdmin]
   );
 
-  const options: SegmentedProps['options'] = useMemo(
+  const options = useMemo(
     () =>
       optionsItems.map((key) => ({
-        label: (
-          <Link prefetch href={keyToRoute(datasetId!, key)}>
-            {DataSetAppText[key as DatasetApps]}
-          </Link>
-        ),
+        label: DataSetAppText[key as DatasetApps],
+        link: keyToRoute(datasetId!, key),
         value: key
       })),
     [datasetId, optionsItems]
diff --git a/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx b/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx
index 53018ada2..5a9dfe837 100644
--- a/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx
+++ b/web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx
@@ -71,46 +71,12 @@ export const PermissionAppSegments: React.FC<{
     [datasetId]
   );
 
-  const onChange = useMemoizedFn((value: SegmentedValue) => {
-    // if (typeof value === 'string') {
-    //   const linkRef = ref.current?.querySelector(`a[data-value="${value}"]`);
-    //   const href = linkRef?.getAttribute('href');
-    //   if (href) {
-    //     router.push(href);
-    //   }
-    // }
-  });
-
   return (
     <div ref={ref} className="flex flex-col justify-center space-x-0 space-y-2">
-      <AppSegmented options={options} value={selectedApp} onChange={onChange} />
+      <AppSegmented options={options} value={selectedApp} />
       <Divider className="" />
     </div>
   );
 });
 
 PermissionAppSegments.displayName = 'PermissionAppSegments';
-
-// const PrefetchRouteSegmentItem = React.memo(
-//   ({
-//     value,
-//     label,
-//     link,
-//     onHover
-//   }: {
-//     value: PermissionApps;
-//     label: string;
-//     link: string;
-//     onHover: (route: PermissionApps) => void;
-//   }) => {
-//     return (
-//       <Link href={link} data-value={value}>
-//         <span className="" onMouseEnter={() => onHover(value)}>
-//           {label}
-//         </span>
-//       </Link>
-//     );
-//   }
-// );
-
-// PrefetchRouteSegmentItem.displayName = 'PrefetchRouteSegmentItem';
diff --git a/web/src/app/app/metrics/_ThreadListContainer/_ThreadItemsContainer.tsx b/web/src/app/app/metrics/_ThreadListContainer/_ThreadItemsContainer.tsx
index 7ab174ec6..6c18ed772 100644
--- a/web/src/app/app/metrics/_ThreadListContainer/_ThreadItemsContainer.tsx
+++ b/web/src/app/app/metrics/_ThreadListContainer/_ThreadItemsContainer.tsx
@@ -203,6 +203,7 @@ const EmptyState: React.FC<{
 
   return <MetricsEmptyState openNewCollectionModal={openNewCollectionModal} type={type} />;
 });
+EmptyState.displayName = 'EmptyState';
 
 const MetricsEmptyState: React.FC<{
   openNewCollectionModal: () => void;
diff --git a/web/src/app/app/settings/users/ListUsersComponent.tsx b/web/src/app/app/settings/users/ListUsersComponent.tsx
index 06bb2fc92..cc3c7c4be 100644
--- a/web/src/app/app/settings/users/ListUsersComponent.tsx
+++ b/web/src/app/app/settings/users/ListUsersComponent.tsx
@@ -3,7 +3,6 @@ import {
   BusterInfiniteList,
   BusterListColumn,
   BusterListRowItem,
-  BusterListSelectedOptionPopupContainer,
   InfiniteListContainer
 } from '@/components/list';
 import { Card } from 'antd';
@@ -130,3 +129,5 @@ const EmptyState = React.memo(({ isFetched }: { isFetched: boolean }) => {
     </div>
   );
 });
+
+EmptyState.displayName = 'EmptyState';
diff --git a/web/src/app/app/settings/users/UserListPopupContainer.tsx b/web/src/app/app/settings/users/UserListPopupContainer.tsx
index fe7d705c1..404ee4af9 100644
--- a/web/src/app/app/settings/users/UserListPopupContainer.tsx
+++ b/web/src/app/app/settings/users/UserListPopupContainer.tsx
@@ -27,3 +27,5 @@ const PermissionGroupAssignButton: React.FC<{
 }> = React.memo(({ selectedRowKeys, onSelectChange }) => {
   return <div>PermissionGroupAssignButton</div>;
 });
+
+PermissionGroupAssignButton.displayName = 'PermissionGroupAssignButton';
diff --git a/web/src/app/app/settings/users/[userId]/attributes/UserAttributesController.tsx b/web/src/app/app/settings/users/[userId]/attributes/UserAttributesController.tsx
index 79d411e8a..8f1c241f1 100644
--- a/web/src/app/app/settings/users/[userId]/attributes/UserAttributesController.tsx
+++ b/web/src/app/app/settings/users/[userId]/attributes/UserAttributesController.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Card } from 'antd';
 import { createStyles } from 'antd-style';
 
diff --git a/web/src/app/app/settings/users/[userId]/dataset-groups/UserDatasetGroupsController.tsx b/web/src/app/app/settings/users/[userId]/dataset-groups/UserDatasetGroupsController.tsx
index aac29c1fb..d86df834d 100644
--- a/web/src/app/app/settings/users/[userId]/dataset-groups/UserDatasetGroupsController.tsx
+++ b/web/src/app/app/settings/users/[userId]/dataset-groups/UserDatasetGroupsController.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Card } from 'antd';
 import { createStyles } from 'antd-style';
 
diff --git a/web/src/app/app/settings/users/[userId]/datasets/UserDatasetsController.tsx b/web/src/app/app/settings/users/[userId]/datasets/UserDatasetsController.tsx
index 97606730b..978181def 100644
--- a/web/src/app/app/settings/users/[userId]/datasets/UserDatasetsController.tsx
+++ b/web/src/app/app/settings/users/[userId]/datasets/UserDatasetsController.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Card } from 'antd';
 import { createStyles } from 'antd-style';
 
diff --git a/web/src/app/app/settings/users/[userId]/teams/UserTeamsController.tsx b/web/src/app/app/settings/users/[userId]/teams/UserTeamsController.tsx
index e22514e61..8889a1c65 100644
--- a/web/src/app/app/settings/users/[userId]/teams/UserTeamsController.tsx
+++ b/web/src/app/app/settings/users/[userId]/teams/UserTeamsController.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Card } from 'antd';
 import { createStyles } from 'antd-style';
 
diff --git a/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx b/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx
index 546438f21..f9f5a4dc8 100644
--- a/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx
+++ b/web/src/components/list/BusterList/BusterListSelectedOptionPopup/BusterListSelectedOptionPopupContainer.tsx
@@ -88,7 +88,7 @@ const SelectedButton: React.FC<{
       <Text>{text}</Text>
 
       <div
-        className="ml-1"
+        className="ml-1.5"
         style={{
           borderLeft: `0.5px dashed ${token.colorBorder}`,
           height: token.controlHeight - 2
diff --git a/web/src/components/segmented/AppSegmented.tsx b/web/src/components/segmented/AppSegmented.tsx
index cf020bcc1..0a32d8144 100644
--- a/web/src/components/segmented/AppSegmented.tsx
+++ b/web/src/components/segmented/AppSegmented.tsx
@@ -3,10 +3,20 @@ import { ConfigProvider, Segmented, SegmentedProps, ThemeConfig } from 'antd';
 import { createStyles } from 'antd-style';
 import { busterAppStyleConfig } from '@/styles/busterAntDStyleConfig';
 import Link from 'next/link';
+import { useMemoizedFn } from 'ahooks';
+import { useRouter } from 'next/navigation';
+import { AppTooltip } from '@/components/tooltip';
 const token = busterAppStyleConfig.token!;
 
-type SegmentedOption = { value: string; label: string; link?: string; onHover?: () => void };
-export interface AppSegmentedProps extends SegmentedProps {
+type SegmentedOption = {
+  value: string;
+  label?: string;
+  link?: string;
+  onHover?: () => void;
+  icon?: React.ReactNode;
+  tooltip?: string;
+};
+export interface AppSegmentedProps extends Omit<SegmentedProps, 'options'> {
   bordered?: boolean;
   options: SegmentedOption[];
 }
@@ -31,8 +41,9 @@ const THEME_CONFIG: ThemeConfig = {
 };
 
 export const AppSegmented = React.memo<AppSegmentedProps>(
-  ({ size = 'small', bordered = true, options: optionsProps, ...props }) => {
+  ({ size = 'small', bordered = true, onChange, options: optionsProps, ...props }) => {
     const { cx, styles } = useStyles();
+    const router = useRouter();
 
     const options = useMemo(() => {
       return optionsProps.map((option) => ({
@@ -41,10 +52,19 @@ export const AppSegmented = React.memo<AppSegmentedProps>(
       }));
     }, [optionsProps]);
 
+    const onChangePreflight = useMemoizedFn((value: string | number) => {
+      const link = optionsProps.find((option) => option.value === value)?.link;
+      if (link) {
+        router.push(link);
+      }
+      onChange?.(value);
+    });
+
     return (
       <ConfigProvider theme={THEME_CONFIG}>
         <Segmented
           {...props}
+          onChange={onChangePreflight}
           options={options}
           size={size}
           className={cx(
@@ -62,9 +82,14 @@ AppSegmented.displayName = 'AppSegmented';
 
 const SegmentedItem: React.FC<{ option: SegmentedOption }> = ({ option }) => {
   return (
-    <SegmentedItemLink href={option.link}>
-      <div onClick={option.onHover}>{option.label}</div>
-    </SegmentedItemLink>
+    <AppTooltip mouseEnterDelay={0.75} title={option.tooltip}>
+      <SegmentedItemLink href={option.link}>
+        <div className="flex items-center gap-0.5" onClick={option.onHover}>
+          {option.icon}
+          {option.label}
+        </div>
+      </SegmentedItemLink>
+    </AppTooltip>
   );
 };
 
@@ -73,5 +98,9 @@ const SegmentedItemLink: React.FC<{ href?: string; children: React.ReactNode }>
   children
 }) => {
   if (!href) return children;
-  return <Link href={href}>{children}</Link>;
+  return (
+    <Link prefetch={true} href={href}>
+      {children}
+    </Link>
+  );
 };