wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-13 17:57:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/stories/skin.stories.data.js

115 lines
5.6 KiB
JavaScript
Raw Normal View History

Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
import { htmluserlangattributes } from './utils';
import { placeholder } from './utils';
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
import { PERSONAL_MENU_TEMPLATE_DATA, personalMenuTemplate } from './PersonalMenu.stories.data';
import { pageActionsData, namespaceTabsData, vectorTabsTemplate } from './VectorTabs.stories.data';
import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
Rename Storybook Files to Reflect Their Respective Component * Following up on the work from Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619, this commit renames the storybook files/storybook names to their respective component name. e.g. personalNavigation.stories.js => PersonalMenu.stories.js Bug: T243281 Change-Id: I68054663c5a597f90a826b6f75bf399382dca609
2020-02-28 22:17:31 +00:00
import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
import { logoTemplate } from './Logo.stories.data';
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const NAVIGATION_TEMPLATE_DATA = {
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
loggedInWithVariantsAndOptOut: {
'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespace-tabs': namespaceTabsData,
'data-page-actions': pageActionsData,
'data-variants': variantsData,
'data-search-box': searchBoxData,
'data-sidebar': SIDEBAR_DATA.withPortalsAndOptOut,
'html-navigation-heading': 'Navigation menu',
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
},
loggedOutWithVariants: {
'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
'data-namespace-tabs': namespaceTabsData,
'data-page-actions': pageActionsData,
'data-variants': variantsData,
'data-search-box': searchBoxData,
'data-sidebar': SIDEBAR_DATA.withPortals,
'html-navigation-heading': 'Navigation menu',
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
},
loggedInWithMoreActions: {
'data-personal-menu': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
'data-namespace-tabs': namespaceTabsData,
'data-page-actions': pageActionsData,
'data-page-actions-more': moreData,
'data-search-box': searchBoxData,
'data-sidebar': SIDEBAR_DATA.withPortals,
'html-navigation-heading': 'Navigation menu',
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
}
};
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
Logo: logoTemplate,
Drop the Navigation component It is not the most useful of components and adds an additional layer of complexity similar to multiple inheritance chains that we find in Object oriented programming. I suggest we use index.mustache going forward for laying out the different components and use components/template partials for reusable components. Change-Id: I6fd5fe1c3d3826d737ccd8ed5a38890305664876
2020-03-25 20:57:46 +00:00
SearchBox: searchBoxTemplate,
Sidebar: sidebarTemplate,
VectorTabs: vectorTabsTemplate,
VectorMenu: vectorMenuTemplate,
PersonalMenu: personalMenuTemplate,
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
Footer: footerTemplate
} );
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
<div id="mw-indicator-good-star" class="mw-indicator">
<a href="/wiki/Wikipedia:Good_articles"
title="This is a good article. Follow the link for more information.">
<img alt="This is a good article. Follow the link for more information."
src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
</a>
</div>
<div id="mw-indicator-pp-autoreview" class="mw-indicator">
<a href="/wiki/Wikipedia:Protection_policy#pending"
title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
</a>
</div>
</div>
`;
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const LEGACY_TEMPLATE_DATA = {
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'html-title': 'Vector 2019',
'page-isarticle': true,
'msg-tagline': 'From Wikipedia, the free encyclopedia',
'html-userlangattributes': htmluserlangattributes,
'msg-jumptonavigation': 'Jump to navigation',
'msg-jumptosearch': 'Jump to search',
// site specific
Use template partials rather than HTML strings CHANGES to index.mustache: Changes can be understood by looking at the diff of the file stories/skin.stories.js The additional changes in stories folder export the data passed to those templates. A new file is used as exporting any variable in a file suffixed stories.js will be assumed to be a story entry. The changes to index.mustache are as follows: * html-footer is replaced with data-footer and Footer component is rendered via template partial * html-navigation is replaced with data-navigation and Navigation component is rendered via template partial CHANGES to Navigation.mustache: Changes are best explained by looking at the diff to stories/navigation.stories.js and navigation.stories.data.js * html-personal-menu is replaced with data-personal-menu Bug: T245456 Change-Id: Ie96e92447a932b8a7f3844df277a1d31a2af423c
2020-02-17 19:49:43 +00:00
'data-footer': FOOTER_TEMPLATE_DATA,
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746
2020-01-09 22:11:00 +00:00
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
// article dependent
'html-bodycontent': placeholder( 'Article content goes here' ),
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ),
// extension dependent..
'html-hook-vector-before-footer': placeholder( 'VectorBeforeFooter hook output', 100 ),
'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
'html-indicators': HTML_INDICATORS,
'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
};
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
export const MODERN_TEMPLATE_DATA = {
Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions This commit is singularly focused on adding a link to the sidebar for Vector, logged-in users. It does the bare minimum to fulfill the requirements of T243281. Additionally, it will help to answer the question "Do we need to use abstractions (other than maybe different templates) to separate Legacy Vector from Vector" by intentionally leaving out any abstractions in order to make it easier to compare with a follow-up patch (Ib2ef15180df73360cc1de25b893e49d415d23e1a) which does use abstractions. It is a good thing to question whether or not we need addtional abstractions in VectorTemplate and if they will help us as unnecessary abstractions can have the opposite effect and just lead to further frustrations down the road. Therefore, I urge you, the reviewer, to let me know your thoughts! If abstractions are viewed as not making our lives any easier, the follow-up patches may be completely discarded and that's totally okay with me. :) I think it's a good think to talk about now though. Important changes: * The VectorTemplate constructor was changed to allow injecting the config, templateParser, and isLegacy boolean (only the config was allowed before this commit). According to MediaWiki's Stable Interface Policy, "Constructor signatures are generally considered unstable unless explicitly declared stable for calling" [3]. Given that VecorTemplate's constructor is not marked as stable, it is justified to do this without warning according to the policy. * Due to the above, the 'setTemplate' method is no longer needed and was marked as deprecated. * VectorTemplateTest was made to adapt to the new VectorTemplate constructor. Additionally, it now extends from MediaWikiIntegrationTestCase which my intelliphense server can pick up. I *think* MediaWikiTestCase is just an alias to MediaWikiIntegrationTestCase [1] and MediaWikiTestCase file was renamed to MediaWikiIntegrationTestCase in [2], but I'm willing to change it back if there is pushback to this. Open questions: * What are VectorTemplate's responsibilities? To me, it acts right now as a controller (because it echos the full HTML string from the template), a model (because SkinTemplate::prepareQuickTemplate sets data on it which it later retrieves through `$this->get()`), a presenter (because it adds data tailored for a web-centric view), and a view (because it renders HTML strings instead of letting the view/template be solely responsible for that). Arguably, some business logic might be mixed in there as well (because it checks to see if a User is logged in/has necessary permissions to show x which my changes here add to). This might not be a problem if we keep VectorTemplate relatively small, but will it remain this way as we progress further in Desktop Improvements? * How do we write tests for VectorTemplate without exposing unnecessary public methods? For example, if I want to test the `getSkinData()` method to see what state will be sent to the template, how should I do this? One option might be to use `TestingAccessWrapper` to expose these private methods which is what `VectorTemplateTest::testbuildViewsProps()` does. Another option is to accept this method as public. Is there a better way? Keep in mind that even with access to this method, there might be many things to mock. [1] https://github.com/wikimedia/mediawiki/blob/0030cb525be6cabc1d63de80586b2017d4bbe354/tests/common/TestsAutoLoader.php#L64 [2] Ie717b0ecf4fcfd089d46248f14853c80b7ef4a76 [3] https://www.mediawiki.org/wiki/Stable_interface_policy Bug: T243281 Change-Id: I0571b041bcd7f19bec9f103fa7bccdd093f6394d
2020-03-17 20:21:33 +00:00
'html-title': 'Vector 2020',
'page-isarticle': true,
'msg-tagline': 'From Wikipedia, the free encyclopedia',
'html-userlangattributes': htmluserlangattributes,
'msg-jumptonavigation': 'Jump to navigation',
'msg-jumptosearch': 'Jump to search',
// site specific
'data-footer': FOOTER_TEMPLATE_DATA,
'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
// article dependent
'html-bodycontent': placeholder( 'Article content goes here' ),
'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 )
[modern] A new version of Vector with a new logo Changes to support feature: * ResourceLoaderSkinModule logo features are dropped * New layout provided given the fork in layout between legacy and new. * Legacy sidebar styles now pulled out * breakpoint styles are not carried over from legacy Vector The new Vector layout for now has one breakpoint. Changes to storybook: * The storybook script now pulls down image assets so that the logos can be shown in storybook. The script is adjusted to make use of a static folder to serve these images. Note: * The legacy mode is not touched as part of this patchset. * The personal menu is unaffected by this patch and is out of scope. * The alignment issue is noted, but will be solved at a later date. * Changes to portal are out of scope. * Adding storybook for modern descoped, given its not possible to load both legacy layout and modern layout inside a storybook at current time. Sample config: $wgLogos = [ 'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png', 'tagline' => [ 'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg', 'width' => 117, 'height' => 13, ], '1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png', 'wordmark' => [ 'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 116, 'height' => 18, ], ]; Coauthor: Aron Manning Bug: T246170 Change-Id: Ibc4b055150761388a6b78f9127da342c451ce0e7
2020-03-09 05:51:00 +00:00
};
Reference in a new issue Copy permalink