Page MenuHomePhabricator

Metadata dialog: Remove portray.js and build Metadata dialog through conventional Vue templating
Closed, ResolvedPublic

Assigned To
Authored By
Jul 5 2023, 12:03 PM
Referenced Files
F41805074: image.png
Feb 7 2024, 4:29 PM
F41805051: image.png
Feb 7 2024, 4:29 PM
F41796055: image.png
Feb 6 2024, 8:09 PM
F41796049: image.png
Feb 6 2024, 8:09 PM
F41796009: image.png
Feb 6 2024, 8:09 PM
F41795988: image.png
Feb 6 2024, 8:09 PM
F41795967: image.png
Feb 6 2024, 8:09 PM
F41795906: image.png
Feb 6 2024, 8:09 PM



The Metadata dialog body is being built programmatically, using a set of functions of a mixin file called portray.js

This is against Vue conventions and makes the code difficult to understand and test.
This mixin is also fully untested.

Desired behavior/Acceptance criteria

  • Replace the way this component is built and use Vue templates instead.
  • Remove portray.js
  • Add better unit tests for FunctionMetadataDialog.vue

Devices and Design (URLs or screenshots)

Completion checklist

Event Timeline

Jdforrester-WMF lowered the priority of this task from High to Medium.Jul 31 2023, 3:28 PM

@gengh i would like to contribute to this task this week. could you give me more context on the design needs for this dialog? if i'm not mistaken, we're already using cdx-dialog. also, is this the dialog in question?

CleanShot 2024-02-05 at 17.09.37@2x.jpg (1×2 px, 388 KB)

Hi and thank you for your interest! Please check thoroughly (and all of its communication section!). The page covers how to get started, assigning tasks, task status, how to find a codebase, how to create patches, where to ask general development questions and where to get help with setup problems, and how to ask good questions. Thanks a lot! :)

AAlhazwani-WMF changed the task status from Open to In Progress.Feb 6 2024, 2:12 PM
AAlhazwani-WMF claimed this task.
AAlhazwani-WMF moved this task from Backlog to In Progress on the Abstract Wikipedia team board.

started to explore few ideas on how we might improve the content displayed in this dialog. i've been mostly focusing on the information architecture, and not questioning the current content, which is probably out of scope for this task.

this is the current dialog information (don't mind the missing help icon/link, mostly because it's not built-in in the figma component)

image.png (1×2 px, 505 KB)

proposal 1 (desktop dialog, and medium-sized mobile screen):

  • move the test name in the dialog header, w/ the dialog header description prop
  • organize content by section, so that we don't have to repeat eg. "Execution" on every single line
  • link to the implementation
  • link to the error, if any

image.png (1×2 px, 426 KB)
image.png (1×810 px, 154 KB)

proposal 2:

  • everything as above, but
  • organize content with the codex accordion

image.png (1×2 px, 276 KB)
image.png (1×1 px, 224 KB)

propasal 2a:

  • everything as above, and
  • use the codex accordion description prop to display a section preview

image.png (1×2 px, 365 KB)
image.png (1×780 px, 93 KB)

some more updates after a first round of feedback. left is current, centered is proposal with all accordions collapsed, and right is proposal with all accordions expanded

dialog from a function evaluation (try this function widget)

  • content is organized by category (duration, cpu usage, ...), not by section
  • expanded is a bit verbose/not so useful in this specific case, but i'm hoping for the collapsed accordion(s) to provide what's needed without having to expand
    • when you expand, you can consult what the duration/cpu/memory is referring to, in this case to the orchestration
  • server doesn't show a preview/description, mostly because i think is low-prio (?)

image.png (1×2 px, 254 KB)

dialog from an implementation page (tests widget)

  • error accordion is displayed only when there are errors
  • content is organized by category (duration, cpu usage, ...), not by section
    • for numerical info, the accordion description displays the sum of the inner values
  • server/programming language don't have a description, low-prio (?)

image.png (1×2 px, 538 KB)

Change 1000017 had a related patch set uploaded (by Genoveva Galarza; author: Genoveva Galarza):

[mediawiki/extensions/WikiLambda@master] [WIP] Implement new metadata dialog design

Change 1000017 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Implement new metadata dialog design