chore(Mattermost Plugin): Sidepanel styling (#10964)

ParabolInc · Mar 7, 2025 · b340c33 · b340c33
1 parent be3b3d1
commit b340c33
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 47 deletions.
diff --git a/packages/client/components/Tabs/Tabs.tsx b/packages/client/components/Tabs/Tabs.tsx
@@ -25,7 +25,6 @@ const InkBar = styled('div')({
 const TabsAndBar = styled('div')({
   display: 'flex',
   flexDirection: 'column',
-  maxWidth: '24rem',
   position: 'relative',
   width: '100%'
 })

diff --git a/packages/client/components/TeamPrompt/TeamPromptWorkDrawer.tsx b/packages/client/components/TeamPrompt/TeamPromptWorkDrawer.tsx
@@ -129,7 +129,7 @@ const TeamPromptWorkDrawer = (props: Props) => {
               <Close />
             </div>
           </div>
-          <Tabs activeIdx={activeIdx}>
+          <Tabs activeIdx={activeIdx} className='max-w-sm'>
             {baseTabs.map((tab, idx) => (
               <Tab
                 key={tab.label}

diff --git a/packages/client/tiptap/extensions/imageUpload/ImageSelector.tsx b/packages/client/tiptap/extensions/imageUpload/ImageSelector.tsx
@@ -47,7 +47,7 @@ export const ImageSelector = (props: Props) => {
   }
   return (
     <div className='flex h-full min-w-44 flex-col overflow-hidden rounded-md bg-slate-100 p-2'>
-      <Tabs activeIdx={activeIdx}>
+      <Tabs activeIdx={activeIdx} className='max-w-sm'>
         {tabs
           .filter((tab) => tab.isVisible)
           .map((tab, idx) => (

diff --git a/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx b/packages/mattermost-plugin/components/CreateTaskModal/CreateTaskModal.tsx
@@ -122,7 +122,7 @@ const CreateTaskModal = () => {
     })
 
     if (channel) {
-      const teamUrl = `${pluginServerRoute}/parabol/team/${teamId}`
+      const teamUrl = `${pluginServerRoute}/parabol/team/${teamId}/tasks`
       const message = `Task created in [${teamName}](${teamUrl})`
       Client4.doFetch(`${Client4.getPostsRoute()}/ephemeral`, {
         method: 'post',

diff --git a/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx b/packages/mattermost-plugin/components/Sidepanel/ActiveMeetings.tsx
@@ -1,8 +1,10 @@
 import graphql from 'babel-plugin-relay/macro'
 import {useMemo} from 'react'
+import {useDispatch} from 'react-redux'
 import {useLazyLoadQuery} from 'react-relay'
 import {ActiveMeetingsQuery} from '../../__generated__/ActiveMeetingsQuery.graphql'
 import {useCurrentChannel} from '../../hooks/useCurrentChannel'
+import {openStartActivityModal} from '../../reducers'
 import LoadingSpinner from '../LoadingSpinner'
 import MeetingRow from './MeetingRow'
 
@@ -17,6 +19,7 @@ graphql`
 
 const ActiveMeetings = () => {
   const channel = useCurrentChannel()
+  const dispatch = useDispatch()
   const data = useLazyLoadQuery<ActiveMeetingsQuery>(
     graphql`
       query ActiveMeetingsQuery {
@@ -56,22 +59,34 @@ const ActiveMeetings = () => {
     )
   }, [data, channel])
 
+  const handleStart = () => {
+    dispatch(openStartActivityModal())
+  }
+
   const isLoading = false
   const error = false
 
   return (
-    <div>
+    <>
+      <div className='flex items-center justify-between py-3 text-2xl font-semibold'>
+        Open Activities
+        <button className='btn btn-primary' onClick={handleStart}>
+          Start Activity
+        </button>
+      </div>
       {isLoading && <LoadingSpinner text='Loading...' />}
       {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} />)
-      )}
-    </div>
+      <div className='flex flex-col overflow-y-scroll'>
+        {linkedTeams?.map((team) =>
+          team.activeMeetings.map((meeting) => <MeetingRow meetingRef={meeting} />)
+        )}
+      </div>
+    </>
   )
 }
 

diff --git a/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx b/packages/mattermost-plugin/components/Sidepanel/LinkedTeams.tsx
@@ -1,13 +1,16 @@
 import graphql from 'babel-plugin-relay/macro'
 import {useMemo} from 'react'
+import {useDispatch} from 'react-redux'
 import {useLazyLoadQuery} from 'react-relay'
 import {LinkedTeamsQuery} from '../../__generated__/LinkedTeamsQuery.graphql'
 import {useCurrentChannel} from '../../hooks/useCurrentChannel'
+import {openLinkTeamModal} from '../../reducers'
 import LoadingSpinner from '../LoadingSpinner'
 import TeamRow from './TeamRow'
 
 const LinkedTeams = () => {
   const channel = useCurrentChannel()
+  const dispatch = useDispatch()
   const data = useLazyLoadQuery<LinkedTeamsQuery>(
     graphql`
       query LinkedTeamsQuery {
@@ -41,18 +44,30 @@ const LinkedTeams = () => {
     )
   }, [data, channel])
 
+  const handleLink = () => {
+    dispatch(openLinkTeamModal())
+  }
+
   const isLoading = false
   const error = false
 
   return (
-    <div>
+    <>
+      <div className='flex items-center justify-between py-3 text-2xl font-semibold'>
+        Linked Teams
+        <button className='btn btn-primary' onClick={handleLink}>
+          Link Team
+        </button>
+      </div>
       {isLoading && <LoadingSpinner text='Loading...' />}
       {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>
+      <div className='flex flex-col overflow-y-scroll'>
+        {linkedTeams?.map((team) => <TeamRow key={team.id} teamRef={team} />)}
+      </div>
+    </>
   )
 }
 

diff --git a/packages/mattermost-plugin/components/Sidepanel/SidePanel.tsx b/packages/mattermost-plugin/components/Sidepanel/SidePanel.tsx
@@ -1,8 +1,9 @@
+import {Forum, Group} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
-import {useEffect, useMemo, useState} from 'react'
-import {useDispatch} from 'react-redux'
+import Tab from 'parabol-client/components/Tab/Tab'
+import {Suspense, useEffect, useMemo, useState} from 'react'
 import {useLazyLoadQuery} from 'react-relay'
-import ReactSelect from 'react-select'
+import Tabs from '~/components/Tabs/Tabs'
 import {SidePanelQuery} from '../../__generated__/SidePanelQuery.graphql'
 import {useCurrentChannel} from '../../hooks/useCurrentChannel'
 import {openLinkTeamModal, openStartActivityModal} from '../../reducers'
@@ -11,13 +12,15 @@ import LinkedTeams from './LinkedTeams'
 
 const panels = {
   teams: {
-    label: 'Linked Parabol Teams',
+    label: 'Teams',
+    icon: <Group />,
     panel: LinkedTeams,
     action: openLinkTeamModal,
     actionLabel: 'Link Team'
   },
   meetings: {
-    label: 'Active Meetings',
+    label: 'Activies',
+    icon: <Forum />,
     panel: ActiveMeetings,
     action: openStartActivityModal,
     actionLabel: 'Start Activity'
@@ -62,37 +65,27 @@ const SidePanel = () => {
     }
   }, [linkedTeams])
 
-  const dispatch = useDispatch()
-
-  const handleClick = () => {
-    dispatch(panels[activePanel]?.action())
-  }
-
   return (
-    <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'
-          isSearchable={false}
-          value={{value: activePanel, label: panels[activePanel].label}}
-          options={Object.entries(panels).map(([value, {label}]) => ({value, label})) as any}
-          onChange={(newValue) => {
-            newValue && setActivePanel(newValue.value)
-          }}
-          components={{
-            Control: ({children, innerRef, innerProps}) => (
-              <div ref={innerRef} {...innerProps} className='flex font-bold'>
-                {children}
+    <div className='flex h-full flex-col items-stretch overflow-hidden px-2'>
+      <Tabs
+        activeIdx={Object.keys(panels).indexOf(activePanel)}
+        className='w-full max-w-none border-b border-slate-300'
+      >
+        {Object.entries(panels).map(([key, {icon, label}]) => (
+          <Tab
+            key={key}
+            label={
+              <div className='flex items-center'>
+                {icon}
+                <div className='px-1'>{label}</div>
               </div>
-            ),
-            IndicatorSeparator: () => null
-          }}
-        />
-        <button className='btn btn-primary' onClick={handleClick}>
-          {panels[activePanel]?.actionLabel}
-        </button>
-      </div>
-      {panels[activePanel]?.panel()}
+            }
+            className='p-2'
+            onClick={() => setActivePanel(key as any)}
+          />
+        ))}
+      </Tabs>
+      <Suspense fallback={null}>{panels[activePanel]?.panel()}</Suspense>
     </div>
   )
 }

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 h-full flex-col items-stretch overflow-y-auto p-4'>
+    <div className='flex h-full flex-col items-stretch p-4'>
       {loggedIn ? (
         <SidePanel />
       ) : (