feat: update tenant management with UI components

Author: deepjyoti30-st

packages/tenants-react/src/components/tenant-management/tenant-management.tsx

@@ -13,20 +13,21 @@ import style from "./styles.module.scss";
 const cx = classNames.bind(style);
 
 export const TenantManagement = ({ section }: { section: any }) => {
-  const { api } = usePluginContext();
+  const { api, t } = usePluginContext();
   const { getUsers, getInvitations, removeInvitation, addInvitation, fetchTenants, switchTenant } = api;
   const [tenants, setTenants] = useState<TenantDetails[]>([]);
   const [selectedTenantId, setSelectedTenantId] = useState<string>("public");
-  const [activeTab, setActiveTab] = useState<"users" | "invitations">("users");
 
   // Load tenants on component mount
   useEffect(() => {
     const loadTenants = async () => {
       const response = await fetchTenants();
       if (response.status === "OK") {
         setTenants(response.tenants);
+
+        // TODO: Set the selected tenant from the user details
         if (response.tenants.length > 0) {
-          setSelectedTenantId(response.tenants[0].tenantId);
+          setSelectedTenantId(response.tenants[0]!.tenantId);
         }
       }
     };
@@ -35,38 +36,38 @@ export const TenantManagement = ({ section }: { section: any }) => {
 
   // Users tab functions
   const onFetchUsers = useCallback(async () => {
-    const response = await getUsers(selectedTenantId);
+    const response = await getUsers();
     if (response.status === "ERROR") {
       throw new Error(response.message);
     }
     return { users: response.users };
-  }, [getUsers, selectedTenantId]);
+  }, [getUsers]);
 
   // Invitations tab functions
   const onFetchInvitations = useCallback(
-    async (tenantId?: string) => {
+    async () => {
       const response = await getInvitations();
       if (response.status === "ERROR") {
         throw new Error(response.message);
       }
       return { invitations: response.invitees };
     },
-    [getInvitations, selectedTenantId],
+    [getInvitations],
   );
 
   const onRemoveInvite = useCallback(
-    async (email: string, tenantId?: string) => {
-      const response = await removeInvitation(email, tenantId || selectedTenantId);
+    async (email: string) => {
+      const response = await removeInvitation(email);
       if (response.status === "ERROR") {
         throw new Error(response.message);
       }
     },
-    [removeInvitation, selectedTenantId],
+    [removeInvitation],
   );
 
   const onCreateInvite = useCallback(
-    async (email: string, tenantId: string) => {
-      const response = await addInvitation(email, tenantId);
+    async (email: string) => {
+      const response = await addInvitation(email);
       if (response.status === "ERROR") {
         throw new Error(response.message);
       }
@@ -113,55 +114,36 @@ export const TenantManagement = ({ section }: { section: any }) => {
       </div>
 
       {/* Tab Navigation */}
-
       <div>
         <TabGroup>
-          <Tab panel="Users"></Tab>
-          <Tab panel="Invitations"></Tab>
-          <Tab panel="Requests"></Tab>
+          <Tab panel={t("PL_TB_USERS_TAB_LABEL")}>
+            <DetailsWrapper
+              section={{
+                id: "tenant-users",
+                label: "Tenant Users",
+                description: "Users in this tenant",
+                fields: [],
+              }}
+              onFetch={onFetchUsers}
+            />
+          </Tab>
+          <Tab panel={t("PL_TB_INVITATIONS_TAB_LABEL")}>
+            <InvitationsWrapper
+              section={{
+                id: "tenant-invitations",
+                label: "Tenant Invitations",
+                description: "Invitations for this tenant",
+                fields: [],
+              }}
+              onFetch={onFetchInvitations}
+              onRemove={onRemoveInvite}
+              onCreate={onCreateInvite}
+              selectedTenantId={selectedTenantId}
+            />
+          </Tab>
+          <Tab panel={t("PL_TB_REQUESTS_TAB_LABEL")}></Tab>
         </TabGroup>
       </div>
-
-      <div className={cx("tabNavigation")}>
-        <button className={cx("tabButton", { active: activeTab === "users" })} onClick={() => setActiveTab("users")}>
-          Users
-        </button>
-        <button
-          className={cx("tabButton", { active: activeTab === "invitations" })}
-          onClick={() => setActiveTab("invitations")}>
-          Invitations
-        </button>
-      </div>
-
-      {/* Tab Content */}
-      <div className={cx("tabContent")}>
-        {activeTab === "users" && selectedTenantId && (
-          <DetailsWrapper
-            section={{
-              id: "tenant-users",
-              label: "Tenant Users",
-              description: "Users in this tenant",
-              fields: [],
-            }}
-            onFetch={onFetchUsers}
-          />
-        )}
-
-        {activeTab === "invitations" && selectedTenantId && (
-          <InvitationsWrapper
-            section={{
-              id: "tenant-invitations",
-              label: "Tenant Invitations",
-              description: "Invitations for this tenant",
-              fields: [],
-            }}
-            onFetch={onFetchInvitations}
-            onRemove={onRemoveInvite}
-            onCreate={onCreateInvite}
-            selectedTenantId={selectedTenantId}
-          />
-        )}
-      </div>
     </div>
   );
 };

packages/tenants-react/src/plugin.tsx

@@ -1,6 +1,6 @@
 import { createPluginInitFunction } from "@shared/js";
 import { buildContext, getQuerier } from "@shared/react";
-import { SuperTokensPlugin, SuperTokensPublicConfig, SuperTokensPublicPlugin } from "supertokens-auth-react";
+import { getTranslationFunction, SuperTokensPlugin, SuperTokensPublicConfig, SuperTokensPublicPlugin } from "supertokens-auth-react";
 import { BooleanClaim } from "supertokens-auth-react/recipe/session";
 
 import { getApi } from "./api";
@@ -9,7 +9,8 @@ import { API_PATH, PLUGIN_ID } from "./constants";
 // import { InvitationAcceptWrapper } from "./invitation-accept-wrapper";
 import { enableDebugLogs } from "./logger";
 // import { SelectTenantPage } from "./select-tenant-page";
-import { SuperTokensPluginTenantsPluginConfig, SuperTokensPluginTenantsPluginNormalisedConfig } from "./types";
+import { defaultTranslationsTenants } from "./translations";
+import { SuperTokensPluginTenantsPluginConfig, SuperTokensPluginTenantsPluginNormalisedConfig, TranslationKeys } from "./types";
 
 const { usePluginContext, setContext } = buildContext<{
   plugins: SuperTokensPublicPlugin[];
@@ -18,7 +19,7 @@ const { usePluginContext, setContext } = buildContext<{
   pluginConfig: SuperTokensPluginTenantsPluginNormalisedConfig;
   querier: ReturnType<typeof getQuerier>;
   api: ReturnType<typeof getApi>;
-  t: (key: any) => string; // TODO: Update with correct translations type
+  t: (key: TranslationKeys) => string;
 }>();
 export { usePluginContext };
 
@@ -75,6 +76,8 @@ export const init = createPluginInitFunction<
       };
     };
 
+    let translations: ReturnType<typeof getTranslationFunction<TranslationKeys>>;
+
     return {
       id: PLUGIN_ID,
       init: (config, plugins, sdkVersion) => {
@@ -118,6 +121,7 @@ export const init = createPluginInitFunction<
 
         const querier = getQuerier(new URL(API_PATH, config.appInfo.apiDomain.getAsStringDangerous()).toString());
         const api = getApi(querier);
+        translations = getTranslationFunction<TranslationKeys>(defaultTranslationsTenants);
 
         setContext({
           plugins,
@@ -126,7 +130,7 @@ export const init = createPluginInitFunction<
           pluginConfig,
           querier,
           api,
-          t: (t: undefined) => "", // TODO: Update this
+          t: translations,
         });
       },
       routeHandlers: (appConfig: any, plugins: any, sdkVersion: any) => {

packages/tenants-react/src/translations.ts

@@ -0,0 +1,7 @@
+export const defaultTranslationsTenants = {
+  en: {
+    PL_TB_USERS_TAB_LABEL: "Users",
+    PL_TB_INVITATIONS_TAB_LABEL: "Invitations",
+    PL_TB_REQUESTS_TAB_LABEL: "Requests",
+  },
+} as const;

packages/tenants-react/src/types.ts

@@ -1,7 +1,12 @@
+import { defaultTranslationsTenants } from "./translations";
+
+
 export type SuperTokensPluginTenantsPluginConfig = {
   requireTenantCreation?: boolean;
 };
 
 export type SuperTokensPluginTenantsPluginNormalisedConfig = {
   requireTenantCreation?: boolean;
 };
+
+export type TranslationKeys = keyof (typeof defaultTranslationsTenants)["en"];