feat (SDK): add sessions page

sdks/js/packages/core/react/components/organization/profile.tsx

@@ -30,7 +30,8 @@ export const OrganizationProfile = ({
   showAPIKeys = false,
   showPreferences = false,
   hideToast = false,
-  customScreens = []
+  customScreens = [],
+  onLogout = () => {}
 }: OrganizationProfileProps) => {
   const memoryHistory = createMemoryHistory({
     initialEntries: [defaultRoute]
@@ -50,7 +51,8 @@ export const OrganizationProfile = ({
       showAPIKeys,
       hideToast,
       showPreferences,
-      customRoutes
+      customRoutes,
+      onLogout
     }
   });
   return <RouterProvider router={memoryRouter} />;

sdks/js/packages/core/react/components/organization/routes.tsx

@@ -47,6 +47,7 @@ import ServiceUserPage from './api-keys/service-user';
 import { DeleteServiceAccount } from './api-keys/delete';
 import { DeleteServiceAccountKey } from './api-keys/service-user/delete';
 import ManageServiceUserProjects from './api-keys/service-user/projects';
+import { SessionsPage, RevokeSessionConfirm } from './sessions';
 export interface CustomScreen {
   name: string;
   path: string;
@@ -63,6 +64,7 @@ export interface OrganizationProfileProps {
   showPreferences?: boolean;
   hideToast?: boolean;
   customScreens?: CustomScreen[];
+  onLogout?: () => void;
 }
 
 export interface CustomRoutes {
@@ -78,7 +80,7 @@ type RouterContext = Pick<
   | 'showAPIKeys'
   | 'hideToast'
   | 'showPreferences'
-> & { customRoutes: CustomRoutes };
+> & { customRoutes: CustomRoutes; onLogout?: () => void };
 
 export function getCustomRoutes(customScreens: CustomScreen[] = []) {
   return (
@@ -349,6 +351,21 @@ const deleteServiceAccountKeyRoute = createRoute({
   component: DeleteServiceAccountKey
 });
 
+const sessionsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/sessions',
+  component: SessionsPage
+});
+
+const revokeSessionRoute = createRoute({
+  getParentRoute: () => sessionsRoute,
+  path: '/revoke',
+  component: RevokeSessionConfirm,
+  validateSearch: (search: Record<string, unknown>) => ({
+    sessionId: search.sessionId as string | undefined,
+  }),
+});
+
 interface getRootTreeOptions {
   customScreens?: CustomScreen[];
 }
@@ -357,6 +374,7 @@ export function getRootTree({ customScreens = [] }: getRootTreeOptions) {
   return rootRoute.addChildren([
     indexRoute.addChildren([deleteOrgRoute]),
     securityRoute,
+    sessionsRoute.addChildren([revokeSessionRoute]),
     membersRoute.addChildren([inviteMemberRoute, removeMemberRoute]),
     teamsRoute.addChildren([addTeamRoute]),
     domainsRoute.addChildren([

sdks/js/packages/core/react/components/organization/sessions/index.tsx

@@ -0,0 +1,3 @@
+export { SessionsPage } from './sessions-page';
+export { RevokeSessionConfirm } from './revoke-session-confirm';
+export { RevokeSessionFinalConfirm } from './revoke-session-final-confirm';

sdks/js/packages/core/react/components/organization/sessions/revoke-session-confirm.tsx

@@ -0,0 +1,152 @@
+import { useState, useMemo } from 'react';
+import { useNavigate, useSearch, useRouteContext } from '@tanstack/react-router';
+import {
+  Button,
+  Text,
+  Dialog,
+  Flex,
+  List,
+  Skeleton
+} from '@raystack/apsara/v1';
+import { useSessions } from '../../../hooks/useSessions';
+import { useMutation } from '@connectrpc/connect-query';
+import { FrontierServiceQueries } from '@raystack/proton/frontier';
+import { RevokeSessionFinalConfirm } from './revoke-session-final-confirm';
+import styles from './sessions.module.css';
+
+export const RevokeSessionConfirm = () => {
+  const navigate = useNavigate({ from: '/sessions/revoke' });
+  const search = useSearch({ from: '/sessions/revoke' }) as { sessionId?: string };
+  const { sessions, revokeSession, isRevokingSession } = useSessions();
+  const { onLogout } = useRouteContext({ from: '__root__' }) as { onLogout?: () => void };
+  const [isFinalConfirmOpen, setIsFinalConfirmOpen] = useState(false);
+
+  const { mutate: logout } = useMutation(FrontierServiceQueries.authLogout, {
+    onSuccess: () => {
+      if (onLogout) {
+        onLogout();
+      }
+    },
+    onError: (error) => {
+      console.error('Failed to logout:', error);
+      // Fallback to regular session revocation
+      if (search.sessionId) {
+        revokeSession(search.sessionId);
+        navigate({ to: '/sessions' });
+      }
+    },
+  });
+
+  // Find the session data based on sessionId from URL params
+  const sessionData = useMemo(() => {
+    if (!search.sessionId || sessions.length === 0) {
+      return null;
+    }
+
+    const session = sessions.find(s => s.id === search.sessionId);
+    if (!session) {
+      console.error('Not found');
+      return null;
+    }
+
+    return session;
+  }, [search.sessionId, sessions]);
+
+  const handleRevokeClick = () => {
+    setIsFinalConfirmOpen(true);
+  };
+
+  const handleFinalConfirm = () => {
+    if (!search.sessionId) return;
+
+    if (sessionData?.isCurrent) {
+      logout({});
+      return;
+    }
+
+    revokeSession(search.sessionId);
+    navigate({ to: '/sessions' });
+  };
+
+
+  return (
+    <>
+      {sessionData ? (
+        <Dialog open={true} onOpenChange={() => navigate({ to: '/sessions' })}>
+          <Dialog.Content
+            style={{ padding: 0, maxWidth: '400px', width: '100%' }}
+          >
+            <Dialog.Header className={styles.revokeSessionConfirmHeader}>
+              <Flex justify="between" align="center" width="full">
+                <Text size="regular">
+                  {sessionData.browser} on {sessionData.operatingSystem}
+                </Text>
+                <Dialog.CloseButton data-test-id="frontier-sdk-close-revoke-session-dialog" />
+              </Flex>
+            </Dialog.Header>
+
+            <Dialog.Body className={styles.revokeSessionConfirmBody}>
+              <List className={styles.listRoot}>
+                <List.Item className={styles.listItem}>
+                  <List.Label minWidth="120px">Device</List.Label>
+                  <List.Value>{sessionData.browser} on {sessionData.operatingSystem}</List.Value>
+                </List.Item>
+                <List.Item className={styles.listItem}>
+                  <List.Label minWidth="120px">IP Address</List.Label>
+                  <List.Value>{sessionData.ipAddress}</List.Value>
+                </List.Item>
+                <List.Item className={styles.listItem}>
+                  <List.Label minWidth="120px">Last Location</List.Label>
+                  <List.Value>{sessionData.location}</List.Value>
+                </List.Item>
+                <List.Item className={styles.listItem}>
+                  <List.Label minWidth="120px">Last Active</List.Label>
+                  <List.Value>{sessionData.lastActive}</List.Value>
+                </List.Item>
+              </List>
+            </Dialog.Body>
+
+            <Dialog.Footer>
+              <Flex justify="end" gap={5}>
+                <Button
+                  variant="outline"
+                  color="neutral"
+                  onClick={() => navigate({ to: '/sessions' })}
+                  data-test-id="frontier-sdk-cancel-revoke-session-dialog"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="solid"
+                  color="danger"
+                  onClick={handleRevokeClick}
+                  data-test-id="frontier-sdk-confirm-revoke-session-dialog"
+                >
+                  {sessionData?.isCurrent ? 'Logout' : 'Revoke'}
+                </Button>
+              </Flex>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      ) : (
+        <Dialog open={true} onOpenChange={() => navigate({ to: '/sessions' })}>
+          <Dialog.Content style={{ padding: 0, maxWidth: '400px', width: '100%' }}>
+            <Skeleton 
+              height="20px" 
+              containerStyle={{ padding: '2rem' }}
+              count={4}
+            />
+          </Dialog.Content>
+        </Dialog>
+      )}
+
+      <RevokeSessionFinalConfirm
+        isOpen={isFinalConfirmOpen}
+        onOpenChange={setIsFinalConfirmOpen}
+        onConfirm={handleFinalConfirm}
+        isLoading={isRevokingSession}
+        isCurrentSession={sessionData?.isCurrent}
+      />
+    </>
+  );
+};

sdks/js/packages/core/react/components/organization/sessions/revoke-session-final-confirm.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  toast,
+  Dialog,
+  Flex,
+  Text
+} from '@raystack/apsara/v1';
+import styles from './sessions.module.css';
+
+const getErrorMessage = (error: unknown): string => {
+  if (error && typeof error === 'object' && 'status' in error && error.status === 500) {
+    return 'Something went wrong';
+  }
+  return error instanceof Error ? error.message : 'Something went wrong';
+};
+
+interface RevokeSessionFinalConfirmProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+  isCurrentSession?: boolean;
+}
+
+export const RevokeSessionFinalConfirm = ({ 
+  isOpen, 
+  onOpenChange, 
+  onConfirm, 
+  isLoading = false,
+  isCurrentSession = false
+}: RevokeSessionFinalConfirmProps) => {
+  const handleConfirm = async () => {
+    try {
+      onConfirm();
+      onOpenChange(false);
+    } catch (error: any) {
+      toast.error('Failed to revoke session', {
+        description: getErrorMessage(error)
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <Dialog.Content
+        style={{ padding: 0, maxWidth: '400px', width: '100%' }}
+      >
+        <Dialog.Header className={styles.revokeSessionConfirmHeader}>
+          <Dialog.Title>Revoke</Dialog.Title>
+          <Dialog.CloseButton data-test-id="frontier-sdk-close-final-revoke-dialog" />
+        </Dialog.Header>
+
+        <Dialog.Body className={styles.revokeSessionFinalConfirmBody}>
+          <Flex direction="column" gap={4}>
+            <Text size="small" variant="secondary">
+              Are you sure you want to revoke this session? This action cannot be undone.
+            </Text>
+          </Flex>
+        </Dialog.Body>
+
+        <Dialog.Footer>
+          <Flex justify="end" gap={5}>
+            <Button
+              variant="outline"
+              color="neutral"
+              onClick={() => onOpenChange(false)}
+              data-test-id="frontier-sdk-cancel-final-revoke-dialog"
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="solid"
+              color="danger"
+              onClick={handleConfirm}
+              data-test-id="frontier-sdk-confirm-final-revoke-dialog"
+              disabled={isLoading}
+              loading={isLoading}
+              loaderText={isCurrentSession ? "Signing out..." : "Revoking..."}
+            >
+              {isCurrentSession ? 'Logout' : 'Revoke'}
+            </Button>
+          </Flex>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+};