Show inactive task count (#1578)

* Show inactive task count

* Simplify logic

* Subtle polish on disabled index list rows

ui/src/clockface/components/index_views/IndexList.scss

@@ -96,6 +96,7 @@
   a:visited,
   a:hover,
   a:active {
+    transition: color 0.25s ease, opacity 0.25s ease;
     opacity: 0.7;
   }
 }
@@ -104,6 +105,13 @@
 .index-list--row.index-list--row-disabled:hover .index-list--row-cell .index-list--cell {
   background-color: rgba($g3-castle, 0.7);
   color: $g15-platinum;
+
+  a:link,
+  a:visited,
+  a:hover,
+  a:active {
+    opacity: 0.9;
+  }
 }
 
 // Empty state

ui/src/tasks/components/EmptyTasksList.tsx

@@ -13,11 +13,22 @@ import {
 interface Props {
   searchTerm: string
   onCreate: () => void
+  totalCount: number
 }
 
 export default class EmptyTasksLists extends PureComponent<Props> {
   public render() {
-    const {searchTerm, onCreate} = this.props
+    const {searchTerm, onCreate, totalCount} = this.props
+
+    if (totalCount && searchTerm === '') {
+      return (
+        <EmptyState size={ComponentSize.Large}>
+          <EmptyState.Text
+            text={`All ${totalCount} of your Tasks are inactive`}
+          />
+        </EmptyState>
+      )
+    }
 
     if (searchTerm === '') {
       return (
@@ -35,6 +46,7 @@ export default class EmptyTasksLists extends PureComponent<Props> {
         </EmptyState>
       )
     }
+
     return (
       <EmptyState size={ComponentSize.Large}>
         <EmptyState.Text text={'No tasks match your search term'} />

ui/src/tasks/components/TasksList.tsx

@@ -24,6 +24,7 @@ interface Props {
   onDelete: (task: Task) => void
   onCreate: () => void
   onSelect: (task: Task) => void
+  totalCount: number
 }
 
 type SortKey = keyof Task | 'organization.name'
@@ -43,7 +44,7 @@ export default class TasksList extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {searchTerm, onCreate, tasks} = this.props
+    const {searchTerm, onCreate, totalCount} = this.props
     const {sortKey, sortDirection} = this.state
 
     const headerKeys: SortKey[] = [
@@ -88,17 +89,15 @@ export default class TasksList extends PureComponent<Props, State> {
         </IndexList.Header>
         <IndexList.Body
           emptyState={
-            <EmptyTasksList searchTerm={searchTerm} onCreate={onCreate} />
+            <EmptyTasksList
+              searchTerm={searchTerm}
+              onCreate={onCreate}
+              totalCount={totalCount}
+            />
           }
           columnCount={5}
         >
-          <SortingHat<Task>
-            list={tasks}
-            sortKey={sortKey}
-            direction={sortDirection}
-          >
-            {this.rows}
-          </SortingHat>
+          {this.sortedRows}
         </IndexList.Body>
       </IndexList>
     )
@@ -125,4 +124,23 @@ export default class TasksList extends PureComponent<Props, State> {
     )
     return taskrows
   }
+
+  private get sortedRows(): JSX.Element {
+    const {tasks} = this.props
+    const {sortKey, sortDirection} = this.state
+
+    if (tasks.length) {
+      return (
+        <SortingHat<Task>
+          list={tasks}
+          sortKey={sortKey}
+          direction={sortDirection}
+        >
+          {this.rows}
+        </SortingHat>
+      )
+    }
+
+    return null
+  }
 }

ui/src/tasks/components/TasksPage.scss

@@ -10,4 +10,19 @@
     font-weight: 500;
     margin: 0 $ix-marg-b 0 0;
     color: $g11-sidewalk;
+    white-space: nowrap;
+}
+
+.hidden-tasks-alert {
+    font-size: 13px;
+    font-weight: 600;
+    margin-top: ($ix-border / 2);
+    width: 100%;
+    background-color: rgba($g3-castle, 0.5);
+    text-align: center;
+    @include no-user-select();
+    color: $g9-mountain;
+    padding: $ix-marg-b;
+    border-radius: $radius;
+    font-style: italic;
 }

ui/src/tasks/containers/TasksPage.tsx

@@ -101,11 +101,13 @@ class TasksPage extends PureComponent<Props, State> {
               <TasksList
                 searchTerm={searchTerm}
                 tasks={this.filteredTasks}
+                totalCount={this.totalTaskCount}
                 onActivate={this.handleActivate}
                 onDelete={this.handleDelete}
                 onCreate={this.handleCreateTask}
                 onSelect={this.props.selectTask}
               />
+              {this.hiddenTaskAlert}
             </div>
           </Page.Contents>
         </Page>
@@ -171,6 +173,33 @@ class TasksPage extends PureComponent<Props, State> {
 
     return matchingTasks
   }
+
+  private get totalTaskCount(): number {
+    return this.props.tasks.length
+  }
+
+  private get hiddenTaskAlert(): JSX.Element {
+    const {showInactive, tasks} = this.props
+
+    const hiddenCount = tasks.filter(
+      t => t.status === TaskAPI.StatusEnum.Inactive
+    ).length
+
+    const allTasksAreHidden = hiddenCount === tasks.length
+
+    if (allTasksAreHidden || showInactive) {
+      return null
+    }
+
+    if (hiddenCount) {
+      const pluralizer = hiddenCount === 1 ? '' : 's'
+      const verb = hiddenCount === 1 ? 'is' : 'are'
+
+      return (
+        <div className="hidden-tasks-alert">{`${hiddenCount} inactive task${pluralizer} ${verb} hidden from view`}</div>
+      )
+    }
+  }
 }
 
 const mstp = ({