MM-40214: Add App Bar icon (#214)

* go get -u golang.org/x/sys * Fix CI * Add App Bar icon * Fix errors found by linter * Allow arrow functions in eslint's func-style rule * fix type mismatch at redux Provider Co-authored-by: Ngoan Tran <[email protected]>
mattermost-community · Jun 16, 2022 · 43dae89 · 43dae89
1 parent d56ea37
commit 43dae89
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/Makefile b/Makefile
@@ -63,7 +63,7 @@ endif
 ## Ensures NPM dependencies are installed without having to run this all the time.
 webapp/.npminstall: webapp/package.json
 ifneq ($(HAS_WEBAPP),)
-	cd webapp && $(NPM) install
+	cd webapp && $(NPM) install --verbose
 	touch $@
 endif
 
@@ -92,7 +92,7 @@ ifneq ($(wildcard $(ASSETS_DIR)/.),)
 	cp -r $(ASSETS_DIR) dist/$(PLUGIN_ID)/
 endif
 ifneq ($(HAS_PUBLIC),)
-	cp -r public/ dist/$(PLUGIN_ID)/
+	cp -r public/ dist/$(PLUGIN_ID)/public/
 endif
 ifneq ($(HAS_SERVER),)
 	mkdir -p dist/$(PLUGIN_ID)/server/dist;

diff --git a/public/app-bar-icon.png b/public/app-bar-icon.png
diff --git a/webapp/.eslintrc.json b/webapp/.eslintrc.json
@@ -56,7 +56,7 @@
         "func-call-spacing": [2, "never"],
         "func-name-matching": 0,
         "func-names": 2,
-        "func-style": [2, "declaration"],
+        "func-style": [2, "declaration", {"allowArrowFunctions": true}],
         "generator-star-spacing": [2, {"before": false, "after": true}],
         "global-require": 2,
         "guard-for-in": 2,

diff --git a/webapp/src/components/root_portal.tsx b/webapp/src/components/root_portal.tsx
@@ -12,6 +12,14 @@ type Props = {
     children: React.ReactNode,
 }
 
+export class InjectionProvider extends React.Component<any> {
+    public render(): JSX.Element {
+        const stores = {...this.props};
+        delete stores.children;
+        return React.createElement(Provider as any, stores, this.props.children);
+    }
+}
+
 export default class RootPortal {
     el: HTMLElement;
     store: any;
@@ -38,11 +46,11 @@ export default class RootPortal {
         const rootPortal = document.getElementById('root-portal');
         if (rootPortal) {
             ReactDOM.render((
-                <Provider store={this.store}>
+                <InjectionProvider store={this.store}>
                     <I18nProvider>
                         <Conference/>
                     </I18nProvider>
-                </Provider>
+                </InjectionProvider>
             ), this.el);
         }
     }

diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
@@ -36,13 +36,23 @@ class PluginClass {
             document.head.appendChild(script);
         }
         registry.registerReducer(reducer);
-        registry.registerChannelHeaderButtonAction(
-            <Icon/>,
-            (channel: Channel) => {
-                store.dispatch(startMeeting(channel.id));
-            },
-            'Start Jitsi Meeting'
-        );
+
+        const action = (channel: Channel) => {
+            store.dispatch(startMeeting(channel.id));
+        };
+        const helpText = 'Start Jitsi Meeting';
+
+        // Channel header icon
+        registry.registerChannelHeaderButtonAction(<Icon/>, action, helpText);
+
+        // App Bar icon
+        if (registry.registerAppBarComponent) {
+            const config = getConfig(store.getState());
+            const siteUrl = (config && config.SiteURL) || '';
+            const iconURL = `${siteUrl}/plugins/${pluginId}/public/app-bar-icon.png`;
+            registry.registerAppBarComponent(iconURL, action, helpText);
+        }
+
         registry.registerPostTypeComponent('custom_jitsi', (props: {post: Post}) => (<I18nProvider><PostTypeJitsi post={props.post}/></I18nProvider>));
         registry.registerWebSocketEventHandler('custom_jitsi_config_update', () => store.dispatch(loadConfig()));
         store.dispatch(loadConfig());