Merge pull request alephdata#1719 from alephdata/kirk/group-entity-se…

…arch Group entities search
BuloZB · Apr 13, 2021 · de02e8e · de02e8e
2 parents 18a4107 + 9454045
commit de02e8e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 2 deletions.
diff --git a/ui/src/components/QueryTags/QueryTags.jsx b/ui/src/components/QueryTags/QueryTags.jsx
@@ -4,11 +4,15 @@ import _ from 'lodash';
 import { Button } from '@blueprintjs/core';
 import QueryFilterTag from './QueryFilterTag';
 
+const HIDDEN_TAGS_CUTOFF = 10;
+
 class QueryTags extends Component {
   constructor(props) {
     super(props);
     this.removeFilterValue = this.removeFilterValue.bind(this);
     this.removeAllFilterValues = this.removeAllFilterValues.bind(this);
+
+    this.state = { showHidden: false };
   }
 
   removeFilterValue(filter, value) {
@@ -30,6 +34,8 @@ class QueryTags extends Component {
 
   render() {
     const { query } = this.props;
+    const { showHidden } = this.state;
+
     let activeFilters = query ? query.filters() : [];
 
     if (activeFilters.length === 0) {
@@ -51,7 +57,9 @@ class QueryTags extends Component {
         .map(filter => query.getFilter(filter).map(value => ({ filter, value })))
     );
     const allTags = [...filterTags, ...addlTags];
+    const visibleTags = showHidden ? allTags : allTags.slice(0, HIDDEN_TAGS_CUTOFF);
 
+    const showHiddenToggle = !showHidden && allTags.length > HIDDEN_TAGS_CUTOFF;
     const showClearAll = allTags.length > 1;
 
     // @FIXME This should still selectively display filters for the following:
@@ -60,14 +68,27 @@ class QueryTags extends Component {
     // "?ancestors={id}"
     return (
       <div className="QueryTags">
-        {allTags.map(({ filter, value }) => (
+        {visibleTags.map(({ filter, value }) => (
           <QueryFilterTag
             filter={filter}
             value={value}
             remove={this.removeFilterValue}
             key={value}
           />
         ))}
+        {showHiddenToggle && (
+          <Button
+            className="filter-clear-tag bp3-tag bp3-large QueryFilterTag"
+            onClick={() => this.setState({ showHidden: true })}
+            outlined
+          >
+            <FormattedMessage
+              id="queryFilters.showHidden"
+              defaultMessage="Show {count} more filters..."
+              values={{ count: allTags.length - visibleTags.length }}
+            />
+          </Button>
+        )}
         {showClearAll && (
           <Button
             className="filter-clear-tag bp3-tag bp3-large QueryFilterTag"

diff --git a/ui/src/screens/GroupScreen/GroupScreen.jsx b/ui/src/screens/GroupScreen/GroupScreen.jsx
@@ -6,6 +6,9 @@ import {
 } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import queryString from 'query-string';
+import { Callout, Intent } from '@blueprintjs/core';
 
 import Query from 'app/Query';
 import Dashboard from 'components/Dashboard/Dashboard';
@@ -14,6 +17,7 @@ import CollectionIndex from 'components/CollectionIndex/CollectionIndex';
 import LoadingScreen from 'components/Screen/LoadingScreen';
 import { fetchRole, queryCollections } from 'actions';
 import { selectRole } from 'selectors';
+import { showWarningToast } from 'app/toast';
 
 import './GroupScreen.scss';
 
@@ -25,12 +29,17 @@ const messages = defineMessages({
   },
   placeholder: {
     id: 'sources.index.placeholder',
-    defaultMessage: 'Search datasets and investigations belonging to {group}...',
+    defaultMessage: 'Search for a dataset or investigation belonging to {group}...',
   },
 });
 
 
 export class GroupScreen extends Component {
+  constructor(props) {
+    super(props)
+
+    this.goToEntitySearch = this.goToEntitySearch.bind(this);
+  }
   componentDidMount() {
     this.fetchIfNeeded();
   }
@@ -46,6 +55,30 @@ export class GroupScreen extends Component {
     }
   }
 
+  async goToEntitySearch() {
+    const { history, groupId } = this.props;
+
+    const query = new Query('collections', {}, { 'filter:team_id': groupId }, 'collections').limit(1000);
+    try {
+      const qReturn = await this.props.queryCollections({ query });
+      const groupCollections = qReturn.result?.results;
+      if (groupCollections) {
+        const params = {
+          'filter:collection_id': groupCollections.map(coll => coll.id),
+          facet: 'collection_id',
+          'facet_size:collection_id': 10,
+          'facet_total:collection_id': true,
+        };
+        history.push({
+          pathname: '/search',
+          search: queryString.stringify(params)
+        })
+      }
+    } catch (e) {
+      showWarningToast(e.message);
+    }
+  }
+
   render() {
     const { group, query, intl } = this.props;
     if (group.isPending) {
@@ -62,6 +95,16 @@ export class GroupScreen extends Component {
                 defaultMessage="The list below shows all datasets and investigations that belong to this group."
               />
             </p>
+            <Callout intent={Intent.PRIMARY} style={{ marginTop: '20px' }}>
+              <FormattedMessage
+                id="group.page.description"
+                defaultMessage="If you would like to search for specific entities or documents within the datasets that this group has access to, <link>click here</link> instead."
+                values={{
+                  // eslint-disable-next-line
+                  link: chunks => <a role="button" onClick={this.goToEntitySearch}>{chunks}</a>,
+                }}
+              />
+            </Callout>
           </div>
           <CollectionIndex
             query={query}
@@ -90,6 +133,7 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 export default compose(
+  withRouter,
   connect(mapStateToProps, { fetchRole, queryCollections }),
   injectIntl,
 )(GroupScreen);