From fe36079daf6dc50ad6b6a0b2217f867dc4710fe1 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 10 Mar 2021 16:32:23 -0600
Subject: [PATCH 1/4] call shared deletebot modal from toolbar

---
 .../pages/botProject/BotProjectSettings.tsx   | 10 ++-
 .../src/pages/botProject/DeleteBotButton.tsx  | 87 +++++--------------
 2 files changed, 28 insertions(+), 69 deletions(-)

diff --git a/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx b/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
index a5ca43b742..de9be6fb79 100644
--- a/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
+++ b/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
@@ -28,6 +28,7 @@ import { createBotSettingUrl, navigateTo } from '../../utils/navigation';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { useFeatureFlag } from '../../utils/hooks';
 
+import { DeleteBotButton, openDeleteBotModal } from './DeleteBotButton';
 import BotProjectSettingsTableView from './BotProjectSettingsTableView';
 
 // -------------------- Styles -------------------- //
@@ -73,6 +74,7 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
   const [showGetStarted, setShowGetStarted] = useState<boolean>(false);
   const [showTeachingBubble, setShowTeachingBubble] = useState<boolean>(true);
   const [toolbarItems, setToolbarItems] = useState<IToolbarItem[]>([]);
+  const { deleteBot } = useRecoilValue(dispatcherState);
 
   const isRootBot = !!botProject?.isRootBot;
   const botName = botProject?.name;
@@ -87,7 +89,6 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
   const linkToConnections = `/bot/${rootBotProjectId}/botProjectsSettings/#connections`;
   const linkToLGEditor = `/bot/${rootBotProjectId}/language-generation`;
   const linkToLUEditor = `/bot/${rootBotProjectId}/language-understanding`;
