Instance-wide (global) info banner and maintenance mode (#36571)

The banner allows site operators to communicate important announcements
(e.g., maintenance windows, policy updates, service notices) directly
within the UI.

The maintenance mode only allows admin to access the web UI.

* Fix #2345
* Fix #9618

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/admin/config_settings/config_settings.tmpl

@@ -1,7 +1,7 @@
-{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config")}}
+{{template "admin/layout_head" (dict "ctxData" . "pageClass" "admin config" "dataGlobalInit" "initAdminConfigSettings")}}
 
-{{template "admin/config_settings/avatars" .}}
-
-{{template "admin/config_settings/repository" .}}
+	{{template "admin/config_settings/avatars" .}}
+	{{template "admin/config_settings/repository" .}}
+	{{template "admin/config_settings/instance" .}}
 
 {{template "admin/layout_footer" .}}

templates/admin/config_settings/instance.tmpl

@@ -0,0 +1,63 @@
+<h4 class="ui top attached header">{{ctx.Locale.Tr "admin.config.instance_maintenance"}}</h4>
+<div class="ui attached segment">
+	<form class="ui form ignore-dirty system-config-form" method="post" action="{{AppSubUrl}}/-/admin/config">
+		{{$cfgOpt := $.SystemConfig.Instance.MaintenanceMode}}
+		{{$cfgKey := $cfgOpt.DynKey}}
+		{{$maintenanceMode := $cfgOpt.Value ctx}}
+		<input type="hidden" data-config-dyn-key="{{$cfgKey}}" data-config-value-json="{{JsonUtils.EncodeToString $maintenanceMode}}">
+		<div class="field">
+			<div class="ui checkbox tw-mb-2">
+				<input type="checkbox" name="{{$cfgKey}}.AdminWebAccessOnly" value="true" {{if $maintenanceMode.AdminWebAccessOnly}}checked{{end}} data-config-value-type="boolean">
+				<label>{{ctx.Locale.Tr "admin.config.instance_maintenance_mode.admin_web_access_only"}}</label>
+			</div>
+		</div>
+		<div class="field">
+			<div class="fields tw-mb-1">
+				<div class="field">
+					<label>{{ctx.Locale.Tr "admin.config.common.start_time"}}</label>
+					<input type="datetime-local" name="{{$cfgKey}}.StartTimeUnix" data-config-value-type="timestamp">
+				</div>
+				<div class="field">
+					<label>{{ctx.Locale.Tr "admin.config.common.end_time"}}</label>
+					<input type="datetime-local" name="{{$cfgKey}}.EndTimeUnix" data-config-value-type="timestamp">
+				</div>
+			</div>
+			<div class="help">{{ctx.Locale.Tr "admin.config.common.skip_time_check"}}</div>
+		</div>
+
+		<div class="divider"></div>
+
+		{{$cfgOpt = $.SystemConfig.Instance.WebBanner}}
+		{{$cfgKey = $cfgOpt.DynKey}}
+		{{$banner := $cfgOpt.Value ctx}}
+		<input type="hidden" data-config-dyn-key="{{$cfgKey}}" data-config-value-json="{{JsonUtils.EncodeToString $banner}}">
+		<div class="field">
+			<div class="ui checkbox tw-mb-2">
+				<input type="checkbox" name="{{$cfgKey}}.DisplayEnabled" value="true" {{if $banner.DisplayEnabled}}checked{{end}} data-config-value-type="boolean">
+				<label>{{ctx.Locale.Tr "admin.config.instance_web_banner.enabled"}}</label>
+			</div>
+			{{template "shared/combomarkdowneditor" (dict
+				"ContainerClasses" "web-banner-content-editor"
+				"TextareaName" (print $cfgKey ".ContentMessage")
+				"TextareaContent" $banner.ContentMessage
+				"TextareaPlaceholder" (ctx.Locale.Tr "admin.config.instance_web_banner.message_placeholder")
+			)}}
+		</div>
+		<div class="field">
+			<div class="fields tw-mb-1">
+				<div class="field">
+					<label>{{ctx.Locale.Tr "admin.config.common.start_time"}}</label>
+					<input type="datetime-local" name="{{$cfgKey}}.StartTimeUnix" data-config-value-type="timestamp">
+				</div>
+				<div class="field">
+					<label>{{ctx.Locale.Tr "admin.config.common.end_time"}}</label>
+					<input type="datetime-local" name="{{$cfgKey}}.EndTimeUnix" data-config-value-type="timestamp">
+				</div>
+			</div>
+			<div class="help">{{ctx.Locale.Tr "admin.config.common.skip_time_check"}}</div>
+		</div>
+		<div class="field">
+			<button class="ui primary button">{{ctx.Locale.Tr "save"}}</button>
+		</div>
+	</form>
+</div>

templates/admin/config_settings/repository.tmpl

@@ -2,24 +2,23 @@
 	{{ctx.Locale.Tr "repository"}}
 </h4>
 <div class="ui attached segment">
-	<form class="ui form form-fetch-action" method="post" action="{{AppSubUrl}}/-/admin/config">
+	<form class="ui form system-config-form" method="post" action="{{AppSubUrl}}/-/admin/config">
+		{{$cfg := .SystemConfig.Repository.OpenWithEditorApps}}
 		<div class="field">
 			<details>
 				<summary>{{ctx.Locale.Tr "admin.config.open_with_editor_app_help"}}</summary>
-				<pre class="tw-px-4">{{.DefaultOpenWithEditorAppsString}}</pre>
+				<pre class="tw-px-4">{{$cfg.DefaultValue.ToTextareaString}}</pre>
 			</details>
 		</div>
 		<div class="field">
-			{{$cfg := .SystemConfig.Repository.OpenWithEditorApps}}
-			<input type="hidden" name="key" value="{{$cfg.DynKey}}">
-			<textarea name="value">{{($cfg.Value ctx).ToTextareaString}}</textarea>
+			{{/* TODO: OPEN-WITH-EDITOR-APP-JSON: use a simple textarea */}}
+			<textarea name="{{$cfg.DynKey}}">{{if $cfg.HasValue ctx}}{{($cfg.Value ctx).ToTextareaString}}{{end}}</textarea>
 		</div>
 
+		{{$cfg = .SystemConfig.Repository.GitGuideRemoteName}}
 		<div class="field">
 			<label>{{ctx.Locale.Tr "admin.config.git_guide_remote_name"}}</label>
-			{{$cfg = .SystemConfig.Repository.GitGuideRemoteName}}
-			<input type="hidden" name="key" value="{{$cfg.DynKey}}">
-			<input name="value" value="{{$cfg.Value ctx}}" placeholder="{{$cfg.DefaultValue}}" maxlength="100" dir="auto" required pattern="^[A-Za-z0-9][\-_A-Za-z0-9]*$">
+			<input name="{{$cfg.DynKey}}" value="{{$cfg.Value ctx}}" placeholder="{{$cfg.DefaultValue}}" maxlength="100" dir="auto" required pattern="^[A-Za-z0-9][\-_A-Za-z0-9]*$">
 		</div>
 		<div class="field">
 			<button class="ui primary button">{{ctx.Locale.Tr "save"}}</button>

templates/admin/layout_head.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .ctxData}}
-<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
+<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}" {{if .dataGlobalInit}}data-global-init="{{.dataGlobalInit}}"{{end}}>
 	<div class="ui container fluid padded flex-container">
 		{{template "admin/navbar" .ctxData}}
 		<div class="flex-container-main">

