feat: allow flow name to be edited from the main page or by clicking header #5525
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
size:L
github-actions
bot
added
enhancement
Cristhianzl
reviewed
Jan 3, 2025
src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
Outdated
Show resolved
Hide resolved
src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
Outdated
Show resolved
Hide resolved
src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
Outdated
Show resolved
Hide resolved
anovazzi1
requested changes
Jan 3, 2025
…/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]>
…/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]>
…/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]>
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
ogabrielluiz
changed the title
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
anovazzi1
previously requested changes
Jan 6, 2025
… input element for flow name for testing purposes ✨ (edit-flow-name.spec.ts): create test to ensure user can edit flow name by clicking on the header or main page, with various random names generated for testing purposes
dosubot
bot
added
size:XL
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
mieslep
pushed a commit
to mieslep/langflow
that referenced
this pull request
Jan 15, 2025
…header (langflow-ai#5525) * Added flowData to allow changing flow name without being on the flow * Added being able to edit the flow name just by clicking the name * Added handleEdit and edit details option on flow dropdown * Added flow settings modal to grid and list * Added flowData type and select option * Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]> * Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]> * Update src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx Co-authored-by: Cristhian Zanforlin Lousa <[email protected]> * Fixed useCallback import * Implemented details boolean to not show endpoint, changed title of flow settings modal * Changed Flow Settings to Edit Details * Changed Flow Settings modal description * Fixed empty name not appearing, fixed naming conditions not considered * 📝 (editFlowSettingsComponent/index.tsx): add data-testid attribute to input element for flow name for testing purposes ✨ (edit-flow-name.spec.ts): create test to ensure user can edit flow name by clicking on the header or main page, with various random names generated for testing purposes * Fixed tests that used Flow Settings * Fixed tests that rely on flow name to open edit details * Fixed tests --------- Co-authored-by: Cristhian Zanforlin Lousa <[email protected]> Co-authored-by: anovazzi1 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several enhancements and new features to the flow management components in the frontend. The key changes include the addition of an inline flow name editing feature, improvements to the flow settings modal, and updates to the dropdown component to support editing flow details.
Inline Flow Name Editing:
MenuBarcomponent. This includes the use ofuseEffect,useState,useRef, and event handlers for input changes and key events. (src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx) [1] [2] [3] [4] [5] [6] [7] [8]Flow Settings Modal Enhancements:
FlowSettingsModalcomponent to acceptflowDataas a prop and updated the state initialization and handlers to use this prop. This allows the modal to be reused with different flow data. (src/frontend/src/modals/flowSettingsModal/index.tsx) [1] [2]Dropdown Component Updates:
handleEditprop to theDropdownComponentand updated theuseSelectOptionsChangehook to handle the "edit" action. This enables the dropdown menu to trigger the flow settings modal for editing flow details. (src/frontend/src/pages/MainPage/components/dropdown/index.tsx,src/frontend/src/pages/MainPage/hooks/use-select-options-change.tsx) [1] [2] [3] [4] [5]Integration with Grid and List Components:
GridComponentandListComponent. This includes adding state for the modal and passing thehandleEditfunction to the dropdown component. (src/frontend/src/pages/MainPage/components/grid/index.tsx,src/frontend/src/pages/MainPage/components/list/index.tsx) [1] [2] [3] [4] [5] [6] [7] [8]Type Definitions:
FlowSettingsPropsTypeto include an optionalflowDataproperty, allowing the flow settings modal to be more flexible. (src/frontend/src/types/components/index.ts)