Page MenuHomePhabricator
Create Task
Maniphest T297529

[beta cluster] Media Search - Console errors for loading page and for displaying QuickView
Closed, ResolvedPublic
Actions

Description

(1) Go to Special:MediaSearch

DOMException: Failed to execute 'replaceState' on 'History': #<Object> could not be cloned.
    at a.replaceQueryToHistoryState (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:239:825)
    at Array.<anonymous> (<anonymous>:231:746)
    at a.dispatch (<anonymous>:233:459)
    at a.dispatch (<anonymous>:229:122)
    at Proxy.n.<computed> (<anonymous>:235:777)
    at Proxy.mounted (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:245:557)
    at Us (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%
2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:512:131)
    at Hs (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:512:209)
    at Array.Un.t.__weh.t.__weh (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:468:684)
    at ui (https://commons.wikimedia.beta.wmflabs.org/w/load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue%7Cjquery.ui&skin=vector&version=9buq2:513:528)

(2) Click on any image in the search result for QuickView - the placeholder will be displayed.

Screen Shot 2021-12-10 at 1.55.08 PM.png (1×2 px, 339 KB)

The Console shows three errors:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$el')
   at Proxy.scrollIntoViewIfNeeded (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:198)
   at Proxy.<anonymous> (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:196)
TypeError: this.$i18n is not a function
   at Proxy.default (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:156)
   at mo (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:471)
   at ho (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:471)
   at load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:507
   at ks (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:508)
   at M (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:484)
   at P (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:484)
   at m (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:481)
   at O (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:482)
   at T (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:482)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'focus')
   at Proxy.<anonymous> (load.php?lang=en&modules=jquery%2Cmediasearch%2Coojs-ui-core%2Csite%2Cvue|jquery.ui&skin=vector&version=9buq2:197)

Details

SubjectRepoBranchLines +/-
Vue: Unbreak after Vue 3 migrationmediawiki/extensions/MediaSearchwmf/1.38.0-wmf.12+22 -9
store: Move $log() calls out of store, into App componentmediawiki/extensions/MediaSearchmaster+37 -64
Vue: Unbreak after Vue 3 migrationmediawiki/extensions/MediaSearchmaster+21 -7
CopyTextLayout: Don't use this.$i18n in prop defaultsmediawiki/extensions/MediaSearchmaster+3 -3
SearchResults: Use Vue 3-compatible way of accessing this.$refsmediawiki/extensions/MediaSearchmaster+6 -2
Customize query in gerrit

Related Objects
Search...

Event Timeline

Etonkovidova created this task.Dec 10 2021, 10:01 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 10 2021, 10:01 PM
CBogen assigned this task to matthiasmullie.Dec 13 2021, 2:01 PM
CBogen edited projects, added Structured-Data-Backlog (Current Work), SDAW-MediaSearch; removed Structured-Data-Backlog.
CBogen moved this task from Incoming to Doing on the Structured-Data-Backlog (Current Work) board.
CBogen reassigned this task from matthiasmullie to SimoneThisDot.Dec 13 2021, 3:01 PM
SimoneThisDot added a comment.Dec 13 2021, 3:54 PM

After initial investigation we have highlighted that most of the issue are related to the recent vue changes in the mediaWiki repository.

Main issues are:

  • State variables are not returned as plain objects but as Proxy's. All getters and setters need to be updated
  • $refs were previously returning an array of vue components, now they return a different proxy object with a different structure (the component is within the "_" variable).
  • Trying to access the "this" within a property default declaration will not work (example in CopyTextLayout.vue we set a default translation string, this fails)
CBogen added a project: Design-Systems-team-20200324-20220422 (Vue.js Migration Team Radar).Dec 13 2021, 3:56 PM
CBogen edited projects, added Design-Systems-team-20200324-20220422; removed Design-Systems-team-20200324-20220422 (Vue.js Migration Team Radar).
CBogen edited projects, added Design-Systems-team-20200324-20220422 (Vue.js Migration Team Radar); removed Design-Systems-team-20200324-20220422.
CBogen added a subscriber: • STH.
gerritbot added a comment.Dec 13 2021, 7:04 PM

Change 746938 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/MediaSearch@master] Vue: Unbreak replaceQueryToHistoryState after Vue 3 migration

https://gerrit.wikimedia.org/r/746938

gerritbot added a project: Patch-For-Review.Dec 13 2021, 7:04 PM
Jdforrester-WMF subscribed.Dec 13 2021, 7:11 PM

Is this a train blocker for this week? The new Vue version will ship from tonight…

gerritbot added a comment.Dec 13 2021, 9:10 PM

Change 746953 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/MediaSearch@master] SearchResults: Use Vue 3-compatible way of accessing this.$refs

https://gerrit.wikimedia.org/r/746953

