[MM-61744] Import GenericModal, convert Remove Server to new design

i18n/en.json

@@ -3,6 +3,8 @@
   "common.tabs.TAB_FOCALBOARD": "Boards",
   "common.tabs.TAB_MESSAGING": "Channels",
   "common.tabs.TAB_PLAYBOOKS": "Playbooks",
+  "generic_modal.cancel": "Cancel",
+  "generic_modal.confirm": "Confirm",
   "label.accept": "Accept",
   "label.add": "Add",
   "label.allow": "Allow",
@@ -198,8 +200,8 @@
   "renderer.components.newServerModal.warning.notMattermost": "The server URL provided does not appear to point to a valid Mattermost server. Please verify the URL and check your connection.",
   "renderer.components.newServerModal.warning.urlNotMatched": "The server URL does not match the configured Site URL on your Mattermost server. Server version: {serverVersion}",
   "renderer.components.newServerModal.warning.urlUpdated": "The server URL provided has been updated to match the configured Site URL on your Mattermost server. Server version: {serverVersion}",
-  "renderer.components.removeServerModal.body": "This will remove the server from your Desktop App but will not delete any of its data - you can add the server back to the app at any time.",
-  "renderer.components.removeServerModal.confirm": "Confirm you wish to remove the {serverName} server?",
+  "renderer.components.removeServerModal.body": "This will remove the server from your Desktop App but will not delete any of its data - you can add the server back at any time.",
+  "renderer.components.removeServerModal.confirm": "Are you sure you wish to remove the server?",
   "renderer.components.removeServerModal.title": "Remove Server",
   "renderer.components.saveButton.save": "Save",
   "renderer.components.saveButton.saving": "Saving",

src/app/serverViewState.ts

@@ -204,11 +204,11 @@ export class ServerViewState {
             return;
         }
 
-        const modalPromise = ModalManager.addModal<string, boolean>(
+        const modalPromise = ModalManager.addModal<null, boolean>(
             'removeServer',
             'mattermost-desktop://renderer/removeServer.html',
             getLocalPreload('internalAPI.js'),
-            server.name,
+            null,
             mainWindow,
         );
 

src/renderer/components/DestructiveConfirmModal.tsx

@@ -3,16 +3,17 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {Button, Modal} from 'react-bootstrap';
+
+import {GenericModal} from './GenericModal/generic_modal';
 
 type Props = {
     title: string;
     body: React.ReactNode;
     acceptLabel: string;
     cancelLabel: string;
     onHide: () => void;
-    onAccept: React.MouseEventHandler<HTMLButtonElement>;
-    onCancel: React.MouseEventHandler<HTMLButtonElement>;
+    onAccept: () => void;
+    onCancel: () => void;
 };
 
 export default function DestructiveConfirmationModal(props: Props) {
@@ -26,24 +27,19 @@ export default function DestructiveConfirmationModal(props: Props) {
         onHide,
         ...rest} = props;
     return (
-        <Modal
-            onHide={onHide}
+        <GenericModal
+            onExited={onHide}
+            isDeleteModal={true}
+            modalHeaderText={title}
+            handleCancel={onCancel}
+            handleConfirm={onAccept}
+            confirmButtonText={acceptLabel}
+            cancelButtonText={cancelLabel}
+            confirmButtonClassName='btn-danger'
+            compassDesign={true}
             {...rest}
         >
-            <Modal.Header closeButton={true}>
-                <Modal.Title>{title}</Modal.Title>
-            </Modal.Header>
             {body}
-            <Modal.Footer>
-                <Button
-                    variant='link'
-                    onClick={onCancel}
-                >{cancelLabel}</Button>
-                <Button
-                    variant='danger'
-                    onClick={onAccept}
-                >{acceptLabel}</Button>
-            </Modal.Footer>
-        </Modal>
+        </GenericModal>
     );
 }