make dynamic imports for sidebar items

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 <CircleSpinnerLoaderContainer className="min-h-screen" />;

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) {

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();
 

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';

web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx

@@ -16,7 +16,7 @@ export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
   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);

web/src/controllers/DashboardController/DashboardViewFileController/DashboardViewFileController.tsx

@@ -8,7 +8,7 @@ import { useGetDashboard, useUpdateDashboard } from '@/api/buster_rest/dashboard
 
 export const DashboardViewFileController: React.FC<DashboardViewProps> = 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();
 

web/src/controllers/MetricController/MetricViewChart/MetricEditController/index.ts

@@ -1 +1,5 @@
 export * from './MetricEditController';
+
+import { MetricEditController } from './MetricEditController';
+
+export default MetricEditController;

web/src/controllers/MetricController/MetricViewChart/MetricViewChartController.tsx

@@ -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<MetricViewProps> = React.memo(({ metricId }) => {
-  const appSplitterRef = useRef<AppSplitterRef>(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 <MetricEditController metricId={metricId} />;
-    if (selectedFileViewSecondary === 'version-history')
-      return <VersionHistoryPanel assetId={metricId} type="metric" />;
-    return null;
-  }, [renderSecondary, metricId]);
-
-  return (
-    <AppSplitter
-      ref={appSplitterRef}
-      initialReady={false}
-      leftChildren={<MetricViewChart metricId={metricId} />}
-      rightChildren={RightChildren}
-      rightHidden={!renderSecondary}
-      autoSaveId={autoSaveId}
-      defaultLayout={defaultLayout}
-      preserveSide={'right'}
-      rightPanelMinSize={250}
-      rightPanelMaxSize={360}
-    />
-  );
-});
-
-MetricViewChartController.displayName = 'MetricViewChartController';

web/src/controllers/MetricController/MetricViewChart/index.ts

@@ -1,2 +1 @@
-export * from './MetricViewChartController';
 export * from './MetricViewChart';

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';

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);
 

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(

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 (