fix: sdk service-account view

web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx

@@ -36,9 +36,10 @@ import {
   Skeleton,
   toastManager
 } from '@raystack/apsara-v1';
-import { PERMISSIONS } from '../../../../utils';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { useTerminology } from '../../../hooks/useTerminology';
+import { PERMISSIONS } from '~/utils';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useTerminology } from '~/react/hooks/useTerminology';
+import { cacheFreshServiceUserToken } from '../hooks/useServiceUserTokens';
 
 const DEFAULT_KEY_NAME = 'Initial Generated Key';
 
@@ -99,7 +100,7 @@ export function AddServiceAccountDialog({
       withMemberCount: false
     }),
     {
-      enabled: Boolean(orgId)
+      enabled: Boolean(orgId),
     }
   );
 
@@ -189,6 +190,14 @@ export function AddServiceAccountDialog({
           })
         );
 
+        if (tokenResponse.token) {
+          cacheFreshServiceUserToken(
+            queryClient,
+            serviceUserId,
+            tokenResponse.token
+          );
+        }
+
         toastManager.add({ title: 'Service account created', type: 'success' });
         handle.close();
         reset();

web/sdk/react/views-new/service-accounts/components/add-token-form.tsx

@@ -12,7 +12,7 @@ import {
   CreateServiceUserTokenRequestSchema,
   type ServiceUserToken
 } from '@raystack/proton/frontier';
-import { useFrontier } from '../../../contexts/FrontierContext';
+import { useFrontier } from '~/react/contexts/FrontierContext';
 import styles from '../service-account-details-view.module.css';
 
 const tokenSchema = yup

web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css

@@ -0,0 +1,3 @@
+.body {
+  border-bottom: none !important;
+}

web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx

@@ -15,8 +15,9 @@ import {
   Flex,
   toastManager
 } from '@raystack/apsara-v1';
-import { useFrontier } from '../../../contexts/FrontierContext';
+import { useFrontier } from '~/react/contexts/FrontierContext';
 import { useQueryClient } from '@tanstack/react-query';
+import styles from './delete-service-account-dialog.module.css';
 
 export type DeleteServiceAccountPayload = { serviceAccountId: string };
 
