feat: add support for tenants tab/table structure and use in users tab

Author: deepjyoti30-st

packages/tenants-react/src/components/index.ts

@@ -1,3 +1,2 @@
 export * from './tenant-card';
 export * from './page-wrapper';
-export * from './tenant-management';

packages/tenants-react/src/components/tab/TenantTab.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+type TenantTabProps = {
+    description: string;
+    children: React.ReactNode;
+}
+
+export const TenantTab: React.FC<TenantTabProps> = ({ description, children }) => {
+  return (
+    <div>
+        <div>{description}</div>
+        <div>{children}</div>
+    </div>
+  );
+};

packages/tenants-react/src/components/table/TenantTable.tsx

@@ -0,0 +1,25 @@
+type TableProps = {
+  columns: {
+    emailComponent: React.ReactNode;
+    extraComponent?: React.ReactNode;
+  }[];
+};
+
+export const TenantTable: React.FC<TableProps> = ({ columns }) => {
+  return (
+    <div>
+      <div data-supertokens="table-head">
+        <div>Email</div>
+        <div>Role</div>
+      </div>
+      <div data-supertokens="table-columns">
+        {columns.map((column) => {
+          <div>
+            <div data-supertokens="email-component">{column.emailComponent}</div>
+            {column.extraComponent && <div data-supertokens="extra-component">{column.extraComponent}</div>}
+          </div>;
+        })}
+      </div>
+    </div>
+  );
+};

packages/tenants-react/src/components/details/details-wrapper.tsx renamed to packages/tenants-react/src/components/users/TenantUsers.tsx

@@ -2,13 +2,19 @@ import classNames from "classnames/bind";
 import { useCallback, useEffect, useState } from "react";
 import { User } from "supertokens-web-js/types";
 
+import { TenantTable } from "../table/TenantTable";
+
 import style from "./details.module.scss";
 
 // import { BaseFormSection } from '@supertokens-plugin-profile/common-details-shared';
 
 const cx = classNames.bind(style);
 
