chore(Mattermost Plugin): Push command list from the client

This way the client does not need to expose additional files and if the
client is refreshed, it can push the updated command help list.

packages/mattermost-plugin/index.tsx

@@ -5,6 +5,7 @@ import SidePanelRoot from './components/Sidepanel'
 import PanelTitle from './components/Sidepanel/PanelTitle'
 import manifest from './manifest'
 import rootReducer, {
+  connect,
   openCreateTaskModal,
   openInviteToMeetingModal,
   openInviteToTeamModal,
@@ -19,6 +20,7 @@ import AtmosphereProvider from './AtmosphereProvider'
 import AutoLogin from './components/AutoLogin'
 import ModalRoot from './components/ModalRoot'
 import './index.css'
+import commands from './public/mattermost-plugin-commands.json'
 
 export const init = async (registry: PluginRegistry, store: Store<GlobalState, AnyAction>) => {
   const serverUrl = getPluginServerRoute(store.getState())
@@ -73,6 +75,8 @@ export const init = async (registry: PluginRegistry, store: Store<GlobalState, A
     store.dispatch(openInviteToMeetingModal())
   })
 
+  store.dispatch(connect({commands}) as any)
+
   registry.registerPostDropdownMenuAction(
     <div>
       <span className='MenuItem__icon'>

packages/mattermost-plugin/reducers.ts

@@ -48,6 +48,30 @@ export const removeTeamFromChannel = createAsyncThunk(
   }
 )
 
+export type Command = {
+  trigger: string
+  description: string
+}
+
+export type ClientConfig = {
+  commands: Command[]
+}
+
+export const connect = createAsyncThunk('connect', async (config: ClientConfig, thunkApi) => {
+  const serverUrl = getPluginServerRoute(thunkApi.getState() as any)
+  const res = await fetch(
+    `${serverUrl}/connect`,
+    Client4.getOptions({
+      method: 'POST',
+      body: JSON.stringify(config)
+    })
+  )
+  if (!res.ok) {
+    throw new Error(`Failed to initialize commands: ${res.statusText}`)
+  }
+  return
+})
+
 const localSlice = createSlice({
   name: 'local',
   initialState: {