feat: platform onboarding flow and dashboard

apps/api/v2/src/modules/oauth-clients/controllers/oauth-clients/oauth-clients.controller.ts

@@ -3,12 +3,17 @@ import { GetUser } from "@/modules/auth/decorators/get-user/get-user.decorator";
 import { Roles } from "@/modules/auth/decorators/roles/roles.decorator";
 import { NextAuthGuard } from "@/modules/auth/guards/next-auth/next-auth.guard";
 import { OrganizationRolesGuard } from "@/modules/auth/guards/organization-roles/organization-roles.guard";
+import { ManagedUserOutput } from "@/modules/oauth-clients/controllers/oauth-client-users/outputs/managed-user.output";
 import { CreateOAuthClientResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/CreateOAuthClientResponse.dto";
-import { GetOAuthClientResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientResponse.dto";
+import {
+  GetOAuthClientResponseDto,
+  GetOAuthClientManagedUsersResponseDto,
+} from "@/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientResponse.dto";
 import { GetOAuthClientsResponseDto } from "@/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientsResponse.dto";
 import { UpdateOAuthClientInput } from "@/modules/oauth-clients/inputs/update-oauth-client.input";
 import { OAuthClientRepository } from "@/modules/oauth-clients/oauth-client.repository";
 import { UserWithProfile } from "@/modules/users/users.repository";
+import { UsersRepository } from "@/modules/users/users.repository";
 import {
   Body,
   Controller,
@@ -30,6 +35,7 @@ import {
   ApiCreatedResponse as DocsCreatedResponse,
 } from "@nestjs/swagger";
 import { MembershipRole } from "@prisma/client";
+import { User } from "@prisma/client";
 
 import { SUCCESS_STATUS } from "@calcom/platform-constants";
 import { CreateOAuthClientInput } from "@calcom/platform-types";
@@ -47,7 +53,10 @@ Second, make sure that the logged in user has organizationId set to pass the Org
 export class OAuthClientsController {
   private readonly logger = new Logger("OAuthClientController");
 
-  constructor(private readonly oauthClientRepository: OAuthClientRepository) {}
+  constructor(
+    private readonly oauthClientRepository: OAuthClientRepository,
+    private readonly userRepository: UsersRepository
+  ) {}
 
   @Post("/")
   @HttpCode(HttpStatus.CREATED)
@@ -98,6 +107,21 @@ export class OAuthClientsController {
     return { status: SUCCESS_STATUS, data: client };
   }
 
+  @Get("/managed-users/:clientId")
+  @HttpCode(HttpStatus.OK)
+  @Roles([MembershipRole.ADMIN, MembershipRole.OWNER, MembershipRole.MEMBER])
+  @DocsOperation({ description: AUTH_DOCUMENTATION })
+  async getOAuthClientManagedUsersById(
+    @Param("clientId") clientId: string
+  ): Promise<GetOAuthClientManagedUsersResponseDto> {
+    const existingManagedUsers = await this.userRepository.findManagedUsersByOAuthClientId(clientId, 0, 50); // second argument is for offset while third is for limit
+
+    if (!existingManagedUsers) {
+      throw new NotFoundException(`OAuth client with ID ${clientId} does not have any managed users`);
+    }
+    return { status: SUCCESS_STATUS, data: existingManagedUsers.map((user) => this.getResponseUser(user)) };
+  }
+
   @Patch("/:clientId")
   @HttpCode(HttpStatus.OK)
   @Roles([MembershipRole.ADMIN, MembershipRole.OWNER])
@@ -120,4 +144,17 @@ export class OAuthClientsController {
     const client = await this.oauthClientRepository.deleteOAuthClient(clientId);
     return { status: SUCCESS_STATUS, data: client };
   }
+
+  private getResponseUser(user: User): ManagedUserOutput {
+    return {
+      id: user.id,
+      email: user.email,
+      username: user.username,
+      timeZone: user.timeZone,
+      weekStart: user.weekStart,
+      createdDate: user.createdDate,
+      timeFormat: user.timeFormat,
+      defaultScheduleId: user.defaultScheduleId,
+    };
+  }
 }

apps/api/v2/src/modules/oauth-clients/controllers/oauth-clients/responses/GetOAuthClientResponse.dto.ts

@@ -1,3 +1,4 @@
+import { ManagedUserOutput } from "@/modules/oauth-clients/controllers/oauth-client-users/outputs/managed-user.output";
 import { ApiProperty } from "@nestjs/swagger";
 import { Type } from "class-transformer";
 import {
@@ -62,3 +63,17 @@ export class GetOAuthClientResponseDto {
   @Type(() => PlatformOAuthClientDto)
   data!: PlatformOAuthClientDto;
 }
+
+export class GetOAuthClientManagedUsersResponseDto {
+  @ApiProperty({ example: SUCCESS_STATUS, enum: [SUCCESS_STATUS, ERROR_STATUS] })
+  @IsEnum([SUCCESS_STATUS, ERROR_STATUS])
+  status!: typeof SUCCESS_STATUS | typeof ERROR_STATUS;
+
+  @ApiProperty({
+    type: ManagedUserOutput,
+  })
+  @IsNotEmptyObject()
+  @ValidateNested()
+  @Type(() => ManagedUserOutput)
+  data!: ManagedUserOutput[];
+}

apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx → apps/web/components/settings/platform/oauth-clients/OAuthClientCard.tsx

@@ -6,7 +6,7 @@ import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
 import type { Avatar } from "@calcom/prisma/client";
 import { Button, Icon, showToast } from "@calcom/ui";
 
-import { hasPermission } from "../../../../../../../packages/platform/utils/permissions";
+import { hasPermission } from "../../../../../../packages/platform/utils/permissions";
 
 type OAuthClientCardProps = {
   name: string;
@@ -115,7 +115,7 @@ export const OAuthClientCard = ({
         </div>
         <div className="border-subtle flex text-sm">
           <span className="font-semibold">Permissions: </span>
-          <div className="flex">{clientPermissions}</div>
+          {permissions ? <div className="flex">{clientPermissions}</div> : <>&nbsp;Disabled</>}
         </div>
         <div className="flex gap-1 text-sm">
           <span className="font-semibold">Redirect uris: </span>
@@ -145,7 +145,7 @@ export const OAuthClientCard = ({
           className="bg-subtle hover:bg-emphasis text-white"
           loading={isLoading}
           disabled={isLoading}
-          onClick={() => router.push(`/settings/organizations/platform/oauth-clients/create?clientId=${id}`)}>
+          onClick={() => router.push(`/settings/platform/oauth-clients/create?clientId=${id}`)}>
           Edit
         </Button>
         <Button

apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx → apps/web/components/settings/platform/oauth-clients/OAuthClientForm.tsx

@@ -6,7 +6,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
 import { showToast } from "@calcom/ui";
-import { Meta, Button, TextField, Label, Tooltip } from "@calcom/ui";
+import { Button, TextField, Label, Tooltip } from "@calcom/ui";
 
 import { useOAuthClient } from "@lib/hooks/settings/organizations/platform/oauth-clients/useOAuthClients";
 import {
@@ -25,7 +25,7 @@
   hasProfileWritePermission,
   hasScheduleReadPermission,
   hasScheduleWritePermission,
-} from "../../../../../../../packages/platform/utils/permissions";
+} from "../../../../../../packages/platform/utils/permissions";
 
 type FormValues = {
   name: string;
@@ -51,7 +51,7 @@
 };
 
 export const OAuthClientForm: FC<{ clientId?: string }> = ({ clientId }) => {
   const { t } = useLocale();
   const router = useRouter();
   const { data, isFetched, isError, refetch } = useOAuthClient(clientId);
   const { register, control, handleSubmit, setValue } = useForm<FormValues>({
@@ -63,6 +63,7 @@
     control,
     name: "redirectUris",
   });
+
   useEffect(() => {
     if (isFetched && data && !isError) {
       setValue("name", data.name);
@@ -86,7 +87,7 @@
       if (hasScheduleReadPermission(data.permissions)) setValue("scheduleRead", true);
       if (hasScheduleWritePermission(data.permissions)) setValue("scheduleWrite", true);
     }
   }, [isFetched, data]);
   const disabledForm = Boolean(clientId && !isFetched && isError);
 
   const [isSelectAllPermissionsChecked, setIsSelectAllPermissionsChecked] = useState(false);
@@ -107,17 +108,18 @@
     onSuccess: () => {
       showToast("OAuth client created successfully", "success");
       refetch();
-      router.push("/settings/organizations/platform/oauth-clients");
+      router.push("/settings/platform/");
     },
     onError: () => {
       showToast("Internal server error, please try again later", "error");
     },
   });
+
   const { mutateAsync: update, isPending: isUpdating } = useUpdateOAuthClient({
     onSuccess: () => {
       showToast("OAuth client updated successfully", "success");
       refetch();
-      router.push("/settings/organizations/platform/oauth-clients");
+      router.push("/settings/platform/");
     },
     onError: () => {
       showToast("Internal server error, please try again later", "error");
@@ -162,6 +164,7 @@
       });
     }
   };
+
   const isPending = isSaving || isUpdating;
 
   const permissionsCheckboxes = Object.keys(PERMISSIONS_GROUPED_MAP).map((key) => {
@@ -204,11 +207,6 @@
 
   return (
     <div>
-      <Meta
-        title={t("oauth_form_title") + (clientId ? " - Update" : "")}
-        description={t("oauth_form_description") + (clientId ? " - Update" : "")}
-        borderInShellHeader={true}
-      />
       <form
         className="border-subtle rounded-b-lg border border-t-0 px-4 pb-8 pt-2"
         onSubmit={handleSubmit(onSubmit)}>
@@ -337,19 +335,15 @@
             Enable emails
           </label>
         </div>
-
         <div className="mt-6">
           <div className="flex justify-between">
-            <Tooltip side="right" content="Permissions once set cannot be modified">
-              <h1 className="text-base font-semibold underline">Permissions</h1>
-            </Tooltip>
-            <Button type="button" onClick={selectAllPermissions} disabled={disabledForm || Boolean(clientId)}>
+            <h1 className="text-base font-semibold underline">Permissions</h1>
+            <Button type="button" onClick={selectAllPermissions}>
               {!isSelectAllPermissionsChecked ? "Select all" : "Discard all"}
             </Button>
           </div>
           <div>{permissionsCheckboxes}</div>
         </div>
-
         <Button className="mt-6" type="submit" loading={isPending} disabled={disabledForm}>
           {clientId ? "Update" : "Submit"}
         </Button>

apps/web/lib/hooks/settings/organizations/platform/oauth-clients/useOAuthClients.ts

@@ -3,6 +3,17 @@ import { useQuery } from "@tanstack/react-query";
 import type { ApiSuccessResponse } from "@calcom/platform-types";
 import type { PlatformOAuthClient } from "@calcom/prisma/client";
 
+type ManagedUser = {
+  id: number;
+  email: string;
+  username: string | null;
+  timeZone: string;
+  weekStart: string;
+  createdDate: Date;
+  timeFormat: number | null;
+  defaultScheduleId: number | null;
+};
+
 export const useOAuthClients = () => {
   const query = useQuery<ApiSuccessResponse<PlatformOAuthClient[]>>({
     queryKey: ["oauth-clients"],
@@ -36,7 +47,7 @@ export const useOAuthClient = (clientId?: string) => {
         headers: { "Content-type": "application/json" },
       }).then((res) => res.json());
     },
-    enabled: clientId !== undefined,
+    enabled: Boolean(clientId),
     staleTime: Infinity,
   });
 
@@ -52,3 +63,21 @@ export const useOAuthClient = (clientId?: string) => {
     refetch,
   };
 };
+export const useGetOAuthClientManagedUsers = (clientId: string) => {
+  const {
+    isLoading,
+    error,
+    data: response,
+    refetch,
+  } = useQuery<ApiSuccessResponse<ManagedUser[]>>({
+    queryKey: ["oauth-client-managed-users", clientId],
+    queryFn: () => {
+      return fetch(`/api/v2/oauth-clients/managed-users/${clientId}`, {
+        method: "get",
+        headers: { "Content-type": "application/json" },
+      }).then((res) => res.json());
+    },
+  });
+
+  return { isLoading, error, data: response?.data, refetch };
+};