-  const linkToDelete = `/bot/${rootBotProjectId}/botProjectsSettings/#deleteBot`;
 
   const buttonClick = (link) => {
     TelemetryClient.track('GettingStartedLinkClicked', { method: 'button', url: link });
@@ -150,7 +151,12 @@ const BotProjectSettings: React.FC<RouteComponentProps<{ projectId: string; skil
           type: 'action',
           buttonProps: {
             iconProps: { iconName: 'Trash' },
-            onClick: () => buttonClick(linkToDelete),
+            onClick: () => {
+              openDeleteBotModal(async () => {
+                await deleteBot(projectId);
+                navigateTo('home');
+              });
+            },
             styles: defaultToolbarButtonStyles,
           },
           align: 'left',
diff --git a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
index 0eea56c889..093bb27c8e 100644
--- a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
+++ b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
@@ -41,78 +41,31 @@ type DeleteBotButtonProps = {
   scrollToSectionId: string;
 };
 
+export const openDeleteBotModal = async (onConfirm: () => Promise<void>) => {
+  const warningText = formatMessage(
+    'Are you sure you want to delete your bot? This action cannot be undone and your ot and all relsated files in the bot project folder will be permanently deleted. Your Azure resources will remain unchanged.'
+  );
+  const title = formatMessage('Delete Bot');
+  const settings = {
+    confirmText: formatMessage('Yes, delete'),
+  };
+  const res = await OpenConfirmModal(title, warningText, settings);
+  if (res) {
+    await onConfirm();
+  }
+};
+
 export const DeleteBotButton: React.FC<DeleteBotButtonProps> = (props) => {
   const { projectId, scrollToSectionId = '' } = props;
   const { deleteBot } = useRecoilValue(dispatcherState);
-  const openDeleteBotModal = async () => {
-    const boldWarningText = formatMessage(
-      'Warning: the action you are about to take cannot be undone. Going further will delete this bot and any related files in the bot project folder.'
-    );
-    const warningText = formatMessage('External resources will not be changed.');
-    const title = formatMessage('Delete Bot');
-    const checkboxLabel = formatMessage('I want to delete this bot');
-    const settings = {
-      onRenderContent: () => {
-        return (
-          <div
-            style={{
-              background: '#ffddcc',
-              display: 'flex',
-              flexDirection: 'row',
-              marginBottom: '24px',
-            }}
-          >
-            <FontIcon
-              iconName="Warning12"
-              style={{
-                color: '#DD4400',
-                fontSize: 36,
-                padding: '32px',
-              }}
-            />
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <Text
-                block
-                style={{
-                  fontWeight: 'bold',
-                  marginTop: '24px',
-                  marginRight: '24px',
-                  marginBottom: '24px',
-                }}
-              >
-                {boldWarningText}
-              </Text>
-              <Text
-                block
-                style={{
-                  marginRight: '24px',
-                  marginBottom: '24px',
-                }}
-              >
-                {warningText}
-              </Text>
-            </div>
-          </div>
-        );
-      },
-      disabled: true,
-      checkboxProps: { kind: 'doubleConfirm' as const, checkboxLabel },
-      confirmBtnText: formatMessage('Delete'),
-    };
-    const res = await OpenConfirmModal(title, null, settings);
-    if (res) {
-      await deleteBot(projectId);
-      navigateTo('home');
-    }
-  };
 
   const deleteRef = React.useRef<HTMLDivElement>(null);
 
+  const onConfirm = async () => {
+    await deleteBot(projectId);
+    navigateTo('home');
+  };
+
   useEffect(() => {
     if (deleteRef.current && scrollToSectionId === '#deleteBot') {
       deleteRef.current.scrollIntoView({ behavior: 'smooth' });
@@ -122,7 +75,7 @@ export const DeleteBotButton: React.FC<DeleteBotButtonProps> = (props) => {
   return (
     <div ref={deleteRef} css={marginBottom} id="deleteBot">
       <div css={deleteBotText}> {formatMessage('Delete this bot')}</div>
-      <PrimaryButton styles={deleteBotButton} onClick={openDeleteBotModal}>
+      <PrimaryButton styles={deleteBotButton} onClick={() => openDeleteBotModal(onConfirm)}>
         {formatMessage('Delete')}
       </PrimaryButton>
     </div>

From 62c310b56b2db406ffddb051d2abef5d999d44f9 Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Wed, 10 Mar 2021 16:37:13 -0600
Subject: [PATCH 2/4] adjust padding on modal

---
 .../packages/client/src/pages/botProject/DeleteBotButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
index 093bb27c8e..5a6ee32320 100644
--- a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
+++ b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
@@ -47,9 +47,12 @@ export const openDeleteBotModal = async (onConfirm: () => Promise<void>) => {
   );
   const title = formatMessage('Delete Bot');
   const settings = {
+    onRenderContent: () => {
+      return <div>{warningText}</div>;
+    },
     confirmText: formatMessage('Yes, delete'),
   };
-  const res = await OpenConfirmModal(title, warningText, settings);
+  const res = await OpenConfirmModal(title, null, settings);
   if (res) {
     await onConfirm();
   }

From d730850a696b5f2be2e634a1f08ea4ebde3c2773 Mon Sep 17 00:00:00 2001
From: Andy Brown <asbrown002@gmail.com>
Date: Tue, 16 Mar 2021 09:20:06 -0700
Subject: [PATCH 3/4] fix typos

---
 .../packages/client/src/pages/botProject/DeleteBotButton.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
index 5a6ee32320..a3dbfc4152 100644
--- a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
+++ b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
@@ -43,7 +43,7 @@ type DeleteBotButtonProps = {
 
 export const openDeleteBotModal = async (onConfirm: () => Promise<void>) => {
   const warningText = formatMessage(
-    'Are you sure you want to delete your bot? This action cannot be undone and your ot and all relsated files in the bot project folder will be permanently deleted. Your Azure resources will remain unchanged.'
+    'Are you sure you want to delete your bot? This action cannot be undone and your bot and all related files in the bot project folder will be permanently deleted. Your Azure resources will remain unchanged.'
   );
   const title = formatMessage('Delete Bot');
   const settings = {

From 4a9570d8d2e0446cb22e4e6bbceea01793ae6b7b Mon Sep 17 00:00:00 2001
From: Ben Brown <benbro@microsoft.com>
Date: Thu, 18 Mar 2021 16:50:00 -0500
Subject: [PATCH 4/4] remove unused items

---
 .../packages/client/src/pages/botProject/BotProjectSettings.tsx | 2 +-
 .../packages/client/src/pages/botProject/DeleteBotButton.tsx    | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx b/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
index de9be6fb79..6559c9fc9e 100644
--- a/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
+++ b/Composer/packages/client/src/pages/botProject/BotProjectSettings.tsx
@@ -28,7 +28,7 @@ import { createBotSettingUrl, navigateTo } from '../../utils/navigation';
 import { mergePropertiesManagedByRootBot } from '../../recoilModel/dispatchers/utils/project';
 import { useFeatureFlag } from '../../utils/hooks';
 
-import { DeleteBotButton, openDeleteBotModal } from './DeleteBotButton';
+import { openDeleteBotModal } from './DeleteBotButton';
 import BotProjectSettingsTableView from './BotProjectSettingsTableView';
 
 // -------------------- Styles -------------------- //
diff --git a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
index 5a6ee32320..94254bf75e 100644
--- a/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
+++ b/Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx
@@ -8,9 +8,7 @@ import { OpenConfirmModal } from '@bfc/ui-shared';
 import { css, jsx } from '@emotion/core';
 import formatMessage from 'format-message';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
-import { Text } from 'office-ui-fabric-react/lib/Text';
 
 import { dispatcherState } from '../../recoilModel';
 import { navigateTo } from '../../utils/navigation';