Skip to content

Commit

Permalink
[front] - feature: implement partial check state in permissions tree
Browse files Browse the repository at this point in the history
 - 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
  • Loading branch information
Jules authored and Jules committed Jul 25, 2024
1 parent 6f4319a commit 42f7739
Showing 1 changed file with 33 additions and 5 deletions.
38 changes: 33 additions & 5 deletions front/components/ConnectorPermissionsTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
>({});
Expand Down Expand Up @@ -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}
Expand All @@ -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,
Expand Down

0 comments on commit 42f7739

Please sign in to comment.