ui: fix permnissions box, display delete and add button only to admins

* closes #1988

Signed-off-by: papadopan <antonios.papadopan@gmail.com>

Author: papadopan

ui/cap-react/src/components/drafts/components/DepositAccess/DepositAccess.js

@@ -99,32 +99,32 @@ class DepositAccess extends React.Component {
             }}
           >
             <Box pad={{ between: "small" }}>
-              {this.props.canAdmin && (
-                <Box direction="row" justify="center">
-                  <Box
-                    flex
-                    direction="row"
-                    align="center"
-                    justify="between"
-                    responsive={false}
-                  >
-                    <TextInput
-                      placeHolder="Filter list by name or group"
-                      value={this.state.inputValue}
-                      onDOMChange={e =>
-                        this.setState({ inputValue: e.target.value })
-                      }
-                    />
+              <Box direction="row" justify="center">
+                <Box
+                  flex
+                  direction="row"
+                  align="center"
+                  justify="between"
+                  responsive={false}
+                >
+                  <TextInput
+                    placeHolder="Filter list by name or group"
+                    value={this.state.inputValue}
+                    onDOMChange={e =>
+                      this.setState({ inputValue: e.target.value })
+                    }
+                  />
+                  {this.props.canAdmin && (
                     <Button
                       size="small"
                       text="Add"
                       primary
                       icon={<AiOutlinePlus color="#fff" />}
                       onClick={() => this.setState({ showModal: true })}
                     />
-                  </Box>
+                  )}
                 </Box>
-              )}
+              </Box>
               <Box pad="small" align="start" margin={{ top: "small" }}>
                 <Box direction="row" responsive={false}>
                   <Button

ui/cap-react/src/components/drafts/components/DepositAccess/PermissionTable.js

@@ -22,7 +22,8 @@ const PermissionTable = ({
   created_by,
   permissionsObj,
   target,
-  access
+  access,
+  canAdmin
 }) => {
   const [currentPermissionObj, setCurrentPermissionObj] = useState({});
   const [updated, setUpdated] = useState({});
@@ -163,35 +164,32 @@ const PermissionTable = ({
                   </Box>
                 </Box>
 
-                {created_by &&
-                  created_by != item && (
-                    <Box align="center" direction="row" responsive={false}>
-                      <Box style={{ position: "relative" }}>
-                        <Tag
-                          size="small"
-                          text={
-                            <PermissionPopUp
-                              title={getTextFromPermission(
-                                access[item].actions
-                              )}
-                              type={access[item].type}
-                              email={item}
-                              permissions={access[item].actions}
-                              hideMenu={created_by && created_by === item}
-                            />
-                          }
+                <Box align="center" direction="row" responsive={false}>
+                  <Box style={{ position: "relative" }}>
+                    <Tag
+                      size="small"
+                      text={
+                        <PermissionPopUp
+                          title={getTextFromPermission(access[item].actions)}
+                          type={access[item].type}
+                          email={item}
+                          permissions={access[item].actions}
+                          hideMenu={!canAdmin}
                         />
-                      </Box>
-                      <Button
-                        icon={<AiOutlineDelete />}
-                        size="iconSmall"
-                        criticalOutline
-                        margin="0 0 0 5px"
-                        disabled={created_by && created_by === item}
-                        onClick={() => setItemToDelete(item)}
-                      />
-                    </Box>
+                      }
+                    />
+                  </Box>
+                  {canAdmin && (
+                    <Button
+                      icon={<AiOutlineDelete />}
+                      size="iconSmall"
+                      criticalOutline
+                      margin="0 0 0 5px"
+                      disabled={created_by && created_by === item}
+                      onClick={() => setItemToDelete(item)}
+                    />
                   )}
+                </Box>
               </ListItem>
             ))}
       </List>