change(ui): projects revamp - sync projects in list

frontend/app/components/Client/Projects/ProjectCaptureRate.tsx

@@ -40,7 +40,7 @@ function ProjectCaptureRate(props: Props) {
     }
   }, [projectId]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setConditions(captureConditions.map((condition: any) => new Conditions(condition, true, isMobile)));
   }, [captureConditions]);
 

frontend/app/components/Client/Projects/Projects.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { App, Button, Card, Layout, Space, Typography } from 'antd';
+import { App, Button, Card, Layout, Space, Tooltip, Typography } from 'antd';
 import ProjectList from 'Components/Client/Projects/ProjectList';
 import ProjectTabs from 'Components/Client/Projects/ProjectTabs';
 import { useHistory } from 'react-router-dom';
@@ -52,7 +52,7 @@ function Projects() {
       }}
       title="Projects"
       extra={[
-        <Button key="1" onClick={createProject} icon={<PlusIcon />}>
+        <Button onClick={createProject} icon={<PlusIcon size={18} />}>
           Create Project
         </Button>
       ]}
@@ -68,8 +68,10 @@ function Projects() {
                          style={{ height: 46 }}>
             <div className="flex items-center gap-4">
               <Typography.Title level={5}
-                                className="capitalize !m-0 whitespace-nowrap truncate">{project?.name}</Typography.Title>
-              <ProjectKeyButton />
+                                className="capitalize !m-0 whitespace-nowrap truncate">
+                {project?.name}
+              </Typography.Title>
+              <ProjectKeyButton project={project} />
             </div>
             <ProjectTabs />
           </Layout.Header>
@@ -90,9 +92,7 @@ function Projects() {
 
 export default observer(Projects);
 
-function ProjectKeyButton() {
-  const { projectsStore } = useStore();
-  const { project } = projectsStore.config;
+function ProjectKeyButton({ project }: { project: Project | null }) {
   const { message } = App.useApp();
 
   const copyKey = () => {
@@ -105,6 +105,8 @@ function ProjectKeyButton() {
   };
 
   return (
-    <Button onClick={copyKey} icon={<KeyIcon size={14} />} size="small" />
+    <Tooltip title="Copy Project Key">
+      <Button onClick={copyKey} icon={<KeyIcon size={14} />} size="small" />
+    </Tooltip>
   );
 }

frontend/app/components/Client/Projects/TagForm.tsx

@@ -33,9 +33,13 @@ function TagForm(props: Props) {
 
   const onSave = async () => {
     setLoading(true);
-    tagWatchStore.updateTagName(tag.tagId, name, projectId).finally(() => {
-      setLoading(false);
-    });
+    tagWatchStore.updateTagName(tag.tagId, name, projectId)
+      .then(() => {
+        closeModal();
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   return (

frontend/app/mstore/projectsStore.ts

@@ -34,6 +34,13 @@ export default class ProjectsStore {
     return this.active ? ['ios', 'android'].includes(this.active.platform) : false;
   }
 
+  syncProjectInList = (project: Partial<Project>) => {
+    const index = this.list.findIndex(site => site.id === project.id);
+    if (index !== -1) {
+      this.list[index] = this.list[index].edit(project);
+    }
+  }
+
   getSiteId = () => {
     return {
       siteId: this.siteId,
@@ -89,6 +96,15 @@ export default class ProjectsStore {
       const gdprData = this.instance.gdpr.toData();
       const response = await projectsService.saveGDPR(siteId, gdprData);
       this.editGDPR(response.data);
+
+      try {
+        this.syncProjectInList({
+          id: siteId,
+          gdpr: response.data
+        })
+      } catch (error) {
+        console.error('Failed to sync project in list:', error);
+      }
     } catch (error) {
       console.error('Failed to save GDPR:', error);
     }

frontend/app/mstore/settingsStore.ts

@@ -6,6 +6,7 @@ import Webhook, { IWebhook } from 'Types/webhook';
 import { webhookService } from 'App/services';
 import { GettingStarted } from './types/gettingStarted';
 import { MENU_COLLAPSED } from 'App/constants/storageKeys';
+import { projectStore } from '@/mstore/index';
 
 interface CaptureConditions {
   rate: number;
@@ -102,6 +103,15 @@ export default class SettingsStore {
           conditionalCapture: data.conditionalCapture,
           captureConditions: data.conditions,
         });
+
+        try {
+          projectStore.syncProjectInList({
+            id: projectId + '',
+            sampleRate: data.rate,
+          })
+        } catch (e) {
+          console.error('Failed to update project in list:', e);
+        }
         toast.success('Settings updated successfully');
       })
       .catch((err) => {