[MM-1025]: Fixed the infinite loading state of tooltip modal

webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx

@@ -1,6 +1,8 @@
 import React, {ReactNode} from 'react';
 
 import {Instance} from 'types/model';
+import SVGWrapper from 'components/svgWrapper';
+import {SVGIcons} from 'components/plugin_constants/icons';
 import {TicketData, TicketDetails} from 'types/tooltip';
 import DefaultAvatar from 'components/default_avatar/default_avatar';
 
@@ -18,6 +20,7 @@ export type Props = {
 export type State = {
     ticketId: string;
     ticketDetails?: TicketDetails | null;
+    error: string | null;
 };
 
 const isAssignedLabel = ' is assigned';
@@ -46,6 +49,7 @@ export default class TicketPopover extends React.PureComponent<Props, State> {
 
         this.state = {
             ticketId: ticketID,
+            error: null,
         };
     }
 
@@ -86,11 +90,16 @@ export default class TicketPopover extends React.PureComponent<Props, State> {
         const {instanceID} = issueKey;
         const {ticketId, ticketDetails} = this.state;
         if (!ticketDetails && this.props.show && ticketId) {
-            this.props.fetchIssueByKey(this.state.ticketId, instanceID).then((res: {data?: TicketData}) => {
+            this.props.fetchIssueByKey(this.state.ticketId, instanceID).then((res: { data?: TicketData; error?: any}) => {
+                if (res.error) {
+                    this.setState({error: 'There was a problem loading the details for this Jira link'});
+                    return;
+                }
                 const updatedTicketDetails = getJiraTicketDetails(res.data);
                 if (this.props.connected && updatedTicketDetails && updatedTicketDetails.ticketId === ticketId) {
                     this.setState({
                         ticketDetails: updatedTicketDetails,
+                        error: null,
                     });
                 }
             });
@@ -166,7 +175,24 @@ export default class TicketPopover extends React.PureComponent<Props, State> {
             return null;
         }
 
-        const {ticketDetails} = this.state;
+        const {ticketDetails, error} = this.state;
+        if (error) {
+            return (
+                <div className='jira-issue-tooltip jira-issue-tooltip-error'>
+                    <SVGWrapper
+                        width={30}
+                        height={30}
+                        fill='#FF0000'
+                        className='bi bi-exclamation-triangle'
+                    >
+                        {SVGIcons.exclamationTriangle}
+                    </SVGWrapper>
+                    <div className='jira-issue-error-message'>{error}</div>
+                    <p className='jira-issue-error-footer'>{'Check your connection or try again later'}</p>
+                </div>
+            );
+        }
+
         if (!ticketDetails) {
             // Display the spinner loader while ticket details are being fetched
             return (

webapp/src/components/jira_ticket_tooltip/ticketStyle.scss

@@ -231,3 +231,23 @@
         opacity: 0.72;
     }
 }
+
+.jira-issue-tooltip-error {
+    height: 210px;
+    font-size: 28px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px;
+
+    .jira-issue-error-message {
+        font-size: 19px;
+        text-align: center;
+    }
+
+    .jira-issue-error-footer {
+        font-size: 13px;
+        font-weight: 100;
+    }
+}

webapp/src/components/plugin_constants/icons.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type SvgIconNames = 'exclamationTriangle';
+
+export const SVGIcons: Record<SvgIconNames, JSX.Element> = {
+    exclamationTriangle: (
+        <>
+            <path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/>
+            <path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/>
+        </>
+    ),
+};

webapp/src/components/svgWrapper/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+type SVGWrapperProps = {
+    viewBox?: string;
+    height?: number;
+    width?: number;
+    fill?: string;
+    onHoverFill?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+
+const SVGWrapper = ({
+    children,
+    viewBox = '0 0 16 16',
+    height = 36,
+    width = 36,
+    fill = 'none',
+    onHoverFill,
+    className = '',
+}: SVGWrapperProps): JSX.Element => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            fill={onHoverFill || fill}
+            xmlns='http://www.w3.org/2000/svg'
+            className={className}
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default SVGWrapper;