web: update the split button UI to more gracefully handle border mism…

…atch (#5531)

web/src/ApiButton.stories.tsx

@@ -17,9 +17,7 @@ export default {
     (Story: any) => (
       <MemoryRouter initialEntries={["/"]}>
         <TiltSnackbarProvider>
-          <div style={{ margin: "-1rem" }}>
-            <Story />
-          </div>
+          <Story />
         </TiltSnackbarProvider>
       </MemoryRouter>
     ),
@@ -37,6 +35,11 @@ export const SimpleButton = () => {
   return <StyledButton uiButton={button} />
 }
 
+export const RequiresConfirmation = () => {
+  const button = makeUIButton({ requiresConfirmation: true })
+  return <StyledButton uiButton={button} />
+}
+
 export const ThreeTextInputs = () => {
   const inputs: UIInputSpec[] = [1, 2, 3].map((i) => textField(`text${i}`))
   const button = makeUIButton({ inputSpecs: inputs })

web/src/BulkApiButton.tsx

@@ -1,6 +1,6 @@
 import { ButtonClassKey, ButtonGroup, ButtonProps } from "@material-ui/core"
 import { ClassNameMap } from "@material-ui/styles"
-import React, { useLayoutEffect, useState } from "react"
+import React, { useLayoutEffect, useMemo, useState } from "react"
 import styled from "styled-components"
 import { AnalyticsType, Tags } from "./analytics"
 import {
@@ -34,7 +34,6 @@ import { UIButton } from "./types"
 type BulkApiButtonProps = ButtonProps & {
   bulkAction: BulkAction
   buttonText: string
-  className?: string
   onClickCallback?: () => void
   requiresConfirmation: boolean
   targetToggleState?: ApiButtonToggleState
@@ -86,28 +85,17 @@ const BulkButtonGroup = styled(ButtonGroup)<{ disabled?: boolean }>`
     cursor: not-allowed;
   `}
 
-  /* Adjust the border radius of buttons to achieve the "rounded bar" look */
-  &.firstButtonGroupInRow {
-    ${BulkButtonElementRoot} {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
-    }
-  }
-
-  &.middleButtonGroupInRow {
-    ${BulkButtonElementRoot} {
-      border-radius: 0;
-      border-right: 0;
-    }
-  }
-
-  &.lastButtonGroupInRow {
+  & + &:not(.isConfirming) {
+    margin-left: -4px;
     ${BulkButtonElementRoot} {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
+
+  & + &.isConfirming {
+    margin-left: 4px;
+  }
 `
 
 // Helpers
@@ -250,7 +238,6 @@ export function BulkApiButton(props: BulkApiButtonProps) {
   const {
     bulkAction,
     buttonText,
-    className,
     targetToggleState,
     requiresConfirmation,
     onClickCallback,
@@ -263,29 +250,34 @@ export function BulkApiButton(props: BulkApiButtonProps) {
   const [loading, setLoading] = useState(false)
   const [confirming, setConfirming] = useState(false)
 
-  const analyticsTags: Tags = {
-    component: ApiButtonType.Global,
-    type: AnalyticsType.Grid,
-    bulkCount: String(uiButtons.length),
-    bulkAction,
-  }
+  let buttonCount = String(uiButtons.length)
+  const analyticsTags: Tags = useMemo(() => {
+    let tags: Tags = {
+      component: ApiButtonType.Global,
+      type: AnalyticsType.Grid,
+      bulkCount: buttonCount,
+      bulkAction,
+    }
 
-  if (targetToggleState) {
-    // The `toggleValue` reflects the value of the buttons
-    // when they are clicked, not their updated values
-    analyticsTags.toggleValue =
-      targetToggleState === ApiButtonToggleState.On
-        ? ApiButtonToggleState.Off
-        : ApiButtonToggleState.On
-  }
+    if (targetToggleState) {
+      // The `toggleValue` reflects the value of the buttons
+      // when they are clicked, not their updated values
+      tags.toggleValue =
+        targetToggleState === ApiButtonToggleState.On
+          ? ApiButtonToggleState.Off
+          : ApiButtonToggleState.On
+    }
+
+    return tags
+  }, [buttonCount, bulkAction, targetToggleState])
 
   const bulkActionDisabled = !canBulkButtonBeToggled(
     uiButtons,
     targetToggleState
   )
   const disabled = loading || bulkActionDisabled || false
-  const buttonGroupClassName = `${className || ""} ${
-    disabled ? "isDisabled" : "isEnabled"
+  const buttonGroupClassName = `${disabled ? "isDisabled" : "isEnabled"} ${
+    confirming ? "isConfirming" : ""
   }`
 
   // If the bulk action isn't available while the bulk button

web/src/HudErrorContext.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useMemo } from "react"
 
 // allows consumers to set an error message to show up in the HUD
 type HudErrorContext = {
@@ -16,8 +16,11 @@ export function useHudErrorContext() {
 export function HudErrorContextProvider(
   props: React.PropsWithChildren<HudErrorContext>
 ) {
+  let value = useMemo(() => {
+    return { setError: props.setError }
+  }, [props.setError])
   return (
-    <hudErrorContext.Provider value={{ setError: props.setError }}>
+    <hudErrorContext.Provider value={value}>
       {props.children}
     </hudErrorContext.Provider>
   )

web/src/OverviewTableBulkActions.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { MemoryRouter } from "react-router"
+import Features, { FeaturesTestProvider, Flag } from "./feature"
+import { OverviewTableBulkActions } from "./OverviewTableBulkActions"
+import { ResourceSelectionProvider } from "./ResourceSelectionContext"
+import { disableButton } from "./testdata"
+
+type UIButton = Proto.v1alpha1UIButton
+type UIInputSpec = Proto.v1alpha1UIInputSpec
+type UITextInputSpec = Proto.v1alpha1UITextInputSpec
+type UIInputStatus = Proto.v1alpha1UIInputStatus
+
+export default {
+  title: "New UI/Overview/OverviewTableBulkActions",
+  decorators: [
+    (Story: any) => {
+      const features = new Features({
+        [Flag.Labels]: true,
+        [Flag.DisableResources]: true,
+      })
+      return (
+        <MemoryRouter initialEntries={["/"]}>
+          <FeaturesTestProvider value={features}>
+            <ResourceSelectionProvider initialValuesForTesting={["fe", "api"]}>
+              <Story />
+            </ResourceSelectionProvider>
+          </FeaturesTestProvider>
+        </MemoryRouter>
+      )
+    },
+  ],
+}
+
+export const BulkActionsAllEnabled = () => {
+  const a = disableButton("fe", true)
+  const b = disableButton("api", true)
+  return <OverviewTableBulkActions uiButtons={[a, b]} />
+}
+
+export const BulkActionsAllDisabled = () => {
+  const a = disableButton("fe", false)
+  const b = disableButton("api", false)
+  return <OverviewTableBulkActions uiButtons={[a, b]} />
+}
+
+export const BulkActionsPartial = () => {
+  const a = disableButton("fe", false)
+  const b = disableButton("api", true)
+  return <OverviewTableBulkActions uiButtons={[a, b]} />
+}

web/src/OverviewTableBulkActions.tsx

@@ -91,14 +91,13 @@ export function OverviewTableBulkActions({
     return null
   }
 
-  const onClickCallback = () => clearSelections()
+  const onClickCallback = clearSelections
 
   return (
     <BulkActionMenu aria-label="Bulk resource actions">
       <BulkApiButton
         bulkAction={BulkAction.Disable}
         buttonText="Enable"
-        className="firstButtonGroupInRow"
         requiresConfirmation={false}
         uiButtons={actionButtons[BulkAction.Disable]}
         targetToggleState={ApiButtonToggleState.On}
@@ -107,7 +106,6 @@ export function OverviewTableBulkActions({
       <BulkApiButton
         bulkAction={BulkAction.Disable}
         buttonText="Disable"
-        className="lastButtonGroupInRow"
         requiresConfirmation={true}
         uiButtons={actionButtons[BulkAction.Disable]}
         targetToggleState={ApiButtonToggleState.Off}