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.

Sign up for GitHub

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

Jump to bottom

Refactor plugin details modal using Vue #22055

Merged
merged 31 commits into from
Apr 25, 2024
Merged

Refactor plugin details modal using Vue #22055

merged 31 commits into from
Apr 25, 2024

Conversation

michalkleiner
Copy link
Contributor

@michalkleiner michalkleiner commented Mar 27, 2024 •
edited
Loading

Description:

Ref. DEV-17864 and DEV-17371

Refactor plugin details view from back-end twig template to Vue template so that Start Free Trial action can be integrated into the modal.

Implement new modal design with sticky header and footer. CTA action in the modal is the same as on the card (just without the More details that would open the modal itself).

The legacy modal and its CSS was kept unchanged.

Once initial review is done we can think of adding UI tests for the new modal.

Review

@michalkleiner michalkleiner force-pushed the DEV-17864-plugin-cta-in-modal branch from a3ad606 to 2a53496 Compare March 28, 2024 05:12
@michalkleiner michalkleiner marked this pull request as ready for review March 28, 2024 05:21
@michalkleiner michalkleiner added c: Marketplace For issues that affect the Matomo Plugin Marketplace where you can download plugins. c: Design / UI For issues that impact Matomo's user interface or the design overall. Needs Review PRs that need a code review labels Mar 28, 2024
@michalkleiner michalkleiner added this to the 5.1.0 milestone Mar 28, 2024
@michalkleiner michalkleiner requested a review from mneudert March 28, 2024 05:22
@michalkleiner michalkleiner removed the Needs Review PRs that need a code review label Apr 1, 2024
@michalkleiner michalkleiner marked this pull request as draft April 1, 2024 22:05
@michalkleiner
Copy link
Contributor Author

Moving to draft as parked internally for now.

@sgiehl sgiehl removed this from the 5.1.0 milestone Apr 15, 2024
@michalkleiner michalkleiner force-pushed the DEV-17864-plugin-cta-in-modal branch from 2a53496 to a20d808 Compare April 16, 2024 23:54
@michalkleiner michalkleiner force-pushed the DEV-17864-plugin-cta-in-modal branch 2 times, most recently from e861b0d to 8b909ba Compare April 23, 2024 14:55
@michalkleiner michalkleiner marked this pull request as ready for review April 23, 2024 14:56
@michalkleiner
Copy link
Contributor Author

@mneudert I'd appreciate another review — the markup for the modal was refactored to use flexbox with a fixed header and footer and only the content should be scrolling now. For other decisions please refer to JIRA DEV-17371, e.g. keeping the CTA behaviour the same as on the plugin card, the discussion around the featured plugin (for now next to the title) or the removal of the promo content section (not used).

@michalkleiner michalkleiner added the Needs Review PRs that need a code review label Apr 23, 2024
@michalkleiner michalkleiner requested a review from sgiehl April 23, 2024 15:02
mneudert
mneudert reviewed Apr 23, 2024
View reviewed changes
Copy link
Member

@mneudert mneudert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like how fluffy and responsive this feels, compared to the old modals 🤗

plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/vue/src/types.ts Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginDetailsModal/PluginDetailsModal.vue Outdated Show resolved Hide resolved
plugins/Marketplace/stylesheets/plugin-details.less Show resolved Hide resolved
plugins/Marketplace/stylesheets/plugin-details.less Show resolved Hide resolved
plugins/Marketplace/vue/src/PluginList/CTAContainer.vue Show resolved Hide resolved
@michalkleiner michalkleiner force-pushed the DEV-17864-plugin-cta-in-modal branch from 6938c61 to 8468dba Compare April 24, 2024 05:06
@mneudert mneudert mentioned this pull request Apr 24, 2024
Merged
11 tasks
@michalkleiner
Use root reference when filtering for matching elements inside setTim…
3f4d3b7 
…eout callback
@michalkleiner
Add types
9d3983a
@michalkleiner
Hide More details button from plugin CTA when displayed in modal
34ec368 
Remove showActionsOnly flag and replace it with inModal flag as PO agreed to display the same actions
in the modal as on the plugin card, except the More details button which would open the modal so it
wouldn't make sense to display that.
@michalkleiner
Implement plugin details modal redesign
ed000c6
@michalkleiner
Make links from URLs and emails in the extra support information
684ec23
@michalkleiner
Remove unused computed property
da4c11b
@michalkleiner
Fix license spelling in variable and method names
38ff162
@michalkleiner
Remove number of users from Marketplace as product variant selection …
157a35f 
…for free trials is automatic in the backend
@michalkleiner
Add email validity check to author information section
92eac95
@michalkleiner
Rearrange code to remove some of the max line length lint exceptions
4082407
@michalkleiner
Move component state definition to the component file
741f80e
@michalkleiner
Unify email sanitisation for author and supporting metadata
89c15d8
@michalkleiner
Add types for iframeResizer
3b67f1f
@michalkleiner
Merge HelpLink and MoreDetailsButton components into MoreDetailsAction
1b322ab 
Both components were doing the same thing in a different form of a link (text vs button),
so these got merged with props to control the button block look and the label.
@michalkleiner
Adjust action links within CTA container to only appear when not pres…
613f229 
…ented in a modal
@michalkleiner
Improve responsive behaviour on smaller screens
5ad4c64
@michalkleiner
Ensure there's no empty text in CTA link actions
40241d6
@michalkleiner
Update dist files
c98d1e9
@michalkleiner michalkleiner force-pushed the DEV-17864-plugin-cta-in-modal branch from e987f42 to c98d1e9 Compare April 24, 2024 13:01
@michalkleiner michalkleiner requested a review from mneudert April 24, 2024 13:03
@mneudert mneudert force-pushed the DEV-17864-plugin-cta-in-modal branch from d3355ad to 9fda8e1 Compare April 25, 2024 15:56
@mneudert mneudert force-pushed the DEV-17864-plugin-cta-in-modal branch from 9fda8e1 to 5f1df8f Compare April 25, 2024 17:01
@mneudert mneudert merged commit 884eb59 into 5.x-dev Apr 25, 2024
22 of 25 checks passed
@mneudert mneudert deleted the DEV-17864-plugin-cta-in-modal branch April 25, 2024 17:47
@mneudert mneudert added this to the 5.1.0 milestone Apr 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Javi-Ormaechea Javi-Ormaechea Javi-Ormaechea left review comments

@mneudert mneudert mneudert approved these changes

@sgiehl sgiehl Awaiting requested review from sgiehl

Assignees
No one assigned
Labels
c: Design / UI For issues that impact Matomo's user interface or the design overall. c: Marketplace For issues that affect the Matomo Plugin Marketplace where you can download plugins. Needs Review PRs that need a code review
Projects
None yet
Milestone
5.1.0
Development

Successfully merging this pull request may close these issues.
4 participants
@michalkleiner @mneudert @Javi-Ormaechea @sgiehl