['Files' page] improved empty tips (#6088)

frontend/src/css/files.css

@@ -2,4 +2,11 @@
   text-align: left!important;
   padding-left: 20px;
 }
+
+#files-content-container .libraries-empty-tip {
+  color: #a4a4a4;
+  text-align: center;
+  padding: 4px 0;
+  border-bottom: 1px solid #e8e8e8;
+}
   

frontend/src/pages/libraries/index.js

@@ -8,7 +8,6 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Group from '../../models/group';
 import Loading from '../../components/loading';
-import EmptyTip from '../../components/empty-tip';
 import TopToolbar from '../../components/toolbar/top-toolbar';
 import MyLibsToolbar from '../../components/toolbar/my-libs-toolbar';
 import GroupsToolbar from '../../components/toolbar/groups-toolbar';
@@ -193,22 +192,6 @@ class Libraries extends Component {
   };
 
   render() {
-    const emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No libraries')}</h2>
-        <p>{gettext('You have not created any libraries yet. A library is a container to organize your files and folders. A library can also be shared with others and synced to your connected devices. You can create a library by clicking the "New Library" button in the menu bar.')}</p>
-      </EmptyTip>
-    );
-
-    const groupsEmptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No groups')}</h2>
-        {canAddGroup ?
-          <p>{gettext('You are not in any groups. Groups allow multiple people to collaborate on libraries. You can create a group by clicking the "New Group" button in the menu bar.')}</p> :
-          <p>{gettext('You are not in any groups. Groups allow multiple people to collaborate on libraries. Groups you join will be listed here.')}</p>
-        }
-      </EmptyTip>
-    );
 
     return (
       <Fragment>
@@ -253,7 +236,9 @@ class Libraries extends Component {
                   </div>
                   {this.state.isLoading ? <Loading /> : (
                     this.state.errorMsg ? <p className="error text-center mt-8">{this.state.errorMsg}</p> : (
-                      this.state.repoList.length === 0 ? emptyTip : (
+                      this.state.repoList.length === 0 ? (
+                        <p className="libraries-empty-tip">{gettext('No libraries')}</p>
+                      ) : (
                         <MylibRepoListView
                           sortBy={this.state.sortBy}
                           sortOrder={this.state.sortOrder}
@@ -283,7 +268,7 @@ class Libraries extends Component {
               <div className="group-list-panel">
                 {this.state.isGroupsLoading? <Loading /> : (
                   this.state.groupsErrorMsg ? <p className="error text-center mt-8">{this.state.groupsErrorMsg}</p> : (
-                    this.state.groupList.length === 0 ? groupsEmptyTip : (
+                    this.state.groupList.length > 0 && (
                       this.state.groupList.map((group, index) => {
                         return (
                           <GroupItem

frontend/src/pages/shared-libs/shared-libs.js

@@ -54,14 +54,14 @@ class Content extends Component {
   };
 
   render() {
-    const { loading, errorMsg, items, sortBy, sortOrder, theadHidden } = this.props;
+    const { loading, errorMsg, items, sortBy, sortOrder, theadHidden, inAllLibs } = this.props;
 
-    const emptyTip = (
+    const emptyTip = inAllLibs ?
+      <p className="libraries-empty-tip">{gettext('No shared libraries')}</p> :
       <EmptyTip>
         <h2>{gettext('No shared libraries')}</h2>
         <p>{gettext('No libraries have been shared directly with you. A shared library can be shared with full or restricted permission. If you need access to a library owned by another user, ask the user to share the library with you.')}</p>
-      </EmptyTip>
+      </EmptyTip>;
-    );
 
     if (loading) {
       return <Loading />;
@@ -113,6 +113,7 @@ class Content extends Component {
 }
 
 Content.propTypes = {
+  inAllLibs: PropTypes.bool.isRequired,
   theadHidden: PropTypes.bool.isRequired,
   loading: PropTypes.bool.isRequired,
   errorMsg: PropTypes.string.isRequired,
@@ -460,6 +461,7 @@ class SharedLibraries extends Component {
         sortItems={this.sortItems}
         onMonitorRepo={this.onMonitorRepo}
         theadHidden={inAllLibs}
+        inAllLibs={inAllLibs}
       />
     );
   };

frontend/src/pages/shared-with-all/index.js

@@ -110,14 +110,15 @@ class PublicSharedView extends React.Component {
   };
 
   renderContent = () => {
-    const { errMessage } = this.state;
-    const emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No public libraries')}</h2>
-        <p>{gettext('No public libraries have been created yet. A public library is accessible by all users. You can create a public library by clicking the "Add Library" button in the menu bar.')}</p>
-      </EmptyTip>
-    );
     const { inAllLibs = false } = this.props; // inAllLibs: in 'All Libs'('Files') page
+    const { errMessage } = this.state;
+    const emptyTip = inAllLibs ?
+      <p className="libraries-empty-tip">{gettext('No public libraries')}</p> : (
+        <EmptyTip>
+          <h2>{gettext('No public libraries')}</h2>
+          <p>{gettext('No public libraries have been created yet. A public library is accessible by all users. You can create a public library by clicking the "Add Library" button in the menu bar.')}</p>
+        </EmptyTip>
+      );
     return (
       <>
         {this.state.isLoading && <Loading />}