Merge pull request #1186 from Chia-Network/refactor/glossary-page

feat: add per organization sync status

src/renderer/api/cadt/v1/organizations/organizations.api.ts

@@ -15,11 +15,19 @@ const organizationsApi = cadtApi.injectEndpoints({
       transformResponse(baseQueryReturnValue: BaseQueryResult<any>): any[]{
         return Object.values(baseQueryReturnValue);
       }
+    }),
+    getOrganizationsMap: builder.query({
+      query: () => ({
+        url: `${host}/v1/organizations`,
+        method: 'GET',
+      }),
+      providesTags: [organizationsTag],
     })
   })
 });
 
 
 export const {
-  useGetOrganizationsListQuery
+  useGetOrganizationsListQuery,
+  useGetOrganizationsMapQuery
 } = organizationsApi;

src/renderer/components/blocks/widgets/OrganizationSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { useGetOrganizationsListQuery } from "@/api/cadt/v1/organizations";
-import { Dropdown } from '@/components';
+import { useGetOrganizationsListQuery } from '@/api/cadt/v1/organizations';
+import { Dropdown, SyncIndicator } from '@/components';
 
 interface OrganizationSelectorProps {
   onSelect: (organization: any | undefined) => void;
@@ -13,9 +13,9 @@ const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, d
 
   useEffect(() => {
     if (defaultOrgUid === null) {
-      setSelectedOrganization({ name: "All Organizations" });
+      setSelectedOrganization({ name: 'All Organizations' });
     } else if (defaultOrgUid !== undefined && organizations) {
-      const defaultOrganization = organizations.find(org => org.orgUid === defaultOrgUid);
+      const defaultOrganization = organizations.find((org) => org.orgUid === defaultOrgUid);
       if (defaultOrganization) {
         setSelectedOrganization(defaultOrganization);
       }
@@ -31,27 +31,25 @@ const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, d
   }
 
   const handleSelect = (organization: any | undefined) => {
-    if (!organization) {
-      setSelectedOrganization({ name: "All Organizations" });
-    } else {
-      setSelectedOrganization(organization);
-    }
+    setSelectedOrganization(organization || { name: 'All Organizations' });
     onSelect(organization);
   };
 
   return (
-    <Dropdown label={selectedOrganization ? selectedOrganization.name : "Select Organization"} inline={true}>
+    <Dropdown label={selectedOrganization ? selectedOrganization.name : 'All Organizations'} inline={true}>
       <Dropdown.Item onClick={() => handleSelect(undefined)}>All Organizations</Dropdown.Item>
       {organizations.map((organization) => (
         <Dropdown.Item
           key={organization.orgUid}
           onClick={() => handleSelect(organization)}
+          className="flex justify-between items-center"
         >
-          {organization.name}
+          <span className="mr-2.5">{organization.name}</span>
+          <SyncIndicator orgUid={organization.orgUid} detailed={false} />
         </Dropdown.Item>
       ))}
     </Dropdown>
   );
-}
+};
 
 export { OrganizationSelector };

src/renderer/components/blocks/widgets/SyncIndicator.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useGetOrganizationsMapQuery, useGetOrganizationsListQuery } from '@/api/cadt/v1/organizations';
+
+interface SyncIndicatorProps {
+  detailed: boolean;
+  orgUid?: string;
+}
+
+/**
+ * Component to display sync status indicator.
+ * It shows a green circle if the organization is synced, and a pulsing yellow circle if syncing.
+ * When 'detailed' is true, it also shows a label next to the indicator.
+ * The sync status is determined based on 'orgUid' from the organizations data.
+ */
+const SyncIndicator: React.FC<SyncIndicatorProps> = ({ detailed, orgUid }) => {
+  const { data: organizationsMap } = useGetOrganizationsMapQuery(null, {
+    skip: !orgUid,
+  });
+
+  const { data: organizationList } = useGetOrganizationsListQuery(null, {
+    skip: Boolean(orgUid),
+  });
+
+  let isSynced = false;
+
+  if (!orgUid) {
+    isSynced = !organizationList?.some((org) => !org.synced);
+  } else {
+    isSynced = organizationsMap?.[orgUid]?.synced;
+  }
+
+  return (
+    <div className={`flex items-center space-x-2 ${detailed ? 'p-2 rounded-lg shadow bg-white dark:bg-gray-800' : ''}`}>
+      <div className={`${isSynced ? 'bg-green-500' : 'animate-pulse bg-yellow-500'} h-4 w-4 rounded-full`}></div>
+      {detailed && (
+        <span className={`text-sm ${isSynced ? 'text-green-700' : 'text-yellow-600'}`}>
+          {isSynced ? 'Synced' : 'Syncing...'}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export { SyncIndicator };

src/renderer/components/blocks/widgets/index.ts

@@ -1,2 +1,3 @@
 export * from './SearchBox';
-export * from './OrganizationSelector';
+export * from './OrganizationSelector';
+export * from './SyncIndicator';

src/renderer/pages/ProjectsList/ProjectsList.tsx

@@ -8,6 +8,7 @@ import {
   SkeletonTable,
   ProjectsListTable,
   SearchBox,
+  SyncIndicator
 } from '@/components';
 import {FormattedMessage} from "react-intl";
 
@@ -62,6 +63,7 @@ const ProjectsList: React.FC = () => {
       <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange} />
         <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
+        <SyncIndicator detailed={true} orgUid={orgUid} />
       </div>
 
       {projectsLoading ? (

src/renderer/pages/UnitsList/UnitsList.tsx

@@ -8,6 +8,7 @@ import {
   SkeletonTable,
   SearchBox,
   UnitsListTable,
+  SyncIndicator
 } from '@/components';
 import {FormattedMessage} from "react-intl";
 
@@ -62,6 +63,7 @@ const UnitsList: React.FC = () => {
       <div className="flex flex-col md:flex-row gap-6 pl-1 my-2.5 relative z-30">
         <SearchBox defaultValue={search} onChange={handleSearchChange} />
         <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
+        <SyncIndicator detailed={true} orgUid={orgUid} />
       </div>
 
       {unitsLoading ? (