Add settings checkbox for stack submit confirmation

Summary:
Update the settings dropdown to include the stack submit confirmation.

This mirrors the "don't show again" in the confirmation modal.

Of course, we need this to be accessible outside the modal because once you check it and close the modal, you won't see the modal again!

Also, we have a few settings now for code review, let's lump them together so it's easier to read and we don't take as much space.

Reviewed By: quark-zju

Differential Revision: D49330148

fbshipit-source-id: f907f8c7e3c1d59cb76bb223851b784bace93c58

addons/isl/src/SettingsTooltip.css

@@ -9,3 +9,11 @@
   padding-bottom: var(--halfpad);
   font-size: 13px;
 }
+
+.multiple-settings {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 500px;
+  gap: var(--pad);
+}

addons/isl/src/SettingsTooltip.tsx

@@ -9,9 +9,12 @@ import type {ThemeColor} from './theme';
 import type {PreferredSubmitCommand} from './types';
 import type {ReactNode} from 'react';
 
+import {confirmShouldSubmitEnabledAtom} from './ConfirmSubmitStack';
 import {DropdownField, DropdownFields} from './DropdownFields';
 import {Tooltip} from './Tooltip';
+import {codeReviewProvider} from './codeReview/CodeReviewInfo';
 import {showDiffNumberConfig} from './codeReview/DiffBadge';
+import {SubmitAsDraftCheckbox} from './codeReview/DraftCheckbox';
 import {debugToolsEnabledState} from './debug/DebugToolsState';
 import {t, T} from './i18n';
 import {SetConfigOperation} from './operations/SetConfigOperation';
@@ -25,7 +28,7 @@ import {
   VSCodeLink,
   VSCodeOption,
 } from '@vscode/webview-ui-toolkit/react';
-import {useRecoilState} from 'recoil';
+import {useRecoilState, useRecoilValue} from 'recoil';
 import {Icon} from 'shared/Icon';
 import {unwrap} from 'shared/utils';
 
@@ -111,20 +114,48 @@ function SettingsDropdown() {
           </VSCodeDropdown>
         </Setting>
       ) : null}
-      <Setting title={<T>Show Diff Numbers</T>}>
-        <VSCodeCheckbox
-          checked={showDiffNumber}
-          onChange={e => {
-            setShowDiffNumber((e.target as HTMLInputElement).checked);
-          }}>
-          <T>Show copyable Diff / Pull Request numbers inline for each commit</T>
-        </VSCodeCheckbox>
+      <Setting title={<T>Code Review</T>}>
+        <div className="multiple-settings">
+          <VSCodeCheckbox
+            checked={showDiffNumber}
+            onChange={e => {
+              setShowDiffNumber((e.target as HTMLInputElement).checked);
+            }}>
+            <T>Show copyable Diff / Pull Request numbers inline for each commit</T>
+          </VSCodeCheckbox>
+          <ConfirmSubmitStackSetting />
+          <SubmitAsDraftCheckbox forceShow />
+        </div>
       </Setting>
       <DebugToolsField />
     </DropdownFields>
   );
 }
 
+function ConfirmSubmitStackSetting() {
+  const [value, setValue] = useRecoilState(confirmShouldSubmitEnabledAtom);
+  const provider = useRecoilValue(codeReviewProvider);
+  if (provider == null || !provider.supportSubmittingAsDraft) {
+    return null;
+  }
+  return (
+    <Tooltip
+      title={t(
+        'This lets you choose to submit as draft and provide an update message. ' +
+          'If false, no confirmation is shown and it will submit as draft if you previously ' +
+          'checked the submit as draft checkbox.',
+      )}>
+      <VSCodeCheckbox
+        checked={value}
+        onChange={e => {
+          setValue((e.target as HTMLInputElement).checked);
+        }}>
+        <T>Show confirmation when submitting a stack</T>
+      </VSCodeCheckbox>
+    </Tooltip>
+  );
+}
+
 function DebugToolsField() {
   const [isDebug, setIsDebug] = useRecoilState(debugToolsEnabledState);
 

addons/isl/src/codeReview/DraftCheckbox.tsx

@@ -20,16 +20,22 @@ export const submitAsDraft = atom<boolean>({
   effects: [persistAtomToConfigEffect('isl.submitAsDraft')],
 });
 
-export function SubmitAsDraftCheckbox({commitsToBeSubmit}: {commitsToBeSubmit: Array<CommitInfo>}) {
+export function SubmitAsDraftCheckbox({
+  commitsToBeSubmit,
+  forceShow,
+}:
+  | {commitsToBeSubmit: Array<CommitInfo>; forceShow?: undefined}
+  | {forceShow: true; commitsToBeSubmit?: undefined}) {
   const [isDraft, setIsDraft] = useRecoilState(submitAsDraft);
   const provider = useRecoilValue(codeReviewProvider);
   if (
-    provider == null ||
-    (provider?.supportSubmittingAsDraft === 'newDiffsOnly' &&
-      // empty array => commit to submit is not yet created (this counts as a new Diff)
-      commitsToBeSubmit.length > 0 &&
-      // some commits don't have a diff ID => those are "new" Diffs
-      commitsToBeSubmit.some(commit => commit.diffId != null))
+    !forceShow &&
+    (provider == null ||
+      (provider?.supportSubmittingAsDraft === 'newDiffsOnly' &&
+        // empty array => commit to submit is not yet created (this counts as a new Diff)
+        commitsToBeSubmit.length > 0 &&
+        // some commits don't have a diff ID => those are "new" Diffs
+        commitsToBeSubmit.some(commit => commit.diffId != null)))
   ) {
     // hide draft button for diffs being resubmitted, if the provider doesn't support drafts on resubmission
     return null;
@@ -40,10 +46,14 @@ export function SubmitAsDraftCheckbox({commitsToBeSubmit}: {commitsToBeSubmit: A
       checked={isDraft}
       onChange={e => setIsDraft((e.target as HTMLInputElement).checked)}>
       <Tooltip
-        title={t('whetherToSubmitDiffAsDraft', {
-          // we don't actually support submitting zero commits, instead this means we're submitting the head commit.
-          count: commitsToBeSubmit.length || 1,
-        })}>
+        title={
+          forceShow
+            ? t('Whether to submit diffs as drafts')
+            : t('whetherToSubmitDiffAsDraft', {
+                // we don't actually support submitting zero commits, instead this means we're submitting the head commit.
+                count: commitsToBeSubmit?.length || 1,
+              })
+        }>
         <T>Submit as Draft</T>
       </Tooltip>
     </VSCodeCheckbox>