feat: simplify the connect cloudtty flow

src/components/AccountPopover.tsx

@@ -2,8 +2,6 @@ import { Avatar, Box, Divider, MenuItem, Typography } from '@mui/material'
 import { alpha } from '@mui/material/styles'
 import React, { useState } from 'react'
 import { useDeleteCloudttyMutation } from 'redux/otomiApi'
-import { useSession } from 'providers/Session'
-import { getDomain, getEmailNoSymbols, getUserTeams } from 'layouts/Shell'
 import { clearLocalStorage } from 'hooks/useLocalStorage'
 import { useHistory } from 'react-router-dom'
 import MenuPopover from './MenuPopover'
@@ -17,12 +15,7 @@ type Props = {
 export default function AccountPopover({ email }: Props) {
   const history = useHistory()
   const [open, setOpen] = useState<HTMLElement | null>(null)
-  const [del] = useDeleteCloudttyMutation()
-  const { user, oboTeamId } = useSession()
-  const hostname = window.location.hostname
-  const domain = getDomain(hostname)
-  const emailNoSymbols = getEmailNoSymbols(user.email)
-  const userTeams = getUserTeams(user)
+  const [deleteCloudtty] = useDeleteCloudttyMutation()
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget)
@@ -33,9 +26,7 @@ export default function AccountPopover({ email }: Props) {
   }
 
   const handleLogout = () => {
-    del({
-      body: { teamId: oboTeamId, domain, emailNoSymbols, isAdmin: user.isPlatformAdmin, userTeams },
-    }).finally(() => {
+    deleteCloudtty().finally(() => {
       clearLocalStorage('oboTeamId')
       history.push('/logout')
     })

src/layouts/Shell.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { Box, CircularProgress, Tooltip, Typography, styled } from '@mui/material'
 import useShellDrawer from 'hooks/useShellDrawer'
-import { ConnectCloudttyApiResponse, useConnectCloudttyMutation, useDeleteCloudttyMutation } from 'redux/otomiApi'
+import { useConnectCloudttyQuery, useDeleteCloudttyMutation } from 'redux/otomiApi'
 import { useSession } from 'providers/Session'
 import SvgIconStyle from 'components/SvgIconStyle'
 import useResponsive from 'hooks/useResponsive'
@@ -155,24 +155,13 @@ function Shell({ collapseClick }: Props): React.ReactElement {
   const { user, oboTeamId } = useSession()
   const isDesktop = useResponsive('up', 'lg')
   const [transparency, setTransparency] = useState(false)
-  const [connect, { isLoading }] = useConnectCloudttyMutation()
-  const [del] = useDeleteCloudttyMutation()
-
   const teamId = oboTeamId
-  const hostname = window.location.hostname
-  const domain = getDomain(hostname)
-  const emailNoSymbols = getEmailNoSymbols(user.email)
-  const userTeams = getUserTeams(user)
+  const { data, isLoading } = useConnectCloudttyQuery({ teamId }, { skip: !isShell })
+  const [deleteCloudtty] = useDeleteCloudttyMutation()
 
   useEffect(() => {
-    if (isShell) {
-      connect({
-        body: { teamId, domain, emailNoSymbols, isAdmin: user.isPlatformAdmin, userTeams, sub: user.sub },
-      }).then(({ data }: { data: ConnectCloudttyApiResponse }) => {
-        onSetIFrameUrl(data.iFrameUrl)
-      })
-    }
-  }, [isShell])
+    if (data?.iFrameUrl) onSetIFrameUrl(data.iFrameUrl)
+  }, [data?.iFrameUrl])
 
   const handleMouseDown = () => {
     setTransparency(true)
@@ -200,7 +189,7 @@ function Shell({ collapseClick }: Props): React.ReactElement {
     onSetIFrameUrl('')
     onToggleShell()
     onCloseShell()
-    del({ body: { teamId, domain, emailNoSymbols, isAdmin: user.isPlatformAdmin, userTeams } })
+    deleteCloudtty()
   }
 
   return (

src/redux/otomiApi.ts

@@ -314,11 +314,17 @@ const injectedRtkApi = api.injectEndpoints({
     getK8SVersion: build.query<GetK8SVersionApiResponse, GetK8SVersionApiArg>({
       query: () => ({ url: `/v1/k8sVersion` }),
     }),
-    connectCloudtty: build.mutation<ConnectCloudttyApiResponse, ConnectCloudttyApiArg>({
-      query: (queryArg) => ({ url: `/v1/cloudtty`, method: 'POST', body: queryArg.body }),
+    connectAplCloudtty: build.query<ConnectAplCloudttyApiResponse, ConnectAplCloudttyApiArg>({
+      query: (queryArg) => ({ url: `/v2/cloudtty`, params: { teamId: queryArg.teamId } }),
+    }),
+    deleteAplCloudtty: build.mutation<DeleteAplCloudttyApiResponse, DeleteAplCloudttyApiArg>({
+      query: () => ({ url: `/v2/cloudtty`, method: 'DELETE' }),
+    }),
+    connectCloudtty: build.query<ConnectCloudttyApiResponse, ConnectCloudttyApiArg>({
+      query: (queryArg) => ({ url: `/v1/cloudtty`, params: { teamId: queryArg.teamId } }),
     }),
     deleteCloudtty: build.mutation<DeleteCloudttyApiResponse, DeleteCloudttyApiArg>({
-      query: (queryArg) => ({ url: `/v1/cloudtty`, method: 'DELETE', body: queryArg.body }),
+      query: () => ({ url: `/v1/cloudtty`, method: 'DELETE' }),
     }),
     getAllUsers: build.query<GetAllUsersApiResponse, GetAllUsersApiArg>({
       query: () => ({ url: `/v1/users` }),
@@ -4373,43 +4379,24 @@ export type EditAplPolicyApiArg = {
 }
 export type GetK8SVersionApiResponse = /** status 200 Successfully obtained k8s version */ string
 export type GetK8SVersionApiArg = void
+export type ConnectAplCloudttyApiResponse = /** status 200 Successfully stored cloudtty configuration */ {
+  iFrameUrl?: string
+}
+export type ConnectAplCloudttyApiArg = {
+  /** Id of the team */
+  teamId?: string
+}
+export type DeleteAplCloudttyApiResponse = unknown
+export type DeleteAplCloudttyApiArg = void
 export type ConnectCloudttyApiResponse = /** status 200 Successfully stored cloudtty configuration */ {
-  id?: string
-  teamId: string
-  domain: string
-  emailNoSymbols: string
   iFrameUrl?: string
-  isAdmin: boolean
-  userTeams?: string[]
-  sub?: string
 }
 export type ConnectCloudttyApiArg = {
-  /** Cloudtty object */
-  body: {
-    id?: string
-    teamId: string
-    domain: string
-    emailNoSymbols: string
-    iFrameUrl?: string
-    isAdmin: boolean
-    userTeams?: string[]
-    sub?: string
-  }
+  /** Id of the team */
+  teamId?: string
 }
 export type DeleteCloudttyApiResponse = unknown
-export type DeleteCloudttyApiArg = {
-  /** Cloudtty object */
-  body: {
-    id?: string
-    teamId: string
-    domain: string
-    emailNoSymbols: string
-    iFrameUrl?: string
-    isAdmin: boolean
-    userTeams?: string[]
-    sub?: string
-  }
-}
+export type DeleteCloudttyApiArg = void
 export type GetAllUsersApiResponse = /** status 200 Successfully obtained all users configuration */ {
   id?: string
   email: string
@@ -7937,7 +7924,9 @@ export const {
   useGetAplPolicyQuery,
   useEditAplPolicyMutation,
   useGetK8SVersionQuery,
-  useConnectCloudttyMutation,
+  useConnectAplCloudttyQuery,
+  useDeleteAplCloudttyMutation,
+  useConnectCloudttyQuery,
   useDeleteCloudttyMutation,
   useGetAllUsersQuery,
   useCreateUserMutation,