From 42f77397e3f3c1b80930103bdb697afd98b1161b Mon Sep 17 00:00:00 2001
From: Jules <jules@MacBook-Pro.local>
Date: Thu, 25 Jul 2024 15:28:10 +0200
Subject: [PATCH] [front] - feature: implement partial check state in
 permissions tree

 - Introduce lodash and memoization to determine parents with checked children in the permission tree
 - Modify the permission update logic to support partial checked states based on parent-child relationships
 - Utilize custom hooks to optimize fetching and mapping the required resources for permission states
---
 front/components/ConnectorPermissionsTree.tsx | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/front/components/ConnectorPermissionsTree.tsx b/front/components/ConnectorPermissionsTree.tsx
index 2c0ac878aea2..aa01e91314f4 100644
--- a/front/components/ConnectorPermissionsTree.tsx
+++ b/front/components/ConnectorPermissionsTree.tsx
@@ -14,9 +14,11 @@ import type {
   WorkspaceType,
 } from "@dust-tt/types";
 import type { ConnectorPermission } from "@dust-tt/types";
-import { useState } from "react";
+import _ from "lodash";
+import { useMemo, useState } from "react";
 
 import ManagedDataSourceDocumentModal from "@app/components/ManagedDataSourceDocumentModal";
+import { useParentResourcesById } from "@app/hooks/useParentResourcesById";
 import { useConnectorPermissions } from "@app/lib/swr";
 import { classNames, timeAgoFrom } from "@app/lib/utils";
 
@@ -93,6 +95,28 @@ export function PermissionTreeChildren({
       parentId,
       filterPermission: permissionFilter || null,
     });
+
+  const { resources: selectedResources } = useConnectorPermissionsHook({
+    owner,
+    dataSource,
+    parentId: null,
+    filterPermission: "read",
+  });
+
+  const { parentsById } = useParentResourcesById({
+    owner,
+    dataSource,
+    selectedResources,
+  });
+
+  const parentsWithCheckedChildren = useMemo(() => {
+    return _.chain(parentsById)
+      .values()
+      .flatMap((set) => Array.from(set))
+      .uniq()
+      .value();
+  }, [parentsById]);
+
   const [localStateByInternalId, setLocalStateByInternalId] = useState<
     Record<string, boolean>
   >({});
@@ -163,6 +187,10 @@ export function PermissionTreeChildren({
       )}
       <Tree isLoading={isResourcesLoading}>
         {resourcesFiltered.map((r, i) => {
+          const isChecked =
+            parentIsSelected ||
+            (localStateByInternalId[r.internalId] ??
+              ["read", "read_write"].includes(r.permission));
           return (
             <Tree.Item
               key={r.internalId}
@@ -176,10 +204,10 @@ export function PermissionTreeChildren({
                 onPermissionUpdate
                   ? {
                       disabled: parentIsSelected,
-                      checked:
-                        parentIsSelected ||
-                        (localStateByInternalId[r.internalId] ??
-                          ["read", "read_write"].includes(r.permission)),
+                      partialChecked:
+                        !isChecked &&
+                        parentsWithCheckedChildren.includes(r.internalId),
+                      checked: isChecked,
                       onChange: (checked) => {
                         setLocalStateByInternalId((prev) => ({
                           ...prev,