Rewrite AdminPage abstract component into Typescript (#2996)

* Rewrite AdminPage.js into Typescript

* Export more interfaces and types

* Use Stream type

* Update js/src/admin/components/AdminPage.tsx

Co-authored-by: Sami Mazouz <[email protected]>

* Move `HTMLInputTypes` type to global declarations

* Add missing app import

* Export options interface

* Remove unused method

* Add random element ID generator

* Add attrs for Page component

Full rewrite needed later

* Provide correct attrs

* Add missing a11y attributes for help text and labels

* Update TSDoc comment

* Allow Children to be passed for label/help text

* Extract setting types to arrays

* Make Page class abstract; fix incorrect Component generic call

* Mark AdminPage as abstract

* Mark `content` as abstract

* Revert "Move `HTMLInputTypes` type to global declarations"

This reverts commit c900cb3.

* Restore TSDoc on HTMLInputTypes type

* Fix typo

Co-authored-by: Sami Mazouz <[email protected]>

js/package.json

@@ -13,6 +13,7 @@
     "jquery": "^3.6.0",
     "jquery.hotkeys": "^0.1.0",
     "mithril": "^2.0.4",
+    "nanoid": "^3.1.25",
     "punycode": "^2.1.1",
     "textarea-caret": "^3.1.0",
     "throttle-debounce": "^3.0.1"

js/src/admin/compat.js

@@ -34,12 +34,14 @@ import EditCustomCssModal from './components/EditCustomCssModal';
 import EditGroupModal from './components/EditGroupModal';
 import routes from './routes';
 import AdminApplication from './AdminApplication';
+import generateElementId from './utils/generateElementId';
 
 export default Object.assign(compat, {
   'utils/saveSettings': saveSettings,
   'utils/ExtensionData': ExtensionData,
   'utils/isExtensionEnabled': isExtensionEnabled,
   'utils/getCategorizedExtensions': getCategorizedExtensions,
+  'utils/generateElementId': generateElementId,
   'components/SettingDropdown': SettingDropdown,
   'components/EditCustomFooterModal': EditCustomFooterModal,
   'components/SessionDropdown': SessionDropdown,