Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Refactor VSearchButton #1961

Merged
merged 2 commits into from
Nov 16, 2022
Merged

Refactor VSearchButton #1961

merged 2 commits into from
Nov 16, 2022

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Nov 8, 2022

Fixes

Fixes #1947 by @obulat

Description

There are two components for the Search button: old and new. Currently, VSearchButton is used only on the search page with the new_header. The VSearchButtonOld is used everywhere else (in the search pages with the old_header and the standalone search bar on the 404 and home pages)

This means that we cannot simply remove the component when we switch to the new_header as the standalone search bar would be using it.

To solve it, this PR refactors the components. Now, the VSearchButtonOld is only used on the search pages with old_header layout, and can be safely deleted when we switch on the new_header flag in production.

There are no additional tests, but there are VR tests for the search button on all pages that still pass in this PR, so it means there are no visual regressions.

Testing Instructions

There are many VR tests that test the Search button: on the homepage, on the search page (in the header component tests, hovered/active), and on the 404 page. They did not have to be updated.

Checklist

  • My pull request has a descriptive title (not a vague title like Update index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@obulat obulat requested a review from a team as a code owner November 8, 2022 07:38
@obulat obulat requested review from zackkrida and dhruvkb November 8, 2022 07:38
@github-actions
Copy link

github-actions bot commented Nov 8, 2022

Storybook and Tailwind configuration previews: Ready

Storybook: https://wordpress.github.io/openverse-frontend/_preview/1961
Tailwind: https://wordpress.github.io/openverse-frontend/_preview/1961/tailwind

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

@openverse-bot openverse-bot added 💻 aspect: code Concerns the software code in the repository 🟨 priority: medium Not blocking but should be addressed soon 🧰 goal: internal improvement Improvement that benefits maintainers, not users labels Nov 8, 2022
@github-actions
Copy link

github-actions bot commented Nov 8, 2022

Size Change: -2.16 kB (0%)

Total Size: 821 kB

Filename Size Change
./.nuxt/dist/client/232.js 0 B -272 B (removed) 🏆
./.nuxt/dist/client/232.modern.js 0 B -277 B (removed) 🏆
./.nuxt/dist/client/233.js 0 B -1.85 kB (removed) 🏆
./.nuxt/dist/client/app.js 129 kB -1.05 kB (-1%)
./.nuxt/dist/client/app.modern.js 121 kB -1.15 kB (-1%)
./.nuxt/dist/client/commons/app.js 88.3 kB -14 B (0%)
./.nuxt/dist/client/commons/app.modern.js 77.1 kB +17 B (0%)
./.nuxt/dist/client/components/v-sources-table.js 15.8 kB +32 B (0%)
./.nuxt/dist/client/components/v-sources-table.modern.js 15.8 kB +31 B (0%)
./.nuxt/dist/client/pages/index.js 5 kB +32 B (+1%)
./.nuxt/dist/client/runtime.js 2.67 kB -33 B (-1%)
./.nuxt/dist/client/runtime.modern.js 2.68 kB -34 B (-1%)
./.nuxt/dist/client/226.js 273 B +273 B (new file) 🆕
./.nuxt/dist/client/226.modern.js 277 B +277 B (new file) 🆕
./.nuxt/dist/client/227.js 1.85 kB +1.85 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
./.nuxt/dist/client/components/loading-icon.js 746 B +1 B (0%)
./.nuxt/dist/client/components/loading-icon.modern.js 751 B 0 B
./.nuxt/dist/client/components/table-sort-icon.js 509 B 0 B
./.nuxt/dist/client/components/table-sort-icon.modern.js 513 B 0 B
./.nuxt/dist/client/components/v-all-results-grid.js 2.75 kB +3 B (0%)
./.nuxt/dist/client/components/v-all-results-grid.modern.js 2.73 kB -1 B (0%)
./.nuxt/dist/client/components/v-all-results-grid/pages/search/audio/pages/search/index.js 3.02 kB +2 B (0%)
./.nuxt/dist/client/components/v-all-results-grid/pages/search/audio/pages/search/index.modern.js 2.92 kB +2 B (0%)
./.nuxt/dist/client/components/v-audio-cell.js 355 B -2 B (-1%)
./.nuxt/dist/client/components/v-audio-cell.modern.js 361 B 0 B
./.nuxt/dist/client/components/v-audio-details.js 1.81 kB +1 B (0%)
./.nuxt/dist/client/components/v-audio-details.modern.js 1.79 kB -1 B (0%)
./.nuxt/dist/client/components/v-audio-track-skeleton.js 1.01 kB 0 B
./.nuxt/dist/client/components/v-audio-track-skeleton.modern.js 1.02 kB 0 B
./.nuxt/dist/client/components/v-audio-track.js 5.12 kB +2 B (0%)
./.nuxt/dist/client/components/v-audio-track.modern.js 5.07 kB +3 B (0%)
./.nuxt/dist/client/components/v-back-to-search-results-link.js 537 B 0 B
./.nuxt/dist/client/components/v-back-to-search-results-link.modern.js 542 B +1 B (0%)
./.nuxt/dist/client/components/v-bone.js 684 B -2 B (0%)
./.nuxt/dist/client/components/v-bone.modern.js 690 B 0 B
./.nuxt/dist/client/components/v-box-layout.js 1.2 kB 0 B
./.nuxt/dist/client/components/v-box-layout.modern.js 1.2 kB +1 B (0%)
./.nuxt/dist/client/components/v-content-link.js 1.11 kB +1 B (0%)
./.nuxt/dist/client/components/v-content-link.modern.js 1.09 kB +2 B (0%)
./.nuxt/dist/client/components/v-content-page.js 467 B 0 B
./.nuxt/dist/client/components/v-content-page.modern.js 471 B 0 B
./.nuxt/dist/client/components/v-content-report-button.js 778 B 0 B
./.nuxt/dist/client/components/v-content-report-button.modern.js 784 B 0 B
./.nuxt/dist/client/components/v-content-report-form.js 3.75 kB -1 B (0%)
./.nuxt/dist/client/components/v-content-report-form.modern.js 3.56 kB -2 B (0%)
./.nuxt/dist/client/components/v-content-report-popover.js 4.41 kB -3 B (0%)
./.nuxt/dist/client/components/v-content-report-popover.modern.js 4.22 kB 0 B
./.nuxt/dist/client/components/v-copy-button.js 3.99 kB 0 B
./.nuxt/dist/client/components/v-copy-button.modern.js 3.99 kB -2 B (0%)
./.nuxt/dist/client/components/v-copy-license.js 999 B 0 B
./.nuxt/dist/client/components/v-copy-license.modern.js 1 kB 0 B
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.js 9.5 kB -1 B (0%)
./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.modern.js 9.48 kB -1 B (0%)
./.nuxt/dist/client/components/v-dmca-notice.js 748 B 0 B
./.nuxt/dist/client/components/v-dmca-notice.modern.js 751 B -2 B (0%)
./.nuxt/dist/client/components/v-error-image.js 1.69 kB +2 B (0%)
./.nuxt/dist/client/components/v-error-image.modern.js 1.68 kB -3 B (0%)
./.nuxt/dist/client/components/v-error-section.js 372 B 0 B
./.nuxt/dist/client/components/v-error-section.modern.js 376 B 0 B
./.nuxt/dist/client/components/v-external-search-form.js 3.09 kB +1 B (0%)
./.nuxt/dist/client/components/v-external-search-form.modern.js 3.06 kB -2 B (0%)
./.nuxt/dist/client/components/v-external-source-list.js 2.55 kB 0 B
./.nuxt/dist/client/components/v-external-source-list.modern.js 2.52 kB -3 B (0%)
./.nuxt/dist/client/components/v-full-layout.js 1.49 kB 0 B
./.nuxt/dist/client/components/v-full-layout.modern.js 1.49 kB +1 B (0%)
./.nuxt/dist/client/components/v-grid-skeleton.js 1.6 kB -2 B (0%)
./.nuxt/dist/client/components/v-grid-skeleton.modern.js 1.61 kB -1 B (0%)
./.nuxt/dist/client/components/v-image-cell-square.js 1.02 kB 0 B
./.nuxt/dist/client/components/v-image-cell-square.modern.js 1.02 kB -2 B (0%)
./.nuxt/dist/client/components/v-image-cell.js 1.43 kB +1 B (0%)
./.nuxt/dist/client/components/v-image-cell.modern.js 1.42 kB 0 B
./.nuxt/dist/client/components/v-image-details.js 1.44 kB -2 B (0%)
./.nuxt/dist/client/components/v-image-details.modern.js 1.44 kB +2 B (0%)
./.nuxt/dist/client/components/v-image-grid.js 2.54 kB +1 B (0%)
./.nuxt/dist/client/components/v-image-grid.modern.js 2.42 kB +2 B (0%)
./.nuxt/dist/client/components/v-license-tab-panel.js 521 B -1 B (0%)
./.nuxt/dist/client/components/v-license-tab-panel.modern.js 525 B 0 B
./.nuxt/dist/client/components/v-load-more.js 790 B 0 B
./.nuxt/dist/client/components/v-load-more.modern.js 681 B -1 B (0%)
./.nuxt/dist/client/components/v-media-license.js 803 B +3 B (0%)
./.nuxt/dist/client/components/v-media-license.modern.js 809 B +1 B (0%)
./.nuxt/dist/client/components/v-media-reuse.js 1.62 kB -1 B (0%)
./.nuxt/dist/client/components/v-media-reuse.modern.js 1.62 kB +2 B (0%)
./.nuxt/dist/client/components/v-media-tag.js 430 B 0 B
./.nuxt/dist/client/components/v-media-tag.modern.js 434 B 0 B
./.nuxt/dist/client/components/v-no-results.js 2.75 kB 0 B
./.nuxt/dist/client/components/v-no-results.modern.js 2.72 kB -3 B (0%)
./.nuxt/dist/client/components/v-radio.js 1.51 kB 0 B
./.nuxt/dist/client/components/v-radio.modern.js 1.47 kB -1 B (0%)
./.nuxt/dist/client/components/v-related-audio.js 1.23 kB +2 B (0%)
./.nuxt/dist/client/components/v-related-audio.modern.js 1.23 kB 0 B
./.nuxt/dist/client/components/v-related-images.js 3.1 kB +4 B (0%)
./.nuxt/dist/client/components/v-related-images.modern.js 2.97 kB 0 B
./.nuxt/dist/client/components/v-report-desc-form.js 966 B 0 B
./.nuxt/dist/client/components/v-report-desc-form.modern.js 965 B +1 B (0%)
./.nuxt/dist/client/components/v-row-layout.js 1.7 kB -2 B (0%)
./.nuxt/dist/client/components/v-row-layout.modern.js 1.71 kB -1 B (0%)
./.nuxt/dist/client/components/v-scroll-button.js 813 B 0 B
./.nuxt/dist/client/components/v-scroll-button.modern.js 819 B 0 B
./.nuxt/dist/client/components/v-search-grid.js 5.43 kB +5 B (0%)
./.nuxt/dist/client/components/v-search-grid.modern.js 5.38 kB -7 B (0%)
./.nuxt/dist/client/components/v-search-results-title.js 657 B -1 B (0%)
./.nuxt/dist/client/components/v-search-results-title.modern.js 652 B -1 B (0%)
./.nuxt/dist/client/components/v-search-type-radio.js 794 B +2 B (0%)
./.nuxt/dist/client/components/v-search-type-radio.modern.js 771 B +3 B (0%)
./.nuxt/dist/client/components/v-server-timeout.js 299 B 0 B
./.nuxt/dist/client/components/v-server-timeout.modern.js 302 B -1 B (0%)
./.nuxt/dist/client/components/v-sketch-fab-viewer.js 996 B 0 B
./.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js 895 B 0 B
./.nuxt/dist/client/components/v-skip-to-content-container.js 888 B -1 B (0%)
./.nuxt/dist/client/components/v-skip-to-content-container.modern.js 892 B 0 B
./.nuxt/dist/client/components/v-snackbar.js 1.18 kB +2 B (0%)
./.nuxt/dist/client/components/v-snackbar.modern.js 1.19 kB 0 B
./.nuxt/dist/client/components/v-warning-suppressor.js 298 B 0 B
./.nuxt/dist/client/components/v-warning-suppressor.modern.js 303 B +1 B (0%)
./.nuxt/dist/client/pages/about.js 1.06 kB -1 B (0%)
./.nuxt/dist/client/pages/about.modern.js 1.07 kB 0 B
./.nuxt/dist/client/pages/audio/_id.js 4.89 kB +3 B (0%)
./.nuxt/dist/client/pages/audio/_id.modern.js 4.72 kB +3 B (0%)
./.nuxt/dist/client/pages/external-sources.js 1.45 kB +8 B (+1%)
./.nuxt/dist/client/pages/external-sources.modern.js 1.45 kB -1 B (0%)
./.nuxt/dist/client/pages/feedback.js 1.24 kB +2 B (0%)
./.nuxt/dist/client/pages/feedback.modern.js 1.24 kB -1 B (0%)
./.nuxt/dist/client/pages/image/_id.js 5.31 kB -1 B (0%)
./.nuxt/dist/client/pages/image/_id.modern.js 7.25 kB +3 B (0%)
./.nuxt/dist/client/pages/index.modern.js 4.86 kB -1 B (0%)
./.nuxt/dist/client/pages/preferences.js 1.22 kB -4 B (0%)
./.nuxt/dist/client/pages/preferences.modern.js 1.21 kB -1 B (0%)
./.nuxt/dist/client/pages/search-help.js 1.55 kB +2 B (0%)
./.nuxt/dist/client/pages/search-help.modern.js 1.55 kB 0 B
./.nuxt/dist/client/pages/search.js 2.72 kB +1 B (0%)
./.nuxt/dist/client/pages/search.modern.js 2.57 kB -1 B (0%)
./.nuxt/dist/client/pages/search/audio.js 1.24 kB 0 B
./.nuxt/dist/client/pages/search/audio.modern.js 1.23 kB -3 B (0%)
./.nuxt/dist/client/pages/search/image.js 2.79 kB +1 B (0%)
./.nuxt/dist/client/pages/search/image.modern.js 2.67 kB 0 B
./.nuxt/dist/client/pages/search/index.js 2.96 kB 0 B
./.nuxt/dist/client/pages/search/index.modern.js 2.94 kB -2 B (0%)
./.nuxt/dist/client/pages/search/model-3d.js 242 B -1 B (0%)
./.nuxt/dist/client/pages/search/model-3d.modern.js 246 B -1 B (0%)
./.nuxt/dist/client/pages/search/search-page.types.js 266 B +1 B (0%)
./.nuxt/dist/client/pages/search/search-page.types.modern.js 271 B 0 B
./.nuxt/dist/client/pages/search/video.js 240 B 0 B
./.nuxt/dist/client/pages/search/video.modern.js 243 B 0 B
./.nuxt/dist/client/pages/sources.js 1.44 kB +1 B (0%)
./.nuxt/dist/client/pages/sources.modern.js 1.45 kB 0 B
./.nuxt/dist/client/vendors/app.js 62.4 kB -5 B (0%)
./.nuxt/dist/client/vendors/app.modern.js 61.6 kB -1 B (0%)

compressed-size-action

@obulat obulat force-pushed the search-button_refactor branch from f0e23b7 to ca4c5e3 Compare November 10, 2022 05:54
@obulat obulat force-pushed the search-button_refactor branch from ca4c5e3 to 288a8e8 Compare November 10, 2022 18:17
@WordPress WordPress deleted a comment from github-actions bot Nov 10, 2022
Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

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

The separation looks good. I have some tiny non-blocking comments.

@@ -82,3 +85,8 @@ export default defineComponent({
},
})
</script>
Copy link
Member

Choose a reason for hiding this comment

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

Please add a blank line. Maybe we should add a lint rule that ensures this.

Comment on lines +53 to +54
/* Removes a tiny gap between the button and the input borders */
border-inline-start: 0;
Copy link
Member

Choose a reason for hiding this comment

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

Seeing as border-inline-* is being used in many places, would making a Tailwind utility for this be cleaner? Looks like that can remove entire <style> blocks in some files.

Copy link
Member

@zackkrida zackkrida left a comment

Choose a reason for hiding this comment

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

Everything is working as expected. Nice work.

@obulat obulat merged commit 6c397c3 into main Nov 16, 2022
@obulat obulat deleted the search-button_refactor branch November 16, 2022 04:39
github-actions bot pushed a commit that referenced this pull request Nov 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
💻 aspect: code Concerns the software code in the repository 🧰 goal: internal improvement Improvement that benefits maintainers, not users 🟨 priority: medium Not blocking but should be addressed soon
Projects
None yet
Development

Successfully merging this pull request may close these issues.

VSearchButtonOld should only be used for the search page header when new_header is off
4 participants