make select more dynamic

web/src/api/buster_rest/dashboards/queryRequests.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
 import {
   dashboardsGetList,
   dashboardsGetDashboard,
@@ -27,6 +27,7 @@ import { collectionQueryKeys } from '@/api/query_keys/collection';
 import { addMetricToDashboardConfig, removeMetricFromDashboardConfig } from './helpers';
 import { addAndRemoveMetricsToDashboard } from './helpers/addAndRemoveMetricsToDashboard';
 import { useSearchParams } from 'next/navigation';
+import { RustApiError } from '../errors';
 
 export const useGetDashboardsList = (
   params: Omit<Parameters<typeof dashboardsGetList>[0], 'page_token' | 'page_size'>
@@ -73,7 +74,10 @@ export const useGetDashboard = <TData = BusterDashboardResponse>(
     id,
     version_number: version_number_prop
   }: { id: string | undefined; version_number?: number | null },
-  select?: (data: BusterDashboardResponse) => TData
+  params?: Omit<
+    UseQueryOptions<BusterDashboardResponse, RustApiError, TData>,
+    'queryKey' | 'queryFn'
+  >
 ) => {
   const searchParams = useSearchParams();
   const queryFn = useGetDashboardAndInitializeMetrics();
@@ -88,7 +92,8 @@ export const useGetDashboard = <TData = BusterDashboardResponse>(
     ...dashboardQueryKeys.dashboardGetDashboard(id!, version_number),
     queryFn: () => queryFn(id!, version_number),
     enabled: !!id,
-    select
+    select: params?.select,
+    ...params
   });
 };
 

web/src/app/embed/dashboards/[dashboardId]/loading.tsx

@@ -0,0 +1,5 @@
+import { CircleSpinnerLoaderContainer } from '@/components/ui/loaders';
+
+export default function EmbedDashboardsLoading() {
+  return <CircleSpinnerLoaderContainer className="min-h-screen" />;
+}

web/src/app/embed/dashboards/[dashboardId]/page.tsx

