fix: DIA-1927: [FE] Data on organization section are incorrect on new account settings page

label_studio/users/serializers.py

@@ -14,13 +14,21 @@ class BaseUserSerializer(FlexFieldsModelSerializer):
     # short form for user presentation
     initials = serializers.SerializerMethodField(default='?', read_only=True)
     avatar = serializers.SerializerMethodField(read_only=True)
+    active_organization_meta = serializers.SerializerMethodField(read_only=True)
 
     def get_avatar(self, instance):
         return instance.avatar_url
 
     def get_initials(self, instance):
         return instance.get_initials(self._is_deleted(instance))
 
+    def get_active_organization_meta(self, instance):
+        organization = instance.active_organization
+        title = organization.title if organization is not None else ''
+        email = organization.created_by.email if organization is not None else ''
+
+        return {'title': title, 'email': email}
+
     def _is_deleted(self, instance):
         if 'deleted_organization_members' in self.context:
             organization_members = self.context.get('deleted_organization_members', None)
@@ -84,6 +92,7 @@ class Meta:
             'initials',
             'phone',
             'active_organization',
+            'active_organization_meta',
             'allow_newsletters',
             'date_joined',
         )

web/apps/labelstudio/src/app/App.jsx

@@ -17,9 +17,11 @@ import ErrorBoundary from "./ErrorBoundary";
 import { FF_OPTIC_2, FF_UNSAVED_CHANGES, FF_PRODUCT_TOUR, isFF } from "../utils/feature-flags";
 import { TourProvider } from "@humansignal/core";
 import { ToastProvider, ToastViewport } from "@humansignal/ui";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
 import { JotaiProvider, JotaiStore } from "../utils/jotai-store";
 import { CurrentUserProvider } from "../providers/CurrentUser";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { LSQueryClient } from "../utils/query-client";
 import { RootPage } from "./RootPage";
 import "@humansignal/ui/src/tailwind.css";
 import "./App.scss";
@@ -67,8 +69,8 @@ const App = ({ content }) => {
       <Router history={browserHistory}>
         <MultiProvider
           providers={[
+            <QueryClientProvider client={LSQueryClient} key="query" />,
             <JotaiProvider key="jotai" store={JotaiStore} />,
-            <QueryClientProvider key="query" client={queryClient} />,
             <AppStoreProvider key="app-store" />,
             <ApiProvider key="api" />,
             <ConfigProvider key="config" />,

web/apps/labelstudio/src/utils/query-client.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const LSQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});

web/libs/core/src/blocks/TokenSettingsModal/styles.module.scss

@@ -6,6 +6,7 @@
   justify-content: center;
 }
 
