791: improved handling of all checkbox between searches

Infisical · Mar 15, 2024 · 6909c25 · 6909c25
1 parent 112130f
commit 6909c25
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/...Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddProjectModal.tsx b/...Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddProjectModal.tsx
@@ -107,7 +107,7 @@ export const AddProjectModal = ({ popUp, handlePopUpToggle, handlePopUpClose }:
                 <FormControl label="Projects" isError={Boolean(error)} errorText={error?.message}>
                   <ProjectsTable
                     projects={[...filteredProjects]}
-                    checkedProjects={field.value}
+                    preservedCheckedProjects={field.value}
                     setCheckedProjects={(newValue) => field.onChange(newValue)}
                     searchValue={searchValue}
                     setSearchValue={setSearchValue}

diff --git a/...age/components/OrgMembersTab/components/OrgMembersSection/projectsTable/ProjectsTable.tsx b/...age/components/OrgMembersTab/components/OrgMembersSection/projectsTable/ProjectsTable.tsx
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FC } from "react";
+import { ChangeEventHandler, FC, useMemo } from "react";
 import { faProjectDiagram } from "@fortawesome/free-solid-svg-icons";
 
 import {
@@ -25,11 +25,20 @@ import SearchProjects from "./SearchProjects";
 
 const ProjectsTable: FC<ProjectsTableProps> = ({
   projects,
-  checkedProjects,
+  preservedCheckedProjects,
   setCheckedProjects,
   searchValue,
   setSearchValue
 }) => {
+  const checkedProjects = useMemo(() => {
+    const newState: CheckedProjectsMap = {};
+    projects.forEach((project) => {
+      newState[project.id] = preservedCheckedProjects[project.id];
+    });
+    newState[CheckboxKeys.ALL] = preservedCheckedProjects[CheckboxKeys.ALL];
+    return newState;
+  }, [preservedCheckedProjects]);
+
   const onSearch: ChangeEventHandler<HTMLInputElement> = (e) => {
     const { value } = e.target;
 
@@ -107,7 +116,7 @@ const ProjectsTable: FC<ProjectsTableProps> = ({
         </Table>
         {projects?.length === 0 && <EmptyState title="No projects found" icon={faProjectDiagram} />}
       </TableContainer>
-      <NumOfCheckedProjects checkedProjects={checkedProjects} />
+      <NumOfCheckedProjects checkedProjects={preservedCheckedProjects} />
     </div>
   );
 };

diff --git a/...ge/components/OrgMembersTab/components/OrgMembersSection/projectsTable/monitorCheckAll.ts b/...ge/components/OrgMembersTab/components/OrgMembersSection/projectsTable/monitorCheckAll.ts
@@ -2,6 +2,7 @@ import { CheckboxKeys, CheckedProjectsMap } from "../types";
 
 const monitorCheckAll = ({ state }: { state: CheckedProjectsMap }): CheckedProjectsMap => {
   const newState = { ...state };
+
   // check if all projects are enabled to check all checkbox programmatically
   const { [CheckboxKeys.ALL]: all, ...projects } = newState;
   const numOfProjects = Object.keys(projects).length;

diff --git a/.../src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/types.ts b/.../src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/types.ts
@@ -12,7 +12,7 @@ export type CheckedProjectsMap = Record<string, boolean>;
 
 export type ProjectsTableProps = {
   projects: ProjectProps[];
-  checkedProjects: CheckedProjectsMap;
+  preservedCheckedProjects: CheckedProjectsMap;
   setCheckedProjects: (value: CheckedProjectsMap) => void;
   searchValue: string;
   setSearchValue: (value: string) => void;