From 2f22e6b51ccff20818da89ebd30611dfa2a122a8 Mon Sep 17 00:00:00 2001 From: kshitij katiyar Date: Fri, 20 Sep 2024 16:08:15 +0530 Subject: [PATCH 1/5] [MM-1025]: Fixed the infinite loading state of tooltip modal --- .../jira_ticket_tooltip.tsx | 25 +++++++++++++++++-- .../jira_ticket_tooltip/ticketStyle.scss | 19 ++++++++++++++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx index 7501fd937..7433d9ba9 100644 --- a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx +++ b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx @@ -18,6 +18,7 @@ export type Props = { export type State = { ticketId: string; ticketDetails?: TicketDetails | null; + error: string | null; }; const isAssignedLabel = ' is assigned'; @@ -46,6 +47,7 @@ export default class TicketPopover extends React.PureComponent { this.state = { ticketId: ticketID, + error: null, }; } @@ -86,11 +88,16 @@ export default class TicketPopover extends React.PureComponent { 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 +173,21 @@ export default class TicketPopover extends React.PureComponent { return null; } - const {ticketDetails} = this.state; + const {ticketDetails, error} = this.state; + if (error) { + return ( +
+ +
{error}
+

{'Check your connection or try again later'}

+
+ ); + } + if (!ticketDetails) { // Display the spinner loader while ticket details are being fetched return ( diff --git a/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss b/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss index 3def07884..510c28b73 100644 --- a/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss +++ b/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss @@ -231,3 +231,22 @@ opacity: 0.72; } } + +.jira-issue-tooltip-error { + height: 210px; + font-size: 28px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; + + .jira-issue-error-message { + font-size: 19px; + text-align: center; + } + + .jira-issue-error-footer { + font-size: 13px; + font-weight: 100; + } +} From 20302a7a6923b7000d6742b58f1fab809ce5dff9 Mon Sep 17 00:00:00 2001 From: kshitij katiyar Date: Mon, 23 Sep 2024 15:16:32 +0530 Subject: [PATCH 2/5] [MM-1025]: Updated the icon and added svg wrapper --- .../jira_ticket_tooltip.tsx | 15 +++++--- .../jira_ticket_tooltip/ticketStyle.scss | 1 + .../src/components/plugin_constants/icons.tsx | 19 ++++++++++ webapp/src/components/svgWrapper/index.tsx | 36 +++++++++++++++++++ 4 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 webapp/src/components/plugin_constants/icons.tsx create mode 100644 webapp/src/components/svgWrapper/index.tsx diff --git a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx index 7433d9ba9..0baecc861 100644 --- a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx +++ b/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'; @@ -177,11 +179,14 @@ export default class TicketPopover extends React.PureComponent { if (error) { return (
- + + {SVGIcons.exclamationTriangle} +
{error}

{'Check your connection or try again later'}

diff --git a/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss b/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss index 510c28b73..e340d1769 100644 --- a/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss +++ b/webapp/src/components/jira_ticket_tooltip/ticketStyle.scss @@ -239,6 +239,7 @@ flex-direction: column; justify-content: center; gap: 10px; + padding: 12px; .jira-issue-error-message { font-size: 19px; diff --git a/webapp/src/components/plugin_constants/icons.tsx b/webapp/src/components/plugin_constants/icons.tsx new file mode 100644 index 000000000..e5983c0c6 --- /dev/null +++ b/webapp/src/components/plugin_constants/icons.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +type SvgIconNames = 'exclamationTriangle'; + +export const SVGIcons: Record = { + exclamationTriangle: ( + + + + + ), +}; diff --git a/webapp/src/components/svgWrapper/index.tsx b/webapp/src/components/svgWrapper/index.tsx new file mode 100644 index 000000000..706de1b73 --- /dev/null +++ b/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 36 36', + height = 36, + width = 36, + fill = 'none', + onHoverFill, + className = '', +}: SVGWrapperProps): JSX.Element => { + return ( + + {children} + + ); +}; + +export default SVGWrapper; From 3ea6e3fc051539233337b1bbfd461315d83ba7f8 Mon Sep 17 00:00:00 2001 From: kshitij katiyar Date: Thu, 26 Sep 2024 11:27:22 +0530 Subject: [PATCH 3/5] [MM-1025]: review fixes --- .../jira_ticket_tooltip/jira_ticket_tooltip.tsx | 4 ++-- webapp/src/components/plugin_constants/icons.tsx | 9 +-------- webapp/src/components/svgWrapper/index.tsx | 2 +- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx index 0baecc861..bd35e7845 100644 --- a/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx +++ b/webapp/src/components/jira_ticket_tooltip/jira_ticket_tooltip.tsx @@ -182,8 +182,8 @@ export default class TicketPopover extends React.PureComponent { {SVGIcons.exclamationTriangle} diff --git a/webapp/src/components/plugin_constants/icons.tsx b/webapp/src/components/plugin_constants/icons.tsx index e5983c0c6..69522d481 100644 --- a/webapp/src/components/plugin_constants/icons.tsx +++ b/webapp/src/components/plugin_constants/icons.tsx @@ -4,14 +4,7 @@ type SvgIconNames = 'exclamationTriangle'; export const SVGIcons: Record = { exclamationTriangle: ( - + diff --git a/webapp/src/components/svgWrapper/index.tsx b/webapp/src/components/svgWrapper/index.tsx index 706de1b73..35f4050b1 100644 --- a/webapp/src/components/svgWrapper/index.tsx +++ b/webapp/src/components/svgWrapper/index.tsx @@ -12,7 +12,7 @@ type SVGWrapperProps = { const SVGWrapper = ({ children, - viewBox = '0 0 36 36', + viewBox = '0 0 16 16', height = 36, width = 36, fill = 'none', From 9c124420c6e7edac02974aca9f221f1dde77af76 Mon Sep 17 00:00:00 2001 From: kshitij katiyar Date: Thu, 26 Sep 2024 18:45:02 +0530 Subject: [PATCH 4/5] [MM-1025]: review fixes --- webapp/src/components/plugin_constants/icons.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/plugin_constants/icons.tsx b/webapp/src/components/plugin_constants/icons.tsx index 69522d481..8d9dbf871 100644 --- a/webapp/src/components/plugin_constants/icons.tsx +++ b/webapp/src/components/plugin_constants/icons.tsx @@ -4,9 +4,9 @@ type SvgIconNames = 'exclamationTriangle'; export const SVGIcons: Record = { exclamationTriangle: ( - - - - + <> + + + ), }; From 8049a4b1e07f0ea99e43c7837d465e3f270337a1 Mon Sep 17 00:00:00 2001 From: kshitij katiyar Date: Thu, 26 Sep 2024 18:48:35 +0530 Subject: [PATCH 5/5] [MM-1081]: fixed lint --- webapp/src/components/plugin_constants/icons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/plugin_constants/icons.tsx b/webapp/src/components/plugin_constants/icons.tsx index 8d9dbf871..6742f6d07 100644 --- a/webapp/src/components/plugin_constants/icons.tsx +++ b/webapp/src/components/plugin_constants/icons.tsx @@ -5,8 +5,8 @@ type SvgIconNames = 'exclamationTriangle'; export const SVGIcons: Record = { exclamationTriangle: ( <> - - + + ), };