-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Refactor Object Store Selection Modals UI #19697
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
Refactor Object Store Selection Modals UI #19697
Conversation
5f49326 to
cf4e407
Compare
4412334 to
8f2abb2
Compare
|
Seems related to the work in #19695? |
@ahmedhamidawan Some part of Laila's PR is included in this PR. |
0d65be8 to
5c49201
Compare
davelopez
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works well and looks great on my tests!
Thank you @itisAliRH!
5d532d9 to
9093032
Compare
|
This one needs a rebase |
4795c62 to
46f4672
Compare
Includes headers "Storage Locations" and "Remote File Sources" to the props of the respective routes for better clarity.
Includes headers "Storage Locations" and "Remote File Sources" to the props of the respective routes for better clarity.
… API Migrates from Vue 2 Options API to Vue 3 Composition API for better maintainability and readability. Replaces Vue instance methods and lifecycle hooks with setup function, refs, and computed properties. Updates modal and font icon usage to align with new component structure. Fixes layout and style issues with the modal dialog.
Adds computed properties for uniqueId, buttonTitle, and buttonTooltip Introduces optional props 'selected', 'submitButtonTooltip', and 'selectionMode' Updates styles for selected state Implements emit for 'select' event Improves user interaction and flexibility of SourceOptionCard component
Replaces button-based object store selection with SourceOptionCard components Removes unused imports and refactors prop types to use lowercase Simplifies handleSubmit function and error handling Enhances user interface for better usability and maintainability
Export type definition for UserConcreteObjectStoreModel in API schema handling.
Replaces ConcreteObjectStoreModel with UserConcreteObjectStoreModel in SourceOption type Enhances uniqueId computation to handle object_store_id Adds data attribute to source option card for easier identification
Enhances user experience by making modals scrollable and centered across various components for constancy.
Integrates confirmation dialog for setting private datasets Replaces manual modal control with prop-based visibility Simplifies modal reset logic and emits close event
Refactors mountComponent to accept preferredObjectStoreId parameter. Adds API mock for user usage. Includes stubs for BModal to simulate modal interactions. Updates test cases to verify modal interactions.
Changes selectors from option buttons to option cards in the test to align with updated UI components for object store selection.
Replaces option_buttons with option_cards for storage selection Adds check and click for primary button if present
Adds a condition to check for the presence of an icon before rendering it in the button component, preventing error.
Revises selectors for object store cards to use g-card ids and more specific
Replaces Bootstrap spinner with a custom loading component for better UX consistency. Improves button tooltips and titles to provide clearer messaging in selection mode. Refactors primary actions into a computed property to enhance reactivity. Adjusts template structure to render quota.
Reorganizes props by using the TypScript interfaces and adding default values using `withDefaults` for better clarity and consistency. Hide quota for default object store. Simplifies UI text by using verbose dynamic `forWhat` prop value. Removes redundant type annotations for cleaner code.
- Refactors modal logic to ensure proper event handling and reset behavior. - Simplifies error state initialization. - Adjusts modal actions to prevent unintended closure. - Enhances UI consistency by updating modal properties like title tags and button states. Improves user experience by refining modal usability and ensuring accurate state management.
- Simplifies the props definition by removing default values and renaming the interface for clarity. - Streamlines event handling by reordering and grouping related declarations for improved readability.
…prove test logic - Renames a test file from JavaScript to TypeScript for type safety and consistency. - Updates test logic to verify object store selection behavior.
- Switches from using a font-awesome span element to the FontAwesomeIcon component for improved readability and maintainability. - Updates modal properties to use `BModal` with enhanced configuration, including `ok-only` and `ok-title` and adjusts modal size to `lg` and modifies the title and footer options for better user experience and consistency.
- Changes the modal title tag from h2 to h3 for semantic consistency. - Adds an "ok-only" button with a custom "Close" label.
- Adds usability improvements to modals by making them larger, scrollable, and centered. - Add "ok-only" button with a "Close" label for better clarity. - Removes unnecessary state toggling in update methods for consistency.
- Removes the unnecessary `selectedObjectStoreId` state and directly uses `invocationPreferredObjectStoreId` from props for binding.
- Convert the test file from JavaScript to TypeScript for improved type safety. - Updates import paths and resolves schema reference adjustments. - Enhances test logic by refining object store selection checks and emitted event validation.
- Render full description. - Updates the description binding to directly use the `sourceOption.description` property, reducing dependency on external computations.
Updates the computed `uniqueId` to return `undefined` instead of a random string when no valid sourceOption ID is available. GCard assign an id automatically. Adds id for mocked source options.
Enhances the object store selection process by introducing logic to handle a confirmation button.
46f4672 to
c5feb71
Compare
davelopez
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you @itisAliRH!
Let's get this in early so people can try it, and then we can iterate if needed during the dev cycle 👍
This pull request introduces a redesign of the Object Store Selection modals for User Preferred, Current History, Tool form and Workflow run form, aiming to enhance user experience through a consistent and modernised interface.
Required: #19521
Refactor.User.Preferred.Object.Store.Select.Demo.mov
Key Changes:
SourceOptionCardHow to test the changes?
(Select all options that apply)
I've included appropriate automated tests.
This is a refactoring of components with existing test coverage.
Instructions for manual testing are as follows:
a1. Go to
User Preferencesa2. Click on
Preferred Storage Locationb1. Go to the tool run form
b2. Select the storage icon at the top of the form toolbar
c1. Go to the workflow run form
c2. Click on the storage icon at the top of the page
d1. In the current history panel, click on the storage icon on top
License