Add README documentation to ExtensionPage (#3094)

Co-authored-by: Alexander Skvortsov <sasha.skvortsov109@gmail.com>

js/src/admin/components/ExtensionPage.js

@@ -11,6 +11,7 @@ import LoadingModal from './LoadingModal';
 import ExtensionPermissionGrid from './ExtensionPermissionGrid';
 import isExtensionEnabled from '../utils/isExtensionEnabled';
 import AdminPage from './AdminPage';
+import ReadmeModal from './ReadmeModal';
 
 export default class ExtensionPage extends AdminPage {
   oninit(vnode) {
@@ -196,6 +197,22 @@ export default class ExtensionPage extends AdminPage {
       }
     });
 
+    const extension = this.extension;
+    items.add(
+      'readme',
+      Button.component(
+        {
+          icon: 'fab fa-readme',
+          class: 'Readme-link',
+          onclick() {
+            app.modal.show(ReadmeModal, { extension });
+          },
+        },
+        app.translator.trans('core.admin.extension.readme.button_label')
+      ),
+      10
+    );
+
     return items;
   }
 

js/src/admin/components/ReadmeModal.js

@@ -0,0 +1,50 @@
+import app from '../../admin/app';
+import Modal from '../../common/components/Modal';
+import LoadingIndicator from '../../common/components/LoadingIndicator';
+import Placeholder from '../../common/components/Placeholder';
+import ExtensionReadme from '../models/ExtensionReadme';
+
+export default class ReadmeModal extends Modal {
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    app.store.models['extension-readmes'] = ExtensionReadme;
+
+    this.name = this.attrs.extension.id;
+    this.extName = this.attrs.extension.extra['flarum-extension'].title;
+
+    this.loading = true;
+
+    this.loadReadme();
+  }
+
+  className() {
+    return 'ReadmeModal Modal--large';
+  }
+
+  title() {
+    return app.translator.trans('core.admin.extension.readme.title', {
+      extName: this.extName,
+    });
+  }
+
+  content() {
+    const text = app.translator.trans('core.admin.extension.readme.no_readme');
+
+    return (
+      <div className="container">
+        {this.loading ? (
+          <div className="ReadmeModal-loading">{LoadingIndicator.component()}</div>
+        ) : (
+          <div>{this.readme.content() ? m.trust(this.readme.content()) : Placeholder.component({ text })}</div>
+        )}
+      </div>
+    );
+  }
+
+  async loadReadme() {
+    this.readme = await app.store.find('extension-readmes', this.name);
+    this.loading = false;
+    m.redraw();
+  }
+}

js/src/admin/models/ExtensionReadme.js

@@ -0,0 +1,5 @@
+import Model from '../../common/Model';
+
+export default class ExtensionReadme extends Model {
+  content = Model.attribute('content');
+}