share wiki (#6413)

* share wiki

update leave and return

update get group info

* format optimize

* Update wikis.js

* Update wiki2.py

* fix empty group_wikis

* update

* remove-useless-code

* add-owner-nickname

* Update wiki2.py

* Update wiki2.py

* Update wiki2.py

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: r350178982 <32759763+r350178982@users.noreply.github.com>

frontend/src/components/dialog/share-to-group.js

@@ -113,6 +113,7 @@ const propTypes = {
   itemPath: PropTypes.string.isRequired,
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
+  repoType: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
   onAddCustomPermissionToggle: PropTypes.func,
 };
@@ -126,7 +127,8 @@ class ShareToGroup extends React.Component {
       selectedOption: null,
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isWiki: this.props.repoType === 'wiki'
     };
     this.permissions = [];
     let { itemType, isRepoOwner } = props;
@@ -141,6 +143,9 @@ class ShareToGroup extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
     }
+    if (this.state.isWiki) {
+      this.permissions = ['rw', 'r'];
+    }
   }
 
   handleSelectChange = (option) => {
@@ -344,6 +349,7 @@ class ShareToGroup extends React.Component {
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
                   enableAddCustomPermission={isPro}
+                  isWiki={this.state.isWiki}
                   onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>

frontend/src/components/dialog/share-to-user.js

@@ -154,6 +154,7 @@ const propTypes = {
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  repoType: PropTypes.string.isRequired,
   onAddCustomPermissionToggle: PropTypes.func,
 };
 
@@ -165,7 +166,8 @@ class ShareToUser extends React.Component {
       selectedOption: null,
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isWiki: this.props.repoType === 'wiki'
     };
     this.options = [];
     this.permissions = [];
@@ -181,6 +183,9 @@ class ShareToUser extends React.Component {
     if (this.props.isGroupOwnedRepo) {
       this.permissions = ['rw', 'r', 'cloud-edit', 'preview'];
     }
+    if (this.state.isWiki) {
+      this.permissions = ['rw', 'r'];
+    }
   }
 
   handleSelectChange = (option) => {
@@ -370,6 +375,7 @@ class ShareToUser extends React.Component {
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
                   enableAddCustomPermission={isPro}
+                  isWiki={this.state.isWiki}
                   onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>

frontend/src/components/dialog/share-wiki-dialog.js

@@ -0,0 +1,174 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
+import { gettext, username, additionalShareDialogNote, canShareRepo } from '../../utils/constants';
+import ShareToUser from './share-to-user';
+import ShareToGroup from './share-to-group';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import Loading from '../loading';
+import toaster from '../toast';
+
+import '../../css/share-link-dialog.css';
+
+const propTypes = {
+  isGroupOwnedRepo: PropTypes.bool,
+  itemType: PropTypes.string.isRequired, // there will be three choose: ['library', 'dir', 'file']
+  itemName: PropTypes.string.isRequired,
+  itemPath: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  repoEncrypted: PropTypes.bool,
+  enableDirPrivateShare: PropTypes.bool,
+};
+
+class ShareWikiDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeTab: 'shareToUser',
+      isRepoJudgemented: false,
+      isRepoOwner: false,
+      isGroupOwnedRepo: false,
+    };
+  }
+
+  componentDidMount() {
+    let repoID = this.props.repoID;
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      const isGroupOwnedRepo = res.data.owner_email.indexOf('@seafile_group') > -1;
+      let isRepoOwner = res.data.owner_email === username;
+      this.setState({
+        isRepoJudgemented: true,
+        isRepoOwner: isRepoOwner,
+        repoType: res.data.repo_type,
+        isGroupOwnedRepo: isGroupOwnedRepo,
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  toggle = (tab) => {
+    if (this.state.activeTab !== tab) {
+      this.setState({ activeTab: tab });
+    }
+  };
+
+  onAddCustomPermissionToggle = () => {
+    this.toggle('customSharePermission');
+  };
+
+  renderDirContent = () => {
+
+    if (!this.state.isRepoJudgemented) {
+      return <Loading />;
+    }
+
+    let activeTab = this.state.activeTab;
+    let { repoEncrypted, enableDirPrivateShare, itemType } = this.props;
+    if (repoEncrypted) {
+      enableDirPrivateShare = itemType == 'library';
+    }
+    return (
+      <Fragment>
+        <div className="share-dialog-side">
+          <Nav pills>
+            {enableDirPrivateShare &&
+              <Fragment>
+                { canShareRepo && (
+                  <NavItem role="tab" aria-selected={activeTab === 'shareToUser'} aria-controls="share-to-user-panel">
+                    <NavLink className={activeTab === 'shareToUser' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToUser')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
+                      {gettext('Share to user')}
+                    </NavLink>
+                  </NavItem>
+                )}
+                { canShareRepo && (
+                  <NavItem role="tab" aria-selected={activeTab === 'shareToGroup'} aria-controls="share-to-group-panel">
+                    <NavLink className={activeTab === 'shareToGroup' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareToGroup')} tabIndex="0" onKeyDown={this.onTabKeyDown}>
+                      {gettext('Share to group')}
+                    </NavLink>
+                  </NavItem>
+                )}
+              </Fragment>
+            }
+          </Nav>
+        </div>
+        <div className="share-dialog-main">
+          <TabContent activeTab={this.state.activeTab}>
+            {enableDirPrivateShare &&
+              <Fragment>
+                {(activeTab === 'shareToUser' && canShareRepo) &&
+                  <TabPane tabId="shareToUser" role="tabpanel" id="share-to-user-panel">
+                    <ShareToUser
+                      itemType={this.props.itemType}
+                      isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+                      itemPath={this.props.itemPath}
+                      repoID={this.props.repoID}
+                      isRepoOwner={this.state.isRepoOwner}
+                      repoType={this.state.repoType}
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
+                  </TabPane>
+                }
+                {(activeTab === 'shareToGroup' && canShareRepo) &&
+                  <TabPane tabId="shareToGroup" role="tabpanel" id="share-to-group-panel">
+                    <ShareToGroup
+                      itemType={this.props.itemType}
+                      isGroupOwnedRepo={this.state.isGroupOwnedRepo}
+                      itemPath={this.props.itemPath}
+                      repoID={this.props.repoID}
+                      isRepoOwner={this.state.isRepoOwner}
+                      repoType={this.state.repoType}
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
+                  </TabPane>
+                }
+              </Fragment>
+            }
+          </TabContent>
+        </div>
+      </Fragment>
+    );
+  };
+
+  onTabKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }
+  };
+
+  renderExternalShareMessage = () => {
+    if (additionalShareDialogNote && (typeof additionalShareDialogNote) === 'object') {
+      return (
+        <div className="external-share-message mt-2">
+          <h6>{additionalShareDialogNote.title}</h6>
+          <p style={{ fontSize: '14px', color: '#666' }} className="text-wrap m-0">{additionalShareDialogNote.content}</p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { itemType, itemName } = this.props;
+    return (
+      <div>
+        <Modal isOpen={true} style={{ maxWidth: '760px' }} className="share-dialog" toggle={this.props.toggleDialog}>
+          <ModalHeader toggle={this.props.toggleDialog} tag="div">
+            <h5 className="text-truncate">{gettext('Share')} <span className="op-target" title={itemName}>{itemName}</span></h5>
+            {this.renderExternalShareMessage()}
+          </ModalHeader>
+          <ModalBody className="share-dialog-content" role="tablist">
+            {(itemType === 'library') && this.renderDirContent()}
+          </ModalBody>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ShareWikiDialog.propTypes = propTypes;
+
+export default ShareWikiDialog;

frontend/src/components/select-editor/select-editor.js

@@ -9,6 +9,7 @@ const propTypes = {
   isTextMode: PropTypes.bool.isRequired, // there will be two mode. first: text and select. second: just select
   isEditing: PropTypes.bool,
   isEditIconShow: PropTypes.bool.isRequired,
+  isWiki: PropTypes.bool,
   autoFocus: PropTypes.bool,
   options: PropTypes.array.isRequired,
   currentOption: PropTypes.string.isRequired,
@@ -56,7 +57,7 @@ class SelectEditor extends React.Component {
     }
 
     const { enableAddCustomPermission } = this.props;
-    if (enableAddCustomPermission) {
+    if (enableAddCustomPermission && !this.props.isWiki) {
       const option = {
         value: gettext('Add custom permission'),
         isDisabled: true,

frontend/src/components/select-editor/share-permission-editor.js

@@ -11,6 +11,7 @@ const propTypes = {
   repoID: PropTypes.string,
   isTextMode: PropTypes.bool.isRequired,
   isEditing: PropTypes.bool,
+  isWiki: PropTypes.bool,
   autoFocus: PropTypes.bool,
   isEditIconShow: PropTypes.bool.isRequired,
   permissions: PropTypes.array.isRequired,
@@ -136,6 +137,7 @@ class SharePermissionEditor extends React.Component {
         translateOption={this.translatePermission}
         translateExplanation={this.translateExplanation}
         enableAddCustomPermission={this.props.enableAddCustomPermission}
+        isWiki={this.props.isWiki}
         onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
       />
     );

frontend/src/components/wiki-card-view/wiki-card-group.js

@@ -7,7 +7,9 @@ import { SIDE_PANEL_FOLDED_WIDTH } from '../../constants';
 
 const propTypes = {
   wikis: PropTypes.array.isRequired,
+  group: PropTypes.object,
   deleteWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   isDepartment: PropTypes.bool.isRequired,
   isShowAvatar: PropTypes.bool.isRequired,
@@ -48,23 +50,39 @@ class WikiCardGroup extends Component {
   };
 
   render() {
-    const { wikis, title, isDepartment, toggelAddWikiDialog } = this.props;
+    const { wikis, title, isDepartment, toggelAddWikiDialog, group } = this.props;
     const containerWidth = this.getContainerWidth();
     const numberOfWiki = Math.floor(containerWidth / 180);
     const grids = (Math.floor((containerWidth - (numberOfWiki + 1) * 16) / numberOfWiki) + 'px ').repeat(numberOfWiki);
+    let isGroup = false;
+    let depIcon = false;
+    if (group) {
+      isGroup = true;
+      depIcon = group.owner === 'system admin';
+    }
     return (
       <div className='wiki-card-group mb-4'>
         <h4 className="sf-heading">
-          <span className={`sf3-font nav-icon sf3-font-${isDepartment ? 'department' : 'mine'}`} aria-hidden="true"></span>
+          <span className={`sf3-font nav-icon sf3-font-${(isDepartment && depIcon) ? 'department' : isDepartment ? 'group' : 'mine'}`} aria-hidden="true"></span>
           {title}
         </h4>
         <div className='wiki-card-group-items' style={{ gridTemplateColumns: isMobile ? '48% 48%' : grids }} ref={this.groupItemsRef}>
           {wikis.map((wiki, index) => {
-            return (
+            return (isGroup ?
               <WikiCardItem
+                key={index + wiki.id + wiki.name}
+                group={group}
+                wiki={wiki}
+                deleteWiki={this.props.deleteWiki}
+                unshareGroupWiki={this.props.unshareGroupWiki}
+                isDepartment={isDepartment}
+                isShowAvatar={this.props.isShowAvatar}
+                renameWiki={this.props.renameWiki}
+              /> : <WikiCardItem
                 key={index + wiki.id + wiki.name}
                 wiki={wiki}
                 deleteWiki={this.props.deleteWiki}
+                unshareGroupWiki={this.props.unshareGroupWiki}
                 isDepartment={isDepartment}
                 isShowAvatar={this.props.isShowAvatar}
                 renameWiki={this.props.renameWiki}

frontend/src/components/wiki-card-view/wiki-card-item.js

@@ -2,14 +2,17 @@ import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { siteRoot, gettext } from '../../utils/constants';
+import { siteRoot, gettext, username } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
 import DeleteWikiDialog from '../dialog/delete-wiki-dialog';
 import RenameWikiDialog from '../dialog/rename-wiki-dialog';
+import ShareWikiDialog from '../dialog/share-wiki-dialog';
 
 const propTypes = {
   wiki: PropTypes.object.isRequired,
+  group: PropTypes.object,
   deleteWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   renameWiki: PropTypes.func.isRequired,
   isDepartment: PropTypes.bool.isRequired,
   isShowAvatar: PropTypes.bool.isRequired,
@@ -22,6 +25,7 @@ class WikiCardItem extends Component {
       isShowDeleteDialog: false,
       isShowRenameDialog: false,
       isItemMenuShow: false,
+      isShowShareDialog: false,
     };
   }
 
@@ -31,6 +35,12 @@ class WikiCardItem extends Component {
     });
   };
 
+  onShareToggle = (e) => {
+    this.setState({
+      isShowShareDialog: !this.state.isShowShareDialog,
+    });
+  };
+
   onDeleteToggle = (e) => {
     e.preventDefault();
     this.setState({
@@ -52,6 +62,14 @@ class WikiCardItem extends Component {
     });
   };
 
+  onItemUnshare = () => {
+    let wiki = this.props.wiki;
+    this.props.unshareGroupWiki(wiki, this.props.group.group_id);
+    this.setState({
+      isShowDeleteDialog: !this.state.isShowDeleteDialog,
+    });
+  };
+
   renameWiki = (newName) => {
     if (this.props.wiki.name !== newName) {
       this.props.renameWiki(this.props.wiki, newName);
@@ -94,10 +112,49 @@ class WikiCardItem extends Component {
 
   render() {
     const { wiki, isDepartment, isShowAvatar } = this.props;
+    let isAdmin = false;
+    if (wiki.admins) {
+      isAdmin = wiki.admins.includes(username);
+    }
+    let isGroupOwner = false;
+    if (this.props.group) {
+      isGroupOwner = wiki.owner.split('@')[0] === this.props.group.group_id.toString();
+    }
+    let isWikiOwner = username === wiki.owner;
     let isOldVersion = wiki.version !== 'v2';
     let publishedUrl = `${siteRoot}published/${encodeURIComponent(wiki.slug)}/`;
     let editUrl = `${siteRoot}wikis/${wiki.id}/`;
     let wikiName = isOldVersion ? `${wiki.name} (old version)` : wiki.name;
+    let showRename = false;
+    let showShare = false;
+    let showDelete = false;
+    let showLeaveShare = false;
+    let showDropdownMenu = false;
+
+    if (isDepartment) {
+      if (isAdmin) {
+        if (isGroupOwner) {
+          showDelete = true;
+          showShare = true;
+          showRename = true;
+        } else {
+          showLeaveShare = true;
+        }
+      }
+    } else {
+      if (isAdmin || isWikiOwner) {
+        showShare = true;
+        showDelete = true;
+        showRename = true;
+      } else {
+        showLeaveShare = true;
+      }
+    }
+
+    if (isOldVersion || showRename || showShare || showDelete || showLeaveShare) {
+      showDropdownMenu = true;
+    }
+
     return (
       <>
         <div
@@ -106,28 +163,38 @@ class WikiCardItem extends Component {
         >
           <div className="wiki-card-item-top">
             <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
-            <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleDropDownMenu} onClick={this.onClickDropdown}>
-              <DropdownToggle
-                tag="i"
-                role="button"
-                tabIndex="0"
-                className="sf-dropdown-toggle sf3-font-more sf3-font"
-                title={gettext('More operations')}
-                aria-label={gettext('More operations')}
-                data-toggle="dropdown"
-                aria-expanded={this.state.isItemMenuShow}
-                aria-haspopup={true}
-                style={{ 'minWidth': '0' }}
-              />
-              <DropdownMenu right={true} className="dtable-dropdown-menu">
-                <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
-                {isOldVersion ?
-                  <DropdownItem onClick={this.onDeleteToggle}>{gettext('Unpublish')}</DropdownItem>
-                  :
-                  <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem>
-                }
-              </DropdownMenu>
-            </Dropdown>
+            {showDropdownMenu &&
+              <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleDropDownMenu} onClick={this.onClickDropdown}>
+                <DropdownToggle
+                  tag="i"
+                  role="button"
+                  tabIndex="0"
+                  className="sf-dropdown-toggle sf3-font-more sf3-font"
+                  title={gettext('More operations')}
+                  aria-label={gettext('More operations')}
+                  data-toggle="dropdown"
+                  aria-expanded={this.state.isItemMenuShow}
+                  aria-haspopup={true}
+                  style={{ 'minWidth': '0' }}
+                />
+                <DropdownMenu right={true} className="dtable-dropdown-menu">
+                  {showRename &&
+                    <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>}
+                  {showShare &&
+                    <DropdownItem onClick={this.onShareToggle}>{gettext('Share')}</DropdownItem>
+                  }
+                  {isOldVersion &&
+                    <DropdownItem onClick={this.onDeleteToggle}>{gettext('Unpublish')}</DropdownItem>
+                  }
+                  {showDelete &&
+                    <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem>
+                  }
+                  {showLeaveShare &&
+                    <DropdownItem onClick={this.onDeleteToggle}>{gettext('Leave')}</DropdownItem>
+                  }
+                </DropdownMenu>
+              </Dropdown>
+            }
           </div>
           <div className="wiki-item-name text-truncate" title={wikiName} aria-label={wikiName}>{wikiName}</div>
           <div className="wiki-item-owner">
@@ -137,22 +204,41 @@ class WikiCardItem extends Component {
         </div>
         {this.state.isShowDeleteDialog &&
           <ModalPortal>
-            {isOldVersion ?
+            {isOldVersion &&
               <DeleteWikiDialog
                 toggleCancel={this.onDeleteCancel}
                 handleSubmit={this.deleteWiki}
                 title={gettext('Unpublish Wiki')}
                 content={<p>{gettext('Are you sure you want to unpublish Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
                 footer={gettext('Unpublish')}
-              />
-              :
+              />}
+            {(isDepartment && isGroupOwner) ?
               <DeleteWikiDialog
                 toggleCancel={this.onDeleteCancel}
                 handleSubmit={this.deleteWiki}
                 title={gettext('Delete Wiki')}
                 content={<p>{gettext('Are you sure you want to delete Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
                 footer={gettext('Delete')}
+              /> : isDepartment ? <DeleteWikiDialog
+                toggleCancel={this.onDeleteCancel}
+                handleSubmit={this.onItemUnshare}
+                title={gettext('Leave Share Wiki')}
+                content={<p>{gettext('Are you sure you want to leave share Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                footer={gettext('Leave')}
+              /> : (isWikiOwner ? <DeleteWikiDialog
+                toggleCancel={this.onDeleteCancel}
+                handleSubmit={this.deleteWiki}
+                title={gettext('Delete Wiki')}
+                content={<p>{gettext('Are you sure you want to delete Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                footer={gettext('Delete')}
+              /> : <DeleteWikiDialog
+                toggleCancel={this.onDeleteCancel}
+                handleSubmit={this.deleteWiki}
+                title={gettext('Leave Share Wiki')}
+                content={<p>{gettext('Are you sure you want to leave share Wiki')}{' '}<b>{wiki.name}</b> ?</p>}
+                footer={gettext('Leave')}
               />
+              )
             }
           </ModalPortal>
         }
@@ -165,6 +251,19 @@ class WikiCardItem extends Component {
             />
           </ModalPortal>
         }
+        {this.state.isShowShareDialog &&
+          <ModalPortal>
+            <ShareWikiDialog
+              itemType={'library'}
+              itemName={wiki.name}
+              itemPath={'/'}
+              repoID={wiki.repo_id}
+              repoEncrypted={ false }
+              enableDirPrivateShare={true}
+              toggleDialog={this.onShareToggle}
+            />
+          </ModalPortal>
+        }
       </>
     );
   }

frontend/src/components/wiki-card-view/wiki-card-view.js

@@ -12,6 +12,8 @@ const propTypes = {
   data: PropTypes.object.isRequired,
   deleteWiki: PropTypes.func.isRequired,
   renameWiki: PropTypes.func.isRequired,
+  leaveSharedWiki: PropTypes.func.isRequired,
+  unshareGroupWiki: PropTypes.func.isRequired,
   toggelAddWikiDialog: PropTypes.func,
   sidePanelRate: PropTypes.number,
   isSidePanelFolded: PropTypes.bool,
@@ -30,7 +32,7 @@ class WikiCardView extends Component {
     if (!canPublishRepo || !isPro) return;
     let departmentMap = {};
     wikiAPI.listWikiDepartments().then(res => {
-      res.data.forEach(item => departmentMap[item.email] = true);
+      res.data.forEach(item => departmentMap[item.id] = true);
       this.setState({ departmentMap });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
@@ -41,12 +43,15 @@ class WikiCardView extends Component {
   classifyWikis = (wikis) => {
     let v1Wikis = [];
     let myWikis = [];
+    let sharedWikis = [];
     let department2WikisMap = {};
     for (let i = 0; i < wikis.length; i++) {
       if (wikis[i].version === 'v1') {
         v1Wikis.push(wikis[i]);
       } else if (wikis[i].owner === username) {
         myWikis.push(wikis[i]);
+      } else if (wikis[i].type === 'shared') {
+        sharedWikis.push(wikis[i]);
       } else {
         if (!department2WikisMap[wikis[i].owner]) {
           department2WikisMap[wikis[i].owner] = [];
@@ -54,11 +59,12 @@ class WikiCardView extends Component {
         department2WikisMap[wikis[i].owner].push(wikis[i]);
       }
     }
-    return { department2WikisMap, myWikis, v1Wikis };
+    return { department2WikisMap, myWikis, v1Wikis, sharedWikis };
   };
 
+
   render() {
-    let { loading, errorMsg, wikis } = this.props.data;
+    let { loading, errorMsg, wikis, groupWikis } = this.props.data;
     const { toggelAddWikiDialog, sidePanelRate, isSidePanelFolded } = this.props;
 
     if (loading) {
@@ -67,13 +73,14 @@ class WikiCardView extends Component {
     if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
     }
-    const { v1Wikis, myWikis, department2WikisMap } = this.classifyWikis(wikis);
+    const { v1Wikis, myWikis, sharedWikis } = this.classifyWikis(wikis);
     let wikiCardGroups = [];
     wikiCardGroups.push(
       <WikiCardGroup
         key='my-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
         sidePanelRate={sidePanelRate}
         isSidePanelFolded={isSidePanelFolded}
         wikis={myWikis}
@@ -83,19 +90,37 @@ class WikiCardView extends Component {
         toggelAddWikiDialog={canPublishRepo ? toggelAddWikiDialog.bind(this, null) : null}
       />
     );
-    for (let deptEmail in department2WikisMap) {
+    wikiCardGroups.push(
+      <WikiCardGroup
+        key='shared-Wikis'
+        deleteWiki={this.props.leaveSharedWiki}
+        renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
+        wikis={sharedWikis}
+        title={gettext('Shared with me')}
+        isDepartment={false}
+        isShowAvatar={false}
+        sidePanelRate={sidePanelRate}
+        isSidePanelFolded={isSidePanelFolded}
+        toggelAddWikiDialog={null}
+      />
+    );
+    for (let deptID in groupWikis) {
+      groupWikis[deptID].wiki_info.length !== 0 &&
       wikiCardGroups.push(
         <WikiCardGroup
-          key={'department-Wikis-' + deptEmail}
+          key={'group-Wikis-' + deptID}
           deleteWiki={this.props.deleteWiki}
+          unshareGroupWiki={this.props.unshareGroupWiki}
           renameWiki={this.props.renameWiki}
           sidePanelRate={sidePanelRate}
           isSidePanelFolded={isSidePanelFolded}
-          wikis={department2WikisMap[deptEmail]}
-          title={department2WikisMap[deptEmail][0].owner_nickname}
+          group={groupWikis[deptID]}
+          wikis={groupWikis[deptID].wiki_info}
+          title={groupWikis[deptID].group_name}
           isDepartment={true}
           isShowAvatar={false}
-          toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[deptEmail]) ? toggelAddWikiDialog.bind(this, deptEmail) : null}
+          toggelAddWikiDialog={(canPublishRepo && this.state.departmentMap[groupWikis[deptID]['group_id']]) ? toggelAddWikiDialog.bind(this, deptID) : null}
         />
       );
     }
@@ -104,6 +129,7 @@ class WikiCardView extends Component {
         key='old-Wikis'
         deleteWiki={this.props.deleteWiki}
         renameWiki={this.props.renameWiki}
+        unshareGroupWiki={this.props.unshareGroupWiki}
         isSidePanelFolded={isSidePanelFolded}
         sidePanelRate={sidePanelRate}
         wikis={v1Wikis}