feat: Added order by most popular in Onboarding screen (#9891)

Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -17,7 +17,11 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
   const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true });
   const { t } = useLocale();
-  const queryIntegrations = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
+  const queryIntegrations = trpc.viewer.integrations.useQuery({
+    variant: "calendar",
+    onlyInstalled: false,
+    sortByMostPopular: true,
+  });
 
   const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
     (item) => item.calendars && item.calendars?.length > 0

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -16,6 +16,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
   const { data: queryConnectedVideoApps, isLoading } = trpc.viewer.integrations.useQuery({
     variant: "conferencing",
     onlyInstalled: false,
+    sortByMostPopular: true,
   });
   const { t } = useLocale();
 

packages/app-store/_appRegistry.ts

@@ -1,8 +1,7 @@
-import { z } from "zod";
-
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { getAppFromSlug } from "@calcom/app-store/utils";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import getMostPopularApps from "@calcom/lib/apps/getMostPopularApps";
 import prisma, { safeAppSelect, safeCredentialSelect } from "@calcom/prisma";
 import { userMetadata } from "@calcom/prisma/zod-utils";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
@@ -130,25 +129,3 @@ export async function getAppRegistryWithCredentials(userId: number, userAdminTea
 
   return apps;
 }
-
-async function getMostPopularApps() {
-  const mostPopularApps = z.array(z.object({ appId: z.string(), installCount: z.number() })).parse(
-    await prisma.$queryRaw`
-    SELECT
-      c."appId",
-      COUNT(*)::integer AS "installCount"
-    FROM
-      "Credential" c
-    WHERE
-      c."appId" IS NOT NULL
-    GROUP BY
-      c."appId"
-    ORDER BY
-      "installCount" DESC
-    `
-  );
-  return mostPopularApps.reduce((acc, { appId, installCount }) => {
-    acc[appId] = installCount;
-    return acc;
-  }, {} as Record<string, number>);
-}

packages/lib/apps/getMostPopularApps.ts

@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+import prisma from "@calcom/prisma";
+
+const getMostPopularApps = async () => {
+  const mostPopularApps = z.array(z.object({ appId: z.string(), installCount: z.number() })).parse(
+    await prisma.$queryRaw`
+    SELECT
+      c."appId",
+      COUNT(*)::integer AS "installCount"
+    FROM
+      "Credential" c
+    WHERE
+      c."appId" IS NOT NULL
+    GROUP BY
+      c."appId"
+    ORDER BY
+      "installCount" DESC
+    `
+  );
+  return mostPopularApps.reduce((acc, { appId, installCount }) => {
+    acc[appId] = installCount;
+    return acc;
+  }, {} as Record<string, number>);
+};
+
+export default getMostPopularApps;

packages/trpc/server/routers/loggedInViewer/integrations.handler.ts

@@ -1,4 +1,5 @@
 import getEnabledApps from "@calcom/lib/apps/getEnabledApps";
+import getMostPopularApps from "@calcom/lib/apps/getMostPopularApps";
 import prisma from "@calcom/prisma";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
@@ -33,7 +34,15 @@ type TeamQuery = Prisma.TeamGetPayload<{
 
 export const integrationsHandler = async ({ ctx, input }: IntegrationsOptions) => {
   const { user } = ctx;
-  const { variant, exclude, onlyInstalled, includeTeamInstalledApps, extendsFeature, teamId } = input;
+  const {
+    variant,
+    exclude,
+    onlyInstalled,
+    includeTeamInstalledApps,
+    extendsFeature,
+    teamId,
+    sortByMostPopular,
+  } = input;
   let { credentials } = user;
   let userTeams: TeamQuery[] = [];
 
@@ -167,6 +176,17 @@ export const integrationsHandler = async ({ ctx, input }: IntegrationsOptions) =
       }));
   }
 
+  if (sortByMostPopular) {
+    const mostPopularApps = await getMostPopularApps();
+
+    // sort the apps array by the most popular apps
+    apps.sort((a, b) => {
+      const aCount = mostPopularApps[a.slug] || 0;
+      const bCount = mostPopularApps[b.slug] || 0;
+      return bCount - aCount;
+    });
+  }
+
   return {
     items: apps,
   };

packages/trpc/server/routers/loggedInViewer/integrations.schema.ts

@@ -7,6 +7,7 @@ export const ZIntegrationsInputSchema = z.object({
   includeTeamInstalledApps: z.boolean().optional(),
   extendsFeature: z.literal("EventType").optional(),
   teamId: z.union([z.number(), z.null()]).optional(),
+  sortByMostPopular: z.boolean().optional(),
 });
 
 export type TIntegrationsInputSchema = z.infer<typeof ZIntegrationsInputSchema>;