@@ -1,16 +1,7 @@
-'use client';
-
-import { useGetDashboard } from '@/api/buster_rest/dashboards';
-import { CircleSpinnerLoaderContainer } from '@/components/ui/loaders';
 import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController';
 
 export default function EmbedDashboardsPage(props: { params: { dashboardId: string } }) {
   const { dashboardId } = props.params;
-  const { isFetched: isFetchedDashboard } = useGetDashboard({ id: dashboardId });
-
-  if (!isFetchedDashboard) {
-    return <CircleSpinnerLoaderContainer className="min-h-screen" />;
-  }
 
   return (
     <DashboardViewDashboardController

web/src/app/embed/metrics/[metricId]/loading.tsx

@@ -0,0 +1,5 @@
+import { CircleSpinnerLoaderContainer } from '@/components/ui/loaders';
+
+export default function EmbedMetricsLoading() {
+  return <CircleSpinnerLoaderContainer className="min-h-screen" />;
+}

web/src/app/embed/metrics/[metricId]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useGetMetric } from '@/api/buster_rest/metrics';
-import { CircleSpinnerLoaderContainer } from '@/components/ui/loaders';
 import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart/MetricViewChart';
 
 export default function EmbedMetricsPage({
@@ -13,14 +12,10 @@ export default function EmbedMetricsPage({
 }) {
   const { metricId } = params;
   const { version_number } = searchParams;
-  const { isFetched, error } = useGetMetric({
+  const { isFetched } = useGetMetric({
     id: metricId,
     version_number: version_number ? parseInt(version_number) : undefined
   });
 
-  if (!isFetched) {
-    return <CircleSpinnerLoaderContainer className="min-h-screen" />;
-  }
-
   return <MetricViewChart metricId={metricId} readOnly={true} cardClassName="max-h-screen!" />;
 }

web/src/components/features/buttons/ShareDashboardButton.tsx

@@ -6,7 +6,10 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards';
 import { getShareAssetConfig } from '../ShareMenu/helpers';
 
 export const ShareDashboardButton = React.memo(({ dashboardId }: { dashboardId: string }) => {
-  const { data: dashboardResponse } = useGetDashboard({ id: dashboardId }, getShareAssetConfig);
+  const { data: dashboardResponse } = useGetDashboard(
+    { id: dashboardId },
+    { select: getShareAssetConfig }
+  );
 
   return (
     <ShareMenu

web/src/components/features/versionHistory/useListVersionHistories.tsx

@@ -123,10 +123,12 @@ const useListDashboardVersions = ({
       id: type === 'dashboard' ? assetId : undefined,
       version_number: null
     },
-    (x) => ({
-      versions: x.dashboard.versions,
-      version_number: x.dashboard.version_number
-    })
+    {
+      select: (x) => ({
+        versions: x.dashboard.versions,
+        version_number: x.dashboard.version_number
+      })
+    }
   );
 
   const dashboardVersions = dashData?.versions;

web/src/context/Dashboards/useOriginalDashboardStore.tsx

@@ -46,12 +46,14 @@ export const useIsDashboardChanged = ({ dashboardId }: { dashboardId: string })
 
   const { data: currentDashboard, refetch: refetchCurrentDashboard } = useGetDashboard(
     { id: dashboardId },
-    (x) => ({
-      name: x.dashboard.name,
-      description: x.dashboard.description,
-      config: x.dashboard.config,
-      file: x.dashboard.file
-    })
+    {
+      select: (x) => ({
+        name: x.dashboard.name,
+        description: x.dashboard.description,
+        config: x.dashboard.config,
+        file: x.dashboard.file
+      })
+    }
   );
 
   const onResetDashboardToOriginal = useMemoizedFn(() => {

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

@@ -10,7 +10,10 @@ export const DashboardViewFileController: React.FC<{
   dashboardId: string;
   chatId?: string | undefined;
 }> = React.memo(({ dashboardId }) => {
-  const { data: dashboard } = useGetDashboard({ id: dashboardId }, (data) => data.dashboard);
+  const { data: dashboard } = useGetDashboard(
+    { id: dashboardId },
+    { select: (data) => data.dashboard }
+  );
   const { openSuccessMessage } = useBusterNotifications();
   const {
     mutateAsync: onUpdateDashboard,

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardContainerHeaderButtons.tsx

@@ -22,7 +22,7 @@ export const DashboardContainerHeaderButtons: React.FC<FileContainerButtonsProps
 
     const { data: permission, error: dashboardError } = useGetDashboard(
       { id: dashboardId },
-      (x) => x.permission
+      { select: (x) => x.permission }
     );
 
     if (dashboardError) return null;

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx

@@ -47,7 +47,10 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId:
   const shareMenu = useShareMenuSelectMenu({ dashboardId });
   const addContentToDashboardMenu = useAddContentToDashboardSelectMenu();
   const filterDashboardMenu = useFilterDashboardSelectMenu();
-  const { data: permission } = useGetDashboard({ id: dashboardId }, (x) => x.permission);
+  const { data: permission } = useGetDashboard(
+    { id: dashboardId },
+    { select: (x) => x.permission }
+  );
   const isOwner = getIsEffectiveOwner(permission);
   const isFilter = canFilter(permission);
   const isEditor = canEdit(permission);
@@ -86,10 +89,15 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId:
 DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton';
 
 const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => {
-  const { data } = useGetDashboard({ id: dashboardId }, (x) => ({
-    versions: x?.dashboard?.versions || [],
-    version_number: x?.dashboard?.version_number
-  }));
+  const { data } = useGetDashboard(
+    { id: dashboardId },
+    {
+      select: (x) => ({
+        versions: x?.dashboard?.versions || [],
+        version_number: x?.dashboard?.version_number
+      })
+    }
+  );
   const { versions, version_number } = data || {};
   const chatId = useChatLayoutContextSelector((x) => x.chatId);
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
@@ -131,7 +139,10 @@ const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) =
 const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
   const { mutateAsync: saveDashboardToCollection } = useAddDashboardToCollection();
   const { mutateAsync: removeDashboardFromCollection } = useRemoveDashboardFromCollection();
-  const { data: collections } = useGetDashboard({ id: dashboardId }, (x) => x.collections);
+  const { data: collections } = useGetDashboard(
+    { id: dashboardId },
+    { select: (x) => x.collections }
+  );
   const { openInfoMessage } = useBusterNotifications();
 
   const selectedCollections = useMemo(() => {
@@ -179,7 +190,10 @@ const useCollectionSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
 };
 
 const useFavoriteDashboardSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
-  const { data: title } = useGetDashboard({ id: dashboardId }, (x) => x?.dashboard?.name);
+  const { data: title } = useGetDashboard(
+    { id: dashboardId },
+    { select: (x) => x?.dashboard?.name }
+  );
   const { isFavorited, onFavoriteClick } = useFavoriteStar({
     id: dashboardId,
     type: ShareAssetType.DASHBOARD,
@@ -239,7 +253,7 @@ const useRenameDashboardSelectMenu = ({ dashboardId }: { dashboardId: string })
 };
 
 export const useShareMenuSelectMenu = ({ dashboardId }: { dashboardId: string }) => {
-  const { data: dashboard } = useGetDashboard({ id: dashboardId }, getShareAssetConfig);
+  const { data: dashboard } = useGetDashboard({ id: dashboardId }, { select: getShareAssetConfig });
   const isOwner = getIsEffectiveOwner(dashboard?.permission);
 
   return useMemo(

web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx

@@ -10,7 +10,10 @@ export const DashboardLayoutContainer: React.FC<{
   children: React.ReactNode;
   dashboardId: string;
 }> = ({ children, dashboardId }) => {
-  const { data: permission } = useGetDashboard({ id: dashboardId }, (x) => x.permission);
+  const { data: permission } = useGetDashboard(
+    { id: dashboardId },
+    { select: (x) => x.permission }
+  );
   const isEditor = canEdit(permission);
 
   return (