Loading state on confirmation dialog (#452)

* Add loading state to corfirmation dialog button

* Update README

* Fix default value in story

* v2.13.2

Author: kapantzak

README.md

@@ -20,6 +20,21 @@ 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.13.1",
+  "version": "2.13.2",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

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

@@ -2,13 +2,15 @@ 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",
@@ -22,7 +24,16 @@ const ConfirmationDialog = ({
   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}>
@@ -53,10 +64,11 @@ const ConfirmationDialog = ({
             data-ga={`${dataGA}-::click-confirm::global-view`}
             data-testid={`${dataTestId}-confirmAction`}
             danger={!isConfirmPositive && true}
-            disabled={isConfirmDisabled}
-            label={confirmLabel}
-            onClick={handleConfirm}
+            disabled={isConfirmDisabled || (disableConfirmOnLoading && loading)}
+            label={loading ? confirmLoadingLabel : confirmLabel}
+            onClick={onConfirm}
             width={confirmWidth}
+            isLoading={loading}
           />
         </Actions>
       </Content>

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

@@ -19,3 +19,22 @@ 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)}
+    />
+  )
+})