ui: allow manually set legacy mode

packages/ui-default/index.ts

@@ -3,8 +3,8 @@
 import crypto from 'crypto';
 import esbuild from 'esbuild';
 import {
-  ContestModel, Context, fs, Handler, Logger, ObjectID, PERM, PRIV, ProblemModel, Schema,
-  SettingModel, SystemModel, SystemSettings, UiContextBase, UserModel,
+  ContestModel, Context, fs, Handler, Logger, ObjectID, param, PERM, PRIV, ProblemModel, Schema,
+  SettingModel, SystemModel, SystemSettings, Types, UiContextBase, UserModel,
 } from 'hydrooj';
 import { debounce } from 'lodash';
 import { tmpdir } from 'os';
@@ -135,13 +135,23 @@ class SetThemeHandler extends Handler {
   }
 }
 
+class LegacyModeHandler extends Handler {
+  noCheckPermView = true;
+
+  @param('legacy', Types.Boolean)
+  async get(domainId: string, legacy = false) {
+    this.session.legacy = legacy;
+    this.back();
+  }
+}
+
 class MarkdownHandler extends Handler {
   noCheckPermView = true;
 
-  async post({ text, html = false, inline = false }) {
+  async post({ text, inline = false }) {
     this.response.body = inline
-      ? markdown.renderInline(text, html)
-      : markdown.render(text, html);
+      ? markdown.renderInline(text)
+      : markdown.render(text);
     this.response.type = 'text/html';
     this.response.status = 200;
   }
@@ -247,6 +257,7 @@ export function apply(ctx: Context) {
   ctx.Route('wiki_help', '/wiki/help', WikiHelpHandler);
   ctx.Route('wiki_about', '/wiki/about', WikiAboutHandler);
   ctx.Route('set_theme', '/set_theme/:theme', SetThemeHandler);
+  ctx.Route('set_legacy', '/legacy', LegacyModeHandler);
   ctx.Route('constant', '/constant/:version', UiConstantsHandler);
   ctx.Route('markdown', '/markdown', MarkdownHandler);
   ctx.Route('config_schema', '/manage/config/schema.json', SystemConfigSchemaHandler, PRIV.PRIV_EDIT_SYSTEM);

packages/ui-default/package.json

@@ -10,9 +10,11 @@
   "scripts": {
     "lint": "eslint"
   },
+  "hydro": {
+    "cli": false
+  },
   "devDependencies": {
     "@blueprintjs/core": "4.13.0",
-    "@blueprintjs/select": "4.8.12",
     "@fontsource/dm-mono": "^4.5.10",
     "@fontsource/fira-code": "^4.5.12",
     "@fontsource/inconsolata": "^4.5.9",
@@ -118,7 +120,6 @@
     "markdown-it-mark": "^3.0.1",
     "markdown-it-merge-cells": "^2.0.0",
     "markdown-it-table-of-contents": "^0.6.0",
-    "mongodb": "^3.7.3",
     "nunjucks": "^3.2.3",
     "schemastery-jsonschema": "^1.0.3",
     "streamsaver": "^2.0.6",

packages/ui-default/templates/components/noscript_note.html

@@ -1,5 +1,5 @@
 {% macro render() %}
-{% if not isIE(handler.request.headers['user-agent']) %}
+{% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
 <noscript><div class="section__body no-padding">
   <blockquote class="warn">
     <p>{{ _('This page needs JavaScript to work.') }}</p>

packages/ui-default/templates/layout/html5.html

@@ -32,7 +32,7 @@
       --code-font-family: "{{ UserContext.codeFontFamily }}", "monaco", "Source Code Pro", "Consolas", "Lucida Console", "monospace";
       --font-ligatures: {{ "normal" if UserContext.codeFontLigatures else "none" }} !important;
     }
-    {% if not isIE(handler.request.headers['user-agent']) %}
+    {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
       #panel { display: flex; flex-direction: column; }
     {% endif %}
   </style>
@@ -42,7 +42,7 @@
     <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}default-{{ global.Hydro.version['ui-default'] }}.theme.css">
     <link rel="stylesheet" media="all" href="{{ UiContext.cdn_prefix }}hydro.css">
   {% endif %}
-  {% if not isIE(handler.request.headers['user-agent']) %}
+  {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
     <script>
       var _htmlNode = document.documentElement;
       _htmlNode.className = _htmlNode.className.replace(' nojs', ' hasjs');
@@ -59,7 +59,7 @@
 </head>
 <body>
   {% block body %}{% endblock %}
-  {% if not isIE(handler.request.headers['user-agent']) %}
+  {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
     <script>
       var UiContext = '{{ UiContext|json|jsesc|safe }}';
       var UserContext = '{{ UserContext|json|jsesc|safe }}';

packages/ui-default/templates/partials/footer.html

@@ -57,6 +57,7 @@
             {%- endfor -%}
             </ol>
           </li>
+          <li class="footer__extra-link-item"><a href="/legacy?legacy=true">{{ _('Enable legacy mode') }}</a></li>
           <li class="footer__extra-link-item nojs--hide" data-dropdown-target="#menu-footer-theme">
             <span><span class="icon icon-global"></span> {{ _('Theme') }} <span class="icon icon-expand_less"></span></span>
             <ol class="dropdown-target menu" id="menu-footer-theme">

packages/ui-default/utils/loadReactRedux.ts

@@ -1,13 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import type { Action, AnyAction, Reducer } from 'redux';
 
 export default async function loadReactRedux<S, A extends Action = AnyAction>(storeReducer: Reducer<S, A>) {
-  const React = await import('react');
-  const { createRoot } = await import('react-dom/client');
-  const { Provider } = await import('react-redux');
-  const { createStore, applyMiddleware } = await import('redux');
-  const { default: reduxThunk } = await import('redux-thunk');
-  const { default: reduxPromise } = await import('redux-promise-middleware');
-
+  const [{ Provider }, { createStore, applyMiddleware }, { default: reduxThunk }, { default: reduxPromise }] = await Promise.all([
+    import('react-redux'),
+    import('redux'),
+    import('redux-thunk'),
+    import('redux-promise-middleware'),
+  ]);
   const reduxMiddlewares = [];
   reduxMiddlewares.push(reduxThunk);
   reduxMiddlewares.push(reduxPromise);