feat(your-work): Provide link to integration settings on error + no d…

…ata (#8987) * feat(your-work): Provide link to integration settings on error + no data * CR: Update copy
ParabolInc · Oct 23, 2023 · a6520c1 · a6520c1
1 parent 36a9cfc
commit a6520c1
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/packages/client/components/TeamPrompt/WorkDrawer/GCalIntegrationResults.tsx b/packages/client/components/TeamPrompt/WorkDrawer/GCalIntegrationResults.tsx
@@ -5,14 +5,16 @@ import {GCalIntegrationResultsQuery} from '../../../__generated__/GCalIntegratio
 import halloweenRetrospectiveTemplate from '../../../../../static/images/illustrations/halloweenRetrospectiveTemplate.png'
 import GCalEventCard from './GCalEventCard'
 import {OpenInNew} from '@mui/icons-material'
+import {Link} from 'react-router-dom'
 
 interface Props {
   queryRef: PreloadedQuery<GCalIntegrationResultsQuery>
   order: 'DESC' | 'ASC'
+  teamId: string
 }
 
 const GCalIntegrationResults = (props: Props) => {
-  const {queryRef, order} = props
+  const {queryRef, order, teamId} = props
   const query = usePreloadedQuery(
     graphql`
       query GCalIntegrationResultsQuery($teamId: ID!, $startDate: DateTime!, $endDate: DateTime!) {
@@ -94,6 +96,12 @@ const GCalIntegrationResults = (props: Props) => {
             <div className='mt-7 w-2/3 text-center'>
               Looks like you don’t have any events to display
             </div>
+            <Link
+              to={`/team/${teamId}/settings/integrations`}
+              className='mt-4 font-semibold text-sky-500 hover:text-sky-400'
+            >
+              Review your Google Calendar configuration
+            </Link>
           </div>
         )}
       </div>

diff --git a/packages/client/components/TeamPrompt/WorkDrawer/GCalIntegrationResultsRoot.tsx b/packages/client/components/TeamPrompt/WorkDrawer/GCalIntegrationResultsRoot.tsx
@@ -44,7 +44,9 @@ const GCalIntegrationResultsRoot = (props: Props) => {
   return (
     <ErrorBoundary>
       <Suspense fallback={<Loader />}>
-        {queryRef && <GCalIntegrationResults queryRef={queryRef} order={eventRange.order} />}
+        {queryRef && (
+          <GCalIntegrationResults queryRef={queryRef} order={eventRange.order} teamId={teamId} />
+        )}
       </Suspense>
     </ErrorBoundary>
   )

diff --git a/packages/client/components/TeamPrompt/WorkDrawer/GitHubIntegrationResults.tsx b/packages/client/components/TeamPrompt/WorkDrawer/GitHubIntegrationResults.tsx
@@ -8,14 +8,16 @@ import useLoadNextOnScrollBottom from '../../../hooks/useLoadNextOnScrollBottom'
 import halloweenRetrospectiveTemplate from '../../../../../static/images/illustrations/halloweenRetrospectiveTemplate.png'
 import GitHubObjectCard from './GitHubObjectCard'
 import Ellipsis from '../../Ellipsis/Ellipsis'
+import {Link} from 'react-router-dom'
 
 interface Props {
   queryRef: PreloadedQuery<GitHubIntegrationResultsQuery>
   queryType: 'issue' | 'pullRequest'
+  teamId: string
 }
 
 const GitHubIntegrationResults = (props: Props) => {
-  const {queryRef, queryType} = props
+  const {queryRef, queryType, teamId} = props
   const query = usePreloadedQuery(
     graphql`
       query GitHubIntegrationResultsQuery($teamId: ID!, $searchQuery: String!) {
@@ -99,6 +101,12 @@ const GitHubIntegrationResults = (props: Props) => {
                     queryType === 'issue' ? 'issues' : 'pull requests'
                   } to display.`}
             </div>
+            <Link
+              to={`/team/${teamId}/settings/integrations`}
+              className='mt-4 font-semibold text-sky-500 hover:text-sky-400'
+            >
+              Review your GitHub configuration
+            </Link>
           </div>
         )}
         {lastItem}

diff --git a/packages/client/components/TeamPrompt/WorkDrawer/GitHubIntegrationResultsRoot.tsx b/packages/client/components/TeamPrompt/WorkDrawer/GitHubIntegrationResultsRoot.tsx
@@ -28,7 +28,9 @@ const GitHubIntegrationResultsRoot = (props: Props) => {
   return (
     <ErrorBoundary>
       <Suspense fallback={<Loader />}>
-        {queryRef && <GitHubIntegrationResults queryRef={queryRef} queryType={queryType} />}
+        {queryRef && (
+          <GitHubIntegrationResults queryRef={queryRef} queryType={queryType} teamId={teamId} />
+        )}
       </Suspense>
     </ErrorBoundary>
   )

diff --git a/packages/client/components/TeamPrompt/WorkDrawer/JiraIntegrationResults.tsx b/packages/client/components/TeamPrompt/WorkDrawer/JiraIntegrationResults.tsx
@@ -8,13 +8,15 @@ import halloweenRetrospectiveTemplate from '../../../../../static/images/illustr
 import JiraObjectCard from './JiraObjectCard'
 import useLoadNextOnScrollBottom from '../../../hooks/useLoadNextOnScrollBottom'
 import Ellipsis from '../../Ellipsis/Ellipsis'
+import {Link} from 'react-router-dom'
 
 interface Props {
   queryRef: PreloadedQuery<JiraIntegrationResultsQuery>
+  teamId: string
 }
 
 const JiraIntegrationResults = (props: Props) => {
-  const {queryRef} = props
+  const {queryRef, teamId} = props
   const query = usePreloadedQuery(
     graphql`
       query JiraIntegrationResultsQuery($teamId: ID!) {
@@ -91,6 +93,12 @@ const JiraIntegrationResults = (props: Props) => {
             <div className='mt-7 w-2/3 text-center'>
               {error?.message ? error.message : `Looks like you don’t have any issues to display.`}
             </div>
+            <Link
+              to={`/team/${teamId}/settings/integrations`}
+              className='mt-4 font-semibold text-sky-500 hover:text-sky-400'
+            >
+              Review your Jira configuration
+            </Link>
           </div>
         )}
         {lastItem}

diff --git a/packages/client/components/TeamPrompt/WorkDrawer/JiraIntegrationResultsRoot.tsx b/packages/client/components/TeamPrompt/WorkDrawer/JiraIntegrationResultsRoot.tsx
@@ -19,7 +19,7 @@ const JiraIntegrationResultsRoot = (props: Props) => {
   return (
     <ErrorBoundary>
       <Suspense fallback={<Loader />}>
-        {queryRef && <JiraIntegrationResults queryRef={queryRef} />}
+        {queryRef && <JiraIntegrationResults queryRef={queryRef} teamId={teamId} />}
       </Suspense>
     </ErrorBoundary>
   )