Show owner list when current address in not an owner

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

@@ -9,7 +9,7 @@ import Col from '~/components/layout/Col'
 import Table from '~/components/Table'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Row from '~/components/layout/Row'
-import Paragraph from '~/components/layout/Paragraph'
+import Heading from '~/components/layout/Heading'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
 import Img from '~/components/layout/Img'
@@ -22,7 +22,7 @@ import type { Owner } from '~/routes/safe/store/models/owner'
 import {
   getOwnerData, generateColumns, OWNERS_TABLE_NAME_ID, OWNERS_TABLE_ADDRESS_ID, type OwnerRow,
 } from './dataFetcher'
-import { sm, boldFont } from '~/theme/variables'
+import { lg, sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
 import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import RenameOwnerIcon from './assets/icons/rename-owner.svg'
@@ -43,6 +43,10 @@ const addOwnerButtonStyle = {
   fontWeight: boldFont,
 }
 
+const title = {
+  padding: lg,
+}
+
 type Props = {
   classes: Object,
   safeAddress: string,
@@ -53,6 +57,7 @@ type Props = {
   userAddress: string,
   createTransaction: Function,
   updateSafe: Function,
+  granted: boolean,
 }
 
 type State = {
@@ -103,6 +108,7 @@ class ManageOwners extends React.Component<Props, State> {
       userAddress,
       createTransaction,
       updateSafe,
+      granted,
     } = this.props
     const {
       showAddOwner,
@@ -120,9 +126,7 @@ class ManageOwners extends React.Component<Props, State> {
     return (
       <React.Fragment>
         <Block className={classes.formContainer}>
-          <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
+          <Heading tag="h3" style={title}>Manage Safe Owners</Heading>
-            Manage Safe Owners
-          </Paragraph>
           <Table
             label="Owners"
             defaultOrderBy={OWNERS_TABLE_NAME_ID}
@@ -144,6 +148,7 @@ class ManageOwners extends React.Component<Props, State> {
                   </TableCell>
                 ))}
                 <TableCell component="td">
+                  {granted && (
                     <Row align="end" className={classes.actions}>
                       <Img
                         alt="Edit owner"
@@ -158,6 +163,7 @@ class ManageOwners extends React.Component<Props, State> {
                         src={ReplaceOwnerIcon}
                         onClick={this.onShow('ReplaceOwner', row)}
                       />
+                      {ownerData.size > 1 && (
                         <Img
                           alt="Remove owner"
                           className={classes.removeOwnerIcon}
@@ -165,13 +171,17 @@ class ManageOwners extends React.Component<Props, State> {
                           onClick={this.onShow('RemoveOwner', row)}
                           testId={REMOVE_OWNER_BTN_TESTID}
                         />
+                      )}
                     </Row>
+                  )}
                 </TableCell>
               </TableRow>
             ))
             }
           </Table>
         </Block>
+        {granted && (
+          <React.Fragment>
             <Hairline />
             <Row style={controlsStyle} align="end" grow>
               <Col end="xs">
@@ -187,6 +197,8 @@ class ManageOwners extends React.Component<Props, State> {
                 </Button>
               </Col>
             </Row>
+          </React.Fragment>
+        )}
         <AddOwnerModal
           onClose={this.onHide('AddOwner')}
           isOpen={showAddOwner}

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -2,10 +2,6 @@
 import { lg } from '~/theme/variables'
 
 export const styles = () => ({
-  title: {
-    padding: `${lg} 20px`,
-    fontSize: '16px',
-  },
   formContainer: {
     minHeight: '369px',
   },

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

@@ -20,8 +20,6 @@ import actions, { type Actions } from './actions'
 import { styles } from './style'
 import RemoveSafeIcon from './assets/icons/bin.svg'
 
-export const OWNERS_SETTINGS_TAB_TEST_ID = 'owner-settings-tab'
-
 type State = {
   showRemoveSafe: boolean,
   menuOptionIndex: number,
@@ -111,18 +109,15 @@ class Settings extends React.Component<Props, State> {
                 Safe name
               </Row>
               <Hairline />
-              {granted && (
-                <React.Fragment>
               <Row
                 className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
                 onClick={this.handleChange(2)}
-                    testId={OWNERS_SETTINGS_TAB_TEST_ID}
               >
-                    Owners (
+                Owners ({owners.size})
-                    {owners.size}
-)
               </Row>
               <Hairline />
+              {granted && (
+                <React.Fragment>
                   <Row
                     className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
                     onClick={this.handleChange(3)}
@@ -139,7 +134,7 @@ class Settings extends React.Component<Props, State> {
               {menuOptionIndex === 1 && (
                 <ChangeSafeName safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} />
               )}
-              {granted && menuOptionIndex === 2 && (
+              {menuOptionIndex === 2 && (
                 <ManageOwners
                   owners={owners}
                   threshold={threshold}
@@ -149,6 +144,7 @@ class Settings extends React.Component<Props, State> {
                   createTransaction={createTransaction}
                   userAddress={userAddress}
                   updateSafe={updateSafe}
+                  granted={granted}
                 />
               )}
               {granted && menuOptionIndex === 3 && (