Show inactive users warning

CHANGELOG.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Added a button for refreshing the dataset in the backend cache. [#2975](https://github.com/scalableminds/webknossos/pull/2975)
 - All dates in webknossos will be shown in the browser's timezone. On hover, a tooltip will show the date in UTC. [#2916](https://github.com/scalableminds/webknossos/pull/2916) ![image](https://user-images.githubusercontent.com/2486553/42888385-74c82bc0-8aa8-11e8-9c3e-7cfc90ce93bc.png)
 - When merging datasets within a tracing via the merge-modal, the user can choose whether the merge should be executed directly in the currently opened tracing. Alternatively, a new annotation can be created which is accessible via the dashboard (as it has been before).
+- Added a banner to the user list to notify admins of new inactive users that need to be activated. [#2994](https://github.com/scalableminds/webknossos/pull/2994)
 - When a lot of changes need to be persisted to the server (e.g., after importing a large NML), the save button will show a percentage-based progress indicator.
 - Added placeholders and functionality hints to (nearly) empty lists and tables in the admin views. [#2969](https://github.com/scalableminds/webknossos/pull/2969)
 - Added the possibility to import multiple NML files into the active tracing. This can be done by dragging and dropping the files directly into the tracing view. [#2908](https://github.com/scalableminds/webknossos/pull/2908)            

app/assets/javascripts/admin/api_flow_types.js

@@ -98,6 +98,7 @@ export type APITeamMembershipType = {
 export type ExperienceMapType = { +[string]: number };
 
 export type APIUserBaseType = {
+  +created: number,
   +email: string,
   +firstName: string,
   +lastName: string,

app/assets/javascripts/admin/user/user_list_view.js

@@ -3,9 +3,10 @@
 
 import _ from "lodash";
 import * as React from "react";
+import moment from "moment";
 import { connect } from "react-redux";
 import { Link, withRouter } from "react-router-dom";
-import { Table, Tag, Icon, Spin, Button, Input, Modal, Alert } from "antd";
+import { Table, Tag, Icon, Spin, Button, Input, Modal, Alert, Row, Col, Tooltip } from "antd";
 import TeamRoleModalView from "admin/user/team_role_modal_view";
 import ExperienceModalView from "admin/user/experience_modal_view";
 import TemplateHelpers from "libs/template_helpers";
@@ -168,6 +169,50 @@ class UserListView extends React.PureComponent<Props, State> {
     }
   };
 
+  renderNewUsersAlert() {
+    const now = moment();
+    const newInactiveUsers = this.state.users.filter(
+      user => !user.isActive && moment.duration(now.diff(user.created)).asDays() <= 14,
+    );
+
+    const newInactiveUsersHeader = (
+      <React.Fragment>
+        There are new inactive users{" "}
+        <Tooltip
+          title="The displayed users are inactive and were created in the past 14 days."
+          placement="right"
+        >
+          <Icon type="info-circle" />
+        </Tooltip>
+      </React.Fragment>
+    );
+    const newInactiveUsersList = (
+      <React.Fragment>
+        {newInactiveUsers.map(user => (
+          <Row key={user.id} gutter={16}>
+            <Col span={6}>{`${user.firstName} ${user.lastName} (${user.email}) `}</Col>
+            <Col span={4}>
+              <a href="#" onClick={() => this.activateUser(user)}>
+                <Icon type="user-add" />Activate User
+              </a>
+            </Col>
+          </Row>
+        ))}
+      </React.Fragment>
+    );
+
+    return newInactiveUsers.length ? (
+      <Alert
+        message={newInactiveUsersHeader}
+        description={newInactiveUsersList}
+        type="info"
+        iconType="user"
+        showIcon
+        style={{ marginTop: 20 }}
+      />
+    ) : null;
+  }
+
   renderPlaceholder() {
     const noUsersMessage = (
       <React.Fragment>
@@ -176,14 +221,11 @@ class UserListView extends React.PureComponent<Props, State> {
         {" to join your organization. After the users joined, you need to activate them manually."}
       </React.Fragment>
     );
-    const inactiveUsersMessage =
-      'There are users that have not been activated yet. Make sure the "Show Active Users Only" tag is removed to show those users and activate them.';
-    const inactiveUsersPresent = this.state.users.filter(user => !user.isActive).length > 0;
 
     return this.state.isLoading ? null : (
       <Alert
-        message={inactiveUsersPresent ? "Activate users" : "Invite more users"}
-        description={inactiveUsersPresent ? inactiveUsersMessage : noUsersMessage}
+        message="Invite more users"
+        description={noUsersMessage}
         type="info"
         showIcon
         style={{ marginTop: 20 }}
@@ -209,7 +251,7 @@ class UserListView extends React.PureComponent<Props, State> {
     ) : null;
 
     const marginRight = { marginRight: 20 };
-    const lessThanOneActiveUser = this.state.users.filter(user => user.isActive).length < 2;
+    const noOtherUsers = this.state.users.length < 2;
 
     return (
       <div className="container test-UserListView">
@@ -271,7 +313,8 @@ class UserListView extends React.PureComponent<Props, State> {
           value={this.state.searchQuery}
         />
 
-        {lessThanOneActiveUser ? this.renderPlaceholder() : null}
+        {noOtherUsers ? this.renderPlaceholder() : null}
+        {this.renderNewUsersAlert()}
 
         <Spin size="large" spinning={this.state.isLoading}>
           <Table

app/assets/javascripts/test/fixtures/tasktracing_server_objects.js

@@ -85,6 +85,7 @@ export const annotation: APIAnnotationType = {
   tracingTime: null,
   tags: ["ROI2017_wkw", "skeleton"],
   user: {
+    created: 12345678,
     id: "5b1e45faa00000a900abc2c5",
     email: "[email protected]",
     firstName: "SCM",