added system notification (#3118)

frontend/src/app.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Router, navigate } from '@reach/router';
 import { siteRoot, canAddRepo } from './utils/constants';
 import { Utils } from './utils/utils';
+import SystemNotification from './components/system-notification';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
 import DraftsView from './pages/drafts/drafts-view';
@@ -178,47 +179,50 @@ class App extends Component {
       <SharedLibrariesWrapper path={ siteRoot } onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />;
 
     return (
-      <div id="main">
+      <React.Fragment>
-        <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
+        <SystemNotification />
-        <MainPanel>
+        <div id="main">
-          <Router>
+          <SidePanel isSidePanelClosed={this.state.isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} draftCounts={this.state.draftCounts} />
-            {home}
+          <MainPanel>
-            <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <Router>
-            <DraftsViewWrapper path={siteRoot + 'drafts'}  
+              {home}
-              onShowSidePanel={this.onShowSidePanel} 
+              <FilesActivitiesWrapper path={siteRoot + 'dashboard'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-              onSearchedClick={this.onSearchedClick} 
+              <DraftsViewWrapper path={siteRoot + 'drafts'}
-            >
+                onShowSidePanel={this.onShowSidePanel}
-              <DraftContent 
+                onSearchedClick={this.onSearchedClick}
-                path='/' 
+              >
-                getDrafts={this.getDrafts} 
+                <DraftContent
-                isLoadingDraft={this.state.isLoadingDraft}
+                  path='/'
-                draftList={this.state.draftList}
+                  getDrafts={this.getDrafts}
-                updateDraftsList={this.updateDraftsList}
+                  isLoadingDraft={this.state.isLoadingDraft}
+                  draftList={this.state.draftList}
+                  updateDraftsList={this.updateDraftsList}
+                />
+              </DraftsViewWrapper>
+              <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <ShareAdminShareLinksWrapper path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
+              <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
+              <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
+              <Group
+                path={siteRoot + 'group/:groupID'}
+                onShowSidePanel={this.onShowSidePanel}
+                onSearchedClick={this.onSearchedClick}
+                onTabNavClick={this.tabItemClick}
+                onGroupChanged={this.onGroupChanged}
               />
-            </DraftsViewWrapper>
+              <Wikis path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <StarredWrapper path={siteRoot + 'starred'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+              <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
-            <LinkedDevicesWrapper path={siteRoot + 'linked-devices'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            </Router>
-            <ShareAdminLibrariesWrapper path={siteRoot + 'share-admin-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+          </MainPanel>
-            <ShareAdminFoldersWrapper path={siteRoot + 'share-admin-folders'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+        </div>
-            <ShareAdminShareLinksWrapper path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+      </React.Fragment>
-            <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
-            <MyLibDeleted path={siteRoot + 'my-libs/deleted/'} onSearchedClick={this.onSearchedClick} />
-            <LibContentView path={siteRoot + 'library/:repoID/*'} pathPrefix={this.state.pathPrefix} onMenuClick={this.onShowSidePanel} onTabNavClick={this.tabItemClick}/>
-            <Groups path={siteRoot + 'groups'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <Group
-              path={siteRoot + 'group/:groupID'}
-              onShowSidePanel={this.onShowSidePanel}
-              onSearchedClick={this.onSearchedClick}
-              onTabNavClick={this.tabItemClick}
-              onGroupChanged={this.onGroupChanged}
-            />
-            <Wikis path={siteRoot + 'wikis'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick}/>
-            <PublicSharedView path={siteRoot + 'org/'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} onTabNavClick={this.tabItemClick}/>
-          </Router>
-        </MainPanel>
-      </div>
     );
   }
 }

frontend/src/components/system-notification.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { curNoteMsg, curNoteID, siteRoot, gettext } from '../utils/constants'; 
+
+import '../css/system-notification.css';
+
+class SystemNotification extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isClosed: false
+    };
+  }
+
+  close = () => {
+    this.setState({isClosed: true});
+
+    if (navigator.cookieEnabled) {
+      let date = new Date(),
+        cookies = document.cookie.split('; '),
+        infoIDExist = false,
+        newInfoID = curNoteID + '_';
+      date.setTime(date.getTime() + 14*24*60*60*1000);
+      newInfoID += '; expires=' + date.toGMTString() + '; path=' + siteRoot;
+      for (var i = 0, len = cookies.length; i < len; i++) {
+        if (cookies[i].split('=')[0] == 'info_id') {
+          infoIDExist = true;
+          document.cookie = 'info_id=' + cookies[i].split('=')[1] + newInfoID;
+          break;
+        }
+      }
+      if (!infoIDExist) {
+        document.cookie = 'info_id=' + newInfoID;
+      }
+    }
+  }
+  
+  render() {
+    if (!curNoteMsg || this.state.isClosed) {
+      return null;
+    }
+
+    return (
+      <div id="info-bar">
+        <p id="info-bar-info">{curNoteMsg}</p>
+        <span className="close sf2-icon-x1" title={gettext('Close')} onClick={this.close}></span>
+      </div>
+    );
+  }
+}
+
+export default SystemNotification;

frontend/src/css/system-notification.css

@@ -0,0 +1,22 @@
+#info-bar {
+    color: #1f0600;
+    padding: 4px 25px 4px 10px;
+    background: #fddaa4;
+    position: relative;
+}
+#info-bar .close {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    font-size: 16px;
+    line-height: 1;
+    color: #888;
+    cursor: pointer;
+}
+#info-bar-info {
+    margin: 0;
+}
+#info-bar-info a {
+    color: #a68558;
+    text-decoration: underline;
+}

frontend/src/utils/constants.js

@@ -44,6 +44,9 @@ export const isSystemStaff = window.app.pageOptions.isSystemStaff;
 export const thumbnailSizeForOriginal = window.app.pageOptions.thumbnailSizeForOriginal;
 export const repoPasswordMinLength = window.app.pageOptions.repoPasswordMinLength;
 
+export const curNoteMsg = window.app.pageOptions.curNoteMsg;
+export const curNoteID = window.app.pageOptions.curNoteID;
+
 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';
 export const repoID = window.wiki ? window.wiki.config.repoId : '';

seahub/templates/base_for_react.html

@@ -79,6 +79,11 @@
             isSystemStaff: {% if request.user.is_staff %} true {% else %} false {% endif %},
             thumbnailSizeForOriginal: {{ thumbnail_size_for_original }},
             repoPasswordMinLength: {{repo_password_min_length}},
+
+            {% if request.user.is_authenticated and request.cur_note %}
+            curNoteMsg: '{{ request.cur_note.message|urlize }}',
+            curNoteID: '{{ request.cur_note.id }}',
+            {% endif %}
         }
      };
 </script>