Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add hover state on folder button when moving flow to it #4999

Merged
merged 9 commits into from
Dec 4, 2024

Conversation

Cristhianzl
Copy link
Member

This pull request makes several changes to the SideBarFoldersButtonsComponent in the index.tsx file to improve the component's functionality and readability. The most important changes include reordering the hooks and state variables, adding new hooks for folder operations, and updating the component's class names for better folder interaction.

Reordering and Grouping Hooks and State Variables:

  • Reordered the hooks and state variables for better readability and logical grouping.

Adding New Hooks for Folder Operations:

  • Added hooks for folder operations such as useGetDownloadFolders, usePostFolders, and usePatchFolders. [1] [2] [3]

Updating Class Names for Folder Interaction:

  • Updated class names in the component to handle folder hovering and active states using the checkHoveringFolder and checkPathName methods. [1] [2]

These changes enhance the component's structure, making it easier to manage folder operations and improving user interaction with the sidebar folders.

…e readability and maintainability. Add new functionalities such as drag and drop, folder hovering effects, and folder actions like upload, download, add, update, and delete. Update folder state management and handle loading states for various folder operations.
@Cristhianzl Cristhianzl self-assigned this Dec 2, 2024
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. enhancement New feature or request labels Dec 2, 2024
@github-actions github-actions bot added bug Something isn't working and removed enhancement New feature or request labels Dec 2, 2024
…the sidebar

✨ (folder-select-item.tsx): Add a new component for displaying folder select items in the sidebar
✨ (header-buttons.tsx): Add a new component for displaying header buttons in the sidebar
✨ (input-edit-folder-name.tsx): Add a new component for editing folder names in the sidebar
✨ (select-options.tsx): Add a new component for displaying select options in the sidebar
✨ (upload-folder-button.tsx): Add a new component for uploading folders to the sidebar
✨ (handle-select-change.ts): Add a new helper function for handling select changes in the sidebar
🔧 (index.tsx): Refactor sidebar folder buttons component to use new components and helpers for better organization and functionality
Copy link
Collaborator

@lucaseduoli lucaseduoli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flows losing description when moving from folder to another

…ecific to the current folder in the file drop functionality

📝 (use-get-folder.ts): update the get folder query to set and use flows specific to the current folder
📝 (foldersStore.tsx): add state management for storing and setting flows specific to the current folder in the store
📝 (index.ts): add FlowType import for flows specific to the current folder in the store types
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Dec 3, 2024
@Cristhianzl
Copy link
Member Author

Flows losing description when moving from folder to another

please, check again!

@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Dec 4, 2024
Copy link
Collaborator

@lucaseduoli lucaseduoli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think it would be better to not use one more state on useFolderStore for that, and just filter the flows by folder id equal to the one that we want

Copy link
Collaborator

@lucaseduoli lucaseduoli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Dec 4, 2024
…ad_flows function for better data representation

♻️ (use-on-file-drop.tsx): Refactor code to use new centralized store for flows instead of accessing flowsFromCurrentFolder directly
🔧 (use-get-folder.ts): Remove setFlowsFromCurrentFolder function and directly update flows in the store within getFolderFn
🔧 (foldersStore.tsx): Remove flowsFromCurrentFolder state and setFlowsFromCurrentFolder function from the store as they are no longer needed
@Cristhianzl Cristhianzl enabled auto-merge (squash) December 4, 2024 20:57
@Cristhianzl Cristhianzl merged commit 6c5c646 into main Dec 4, 2024
31 checks passed
@Cristhianzl Cristhianzl deleted the cz/add-folders-hover branch December 4, 2024 21:06
Copy link

codspeed-hq bot commented Dec 4, 2024

CodSpeed Performance Report

Merging #4999 will degrade performances by 95%

Comparing cz/add-folders-hover (b0be054) with main (2c56177)

Summary

⚡ 1 improvements
❌ 2 regressions
✅ 12 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

Benchmark main cz/add-folders-hover Change
test_successful_run_with_input_type_text 193.8 ms 163.3 ms +18.72%
test_successful_run_with_output_type_any 267.6 ms 5,350.2 ms -95%
test_successful_run_with_output_type_debug 163.2 ms 252.2 ms -35.31%

lucaseduoli pushed a commit that referenced this pull request Dec 5, 2024
* ✨ (index.tsx): Refactor SideBarFoldersButtonsComponent to improve code readability and maintainability. Add new functionalities such as drag and drop, folder hovering effects, and folder actions like upload, download, add, update, and delete. Update folder state management and handle loading states for various folder operations.

* ✨ (add-folder-button.tsx): Add a new component for adding folders to the sidebar
✨ (folder-select-item.tsx): Add a new component for displaying folder select items in the sidebar
✨ (header-buttons.tsx): Add a new component for displaying header buttons in the sidebar
✨ (input-edit-folder-name.tsx): Add a new component for editing folder names in the sidebar
✨ (select-options.tsx): Add a new component for displaying select options in the sidebar
✨ (upload-folder-button.tsx): Add a new component for uploading folders to the sidebar
✨ (handle-select-change.ts): Add a new helper function for handling select changes in the sidebar
🔧 (index.tsx): Refactor sidebar folder buttons component to use new components and helpers for better organization and functionality

