Confirmation dialog - Disable decline button on confirmation loading state

README.md

@@ -20,21 +20,6 @@ export const MyComponent: FC<PropsT> = (props: PropsT) => <>...</>
 
 You can find latest **master** storybook playground [here](https://netdata.github.io/netdata-ui/)
 
-## Local development
-
-First, install the dependencies
-```
-yarn
-```
-
-then, build the project and start
-```
-yarn build && yarn start
-```
-
-Open your browser to [localhost:6006](http://localhost:6006) and view the storybook locally.
-
-
 ## Components
 
 - [Theme and theme utils](https://github.com/netdata/netdata-ui/blob/master/src/theme)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/confirmation-dialog/confirmation-dialog.js

@@ -2,15 +2,13 @@ import React from "react"
 import Flex from "src/components/templates/flex"
 import { Button } from "src/components/button"
 import { Text } from "src/components/typography"
-import useToggle from "react-use/lib/useToggle"
 import { Actions, Body, CloseButton, Content, Dialog, Header, Title, TitleIcon } from "./styled"
 
 const BodyMessage = ({ children, ...rest }) =>
   typeof children === "object" ? children : <Text {...rest}>{children}</Text>
 
 const ConfirmationDialog = ({
   confirmLabel = "Yes, remove",
-  confirmLoadingLabel = "Loading...",
   confirmWidth = "128px",
   "data-ga": dataGA = "confirmation-dialog",
   "data-testid": dataTestId = "confirmationDialog",
@@ -21,19 +19,12 @@ const ConfirmationDialog = ({
   hideIcon,
   iconName = "warning_triangle_hollow",
   isConfirmDisabled,
+  isConfirmLoading,
+  isDeclineDisabled,
   isConfirmPositive,
   message,
   title,
-  showConfirmLoading,
-  disableConfirmOnLoading,
 }) => {
-  const [loading, toggleLoading] = useToggle(false)
-
-  const onConfirm = e => {
-    if (showConfirmLoading) toggleLoading()
-    handleConfirm(e, toggleLoading)
-  }
-
   return (
     <Dialog onEsc={handleDecline}>
       <Content data-testid={dataTestId}>
@@ -55,6 +46,7 @@ const ConfirmationDialog = ({
               data-ga={`${dataGA}-::click-cancel::global-view`}
               data-testid={`${dataTestId}-cancelAction`}
               flavour="hollow"
+              disabled={isDeclineDisabled}
               label={declineLabel}
               onClick={handleDecline}
               width={declineWidth}
@@ -64,11 +56,11 @@ const ConfirmationDialog = ({
             data-ga={`${dataGA}-::click-confirm::global-view`}
             data-testid={`${dataTestId}-confirmAction`}
             danger={!isConfirmPositive && true}
-            disabled={isConfirmDisabled || (disableConfirmOnLoading && loading)}
-            label={loading ? confirmLoadingLabel : confirmLabel}
-            onClick={onConfirm}
+            disabled={isConfirmDisabled}
+            label={confirmLabel}
+            onClick={handleConfirm}
             width={confirmWidth}
-            isLoading={loading}
+            isLoading={isConfirmLoading}
           />
         </Actions>
       </Content>

src/components/confirmation-dialog/confirmation-dialog.stories.js

@@ -19,22 +19,3 @@ Story.add("Confirmation dialog", () => {
     />
   )
 })
-
-Story.add("Confirmation dialog with loading", () => {
-  return (
-    <ConfirmationDialog
-      confirmLabel="Yes"
-      declineLabel="Please don't!"
-      handleConfirm={(_, toggleLoading) => {
-        console.log("Pressed confirm")
-        setTimeout(() => toggleLoading(), 2000)
-      }}
-      handleDecline={() => alert("Pressed decline")}
-      isConfirmPositive={boolean("isConfirmPositive", false)}
-      message="We are about to fulfill your request, there is no return from here. Are you sure?"
-      title="Are you sure you want to proceed?"
-      showConfirmLoading={boolean("showConfirmLoading", true)}
-      disableConfirmOnLoading={boolean("disableConfirmOnLoading", true)}
-    />
-  )
-})