diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 48fb90431e..578a0cf13f 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -42,8 +42,8 @@ class GroupItem extends React.Component {
         <td>
           <PermissionEditor 
             isTextMode={true}
-            permission={item.permission}
-            permissions={this.props.permissions}
+            currentPermission={item.permission}
+            ownedPermissions={this.props.ownedPermissions}
             onPermissionChangedHandler={this.onChangeUserPermission}
           />
         </td>
@@ -71,7 +71,7 @@ class GroupList extends React.Component {
             <GroupItem 
               key={index} 
               item={item} 
-              permissions={this.props.permissions}
+              ownedPermissions={this.props.ownedPermissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
             />
@@ -99,9 +99,9 @@ class ShareToGroup extends React.Component {
       sharedItems: []
     };
     this.options = [];
-    this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
+    this.ownedPermissions = ['rw', 'r', 'cloud-edit', 'preview'];
     if (this.props.isGroupOwnedRepo) {
-      this.permissions = ['rw', 'r'];
+      this.ownedPermissions = ['rw', 'r'];
     }
   }
 
@@ -267,8 +267,8 @@ class ShareToGroup extends React.Component {
             <td>
               <PermissionEditor 
                 isTextMode={false}
-                permission={this.state.permission}
-                permissions={this.permissions}
+                currentPermission={this.state.permission}
+                ownedPermissions={this.ownedPermissions}
                 onPermissionChangedHandler={this.setPermission}
               />
             </td>
@@ -289,7 +289,7 @@ class ShareToGroup extends React.Component {
         </thead>
         <GroupList 
           items={this.state.sharedItems}
-          permissions={this.permissions}
+          ownedPermissions={this.ownedPermissions}
           deleteShareItem={this.deleteShareItem} 
           onChangeUserPermission={this.onChangeUserPermission}
         />
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 23fdf2a183..8655c71e1b 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -41,8 +41,8 @@ class UserItem extends React.Component {
         <td>
           <PermissionEditor 
             isTextMode={true}
-            permission={item.permission}
-            permissions={this.props.permissions}
+            currentPermission={item.permission}
+            ownedPermissions={this.props.ownedPermissions}
             onPermissionChangedHandler={this.onChangeUserPermission}
           />
         </td>
@@ -70,7 +70,7 @@ class UserList extends React.Component {
             <UserItem 
               key={index} 
               item={item} 
-              permissions={this.props.permissions}
+              ownedPermissions={this.props.ownedPermissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
             />
@@ -98,9 +98,9 @@ class ShareToUser extends React.Component {
       sharedItems: []
     };
     this.options = [];
-    this.permissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
+    this.ownedPermissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
     if (this.props.isGroupOwnedRepo) {
-      this.permissions = ['rw', 'r'];
+      this.ownedPermissions = ['rw', 'r'];
     }
   }
 
@@ -287,8 +287,8 @@ class ShareToUser extends React.Component {
             <td>
               <PermissionEditor 
                 isTextMode={false}
-                permission={this.state.permission}
-                permissions={this.permissions}
+                currentPermission={this.state.permission}
+                ownedPermissions={this.ownedPermissions}
                 onPermissionChangedHandler={this.setPermission}
               />
             </td>
@@ -314,7 +314,7 @@ class ShareToUser extends React.Component {
         </thead>
         <UserList 
           items={sharedItems}
-          permissions={this.permissions}
+          ownedPermissions={this.ownedPermissions}
           deleteShareItem={this.deleteShareItem} 
           onChangeUserPermission={this.onChangeUserPermission}
         />
diff --git a/frontend/src/components/permission-editor.js b/frontend/src/components/permission-editor.js
index 1cbf62263d..b1eecdcbdb 100644
--- a/frontend/src/components/permission-editor.js
+++ b/frontend/src/components/permission-editor.js
@@ -5,8 +5,8 @@ import { Input } from 'reactstrap';
 
 const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
-  permission: PropTypes.string.isRequired,
-  permissions: PropTypes.array.isRequired,
+  currentPermission: PropTypes.string.isRequired,
+  ownedPermissions: PropTypes.array.isRequired,
   onPermissionChangedHandler: PropTypes.func.isRequired,
 };
 
@@ -35,7 +35,7 @@ class PermissionEditor extends React.Component {
   onPermissionChangedHandler = (e) => {
     e.nativeEvent.stopImmediatePropagation();
     let permission = e.target.value;
-    if (permission !== this.props.permission) {
+    if (permission !== this.props.currentPermission) {
       this.props.onPermissionChangedHandler(permission);
     }
     this.setState({isEditing: false});
@@ -50,7 +50,7 @@ class PermissionEditor extends React.Component {
   }
 
   render() {
-    let { permission, permissions, isTextMode } = this.props;
+    let { currentPermission, ownedPermissions, isTextMode } = this.props;
 
     // scence1: isTextMode (text)editor-icon --> select
     // scence2: !isTextMode select
@@ -64,8 +64,8 @@ class PermissionEditor extends React.Component {
     return (
       <div className="permission-editor">
         {(!isTextMode || this.state.isEditing) &&
-          <Input style={selectStyle} type="select" onChange={this.onPermissionChangedHandler} onClick={this.onSelectHandler} value={permission}>
-            {permissions.map((item, index) => {
+          <Input style={selectStyle} type="select" onChange={this.onPermissionChangedHandler} onClick={this.onSelectHandler} value={currentPermission}>
+            {ownedPermissions.map((item, index) => {
               return (
                 <option key={index} value={item}>{Utils.sharePerms(item)}</option>
               )
@@ -74,7 +74,7 @@ class PermissionEditor extends React.Component {
         }
         {(isTextMode && !this.state.isEditing) &&
           <div>
-            {Utils.sharePerms(permission)}
+            {Utils.sharePerms(currentPermission)}
             <span style={{fontSize: '0.875rem', marginLeft: '0.5rem'}} className="fa fa-pencil op-icon" onClick={this.onEidtPermission}></span>
           </div>
         }