The checkbox 'select all' to export all flows is not reseted when you navigate away from the previous folder

[appoks]

Bug Description

When you try to export all flows from a project/folder, if you navigate to another folder, the selection is reseted but the 'selected all' checkbox maintain it's value.

Not a major issue, just an UX enhancement.

#iadevs

Reproduction

1. Go to your langflow app
2. Select a folder (or the default one)
3. Click on the 'select all' checbox. All the flows should be selected.
4. Navigate to another folder.
5. Go back to the previous folder you clicked on 'selected all'.
6. The flows now are not selected
7. The "select all" will still be checked.

Actually the select all will be checkedin even if you go to other folders.
Not sure of the python version, but I'm using the latest official docker image.

Expected behavior

The "Select All" should be unmarked when the flows became unselected.

Who can help?

No response

Operating System

Manjaro, using Docker official image.

Langflow Version

1.0.14

Python Version

None

Screenshot

2024-08-04.20-22-25.mp4

Flow File

No response

[dosubot]

To ensure that the "Select All" checkbox in the Langflow app is unchecked when the flows become unselected after navigating to another folder, you can modify the useSelectAll hook to reset the checkbox state when the folder changes. This can be done by adding a dependency on the folder state and ensuring that the handleSelectAll function is called with false when the folder changes.

Here is an updated version of the useSelectAll hook:

import { useCallback, useEffect } from "react";

const useSelectAll = (flowsFromFolder, getValues, setValue, currentFolder) => {
  const handleSelectAll = useCallback(
    (select) => {
      const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
      if (select) {
        Object.keys(getValues()).forEach((key) => {
          if (!flowsFromFolderIds?.includes(key)) return;
          setValue(key, true);
        });
        return;
      }

      Object.keys(getValues()).forEach((key) => {
        setValue(key, false);
      });
    },
    [flowsFromFolder, getValues, setValue]
  );

  useEffect(() => {
    // Uncheck "Select All" when the folder changes
    handleSelectAll(false);
  }, [currentFolder, handleSelectAll]);

  return { handleSelectAll };
};

export default useSelectAll;

Additionally, ensure that the handleSelectAll(false) function is called in the useEffect hook within the Page component when the location changes:

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const Page = ({ flow, view }) => {
  const location = useLocation();
  const { handleSelectAll } = useSelectAll(flowsFromFolder, getValues, setValue, currentFolder);

  useEffect(() => {
    setFolderUrl(folderId ?? "");
    setSelectedFlowsComponentsCards([]);
    handleSelectAll(false);
    getFolderById(folderId ? folderId : myCollectionId);
  }, [location, handleSelectAll]);

  // ... rest of the component code
};

In this updated version, the useEffect hook is used to call handleSelectAll(false) whenever the location changes, ensuring that the "Select All" checkbox is unchecked when navigating to another folder ^[1][2][3].

To continue talking to Dosu, mention @dosu.