-export const DetailsWrapper = ({ section, onFetch }: { section: any; onFetch: () => Promise<{ users: User[] }> }) => {
+type TenantUsersProps = {
+  onFetch: () => Promise<{ users: User[] }>
+};
+
+export const TenantUsers: React.FC<TenantUsersProps> = ({ onFetch }) => {
   const [users, setUsers] = useState<User[]>([]);
 
   const loadDetails = useCallback(async () => {
@@ -22,20 +28,19 @@ export const DetailsWrapper = ({ section, onFetch }: { section: any; onFetch: ()
 
   return (
     <div className={cx("tenantDetailsSection")}>
-      <div className={cx("tenantDetailsHeader")}>
-        <h3>{section.label}</h3>
-        <p>{section.description}</p>
-      </div>
-
       <div className={cx("tenantDetailsContent")}>
         {users.length > 0 ? (
           <div className={cx("tenantDetailsUsers")}>
-            {users.map((user) => (
-              <div key={user.id} className={cx("userRow")}>
-                <div className={cx("userAvatar")}>{user.emails[0]?.charAt(0).toUpperCase() || "U"}</div>
-                <div className={cx("userEmail")}>{user.emails[0]}</div>
-              </div>
-            ))}
+            <TenantTable
+              columns={users.map((user) => ({
+                emailComponent: (
+                  <div className={cx("userRow")}>
+                    <div className={cx("userAvatar")}>{user.emails[0]?.charAt(0).toUpperCase() || "U"}</div>
+                    <div className={cx("userEmail")}>{user.emails[0]}</div>
+                  </div>
+                )
+              }))}
+            />
           </div>
         ) : (
           <div className={cx("tenantDetailsNoUsers")}>

packages/tenants-react/src/components/details/details.module.scss renamed to packages/tenants-react/src/components/users/details.module.scss

@@ -4,9 +4,10 @@ import { SelectInput, TabGroup, Tab } from "@shared/ui";
 import classNames from "classnames/bind";
 import { useState, useEffect, useCallback } from "react";
 
+import { InvitationsWrapper } from "../../components/invitations/invitations";
+import { TenantTab } from "../../components/tab/TenantTab";
+import { TenantUsers } from "../../components/users/TenantUsers";
 import { usePluginContext } from "../../plugin";
-import { DetailsWrapper } from "../details/details-wrapper";
-import { InvitationsWrapper } from "../invitations/invitations";
 
 import style from "./styles.module.scss";
 
@@ -44,16 +45,13 @@ export const TenantManagement = ({ section }: { section: any }) => {
   }, [getUsers]);
 
   // Invitations tab functions
-  const onFetchInvitations = useCallback(
-    async () => {
-      const response = await getInvitations();
-      if (response.status === "ERROR") {
-        throw new Error(response.message);
-      }
-      return { invitations: response.invitees };
-    },
-    [getInvitations],
-  );
+  const onFetchInvitations = useCallback(async () => {
+    const response = await getInvitations();
+    if (response.status === "ERROR") {
+      throw new Error(response.message);
+    }
+    return { invitations: response.invitees };
+  }, [getInvitations]);
 
   const onRemoveInvite = useCallback(
     async (email: string) => {
@@ -117,15 +115,11 @@ export const TenantManagement = ({ section }: { section: any }) => {
       <div>
         <TabGroup>
           <Tab panel={t("PL_TB_USERS_TAB_LABEL")}>
-            <DetailsWrapper
-              section={{
-                id: "tenant-users",
-                label: "Tenant Users",
-                description: "Users in this tenant",
-                fields: [],
-              }}
-              onFetch={onFetchUsers}
-            />
+            <TenantTab description="List of users that are part of your tenant">
+              <TenantUsers
+                onFetch={onFetchUsers}
+              />
+            </TenantTab>
           </Tab>
           <Tab panel={t("PL_TB_INVITATIONS_TAB_LABEL")}>
             <InvitationsWrapper

packages/tenants-react/src/components/tenant-management/index.ts renamed to packages/tenants-react/src/pages/tenant-management/index.ts

@@ -4,10 +4,10 @@ import { getTranslationFunction, SuperTokensPlugin, SuperTokensPublicConfig, Sup
 import { BooleanClaim } from "supertokens-auth-react/recipe/session";
 
 import { getApi } from "./api";
-import { TenantManagement } from "./components";
 import { API_PATH, PLUGIN_ID } from "./constants";
 // import { InvitationAcceptWrapper } from "./invitation-accept-wrapper";
 import { enableDebugLogs } from "./logger";
+import { TenantManagement } from "./pages/tenant-management/tenant-management";
 // import { SelectTenantPage } from "./select-tenant-page";
 import { defaultTranslationsTenants } from "./translations";
 import { SuperTokensPluginTenantsPluginConfig, SuperTokensPluginTenantsPluginNormalisedConfig, TranslationKeys } from "./types";

packages/tenants-react/src/components/tenant-management/styles.module.scss renamed to packages/tenants-react/src/pages/tenant-management/styles.module.scss

@@ -1,8 +1,8 @@
 // import { BaseFormSection } from "@supertokens-plugin-profile/common-details-shared";
-import { useCallback } from "react";
+import { useCallback } from 'react';
 
-import { DetailsWrapper } from "./components/details/details-wrapper";
-import { usePluginContext } from "./plugin";
+import { DetailsWrapper } from './components/users/TenantUsers';
+import { usePluginContext } from './plugin';
 
 export const TenantDetailsWrapper = ({ section }: { section: any }) => {
   const { api } = usePluginContext();
@@ -11,7 +11,7 @@ export const TenantDetailsWrapper = ({ section }: { section: any }) => {
     // Use the `tid` from the users access token payload.
 
     const response = await api.getUsers();
-    if (response.status === "ERROR") {
+    if (response.status === 'ERROR') {
       throw new Error(response.message);
     }
     return { users: response.users };