@@ -76,11 +77,9 @@ export function DeleteServiceAccountDialog({ handle, refetch }: DeleteServiceAcc
       {({ payload: rawPayload }) => {
         const payload = rawPayload as DeleteServiceAccountPayload | undefined;
         return (
-          <AlertDialog.Content width={400}>
-            <AlertDialog.Header>
+          <AlertDialog.Content width={400} showCloseButton={false}>
+            <AlertDialog.Body className={styles.body}>
               <AlertDialog.Title>Delete Service Account</AlertDialog.Title>
-            </AlertDialog.Header>
-            <AlertDialog.Body>
               <Text size="small" variant="secondary">
                 This action is irreversible and may result in the deletion of all
                 keys associated with this account. Are you sure you want to
@@ -109,7 +108,7 @@ export function DeleteServiceAccountDialog({ handle, refetch }: DeleteServiceAcc
                   loading={isLoading}
                   loaderText="Deleting..."
                 >
-                  Yes, Do it
+                  Delete
                 </Button>
               </Flex>
             </AlertDialog.Footer>

web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx

@@ -26,8 +26,8 @@ import {
   type Policy
 } from '@raystack/proton/frontier';
 import { orderBy } from 'lodash';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { PERMISSIONS } from '../../../../utils';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { PERMISSIONS } from '~/utils';
 import styles from '../service-account-details-view.module.css';
 
 const PROJECT_ROLES = [
@@ -55,6 +55,10 @@ function getColumns({
       id: 'checkbox',
       accessorKey: 'id',
       enableSorting: false,
+      styles: {
+        cell: { width: '40px', minWidth: '40px', maxWidth: '40px' },
+        header: { width: '40px', minWidth: '40px', maxWidth: '40px' }
+      },
       cell: ({ getValue }) => {
         const projectId = getValue() as string;
         const entry = permMap[projectId];
@@ -63,7 +67,7 @@ function getColumns({
         return (
           <Flex>
             {isLoading ? (
-              <Spinner />
+              <Spinner size={2} />
             ) : (
               <Checkbox
                 checked={checked}
@@ -86,16 +90,21 @@ function getColumns({
       id: 'access',
       accessorKey: 'id',
       enableSorting: false,
+      styles: {
+        cell: { width: '180px', minWidth: '180px', maxWidth: '180px' },
+        header: { width: '180px', minWidth: '180px', maxWidth: '180px' }
+      },
       cell: ({ getValue }) => {
         const projectId = getValue() as string;
         const entry = permMap[projectId];
         const isChecked = entry?.value ?? false;
+        const isLoading = entry?.isLoading ?? false;
         const roleId = entry?.roleId || PERMISSIONS.RoleProjectViewer;
         return (
           <Select
             value={roleId}
             onValueChange={val => onRoleChange(projectId, val)}
-            disabled={!isChecked}
+            disabled={!isChecked || isLoading}
           >
             <Select.Trigger className={styles.accessSelectTrigger}>
               <Select.Value placeholder="Viewer" />
@@ -351,19 +360,26 @@ export function ManageProjectAccessDialog({
           <Dialog.Title>Manage Project Access</Dialog.Title>
         </Dialog.Header>
         <Dialog.Body className={styles.manageAccessDialogBody}>
-          <Flex direction="column" gap={7}>
+          <Flex
+            direction="column"
+            gap={7}
+            className={styles.manageAccessBodyInner}
+          >
             <Text size="small" variant="secondary">
               Note: Choose a project to join and specify the access type.
             </Text>
             <DataTable
               data={projects}
               columns={columns}
               isLoading={isLoading}
+              loadingRowCount={9}
               defaultSort={{ name: 'title', order: 'asc' }}
               mode="client"
             >
               <DataTable.Content
-                classNames={{ root: styles.manageAccessTableRoot }}
+                classNames={{
+                  root: styles.manageAccessTableRoot
+                }}
               />
             </DataTable>
           </Flex>

web/sdk/react/views-new/service-accounts/components/projects-cell.module.css

@@ -0,0 +1,11 @@
+.text {
+  display: block;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tooltipContent {
+  max-width: 550px;
+}

web/sdk/react/views-new/service-accounts/components/projects-cell.tsx

@@ -1,21 +1,22 @@
 'use client';
 
 import { useMemo } from 'react';
-import { Text } from '@raystack/apsara-v1';
+import { Skeleton, Text, Tooltip } from '@raystack/apsara-v1';
 import { useQuery } from '@connectrpc/connect-query';
 import { create } from '@bufbuild/protobuf';
 import {
   FrontierServiceQueries,
   ListServiceUserProjectsRequestSchema
 } from '@raystack/proton/frontier';
+import styles from './projects-cell.module.css';
 
 interface ProjectsCellProps {
   serviceUserId: string;
   orgId: string;
 }
 
 export function ProjectsCell({ serviceUserId, orgId }: ProjectsCellProps) {
-  const { data } = useQuery(
+  const { data, isLoading } = useQuery(
     FrontierServiceQueries.listServiceUserProjects,
     create(ListServiceUserProjectsRequestSchema, {
       id: serviceUserId,
@@ -32,16 +33,24 @@ export function ProjectsCell({ serviceUserId, orgId }: ProjectsCellProps) {
     return projects.map(p => p.title).join(', ');
   }, [data]);
 
+  if (isLoading) {
+    return <Skeleton height="16px" width="200px" />;
+  }
+
+  if (!projectNames) {
+    return <Text size="small">-</Text>;
+  }
+
   return (
-    <Text
-      size="small"
-      style={{
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      }}
-    >
-      {projectNames || '-'}
-    </Text>
+    <Tooltip>
+      <Tooltip.Trigger
+        render={<Text size="small" className={styles.text} />}
+      >
+        {projectNames}
+      </Tooltip.Trigger>
+      <Tooltip.Content className={styles.tooltipContent}>
+        {projectNames}
+      </Tooltip.Content>
+    </Tooltip>
   );
 }

web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css

@@ -0,0 +1,3 @@
+.body {
+  border-bottom: none !important;
+}

web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx

@@ -14,8 +14,9 @@ import {
   Flex,
   toastManager
 } from '@raystack/apsara-v1';
-import { useFrontier } from '../../../contexts/FrontierContext';
-import { useTerminology } from '../../../hooks/useTerminology';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useTerminology } from '~/react/hooks/useTerminology';
+import styles from './revoke-token-dialog.module.css';
 
 export type RevokeTokenPayload = { tokenId: string };
 
@@ -68,11 +69,9 @@ export function RevokeTokenDialog({
       {({ payload: rawPayload }) => {
         const payload = rawPayload as RevokeTokenPayload | undefined;
         return (
-          <AlertDialog.Content width={400}>
-            <AlertDialog.Header>
+          <AlertDialog.Content width={400} showCloseButton={false}>
+            <AlertDialog.Body className={styles.body}>
               <AlertDialog.Title>Revoke API Key</AlertDialog.Title>
-            </AlertDialog.Header>
-            <AlertDialog.Body>
               <Text size="small" variant="secondary">
                 This is an irreversible action doing this might lead to
                 discontinuation of access to the {t.appName()} features. Do you

web/sdk/react/views-new/service-accounts/components/service-account-columns.module.css

@@ -0,0 +1,11 @@
+.actionsCell {
+  visibility: hidden;
+}
+
+tr:hover .actionsCell {
+  visibility: visible;
+}
+
+.actionButton {
+  transition: none;
+}

web/sdk/react/views-new/service-accounts/components/service-account-columns.tsx

@@ -10,8 +10,9 @@ import {
 } from '@raystack/apsara-v1';
 import type { ServiceUser } from '@raystack/proton/frontier';
 import type { Timestamp } from '@bufbuild/protobuf/wkt';
-import { timestampToDayjs } from '../../../../utils/timestamp';
+import { timestampToDayjs } from '~/utils/timestamp';
 import { ProjectsCell } from './projects-cell';
+import styles from './service-account-columns.module.css';
 
 export interface ServiceAccountMenuPayload {
   serviceAccountId: string;
@@ -47,6 +48,10 @@ export const getColumns = ({
     id: 'projects',
     accessorKey: 'id',
     enableSorting: false,
+    styles: {
+      cell: { maxWidth: '600px' },
+      header: { maxWidth: '600px' }
+    },
     cell: ({ getValue }) => {
       const serviceUserId = getValue() as string;
       return <ProjectsCell serviceUserId={serviceUserId} orgId={orgId} />;
@@ -55,6 +60,10 @@ export const getColumns = ({
   {
     header: 'Created On',
     accessorKey: 'createdAt',
+    styles: {
+      cell: { maxWidth: '300px' },
+      header: { maxWidth: '300px' }
+    },
     cell: ({ getValue }) => {
       const value = getValue() as Timestamp | undefined;
       return (
@@ -70,15 +79,16 @@ export const getColumns = ({
     accessorKey: 'id',
     enableSorting: false,
     styles: {
-      cell: { width: '48px' }
+      cell: { width: '48px', minWidth: '48px', maxWidth: '48px' },
+      header: { width: '48px', minWidth: '48px', maxWidth: '48px' }
     },
     cell: ({ getValue }) => {
       const serviceAccountId = getValue() as string;
 
       if (!canUpdateWorkspace) return null;
 
       return (
-        <Flex align="center" justify="center">
+        <Flex align="center" justify="center" className={styles.actionsCell}>
           <Menu.Trigger
             handle={menuHandle}
             payload={{
@@ -91,6 +101,7 @@ export const getColumns = ({
                 size={3}
                 aria-label="Service account actions"
                 data-test-id="frontier-sdk-service-account-actions-btn"
+                className={styles.actionButton}
               />
             }
           >