refactor(match2): make a display widget of the match page link

components/match2/wikis/dota2/match_summary.lua

@@ -118,12 +118,8 @@ function CustomMatchSummary.createBody(match)
 	end
 
 	if MatchPage.isEnabledFor(match) then
-		local matchId = match.extradata.originalmatchid or match.matchId
-		local matchPageElement = mw.html.create('center')
-		matchPageElement:wikitext('[[Match:ID_' .. matchId .. '|Match Page]]')
-						:css('display', 'block')
-						:css('margin', 'auto')
-		body:addRow(MatchSummary.Row():css('font-size', '85%'):addElement(matchPageElement):addClass('brkts-popup-mvp'))
+		body.root:node(MatchSummaryWidgets.MatchPageLink{matchId = match.extradata.originalmatchid or match.matchId})
+
 	end
 
 	-- Iterate each map

components/match2/wikis/leagueoflegends/match_summary.lua

@@ -58,12 +58,7 @@ function CustomMatchSummary.createBody(match)
 	end
 
 	if MatchPage.isEnabledFor(match) then
-		local matchId = match.extradata.originalmatchid or match.matchId
-		local matchPageElement = mw.html.create('center')
-		matchPageElement:wikitext('[[Match:ID_' .. matchId .. '|Match Page]]')
-						:css('display', 'block')
-						:css('margin', 'auto')
-		body:addRow(MatchSummary.Row():css('font-size', '85%'):addElement(matchPageElement):addClass('brkts-popup-mvp'))
+		body.root:node(MatchSummaryWidgets.MatchPageLink{matchId = match.extradata.originalmatchid or match.matchId})
 	end
 
 	-- Iterate each map

components/widget/html/widget_html_all.lua

@@ -11,6 +11,7 @@ local Widgets = {}
 local Lua = require('Module:Lua')
 
 Widgets.Abbr = Lua.import('Module:Widget/Html/Abbr')
+Widgets.Center = Lua.import('Module:Widget/Html/Center')
 Widgets.Div = Lua.import('Module:Widget/Html/Div')
 Widgets.Fragment = Lua.import('Module:Widget/Html/Fragment')
 Widgets.Li = Lua.import('Module:Widget/Html/Li')

components/widget/html/widget_html_center.lua

@@ -0,0 +1,23 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Html/Center
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local WidgetHtml = Lua.import('Module:Widget/Html/Base')
+
+---@class WidgetCenter: WidgetHtmlBase
+---@operator call(table): WidgetCenter
+local Center = Class.new(WidgetHtml)
+
+---@return Html
+function Center:render()
+	return self:renderAs('center')
+end
+
+return Center

components/widget/match/summary/widget_match_summary_all.lua

@@ -13,6 +13,7 @@ local Lua = require('Module:Lua')
 Widgets.CharacterBanTable = Lua.import('Module:Widget/Match/Summary/CharacterBanTable')
 Widgets.Characters = Lua.import('Module:Widget/Match/Summary/Characters')
 Widgets.Character = Lua.import('Module:Widget/Match/Summary/Character')
+Widgets.MatchPageLink = Lua.import('Module:Widget/Match/Summary/MatchPageLink')
 Widgets.Mvp = Lua.import('Module:Widget/Match/Summary/Mvp')
 
 return Widgets

components/widget/match/summary/widget_match_summary_match_page_link.lua

@@ -0,0 +1,36 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Match/Summary/MatchPageLink
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Center = HtmlWidgets.Center
+local Link = Lua.import('Module:Widget/Basic/Link')
+local MatchSummaryRow = Lua.import('Module:Widget/Match/Summary/Row')
+
+---@class MatchSummaryMatchPageLink: Widget
+---@operator call(table): MatchSummaryMatchPageLink
+local MatchSummaryMatchPageLink = Class.new(Widget)
+
+---@return Widget?
+function MatchSummaryMatchPageLink:render()
+	if not self.props.matchId then
+		return
+	end
+
+	return MatchSummaryRow{classes = {'brkts-popup-mvp'}, css = {['font-size'] = '85%'}, children =
+		Center{
+			children = Link{link = 'Match:ID_' .. self.props.matchId, children = 'Match Page'},
+			css = {display = 'block', margin = 'auto'},
+		}
+	}
+end
+
+return MatchSummaryMatchPageLink

components/widget/match/summary/widget_match_summary_row.lua

@@ -0,0 +1,32 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Match/Summary/Row
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Div = HtmlWidgets.Div
+
+---@class MatchSummaryRow: Widget
+---@operator call(table): MatchSummaryRow
+local MatchSummaryRow = Class.new(Widget)
+MatchSummaryRow.defaultProps = {
+	classes = {},
+}
+
+---@return Widget
+function MatchSummaryRow:render()
+	return Div{
+		classes = {'brkts-popup-body-element', unpack(self.props.classes)},
+		css = self.props.css,
+		children = self.props.children,
+	}
+end
+
+return MatchSummaryRow