fix delay when updating safe's owner name, add test file boilerplate for managing owners

src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx

@@ -17,14 +17,8 @@ import Paragraph from '~/components/layout/Paragraph'
 import Identicon from '~/components/Identicon'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
 import type { Owner } from '~/routes/safe/store/models/owner'
-import { makeOwner } from '~/routes/safe/store/models/owner'
-import {
-  composeValidators,
-  required,
-  minMaxLength,
-} from '~/components/forms/validator'
+import { composeValidators, required, minMaxLength } from '~/components/forms/validator'
 import Modal from '~/components/Modal'
-import { setOwners } from '~/logic/safe/utils'
 import { styles } from './style'
 import { secondary } from '~/theme/variables'
 
@@ -49,6 +43,7 @@ type Props = {
   owners: List<Owner>,
   network: string,
   selectedOwnerName: string,
+  updateSafe: Function,
 }
 
 const EditOwnerComponent = ({
@@ -58,14 +53,15 @@ const EditOwnerComponent = ({
   safeAddress,
   ownerAddress,
   selectedOwnerName,
+  updateSafe,
   owners,
   network,
 }: Props) => {
   const handleSubmit = (values) => {
-    const updatedOwners = owners.filter(o => o.address !== ownerAddress).push(
-      makeOwner({ name: values.ownerName, address: ownerAddress }),
-    )
-    setOwners(safeAddress, updatedOwners)
+    const ownerToUpdateIndex = owners.findIndex(o => o.address === ownerAddress)
+    const updatedOwners = owners.update(ownerToUpdateIndex, owner => owner.set('name', values.ownerName))
+
+    updateSafe({ address: safeAddress, owners: updatedOwners })
     onClose()
   }
 
@@ -79,7 +75,7 @@ const EditOwnerComponent = ({
     >
       <Row align="center" grow className={classes.heading}>
         <Paragraph className={classes.manage} noMargin weight="bolder">
-            Edit owner name
+          Edit owner name
         </Paragraph>
         <IconButton onClick={onClose} disableRipple>
           <Close className={classes.close} />
@@ -117,16 +113,10 @@ const EditOwnerComponent = ({
             <Hairline />
             <Row align="center" className={classes.buttonRow}>
               <Button className={classes.button} minWidth={140} onClick={onClose}>
-                  Cancel
+                Cancel
               </Button>
-              <Button
-                type="submit"
-                className={classes.button}
-                variant="contained"
-                minWidth={140}
-                color="primary"
-              >
-                  Save
+              <Button type="submit" className={classes.button} variant="contained" minWidth={140} color="primary">
+                Save
               </Button>
             </Row>
           </React.Fragment>

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -47,6 +47,7 @@ type Props = {
   threshold: number,
   userAddress: string,
   createTransaction: Function,
+  updateSafe: Function,
 }
 
 type State = {
@@ -88,7 +89,15 @@ class ManageOwners extends React.Component<Props, State> {
 
   render() {
     const {
-      classes, safeAddress, safeName, owners, threshold, network, userAddress, createTransaction,
+      classes,
+      safeAddress,
+      safeName,
+      owners,
+      threshold,
+      network,
+      userAddress,
+      createTransaction,
+      updateSafe,
     } = this.props
     const {
       showAddOwner,
@@ -206,6 +215,7 @@ class ManageOwners extends React.Component<Props, State> {
           selectedOwnerName={selectedOwnerName}
           owners={owners}
           network={network}
+          updateSafe={updateSafe}
         />
       </React.Fragment>
     )

src/routes/safe/components/Settings/index.jsx

@@ -145,6 +145,7 @@ class Settings extends React.Component<Props, State> {
                   network={network}
                   createTransaction={createTransaction}
                   userAddress={userAddress}
+                  updateSafe={updateSafe}
                 />
               )}
               {granted && menuOptionIndex === 3 && (

src/routes/safe/store/middleware/safeStorage.js

@@ -1,8 +1,8 @@
 // @flow
+import type { Store, AnyAction } from 'redux'
 import { ADD_SAFE } from '~/routes/safe/store/actions/addSafe'
 import { UPDATE_SAFE } from '~/routes/safe/store/actions/updateSafe'
 import { REMOVE_SAFE } from '~/routes/safe/store/actions/removeSafe'
-import type { Store, AnyAction } from 'redux'
 import { type GlobalState } from '~/store/'
 import { saveSafes, setOwners, removeOwners } from '~/logic/safe/utils'
 import { safesMapSelector } from '~/routes/safeList/store/selectors'
@@ -41,6 +41,12 @@ const safeStorageMware = (store: Store<GlobalState>) => (next: Function) => asyn
     if (action.type === ADD_SAFE) {
       const { safe } = action.payload
       setOwners(safe.address, safe.owners)
+    } else if (action.type === UPDATE_SAFE) {
+      const { address, owners } = action.payload
+
+      if (address && owners) {
+        setOwners(address, owners)
+      }
     } else if (action.type === REMOVE_SAFE) {
       const safeAddress = action.payload
       removeOwners(safeAddress)

src/test/safe.dom.settings.owners.test.js

@@ -0,0 +1,25 @@
+// @flow
+import { fireEvent, cleanup } from '@testing-library/react'
+import { aNewStore } from '~/store'
+import { aMinedSafe } from '~/test/builder/safe.redux.builder'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
+import { sleep } from '~/utils/timer'
+import 'jest-dom/extend-expect'
+import { SETTINGS_TAB_BTN_TESTID, SAFE_VIEW_NAME_HEADING_TESTID } from '~/routes/safe/components/Layout'
+import { SAFE_NAME_INPUT_TESTID, SAFE_NAME_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ChangeSafeName'
+
+afterEach(cleanup)
+
+describe('DOM > Feature > Settings > Manage owners', () => {
+  let store
+  let safeAddress
+  beforeEach(async () => {
+    store = aNewStore()
+    // using 4th account because other accounts were used in other tests and paid gas
+    safeAddress = await aMinedSafe(store)
+  })
+
+  it('Changes owner\'s name', async () => {
+
+  })
+})