SONAR-20915 Migrate project deletion to the new UI

4 files changed, 27 insertions, 19 deletions

diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
index 3966b35b46a..dccd65c1304 100644
--- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx
@@ -60,6 +60,7 @@ const TEMP_PAGELIST_WITH_NEW_BACKGROUND_WHITE = [
   '/project/baseline',
   '/project/branches',
   '/project/key',
+  '/project/deletion',
 ];
 
 export default function GlobalContainer() {
diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
index 24a6d8c50a6..e7cb678d01f 100644
--- a/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDeletion/App.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CenteredLayout, PageContentFontWrapper } from 'design-system/lib';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
 import { ComponentContext } from '../../app/components/componentContext/ComponentContext';
@@ -32,10 +33,12 @@ export default function App() {
   }
 
   return (
-    <div className="page page-limited">
+    <CenteredLayout>
       <Helmet defer={false} title={translate('deletion.page')} />
-      <Header component={component} />
-      <Form component={component} />
-    </div>
+      <PageContentFontWrapper className="sw-my-8 sw-body-sm">
+        <Header component={component} />
+        <Form component={component} />
+      </PageContentFontWrapper>
+    </CenteredLayout>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx
index 5a8b33da38a..484b7fe5ea3 100644
--- a/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDeletion/Form.tsx
@@ -17,11 +17,11 @@
  * 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 } from 'design-system/lib';
 import * as React from 'react';
 import { deleteApplication } from '../../api/application';
 import { deletePortfolio, deleteProject } from '../../api/project-management';
 import ConfirmButton from '../../components/controls/ConfirmButton';
-import { Button } from '../../components/controls/buttons';
 import { Router, withRouter } from '../../components/hoc/withRouter';
 import { addGlobalSuccessMessage } from '../../helpers/globalMessages';
 import { translate, translateWithParameters } from '../../helpers/l10n';
@@ -67,9 +67,9 @@ export class Form extends React.PureComponent<Props> {
         onConfirm={this.handleDelete}
       >
         {({ onClick }) => (
-          <Button className="button-red" id="delete-project" onClick={onClick}>
+          <DangerButtonPrimary id="delete-project" onClick={onClick}>
             {translate('delete')}
-          </Button>
+          </DangerButtonPrimary>
         )}
       </ConfirmButton>
     );
diff --git a/server/sonar-web/src/main/js/apps/projectDeletion/Header.tsx b/server/sonar-web/src/main/js/apps/projectDeletion/Header.tsx
index a309495370b..6d38d4d7144 100644
--- a/server/sonar-web/src/main/js/apps/projectDeletion/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/projectDeletion/Header.tsx
@@ -17,29 +17,33 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Title } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
+import { isApplication, isPortfolioLike } from '../../types/component';
 import { Component } from '../../types/types';
 
 interface Props {
   component: Pick<Component, 'qualifier'>;
 }
 
-export default function Header(props: Props) {
-  const { qualifier } = props.component;
-  let description: string;
-  if (['VW', 'SVW'].includes(qualifier)) {
-    description = translate('portfolio_deletion.page.description');
-  } else if (qualifier === 'APP') {
-    description = translate('application_deletion.page.description');
-  } else {
-    description = translate('project_deletion.page.description');
+function getDescription(qualifier: string) {
+  if (isPortfolioLike(qualifier)) {
+    return translate('portfolio_deletion.page.description');
+  } else if (isApplication(qualifier)) {
+    return translate('application_deletion.page.description');
   }
 
+  return translate('project_deletion.page.description');
+}
+
+export default function Header(props: Readonly<Props>) {
+  const { qualifier } = props.component;
+
   return (
-    <header className="page-header">
-      <h1 className="page-title">{translate('deletion.page')}</h1>
-      <div className="page-description">{description}</div>
+    <header className="sw-mt-8 sw-mb-4">
+      <Title className="sw-mb-4">{translate('deletion.page')}</Title>
+      <p className="sw-mb-2">{getDescription(qualifier)}</p>
     </header>
   );
 }