chore: Minor Mattermost Plugin fixes (#10933)

ParabolInc · Feb 27, 2025 · 1f16c7c · 1f16c7c
1 parent e9ad424
commit 1f16c7c
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 62 deletions.
diff --git a/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx b/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx
@@ -4,7 +4,7 @@ import {useEffect, useMemo, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {useLazyLoadQuery, useMutation} from 'react-relay'
 
-import {closeCreateTaskModal, openLinkTeamModal} from '../../reducers'
+import {closeCreateTaskModal} from '../../reducers'
 
 import {useCurrentChannel} from '../../hooks/useCurrentChannel'
 import {useCurrentUser} from '../../hooks/useCurrentUser'
@@ -22,6 +22,7 @@ import {useTipTapTaskEditor} from '../../hooks/useTipTapTaskEditor'
 import {getPluginServerRoute} from '../../selectors'
 import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
+import NoLinkedTeamsModal from '../NoLinkedTeamsModal'
 
 const TaskStatus: TaskStatusEnum[] = ['active', 'done', 'future', 'stuck']
 
@@ -56,7 +57,7 @@ const CreateTaskModal = () => {
   const {viewer, linkedTeamIds} = data
   const {id: userId, teams} = viewer
   const linkedTeams = useMemo(
-    () => teams.filter(({id}) => linkedTeamIds && linkedTeamIds.includes(id)),
+    () => teams.filter(({id}) => linkedTeamIds?.includes(id)),
     [teams, linkedTeamIds]
   )
 
@@ -133,21 +134,8 @@ const CreateTaskModal = () => {
     return null
   }
 
-  if (linkedTeams.length === 0) {
-    const handleLink = () => {
-      dispatch(openLinkTeamModal())
-      handleClose()
-    }
-    return (
-      <Modal
-        title='Add a Task'
-        commitButtonLabel='Link team'
-        handleClose={handleClose}
-        handleCommit={handleLink}
-      >
-        <p>There are no Parabol teams linked to this channel yet.</p>
-      </Modal>
-    )
+  if (!linkedTeams || linkedTeams.length === 0) {
+    return <NoLinkedTeamsModal title='Add a Task' handleClose={handleClose} />
   }
 
   return (

diff --git a/packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx b/packages/mattermost-plugin/components/InviteToMeetingModal/InviteToMeetingModal.tsx
@@ -12,6 +12,7 @@ import {useCurrentChannel} from '../../hooks/useCurrentChannel'
 import {useInviteToMeeting} from '../../hooks/useInviteToMeeting'
 import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
+import NoLinkedTeamsModal from '../NoLinkedTeamsModal'
 
 const InviteToMeetingModal = () => {
   const channel = useCurrentChannel()
@@ -70,6 +71,10 @@ const InviteToMeetingModal = () => {
     handleClose()
   }
 
+  if (!linkedTeams || linkedTeams.length === 0) {
+    return <NoLinkedTeamsModal title='Invite Channel to Join Activity' handleClose={handleClose} />
+  }
+
   return (
     <Modal
       title='Invite Channel to Join Activity'

diff --git a/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx b/packages/mattermost-plugin/components/InviteToTeamModal/InviteToTeamModal.tsx
@@ -14,9 +14,11 @@ import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
 
 const InviteToTeamModal = () => {
+  const channel = useCurrentChannel()
   const data = useLazyLoadQuery<InviteToTeamModalQuery>(
     graphql`
-      query InviteToTeamModalQuery {
+      query InviteToTeamModalQuery($channel: ID!) {
+        linkedTeamIds(channel: $channel)
         viewer {
           teams {
             ...useInviteToTeam_team
@@ -26,20 +28,21 @@ const InviteToTeamModal = () => {
         }
       }
     `,
-    {}
+    {
+      channel: channel?.id ?? ''
+    }
   )
 
-  const {viewer} = data
-  const {teams} = viewer
+  const {viewer, linkedTeamIds} = data
+  const linkedTeams = viewer.teams.filter((team) => linkedTeamIds?.includes(team.id))
 
-  const [selectedTeam, setSelectedTeam] = useState<NonNullable<typeof teams>[number]>()
-  const channel = useCurrentChannel()
+  const [selectedTeam, setSelectedTeam] = useState<NonNullable<typeof linkedTeams>[number]>()
 
   useEffect(() => {
-    if (!selectedTeam && teams && teams.length > 0) {
-      setSelectedTeam(teams[0])
+    if (!selectedTeam && linkedTeams && linkedTeams.length > 0) {
+      setSelectedTeam(linkedTeams[0])
     }
-  }, [teams, selectedTeam])
+  }, [linkedTeams, selectedTeam])
 
   const invite = useInviteToTeam(selectedTeam)
 
@@ -63,11 +66,11 @@ const InviteToTeamModal = () => {
       handleCommit={handleStart}
       handleClose={handleClose}
     >
-      {teams ? (
+      {linkedTeams ? (
         <Select
           label='Parabol Team'
           required={true}
-          options={teams ?? []}
+          options={linkedTeams ?? []}
           value={selectedTeam}
           onChange={setSelectedTeam}
         />

diff --git a/packages/mattermost-plugin/components/NoLinkedTeamsModal.tsx b/packages/mattermost-plugin/components/NoLinkedTeamsModal.tsx
@@ -0,0 +1,29 @@
+import {useDispatch} from 'react-redux'
+import {openLinkTeamModal} from '../reducers'
+import Modal from './Modal'
+
+type Props = {
+  title: string
+  handleClose: () => void
+}
+const NoLinkedTeamsModal = ({title, handleClose}: Props) => {
+  const dispatch = useDispatch()
+
+  const handleLink = () => {
+    dispatch(openLinkTeamModal())
+    handleClose()
+  }
+
+  return (
+    <Modal
+      title={title}
+      commitButtonLabel='Link team'
+      handleClose={handleClose}
+      handleCommit={handleLink}
+    >
+      <p>There are no Parabol teams linked to this channel yet.</p>
+    </Modal>
+  )
+}
+
+export default NoLinkedTeamsModal
diff --git a/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx b/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx
@@ -5,6 +5,15 @@ import {useCurrentChannel} from '../../hooks/useCurrentChannel'
 import LoadingSpinner from '../LoadingSpinner'
 import MeetingRow from './MeetingRow'
 
+graphql`
+  fragment ActiveMeetings_team on Team {
+    id
+    activeMeetings {
+      ...MeetingRow_meeting
+    }
+  }
+`
+
 const ActiveMeetings = () => {
   const channel = useCurrentChannel()
   const data = useLazyLoadQuery<ActiveMeetingsQuery>(
@@ -16,10 +25,7 @@ const ActiveMeetings = () => {
         linkedTeamIds(channel: $channel)
         viewer {
           teams {
-            id
-            activeMeetings {
-              ...MeetingRow_meeting
-            }
+            ...ActiveMeetings_team @relay(mask: false)
           }
         }
       }
@@ -38,7 +44,12 @@ const ActiveMeetings = () => {
   return (
     <div>
       {isLoading && <LoadingSpinner text='Loading...' />}
-      {error && <div className='error-text'>Loading meetings failed, try refreshing the page</div>}
+      {error && (
+        <div className='error-text p-2'>Loading meetings failed, try refreshing the page</div>
+      )}
+      {linkedTeams?.length === 0 && (
+        <p className='self-center p-2 font-semibold'>There are no teams linked to this channel</p>
+      )}
       {linkedTeams?.map((team) =>
         team.activeMeetings.map((meeting) => <MeetingRow meetingRef={meeting} />)
       )}

diff --git a/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx b/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx
@@ -27,17 +27,18 @@ const LinkedTeams = () => {
     }
   )
   const {viewer, linkedTeamIds} = data
-  const linkedTeams = viewer.teams.filter(
-    (team) => !linkedTeamIds || linkedTeamIds.includes(team.id)
-  )
+  const linkedTeams = viewer.teams.filter((team) => linkedTeamIds?.includes(team.id))
 
   const isLoading = false
   const error = false
 
   return (
     <div>
       {isLoading && <LoadingSpinner text='Loading...' />}
-      {error && <div className='error-text'>Loading teams failed, try refreshing the page</div>}
+      {error && <div className='error-text p-2'>Loading teams failed, try refreshing the page</div>}
+      {linkedTeams?.length === 0 && (
+        <p className='p-2 font-semibold'>There are no teams linked to this channel</p>
+      )}
       {linkedTeams?.map((team) => <TeamRow key={team.id} teamRef={team} />)}
     </div>
   )

diff --git a/packages/mattermost-plugin/components/Sidepanel/MeetingRow.tsx b/packages/mattermost-plugin/components/Sidepanel/MeetingRow.tsx
@@ -52,7 +52,11 @@ const MeetingRow = ({meetingRef}: Props) => {
       <div className='pt-4 pl-2 text-2xl text-slate-400'>{meetingTypeToIcon[meetingType]}</div>
       <div className='flex flex-col items-start p-2'>
         <div className='flex flex-col'>
-          <a href={`${pluginServerRoute}/parabol/meet/${id}`} className='text-2xl font-bold'>
+          <a
+            href={`${pluginServerRoute}/parabol/meet/${id}`}
+            target='_blank'
+            className='text-2xl font-bold'
+          >
             {name}
           </a>
           <div className='font-semibold text-slate-400'>{team?.name}</div>

diff --git a/packages/mattermost-plugin/components/Sidepanel/SidePanel.tsx b/packages/mattermost-plugin/components/Sidepanel/SidePanel.tsx
@@ -29,7 +29,7 @@ const SidePanel = () => {
   }
 
   return (
-    <div className='flex flex-col items-stretch overflow-y-auto px-2 py-4'>
+    <div className='flex h-full flex-col items-stretch overflow-y-auto px-2 py-4'>
       <div className='flex justify-between'>
         <ReactSelect
           className='cursor-pointer'

diff --git a/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx b/packages/mattermost-plugin/components/Sidepanel/TeamRow.tsx
@@ -50,7 +50,11 @@ const TeamRow = ({teamRef}: Props) => {
       </div>
       <div className='flex grow flex-col items-start p-2'>
         <div className='flex w-full flex-col'>
-          <a href={`${pluginServerRoute}/parabol/meet/${id}`} className='text-2xl font-bold'>
+          <a
+            href={`${pluginServerRoute}/parabol/team/${id}`}
+            target='_blank'
+            className='text-2xl font-bold'
+          >
             {name}
           </a>
           <div className='font-semibold text-slate-400'>

diff --git a/packages/mattermost-plugin/components/Sidepanel/index.tsx b/packages/mattermost-plugin/components/Sidepanel/index.tsx
@@ -9,7 +9,7 @@ const SidePanelRoot = () => {
   const pluginServerRoute = useSelector(getPluginServerRoute)
 
   return (
-    <div className='flex flex-col items-stretch overflow-y-auto p-4'>
+    <div className='flex h-full flex-col items-stretch overflow-y-auto p-4'>
       {loggedIn ? (
         <SidePanel />
       ) : (

diff --git a/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx b/packages/mattermost-plugin/components/StartActivityModal/StartActivityModal.tsx
@@ -11,20 +11,24 @@ import MeetingSettings from './MeetingSettings'
 
 import styled from 'styled-components'
 import {StartActivityModalQuery} from '../../__generated__/StartActivityModalQuery.graphql'
+import {useCurrentChannel} from '../../hooks/useCurrentChannel'
 import LoadingSpinner from '../LoadingSpinner'
 import Modal from '../Modal'
+import NoLinkedTeamsModal from '../NoLinkedTeamsModal'
 
 const SettingsArea = styled.div!`
   min-height: 80px;
 `
 
 const StartActivityModal = () => {
+  const channel = useCurrentChannel()
   const data = useLazyLoadQuery<StartActivityModalQuery>(
     graphql`
-      query StartActivityModalQuery {
+      query StartActivityModalQuery($channel: ID!) {
         config {
           parabolUrl
         }
+        linkedTeamIds(channel: $channel)
         viewer {
           availableTemplates(first: 2000) {
             edges {
@@ -51,13 +55,16 @@ const StartActivityModal = () => {
         }
       }
     `,
-    {}
+    {
+      channel: channel?.id ?? ''
+    }
   )
 
-  const {config, viewer} = data
-  const {availableTemplates, teams} = viewer
+  const {config, viewer, linkedTeamIds} = data
+  const {availableTemplates} = viewer
+  const linkedTeams = viewer.teams.filter((team) => linkedTeamIds?.includes(team.id))
 
-  const [selectedTeam, setSelectedTeam] = useState<NonNullable<typeof teams>[number]>()
+  const [selectedTeam, setSelectedTeam] = useState<NonNullable<typeof linkedTeams>[number]>()
   const [selectedTemplate, setSelectedTemplate] =
     useState<NonNullable<typeof availableTemplates.edges>[number]['node']>()
 
@@ -75,10 +82,10 @@ const StartActivityModal = () => {
   )
 
   useEffect(() => {
-    if (!selectedTeam && teams && teams.length > 0) {
-      setSelectedTeam(teams[0])
+    if (!selectedTeam && linkedTeams && linkedTeams.length > 0) {
+      setSelectedTeam(linkedTeams[0])
     }
-  }, [teams, selectedTeam])
+  }, [linkedTeams, selectedTeam])
   useEffect(() => {
     if (!selectedTemplate && filteredTemplates && filteredTemplates.length > 0) {
       setSelectedTemplate(filteredTemplates[0])
@@ -106,6 +113,10 @@ const StartActivityModal = () => {
     handleClose()
   }
 
+  if (!linkedTeams || linkedTeams.length === 0) {
+    return <NoLinkedTeamsModal title='Start a Parabol Activity' handleClose={handleClose} />
+  }
+
   return (
     <Modal
       title='Start a Parabol Activity'
@@ -121,11 +132,11 @@ const StartActivityModal = () => {
           </a>
         </p>
       </div>
-      {teams && (
+      {linkedTeams && (
         <Select
           label='Choose Parabol Team'
           required={true}
-          options={teams ?? []}
+          options={linkedTeams}
           value={selectedTeam}
           onChange={setSelectedTeam}
         />