* ✨ (use-on-file-drop.tsx): add support for fetching and using flows specific to the current folder in the file drop functionality
📝 (use-get-folder.ts): update the get folder query to set and use flows specific to the current folder
📝 (foldersStore.tsx): add state management for storing and setting flows specific to the current folder in the store
📝 (index.ts): add FlowType import for flows specific to the current folder in the store types

* ✨ (flows.py): Add description field to the returned flow object in read_flows function for better data representation
♻️ (use-on-file-drop.tsx): Refactor code to use new centralized store for flows instead of accessing flowsFromCurrentFolder directly
🔧 (use-get-folder.ts): Remove setFlowsFromCurrentFolder function and directly update flows in the store within getFolderFn
🔧 (foldersStore.tsx): Remove flowsFromCurrentFolder state and setFlowsFromCurrentFolder function from the store as they are no longer needed
lucaseduoli added a commit that referenced this pull request Dec 5, 2024
* Changed Advanced Settings to Controls and implemented DisplayName on shortcuts

* fix: validate 'streaming' vertex connections in graph (#5067)

* feat: Table Input for tools metadata (tool name and description) in component as tools  (#4961)

* ✨ (endpoints.py): Add support for tool_mode field in custom component update
🔧 (schemas.py): Add tool_mode field to UpdateCustomComponentRequest schema
♻️ (component.py): Refactor run_and_validate_update_outputs method to handle tool_mode field
🔧 (index.tsx): Add tool_mode property to NodeInputField component
🔧 (index.tsx): Refactor hasToolMode logic to use checkHasToolMode utility function
🔧 (mutate-template.ts): Add callback parameter to mutateTemplate function
🔧 (use-handle-new-value.tsx): Add tool_mode property to useHandleOnNewValue hook
🔧 (popover/index.tsx): Add console.log for placeholder, value, and id
🔧 (inputGlobalComponent/index.tsx): Add tool_mode property to InputGlobalComponent
🔧 (refreshParameterComponent/index.tsx): Add tool_mode property to RefreshParameterComponent
🔧 (use-post-template-value.ts): Add tool_mode parameter to usePostTemplateValue function
🔧 (nodeToolbarComponent/index.tsx): Add support for tool_mode functionality in NodeToolbarComponent
🔧 (reactflowUtils.ts): Add checkHasToolMode utility function to check for tool_mode field in template

* fix: Set default value for tool_mode in UpdateCustomComponentRequest schema

* adding table input in tool mode

adding table input

* Update component.py

update real-time refresh

* added dynamic tool description input

added dynamic tool description input

* [autofix.ci] apply automated fixes

* Update component.py

simplifying the tool mode logic

* Update component_tool.py

updated logic to be more readable

* Update component.py

* adding tool table schema as constant

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* fix: update drag and drop test (#5048)

* refactor: Improve wait time for modal in drag and drop test

* ✨ (dragAndDrop.spec.ts): update file path to read collection.json from the correct location
🐛 (dragAndDrop.spec.ts): increase timeout for waiting for "uploaded successfully" text to prevent test failures

* ✨ (dragAndDrop.spec.ts): Add tests for drag and drop functionality to ensure users can drag and drop collections and flows without crashing the application
📝 (simulate-drag-and-drop.ts): Add utility function to simulate drag and drop events in tests for improved test coverage and functionality

* add debouncing time on file upload

* [autofix.ci] apply automated fixes

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* fix: add hover state on folder button when moving flow to it (#4999)

* ✨ (index.tsx): Refactor SideBarFoldersButtonsComponent to improve code readability and maintainability. Add new functionalities such as drag and drop, folder hovering effects, and folder actions like upload, download, add, update, and delete. Update folder state management and handle loading states for various folder operations.

* ✨ (add-folder-button.tsx): Add a new component for adding folders to the sidebar
✨ (folder-select-item.tsx): Add a new component for displaying folder select items in the sidebar
✨ (header-buttons.tsx): Add a new component for displaying header buttons in the sidebar
✨ (input-edit-folder-name.tsx): Add a new component for editing folder names in the sidebar
✨ (select-options.tsx): Add a new component for displaying select options in the sidebar
✨ (upload-folder-button.tsx): Add a new component for uploading folders to the sidebar
✨ (handle-select-change.ts): Add a new helper function for handling select changes in the sidebar
🔧 (index.tsx): Refactor sidebar folder buttons component to use new components and helpers for better organization and functionality

* ✨ (use-on-file-drop.tsx): add support for fetching and using flows specific to the current folder in the file drop functionality
📝 (use-get-folder.ts): update the get folder query to set and use flows specific to the current folder
📝 (foldersStore.tsx): add state management for storing and setting flows specific to the current folder in the store
📝 (index.ts): add FlowType import for flows specific to the current folder in the store types

* ✨ (flows.py): Add description field to the returned flow object in read_flows function for better data representation
♻️ (use-on-file-drop.tsx): Refactor code to use new centralized store for flows instead of accessing flowsFromCurrentFolder directly
🔧 (use-get-folder.ts): Remove setFlowsFromCurrentFolder function and directly update flows in the store within getFolderFn
🔧 (foldersStore.tsx): Remove flowsFromCurrentFolder state and setFlowsFromCurrentFolder function from the store as they are no longer needed

* fix: Fix test_get_and_cache_all_types_dict (#5054)

* fix: add condition to not block component from building when input is filled by tool mode (#5039)

Fixed frontend blocking build when component is disabled because of tool mode

* feat: Enhance Observability with ArizePhoenixTracer Integration (#5058)

* Added ArizePhoenixTracer

* [autofix.ci] apply automated fixes

* Fixed Ruff Style Check Errors

* add Arize icon

* Fixed Mypy Errors

* Refactor ArizeIcon component to use arrow function syntax

Co-authored-by: Jeff Carpenter <jeffrey.carpenter@datastax.com>
Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>

* refactor: Remove footer from TableModal component (#5036)

* Refactor: update curlApiGeneration test (#5046)

refactor: Update wait time for modal to appear in curlApiGeneration.spec.ts

* Refactor: Remove unnecessary value rendering in EmptyParameterComponent (#4955)

* feat: Persist locked state for flows (#4459)

* persist locked state for flows

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* 📝 (popover.tsx): Remove duplicate declaration of PopoverAnchor in popover.tsx
✨ (lock-flow.spec.ts): Add test for locking and unlocking a flow in the application to ensure proper functionality and saving of the flow.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

* Refactor actionsMainPage-shard-0.spec.ts (#5043)

* refactor: Add missing import and update assertions in actionsMainPage-shard-0.spec.ts

* refactor: Adjust chat view layout for responsiveness (#5061)

* refactor: Adjust chat view layout for responsiveness

The code changes in this commit adjust the layout of the chat view component to improve responsiveness. Specifically, the CSS classes for the chat container and input container have been modified to make them responsive on different screen sizes. This ensures that the chat view is displayed properly on both desktop and mobile devices.

Refactoring the layout in this way enhances the user experience by making the chat view more accessible and user-friendly across different devices.

* fix: Fix: improve error in InputFileComponent when displaying invalid file types (#5064)

* fix: Fix error in InputFileComponent when displaying invalid file types

The code changes in this commit fix an issue in the InputFileComponent where an error was not being displayed correctly when the file type was not allowed. The commit adds a fix to properly display the error message with the list of invalid file types.

* refactor: Improve wait times and visibility checks in auto-save-off tests (#5044)

* refactor: Improve wait times and visibility checks in auto-save-off tests

* Refactor: refactor wait times and selectors in filterEdge-shard-1.spec.ts (#5049)

* refactor: Update wait times and selectors in filterEdge-shard-1.spec.ts

* Refactor: update autoLogin.spec.ts to use waitForSelector (#5045)

refactor: Update autoLogin.spec.ts to use waitForSelector instead of waitForTimeout

* feat: improve whitespace handling in NodeDescription component (#5096)

* 📝 (NodeDescription/index.tsx): update CSS classes to improve text formatting and readability in NodeDescription component

* ♻️ (NodeDescription/index.tsx): refactor NodeDescription component styles to improve readability and remove redundant classnames

* refactor: use Inspector for column checks in locked state migration (#5097)

🐛 (add_persistent_locked_state.py): fix migration script to correctly check for existing 'locked' column before adding or dropping it

* fix: changed parameter name of agent component (#4992)

* Changed Add tool Current Date to only Current Date

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* fix: re-activated playground page and made it full screen (#5066)

* Re-activated playground page

* Added full-screen to show entire content instead of modal

* Added full screen page on new Modal

* Made app wrapper page be full width and height

* fix: apply variables to fields automatically, remove password truncation from variable fields (#5031)

* Change default type to be Credential on Global Variabel Modal

* Removed clipping on input password

* Updated StrRenderComponent to receive display_name

* Updated InputGlobal and StrRender to receive display_name

* Update InputGlobalComponent to handle fields already applied

* Passed display name from strRender to inputglobal

* Update updateGroupRecursion to not need updateGlobalVariables since it's already dealt with by the InputGlobalComponent

* fix: clear chat input when sending from play button (#5071)

Fix newChatView to clear chat input if the component runs before

---------

Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com>
Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Christophe Bornet <cbornet@hotmail.com>
Co-authored-by: Ali Saleh <saleh.a@turing.com>
Co-authored-by: Jeff Carpenter <jeffrey.carpenter@datastax.com>
Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working lgtm This PR has been approved by a maintainer size:S This PR changes 10-29 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants