Test for importing webapp externally

webapp/package.json

@@ -5,12 +5,18 @@
     "build:watch": "webpack --mode=production --watch",
     "debug": "webpack --mode=none",
     "debug:watch": "webpack --mode=development --watch",
-    "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --cache",
-    "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix --cache",
+    "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ignore-pattern postinstall.js --ext .js --ext .jsx --ext tsx --ext ts . --quiet --cache",
+    "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ignore-pattern postinstall.js --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix --cache",
     "test": "jest --forceExit --detectOpenHandles --verbose",
     "test:watch": "jest --watch",
     "test-ci": "jest --forceExit --detectOpenHandles --maxWorkers=2",
-    "check-types": "tsc"
+    "check-types": "tsc",
+    "postinstall": "node postinstall.js"
+  },
+  "customModule": {
+    "name": "mattermost-plugin-google-calendar",
+    "repo": "https://github.com/mattermost/mattermost-plugin-google-calendar.git",
+    "commit": "webapp-relative-paths"
   },
   "devDependencies": {
     "@babel/cli": "7.16.8",

webapp/postinstall.js

@@ -0,0 +1,39 @@
+const {execSync} = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const {chdir} = require('process');
+
+const packageJson = require('./package.json');
+
+const moduleName = packageJson.customModule.name;
+const moduleRepo = packageJson.customModule.repo;
+const commitHash = packageJson.customModule.commit;
+const modulePath = path.join(__dirname, 'node_modules', moduleName);
+
+if (!moduleRepo || !commitHash) {
+    console.error('Module repo or commit hash not specified in package.json');
+    process.exit(1);
+}
+
+// Clone repo directory if not exists
+try {
+    if (!fs.existsSync(modulePath)) {
+        execSync(`git clone ${moduleRepo} ${modulePath}`);
+        console.log(`Successfully cloned ${moduleName} into node_modules.`);
+    }
+} catch (error) {
+    console.error(`Error cloning repo during postinstall: ${error}`);
+    process.exit(1);
+}
+
+// Checkout the specific commit and npm indtall
+try {
+    chdir(modulePath);
+    execSync(`git checkout ${commitHash}`);
+    execSync('cd webapp && npm i');
+    chdir('../..');
+} catch (error) {
+    console.error(`Error during postinstall: ${error}`);
+    process.exit(1);
+}

webapp/src/index.tsx

@@ -1,65 +1,11 @@
-import React, {useEffect} from 'react';
+import Plugin from 'mattermost-plugin-google-calendar/webapp/src/index.tsx';
 
-import {Store, Action} from 'redux';
-
-import {GlobalState} from '@mattermost/types/lib/store';
-
-import {PluginRegistry} from '@/types/mattermost-webapp';
-
-import {PluginId} from './plugin_id';
-
-import Hooks from './plugin_hooks';
-import reducer from './reducers';
-
-import CreateEventModal from './components/modals/create_event_modal';
-import {getProviderConfiguration, handleConnectChange, openCreateEventModal} from './actions';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-export default class Plugin {
-    public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
-        registry.registerReducer(reducer);
-
-        const hooks = new Hooks(store);
-        registry.registerSlashCommandWillBePostedHook(hooks.slashCommandWillBePostedHook);
-
-        const setup = async () => {
-            // Retrieve provider configuration so we can access names and other options in messages to use in the frontend.
-            await store.dispatch(getProviderConfiguration());
-
-            registry.registerChannelHeaderMenuAction(
-                <span>{'Create calendar event'}</span>,
-                async (channelID) => {
-                    if (await hooks.checkUserIsConnected()) {
-                        store.dispatch(openCreateEventModal(channelID));
-                    }
-                },
-            );
-
-            registry.registerRootComponent(CreateEventModal);
-
-            registry.registerWebSocketEventHandler(`custom_${PluginId}_connected`, handleConnectChange(store));
-            registry.registerWebSocketEventHandler(`custom_${PluginId}_disconnected`, handleConnectChange(store));
-        };
-
-        registry.registerRootComponent(() => <SetupUI setup={setup}/>);
-
-        // reminder to set up site url for any API calls
-        // and i18n
-    }
-}
-
-const SetupUI = ({setup}) => {
-    useEffect(() => {
-        setup();
-    }, []);
-
-    return null;
-};
+import {id} from '@/manifest';
 
 declare global {
     interface Window {
         registerPlugin(pluginId: string, plugin: Plugin): void
     }
 }
 
-window.registerPlugin(PluginId, new Plugin());
+window.registerPlugin(id, new Plugin());

webapp/webpack.config.js

@@ -55,7 +55,7 @@ const config = {
         rules: [
             {
                 test: /\.(js|jsx|ts|tsx)$/,
-                exclude: /node_modules/,
+                exclude: /node_modules\/(?!mattermost-plugin-google-calendar)/,
                 use: {
                     loader: 'babel-loader',
                     options: {