gerritbot added a comment.Dec 13 2021, 9:10 PM

Change 746954 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/MediaSearch@master] CopyTextLayout: Don't use this.$i18n in prop defaults

https://gerrit.wikimedia.org/r/746954

gerritbot added a comment.Dec 13 2021, 9:47 PM

Change 746961 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/extensions/MediaSearch@master] store: Move $log() calls out of store, into App component

https://gerrit.wikimedia.org/r/746961

Catrope subscribed.Dec 13 2021, 9:49 PM
In T297529#7567336, @Jdforrester-WMF wrote:

Is this a train blocker for this week? The new Vue version will ship from tonight…

Yes, this is a train blocker. Tagged as such.

Catrope added a parent task: T293954: 1.38.0-wmf.13 deployment blockers.Dec 13 2021, 9:50 PM
Jdforrester-WMF triaged this task as Unbreak Now! priority.Dec 13 2021, 9:57 PM
egardner subscribed.Dec 13 2021, 10:16 PM

I'm reviewing these patches now and can backport during this afternoon's window if needed.

gerritbot added a comment.Dec 13 2021, 10:30 PM

Change 746953 abandoned by Catrope:

[mediawiki/extensions/MediaSearch@master] SearchResults: Use Vue 3-compatible way of accessing this.$refs

Reason:

Squashed into https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MediaSearch/+/746938

https://gerrit.wikimedia.org/r/746953

gerritbot added a comment.Dec 13 2021, 10:30 PM

Change 746954 abandoned by Catrope:

[mediawiki/extensions/MediaSearch@master] CopyTextLayout: Don't use this.$i18n in prop defaults

Reason:

Squashed into https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MediaSearch/+/746938

https://gerrit.wikimedia.org/r/746954

egardner claimed this task.Dec 13 2021, 10:31 PM
egardner added a subscriber: SimoneThisDot.
Jdforrester-WMF added a comment.Dec 13 2021, 10:36 PM
In T297529#7567907, @egardner wrote:

I'm reviewing these patches now and can backport during this afternoon's window if needed.

No need to backport; this blocks this week's train, not last week's, as the new Vue version will only ship this week.

gerritbot added a comment.Dec 13 2021, 11:32 PM

Change 746938 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Vue: Unbreak after Vue 3 migration

https://gerrit.wikimedia.org/r/746938

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.13; 2021-12-13).Dec 14 2021, 12:00 AM
gerritbot added a comment.Dec 14 2021, 12:17 AM

Change 746961 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] store: Move $log() calls out of store, into App component

https://gerrit.wikimedia.org/r/746961

gerritbot added a comment.Dec 14 2021, 12:18 AM

Change 746915 had a related patch set uploaded (by Eric Gardner; author: Catrope):

[mediawiki/extensions/MediaSearch@wmf/1.38.0-wmf.12] Vue: Unbreak after Vue 3 migration

https://gerrit.wikimedia.org/r/746915

gerritbot added a comment.Dec 14 2021, 12:28 AM

Change 746915 abandoned by Eric Gardner:

[mediawiki/extensions/MediaSearch@wmf/1.38.0-wmf.12] Vue: Unbreak after Vue 3 migration

Reason:

Not necessary after all, this change can go out on the train

https://gerrit.wikimedia.org/r/746915

Etonkovidova added a comment.Dec 14 2021, 12:40 AM

Checked on commons betalabs - the issue(s) described in the task are not present anymore. There is another bug T297664: [betalabs-commons] MediaSearch - Namespace selector dialog displayed blank which seems to be related.

Maintenance_bot removed a project: Patch-For-Review.Dec 14 2021, 1:10 AM
taavi renamed this task from [betalabs] Media Search - Console errors for loading page and for displaying QuickView to [beta cluster] Media Search - Console errors for loading page and for displaying QuickView.Dec 14 2021, 2:51 PM
egardner moved this task from Doing to Verify on Production on the Structured-Data-Backlog (Current Work) board.Dec 14 2021, 3:54 PM
egardner moved this task from Vue.js Migration Team Radar to Vue.js Migration on the Design-Systems-team-20200324-20220422 board.Dec 14 2021, 4:29 PM
egardner edited projects, added Design-Systems-team-20200324-20220422; removed Design-Systems-team-20200324-20220422 (Vue.js Migration Team Radar).
hashar subscribed.Dec 14 2021, 9:22 PM

1.38.0-wmf.13 has reached group0 wikis (for example https://www.mediawiki.org/ ). If the issue is indeed solved, please mark this task as such ;)

Etonkovidova closed this task as Resolved.Dec 14 2021, 9:23 PM
hashar mentioned this in T293954: 1.38.0-wmf.13 deployment blockers.Dec 15 2021, 4:41 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL