Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@itisAliRH
Copy link
Member

@itisAliRH itisAliRH commented Feb 25, 2025

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
Before After
image image
image image
image image
image image

Key Changes:

  • Enhanced Selection Interface using the SourceOptionCard
  • Update types and improve the logic
  • Use a consistent object store selection for every use case

How 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 Preferences
    a2. Click on Preferred Storage Location

    b1. 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

  • I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch from 5f49326 to cf4e407 Compare February 28, 2025 09:23
@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch from 4412334 to 8f2abb2 Compare April 23, 2025 13:28
@ahmedhamidawan
Copy link
Member

Seems related to the work in #19695?

@itisAliRH
Copy link
Member Author

Seems related to the work in #19695?

@ahmedhamidawan Some part of Laila's PR is included in this PR.

@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch 2 times, most recently from 0d65be8 to 5c49201 Compare May 22, 2025 14:13
@itisAliRH itisAliRH changed the title Refactor User Preferred Object Store Select Refactor Object Store Selection Modals UI May 22, 2025
@itisAliRH itisAliRH marked this pull request as ready for review May 22, 2025 14:41
@github-actions github-actions bot added this to the 25.1 milestone May 22, 2025
Copy link
Contributor

@davelopez davelopez left a 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!

@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch from 5d532d9 to 9093032 Compare June 10, 2025 09:12
@ahmedhamidawan ahmedhamidawan linked an issue Jun 12, 2025 that may be closed by this pull request
@davelopez
Copy link
Contributor

This one needs a rebase

@itisAliRH itisAliRH marked this pull request as draft June 17, 2025 07:40
@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch 2 times, most recently from 4795c62 to 46f4672 Compare June 26, 2025 14:52
itisAliRH added 7 commits July 9, 2025 16:20
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
itisAliRH added 25 commits July 9, 2025 16:20
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.
@itisAliRH itisAliRH force-pushed the user-preferred-object-store-select-redesign branch from 46f4672 to c5feb71 Compare July 9, 2025 14:22
@itisAliRH itisAliRH marked this pull request as ready for review July 9, 2025 14:22
Copy link
Contributor

@davelopez davelopez left a 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 👍

@davelopez davelopez merged commit 106a31e into galaxyproject:dev Jul 11, 2025
54 of 57 checks passed
@itisAliRH itisAliRH deleted the user-preferred-object-store-select-redesign branch July 11, 2025 08:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Polish Storage Destination Selector in Tool Form

6 participants