From 0682021680a093e46fbc58fc6e80bbea3a5d2612 Mon Sep 17 00:00:00 2001
From: Jack Neto <jack@theworkinggroup.ca>
Date: Sat, 18 Jan 2020 19:48:39 -0500
Subject: [PATCH] Fix several issues

---
 src/common/ModalDialog/index.jsx              |  8 ++-
 src/common/SubmitButtonWithProgress/index.jsx | 14 +++-
 src/core/Accounts/Transactions/RuleFields.jsx | 11 ++-
 .../Transactions/TransactionDialog.jsx        |  8 ++-
 .../Transactions/TransactionsTable.jsx        |  2 +-
 .../Transactions/TransactionsToolbar.jsx      | 45 ++++++++----
 .../__tests__/RuleFields.test.jsx             | 58 ++++++++++++---
 .../TransactionsTable.test.jsx.snap           | 70 +++++++++++--------
 .../TransactionsToolbar.test.jsx.snap         | 11 ++-
 .../__snapshots__/form.test.jsx.snap          |  4 +-
 .../__snapshots__/form.test.jsx.snap          | 28 ++++----
 src/core/BudgetCategories/index.jsx           | 28 +++++++-
 src/store/budget/__tests__/reducer.test.js    | 40 +++++++++--
 src/store/budget/reducer.js                   |  1 +
 src/store/index.js                            |  1 +
 src/store/transactions/actions.js             |  3 -
 16 files changed, 233 insertions(+), 99 deletions(-)

