web: implement UIButton.RequiresConfirmation (#5218)

web/src/ApiButton.test.tsx

@@ -10,6 +10,7 @@ import {
   cleanupMockAnalyticsCalls,
   expectIncrs,
   mockAnalyticsCalls,
+  nonAnalyticsCalls,
 } from "./analytics_test_helpers"
 import {
   ApiButton,
@@ -24,6 +25,7 @@ import {
   textField,
 } from "./ApiButton.testhelpers"
 import { HudErrorContextProvider } from "./HudErrorContext"
+import { InstrumentedButton } from "./instrumentedComponents"
 import { accessorsForTesting, tiltfileKeyContext } from "./LocalStorage"
 import { flushPromises } from "./promise"
 
@@ -180,9 +182,7 @@ describe("ApiButton", () => {
     await click(submit)
     root.update()
 
-    const calls = fetchMock
-      .calls()
-      .filter((c) => c[0] !== "http://localhost/api/analytics")
+    const calls = nonAnalyticsCalls()
     expect(calls.length).toEqual(1)
     const call = calls[0]
     expect(call[0]).toEqual(
@@ -233,9 +233,7 @@ describe("ApiButton", () => {
     await click(submit)
     root.update()
 
-    const calls = fetchMock
-      .calls()
-      .filter((c) => c[0] !== "http://localhost/api/analytics")
+    const calls = nonAnalyticsCalls()
     expect(calls.length).toEqual(1)
     const call = calls[0]
     expect(call[0]).toEqual(
@@ -335,6 +333,57 @@ describe("ApiButton", () => {
 
     expect(error).toEqual("Error submitting button click: broken!")
   })
+
+  it("when requiresConfirmation is set, a second confirmation click to submit", async () => {
+    const b = makeUIButton({ requiresConfirmation: true })
+    const root = mountButton(b)
+
+    let button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual(b.spec?.text)
+
+    await click(button.find(Button).at(0))
+    root.update()
+
+    // after first click, should show a "Confirm", and not have submitted the click to the backend
+    button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual("Confirm")
+    expect(nonAnalyticsCalls().length).toEqual(0)
+
+    await click(button.find(Button).at(0))
+    root.update()
+
+    // after second click, button text reverts and click is submitted
+    button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual(b.spec?.text)
+    expect(nonAnalyticsCalls().length).toEqual(1)
+  })
+
+  it("when requiresConfirmation is set, allows canceling instead of confirming", async () => {
+    const b = makeUIButton({ requiresConfirmation: true })
+    const root = mountButton(b)
+
+    let button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual(b.spec?.text)
+
+    await click(button.find(Button).at(0))
+    root.update()
+
+    button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual("Confirm")
+    expect(nonAnalyticsCalls().length).toEqual(0)
+
+    // second button cancels confirmation
+    const cancelButton = button.find(Button).at(1)
+    expect(cancelButton.props()["aria-label"]).toEqual(`Cancel ${b.spec?.text}`)
+
+    await click(cancelButton)
+    root.update()
+
+    // upon clicking, the button click is aborted and no update is sent to the server
+    button = root.find(InstrumentedButton)
+    expect(button.find(ApiButtonLabel).text()).toEqual(b.spec?.text)
+    expect(nonAnalyticsCalls().length).toEqual(0)
+  })
 })
 
 async function click(button: any) {

web/src/ApiButton.testhelpers.tsx

@@ -39,6 +39,7 @@ export function hiddenField(name: string, value: string): UIInputSpec {
 export function makeUIButton(args?: {
   inputSpecs?: UIInputSpec[]
   inputStatuses?: UIInputStatus[]
+  requiresConfirmation?: boolean
 }): UIButton {
   return {
     metadata: {
@@ -52,6 +53,7 @@ export function makeUIButton(args?: {
         componentType: "Global",
         componentID: "nav",
       },
+      requiresConfirmation: args?.requiresConfirmation,
     },
     status: {
       inputs: args?.inputStatuses,

web/src/ApiButton.tsx

@@ -14,6 +14,7 @@ import { Link } from "react-router-dom"
 import styled from "styled-components"
 import { Tags } from "./analytics"
 import { annotations } from "./annotations"
+import { ReactComponent as CloseSvg } from "./assets/svg/close.svg"
 import FloatDialog from "./FloatDialog"
 import { useHudErrorContext } from "./HudErrorContext"
 import {
@@ -57,6 +58,25 @@ export const LogLink = styled(Link)`
   font-size: ${FontSize.smallest};
   padding-left: ${SizeUnit(0.5)};
 `
+const ConfirmButton = styled(InstrumentedButton)`
+  && {
+    background-color: ${Color.red};
+    border-color: ${Color.gray};
+    color: ${Color.black};
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: ${Color.red};
+      border-color: ${Color.redLight};
+      color: ${Color.black};
+    }
+  }
+
+  .fillStd {
+    fill: ${Color.black} !important; /* there's some style somewhere with a higher level of specificity than this one that i did not spend time trying to find... */
+  }
+`
 
 type ApiButtonProps = ButtonProps & {
   className?: string
@@ -287,17 +307,6 @@ async function updateButtonStatus(
   await tiltApiPut("uibuttons", "status", toUpdate)
 }
 
-function setHiddenInputs(
-  uiButton: UIButton,
-  inputValues: { [name: string]: any }
-) {
-  uiButton.spec?.inputs?.forEach((i) => {
-    if (i.hidden && i.name) {
-      inputValues[i.name] = i.hidden.value
-    }
-  })
-}
-
 // Renders a UIButton.
 // NB: The `Button` in `ApiButton` refers to a UIButton, not an html <button>.
 // This can be confusing because each ApiButton consists of one or two <button>s:
@@ -312,6 +321,8 @@ export function ApiButton(props: React.PropsWithChildren<ApiButtonProps>) {
     [name: string]: any
   }>(`apibutton-${uiButton.metadata?.name}`, {})
 
+  const [confirming, setConfirming] = useState(false)
+
   const { enqueueSnackbar } = useSnackbar()
   const pb = usePathBuilder()
 
@@ -332,6 +343,15 @@ export function ApiButton(props: React.PropsWithChildren<ApiButtonProps>) {
   }
 
   const onClick = async () => {
+    if (uiButton.spec?.requiresConfirmation && !confirming) {
+      setConfirming(true)
+      return
+    }
+
+    if (confirming) {
+      setConfirming(false)
+    }
+
     // TODO(milas): currently the loading state just disables the button for the duration of
     //  the AJAX request to avoid duplicate clicks - there is no progress tracking at the
     //  moment, so there's no fancy spinner animation or propagation of result of action(s)
@@ -368,6 +388,37 @@ export function ApiButton(props: React.PropsWithChildren<ApiButtonProps>) {
 
   const disabled = loading || uiButton.spec?.disabled
 
+  if (confirming) {
+    return (
+      <ApiButtonRoot
+        className={className}
+        disableRipple={true}
+        aria-label={uiButton.spec?.text}
+        disabled={disabled}
+      >
+        <ConfirmButton
+          analyticsName={"ui.web.uibutton"}
+          analyticsTags={{ confirm: "true" }}
+          onClick={onClick}
+          disabled={disabled}
+          aria-label={`Confirm ${uiButton.spec?.text}`}
+          {...buttonProps}
+        >
+          <ApiButtonLabel>Confirm</ApiButtonLabel>
+        </ConfirmButton>
+        <ConfirmButton
+          analyticsName={"ui.web.uibutton"}
+          analyticsTags={{ unconfirm: "true" }}
+          onClick={() => setConfirming(false)}
+          aria-label={`Cancel ${uiButton.spec?.text}`}
+          {...buttonProps}
+        >
+          <CloseSvg />
+        </ConfirmButton>
+      </ApiButtonRoot>
+    )
+  }
+
   // button text is not included in analytics name since that can be user data
   const button = (
     <InstrumentedButton

web/src/OverviewActionBar.tsx

@@ -199,11 +199,13 @@ const DisableButton = styled(ApiButton)`
     }
   }
 
-  .MuiButton-label {
-    // hardcode a width to workaround this bug:
-    // https://app.shortcut.com/windmill/story/12912/uibuttons-created-by-togglebuttons-have-different-sizes-when-toggled
-    width: ${SizeUnit(3.6)};
+  button:first-child {
+    width: 100%;
   }
+
+  // hardcode a width to workaround this bug:
+  // https://app.shortcut.com/windmill/story/12912/uibuttons-created-by-togglebuttons-have-different-sizes-when-toggled
+  width: ${SizeUnit(4.4)};
 `
 
 const ButtonRoot = styled(InstrumentedButton)`

web/src/analytics_test_helpers.ts

@@ -41,3 +41,9 @@ export function expectIncrs(...incrs: { name: string; tags: Tags }[]) {
   )
   expect(actualRequestBodies).toEqual(expectedRequestBodies)
 }
+
+export function nonAnalyticsCalls() {
+  return fetchMock
+    .calls()
+    .filter((c) => c[0] !== "http://localhost/api/analytics")
+}