From cf48ae2934cd6ed29e4b11f62180a1b466b6a303 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Wed, 8 Jan 2025 11:26:56 +0100
Subject: [PATCH] feat(Mattermost): Invite to Meeting (#10635)

---
 .../InviteToMeetingModal.tsx                  | 152 ++++++++++++++++++
 .../components/InviteToMeetingModal/index.tsx |  22 +++
 .../InviteToTeamModal/InviteToTeamModal.tsx   |  19 ++-
 .../LinkTeamModal/LinkTeamModal.tsx           |   6 +-
 .../components/ModalRoot.tsx                  |   2 +
 .../components/Sidepanel/ActiveMeetings.tsx   |   6 +-
 .../components/Sidepanel/LinkedTeams.tsx      |   6 +-
 .../useMassInvitationToken.tsx                |   8 +-
 packages/mattermost-plugin/index.tsx          |   5 +
 packages/mattermost-plugin/package.json       |   1 +
 .../mattermost-plugin/prod.webpack.config.js  |  15 +-
 .../public/mattermost-plugin-commands.json    |   6 +-
 packages/mattermost-plugin/reducers.ts        |   9 ++
 packages/mattermost-plugin/resolvers.ts       |   2 +-
 packages/mattermost-plugin/selectors.ts       |   3 +
 packages/mattermost-plugin/webpack.config.js  |  15 +-
 16 files changed, 240 insertions(+), 37 deletions(-)
 create mode 100644 packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx
 create mode 100644 packages/mattermost-plugin/components/InviteToMeetingModal/index.tsx
 rename packages/mattermost-plugin/{components/InviteToTeamModal => hooks}/useMassInvitationToken.tsx (86%)

diff --git a/packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx b/packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx
new file mode 100644
index 00000000000..4f4b0164c18
--- /dev/null
+++ b/packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx
@@ -0,0 +1,152 @@
+import graphql from 'babel-plugin-relay/macro'
+import {useEffect, useMemo, useState} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+import {useLazyLoadQuery} from 'react-relay'
+
+import {closeInviteToMeetingModal} from '../../reducers'
+
+import Select from '../Select'
+
+import {Client4} from 'mattermost-redux/client'
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/common'
+import {Post} from 'mattermost-redux/types/posts'
+import {PALETTE} from '~/styles/paletteV3'
+import {InviteToMeetingModalQuery} from '../../__generated__/InviteToMeetingModalQuery.graphql'
+import {useCurrentChannel} from '../../hooks/useCurrentChannel'
+import useMassInvitationToken from '../../hooks/useMassInvitationToken'
+import LoadingSpinner from '../LoadingSpinner'
+import Modal from '../Modal'
+
+const InviteToMeetingModal = () => {
+  const channel = useCurrentChannel()
+  const data = useLazyLoadQuery<InviteToMeetingModalQuery>(
+    graphql`
+      query InviteToMeetingModalQuery($channel: ID!) {
+        config {
+          parabolUrl
+        }
+        linkedTeamIds(channel: $channel)
+        viewer {
+          teams {
+            id
+            name
+            activeMeetings {
+              id
+              teamId
+              name
+              meetingType
+            }
+          }
+        }
+      }
+    `,
+    {
+      channel: channel.id
+    }
+  )
+
+  const {viewer, config, linkedTeamIds} = data
+  const parabolUrl = config?.parabolUrl
+  const {teams} = viewer
+  const linkedTeams = useMemo(
+    () => viewer.teams.filter((team) => !linkedTeamIds || linkedTeamIds.includes(team.id)),
+    [viewer, linkedTeamIds]
+  )
+  const activeMeetings = useMemo(
+    () => linkedTeams.flatMap((team) => team.activeMeetings),
+    [linkedTeams]
+  )
+
+  const [selectedMeeting, setSelectedMeeting] = useState<(typeof activeMeetings)[number]>()
+
+  useEffect(() => {
+    if (!selectedMeeting && activeMeetings && activeMeetings.length > 0) {
+      setSelectedMeeting(activeMeetings[0])
+    }
+  }, [activeMeetings, selectedMeeting])
+
+  const getToken = useMassInvitationToken({
+    teamId: selectedMeeting?.teamId,
+    meetingId: selectedMeeting?.id
+  })
+
+  const currentUser = useSelector(getCurrentUser)
+
+  const dispatch = useDispatch()
+  const handleClose = () => {
+    dispatch(closeInviteToMeetingModal())
+  }
+
+  const handleStart = async () => {
+    if (!selectedMeeting) {
+      return
+    }
+    const {name: meetingName, id: meetingId} = selectedMeeting
+    const token = await getToken()
+    if (!token) {
+      return
+    }
+    const team = linkedTeams.find((team) => team.id === selectedMeeting.teamId)!
+    const teamName = team.name
+    const inviteUrl = `${parabolUrl}/invitation-link/${token}`
+    const meetingUrl = `${parabolUrl}/meet/${meetingId}`
+    const {username, nickname, first_name, last_name} = currentUser
+    const userName = nickname || username || `${first_name} ${last_name}`
+    const props = {
+      attachments: [
+        {
+          fallback: `${userName} invited you to join the meeting ${meetingName}`,
+          title: `${userName} invited you to join a meeting in [Parabol](${meetingUrl})`,
+          color: PALETTE.GRAPE_500,
+          fields: [
+            {
+              short: true,
+              title: 'Team',
+              value: teamName
+            },
+            {
+              short: true,
+              title: 'Meeting',
+              value: meetingName
+            },
+            {
+              short: false,
+              value: `
+| [Join Meeting](${inviteUrl}) |
+|:--------------------:|
+||`
+            }
+          ]
+        }
+      ]
+    }
+    Client4.createPost({
+      channel_id: channel.id,
+      props
+    } as Partial<Post> as Post)
+    handleClose()
+  }
+
+  return (
+    <Modal
+      title='Invite Channel to Join Activity'
+      commitButtonLabel='Share Invite'
+      handleCommit={handleStart}
+      handleClose={handleClose}
+    >
+      {teams ? (
+        <Select
+          label='Activity'
+          required={true}
+          options={activeMeetings ?? []}
+          value={selectedMeeting}
+          onChange={setSelectedMeeting}
+        />
+      ) : (
+        <LoadingSpinner />
+      )}
+    </Modal>
+  )
+}
+
+export default InviteToMeetingModal
diff --git a/packages/mattermost-plugin/components/InviteToMeetingModal/index.tsx b/packages/mattermost-plugin/components/InviteToMeetingModal/index.tsx
new file mode 100644
index 00000000000..5f4c4b42124
--- /dev/null
+++ b/packages/mattermost-plugin/components/InviteToMeetingModal/index.tsx
@@ -0,0 +1,22 @@
+import {lazy, Suspense} from 'react'
+import {useSelector} from 'react-redux'
+
+import {isInviteToMeetingModalVisible} from '../../selectors'
+
+const InviteToMeetingModal = lazy(
+  () => import(/* webpackChunkName: 'CreateTaskModal' */ './InviteToMeetingModal')
+)
+
+const InviteToMeetingModalRoot = () => {
+  const isVisible = useSelector(isInviteToMeetingModalVisible)
+  if (!isVisible) {
+    return null
+  }
+  return (
+    <Suspense fallback={null}>
+      <InviteToMeetingModal />
+    </Suspense>
+  )
+}
+
+export default InviteToMeetingModalRoot
diff --git a/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx b/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx
index 332dcd131e0..4ad7304cee1 100644
--- a/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx
+++ b/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx
@@ -10,11 +10,12 @@ import Select from '../Select'
 import {Client4} from 'mattermost-redux/client'
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/common'
 import {Post} from 'mattermost-redux/types/posts'
+import {PALETTE} from '~/styles/paletteV3'
 import {InviteToTeamModalQuery} from '../../__generated__/InviteToTeamModalQuery.graphql'
 import {useCurrentChannel} from '../../hooks/useCurrentChannel'
+import useMassInvitationToken from '../../hooks/useMassInvitationToken'
 import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
-import useMassInvitationToken from './useMassInvitationToken'
 
 const InviteToTeamModal = () => {
   const data = useLazyLoadQuery<InviteToTeamModalQuery>(
@@ -60,29 +61,31 @@ const InviteToTeamModal = () => {
     if (!selectedTeam) {
       return
     }
-    const {name: teamName} = selectedTeam
+    const {id: teamId, name: teamName} = selectedTeam
     const token = await getToken()
     if (!token) {
       return
     }
-    const url = `${parabolUrl}/invitation-link/${token}`
+    const inviteUrl = `${parabolUrl}/invitation-link/${token}`
+    const teamUrl = `${parabolUrl}/team/${teamId}`
     const {username, nickname, first_name, last_name} = currentUser
     const userName = nickname || username || `${first_name} ${last_name}`
     const props = {
       attachments: [
         {
-          fallback: `Join our team ${teamName}, [Join Team](${url})`,
+          title: `${userName} invited you to join a team in [Parabol](${teamUrl})`,
+          fallback: `${userName} invited you to join a team ${teamName} in Parabol`,
+          color: PALETTE.GRAPE_500,
           fields: [
             {short: true, value: teamName},
             {
               short: false,
               value: `
-| [Join Team](${url}) |
+| [Join Team](${inviteUrl}) |
 |:--------------------:|
 ||`
             }
-          ],
-          title: `${userName} invited you to join a team in Parabol`
+          ]
         }
       ]
     }
@@ -95,7 +98,7 @@ const InviteToTeamModal = () => {
 
   return (
     <Modal
-      title='Invite to Parabol Team'
+      title='Invite Channel to Join Parabol Team'
       commitButtonLabel='Share Invite'
       handleCommit={handleStart}
       handleClose={handleClose}
diff --git a/packages/mattermost-plugin/components/LinkTeamModal/LinkTeamModal.tsx b/packages/mattermost-plugin/components/LinkTeamModal/LinkTeamModal.tsx
index ca52badd4ef..6a361a6535d 100644
--- a/packages/mattermost-plugin/components/LinkTeamModal/LinkTeamModal.tsx
+++ b/packages/mattermost-plugin/components/LinkTeamModal/LinkTeamModal.tsx
@@ -19,8 +19,8 @@ const LinkTeamModal = () => {
   const data = useLazyLoadQuery<LinkTeamModalQuery>(
     graphql`
       query LinkTeamModalQuery($channel: ID!) {
+        linkedTeamIds(channel: $channel)
         viewer {
-          linkedTeamIds(channel: $channel)
           teams {
             id
             name
@@ -32,8 +32,8 @@ const LinkTeamModal = () => {
       channel: channel.id
     }
   )
-  const viewer = data.viewer
-  const unlinkedTeams = viewer.teams.filter((team) => !viewer.linkedTeamIds?.includes(team.id))
+  const {viewer, linkedTeamIds} = data
+  const unlinkedTeams = viewer.teams.filter((team) => !linkedTeamIds?.includes(team.id))
   const linkTeam = useLinkTeam()
 
   const [selectedTeam, setSelectedTeam] = React.useState<(typeof data.viewer.teams)[number]>()
diff --git a/packages/mattermost-plugin/components/ModalRoot.tsx b/packages/mattermost-plugin/components/ModalRoot.tsx
index 4ec3e8b895b..c3a1bffaeba 100644
--- a/packages/mattermost-plugin/components/ModalRoot.tsx
+++ b/packages/mattermost-plugin/components/ModalRoot.tsx
@@ -1,4 +1,5 @@
 import CreateTaskModalRoot from './CreateTaskModal'
+import InviteToMeetingModalRoot from './InviteToMeetingModal'
 import InviteToTeamModalRoot from './InviteToTeamModal'
 import LinkTeamModal from './LinkTeamModal'
 import PushReflectionModalRoot from './PushReflection'
@@ -9,6 +10,7 @@ const ModalRoot = () => {
     <>
       <CreateTaskModalRoot />
       <InviteToTeamModalRoot />
+      <InviteToMeetingModalRoot />
       <LinkTeamModal />
       <PushReflectionModalRoot />
       <StartActivityModalRoot />
diff --git a/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx b/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx
index 2a00bc96107..26f4e86671a 100644
--- a/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx
+++ b/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx
@@ -18,8 +18,8 @@ const ActiveMeetings = () => {
         config {
           parabolUrl
         }
+        linkedTeamIds(channel: $channel)
         viewer {
-          linkedTeamIds(channel: $channel)
           teams {
             id
             activeMeetings {
@@ -33,9 +33,9 @@ const ActiveMeetings = () => {
       channel: channel.id
     }
   )
-  const viewer = data.viewer
+  const {viewer, linkedTeamIds} = data
   const linkedTeams = viewer.teams.filter(
-    (team) => !viewer.linkedTeamIds || viewer.linkedTeamIds.includes(team.id)
+    (team) => !linkedTeamIds || linkedTeamIds.includes(team.id)
   )
   const isLoading = false
   const error = false
diff --git a/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx b/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx
index 3e9783702dd..f2c2717194e 100644
--- a/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx
+++ b/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx
@@ -15,8 +15,8 @@ const LinkedTeams = () => {
         config {
           parabolUrl
         }
+        linkedTeamIds(channel: $channel)
         viewer {
-          linkedTeamIds(channel: $channel)
           teams {
             id
             ...TeamRow_team
@@ -28,9 +28,9 @@ const LinkedTeams = () => {
       channel: channel.id
     }
   )
-  const viewer = data.viewer
+  const {viewer, linkedTeamIds} = data
   const linkedTeams = viewer.teams.filter(
-    (team) => !viewer.linkedTeamIds || viewer.linkedTeamIds.includes(team.id)
+    (team) => !linkedTeamIds || linkedTeamIds.includes(team.id)
   )
 
   const dispatch = useDispatch()
diff --git a/packages/mattermost-plugin/components/InviteToTeamModal/useMassInvitationToken.tsx b/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
similarity index 86%
rename from packages/mattermost-plugin/components/InviteToTeamModal/useMassInvitationToken.tsx
rename to packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
index 3307c6bff31..fcfa45a7ad1 100644
--- a/packages/mattermost-plugin/components/InviteToTeamModal/useMassInvitationToken.tsx
+++ b/packages/mattermost-plugin/hooks/useMassInvitationToken.tsx
@@ -2,10 +2,10 @@ import graphql from 'babel-plugin-relay/macro'
 import {useLazyLoadQuery, useMutation} from 'react-relay'
 
 import {useCallback} from 'react'
-import {Threshold} from '../../../client/types/constEnums'
-import {useMassInvitationTokenMutation} from '../../__generated__/useMassInvitationTokenMutation.graphql'
-import {useMassInvitationTokenQuery} from '../../__generated__/useMassInvitationTokenQuery.graphql'
-import {mutationResult} from '../../utils/mutationResult'
+import {Threshold} from '../../client/types/constEnums'
+import {useMassInvitationTokenMutation} from '../__generated__/useMassInvitationTokenMutation.graphql'
+import {useMassInvitationTokenQuery} from '../__generated__/useMassInvitationTokenQuery.graphql'
+import {mutationResult} from '../utils/mutationResult'
 
 const FIVE_MINUTES = 1000 * 60 * 5
 const acceptableLifeLeft = Threshold.MASS_INVITATION_TOKEN_LIFESPAN - FIVE_MINUTES
diff --git a/packages/mattermost-plugin/index.tsx b/packages/mattermost-plugin/index.tsx
index eb47ba38cb8..6848e6122d3 100644
--- a/packages/mattermost-plugin/index.tsx
+++ b/packages/mattermost-plugin/index.tsx
@@ -5,6 +5,7 @@ import PanelTitle from './components/Sidepanel/PanelTitle'
 import manifest from './manifest'
 import rootReducer, {
   openCreateTaskModal,
+  openInviteToMeetingModal,
   openInviteToTeamModal,
   openPushPostAsReflection,
   openStartActivityModal
@@ -59,6 +60,10 @@ export const init = async (registry: PluginRegistry, store: Store<GlobalState, A
     store.dispatch(openInviteToTeamModal())
   })
 
+  registry.registerWebSocketEventHandler(`custom_${manifest.id}_share`, () => {
+    store.dispatch(openInviteToMeetingModal())
+  })
+
   registry.registerPostDropdownMenuAction(
     <div>
       <span className='MenuItem__icon'>
diff --git a/packages/mattermost-plugin/package.json b/packages/mattermost-plugin/package.json
index 34ed0755f9a..45fac3d57c0 100644
--- a/packages/mattermost-plugin/package.json
+++ b/packages/mattermost-plugin/package.json
@@ -48,6 +48,7 @@
     "ts-node-dev": "^1.0.0-pre.44"
   },
   "dependencies": {
+    "parabol-client": "8.16.0",
     "@mattermost/compass-icons": "0.1.47",
     "@reduxjs/toolkit": "1.9.7",
     "@tiptap/core": "^2.9.1",
diff --git a/packages/mattermost-plugin/prod.webpack.config.js b/packages/mattermost-plugin/prod.webpack.config.js
index ccebec6b5bc..abde9ff8ce4 100644
--- a/packages/mattermost-plugin/prod.webpack.config.js
+++ b/packages/mattermost-plugin/prod.webpack.config.js
@@ -4,16 +4,16 @@ const path = require('path')
 const getProjectRoot = require('../../scripts/webpack/utils/getProjectRoot')
 
 const PROJECT_ROOT = getProjectRoot()
+const PLUGIN_ROOT = path.join(PROJECT_ROOT, 'packages', 'mattermost-plugin')
+const CLIENT_ROOT = path.join(PROJECT_ROOT, 'packages', 'client')
 const buildPath = path.join(PROJECT_ROOT, 'build')
 
-const clientTransformRules = (projectRoot) => {
-  const clientRoot = path.join(projectRoot, 'packages', 'mattermost-plugin')
-  console.log('clientRoot', clientRoot)
+const clientTransformRules = (pluginRoot) => {
   return [
     {
       test: /\.tsx?$/,
       // things that need the relay plugin
-      include: clientRoot,
+      include: pluginRoot,
       use: [
         {
           loader: 'babel-loader',
@@ -25,7 +25,7 @@ const clientTransformRules = (projectRoot) => {
                 'macros',
                 {
                   relay: {
-                    artifactDirectory: path.join(clientRoot, '__generated__')
+                    artifactDirectory: path.join(pluginRoot, '__generated__')
                   }
                 }
               ],
@@ -63,11 +63,14 @@ module.exports = (config) => {
       assetModuleFilename: 'mattermost-plugin_[name]_[contenthash][ext]'
     },
     resolve: {
+      alias: {
+        '~': path.join(CLIENT_ROOT),
+      },
       extensions: [".ts", ".tsx", ".js"],
     },
     module: {
       rules: [
-        ...clientTransformRules(PROJECT_ROOT),
+        ...clientTransformRules(PLUGIN_ROOT),
         {
           test: /\.tsx?$/,
           loader: "babel-loader",
diff --git a/packages/mattermost-plugin/public/mattermost-plugin-commands.json b/packages/mattermost-plugin/public/mattermost-plugin-commands.json
index 3b92e0a8961..b58ae40aff0 100644
--- a/packages/mattermost-plugin/public/mattermost-plugin-commands.json
+++ b/packages/mattermost-plugin/public/mattermost-plugin-commands.json
@@ -5,14 +5,14 @@
   },
   {
     "trigger": "task",
-    "description": "Create a new task"
+    "description": "Adds a task in Parabol"
   },
   {
     "trigger": "invite",
-    "description": "Invite users to your Parabol Team"
+    "description": "Shares an invite to a Parabol team in the current channel"
   },
   {
     "trigger": "share",
-    "description": "Shares Parabol activity so channel members can join"
+    "description": "Shares a Parabol activity so channel members can join"
   }
 ]
diff --git a/packages/mattermost-plugin/reducers.ts b/packages/mattermost-plugin/reducers.ts
index b9923985fd4..c263bf5c230 100644
--- a/packages/mattermost-plugin/reducers.ts
+++ b/packages/mattermost-plugin/reducers.ts
@@ -54,6 +54,7 @@ const localSlice = createSlice({
     isStartActivityModalVisible: false,
     isCreateTaskModalVisible: false,
     isInviteToTeamModalVisible: false,
+    isInviteToMeetingModalVisible: false,
     pushPostAsReflection: null as string | null,
     isLinkTeamModalVisible: false,
     linkedTeamIds: {} as Record<string, {loading: boolean; teamIds: string[]}>
@@ -77,6 +78,12 @@ const localSlice = createSlice({
     closeInviteToTeamModal: (state) => {
       state.isInviteToTeamModalVisible = false
     },
+    openInviteToMeetingModal: (state) => {
+      state.isInviteToMeetingModalVisible = true
+    },
+    closeInviteToMeetingModal: (state) => {
+      state.isInviteToMeetingModalVisible = false
+    },
     openPushPostAsReflection: (state, action: PayloadAction<string>) => {
       state.pushPostAsReflection = action.payload
     },
@@ -135,6 +142,8 @@ export const {
   closeCreateTaskModal,
   openInviteToTeamModal,
   closeInviteToTeamModal,
+  openInviteToMeetingModal,
+  closeInviteToMeetingModal,
   openPushPostAsReflection,
   closePushPostAsReflection,
   openLinkTeamModal,
diff --git a/packages/mattermost-plugin/resolvers.ts b/packages/mattermost-plugin/resolvers.ts
index eca922e98de..e845f7f3ea2 100644
--- a/packages/mattermost-plugin/resolvers.ts
+++ b/packages/mattermost-plugin/resolvers.ts
@@ -64,7 +64,7 @@ export function parabolUrl(config: ConfigSource): string {
 }
 
 /**
- * @RelayResolver User.linkedTeamIds(channel: ID!): [ID!]
+ * @RelayResolver Query.linkedTeamIds(channel: ID!): [ID!]
  * @live
  */
 export function linkedTeamIds(
diff --git a/packages/mattermost-plugin/selectors.ts b/packages/mattermost-plugin/selectors.ts
index ce34368e4ce..4829ef29af8 100644
--- a/packages/mattermost-plugin/selectors.ts
+++ b/packages/mattermost-plugin/selectors.ts
@@ -68,6 +68,9 @@ export const isCreateTaskModalVisible = (state: GlobalState) =>
 export const isInviteToTeamModalVisible = (state: GlobalState) =>
   getPluginState(state).isInviteToTeamModalVisible
 
+export const isInviteToMeetingModalVisible = (state: GlobalState) =>
+  getPluginState(state).isInviteToMeetingModalVisible
+
 export const isLinkTeamModalVisible = (state: GlobalState) =>
   getPluginState(state).isLinkTeamModalVisible
 
diff --git a/packages/mattermost-plugin/webpack.config.js b/packages/mattermost-plugin/webpack.config.js
index 2fbc799f804..24afaaea424 100644
--- a/packages/mattermost-plugin/webpack.config.js
+++ b/packages/mattermost-plugin/webpack.config.js
@@ -3,15 +3,15 @@ const path = require('path')
 const getProjectRoot = require('../../scripts/webpack/utils/getProjectRoot')
 
 const PROJECT_ROOT = getProjectRoot()
+const PLUGIN_ROOT = path.join(PROJECT_ROOT, 'packages', 'mattermost-plugin')
+const CLIENT_ROOT = path.join(PROJECT_ROOT, 'packages', 'client')
 
-const clientTransformRules = (projectRoot) => {
-  const clientRoot = path.join(projectRoot, 'packages', 'mattermost-plugin')
-  console.log('clientRoot', clientRoot)
+const clientTransformRules = (pluginRoot) => {
   return [
     {
       test: /\.tsx?$/,
       // things that need the relay plugin
-      include: clientRoot,
+      include: pluginRoot,
       use: [
         {
           loader: 'babel-loader',
@@ -23,7 +23,7 @@ const clientTransformRules = (projectRoot) => {
                 'macros',
                 {
                   relay: {
-                    artifactDirectory: path.join(clientRoot, '__generated__')
+                    artifactDirectory: path.join(pluginRoot, '__generated__')
                   }
                 }
               ],
@@ -55,11 +55,14 @@ module.exports = {
     publicPath: "auto",
   },
   resolve: {
+    alias: {
+      '~': path.join(CLIENT_ROOT),
+    },
     extensions: [".ts", ".tsx", ".js"],
   },
   module: {
     rules: [
-      ...clientTransformRules(PROJECT_ROOT),
+      ...clientTransformRules(PLUGIN_ROOT),
       {
         test: /\.tsx?$/,
         loader: "babel-loader",