HP-225 Feat/new disco icon

docs/portal_config.md

@@ -543,6 +543,7 @@ Below is an example, with inline comments describing what each JSON block config
     "minimalFieldMapping": { // maps
       "tagsListFieldName": "tags", // required; the field which contains the list of tags (format: [{name: string, category: string}] )
       "authzField": "authz", // optional if features.authorization.enabled is false, otherwise required
+      "dataAvailabilityField": "data_availability", // optional, for checking if a study has data pending to be available
       "uid": "study_id" // required; a unique identifier for each study. Can be any unique value and does not have to have any special meaning (eg does not need to be a GUID)
     },
     "tagCategories": [ // configures the categories displayed in the tag selector. If a tag category appears in the `tagsListFieldName` field but is not configured here, it will not be displayed in the tag selector.

src/Discovery/Discovery.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import * as JsSearch from 'js-search';
 import { Tag, Popover } from 'antd';
-import { LockFilled, UnlockOutlined } from '@ant-design/icons';
+import { LockFilled, UnlockOutlined, ClockCircleOutlined } from '@ant-design/icons';
 import { DiscoveryConfig } from './DiscoveryConfig';
 import './Discovery.css';
 import DiscoverySummary from './DiscoverySummary';
@@ -18,7 +18,8 @@ export const accessibleFieldName = '__accessible';
 export enum AccessLevel {
   ACCESSIBLE,
   UNACCESSIBLE,
-  NOTAVAILABLE
+  NOT_AVAILABLE,
+  PENDING
 }
 
 const ARBORIST_READ_PRIV = 'read';
@@ -267,7 +268,7 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
 
   // Set up table columns
   // -----
-  const columns = config.studyColumns.map((column) => ({
+  const columns: any = config.studyColumns.map((column) => ({
     title: <div className='discovery-table-header'>{column.name}</div>,
     ellipsis: !!column.ellipsis,
     textWrap: 'word-break',
@@ -366,14 +367,35 @@ const Discovery: React.FunctionComponent<Props> = (props: Props) => {
         id: 'unaccessible-data-filter',
       }, {
         text: <React.Fragment><span style={{ color: 'gray' }}>n/a</span>&nbsp;No Data</React.Fragment>,
-        value: AccessLevel.NOTAVAILABLE,
+        value: AccessLevel.NOT_AVAILABLE,
+        id: 'not-available-data-filter',
+      }, {
+        text: <React.Fragment><ClockCircleOutlined />Pending</React.Fragment>,
+        value: AccessLevel.PENDING,
+        id: 'pending-data-filter',
       }],
       onFilter: (value, record) => record[accessibleFieldName] === value,
       ellipsis: false,
       width: '106px',
       textWrap: 'word-break',
       render: (_, record) => {
-        if (record[accessibleFieldName] === AccessLevel.NOTAVAILABLE) {
+        if (record[accessibleFieldName] === AccessLevel.PENDING) {
+          return (
+            <Popover
+              overlayClassName='discovery-popover'
+              placement='topRight'
+              arrowPointAtCenter
+              content={(
+                <div className='discovery-popover__text'>
+                  This study will have data soon
+                </div>
+              )}
+            >
+              <ClockCircleOutlined className='discovery-table__access-icon' />
+            </Popover>
+          );
+        }
+        if (record[accessibleFieldName] === AccessLevel.NOT_AVAILABLE) {
           return (
             <Popover
               overlayClassName='discovery-popover'

src/Discovery/DiscoveryConfig.d.ts

@@ -106,6 +106,7 @@ export interface DiscoveryConfig {
     minimalFieldMapping: {
         tagsListFieldName: string,
         authzField: string,
+        dataAvailabilityField?: string,
         uid: string,
         commons?: string
     },

src/Discovery/DiscoveryDetails.tsx

@@ -62,7 +62,8 @@ const DiscoveryDetails = (props: Props) => (
           )}
       { (
         props.config.features.authorization.enabled
-            && props.modalData[accessibleFieldName] !== AccessLevel.NOTAVAILABLE
+            && props.modalData[accessibleFieldName] !== AccessLevel.NOT_AVAILABLE
+            && props.modalData[accessibleFieldName] !== AccessLevel.PENDING
       )
           && (props.modalData[accessibleFieldName] === AccessLevel.ACCESSIBLE
             ? (

src/Discovery/index.tsx

@@ -69,15 +69,17 @@ const DiscoveryWithMDSBackend: React.FC<{
     loadStudiesFunction().then((rawStudies) => {
       if (props.config.features.authorization.enabled) {
         // mark studies as accessible or inaccessible to user
-        const { authzField } = props.config.minimalFieldMapping;
+        const { authzField, dataAvailabilityField } = props.config.minimalFieldMapping;
         // useArboristUI=true is required for userHasMethodForServiceOnResource
         if (!useArboristUI) {
           throw new Error('Arborist UI must be enabled for the Discovery page to work if authorization is enabled in the Discovery page. Set `useArboristUI: true` in the portal config.');
         }
         const studiesWithAccessibleField = rawStudies.map((study) => {
           let accessible: AccessLevel;
-          if (study[authzField] === undefined || study[authzField] === '') {
-            accessible = AccessLevel.NOTAVAILABLE;
+          if (dataAvailabilityField && study[dataAvailabilityField] === 'pending') {
+            accessible = AccessLevel.PENDING;
+          } else if (study[authzField] === undefined || study[authzField] === '') {
+            accessible = AccessLevel.NOT_AVAILABLE;
           } else {
             accessible = userHasMethodForServiceOnResource('read', '*', study[authzField], props.userAuthMapping)
               ? AccessLevel.ACCESSIBLE