Add confirmation modal on "dangerous" actions, closes #241

packages/ui/package.json

@@ -27,7 +27,8 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@bull-board/api": "3.2.11"
+    "@bull-board/api": "3.2.11",
+    "@radix-ui/react-alert-dialog": "^0.0.19"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

packages/ui/src/components/App.tsx

@@ -8,10 +8,11 @@ import { Header } from './Header/Header';
 import { Menu } from './Menu/Menu';
 import { QueuePage } from './QueuePage/QueuePage';
 import { RedisStats } from './RedisStats/RedisStats';
+import { ConfirmModal } from './ConfirmModal/ConfirmModal';
 
 export const App = ({ api }: { api: Api }) => {
   useScrollTopOnNav();
-  const { state, actions, selectedStatuses } = useStore(api);
+  const { state, actions, selectedStatuses, confirmProps } = useStore(api);
 
   return (
     <>
@@ -21,27 +22,34 @@ export const App = ({ api }: { api: Api }) => {
           {state.loading ? (
             'Loading...'
           ) : (
-            <Switch>
-              <Route
-                path="/queue/:name"
-                render={({ match: { params } }) => {
-                  const currentQueueName = decodeURIComponent(params.name);
-                  const queue = state.data?.queues.find((q) => q.name === currentQueueName);
+            <>
+              <Switch>
+                <Route
+                  path="/queue/:name"
+                  render={({ match: { params } }) => {
+                    const currentQueueName = decodeURIComponent(params.name);
+                    const queue = state.data?.queues.find((q) => q.name === currentQueueName);
 
-                  return (
-                    <QueuePage queue={queue} actions={actions} selectedStatus={selectedStatuses} />
-                  );
-                }}
-              />
+                    return (
+                      <QueuePage
+                        queue={queue}
+                        actions={actions}
+                        selectedStatus={selectedStatuses}
+                      />
+                    );
+                  }}
+                />
 
-              <Route path="/" exact>
-                {!!state.data &&
-                  Array.isArray(state.data?.queues) &&
-                  state.data.queues.length > 0 && (
-                    <Redirect to={`/queue/${encodeURIComponent(state.data?.queues[0].name)}`} />
-                  )}
-              </Route>
-            </Switch>
+                <Route path="/" exact>
+                  {!!state.data &&
+                    Array.isArray(state.data?.queues) &&
+                    state.data.queues.length > 0 && (
+                      <Redirect to={`/queue/${encodeURIComponent(state.data?.queues[0].name)}`} />
+                    )}
+                </Route>
+              </Switch>
+              <ConfirmModal {...confirmProps} />
+            </>
           )}
         </div>
       </main>

packages/ui/src/components/ConfirmModal/ConfirmModal.module.css

@@ -0,0 +1,70 @@
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.overlay[data-state='open'],
+.contentWrapper[data-state='open'] {
+    animation: fadeIn 250ms ease-out;
+}
+
+.overlay[data-state='closed'],
+.contentWrapper[data-state='closed'] {
+    animation: fadeOut 250ms ease-in;
+}
+
+.overlay {
+    position: fixed;
+    top: 0!important;
+    left: 0!important;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+    padding: 1em;
+    background-color: rgba(0,0,0,.85);
+    user-select: none;
+    will-change: opacity;
+}
+
+.contentWrapper {
+    padding: 1rem;
+    position: fixed;
+    top: 0!important;
+    left: 0!important;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.content {
+    max-width: 450px;
+    width: 100%;
+    background-color: white;
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+.actions {
+    background: #f9fafb;
+    margin: 1rem -1rem -1rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+    padding: 1rem 1rem;
+    text-align: right;
+}

packages/ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,48 @@
+import {
+  Action,
+  Cancel,
+  Content,
+  Description,
+  Overlay,
+  Root,
+  Title,
+} from '@radix-ui/react-alert-dialog';
+import React from 'react';
+import s from './ConfirmModal.module.css';
+import { Button } from '../JobCard/Button/Button';
+
+export interface ConfirmProps {
+  open: boolean;
+  title: string;
+  description: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const ConfirmModal = (props: ConfirmProps) => {
+  const closeOnOpenChange = (open: boolean) => {
+    if (!open) {
+      props.onCancel();
+    }
+  };
+
+  return (
+    <Root open={props.open} onOpenChange={closeOnOpenChange}>
+      <Overlay className={s.overlay} />
+      <Content className={s.contentWrapper}>
+        <div className={s.content}>
+          {!!props.title && <Title as="h3">{props.title}</Title>}
+          {!!props.description && <Description>{props.description}</Description>}
+          <div className={s.actions}>
+            <Action as={Button} theme={'primary'} onClick={props.onConfirm}>
+              Confirm
+            </Action>
+            <Cancel as={Button} theme={'basic'} onClick={props.onCancel}>
+              Cancel
+            </Cancel>
+          </div>
+        </div>
+      </Content>
+    </Root>
+  );
+};

packages/ui/src/components/JobCard/Button/Button.module.css

@@ -1,33 +1,83 @@
 .button {
-    font-size: 1rem;
-    background: none;
-    border: none;
-    border-radius: 0.28571429rem;
-    cursor: pointer;
-    outline: none;
-    white-space: nowrap;
-    padding: 0.65em 0.92857143em;
-    color: inherit;
+  font-size: 0.9rem;
+  background: none;
+  border: none;
+  border-radius: 0.28571429rem;
+  cursor: pointer;
+  outline: none;
+  white-space: nowrap;
+  padding: .65em .92857143em;
+  color: inherit;
+  font-family: inherit;
+  vertical-align: baseline;
+  min-height: 1em;
+  display: inline-block;
+  text-transform: none;
+  text-shadow: none;
+  font-weight: 400;
 }
 
-.button > svg {
-    width: 1.25em;
-    vertical-align: middle;
-    display: inline-block;
-    fill: #718096;
+.button + .button {
+  margin-inline-start: 0.25em;
 }
 
-.button:hover,
-.button:focus {
-    background-color: #e2e8f0;
+.button.default > svg {
+  width: 1.25em;
+  vertical-align: middle;
+  display: inline-block;
+  fill: #718096;
 }
 
-.button:active,
-.button.isActive {
-    background-color: #cbd5e0;
+.button.default:hover,
+.button.default:focus {
+  background-color: #e2e8f0;
 }
 
-.button:hover > svg,
-.button:focus > svg {
-    fill: #718096;
+.button.default:active,
+.button.default.isActive {
+  background-color: #cbd5e0;
 }
+
+.button.default:hover > svg,
+.button.default:focus > svg {
+  fill: #718096;
+}
+
+.button.basic {
+  color: rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+}
+
+.button.basic:focus {
+  background: #fff;
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+
+.button.basic:hover {
+  background: #fff;
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+}
+
+.button.basic:active {
+  background: #f8f8f8;
+  color: rgba(0, 0, 0, 0.9);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
+}
+
+.button.primary {
+  background-color: hsl(216, 15%, 47%);
+  color: #fff;
+}
+
+.button.primary:hover {
+  background-color: hsl(216, 15%, 42%);
+}
+.button.primary:active {
+  background-color: hsl(216, 15%, 39%);
+}
+.button.primary:focus {
+  background-color: hsl(216, 15%, 37%);
+}
+

packages/ui/src/components/JobCard/Button/Button.tsx

@@ -2,15 +2,29 @@ import React from 'react';
 import s from './Button.module.css';
 import cn from 'clsx';
 
-export const Button = ({
-  children,
-  className,
-  isActive = false,
-  ...rest
-}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+interface ButtonProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
   isActive?: boolean;
-}) => (
-  <button type="button" {...rest} className={cn(s.button, className, { [s.isActive]: isActive })}>
-    {children}
-  </button>
+  theme?: 'basic' | 'primary' | 'default';
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { children, className, isActive = false, theme = 'default', ...rest }: ButtonProps,
+    forwardedRef
+  ) => (
+    <button
+      type="button"
+      ref={forwardedRef}
+      {...rest}
+      className={cn(className, s.button, s[theme], {
+        [s.isActive]: isActive,
+      })}
+    >
+      {children}
+    </button>
+  )
 );

packages/ui/src/components/QueuePage/QueuePage.tsx

@@ -26,7 +26,7 @@ export const QueuePage = ({
         <StatusMenu queue={queue} />
         <div className={s.actionContainer}>
           <div>
-            {!queue.readOnlyMode && (
+            {queue.jobs.length > 0 && !queue.readOnlyMode && (
               <QueueActions queue={queue} actions={actions} status={selectedStatus[queue.name]} />
             )}
           </div>

packages/ui/src/hooks/useConfirm.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { ConfirmProps } from '../components/ConfirmModal/ConfirmModal';
+
+interface ConfirmState {
+  promise: { resolve: (value: unknown) => void; reject: () => void } | null;
+  opts: { title?: string; description?: string };
+}
+
+export interface ConfirmApi {
+  confirmProps: ConfirmProps;
+  openConfirm: (opts?: ConfirmState['opts']) => Promise<unknown>;
+}
+
+export function useConfirm(): ConfirmApi {
+  const [confirmData, setConfirmData] = useState<ConfirmState | null>(null);
+
+  function openConfirm(opts: ConfirmState['opts'] = {}) {
+    return new Promise((resolve, reject) => {
+      setConfirmData({ promise: { resolve, reject }, opts });
+    });
+  }
+
+  return {
+    confirmProps: {
+      open: !!confirmData?.promise,
+      title: confirmData?.opts.title || 'Are you sure?',
+      description: confirmData?.opts.description || '',
+      onCancel: () => {
+        setConfirmData({
+          opts: { title: confirmData?.opts.title, description: confirmData?.opts.description },
+          promise: null,
+        });
+        confirmData?.promise?.reject();
+      },
+      onConfirm: () => {
+        setConfirmData({
+          opts: { title: confirmData?.opts.title, description: confirmData?.opts.description },
+          promise: null,
+        });
+        confirmData?.promise?.resolve(undefined);
+      },
+    },
+    openConfirm,
+  };
+}