fix: call shared deletebot modal from toolbar

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',

Composer/packages/client/src/pages/botProject/DeleteBotButton.tsx

@@ -41,78 +41,34 @@ 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 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 = {
+    onRenderContent: () => {
+      return <div>{warningText}</div>;
+    },
+    confirmText: formatMessage('Yes, delete'),
+  };
+  const res = await OpenConfirmModal(title, null, 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 +78,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>