templates/base/head_banner.tmpl

@@ -0,0 +1,11 @@
+{{$banner := ctx.CurrentWebBanner}}
+{{if $banner}}
+<div class="ui info message web-banner-container">
+	<div class="render-content markup web-banner-content">
+		{{ctx.RenderUtils.MarkdownToHtml $banner.ContentMessage}}
+	</div>
+	<button type="button" class="btn dismiss-banner link-action" aria-label="{{ctx.Locale.Tr "dismiss"}}" data-url="{{AppSubUrl}}/-/web-banner/dismiss">
+		{{svg "octicon-x"}}
+	</button>
+</div>
+{{end}}

templates/base/head_navbar.tmpl

@@ -176,3 +176,4 @@
 		</div>
 	{{end}}
 </nav>
+{{template "base/head_banner"}}

templates/shared/combomarkdowneditor.tmpl

@@ -4,7 +4,7 @@
 * ContainerClasses: additional classes for the container element
 * MarkdownPreviewInRepo: the repo to preview markdown
 * MarkdownPreviewContext: preview context (the related url path when rendering) for the preview tab, eg: repo link or user home link
-* MarkdownPreviewMode: content mode for the editor, eg: wiki, comment or default
+* MarkdownPreviewMode: content mode for the editor, eg: wiki, comment or default, can be disabled by "none"
 * TextareaName: name attribute for the textarea
 * TextareaContent: content for the textarea
 * TextareaMaxLength: maxlength attribute for the textarea
@@ -29,10 +29,12 @@
 		data-preview-url="{{$previewUrl}}"
 		data-preview-context="{{$previewContext}}"
 >
+	{{if ne $previewMode "none"}}
 	<div class="ui top tabular menu">
 		<a class="active item" data-tab-for="markdown-writer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "write")}}</a>
 		<a class="item" data-tab-for="markdown-previewer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
 	</div>
+	{{end}}
 	<div class="ui tab active" data-tab-panel="markdown-writer">
 		<markdown-toolbar>
 			<div class="markdown-toolbar-group">
@@ -87,9 +89,9 @@
 	</div>
 	<div class="markdown-add-table-panel tippy-target">
 		<div class="ui form tw-p-4 flex-text-block">
-			<input type="number" name="rows" min="1" value="3" size="3" class="tw-w-24" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.rows"}}">
+			<input type="number" min="1" value="3" size="3" class="add-table-rows tw-w-24" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.rows"}}">
 			x
-			<input type="number" name="cols" min="1" value="3" size="3" class="tw-w-24" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.cols"}}">
+			<input type="number" min="1" value="3" size="3" class="add-table-cols tw-w-24" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.cols"}}">
 			<button class="ui button primary" type="button">{{ctx.Locale.Tr "editor.buttons.table.add.insert"}}</button>
 		</div>
 	</div>