fix: re-render on insights with orgs (#11395)

apps/web/pages/insights/index.tsx

@@ -20,19 +20,6 @@ import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
-const Heading = () => {
-  const { t } = useLocale();
-
-  return (
-    <div className="min-w-52 hidden md:block">
-      <h3 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis truncate text-xl font-semibold tracking-wide xl:max-w-full">
-        {t("insights")}
-      </h3>
-      <p className="text-default mt-2 hidden text-sm md:block">{t("insights_subtitle")}</p>
-    </div>
-  );
-};
-
 export default function InsightsPage() {
   const { t } = useLocale();
   const { data: user } = trpc.viewer.me.useQuery();
@@ -79,10 +66,6 @@ export default function InsightsPage() {
             <></>
           ) : (
             <FiltersProvider>
-              <div className="ml-auto mt-0">
-                <Heading />
-              </div>
-
               <Filters />
 
               <div className="mb-4 space-y-6">

packages/features/insights/components/AverageEventDurationChart.tsx

@@ -12,10 +12,10 @@ import { LoadingInsight } from "./LoadingInsights";
 export const AverageEventDurationChart = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedMemberUserId, isAll } = filter;
+  const { dateRange, selectedMemberUserId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId, selectedUserId } = filter;
-
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const { data, isSuccess, isLoading } = trpc.viewer.insights.averageEventDuration.useQuery(
     {
       startDate: startDate.toISOString(),
@@ -30,6 +30,8 @@ export const AverageEventDurationChart = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      // At least one of the following initial configs should have a value
+      enabled: initialConfigIsReady,
     }
   );
 

packages/features/insights/components/BookingKPICards.tsx

@@ -11,7 +11,9 @@ import { KPICard } from "./KPICard";
 export const BookingKPICards = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, selectedUserId, selectedMemberUserId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, selectedUserId, selectedMemberUserId, isAll, initialConfig } =
+    filter;
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const [startDate, endDate] = dateRange;
 
   const { selectedTeamId: teamId } = filter;
@@ -31,6 +33,7 @@ export const BookingKPICards = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: initialConfigIsReady,
     }
   );
 

packages/features/insights/components/BookingStatusLineChart.tsx

@@ -19,7 +19,9 @@ export const BookingStatusLineChart = () => {
     dateRange,
     selectedEventTypeId,
     isAll,
+    initialConfig,
   } = filter;
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const [startDate, endDate] = dateRange;
 
   if (!startDate || !endDate) return null;
@@ -43,6 +45,7 @@ export const BookingStatusLineChart = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: initialConfigIsReady,
     }
   );
 

packages/features/insights/components/LeastBookedTeamMembersTable.tsx

@@ -11,7 +11,7 @@ import { TotalBookingUsersTable } from "./TotalBookingUsersTable";
 export const LeastBookedTeamMembersTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, selectedTeamId: teamId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, selectedTeamId: teamId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
 
   const { data, isSuccess, isLoading } = trpc.viewer.insights.membersWithLeastBookings.useQuery(
@@ -27,6 +27,7 @@ export const LeastBookedTeamMembersTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 

packages/features/insights/components/MostBookedTeamMembersTable.tsx

@@ -11,7 +11,7 @@ import { TotalBookingUsersTable } from "./TotalBookingUsersTable";
 export const MostBookedTeamMembersTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
@@ -28,6 +28,7 @@ export const MostBookedTeamMembersTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 

packages/features/insights/components/PopularEventsTable.tsx

@@ -10,7 +10,7 @@ import { LoadingInsight } from "./LoadingInsights";
 export const PopularEventsTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedMemberUserId, selectedUserId, isAll } = filter;
+  const { dateRange, selectedMemberUserId, selectedUserId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
@@ -28,6 +28,7 @@ export const PopularEventsTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 

packages/features/insights/context/FiltersProvider.tsx

@@ -69,7 +69,7 @@ export function FiltersProvider({ children }: { children: React.ReactNode }) {
     initialConfig: {
       userId: null,
       teamId: null,
-      isAll: false,
+      isAll: null,
     },
   });
 

packages/features/insights/context/provider.ts

@@ -15,7 +15,7 @@ interface IFilter {
   initialConfig?: {
     teamId?: number | null;
     userId?: number | null;
-    isAll?: boolean;
+    isAll?: boolean | null;
   };
 }
 

packages/features/insights/filters/TeamAndSelfList.tsx

@@ -25,6 +25,12 @@ export const TeamAndSelfList = () => {
   });
 
   useEffect(() => {
+    const isInitialSetupAlready = !!(
+      filter.initialConfig?.teamId ||
+      filter.initialConfig?.userId ||
+      filter.initialConfig?.isAll
+    );
+    if (isInitialSetupAlready) return;
     if (isSuccess && session.data?.user.id) {
       // We have a team?
       if (data[0]?.id && data && data?.length > 0) {
@@ -49,19 +55,8 @@ export const TeamAndSelfList = () => {
           },
         });
       }
-    } else if (session.data?.user.id) {
-      setConfigFilters({
-        selectedUserId: session.data?.user.id,
-        selectedTeamId: null,
-        isAll: false,
-        initialConfig: {
-          teamId: null,
-          userId: session.data?.user.id,
-          isAll: false,
-        },
-      });
     }
-  }, [data, session.data?.user.id]);
+  }, [data, session.data?.user.id, filter.initialConfig, isSuccess, setConfigFilters]);
 
   const getTextPopover = () => {
     if (isAll) {