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: ( - - {option.name} - - ) + 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[] = [ +const options = [ { icon: , 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: ( - - {option.icon} - - ) + 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<{
= React.memo(() => { }); CollectionHeader.displayName = 'CollectionHeader'; -const filters: SegmentedLabeledOption[] = [ +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: ( - - {DataSetAppText[key as DatasetApps]} - - ), + 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 (
- +
); }); PermissionAppSegments.displayName = 'PermissionAppSegments'; - -// const PrefetchRouteSegmentItem = React.memo( -// ({ -// value, -// label, -// link, -// onHover -// }: { -// value: PermissionApps; -// label: string; -// link: string; -// onHover: (route: PermissionApps) => void; -// }) => { -// return ( -// -// onHover(value)}> -// {label} -// -// -// ); -// } -// ); - -// 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 ; }); +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 }) => {
); }); + +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
PermissionGroupAssignButton
; }); + +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}
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 { bordered?: boolean; options: SegmentedOption[]; } @@ -31,8 +41,9 @@ const THEME_CONFIG: ThemeConfig = { }; export const AppSegmented = React.memo( - ({ 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( })); }, [optionsProps]); + const onChangePreflight = useMemoizedFn((value: string | number) => { + const link = optionsProps.find((option) => option.value === value)?.link; + if (link) { + router.push(link); + } + onChange?.(value); + }); + return ( = ({ option }) => { return ( - -
{option.label}
- + + +
+ {option.icon} + {option.label} +
+ + ); }; @@ -73,5 +98,9 @@ const SegmentedItemLink: React.FC<{ href?: string; children: React.ReactNode }> children }) => { if (!href) return children; - return {children}; + return ( + + {children} + + ); };