feat: adding integrations to team view tabs

packages/client/components/TeamPrompt/TeamPromptOptionsMenu.tsx

@@ -135,11 +135,7 @@ const TeamPromptOptionsMenu = (props: Props) => {
       <MenuItem
         key='slack'
         label={
-          <Link
-            to={`/team/${team.id}/settings/integrations`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
+          <Link to={`/team/${team.id}/integrations`} target='_blank' rel='noopener noreferrer'>
             <OptionMenuItem>
               <SlackSVG />
               <span className='ml-2'>Configure Slack</span>

packages/client/modules/teamDashboard/components/TeamDashHeader/TeamDashHeader.tsx

@@ -113,6 +113,7 @@ const TeamDashHeader = (props: Props) => {
   const {organization, id: teamId, name: teamName, teamMembers} = team
   const {name: orgName, id: orgId} = organization
   const isTasks = useRouteMatch('/team/:teamId/tasks')
+  const isIntegrations = useRouteMatch('/team/:teamId/integrations')
   const {history} = useRouter()
 
   return (
@@ -143,7 +144,7 @@ const TeamDashHeader = (props: Props) => {
                     title={'Settings & Integrations'}
                     to={`/team/${teamId}/settings/`}
                   >
-                    {'Settings & Integrations'}
+                    {'Settings'}
                   </NavLink>
                 )
               }}
@@ -157,11 +158,12 @@ const TeamDashHeader = (props: Props) => {
         </Avatars>
       </TeamHeaderAndAvatars>
       <Tabs
-        activeIdx={isTasks ? 1 : 0}
+        activeIdx={isTasks ? 1 : 0 || isIntegrations ? 2 : 0}
         className='full-w max-w-none border-b border-solid border-slate-300'
       >
         <Tab label='Activity' onClick={() => history.push(`/team/${teamId}/activity`)} />
         <Tab label='Tasks' onClick={() => history.push(`/team/${teamId}/tasks`)} />
+        <Tab label='Integrations' onClick={() => history.push(`/team/${teamId}/integrations`)} />
       </Tabs>
     </DashSectionHeader>
   )

packages/client/modules/teamDashboard/components/TeamDashIntegrationsTab/TeamDashIntegrationsTab.tsx

@@ -0,0 +1,23 @@
+import React, {lazy} from 'react'
+
+interface Props {
+  teamRef: string
+}
+const TeamIntegrationsRoot = lazy(
+  () =>
+    import(
+      /* webpackChunkName: 'TeamIntegrationsRoot' */ '../../containers/TeamIntegrationsRoot/TeamIntegrationsRoot'
+    )
+)
+
+const TeamDashIntegrationsTab = (props: Props) => {
+  const {teamRef} = props
+  return (
+    <div className='flex w-full flex-wrap px-4'>
+      <div className='m-0'>
+        <TeamIntegrationsRoot teamId={teamRef} />
+      </div>
+    </div>
+  )
+}
+export default TeamDashIntegrationsTab

packages/client/modules/teamDashboard/components/TeamDashMain/TeamDashMain.tsx

@@ -9,7 +9,9 @@ import TeamTasksHeaderContainer from '../../containers/TeamTasksHeader/TeamTasks
 import TeamDrawer from './TeamDrawer'
 import TeamDashTasksTab from '../TeamDashTasksTab/TeamDashTasksTab'
 import TeamDashActivityTab from '../TeamDashActivityTab/TeamDashActivityTab'
+import TeamDashIntegrationsTab from '../TeamDashIntegrationsTab/TeamDashIntegrationsTab'
 import {Route, Switch} from 'react-router-dom'
+import getTeamIdFromPathname from '../../../../utils/getTeamIdFromPathname'
 
 const AbsoluteFab = styled(StartMeetingFAB)({
   position: 'absolute'
@@ -44,6 +46,7 @@ const TeamDashMain = (props: Props) => {
   const {viewer} = data
   const team = viewer.team!
   const {name: teamName} = team
+  const teamId = getTeamIdFromPathname()
   useDocumentTitle(`Team Dashboard | ${teamName}`, teamName)
 
   return (
@@ -56,6 +59,9 @@ const TeamDashMain = (props: Props) => {
           <Route path='/team/:teamId/tasks'>
             <TeamDashTasksTab viewerRef={viewer} />
           </Route>
+          <Route path='/team/:teamId/integrations'>
+            <TeamDashIntegrationsTab teamRef={teamId} />
+          </Route>
           {/*Fall back to activity view if nothing is specified*/}
           <Route path='/team/:teamId'>
             <TeamDashActivityTab teamRef={team} />

packages/client/modules/teamDashboard/components/TeamSettingsWrapper/TeamSettingsWrapper.tsx

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled'
 import React, {lazy} from 'react'
 import {Route} from 'react-router'
-import {matchPath, RouteComponentProps, Switch, withRouter} from 'react-router-dom'
-import TeamSettingsToggleNav from '../TeamSettingsToggleNav/TeamSettingsToggleNav'
+import {RouteComponentProps, Switch, withRouter} from 'react-router-dom'
 
 const TeamSettings = lazy(
   () => import(/* webpackChunkName: 'TeamSettingsRoot' */ '../TeamSettingsRoot')
@@ -23,17 +22,12 @@ const IntegrationPage = styled('div')({
   flexDirection: 'column'
 })
 const TeamSettingsWrapper = (props: Props) => {
-  const {
-    location: {pathname},
-    match
-  } = props
+  const {match} = props
   const {
     params: {teamId}
   } = match
-  const areaMatch = matchPath(pathname, {path: `${match.url}/:area?`}) || {params: {area: ''}}
   return (
     <IntegrationPage>
-      <TeamSettingsToggleNav activeKey={(areaMatch.params as any).area || ''} teamId={teamId} />
       <Switch>
         <Route exact path={match.url} render={(p) => <TeamSettings {...p} teamId={teamId} />} />
         <Route