=== Jobs to be done
When I see a survey on a wiki project I want to be able to understand if this survey is from the Foundation and why it is being shown So I can safely reply or dismiss it.
==== Background info
Right now a user has no context on how or why a survey is being displayed in their experience. This task wants to explore a possible solution to address this issue.
We are evaluating if we are able to work on this feature. If not we are going to fallback to {T294363}.
=== Design proposal
{F34712035}
Additional specs can be provided if we decide to follow up on this feature.
=== Technical information
In terms of implementation, we should avoid implementing our own popups, given WVUI doesn't have a popup component. We should probably try to integrate the OOUI popup or other existing popups in the Vue component to re-use it.
=== Testing and QA steps
- TBD e.g. beta cluster
=== Original Acceptance Criteria
- [] When a user clicks the info "i" button the popup dialog is displayed
- [] When a user navigates with their keyboard/TAB navigation, she can focus the "i" button and press ENTER to open the popup dialog
- [] When a user clicks on any of the links inside the popup dialog a new tab is open and the popup dialog is dismissed
- [] When a user clicks the close "x" of the popup dialog the dialog is dismissed
- [] When a user clicks outside of the popup dialog the dialog is dismissed
=== Questions for Spike ===
- [] Is Option A the best for the user (as the info window obscures the questions)?
- I am not sure about this as it seems to be a designer question. The ability to place window will be dependent on library script library used
- [] How do we signify the tooltip should be included (maybe a span class), and then also how to add the translation key (likely as a config value)?
- Several options suggested. Mainly focused on backend and needing to update WikimediaMessages, en.json file. Feel like this should be determined by the developer, but the data for front end for the JavaScript to display data should follow what has happened in previous additions to QuickSurvey
- [] How do we use OOUI.js when we aren't currently using it in QuickSurvey?
- We are not sure, may be able to just add it after other JavaScript libraries, but this would need to be tested. We may need to rewrite the view layer, and perhaps some to make the buttons correct size.
- Jason, Essex and Ellen discussed and believe that this is probably another spike, concerning what would need to happen to bring in OOUI.js and the ramifications on the code base
=== Analysis for Spike ===
Technical Spike
Assumptions Choice A 2
Assumptions Choice B and C 3
OOUI JavaScript library with B and C 3
Conclusion/Recommendations 4
How about JavaScript stand alone 4
https://phabricator.wikimedia.org/T294354
SPIKE [8hrs]
Display an info pop-up button next to the survey question
ID
Proposal
Pros
Cons
A
Add an additional link to the meta page of the survey next to the link to the privacy statement
Easy implementation engineering-wise.
Survey authors do not need to be concerned with how additional information may impact survey layout
Reduced QA required per survey, leading to more sustainable deployments
Additional info on meta will not need to go through the slow i18n deployment process with wikimediamessages and translatewiki.
Please read https://phabricator.wikimedia.org/T300293
Users need to leave the page to find out more. Smaller text at the bottom is usually identified as not so useful legal text. The working might also need to be more self explanatory: what am I going to find on this "meta page"?
B
Display an info button next to the survey question
Additional information is immediately accessible and contextual.
Interaction might not be explicit even if the info button is an established design pattern. Implementation is more complex, eg. hover vs touch interaction with a small input area.
Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering
Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki.
Please read https://phabricator.wikimedia.org/T300293
C
Display an info button next to the privacy
pla statement
Secondary information is provided as a secondary interaction.
Interaction is less obvious as the info icon can feel like a simple signifier for the footer text.
Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering
Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki.
Please read https://phabricator.wikimedia.org/T300293
Assumptions Choice A
It is assumed that the string to display the metadata will be of unknown length. There would be no limit on the amount of text in the metadata due to look/feel issues.
It is assumed that the metadata will be located on a stand alone page.
It is assumed that the metadata will have translations prior to implementation.
Assumptions Choice B and C
It is assumed that the string to display the metadata will be of limited length. The display text in examples B and C are approximately 245 characters long.
It is assumed that the string to display the metadata header will be of limited length. The header text in examples B and C are approximately 20 characters long.
NOTE - If the data set (content or text) is to be larger, recommend that example A be followed.
Files which may be touched in code changes for options B and C:
extension.json
includes/Hooks.php
includes/Rest/SurveyMessagesHandler.php (NEW file from https://gerrit.wikimedia.org/r/c/mediawiki/extensions/QuickSurveys/+/745947)
resources/ext.quicksurveys.lib/lib.js
resources/ext.quicksurveys.lib/vue/QuickSurvey.vue
resources/ext.quicksurveys.lib/vue/render.js
resources/ext.quicksurveys.lib/vue/utils.js
tests/jest/render.test.js
tests/phpunit/unit/Rest/SurveyMessagesHandlerTest.php ---- test file
Changes will most likely need to be made to the view| ID|Proposal |Pros|Cons |
extensions/QuickSurveys/resources/ext.quicksurveys.lib/vue/QuickSurvey.vue|A|Add an additional link to the meta page of the survey next to the link to the privacy statement.{F34946768}|Easy implementation engineering-wise. Survey authors do not need to be concerned with how additional information may impact survey layout. Reduced QA required per survey, leading to more sustainable deployments. Additional info on meta will not need to go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293|Users need to leave the page to find out more. Smaller text at the bottom is usually identified as not so useful legal text. The working might also need to be more self explanatory: what am I going to find on this "meta page"?|
And perhaps additional css values|B|Display an info button next to the survey question {F34946770}|Additional information is immediately accessible and contextual.| Interaction might not be explicit even if the info button is an established design pattern. Implementation is more complex, eg. hover vs touch interaction with a small input area. Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering. Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293|
OOUI JavaScript library with B and C|C|Display an info button next to the privacy {F34946772}|Secondary information is provided as a secondary interaction.|Interaction is less obvious as the info icon can feel like a simple signifier for the footer text. Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering. Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293|
If option B or C is used, AND it is decided to bring in the OOUI javascript library, then the library will need to be brought into the codebase. More information is located here:
https://www.mediawiki.org/wiki/Vue.js/OOUI_migration_guide?useskin=vector-2022
https://www.mediawiki.org/wiki/OOUI?useskin=vector-2022
Please note: There is a folder, located at resources/lib/ooui
The reader is encouraged to read resources/lib/ooui/README.md, in case the library must be installed.
Conclusion/Recommendations
If the data on meta is to be over a specific length, then option A would be the most appropriate selection. If the additional information needs to be updated on an ongoing basis, then option A would also be a good choice. Otherwise, B or C would be more inline with current web standards. Option C is basically the same as option B, with the exception of the Z index.
The OOUI library seems to be needed to be brought into the code base to accomplish the popup or tooltip - this library also includes all the css and images which would go with the code change.
How about JavaScript stand alone with B or C
From https://www.educba.com/javascript-tooltip/
Examples of JavaScript Tooltip
Below are some of the examples for tooltip in javascript:
Tooltip feature with toggle () function:
HTML Code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Example</title>
<link rel="stylesheet" href="ToolTip.css" >
</head>
<body>
<h2>ToolTip</h2>
<div class="class" onclick="getMyToolTipFunction()">Hey Click Me to Open ToolTip
<span class="displayText" id="displayText">Hi I am ToolTip</span>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code:
body {
background: green;
text-align: center;
color: blue;
}
.class {
-webkit-user-select: none;
position: relative;
}
.displayText {
position: absolute;
bottom: -230%;
left: 50%;
margin-left: -80px;
width: 160px;
background-color: aqua;
color: #fff;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
visibility: hidden;
}
.displayText::before {
content: "";
border-width: 5px;
border-style: solid;
top: -28%;
left: 45%;
border-color: transparent transparent yellow transparent;
position: absolute;
}
.show {
visibility: visible;
}
JavaScript Code:
function getMyToolTipFunction () {
var popup = document.getElementById("displayText");
popup.classList.toggle("show");
}
```