+
 .success svg {
   width: 16px;
   height: 16px;

web/libs/core/src/pages/AccountSettings/AccountSettings.module.scss

@@ -1,4 +1,5 @@
 .accountSettings {
+  flex: 1;
   display: flex;
   flex-direction: column;
 

web/libs/core/src/pages/AccountSettings/sections/MembershipInfo.tsx

@@ -1,45 +1,97 @@
-import { useEffect, useState } from "react";
-import { ToastType, useToast } from "@humansignal/ui";
 import { format } from "date-fns";
 import styles from "./MembershipInfo.module.scss";
+import { useQuery } from "@tanstack/react-query";
+import { API } from "apps/labelstudio/src/providers/ApiProvider";
+import { useMemo } from "react";
+import type { WrappedResponse } from "@humansignal/core/lib/api-proxy/types";
+import { useCurrentUserAtom } from "@humansignal/core/lib/hooks/useCurrentUser";
 
-/**
- * FIXME: This is legacy imports. We're not supposed to use such statements
- * each one of these eventually has to be migrated to core/ui
- */
-import { useCurrentUser } from "apps/labelstudio/src/providers/CurrentUser";
-import { useAPI } from "apps/labelstudio/src/providers/ApiProvider";
+function formatDate(date?: string) {
+  return format(new Date(date ?? ""), "dd MMM yyyy, KK:mm a");
+}
 
 export const MembershipInfo = () => {
-  const api = useAPI();
-  const toast = useToast();
-  const { user } = useCurrentUser();
-  const [registrationDate, setRegistrationDate] = useState<string | null>(null);
-  const [annotationsCount, setAnnotationsCount] = useState<number | null>(null);
-  const [projectsContributedTo, setProjectsContributedTo] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (!user) return;
-    api
-      .callApi("userMemberships", {
-        params: {
-          pk: user.active_organization,
-          userPk: user.id,
-        },
-      })
-      .then((response: any) => {
-        if (response?.$meta?.ok) {
-          setRegistrationDate(format(new Date(response?.created_at), "dd MMM yyyy, KK:mm a"));
-          setAnnotationsCount(response?.annotations_count);
-          setProjectsContributedTo(response?.contributed_projects_count);
-        } else {
-          toast.show({
-            message: "Failed to fetch membership info",
-            type: ToastType.error,
-          });
-        }
-      });
-  }, [user?.id]);
+  const { user } = useCurrentUserAtom();
+  const dateJoined = useMemo(() => {
+    if (!user?.date_joined) return null;
+    return formatDate(user?.date_joined);
+  }, [user?.date_joined]);
+
+  const membership = useQuery({
+    queryKey: [user?.active_organization, user?.id, "user-membership"],
+    async queryFn() {
+      if (!user) return {};
+      const response = (await API.invoke("userMemberships", {
+        pk: user.active_organization,
+        userPk: user.id,
+      })) as WrappedResponse<{
+        user: number;
+        organization: number;
+        contributed_projects_count: number;
+        annotations_count: number;
+        created_at: string;
+        role: string;
+      }>;
+
+      const annotationCount = response?.annotations_count;
+      const contributions = response?.contributed_projects_count;
+      let role = "Owner";
+
+      switch (response.role) {
+        case "OW":
+          role = "Owner";
+          break;
+        case "DI":
+          role = "Deactivated";
+          break;
+        case "AD":
+          role = "Administrator";
+          break;
+        case "MA":
+          role = "Manager";
+          break;
+        case "AN":
+          role = "Annotator";
+          break;
+        case "RE":
+          role = "Reviewer";
+          break;
+        case "NO":
+          role = "Pending";
+          break;
+      }
+
+      return {
+        annotationCount,
+        contributions,
+        role,
+      };
+    },
+  });
+
+  const organization = useQuery({
+    queryKey: ["organization", user?.active_organization],
+    async queryFn() {
+      if (!user) return null;
+      if (!window?.APP_SETTINGS?.billing) return null;
+      const organization = (await API.invoke("organization", {
+        pk: user.active_organization,
+      })) as WrappedResponse<{
+        id: number;
+        external_id: string;
+        title: string;
+        token: string;
+        default_role: string;
+        created_at: string;
+      }>;
+
+      if (!organization.$meta.ok) {
+        return null;
+      }
+
+      return { ...organization, createdAt: formatDate(organization.created_at) } as const;
+    },
+  });
 
   return (
     <div className={styles.membershipInfo} id="membership-info">
@@ -50,49 +102,53 @@ export const MembershipInfo = () => {
 
       <div className="flex gap-2 w-full justify-between">
         <div>Registration date</div>
-        <div>{registrationDate}</div>
+        <div>{dateJoined}</div>
       </div>
 
       <div className="flex gap-2 w-full justify-between">
-        <div>Annotations submitted</div>
-        <div>{annotationsCount}</div>
+        <div>Annotations Submitted</div>
+        <div>{membership.data?.annotationCount}</div>
       </div>
 
       <div className="flex gap-2 w-full justify-between">
         <div>Projects contributed to</div>
-        <div>{projectsContributedTo}</div>
+        <div>{membership.data?.contributions}</div>
       </div>
 
       <div className={styles.divider} />
 
-      <div className="flex gap-2 w-full justify-between">
-        <div>Organization</div>
-        <div>
-          <a href="/organization" className="text-blue-600 hover:underline">
-            {user?.email}
-          </a>
+      {user?.active_organization_meta && (
+        <div className="flex gap-2 w-full justify-between">
+          <div>Organization</div>
+          <div>{user.active_organization_meta.title}</div>
         </div>
-      </div>
+      )}
 
-      <div className="flex gap-2 w-full justify-between">
-        <div>My role</div>
-        <div>Owner</div>
-      </div>
+      {membership.data?.role && (
+        <div className="flex gap-2 w-full justify-between">
+          <div>My role</div>
+          <div>{membership.data.role}</div>
+        </div>
+      )}
 
       <div className="flex gap-2 w-full justify-between">
         <div>Organization ID</div>
         <div>{user?.active_organization}</div>
       </div>
 
-      <div className="flex gap-2 w-full justify-between">
-        <div>Owner</div>
-        <div>{user?.email}</div>
-      </div>
+      {user?.active_organization_meta && (
+        <div className="flex gap-2 w-full justify-between">
+          <div>Owner</div>
+          <div>{user.active_organization_meta.email}</div>
+        </div>
+      )}
 
-      <div className="flex gap-2 w-full justify-between">
-        <div>Created</div>
-        <div>{registrationDate}</div>
-      </div>
+      {organization.data?.createdAt && (
+        <div className="flex gap-2 w-full justify-between">
+          <div>Created</div>
+          <div>{organization.data?.createdAt}</div>
+        </div>
+      )}
     </div>
   );
 };

web/libs/core/src/types/user.ts

@@ -9,6 +9,10 @@ export type APIUser = {
   initials: string;
   phone: string;
   active_organization: number;
+  active_organization_meta: {
+    title: string;
+    email: string;
+  };
   allow_newsletters: boolean;
   date_joined: string;
 };