diff --git a/src/common/ModalDialog/index.jsx b/src/common/ModalDialog/index.jsx
index bcd8230..e4ee99c 100644
--- a/src/common/ModalDialog/index.jsx
+++ b/src/common/ModalDialog/index.jsx
@@ -11,6 +11,7 @@ import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from '@material-ui/icons/Close'
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
+import SubmitButtonWithProgress from '../SubmitButtonWithProgress'
 
 const useStyles = makeStyles((theme) => ({
   dialogMargin: {
@@ -45,6 +46,7 @@ const ModalDialog = ({
   title,
   children,
   onSubmit,
+  isSubmitting,
   onCancel,
   onDelete,
   open,
@@ -84,7 +86,7 @@ const ModalDialog = ({
                 )}
               </Grid>
               <Grid item xs={4}>
-                <Button type="submit" color="secondary" className={classes.saveButton}>Save</Button>
+                <SubmitButtonWithProgress label="Save" isSubmitting={isSubmitting} className={classes.saveButton} />
               </Grid>
             </Grid>
           </DialogActions>
@@ -99,6 +101,7 @@ ModalDialog.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   onSubmit: PropTypes.func.isRequired,
+  isSubmitting: PropTypes.bool,
   onCancel: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   className: PropTypes.string,
@@ -110,7 +113,8 @@ ModalDialog.defaultProps = {
   className: null,
   onDelete: null,
   maxWidth: null,
-  fullWidth: false
+  fullWidth: false,
+  isSubmitting: false
 }
 
 export default ModalDialog
diff --git a/src/common/SubmitButtonWithProgress/index.jsx b/src/common/SubmitButtonWithProgress/index.jsx
index be6bf94..b306998 100644
--- a/src/common/SubmitButtonWithProgress/index.jsx
+++ b/src/common/SubmitButtonWithProgress/index.jsx
@@ -20,13 +20,19 @@ const styles = (theme) => ({
   }
 })
 
-const SubmitButtonWithProgress = ({ classes, label, isSubmitting }) => {
+const SubmitButtonWithProgress = ({
+  classes,
+  className,
+  label,
+  isSubmitting
+}) => {
   return (
-    <div className={classes.wrapper}>
+    <div className={[classes.wrapper, className].join(' ')}>
       <Button
         type="submit"
         color="secondary"
         disabled={isSubmitting}
+        disableFocusRipple={true}
       >
         {label}
       </Button>
@@ -37,8 +43,12 @@ const SubmitButtonWithProgress = ({ classes, label, isSubmitting }) => {
 
 SubmitButtonWithProgress.propTypes = {
   classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
   label: PropTypes.string.isRequired,
   isSubmitting: PropTypes.bool.isRequired
 }
 
+SubmitButtonWithProgress.defaultProps = {
+  className: null
+}
 export default withStyles(styles)(SubmitButtonWithProgress)
diff --git a/src/core/Accounts/Transactions/RuleFields.jsx b/src/core/Accounts/Transactions/RuleFields.jsx
index 4c87d03..1af2795 100644
--- a/src/core/Accounts/Transactions/RuleFields.jsx
+++ b/src/core/Accounts/Transactions/RuleFields.jsx
@@ -38,8 +38,7 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'none'
   },
   smallIcon: {
-    width: 15,
-    height: 15
+    fontSize: 14
   }
 }))
 
@@ -55,11 +54,11 @@ const RuleFields = ({
   showTransactions
 }) => {
   const classes = useStyles()
-  const [checkboxesState, SetCheckboxesState] = useState({ applyToExistin: true, applyToFuture: true })
+  const [oldCheckboxesState, SetOldCheckboxesState] = useState({ applyToExistin: true, applyToFuture: true })
 
   const handleChangeApplyToOtherTransactions = (_, checked) => {
     if (!checked) {
-      SetCheckboxesState({
+      SetOldCheckboxesState({
         applyToExisting: values.applyToExisting,
         applyToFuture: values.applyToFuture
       })
@@ -68,8 +67,8 @@ const RuleFields = ({
       setFieldValue('applyToFuture', false)
     } else {
       setFieldValue('applyToOtherTransactions', true)
-      setFieldValue('applyToExisting', checkboxesState.applyToExisting)
-      setFieldValue('applyToFuture', checkboxesState.applyToFuture)
+      setFieldValue('applyToExisting', oldCheckboxesState.applyToExisting)
+      setFieldValue('applyToFuture', oldCheckboxesState.applyToFuture)
     }
   }
 
diff --git a/src/core/Accounts/Transactions/TransactionDialog.jsx b/src/core/Accounts/Transactions/TransactionDialog.jsx
index 00a3678..60085a2 100644
--- a/src/core/Accounts/Transactions/TransactionDialog.jsx
+++ b/src/core/Accounts/Transactions/TransactionDialog.jsx
@@ -136,6 +136,7 @@ const getRule = (values, accountId) => {
 
 export const TransactionDialogComponent = ({
   handleSubmit,
+  isSubmitting,
   setFieldValue,
   values,
   errors,
@@ -174,6 +175,7 @@ export const TransactionDialogComponent = ({
       open={open}
       title={transaction ? 'Edit transaction' : 'New transaction'}
       onSubmit={handleSubmit}
+      isSubmitting={isSubmitting}
       onCancel={onCancel}
       onDelete={transaction ? onDelete : undefined}
       className={classes.root}
@@ -407,6 +409,7 @@ export const TransactionDialogComponent = ({
 
 TransactionDialogComponent.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
   values: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired,
   touched: PropTypes.object.isRequired,
@@ -452,7 +455,6 @@ export default compose(
         }
       }
 
-      console.log({ ruleId: transaction.ruleId, rules: budget.rules })
       const ruleAttributes = {}
       if (transaction.ruleId) {
         const rule = budget.rules[transaction.ruleId]
@@ -502,7 +504,7 @@ export default compose(
       createdAt: Yup.date()
         .required('Please select the date of this transaction')
     }),
-    handleSubmit: (values, { props, setSubmitting, resetForm }) => {
+    handleSubmit: async (values, { props, setSubmitting, resetForm }) => {
       setSubmitting(true)
       const {
         transactionType,
@@ -529,7 +531,7 @@ export default compose(
       }
       const rule = getRule(values, props.account.id)
       if (!rule) transaction.ruleId = null
-      props.onSave(transaction, { rule, applyToExisting, applyToFuture })
+      await props.onSave(transaction, { rule, applyToExisting, applyToFuture })
       resetForm()
       setSubmitting(false)
     }
diff --git a/src/core/Accounts/Transactions/TransactionsTable.jsx b/src/core/Accounts/Transactions/TransactionsTable.jsx
index 3862a6f..ccbc58e 100644
--- a/src/core/Accounts/Transactions/TransactionsTable.jsx
+++ b/src/core/Accounts/Transactions/TransactionsTable.jsx
@@ -347,7 +347,7 @@ export class TransactionsTableComponent extends React.Component {
                         </Tooltip>
                       )
                     }
-                    if (allowClickOnRow) {
+                    if (allowClickOnRow && rowData.type !== 'openingBalance') {
                       return (
                         <Link
                           onClick={() => toolbarProps.handleEdit(rowData)}
diff --git a/src/core/Accounts/Transactions/TransactionsToolbar.jsx b/src/core/Accounts/Transactions/TransactionsToolbar.jsx
index f897347..c5b25f5 100644
--- a/src/core/Accounts/Transactions/TransactionsToolbar.jsx
+++ b/src/core/Accounts/Transactions/TransactionsToolbar.jsx
@@ -11,6 +11,7 @@ import { mdiImport } from '@mdi/js'
 import InputBase from '@material-ui/core/InputBase'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import SearchIcon from '@material-ui/icons/Search'
+import CloseIcon from '@material-ui/icons/Close'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import confirm from '../../../util/confirm'
 import TableToolbar from '../../../common/TableToolbar'
@@ -23,24 +24,18 @@ const styles = (theme) => ({
   buttons: {
     display: 'flex'
   },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius * 2,
-    backgroundColor: fade(theme.palette.grey[400], 0.15),
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: '100%',
-    '&:hover': {
-      backgroundColor: fade(theme.palette.grey[400], 0.25)
-    }
-  },
   inputRoot: {
     color: 'inherit',
     width: '100%',
     padding: theme.spacing(2),
     paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1)
-
+    paddingBottom: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius * 2,
+    backgroundColor: fade(theme.palette.grey[400], 0.15),
+    marginRight: theme.spacing(4),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.grey[400], 0.25)
+    }
   },
   inputInput: {
     transition: theme.transitions.create('width'),
@@ -48,6 +43,12 @@ const styles = (theme) => ({
     [theme.breakpoints.up('md')]: {
       minWidth: 240
     }
+  },
+  smallIcon: {
+    fontSize: 16
+  },
+  iconSpacer: {
+    width: theme.spacing(3)
   }
 })
 
@@ -94,9 +95,9 @@ export class TransactionsToolbarComponent extends React.Component {
           </Tooltip>
         ) : (
           <div className={classes.buttons}>
-            <div className={classes.search}>
+            <div>
               <InputBase
-                type="search"
+                type="input"
                 placeholder="Search transactions"
                 onChange={this.onChangeSearch}
                 value={filterProps.filters.description || ''}
@@ -105,6 +106,20 @@ export class TransactionsToolbarComponent extends React.Component {
                   input: classes.inputInput
                 }}
                 startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
+                endAdornment={(
+                  <InputAdornment position="end">
+                    {filterProps.filters.description && (
+                      <IconButton
+                        size="small"
+                        aria-label="clear search"
+                        onClick={() => this.onChangeSearch({ target: { name: 'description', value: '' } })}
+                      >
+                        <CloseIcon className={classes.smallIcon} />
+                      </IconButton>
+                    )}
+                    {!filterProps.filters.description && (<div className={classes.iconSpacer} />)}
+                  </InputAdornment>
+                )}
               />
             </div>
             <Tooltip title="Import transaction">
diff --git a/src/core/Accounts/Transactions/__tests__/RuleFields.test.jsx b/src/core/Accounts/Transactions/__tests__/RuleFields.test.jsx
index c6be435..5e01e25 100644
--- a/src/core/Accounts/Transactions/__tests__/RuleFields.test.jsx
+++ b/src/core/Accounts/Transactions/__tests__/RuleFields.test.jsx
@@ -3,6 +3,7 @@ import { render, queryByAttribute } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import configureMockStore from 'redux-mock-store'
 import { Provider } from 'react-redux'
+import faker from 'faker'
 import RuleFields from '../RuleFields'
 import ThemeProvider from '../../../ThemeProvider'
 import { initialState as settingsInitialState } from '../../../../store/settings/reducer'
@@ -23,7 +24,7 @@ const defaultValues = {
   applyToFuture: true
 }
 
-const renderContent = (props) => {
+const renderContent = (props = {}) => {
   const mockStore = configureMockStore()
   const store = mockStore({
     transactions: transactionsInitialState,
@@ -61,14 +62,17 @@ describe('RuleFields', () => {
       const { getByText, container } = renderContent()
       expect(getByText('Apply this category to')).toBeInTheDocument()
       expect(getByText('0 other existing transactions')).toBeInTheDocument()
-      expect(getByName(container, 'applyToOtherTransactions')).toHaveProperty('disabled', true)
-      expect(getByName(container, 'applyToExisting')).toHaveProperty('disabled', true)
-      expect(getByName(container, 'applyToFuture')).toHaveProperty('disabled', true)
+      const applyToOtherTransactionsCheckbox = getByName(container, 'applyToOtherTransactions')
+      const applyToExistingCheckbox = getByName(container, 'applyToExisting')
+      const applyToFutureCheckbox = getByName(container, 'applyToFuture')
+      expect(applyToOtherTransactionsCheckbox).toHaveProperty('disabled', true)
+      expect(applyToExistingCheckbox).toHaveProperty('disabled', true)
+      expect(applyToFutureCheckbox).toHaveProperty('disabled', true)
       expect(getByName(container, 'filterText')).not.toBeInTheDocument()
       expect(getByName(container, 'matchAmount')).toHaveProperty('disabled', true)
-      expect(getByName(container, 'applyToOtherTransactions')).toHaveProperty('checked', true)
-      expect(getByName(container, 'applyToExisting')).toHaveProperty('checked', true)
-      expect(getByName(container, 'applyToFuture')).toHaveProperty('checked', true)
+      expect(applyToOtherTransactionsCheckbox).toHaveProperty('checked', true)
+      expect(applyToExistingCheckbox).toHaveProperty('checked', true)
+      expect(applyToFutureCheckbox).toHaveProperty('checked', true)
     })
 
     it('should enable some fields if a category is selected', async () => {
@@ -76,9 +80,12 @@ describe('RuleFields', () => {
       const { getByText, container } = renderContent({ values: { ...defaultValues, categoryId } })
       expect(getByText('Apply this category to')).toBeInTheDocument()
       expect(getByText('0 other existing transactions')).toBeInTheDocument()
-      expect(getByName(container, 'applyToOtherTransactions')).toHaveProperty('disabled', false)
-      expect(getByName(container, 'applyToExisting')).toHaveProperty('disabled', true)
-      expect(getByName(container, 'applyToFuture')).toHaveProperty('disabled', false)
+      const applyToOtherTransactionsCheckbox = getByName(container, 'applyToOtherTransactions')
+      const applyToExistingCheckbox = getByName(container, 'applyToExisting')
+      const applyToFutureCheckbox = getByName(container, 'applyToFuture')
+      expect(applyToOtherTransactionsCheckbox).toHaveProperty('disabled', false)
+      expect(applyToExistingCheckbox).toHaveProperty('disabled', true)
+      expect(applyToFutureCheckbox).toHaveProperty('disabled', false)
       expect(getByName(container, 'filterText')).not.toBeInTheDocument()
       expect(getByName(container, 'matchAmount')).toHaveProperty('disabled', false)
     })
@@ -94,4 +101,35 @@ describe('RuleFields', () => {
       expect(getByName(container, 'matchAmount')).toHaveProperty('disabled', true)
     })
   })
+
+  describe('transaction with ruleId', () => {
+    const transaction = {
+      id: faker.random.uuid(),
+      accountId: faker.random.uuid(),
+      description: 'Buy groceries',
+      amount: {
+        accountCurrency: faker.finance.amount(),
+        localCurrency: faker.finance.amount()
+      },
+      createdAt: Date.now(),
+      ruleId: faker.random.uuid()
+    }
+
+    it('should show remove if no category selected', () => {
+      const { getByText, container } = renderContent({ transaction })
+      expect(getByText('Remove this category from')).toBeInTheDocument()
+      expect(getByText('0 other existing transactions')).toBeInTheDocument()
+      const applyToOtherTransactionsCheckbox = getByName(container, 'applyToOtherTransactions')
+      const applyToExistingCheckbox = getByName(container, 'applyToExisting')
+      const applyToFutureCheckbox = getByName(container, 'applyToFuture')
+      expect(applyToOtherTransactionsCheckbox).toHaveProperty('disabled', true)
+      expect(applyToExistingCheckbox).toHaveProperty('disabled', true)
+      expect(applyToFutureCheckbox).toHaveProperty('disabled', true)
+      expect(getByName(container, 'filterText')).not.toBeInTheDocument()
+      expect(getByName(container, 'matchAmount')).toHaveProperty('disabled', true)
+      expect(applyToOtherTransactionsCheckbox).toHaveProperty('checked', true)
+      expect(applyToExistingCheckbox).toHaveProperty('checked', true)
+      expect(applyToFutureCheckbox).toHaveProperty('checked', true)
+    })
+  })
 })
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
index 477561b..3e5869a 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
@@ -5,10 +5,10 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
   className=" "
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-7 MuiToolbar-gutters"
   >
     <div
-      className="TableToolbar-title-10"
+      className="TableToolbar-title-11"
     >
       <div>
         <h6
@@ -22,19 +22,17 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
       </div>
     </div>
     <div
-      className="TableToolbar-spacer-8"
+      className="TableToolbar-spacer-9"
     />
     <div
-      className="TableToolbar-actions-9"
+      className="TableToolbar-actions-10"
     >
       <div
         className="withRouter(TransactionsToolbarComponent)-buttons-2"
       >
-        <div
-          className="withRouter(TransactionsToolbarComponent)-search-3"
-        >
+        <div>
           <div
-            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
+            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-3 MuiInputBase-adornedStart MuiInputBase-adornedEnd"
             onClick={[Function]}
           >
             <div
@@ -53,15 +51,22 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
               </svg>
             </div>
             <input
-              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputAdornedStart MuiInputBase-inputTypeSearch"
+              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-4 MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd"
               onAnimationStart={[Function]}
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
               placeholder="Search transactions"
-              type="search"
+              type="input"
               value=""
             />
+            <div
+              className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+            >
+              <div
+                className="withRouter(TransactionsToolbarComponent)-iconSpacer-6"
+              />
+            </div>
           </div>
         </div>
         <a
@@ -199,7 +204,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-111 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -218,7 +223,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
               >
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-113"
+                  className="PrivateSwitchBase-input-114"
                   data-indeterminate={false}
                   disabled={false}
                   onChange={[Function]}
@@ -405,10 +410,10 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
   className=" "
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-7 MuiToolbar-gutters"
   >
     <div
-      className="TableToolbar-title-10"
+      className="TableToolbar-title-11"
     >
       <div>
         <h6
@@ -422,19 +427,17 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
       </div>
     </div>
     <div
-      className="TableToolbar-spacer-8"
+      className="TableToolbar-spacer-9"
     />
     <div
-      className="TableToolbar-actions-9"
+      className="TableToolbar-actions-10"
     >
       <div
         className="withRouter(TransactionsToolbarComponent)-buttons-2"
       >
-        <div
-          className="withRouter(TransactionsToolbarComponent)-search-3"
-        >
+        <div>
           <div
-            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
+            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-3 MuiInputBase-adornedStart MuiInputBase-adornedEnd"
             onClick={[Function]}
           >
             <div
@@ -453,15 +456,22 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
               </svg>
             </div>
             <input
-              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputAdornedStart MuiInputBase-inputTypeSearch"
+              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-4 MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd"
               onAnimationStart={[Function]}
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
               placeholder="Search transactions"
-              type="search"
+              type="input"
               value=""
             />
+            <div
+              className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+            >
+              <div
+                className="withRouter(TransactionsToolbarComponent)-iconSpacer-6"
+              />
+            </div>
           </div>
         </div>
         <a
@@ -599,7 +609,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-111 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -618,7 +628,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
               >
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-113"
+                  className="PrivateSwitchBase-input-114"
                   data-indeterminate={false}
                   disabled={false}
                   onChange={[Function]}
@@ -846,7 +856,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
               >
                 <span
                   aria-disabled={false}
-                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-111 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   onBlur={[Function]}
                   onDragLeave={[Function]}
                   onFocus={[Function]}
@@ -865,7 +875,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                   >
                     <input
                       checked={false}
-                      className="PrivateSwitchBase-input-113"
+                      className="PrivateSwitchBase-input-114"
                       data-indeterminate={false}
                       disabled={false}
                       onChange={[Function]}
@@ -1008,7 +1018,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
               >
                 <span
                   aria-disabled={false}
-                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-111 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   onBlur={[Function]}
                   onDragLeave={[Function]}
                   onFocus={[Function]}
@@ -1027,7 +1037,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                   >
                     <input
                       checked={false}
-                      className="PrivateSwitchBase-input-113"
+                      className="PrivateSwitchBase-input-114"
                       data-indeterminate={false}
                       disabled={false}
                       onChange={[Function]}
@@ -1170,7 +1180,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
               >
                 <span
                   aria-disabled={false}
-                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-111 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   onBlur={[Function]}
                   onDragLeave={[Function]}
                   onFocus={[Function]}
@@ -1189,7 +1199,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                   >
                     <input
                       checked={false}
-                      className="PrivateSwitchBase-input-113"
+                      className="PrivateSwitchBase-input-114"
                       data-indeterminate={false}
                       disabled={false}
                       onChange={[Function]}
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
index c9892d5..bc18524 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
@@ -27,7 +27,7 @@ exports[`TransactionsToolbar matches snapshot with no selected transactions 1`]
     <div>
       <div>
         <div
-          className="MuiInputBase-root MuiInputBase-adornedStart"
+          className="MuiInputBase-root MuiInputBase-adornedStart MuiInputBase-adornedEnd"
           onClick={[Function]}
         >
           <div
@@ -46,15 +46,20 @@ exports[`TransactionsToolbar matches snapshot with no selected transactions 1`]
             </svg>
           </div>
           <input
-            className="MuiInputBase-input MuiInputBase-inputAdornedStart MuiInputBase-inputTypeSearch"
+            className="MuiInputBase-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd"
             onAnimationStart={[Function]}
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
             placeholder="Search transactions"
-            type="search"
+            type="input"
             value=""
           />
+          <div
+            className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          >
+            <div />
+          </div>
         </div>
       </div>
       <a
diff --git a/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap b/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
index 7012c0f..fa3e07a 100644
--- a/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
+++ b/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
@@ -545,7 +545,7 @@ exports[`Account form matches snapshot for edit account 1`] = `
         </button>
         <div />
         <div
-          className="SubmitButtonWithProgress-wrapper-277"
+          className="SubmitButtonWithProgress-wrapper-277 "
         >
           <button
             className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary"
@@ -1122,7 +1122,7 @@ exports[`Account form matches snapshot for new account 1`] = `
         </button>
         <div />
         <div
-          className="SubmitButtonWithProgress-wrapper-277"
+          className="SubmitButtonWithProgress-wrapper-277 "
         >
           <button
             className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary"
diff --git a/src/core/BudgetCategories/__tests__/__snapshots__/form.test.jsx.snap b/src/core/BudgetCategories/__tests__/__snapshots__/form.test.jsx.snap
index 38cf5a6..8943b22 100644
--- a/src/core/BudgetCategories/__tests__/__snapshots__/form.test.jsx.snap
+++ b/src/core/BudgetCategories/__tests__/__snapshots__/form.test.jsx.snap
@@ -41,13 +41,13 @@ exports[`CategoryForm matches snapshot for existing category 1`] = `
                 </ForwardRef(TextField)>
               </WithStyles(ForwardRef(TextField))>
               <div className=\\"WithFormik(CategoryFormComponent)-formActions-3\\">
-                <WithStyles(SubmitButtonWithProgress) label=\\"Save\\" isSubmitting={false}>
-                  <SubmitButtonWithProgress classes={{...}} label=\\"Save\\" isSubmitting={false}>
-                    <div className=\\"SubmitButtonWithProgress-wrapper-64\\">
-                      <WithStyles(ForwardRef(Button)) type=\\"submit\\" color=\\"secondary\\" disabled={false}>
-                        <ForwardRef(Button) classes={{...}} type=\\"submit\\" color=\\"secondary\\" disabled={false}>
-                          <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
-                            <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
+                <WithStyles(SubmitButtonWithProgress) label=\\"Save\\" isSubmitting={false} className={{...}}>
+                  <SubmitButtonWithProgress classes={{...}} label=\\"Save\\" isSubmitting={false} className={{...}}>
+                    <div className=\\"SubmitButtonWithProgress-wrapper-64 \\">
+                      <WithStyles(ForwardRef(Button)) type=\\"submit\\" color=\\"secondary\\" disabled={false} disableFocusRipple={true}>
+                        <ForwardRef(Button) classes={{...}} type=\\"submit\\" color=\\"secondary\\" disabled={false} disableFocusRipple={true}>
+                          <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={false} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
+                            <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={false} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
                               <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"submit\\" disabled={false}>
                                 <span className=\\"MuiButton-label\\">
                                   Save
@@ -144,13 +144,13 @@ exports[`CategoryForm matches snapshot for new category 1`] = `
                 </ForwardRef(TextField)>
               </WithStyles(ForwardRef(TextField))>
               <div className=\\"WithFormik(CategoryFormComponent)-formActions-3\\">
-                <WithStyles(SubmitButtonWithProgress) label=\\"Save\\" isSubmitting={false}>
-                  <SubmitButtonWithProgress classes={{...}} label=\\"Save\\" isSubmitting={false}>
-                    <div className=\\"SubmitButtonWithProgress-wrapper-64\\">
-                      <WithStyles(ForwardRef(Button)) type=\\"submit\\" color=\\"secondary\\" disabled={false}>
-                        <ForwardRef(Button) classes={{...}} type=\\"submit\\" color=\\"secondary\\" disabled={false}>
-                          <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
-                            <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
+                <WithStyles(SubmitButtonWithProgress) label=\\"Save\\" isSubmitting={false} className={{...}}>
+                  <SubmitButtonWithProgress classes={{...}} label=\\"Save\\" isSubmitting={false} className={{...}}>
+                    <div className=\\"SubmitButtonWithProgress-wrapper-64 \\">
+                      <WithStyles(ForwardRef(Button)) type=\\"submit\\" color=\\"secondary\\" disabled={false} disableFocusRipple={true}>
+                        <ForwardRef(Button) classes={{...}} type=\\"submit\\" color=\\"secondary\\" disabled={false} disableFocusRipple={true}>
+                          <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={false} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
+                            <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary\\" component=\\"button\\" disabled={false} focusRipple={false} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"submit\\">
                               <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"submit\\" disabled={false}>
                                 <span className=\\"MuiButton-label\\">
                                   Save
diff --git a/src/core/BudgetCategories/index.jsx b/src/core/BudgetCategories/index.jsx
index 1cf64f0..a2097aa 100644
--- a/src/core/BudgetCategories/index.jsx
+++ b/src/core/BudgetCategories/index.jsx
@@ -8,6 +8,7 @@ import InputBase from '@material-ui/core/InputBase'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import Typography from '@material-ui/core/Typography'
 import SearchIcon from '@material-ui/icons/Search'
+import CloseIcon from '@material-ui/icons/Close'
 import AddIcon from '@material-ui/icons/Add'
 import InfoIcon from '@material-ui/icons/Info'
 import EditIcon from '@material-ui/icons/Edit'
@@ -74,7 +75,10 @@ const useStyles = makeStyles((theme) => ({
   inputInput: {
     width: 160,
     color: 'inherit',
-    transition: theme.transitions.create('width')
+    transition: theme.transitions.create('width'),
+    '-webkit-search-cancel-button': {
+      display: 'none'
+    }
   },
   filterParentCategory: {
     width: 230,
@@ -89,6 +93,12 @@ const useStyles = makeStyles((theme) => ({
   },
   categoryName: {
     wordBreak: 'break-word'
+  },
+  smallIcon: {
+    fontSize: 18
+  },
+  iconSpacer: {
+    width: theme.spacing(3)
   }
 }))
 
@@ -276,7 +286,7 @@ const BudgetCategories = () => {
         <Typography variant="h4">Manage categories</Typography>
         <div>
           <InputBase
-            type="search"
+            type="input"
             placeholder="Search categories"
             name="category"
             onChange={handleFilterChange}
@@ -290,6 +300,20 @@ const BudgetCategories = () => {
               maxLength: 20
             }}
             startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
+            endAdornment={(
+              <InputAdornment position="end">
+                {filter.category.length > 0 && (
+                  <IconButton
+                    size="small"
+                    aria-label="clear search"
+                    onClick={() => handleFilterChange({ target: { name: 'category', value: '' } })}
+                  >
+                    <CloseIcon className={classes.smallIcon} />
+                  </IconButton>
+                )}
+                {filter.category.length === 0 && (<div className={classes.iconSpacer} />)}
+              </InputAdornment>
+            )}
           />
           <Select
             placeholder="All groups"
diff --git a/src/store/budget/__tests__/reducer.test.js b/src/store/budget/__tests__/reducer.test.js
index d502ede..db21302 100644
--- a/src/store/budget/__tests__/reducer.test.js
+++ b/src/store/budget/__tests__/reducer.test.js
@@ -168,20 +168,48 @@ describe('budget reducer', () => {
   describe('Rules', () => {
     it('should create a new rule', () => {
       const type = types.CREATE_RULE
-      const payload = rule
-      expect(budgetReducer(initialState, { type, payload })).toEqual({
+      const state = {
         ...initialState,
-        rules: { [payload.id]: payload }
+        rules: {
+          abc: {
+            id: 'abc',
+            accountId: '123',
+            attributes: { categoryId: '456' },
+            filterBy: { description: { type: 'equals', value: 'lorem ipsum' } }
+          }
+        }
+      }
+      const payload = rule
+      expect(budgetReducer(state, { type, payload })).toEqual({
+        ...state,
+        rules: {
+          ...state.rules,
+          [payload.id]: payload
+        }
       })
     })
 
     it('should update an existing rule', () => {
       const type = types.UPDATE_RULE
       const payload = rule
-      const state = { ...initialState, rules: { [rule.id]: { } } }
-      expect(budgetReducer(state, { type, payload })).toEqual({
+      const state = {
         ...initialState,
-        rules: { [payload.id]: payload }
+        rules: {
+          abc: {
+            id: 'abc',
+            accountId: '123',
+            attributes: { categoryId: '456' },
+            filterBy: { description: { type: 'equals', value: 'lorem ipsum' } }
+          },
+          [rule.id]: { }
+        }
+      }
+      expect(budgetReducer(state, { type, payload })).toEqual({
+        ...state,
+        rules: {
+          ...state.rules,
+          [payload.id]: payload
+        }
       })
     })
 
diff --git a/src/store/budget/reducer.js b/src/store/budget/reducer.js
index a7b6c09..f8b3ae0 100644
--- a/src/store/budget/reducer.js
+++ b/src/store/budget/reducer.js
@@ -156,6 +156,7 @@ export default (state = initialState, { type, payload }) => {
       return {
         ...state,
         rules: {
+          ...state.rules,
           [payload.id]: payload
         }
       }
diff --git a/src/store/index.js b/src/store/index.js
index ceee2d1..e3ff900 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -62,6 +62,7 @@ export const resetState = () => (dispatch, getState) => {
 
 const setPersistor = ({ storageType }) => {
   const persistConfig = {
+    timeout: 0,
     key: 'entaxy',
     blacklist: ['user'],
     version: Object.keys(migrations).length - 1,
diff --git a/src/store/transactions/actions.js b/src/store/transactions/actions.js
index 4fff48e..015a0af 100644
--- a/src/store/transactions/actions.js
+++ b/src/store/transactions/actions.js
@@ -77,9 +77,6 @@ export const updateTransaction = (account, transaction, {
     let { localCurrency } = transaction.amount
     const amountChanged = transaction.amount.accountCurrency !== oldTransaction.amount.accountCurrency
     const createdAtChanged = transaction.createdAt !== oldTransaction.createdAt
-    // const descriptionChanged = transaction.description !== oldTransaction.description
-    // const categoryChanged = transaction.categoryId !== oldTransaction.categoryId
-    // const transferAccountIdChanged = transaction.transferAccountId !== oldTransaction.transferAccountId
     if (amountChanged || createdAtChanged) {
       localCurrency = dispatch(convertToCurrency(
         transaction.amount.accountCurrency,