feat: Enhance sidebar components #4452
Merged
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
… for consistency and readability
…er title to improve UI flexibility and readability
…ss isFlexView prop to getCustomParameterTitle function for improved customization and flexibility
…stency and readability
…o the Flow Sidebar Component to enhance user experience and functionality. Update the structure and logic of the component to improve search functionality, error handling, and component filtering.
…play a message when no components are found in the search result. The component includes options to clear the search, filter, and try a different query.
…gles to manage feature toggles for Beta and Legacy features in the sidebar of the FlowPage.
…and spacing 💡 (sidebarDraggableComponent): Improve readability by changing font weight of text elements 💡 (sidebarDraggableComponent): Update text content to be more consistent and capitalized
…ttons in the sidebar footer for adding custom components and navigating to the store page.
…of items in the sidebar with tooltips and draggable functionality
…o filter out beta items from the given data based on a specific condition
…lter to filter data based on edge filters for a better user experience.
…cyFilter to filter out legacy data from APIDataType object.
…to combine Fuse.js search results with API data for each category
…to merge and return filtered data from different sources for a given category in the FlowPage component.
…ing to convert a string to lowercase, remove underscores, and spaces for better string normalization.
…y in text formatting ✨ (search-on-metadata.ts, traditional-search-metadata.ts): Add helper functions for searching in metadata and traditional search metadata to improve search functionality in the flow sidebar component.
dosubot
bot
added
size:XXL
github-actions
bot
added
enhancement
edwinjosechittilappilly
pushed a commit
that referenced
this pull request
Nov 7, 2024
* 📝 (pageLayout/index.tsx): update beta icon text from "BETA" to "Beta" for consistency and readability * ✨ (custom-parameter.tsx): add support for flex view in custom parameter title to improve UI flexibility and readability * ✨ (NodeInputField/index.tsx): refactor NodeInputField component to pass isFlexView prop to getCustomParameterTitle function for improved customization and flexibility * 📝 (NodeStatus/index.tsx): update text from "BETA" to "Beta" for consistency and readability * ✨ (flowSidebarComponent/index.tsx): Add new components and features to the Flow Sidebar Component to enhance user experience and functionality. Update the structure and logic of the component to improve search functionality, error handling, and component filtering. * ✨ (emptySearchComponent): add a new component NoResultsMessage to display a message when no components are found in the search result. The component includes options to clear the search, filter, and try a different query. * ✨ (featureTogglesComponent/index.tsx): add a new component FeatureToggles to manage feature toggles for Beta and Legacy features in the sidebar of the FlowPage. * 📝 (sidebarDraggableComponent): Update CSS classes for better styling and spacing 💡 (sidebarDraggableComponent): Improve readability by changing font weight of text elements 💡 (sidebarDraggableComponent): Update text content to be more consistent and capitalized * ✨ (index.tsx): Add a new component SidebarFooterButtons to display buttons in the sidebar footer for adding custom components and navigating to the store page. * ✨ (index.tsx): add a new component SidebarItemsList to render a list of items in the sidebar with tooltips and draggable functionality * ✨ (apply-beta-filter.ts): add a new helper function applyBetaFilter to filter out beta items from the given data based on a specific condition * ✨ (apply-edge-filter.ts): introduce a new helper function applyEdgeFilter to filter data based on edge filters for a better user experience. * ✨ (apply-legacy-filter.ts): introduce a new helper function applyLegacyFilter to filter out legacy data from APIDataType object. * ✨ (combined-results.ts): add a new helper function combinedResultsFn to combine Fuse.js search results with API data for each category * ✨ (filtered-data.ts): introduce a new helper function filteredDataFn to merge and return filtered data from different sources for a given category in the FlowPage component. * ✨ (normalize-string.ts): introduce a new helper function normalizeString to convert a string to lowercase, remove underscores, and spaces for better string normalization. * ✨ (ParentDisclosureComponent): Change "BETA" to "Beta" for consistency in text formatting ✨ (search-on-metadata.ts, traditional-search-metadata.ts): Add helper functions for searching in metadata and traditional search metadata to improve search functionality in the flow sidebar component.
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 changes to the frontend components and utilities, primarily focusing on enhancing the user interface and improving the filtering and search functionalities. Key changes include updates to component styles, the addition of new components, and the implementation of various filtering helpers.
Component Updates:
src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx: Modified thegetCustomParameterTitlefunction to includeisFlexViewparameter for better flexibility in view rendering. [1] [2]src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx: Changed the text from "BETA" to "Beta" for consistency.src/frontend/src/components/pageLayout/index.tsx: Updated the beta icon text to "Beta".src/frontend/src/customization/components/custom-parameter.tsx: Updated thegetCustomParameterTitlefunction to useisFlexViewinstead ofnodeId. [1] [2]New Components:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/emptySearchComponent/index.tsx: AddedNoResultsMessagecomponent to display a message when no search results are found.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent/index.tsx: IntroducedFeatureTogglescomponent for toggling beta and legacy features.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFooterButtons/index.tsx: AddedSidebarMenuButtonscomponent for additional sidebar functionalities.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx: CreatedSidebarItemsListcomponent to list sidebar items with tooltips.Filtering and Search Enhancements:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-beta-filter.ts: ImplementedapplyBetaFilterhelper to filter out beta items.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-edge-filter.ts: AddedapplyEdgeFilterhelper to filter items based on edge criteria.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/apply-legacy-filter.ts: CreatedapplyLegacyFilterhelper to filter out legacy items.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/combined-results.ts: IntroducedcombinedResultsFnto combine results from different search methods.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/helpers/traditional-search-metadata.ts: AddedtraditionalSearchMetadatafor searching within metadata.These changes collectively improve the frontend user experience by refining component displays, adding new interactive elements, and enhancing the search and filter capabilities.