From 8504e3556874d6f63463284e8844e27ddf4b2367 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 25 Oct 2023 16:15:43 +0200
Subject: [PATCH] SONAR-20858 migrate modals to new UI

---
 .../__tests__/ProjectBranchesApp-it.tsx       |  2 +-
 .../components/DeleteBranchModal.tsx          | 85 ++++++++++---------
 .../components/RenameBranchModal.tsx          | 73 ++++++++--------
 .../components/SetAsMainBranchModal.tsx       | 48 ++++++-----
 .../resources/org/sonar/l10n/core.properties  |  8 +-
 5 files changed, 113 insertions(+), 103 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/projectBranches/__tests__/ProjectBranchesApp-it.tsx b/server/sonar-web/src/main/js/apps/projectBranches/__tests__/ProjectBranchesApp-it.tsx
index c4d75bdcb91..312846c852d 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/__tests__/ProjectBranchesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/__tests__/ProjectBranchesApp-it.tsx
@@ -163,7 +163,7 @@ it('should be able to set a branch as the main branch', async () => {
   await act(async () => {
     await user.click(
       within(ui.dialog.get()).getByRole('button', {
-        name: 'project_branch_pull_request.branch.set_x_as_main.delete-branch',
+        name: 'project_branch_pull_request.branch.set_main',
       }),
     );
   });
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx
index 7f0512c3ef9..cc306e2ea92 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/DeleteBranchModal.tsx
@@ -17,11 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { DangerButtonPrimary, Modal } from 'design-system';
 import * as React from 'react';
-import Modal from '../../../components/controls/Modal';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
+import { FormattedMessage } from 'react-intl';
 import { getBranchLikeDisplayName, isPullRequest } from '../../../helpers/branch-like';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { useDeletBranchMutation } from '../../../queries/branch';
 import { BranchLike } from '../../../types/branch-like';
 import { Component } from '../../../types/types';
@@ -32,48 +31,56 @@ interface Props {
   onClose: () => void;
 }
 
+const FORM_ID = 'confirm-branch-delete-form';
+
 export default function DeleteBranchModal(props: Props) {
-  const { branchLike, component } = props;
+  const { branchLike, component, onClose } = props;
   const { mutate: deleteBranch, isLoading } = useDeletBranchMutation();
 
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    deleteBranch(
-      { component, branchLike },
-      {
-        onSuccess: props.onClose,
-      },
-    );
-  };
-
-  const header = translate(
-    isPullRequest(branchLike)
-      ? 'project_branch_pull_request.pull_request.delete'
-      : 'project_branch_pull_request.branch.delete',
+  const handleSubmit = React.useCallback(
+    (event: React.SyntheticEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      deleteBranch(
+        { component, branchLike },
+        {
+          onSuccess: onClose,
+        },
+      );
+    },
+    [deleteBranch, component, branchLike, onClose],
   );
 
   return (
-    <Modal contentLabel={header} onRequestClose={props.onClose}>
-      <header className="modal-head">
-        <h2>{header}</h2>
-      </header>
-      <form onSubmit={handleSubmit}>
-        <div className="modal-body">
-          {translateWithParameters(
+    <Modal
+      headerTitle={
+        <FormattedMessage
+          id={
             isPullRequest(branchLike)
-              ? 'project_branch_pull_request.pull_request.delete.are_you_sure'
-              : 'project_branch_pull_request.branch.delete.are_you_sure',
-            getBranchLikeDisplayName(branchLike),
-          )}
-        </div>
-        <footer className="modal-foot">
-          {isLoading && <i className="spinner spacer-right" />}
-          <SubmitButton className="button-red" disabled={isLoading}>
-            {translate('delete')}
-          </SubmitButton>
-          <ResetButtonLink onClick={props.onClose}>{translate('cancel')}</ResetButtonLink>
-        </footer>
-      </form>
-    </Modal>
+              ? 'project_branch_pull_request.pull_request.delete'
+              : 'project_branch_pull_request.branch.delete'
+          }
+        />
+      }
+      body={
+        <form id={FORM_ID} onSubmit={handleSubmit}>
+          <FormattedMessage
+            id={
+              isPullRequest(branchLike)
+                ? 'project_branch_pull_request.pull_request.delete.are_you_sure'
+                : 'project_branch_pull_request.branch.delete.are_you_sure'
+            }
+            values={{ name: getBranchLikeDisplayName(branchLike) }}
+          />
+        </form>
+      }
+      loading={isLoading}
+      primaryButton={
+        <DangerButtonPrimary type="submit" form={FORM_ID}>
+          <FormattedMessage id="delete" />
+        </DangerButtonPrimary>
+      }
+      secondaryButtonLabel={<FormattedMessage id="cancel" />}
+      onClose={props.onClose}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
index d92b0794d42..435730dc517 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/RenameBranchModal.tsx
@@ -17,12 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { ButtonPrimary, FormField, InputField, Modal } from 'design-system';
 import * as React from 'react';
 import { useState } from 'react';
-import Modal from '../../../components/controls/Modal';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
-import MandatoryFieldMarker from '../../../components/ui/MandatoryFieldMarker';
-import MandatoryFieldsExplanation from '../../../components/ui/MandatoryFieldsExplanation';
+import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
 import { useRenameMainBranchMutation } from '../../../queries/branch';
 import { MainBranch } from '../../../types/branch-like';
@@ -34,60 +32,61 @@ interface Props {
   onClose: () => void;
 }
 
+const FORM_ID = 'branch-rename-form';
+
 export default function RenameBranchModal(props: Props) {
-  const { branch, component } = props;
+  const { branch, component, onClose } = props;
   const [name, setName] = useState<string>();
 
   const { mutate: renameMainBranch, isLoading } = useRenameMainBranchMutation();
 
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!name) {
-      return;
-    }
+  const handleSubmit = React.useCallback(
+    (event: React.SyntheticEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (!name) {
+        return;
+      }
 
-    renameMainBranch({ component, name }, { onSuccess: props.onClose });
-  };
+      renameMainBranch({ component, name }, { onSuccess: onClose });
+    },
+    [component, name, onClose, renameMainBranch],
+  );
 
-  const handleNameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
+  const handleNameChange = React.useCallback((event: React.SyntheticEvent<HTMLInputElement>) => {
     setName(event.currentTarget.value);
-  };
+  }, []);
 
   const header = translate('project_branch_pull_request.branch.rename');
   const submitDisabled = isLoading || !name || name === branch.name;
 
   return (
-    <Modal contentLabel={header} onRequestClose={props.onClose} size="small">
-      <header className="modal-head">
-        <h2>{header}</h2>
-      </header>
-      <form onSubmit={handleSubmit}>
-        <div className="modal-body">
-          <MandatoryFieldsExplanation className="modal-field" />
-          <div className="modal-field">
-            <label htmlFor="rename-branch-name">
-              {translate('new_name')}
-              <MandatoryFieldMarker />
-            </label>
-            <input
+    <Modal
+      headerTitle={header}
+      body={
+        <form id={FORM_ID} onSubmit={handleSubmit}>
+          <FormField className="sw-mb-1" label={<FormattedMessage id="new_name" />}>
+            <InputField
               autoFocus
               id="rename-branch-name"
               maxLength={100}
               name="name"
               onChange={handleNameChange}
               required
-              size={50}
+              size="full"
               type="text"
               value={name ?? branch.name}
             />
-          </div>
-        </div>
-        <footer className="modal-foot">
-          {isLoading && <i className="spinner spacer-right" />}
-          <SubmitButton disabled={submitDisabled}>{translate('rename')}</SubmitButton>
-          <ResetButtonLink onClick={props.onClose}>{translate('cancel')}</ResetButtonLink>
-        </footer>
-      </form>
-    </Modal>
+          </FormField>
+        </form>
+      }
+      loading={isLoading}
+      primaryButton={
+        <ButtonPrimary disabled={submitDisabled} type="submit" form={FORM_ID}>
+          <FormattedMessage id="rename" />
+        </ButtonPrimary>
+      }
+      secondaryButtonLabel={<FormattedMessage id="cancel" />}
+      onClose={props.onClose}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx b/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx
index 99407a7bdcb..00e81ae4318 100644
--- a/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBranches/components/SetAsMainBranchModal.tsx
@@ -20,8 +20,8 @@
 import { ButtonPrimary, FlagMessage, Modal } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import DocLink from '../../../components/common/DocLink';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import DocumentationLink from '../../../components/common/DocumentationLink';
+import { translate } from '../../../helpers/l10n';
 import { useSetMainBranchMutation } from '../../../queries/branch';
 import { Branch } from '../../../types/branch-like';
 import { Component } from '../../../types/types';
@@ -33,42 +33,46 @@ interface SetAsMainBranchModalProps {
   onSetAsMain: () => void;
 }
 
+const FORM_ID = 'branch-setasmain-form';
+
 export default function SetAsMainBranchModal(props: SetAsMainBranchModalProps) {
   const { branch, component, onClose, onSetAsMain } = props;
   const { mutate: setMainBranch, isLoading } = useSetMainBranchMutation();
 
-  const handleClick = () => {
-    setMainBranch({ component, branchName: branch.name }, { onSuccess: onSetAsMain });
-  };
+  const handleSubmit = React.useCallback(
+    (e: React.SyntheticEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setMainBranch({ component, branchName: branch.name }, { onSuccess: onSetAsMain });
+    },
+    [branch, component, onSetAsMain, setMainBranch],
+  );
 
   return (
     <Modal
       headerTitle={
-        <span className="sw-break-all">
-          {translateWithParameters('project_branch_pull_request.branch.set_x_as_main', branch.name)}
-        </span>
+        <FormattedMessage
+          id="project_branch_pull_request.branch.set_x_as_main"
+          values={{ branch: <span className="sw-break-all">{branch.name}</span> }}
+        />
       }
       loading={isLoading}
       onClose={onClose}
       body={
-        <>
+        <form id={FORM_ID} onSubmit={handleSubmit}>
           <p className="sw-mb-4">
-            {translateWithParameters(
-              'project_branch_pull_request.branch.main_branch.are_you_sure',
-              branch.name,
-            )}
+            <FormattedMessage
+              id="project_branch_pull_request.branch.main_branch.are_you_sure"
+              values={{ branch: <span className="sw-break-all">{branch.name}</span> }}
+            />
           </p>
           <p className="sw-mb-4">
             <FormattedMessage
               id="project_branch_pull_request.branch.main_branch.learn_more"
-              defaultMessage={translate(
-                'project_branch_pull_request.branch.main_branch.learn_more',
-              )}
               values={{
                 documentation: (
-                  <DocLink to="/analyzing-source-code/branches/branch-analysis/#main-branch">
+                  <DocumentationLink to="/analyzing-source-code/branches/branch-analysis/#main-branch">
                     {translate('documentation')}
-                  </DocLink>
+                  </DocumentationLink>
                 ),
               }}
             />
@@ -76,14 +80,14 @@ export default function SetAsMainBranchModal(props: SetAsMainBranchModalProps) {
           <FlagMessage variant="warning">
             {translate('project_branch_pull_request.branch.main_branch.requires_reindex')}
           </FlagMessage>
-        </>
+        </form>
       }
       primaryButton={
-        <ButtonPrimary disabled={isLoading} onClick={handleClick}>
-          {translateWithParameters('project_branch_pull_request.branch.set_x_as_main', branch.name)}
+        <ButtonPrimary disabled={isLoading} type="submit" form={FORM_ID}>
+          <FormattedMessage id="project_branch_pull_request.branch.set_main" />
         </ButtonPrimary>
       }
-      secondaryButtonLabel={translate('cancel')}
+      secondaryButtonLabel={<FormattedMessage id="cancel" />}
     />
   );
 }
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 9ee9818a20a..7259cf5d64c 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -636,18 +636,18 @@ project_branch_pull_request.lifetime_information=Branches and Pull Requests are
 project_branch_pull_request.lifetime_information.admin=You can adjust this value globally in {settings}.
 project_branch_pull_request.branch.rename=Rename branch
 project_branch_pull_request.branch.set_main=Set as main branch
-project_branch_pull_request.branch.set_x_as_main=Set "{0}" as the main branch
+project_branch_pull_request.branch.set_x_as_main=Set "{branch}" as the main branch
 project_branch_pull_request.branch.delete=Delete branch
 project_branch_pull_request.branch.actions_label=Update {0}
-project_branch_pull_request.branch.delete.are_you_sure=Are you sure you want to delete branch "{0}"?
-project_branch_pull_request.branch.main_branch.are_you_sure=Are you sure you want to set branch "{0}" as the main branch of this project?
+project_branch_pull_request.branch.delete.are_you_sure=Are you sure you want to delete branch "{name}"?
+project_branch_pull_request.branch.main_branch.are_you_sure=Are you sure you want to set branch "{branch}" as the main branch of this project?
 project_branch_pull_request.branch.main_branch.requires_reindex=Changing the main branch of your project will trigger a project re-indexation and may impact the level of information that is available until re-indexing is complete.
 project_branch_pull_request.branch.main_branch.learn_more=Please refer to the {documentation} to understand the impacts of changing the main branch.
 project_branch_pull_request.branch.auto_deletion.keep_when_inactive=Keep when inactive
 project_branch_pull_request.branch.auto_deletion.keep_when_inactive.tooltip=When turned on, the branch will not be automatically deleted when inactive.
 project_branch_pull_request.branch.auto_deletion.main_branch_tooltip=The main branch is always excluded from automatic deletion.
 project_branch_pull_request.pull_request.delete=Delete Pull Request
-project_branch_pull_request.pull_request.delete.are_you_sure=Are you sure you want to delete Pull Request "{0}"?
+project_branch_pull_request.pull_request.delete.are_you_sure=Are you sure you want to delete Pull Request "{name}"?
 project_branch_pull_request.tabs.branches=Branches
 project_branch_pull_request.tabs.pull_requests=Pull Requests
 project_branch_pull_request.table.branch=Branch
-- 
2.39.5