fix: Show error message when failing to integrate with Azure DevOps (#…

…10888)
ParabolInc · Feb 18, 2025 · f2d530d · f2d530d
1 parent 28d9fe0
commit f2d530d
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/AzureDevOpsProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/AzureDevOpsProviderRow.tsx
@@ -52,7 +52,7 @@ const AzureDevOpsProviderRow = (props: Props) => {
     viewerRef
   )
   const atmosphere = useAtmosphere()
-  const {submitting, submitMutation, onError, onCompleted} = useMutationProps()
+  const {submitting, submitMutation, error, onError, onCompleted} = useMutationProps()
   const mutationProps = {submitting, submitMutation, onError, onCompleted} as MenuMutationProps
   const {teamMember} = viewer
   const {integrations} = teamMember!
@@ -78,6 +78,7 @@ const AzureDevOpsProviderRow = (props: Props) => {
         providerName={Providers.AZUREDEVOPS_NAME}
         providerDescription={Providers.AZUREDEVOPS_DESC}
         providerLogo={<AzureDevOpsProviderLogo />}
+        error={error?.message}
       />
       {menuPortal(
         <AzureDevOpsConfigMenu

diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/GcalProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/GcalProviderRow.tsx
@@ -36,7 +36,7 @@ const GcalProviderRow = (props: Props) => {
   const {viewerRef, teamId} = props
   const atmosphere = useAtmosphere()
   const mutationProps = useMutationProps()
-  const {submitting} = mutationProps
+  const {submitting, error} = mutationProps
   const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
 
   const viewer = useFragment(
@@ -74,6 +74,7 @@ const GcalProviderRow = (props: Props) => {
         providerName={Providers.GCAL_NAME}
         providerDescription={Providers.GCAL_DESC}
         providerLogo={<GcalProviderLogo />}
+        error={error?.message}
       />
       {menuPortal(
         <GcalConfigMenu menuProps={menuProps} mutationProps={mutationProps} teamId={teamId} />

diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/GitHubProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/GitHubProviderRow.tsx
@@ -32,7 +32,7 @@ const GitHubProviderRow = (props: Props) => {
     `,
     viewerRef
   )
-  const {submitting, submitMutation, onError, onCompleted} = useMutationProps()
+  const {submitting, submitMutation, error, onError, onCompleted} = useMutationProps()
   const atmosphere = useAtmosphere()
   const mutationProps = {submitting, submitMutation, onError, onCompleted} as MenuMutationProps
   const {teamMember} = viewer
@@ -57,6 +57,7 @@ const GitHubProviderRow = (props: Props) => {
         providerName={Providers.GITHUB_NAME}
         providerDescription={Providers.GITHUB_DESC}
         providerLogo={<GitHubProviderLogo />}
+        error={error?.message}
       />
       {menuPortal(
         <GitHubConfigMenu menuProps={menuProps} mutationProps={mutationProps} teamId={teamId} />

diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/GitLabProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/GitLabProviderRow.tsx
@@ -51,7 +51,7 @@ const GitLabProviderRow = (props: Props) => {
   const {teamId, viewerRef} = props
   const atmosphere = useAtmosphere()
   const mutationProps = useMutationProps()
-  const {submitting} = mutationProps
+  const {submitting, error} = mutationProps
   const openOAuth = (providerId: string, clientId: string, serverBaseUrl: string) => {
     GitLabClientManager.openOAuth(
       atmosphere,
@@ -111,6 +111,11 @@ const GitLabProviderRow = (props: Props) => {
                         ? 'Use GitLab Issues from within Parabol.'
                         : 'Connect to your own GitLab server.'}
                     </RowInfoCopy>
+                    {!!error?.message && (
+                      <div className='text-sm text-tomato-500 [&_a]:font-semibold [&_a]:text-tomato-500 [&_a]:underline'>
+                        {error.message}
+                      </div>
+                    )}
                   </RowInfo>
                   <ProviderActions>
                     {!connected && (

diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/MSTeamsProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/MSTeamsProviderRow.tsx
@@ -46,7 +46,7 @@ const MSTeamsProviderRow = (props: Props) => {
   )
   const [isConnectClicked, setConnectClicked] = useState(false)
   const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
-  const {submitting, submitMutation, onError, onCompleted} = useMutationProps()
+  const {submitting, submitMutation, error, onError, onCompleted} = useMutationProps()
   const mutationProps = {submitting, submitMutation, onError, onCompleted} as MenuMutationProps
   const {teamMember} = viewer
   const {integrations} = teamMember!
@@ -68,6 +68,7 @@ const MSTeamsProviderRow = (props: Props) => {
         providerLogo={<MSTeamsProviderLogo />}
         connectButtonText={!isConnectClicked ? 'Connect' : 'Cancel'}
         connectButtonIcon={!isConnectClicked ? <AddIcon /> : <CloseIcon />}
+        error={error?.message}
       >
         {(auth || isConnectClicked) && <MSTeamsPanel teamId={teamId} viewerRef={viewer} />}
       </ProviderRow>

diff --git a/packages/client/modules/teamDashboard/components/ProviderRow/MattermostProviderRow.tsx b/packages/client/modules/teamDashboard/components/ProviderRow/MattermostProviderRow.tsx
@@ -46,7 +46,7 @@ const MattermostProviderRow = (props: Props) => {
   )
   const [isConnectClicked, setConnectClicked] = useState(false)
   const {togglePortal, originRef, menuPortal, menuProps} = useMenu(MenuPosition.UPPER_RIGHT)
-  const {submitting, submitMutation, onError, onCompleted} = useMutationProps()
+  const {submitting, submitMutation, error, onError, onCompleted} = useMutationProps()
   const mutationProps = {submitting, submitMutation, onError, onCompleted} as MenuMutationProps
   const {teamMember} = viewer
   const {integrations} = teamMember!
@@ -68,6 +68,7 @@ const MattermostProviderRow = (props: Props) => {
         providerLogo={<MattermostProviderLogo />}
         connectButtonText={!isConnectClicked ? 'Connect' : 'Cancel'}
         connectButtonIcon={!isConnectClicked ? <AddIcon /> : <CloseIcon />}
+        error={error?.message}
       >
         {(auth || isConnectClicked) && <MattermostPanel teamId={teamId} viewerRef={viewer} />}
       </ProviderRow>