SONAR-25927 Allow users to create a Jira ticket from a single SQS issue

GitOrigin-RevId: e03ba2403ced18a4228d9b7b1bdd91b5dba3589d

Author: Hartesic

apps/sq-server/src/main/js/apps/issues/__tests__/IssuesApp-Filtering-it.tsx

@@ -20,6 +20,7 @@
 
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ComponentProps } from 'react';
 import { renderOwaspTop102021Category } from '~shared/helpers/security-standards';
 import { mockLoggedInUser, mockRawIssue } from '~sq-server-commons/helpers/testMocks';
 import { Feature } from '~sq-server-commons/types/features';
@@ -39,7 +40,7 @@ import IssuesList from '../components/IssuesList';
 import { renderIssueApp, renderProjectIssuesApp } from '../test-utils';
 
 jest.mock('../components/IssuesList', () => {
-  const fakeIssueList = (props: IssuesList['props']) => {
+  const fakeIssueList = (props: ComponentProps<typeof IssuesList>) => {
     return (
       <>
         {props.issues.map((i) => (

apps/sq-server/src/main/js/apps/issues/components/IssueDetails.tsx

@@ -20,6 +20,7 @@
 
 import styled from '@emotion/styled';
 import { Spinner } from '@sonarsource/echoes-react';
+import { ComponentProps, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useIntl } from 'react-intl';
 import {
@@ -34,6 +35,7 @@ import StyledNavFix from '~shared/components/nav/NavFix';
 import { isPortfolioLike } from '~shared/helpers/component';
 import { ComponentQualifier } from '~shared/types/component';
 import { Paging } from '~shared/types/paging';
+import { addons } from '~sq-server-addons/index';
 import ScreenPositionHelper from '~sq-server-commons/components/common/ScreenPositionHelper';
 import { AiCodeFixTab } from '~sq-server-commons/components/rules/AiCodeFixTab';
 import IssueTabViewer from '~sq-server-commons/components/rules/IssueTabViewer';
@@ -86,6 +88,21 @@ export default function IssueDetails({
 
   const intl = useIntl();
 
+  const additionalIssueActions = useMemo(() => {
+    const additionalActions = [] as Required<
+      ComponentProps<typeof IssueTabViewer>
+    >['additionalIssueActions'];
+
+    if (addons.jira !== undefined && component !== undefined) {
+      const { IssueJiraWorkItem } = addons.jira;
+      additionalActions.push(({ issue }) => (
+        <IssueJiraWorkItem component={component} issue={issue} />
+      ));
+    }
+
+    return additionalActions;
+  }, [component]);
+
   const warning = !canBrowseAllChildProjects && isPortfolioLike(qualifier) && (
     <FlagMessage
       className="it__portfolio_warning sw-flex"
@@ -166,6 +183,7 @@ export default function IssueDetails({
                             onChange={handleIssueChange}
                           />
                         }
+                        additionalIssueActions={additionalIssueActions}
                         codeTabContent={
                           <IssuesSourceViewer
                             branchLike={fillBranchLike(openIssue.branch, openIssue.pullRequest)}

apps/sq-server/src/main/js/apps/issues/components/IssuesList.tsx

@@ -21,12 +21,13 @@
 import { Spinner } from '@sonarsource/echoes-react';
 import { groupBy } from 'lodash';
 import * as React from 'react';
+import { addons } from '~sq-server-addons/index';
 import IssueItem from '~sq-server-commons/components/issue/Issue';
 import { BranchLike } from '~sq-server-commons/types/branch-like';
 import { Component, Issue } from '~sq-server-commons/types/types';
 import ComponentBreadcrumbs from './ComponentBreadcrumbs';
 
-interface Props {
+interface IssuesListProps {
   branchLike: BranchLike | undefined;
   checked: string[];
   component: Component | undefined;
@@ -39,66 +40,74 @@ interface Props {
   selectedIssue: Issue | undefined;
 }
 
-interface State {
-  prerender: boolean;
-}
+export default function IssuesList({
+  branchLike,
+  checked,
+  component,
+  issues,
+  onIssueChange,
+  onIssueCheck,
+  onIssueSelect,
+  onPopupToggle,
+  openPopup,
+  selectedIssue,
+}: Readonly<IssuesListProps>) {
+  const [prerender, setPrerender] = React.useState(true);
 
-export default class IssuesList extends React.PureComponent<Props, State> {
-  state: State = {
-    prerender: true,
-  };
+  const issuesByComponent = React.useMemo(
+    () => groupBy(issues, (issue) => `(${issue.component} : ${issue.branch})`),
+    [issues],
+  );
 
-  componentDidMount() {
-    if (this.props.issues.length > 0) {
-      this.setState({ prerender: false });
-    }
-  }
+  const additionalIssueActions = React.useMemo(() => {
+    const additionalActions = [] as Required<
+      React.ComponentProps<typeof IssueItem>
+    >['additionalIssueActions'];
 
-  componentDidUpdate() {
-    if (this.props.issues.length > 0) {
-      this.setState({ prerender: false });
+    if (addons.jira !== undefined && component !== undefined) {
+      const JiraWorkItemComponent = addons.jira.IssueJiraWorkItem;
+      additionalActions.push(({ issue }) => (
+        <JiraWorkItemComponent component={component} issue={issue} />
+      ));
     }
-  }
 
-  renderIssueComponentList = ([key, issues]: [string, Issue[]]) => {
-    const { branchLike, checked, component, openPopup, selectedIssue } = this.props;
-    return (
-      <li key={key}>
-        <ComponentBreadcrumbs component={component} issue={issues[0]} />
-        <ul>
-          {issues.map((issue) => (
-            <IssueItem
-              branchLike={branchLike}
-              checked={checked.includes(issue.key)}
-              issue={issue}
-              key={issue.key}
-              onChange={this.props.onIssueChange}
-              onCheck={this.props.onIssueCheck}
-              onPopupToggle={this.props.onPopupToggle}
-              onSelect={this.props.onIssueSelect}
-              openPopup={openPopup && openPopup.issue === issue.key ? openPopup.name : undefined}
-              selected={selectedIssue != null && selectedIssue.key === issue.key}
-            />
-          ))}
-        </ul>
-      </li>
-    );
-  };
+    return additionalActions;
+  }, [component]);
 
-  render() {
-    const { issues } = this.props;
-    const { prerender } = this.state;
-
-    if (prerender) {
-      return (
-        <div>
-          <Spinner />
-        </div>
-      );
+  React.useEffect(() => {
+    if (issues.length > 0) {
+      setPrerender(false);
     }
+  }, [issues]);
 
-    const issuesByComponent = groupBy(issues, (issue) => `(${issue.component} : ${issue.branch})`);
-
-    return <ul>{Object.entries(issuesByComponent).map(this.renderIssueComponentList)}</ul>;
-  }
+  return (
+    <Spinner isLoading={prerender}>
+      <ul>
+        {Object.entries(issuesByComponent).map(([key, issues]: [string, Issue[]]) => (
+          <li key={key}>
+            <ComponentBreadcrumbs component={component} issue={issues[0]} />
+            <ul>
+              {issues.map((issue) => (
+                <IssueItem
+                  additionalIssueActions={additionalIssueActions}
+                  branchLike={branchLike}
+                  checked={checked.includes(issue.key)}
+                  issue={issue}
+                  key={issue.key}
+                  onChange={onIssueChange}
+                  onCheck={onIssueCheck}
+                  onPopupToggle={onPopupToggle}
+                  onSelect={onIssueSelect}
+                  openPopup={
+                    openPopup && openPopup.issue === issue.key ? openPopup.name : undefined
+                  }
+                  selected={selectedIssue != null && selectedIssue.key === issue.key}
+                />
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </Spinner>
+  );
 }

libs/sq-server-commons/src/components/issue/Issue.tsx

@@ -32,6 +32,7 @@ import { updateIssue } from './actions';
 import IssueView from './components/IssueView';
 
 interface Props {
+  additionalIssueActions?: React.ComponentType<{ issue: TypeIssue }>[];
   branchLike?: BranchLike;
   checked?: boolean;
   displayWhyIsThisAnIssue?: boolean;
@@ -46,14 +47,15 @@ interface Props {
 
 function Issue(props: Readonly<Props>) {
   const {
-    selected = false,
-    issue,
+    additionalIssueActions,
     branchLike,
     checked,
-    openPopup,
     displayWhyIsThisAnIssue,
+    issue,
     onCheck,
     onPopupToggle,
+    openPopup,
+    selected = false,
   } = props;
 
   const { component } = useComponent();
@@ -145,6 +147,7 @@ function Issue(props: Readonly<Props>) {
 
   return (
     <IssueView
+      additionalIssueActions={additionalIssueActions}
       branchLike={branchLike}
       checked={checked}
       currentPopup={openPopup}

libs/sq-server-commons/src/components/issue/components/IssueActionsBar.tsx

@@ -27,6 +27,7 @@ import IssueTransition from './IssueTransition';
 import SonarLintBadge from './SonarLintBadge';
 
 interface Props {
+  additionalIssueActions?: React.ComponentType<{ issue: Issue }>[];
   canSetTags?: boolean;
   currentPopup?: string;
   issue: Issue;
@@ -39,14 +40,15 @@ interface Props {
 
 export default function IssueActionsBar(props: Readonly<Props>) {
   const {
-    issue,
+    additionalIssueActions,
+    canSetTags,
     currentPopup,
+    issue,
     onAssign,
     onChange,
-    togglePopup,
     showSonarLintBadge,
     showTags,
-    canSetTags,
+    togglePopup,
   } = props;
 
   const canAssign = issue.actions.includes(IssueActions.Assign);
@@ -78,6 +80,12 @@ export default function IssueActionsBar(props: Readonly<Props>) {
           />
         </li>
 
+        {additionalIssueActions?.map((ActionComponent) => (
+          <li key={`${ActionComponent.displayName}-${issue.key}`}>
+            <ActionComponent issue={issue} />
+          </li>
+        ))}
+
         {showTags && (
           <li>
             <IssueTags

libs/sq-server-commons/src/components/issue/components/IssueView.tsx

@@ -45,6 +45,7 @@ import IssueTags from './IssueTags';
 import IssueTitleBar from './IssueTitleBar';
 
 interface Props {
+  additionalIssueActions?: React.ComponentType<{ issue: Issue }>[];
   branchLike?: BranchLike;
   checked?: boolean;
   currentPopup?: string;
@@ -60,17 +61,18 @@ interface Props {
 
 export default function IssueView(props: Readonly<Props>) {
   const {
-    issue,
+    additionalIssueActions,
     branchLike,
     checked,
     currentPopup,
     displayWhyIsThisAnIssue,
+    issue,
     onAssign,
     onChange,
+    onCheck,
     onSelect,
-    togglePopup,
     selected,
-    onCheck,
+    togglePopup,
   } = props;
   const intl = useIntl();
   const nodeRef = useRef<HTMLLIElement>(null);
@@ -210,6 +212,7 @@ export default function IssueView(props: Readonly<Props>) {
 
           <div className="sw-flex sw-gap-2 sw-flex-nowrap sw-items-center sw-justify-between">
             <IssueActionsBar
+              additionalIssueActions={additionalIssueActions}
               currentPopup={currentPopup}
               issue={issue}
               onAssign={onAssign}

libs/sq-server-commons/src/components/issues/IssueHeader.tsx

@@ -45,6 +45,7 @@ import IssueHeaderMeta from './IssueHeaderMeta';
 import IssueHeaderSide from './IssueHeaderSide';
 
 interface Props {
+  additionalIssueActions?: React.ComponentType<{ issue: Issue }>[];
   branchLike?: BranchLike;
   issue: Issue;
   onIssueChange: (issue: Issue) => void;
@@ -199,7 +200,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { issue, branchLike } = this.props;
+    const { additionalIssueActions, issue, branchLike } = this.props;
     const { issuePopupName } = this.state;
     const issueUrl = getComponentIssuesUrl(issue.project, {
       ...getBranchLikeQuery(branchLike),
@@ -240,6 +241,7 @@ export default class IssueHeader extends React.PureComponent<Props, State> {
           <BasicSeparator />
 
           <IssueActionsBar
+            additionalIssueActions={additionalIssueActions}
             canSetTags={canSetTags}
             currentPopup={issuePopupName}
             issue={issue}

libs/sq-server-commons/src/components/rules/IssueTabViewer.tsx

@@ -42,6 +42,7 @@ import { TabSelectorContext } from './TabSelectorContext';
 
 interface IssueTabViewerProps extends CurrentUserContextInterface {
   activityTabContent?: React.ReactNode;
+  additionalIssueActions?: React.ComponentType<{ issue: Issue }>[];
   aiSuggestionAvailable: boolean;
   codeTabContent?: React.ReactNode;
   currentUser: CurrentUser;
@@ -363,7 +364,7 @@ export class IssueTabViewer extends React.PureComponent<IssueTabViewerProps, Sta
   };
 
   render() {
-    const { issue, ruleDetails } = this.props;
+    const { additionalIssueActions, issue, ruleDetails } = this.props;
     const { tabs, selectedTab } = this.state;
 
     if (!tabs || tabs.length === 0 || !selectedTab) {
@@ -385,6 +386,7 @@ export class IssueTabViewer extends React.PureComponent<IssueTabViewerProps, Sta
             >
               <div className="sw-p-6 sw-pb-4" ref={(node) => (this.headerNode = node)}>
                 <IssueHeader
+                  additionalIssueActions={additionalIssueActions}
                   branchLike={fillBranchLike(issue.branch, issue.pullRequest)}
                   issue={issue}
                   onIssueChange={this.props.onIssueChange}

libs/sq-server-commons/src/l10n/default.ts

@@ -8879,4 +8879,23 @@ export const defaultMessages = {
     '{count} SonarQube {count, plural, one {issue} other {issues}} and corresponding Jira work items will no longer be synchronized. However, existing Jira work items will not be deleted.',
   'project_settings.jira_binding.unbind_confirm.alert':
     'Previous connections cannot be restored. Rebinding or creating a new project binding with Jira can lead to duplicate Jira work items.',
+
+  'issue.jira.work_item_deletion_error': 'Failed removing link to Jira issue {0}',
+  'issue.jira.work_item_deletion_link': 'Remove link',
+  'issue.jira.work_item_deletion_tooltip': 'Remove link to Jira issue',
+  'issue.jira.work_item_deletion_modal_description':
+    'This action cannot be undone. Deleting this connection only removes the link between SonarQube and Jira; it will not delete any work items in Jira itself.',
+  'issue.jira.work_item_deletion_modal_title': 'Are you sure you want to remove the Jira link?',
+  'issue.jira.work_item_deletion_success': 'Link to Jira issue {0} has been removed',
+  'issue.jira.work_item_creation': 'Push to Jira',
+  'issue.jira.work_item_creation.in_progress': 'Pushing to Jira',
+  'issue.jira.work_item_creation.count':
+    'Push {count} {count, plural, one {issue} other {issues}} to Jira',
+  'issue.jira.work_item_creation_success': 'Work item {0} created in Jira',
+  'issue.jira.work_type_dropdown': 'Choose Jira work type',
+  'issue.jira.view_work_item': 'View work item',
+  'issue.jira.work_items_creation_failure':
+    "An error occurred. Please make sure you don't try to push the same issue twice to Jira.",
+  'issue.jira.work_items_creation.success':
+    'Jira work {count, plural, one {item} other {items}} <link>{jiraWorkItemKey}</link> has been successfully created and linked to {count} SonarQube {count, plural, one {issue} other {issues}}',
 };