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 and Enhance Modal, Button, and Layout Functionality #2064

Merged
merged 60 commits into from
Jun 5, 2024

Conversation

lucaseduoli
Copy link
Collaborator

Description

This pull request introduces several fixes and enhancements related to modals, buttons, and layout elements within the application. The changes improve the user experience by addressing bugs, enhancing functionality, and refining UI components.

Summary of Changes

  • Modals:

    • Added Submit buttons to every modal, except confirmation modals.
    • Fixed submitting issues on storeApiKeyModal.
    • Added a close button when the submit button is present.
    • Fixed padding on deleteConfirmationModal.
  • Node and Component Enhancements:

    • Removed the pencil icon from the node name.
    • Made node description editable by clicking once and changed the cursor type.
    • Changed empty component behavior to open the New Project modal.
    • Fixed the node toolbar to allow moving the nodes.
    • Fixed Endpoint Name labeling.
    • Passed duplicate flow function to the main page.
    • Made folders visually more pleasing.
    • Fixed the tooltip that no longer needs removal of the portal.
  • UI and Layout Adjustments:

    • Fixed bottom padding on settings pages.
    • Fixed scrolling not working in the global variables dropdown.
    • Disabled accordion when it is empty.
    • Removed shadow from card elements.
    • Added a description column to the advanced tab.
    • Implemented unselect on escape.
    • Fixed classes and layout for sidebar buttons, ensuring they don't look strange and behave consistently.
    • Fixed button classes to allow loading indicators and ensure proper sizing and functionality.
    • Modularized loading on buttons.
  • General Fixes and Improvements:

    • Changed message of the terminal to "Run Langflow".
    • Fixed save functionality to use user-provided API keys instead of default ones.
    • Ensured button components can handle multiple children and look correct.
    • Added icons to various UI elements.
    • Fixed ID scrolling issue when clicking from Store.
    • Removed extra space caused by an unnecessary div element.
    • Returned the loader to default settings and ensured buttons work with asChild.

Additional Changes

  • Merged the remote-tracking branch origin/dev into fix/minor_bugs on multiple occasions to keep the branch up-to-date with the latest developments.

Notes

  • Please review the changes related to button classes carefully, as they impact multiple components.
  • Further UI enhancements are planned for the next iteration.

… to 5 to optimize test execution

♻️ (addNewVariableButton.tsx): remove unused Button import and add data-testid to Save Variable button for better testing
♻️ (index.tsx): add preventDefault to button click handlers to prevent form submission
♻️ (sideBarFolderButtons): add data-testid attributes to buttons and inputs for better testing and readability

♻️ (api.tsx): refactor duplicate request check logic into helper function
✨ (api.tsx): add helper function to check and store duplicate requests
♻️ (genericNode): refactor code for better readability and maintainability
💡 (genericNode): add data-testid attribute for testing purposes
🐛 (use-fetch-data-on-mount): fix error handling to prevent undefined errors

🐛 (use-handle-new-value.tsx, use-handle-refresh-buttons.tsx): fix potential undefined errors in error handling
✨ (baseModal/index.tsx, flowSettingsModal/index.tsx): add data-testid attributes for better testability
♻️ (editNodeModal/index.tsx): refactor code for better readability and consistency

♻️ (nodeToolbarComponent): remove trailing commas to improve code style
♻️ (GeneralPage): reorder imports and remove trailing commas for consistency
✅ (chatInputOutput.spec.ts): update path to ChatTest.json for better file organization

✅ (chatInputOutputUser.spec.ts): add additional interactions to chat test
✅ (dragAndDrop.spec.ts): update file path for collection.json
✅ (dropdownComponent.spec.ts): fix formatting and improve locator usage

✅ (filterEdge.spec.ts): fix locator strings and remove redundant code
✅ (floatComponent.spec.ts): remove redundant cache checks and fix locator strings

✅ (flowSettings.spec.ts): update test to use data-testid for save button
✅ (folders.spec.ts): refactor folder creation and editing to use data-testid
✅ (globalVariables.spec.ts): remove redundant save button click in test

✅ (tests): update test locators to use more specific selectors

- Change locators for "Save Changes" button to use `getByText` with exact match
- Update locators for `showchroma_server_http_port` in `inputComponent.spec.ts`
- Add additional test steps in `intComponent.spec.ts` for better coverage

✅ (keyPairListComponent.spec.ts, langflowShortcuts.spec.ts, logs.spec.ts): update locators for better test stability and readability

✅ (tests): update end-to-end tests for improved stability and accuracy

✅ (textInputOutput.spec.ts): update locators and placeholders for accuracy
✅ (toggleComponent.spec.ts): replace locators with getByText for clarity
@Cristhianzl
Copy link
Collaborator

Cristhianzl commented Jun 4, 2024

All tests fixed and passed.

…ularity

✨ (GeneralPage): add custom hooks for patching gradient, password, and saving API key
💡 (GeneralPage): add useScrollToElement hook to handle smooth scrolling to elements

✨ (hooks): add useSaveKey and useScrollToElement custom hooks

✅ (tests): update end-to-end tests for improved stability and accuracy
♻️ (frontend): refactor BaseModal to use switchCaseModalSize helper
✨ (frontend): add GeneralPageHeaderComponent for settings page header
✨ (frontend): add PasswordFormComponent for password management in settings page

✨ (SettingsPage): add ProfileGradientFormComponent to allow users to choose profile gradient
✨ (SettingsPage): add StoreApiKeyFormComponent to enable users to store API keys

♻️ (GeneralPage): refactor GeneralPage to use modular components for forms
@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jun 5, 2024
@lucaseduoli lucaseduoli merged commit 6b41460 into dev Jun 5, 2024
10 of 17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request lgtm This PR has been approved by a maintainer size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants