From 506cec434be8a7f2120dcd07813b98c0aff1c14e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 4 Sep 2020 11:15:25 +0200
Subject: [PATCH] Add cancel all to slashes page (#3607)

---
 packages/page-staking/src/Slashes/Era.tsx     | 25 ++++++++++++++-----
 .../react-components/src/Button/Button.tsx    |  4 +--
 packages/react-components/src/Button/types.ts |  1 +
 packages/react-components/src/Table/Body.tsx  |  4 +--
 packages/react-components/src/TxButton.tsx    |  3 ++-
 packages/react-components/src/styles/index.ts |  2 +-
 packages/react-components/src/types.ts        |  1 +
 7 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/page-staking/src/Slashes/Era.tsx b/packages/page-staking/src/Slashes/Era.tsx
index 3d1552340e..afb09d799c 100644
--- a/packages/page-staking/src/Slashes/Era.tsx
+++ b/packages/page-staking/src/Slashes/Era.tsx
@@ -21,13 +21,18 @@ interface Props {
 
 interface Selected {
   selected: number[];
-  tx: SubmittableExtrinsic<'promise'> | null;
+  txAll: SubmittableExtrinsic<'promise'>;
+  txSome: SubmittableExtrinsic<'promise'> | null;
 }
 
 function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const [{ selected, tx }, setSelected] = useState<Selected>({ selected: [], tx: null });
+  const [{ selected, txAll, txSome }, setSelected] = useState<Selected>((): Selected => {
+    const proposal = api.tx.staking.cancelDeferredSlash(slash.era, slash.slashes.map((_, index) => index));
+
+    return { selected: [], txAll: api.tx.council.propose(councilThreshold, proposal, proposal.encodedLength), txSome: null };
+  });
 
   const headerRef = useRef<[string?, string?, number?][]>([
     [undefined, 'start', 3],
@@ -47,11 +52,11 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle
       const proposal = selected.length
         ? api.tx.staking.cancelDeferredSlash(slash.era, selected)
         : null;
-      const tx = proposal
+      const txSome = proposal
         ? api.tx.council.propose(councilThreshold, proposal, proposal.encodedLength)
         : null;
 
-      return { selected, tx };
+      return { selected, txAll: state.txAll, txSome };
     }),
     [api, councilThreshold, slash]
   );
@@ -63,10 +68,18 @@ function Slashes ({ councilId, councilThreshold, slash }: Props): React.ReactEle
           <Button.Group>
             <TxButton
               accountId={councilId}
-              extrinsic={tx}
-              isDisabled={!tx}
+              extrinsic={txSome}
+              isDisabled={!txSome}
+              isToplevel
               label={t('Cancel selected')}
             />
+            <TxButton
+              accountId={councilId}
+              extrinsic={txAll}
+              isDisabled={!txAll}
+              isToplevel
+              label={t('Cancel all')}
+            />
           </Button.Group>
         )}
       </Summary>
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index 3a41a3518f..dee4c77c24 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -10,7 +10,7 @@ import styled from 'styled-components';
 import Icon from '../Icon';
 import Spinner from '../Spinner';
 
-function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, label, onClick, onMouseEnter, onMouseLeave, tabIndex, withoutLink }: ButtonProps): React.ReactElement<ButtonProps> {
+function Button ({ children, className = '', icon, isBasic, isBusy, isCircular, isDisabled, isFull, isIcon, isSelected, isToplevel, label, onClick, onMouseEnter, onMouseLeave, tabIndex, withoutLink }: ButtonProps): React.ReactElement<ButtonProps> {
   const _onClick = useCallback(
     () => !(isBusy || isDisabled) && onClick && onClick(),
     [isBusy, isDisabled, onClick]
@@ -18,7 +18,7 @@ function Button ({ children, className = '', icon, isBasic, isBusy, isCircular,
 
   return (
     <button
-      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''}${withoutLink ? ' withoutLink' : ''} ${className}`}
+      className={`ui--Button${label ? ' hasLabel' : ''}${isBasic ? ' isBasic' : ''}${isCircular ? ' isCircular' : ''}${isFull ? ' isFull' : ''}${isIcon ? ' isIcon' : ''}${(isBusy || isDisabled) ? ' isDisabled' : ''}${isBusy ? ' isBusy' : ''}${!onClick ? ' isReadOnly' : ''}${isSelected ? ' isSelected' : ''}${isToplevel ? ' isToplevel' : ''}${withoutLink ? ' withoutLink' : ''} ${className}`}
       onClick={_onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
diff --git a/packages/react-components/src/Button/types.ts b/packages/react-components/src/Button/types.ts
index 33f66bae8f..86ca6b4e91 100644
--- a/packages/react-components/src/Button/types.ts
+++ b/packages/react-components/src/Button/types.ts
@@ -18,6 +18,7 @@ export interface ButtonProps {
   isFull?: boolean;
   isIcon?: boolean;
   isSelected?: boolean;
+  isToplevel?: boolean;
   label?: React.ReactNode;
   onClick?: Button$Callback;
   onMouseEnter?: Button$Callback;
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index ed9f75eae4..36e4093ceb 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -144,7 +144,7 @@ export default React.memo(styled(Body)`
       color: darkorange;
     }
 
-    .ui--Button-Group .ui--Button {
+    .ui--Button-Group .ui--Button:not(.isToplevel) {
       margin: 0;
     }
   }
@@ -190,7 +190,7 @@ export default React.memo(styled(Body)`
       background: transparent;
     }
 
-    .ui--Button:not(.isIcon):not(:hover) {
+    .ui--Button:not(.isIcon):not(.isToplevel):not(:hover) {
       background: transparent !important;
       box-shadow: none !important;
     }
diff --git a/packages/react-components/src/TxButton.tsx b/packages/react-components/src/TxButton.tsx
index b300127fd4..bb5658baec 100644
--- a/packages/react-components/src/TxButton.tsx
+++ b/packages/react-components/src/TxButton.tsx
@@ -14,7 +14,7 @@ import Button from './Button';
 import { StatusContext } from './Status';
 import { useTranslation } from './translate';
 
-function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner, withoutLink }: Props): React.ReactElement<Props> {
+function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon, isBasic, isBusy, isDisabled, isIcon, isToplevel, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tooltip, tx, withSpinner, withoutLink }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { queueExtrinsic } = useContext(StatusContext);
@@ -90,6 +90,7 @@ function TxButton ({ accountId, className = '', extrinsic: propsExtrinsic, icon,
       isBusy={isBusy}
       isDisabled={isSending || isDisabled || needsAccount}
       isIcon={isIcon}
+      isToplevel={isToplevel}
       label={label || (isIcon ? '' : t<string>('Submit'))}
       onClick={_onSend}
       tooltip={tooltip}
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index f46e355199..6f39f08f2b 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -133,7 +133,7 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--Table td .ui--Button {
-    &:not(.isDisabled):not(.isIcon),
+    &:not(.isDisabled):not(.isIcon):not(.isToplevel),
     &.withoutLink:not(.isDisabled) {
       .ui--Icon {
         background: transparent;
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 48084489de..4d0e053639 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -62,6 +62,7 @@ export interface TxButtonProps extends TxProps {
   isBusy?: boolean;
   isDisabled?: boolean;
   isIcon?: boolean;
+  isToplevel?: boolean;
   isUnsigned?: boolean;
   label?: React.ReactNode;
   onClick?: VoidFn;