From b010fbd0e590dc4ea7542c48e0ab9ffbb37587d3 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 26 Mar 2025 00:01:39 -0600 Subject: [PATCH] make dynamic imports for sidebar items --- .../embed/dashboards/[dashboardId]/page.tsx | 2 +- .../features/buttons/ShareDashboardButton.tsx | 2 +- .../features/modal/AddToDashboardModal.tsx | 2 +- .../DashboardController.tsx | 2 +- .../DashboardViewDashboardController.tsx | 2 +- .../DashboardViewFileController.tsx | 2 +- .../MetricEditController/index.ts | 4 ++ .../MetricViewChartController.tsx | 52 ------------------- .../MetricController/MetricViewChart/index.ts | 1 - .../controllers/MetricController/config.ts | 1 - .../DashboardContainerHeaderButtons.tsx | 2 +- .../DashboardThreeDotMenu.tsx | 10 ++-- .../FileContainerVersionHistory.tsx | 1 - 13 files changed, 16 insertions(+), 67 deletions(-) delete mode 100644 web/src/controllers/MetricController/MetricViewChart/MetricViewChartController.tsx diff --git a/web/src/app/embed/dashboards/[dashboardId]/page.tsx b/web/src/app/embed/dashboards/[dashboardId]/page.tsx index 2465651b0..44c1e4f99 100644 --- a/web/src/app/embed/dashboards/[dashboardId]/page.tsx +++ b/web/src/app/embed/dashboards/[dashboardId]/page.tsx @@ -6,7 +6,7 @@ import { DashboardViewDashboardController } from '@/controllers/DashboardControl export default function EmbedDashboardsPage(props: { params: { dashboardId: string } }) { const { dashboardId } = props.params; - const { isFetched: isFetchedDashboard } = useGetDashboard(dashboardId); + const { isFetched: isFetchedDashboard } = useGetDashboard({ id: dashboardId }); if (!isFetchedDashboard) { return ; diff --git a/web/src/components/features/buttons/ShareDashboardButton.tsx b/web/src/components/features/buttons/ShareDashboardButton.tsx index 12bd25da0..513ac6299 100644 --- a/web/src/components/features/buttons/ShareDashboardButton.tsx +++ b/web/src/components/features/buttons/ShareDashboardButton.tsx @@ -7,7 +7,7 @@ import { getShareAssetConfig } from '../ShareMenu/helpers'; import { getIsEffectiveOwner } from '@/lib/share'; export const ShareDashboardButton = React.memo(({ dashboardId }: { dashboardId: string }) => { - const { data: dashboardResponse } = useGetDashboard(dashboardId, getShareAssetConfig); + const { data: dashboardResponse } = useGetDashboard({ id: dashboardId }, getShareAssetConfig); const isEffectiveOwner = getIsEffectiveOwner(dashboardResponse?.permission); if (!isEffectiveOwner) { diff --git a/web/src/components/features/modal/AddToDashboardModal.tsx b/web/src/components/features/modal/AddToDashboardModal.tsx index 58d8b8504..ef705bb4b 100644 --- a/web/src/components/features/modal/AddToDashboardModal.tsx +++ b/web/src/components/features/modal/AddToDashboardModal.tsx @@ -11,7 +11,7 @@ export const AddToDashboardModal: React.FC<{ onClose: () => void; dashboardId: string; }> = React.memo(({ open, onClose, dashboardId }) => { - const { data: dashboard, isFetched: isFetchedDashboard } = useGetDashboard(dashboardId); + const { data: dashboard, isFetched: isFetchedDashboard } = useGetDashboard({ id: dashboardId }); const { data: metrics, isFetched: isFetchedMetrics } = useGetMetricsList({}); const { mutateAsync: addAndRemoveMetricsFromDashboard } = useAddAndRemoveMetricsFromDashboard(); diff --git a/web/src/controllers/DashboardController/DashboardController.tsx b/web/src/controllers/DashboardController/DashboardController.tsx index 334c35955..7e663a59b 100644 --- a/web/src/controllers/DashboardController/DashboardController.tsx +++ b/web/src/controllers/DashboardController/DashboardController.tsx @@ -11,7 +11,7 @@ import { canEdit } from '@/lib/share'; export const DashboardController: React.FC<{ dashboardId: string }> = ({ dashboardId }) => { const { isFetched: isFetchedDashboard, data: permission } = useGetDashboard( - dashboardId, + { id: dashboardId }, (x) => x.permission ); const selectedFileView = useChatLayoutContextSelector((x) => x.selectedFileView) || 'dashboard'; diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx index f617c4b5c..c58f6b0b7 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx @@ -16,7 +16,7 @@ export const DashboardViewDashboardController: React.FC = ({ dashboardId, readOnly = false }) => { - const { data: dashboardResponse } = useGetDashboard(dashboardId); + const { data: dashboardResponse } = useGetDashboard({ id: dashboardId }); const { mutateAsync: onUpdateDashboard } = useUpdateDashboard(); const { mutateAsync: onUpdateDashboardConfig } = useUpdateDashboardConfig(); const onOpenAddContentModal = useDashboardContentStore((x) => x.onOpenAddContentModal); diff --git a/web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx b/web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx index a7a2421e9..148af500e 100644 --- a/web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx +++ b/web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx @@ -8,7 +8,7 @@ import { useGetDashboard, useUpdateDashboard } from '@/api/buster_rest/dashboard export const DashboardViewFileController: React.FC = React.memo( ({ dashboardId }) => { - const { data: dashboard } = useGetDashboard(dashboardId, (data) => data.dashboard); + const { data: dashboard } = useGetDashboard({ id: dashboardId }, (data) => data.dashboard); const { openSuccessMessage } = useBusterNotifications(); const { mutateAsync: onUpdateDashboard } = useUpdateDashboard(); diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/index.ts b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/index.ts index f7d0665a1..6127f04e9 100644 --- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/index.ts +++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/index.ts @@ -1 +1,5 @@ export * from './MetricEditController'; + +import { MetricEditController } from './MetricEditController'; + +export default MetricEditController; diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartController.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricViewChartController.tsx deleted file mode 100644 index 65329d9f6..000000000 --- a/web/src/controllers/MetricController/MetricViewChart/MetricViewChartController.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client'; - -import React, { useMemo, useRef } from 'react'; -import type { MetricViewProps } from '../config'; -import { AppSplitter, AppSplitterRef } from '@/components/ui/layouts'; -import { MetricViewChart } from './MetricViewChart'; -import { MetricEditController } from './MetricEditController'; -import { useMetricLayout } from '../useMetricLayout'; -import { useChatLayoutContextSelector } from '@/layouts/ChatLayout'; -import { VersionHistoryPanel } from '@/components/features/versionHistory'; - -const autoSaveId = 'metric-edit-chart'; - -export const MetricViewChartController: React.FC = React.memo(({ metricId }) => { - const appSplitterRef = useRef(null); - const selectedFileViewSecondary = useChatLayoutContextSelector( - (x) => x.selectedFileViewSecondary - ); - - const { renderSecondary, defaultLayout } = useMetricLayout({ - selectedFileViewSecondary, - appSplitterRef, - autoSaveId, - type: 'chart' - }); - - const RightChildren = useMemo(() => { - if (!renderSecondary) return null; - if (selectedFileViewSecondary === 'chart-edit') - return ; - if (selectedFileViewSecondary === 'version-history') - return ; - return null; - }, [renderSecondary, metricId]); - - return ( - } - rightChildren={RightChildren} - rightHidden={!renderSecondary} - autoSaveId={autoSaveId} - defaultLayout={defaultLayout} - preserveSide={'right'} - rightPanelMinSize={250} - rightPanelMaxSize={360} - /> - ); -}); - -MetricViewChartController.displayName = 'MetricViewChartController'; diff --git a/web/src/controllers/MetricController/MetricViewChart/index.ts b/web/src/controllers/MetricController/MetricViewChart/index.ts index ff5537eaa..7a6bd70ff 100644 --- a/web/src/controllers/MetricController/MetricViewChart/index.ts +++ b/web/src/controllers/MetricController/MetricViewChart/index.ts @@ -1,2 +1 @@ -export * from './MetricViewChartController'; export * from './MetricViewChart'; diff --git a/web/src/controllers/MetricController/config.ts b/web/src/controllers/MetricController/config.ts index ec789bec8..2c37225e2 100644 --- a/web/src/controllers/MetricController/config.ts +++ b/web/src/controllers/MetricController/config.ts @@ -1,6 +1,5 @@ import React from 'react'; import type { MetricFileView } from '@/layouts/ChatLayout'; -import { MetricViewChartController } from './MetricViewChart'; import { MetricViewFile } from './MetricViewFile'; import { MetricViewResults } from './MetricViewResults'; import { MetricViewChart } from './MetricViewChart'; diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx index dff119fcf..353ffb552 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx @@ -43,7 +43,7 @@ const SaveToCollectionButton = React.memo(() => { SaveToCollectionButton.displayName = 'SaveToCollectionButton'; const AddContentToDashboardButton = React.memo(({ dashboardId }: { dashboardId: string }) => { - const { data: permission } = useGetDashboard(dashboardId, (x) => x.permission); + const { data: permission } = useGetDashboard({ id: dashboardId }, (x) => x.permission); const isEditor = canEdit(permission); const onOpenAddContentModal = useDashboardContentStore((x) => x.onOpenAddContentModal); diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx index 3011c99d3..e1f5d93f1 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx @@ -44,7 +44,7 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId: const shareMenu = useShareMenuSelectMenu({ dashboardId }); const addContentToDashboardMenu = useAddContentToDashboardSelectMenu(); const filterDashboardMenu = useFilterDashboardSelectMenu(); - const { data: permission } = useGetDashboard(dashboardId, (x) => x.permission); + const { data: permission } = useGetDashboard({ id: dashboardId }, (x) => x.permission); const isOwner = getIsEffectiveOwner(permission); const isFilter = canFilter(permission); const isEditor = canEdit(permission); @@ -84,7 +84,7 @@ DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton'; const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => { const DEFAULT_VERSION_HISTORY_ITEMS: DropdownItems = []; - const { data } = useGetDashboard(dashboardId, (x) => ({ + const { data } = useGetDashboard({ id: dashboardId }, (x) => ({ versions: x?.dashboard?.versions, version_number: x?.dashboard?.version_number })); @@ -115,7 +115,7 @@ const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) = const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => { const { mutateAsync: saveDashboardToCollection } = useAddDashboardToCollection(); const { mutateAsync: removeDashboardFromCollection } = useRemoveDashboardFromCollection(); - const { data: collections } = useGetDashboard(dashboardId, (x) => x.collections); + const { data: collections } = useGetDashboard({ id: dashboardId }, (x) => x.collections); const { openInfoMessage } = useBusterNotifications(); const selectedCollections = useMemo(() => { @@ -163,7 +163,7 @@ const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => { }; const useFavoriteDashboardSelectMenu = ({ dashboardId }: { dashboardId: string }) => { - const { data: title } = useGetDashboard(dashboardId, (x) => x?.dashboard?.name); + const { data: title } = useGetDashboard({ id: dashboardId }, (x) => x?.dashboard?.name); const { isFavorited, onFavoriteClick } = useFavoriteStar({ id: dashboardId, type: ShareAssetType.DASHBOARD, @@ -221,7 +221,7 @@ const useRenameDashboardSelectMenu = ({ dashboardId }: { dashboardId: string }) }; export const useShareMenuSelectMenu = ({ dashboardId }: { dashboardId: string }) => { - const { data: dashboard } = useGetDashboard(dashboardId, getShareAssetConfig); + const { data: dashboard } = useGetDashboard({ id: dashboardId }, getShareAssetConfig); const isOwner = getIsEffectiveOwner(dashboard?.permission); return useMemo( diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerVersionHistory.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerVersionHistory.tsx index 5f09e9d36..72556856b 100644 --- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerVersionHistory.tsx +++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerVersionHistory.tsx @@ -10,7 +10,6 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { useMemoizedFn } from '@/hooks'; import { timeout } from '@/lib'; -import { AnimatePresence, motion } from 'framer-motion'; export const FileContainerVersionHistory = React.memo(() => { return (