[front] - chore: upgrade Checkbox (dust-tt#8005)

* [front/components] - refactor: standardize checkbox component integration - Replace string literals for checkbox states with a structured CheckboxStatus object to improve code clarity and consistency - Update Checkbox component usage across various components to align with the new CheckboxStatus implementation [front/package] - fix: update @dust-tt/sparkle dependency to latest version - Ensure compatibility with new CheckboxStatus structure by updating the @dust-tt/sparkle dependency to the latest RC version - Include updates to related checkbox components from @radix-ui/react-checkbox to maintain alignment with dependency changes * [front] - refactor: replace PokeCheckbox with Checkbox from sparkle library - PokeCheckbox has been replaced with Checkbox across different components for consistency - Import of PokeCheckbox has been removed as it's no longer used * [front/components/poke/plans] - refactor: reorder imports in createPlan component - Adjust the order of component imports to follow convention [misc] - remove: delete obsolete checkbox component - Remove the PokeCheckbox component as it's no longer in use * [front] - fix: correct event handler for Checkbox component in form - Replace `onChange` with `onCheckedChange` to correctly handle state changes when checkboxes are toggled in the editing plan form * [front] - fix: ensure proper state update on selection change in tree - Replace direct state manipulation with controlled component behavior when a tree item is checked - Resolve issue with partial selection state not updating correctly upon user interaction * [front] - refactor: streamline checkbox component interface and usage - Replaced individual checked and onChange props with defaultChecked and onCheckedChange for Checkbox components across various modules - Simplified getCheckedState function in ContentNodeTree.tsx by returning a string state instead of an object with boolean flags - Adjusted logic handling the checked state of tree items to accommodate the new return type of getCheckedState function - Ensured consistent behavior of checkbox components and their interaction within the application's various features * [front/components] - refactor: standardize checkbox checked state representation - Replace the mixed usage of "checked", "unchecked", and "partial" string literals with booleans and a "partial" string where necessary - Simplify the logic in various components to work with the standardized state representation [front] - fix: correct spacing in import statement in createPlan.tsx - Ensure consistent code style by fixing the spacing between imported components [front] - devops: update @dust-tt/sparkle package to version 0.2.266-rc-2 - Bump the version of @dust-tt/sparkle to incorporate the latest changes and fixes in the project dependencies * [front] - fix: use controlled component pattern for checkboxes - Changed Checkbox components from uncontrolled to controlled by using the `checked` prop instead of `defaultChecked` - Ensures the Checkbox components properly react to state changes for consistent user experience across the application * [front] - feature: upgrade @dust-tt/sparkle to version 0.2.267 - Update the @dust-tt/sparkle package from a release candidate to the stable version - Resolve package-lock.json to point to the new version with updated integrity checksums --------- Co-authored-by: Jules <[email protected]>
SearchApi · Oct 14, 2024 · edb7592 · edb7592
1 parent a752b4d
commit edb7592
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 78 deletions.
diff --git a/front/components/ContentNodeTree.tsx b/front/components/ContentNodeTree.tsx
@@ -122,18 +122,18 @@ function ContentNodeTreeChildren({
   const getCheckedState = useCallback(
     (node: BaseContentNode) => {
       if (!selectedNodes) {
-        return "unchecked";
+        return false;
       }
 
       // If the parent is selected, the node is considered selected.
       if (parentIsSelected) {
-        return "checked";
+        return true;
       }
 
       // Check if there is a local state for this node.
       const localState = selectedNodes[node.internalId];
       if (localState?.isSelected) {
-        return "checked";
+        return true;
       }
 
       const internalPartiallySelectedId = Object.values(selectedNodes)
@@ -144,7 +144,7 @@ function ContentNodeTreeChildren({
       }
 
       // Return false if no custom function is provided.
-      return "unchecked";
+      return false;
     },
     [parentIsSelected, selectedNodes]
   );
@@ -165,7 +165,6 @@ function ContentNodeTreeChildren({
 
       {filteredNodes.map((n, i) => {
         const checkedState = getCheckedState(n);
-
         return (
           <Tree.Item
             key={n.internalId}
@@ -179,7 +178,7 @@ function ContentNodeTreeChildren({
                 ? {
                     disabled: parentIsSelected || !setSelectedNodes,
                     checked: checkedState,
-                    onChange: (checked) => {
+                    onCheckedChange: (v) => {
                       if (setSelectedNodes) {
                         if (checkedState === "partial") {
                           // Handle clicking on partial : unselect all selected children
@@ -190,9 +189,9 @@ function ContentNodeTreeChildren({
                           setSelectedNodes((prev) => ({
                             ...prev,
                             [n.internalId]: {
-                              isSelected: checked,
+                              isSelected: !!v,
                               node: n,
-                              parents: checked ? parentIds : [],
+                              parents: v ? parentIds : [],
                             },
                           }));
                         }
@@ -253,7 +252,7 @@ function ContentNodeTreeChildren({
                 depth={depth + 1}
                 parentId={n.internalId}
                 parentIds={[n.internalId, ...parentIds]}
-                parentIsSelected={getCheckedState(n) === "checked"}
+                parentIsSelected={getCheckedState(n) === true}
               />
             )}
           />

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -298,13 +298,10 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                                 isMultiSelect
                                   ? () => (
                                       <Checkbox
-                                        variant="checkable"
-                                        checked={
-                                          selectedConversations.includes(c)
-                                            ? "checked"
-                                            : "unchecked"
-                                        }
-                                        onChange={() =>
+                                        checked={selectedConversations.includes(
+                                          c
+                                        )}
+                                        onCheckedChange={() =>
                                           toggleConversationSelection(c)
                                         }
                                       />

diff --git a/front/components/assistant_builder/ActionsScreen.tsx b/front/components/assistant_builder/ActionsScreen.tsx
@@ -1094,9 +1094,8 @@ function Capabilities({
     return (
       <div className="flex flex-row gap-2">
         <Checkbox
-          checked={enabled ? "checked" : "unchecked"}
-          onChange={enabled ? onDisable : onEnable}
-          variant="checkable"
+          checked={enabled}
+          onCheckedChange={enabled ? onDisable : onEnable}
         />
         <div>
           <div className="flex text-base font-semibold text-element-900">

diff --git a/front/components/assistant_builder/vaults/VaultSelector.tsx b/front/components/assistant_builder/vaults/VaultSelector.tsx
@@ -63,9 +63,8 @@ export function VaultSelector({
               }}
             >
               <Checkbox
-                variant="checkable"
-                checked={isChecked ? "checked" : "unchecked"}
-                onChange={() => {
+                checked={isChecked}
+                onCheckedChange={() => {
                   if (!isDisabled) {
                     setSelectedVault(isChecked ? "" : vault.sId);
                   }

diff --git a/front/components/data_source_view/DataSourceViewSelector.tsx b/front/components/data_source_view/DataSourceViewSelector.tsx
@@ -391,10 +391,10 @@ export function DataSourceViewSelector({
   const isPartiallyChecked = internalIds.length > 0;
 
   const checkedStatus = selectionConfiguration.isSelectAll
-    ? "checked"
+    ? true
     : isPartiallyChecked
       ? "partial"
-      : "unchecked";
+      : false;
 
   const isTableView = viewType === "tables";
 

diff --git a/front/components/poke/plans/createPlan.tsx b/front/components/poke/plans/createPlan.tsx
@@ -1,5 +1,5 @@
-import { Spinner } from "@dust-tt/sparkle";
 import { Input } from "@dust-tt/sparkle";
+import { Checkbox, Spinner } from "@dust-tt/sparkle";
 import type { CreatePlanFormType, WorkspaceType } from "@dust-tt/types";
 import { CreatePlanFormSchema, removeNulls } from "@dust-tt/types";
 import { ioTsResolver } from "@hookform/resolvers/io-ts";
@@ -10,7 +10,6 @@ import { useForm } from "react-hook-form";
 
 import PokeNavbar from "@app/components/poke/PokeNavbar";
 import { PokeButton } from "@app/components/poke/shadcn/ui/button";
-import { PokeCheckbox } from "@app/components/poke/shadcn/ui/checkbox";
 import {
   PokeForm,
   PokeFormControl,
@@ -283,7 +282,7 @@ function CheckboxField({
         <PokeFormItem>
           <PokeFormLabel className="capitalize">{title ?? name}</PokeFormLabel>
           <PokeFormControl>
-            <PokeCheckbox
+            <Checkbox
               checked={!!field.value}
               onCheckedChange={field.onChange}
             />

diff --git a/front/components/poke/plans/form.tsx b/front/components/poke/plans/form.tsx
@@ -334,12 +334,12 @@ export const Field: React.FC<FieldProps> = ({
       case "boolean":
         const fieldValue =
           editingPlan && isEditing ? editingPlan[fieldName] : plan[fieldName];
-        const checkedStatus = fieldValue ? "checked" : "unchecked";
+        const isChecked = !!fieldValue;
 
         return (
           <Checkbox
-            checked={checkedStatus}
-            onChange={(x) => {
+            checked={isChecked}
+            onCheckedChange={(x) => {
               if (!editingPlan) {
                 return;
               }

diff --git a/front/components/poke/plugins/PluginForm.tsx b/front/components/poke/plugins/PluginForm.tsx
@@ -1,12 +1,12 @@
 import { Input } from "@dust-tt/sparkle";
+import { Checkbox } from "@dust-tt/sparkle";
 import { createIoTsCodecFromArgs } from "@dust-tt/types";
 import { ioTsResolver } from "@hookform/resolvers/io-ts";
 import type * as t from "io-ts";
 import { useMemo } from "react";
 import { useForm } from "react-hook-form";
 
 import { PokeButton } from "@app/components/poke/shadcn/ui/button";
-import { PokeCheckbox } from "@app/components/poke/shadcn/ui/checkbox";
 import {
   PokeForm,
   PokeFormControl,
@@ -97,7 +97,7 @@ export function PluginForm({ manifest, onSubmit }: PluginFormProps) {
                       />
                     )}
                     {arg.type === "boolean" && (
-                      <PokeCheckbox
+                      <Checkbox
                         checked={field.value}
                         onCheckedChange={field.onChange}
                       />

diff --git a/front/components/poke/shadcn/ui/checkbox.tsx b/front/components/poke/shadcn/ui/checkbox.tsx