15069: Renders property chips correctly from the search query string.

We assume that property key/value strings from the search query are the
concrete values from the API server, so we treat them as vocabulary IDs.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima@veritasgenetics.com>

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index c4a2d45f2141cde1f90ec1535b38c0d6385a37b7..fbdc399595312531941622a7930f661ec2a53c79 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -23,6 +23,7 @@ import { searchResultsPanelActions } from "~/store/search-results-panel/search-r
 import { ListResults } from "~/services/common-service/common-service";
 import * as parser from './search-query/arv-parser';
 import { Keywords } from './search-query/arv-parser';
+import { Vocabulary, getTagKeyLabel, getTagValueLabel } from "~/models/vocabulary";
 
 export const searchBarActions = unionize({
     SET_CURRENT_VIEW: ofType<string>(),
@@ -95,9 +96,9 @@ export const setSearchValueFromAdvancedData = (data: SearchBarAdvanceFormData, p
         dispatch(searchBarActions.SET_SEARCH_VALUE(value));
     };
 
-export const setAdvancedDataFromSearchValue = (search: string) =>
+export const setAdvancedDataFromSearchValue = (search: string, vocabulary: Vocabulary) =>
     async (dispatch: Dispatch) => {
-        const data = getAdvancedDataFromQuery(search);
+        const data = getAdvancedDataFromQuery(search, vocabulary);
         dispatch<any>(initialize(SEARCH_BAR_ADVANCE_FORM_NAME, data));
         if (data.projectUuid) {
             await dispatch<any>(activateSearchBarProject(data.projectUuid));
@@ -297,7 +298,7 @@ export const getQueryFromAdvancedData = (data: SearchBarAdvanceFormData, prevDat
     return value;
 };
 
-export const getAdvancedDataFromQuery = (query: string): SearchBarAdvanceFormData => {
+export const getAdvancedDataFromQuery = (query: string, vocabulary?: Vocabulary): SearchBarAdvanceFormData => {
     const { tokens, searchString } = parser.parseSearchQuery(query);
     const getValue = parser.getValue(tokens);
     return {
@@ -308,7 +309,17 @@ export const getAdvancedDataFromQuery = (query: string): SearchBarAdvanceFormDat
         inTrash: parser.isTrashed(tokens),
         dateFrom: getValue(Keywords.FROM) || '',
         dateTo: getValue(Keywords.TO) || '',
-        properties: parser.getProperties(tokens),
+        properties: vocabulary
+            ? parser.getProperties(tokens).map(
+                p => {
+                    return {
+                        keyID: p.key,
+                        key: getTagKeyLabel(p.key, vocabulary),
+                        valueID: p.value,
+                        value: getTagValueLabel(p.key, p.value, vocabulary),
+                    };
+                })
+            : parser.getProperties(tokens),
         saveQuery: false,
         queryName: ''
     };

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index e5e52b31ad3f0de97578fe5febacfd0dd664545a..49a8ba6235e5183c2a528287572c2f7081d11dca 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
+import { compose } from 'redux';
 import {
     IconButton,
     Paper,
@@ -33,6 +34,8 @@ import {
 } from '~/views-components/search-bar/search-bar-advanced-view';
 import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "~/common/codes";
 import { debounce } from 'debounce';
+import { Vocabulary } from '~/models/vocabulary';
+import { connectVocabulary } from '../resource-properties-form/property-field-common';
 
 type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
 
@@ -72,6 +75,7 @@ interface SearchBarViewDataProps {
     currentView: string;
     isPopoverOpen: boolean;
     debounce?: number;
+    vocabulary?: Vocabulary;
 }
 
 export type SearchBarActionProps = SearchBarViewActionProps
@@ -88,7 +92,7 @@ interface SearchBarViewActionProps {
     loadRecentQueries: () => string[];
     moveUp: () => void;
     moveDown: () => void;
-    setAdvancedDataFromSearchValue: (search: string) => void;
+    setAdvancedDataFromSearchValue: (search: string, vocabulary?: Vocabulary) => void;
 }
 
 type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
@@ -135,12 +139,12 @@ const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) =>
     if (props.isPopoverOpen && props.currentView === SearchView.ADVANCED) {
         props.closeView();
     } else {
-        props.setAdvancedDataFromSearchValue(props.searchValue);
+        props.setAdvancedDataFromSearchValue(props.searchValue, props.vocabulary);
         props.onSetView(SearchView.ADVANCED);
     }
 };
 
-export const SearchBarView = withStyles(styles)(
+export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
     class extends React.Component<SearchBarViewProps> {
 
         debouncedSearch = debounce(() => {

diff --git a/src/views-components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar.tsx
index 41cf291688dc2d53ef7534ee8048a2d9b2629f99..78dcae61fe0ae7ef077593aada159e30a4495e53 100644 (file)
--- a/src/views-components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -20,6 +20,7 @@ import {
 } from '~/store/search-bar/search-bar-actions';
 import { SearchBarView, SearchBarActionProps, SearchBarDataProps } from '~/views-components/search-bar/search-bar-view';
 import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { Vocabulary } from '~/models/vocabulary';
 
 const mapStateToProps = ({ searchBar, form }: RootState): SearchBarDataProps => {
     return {
@@ -50,7 +51,7 @@ const mapDispatchToProps = (dispatch: Dispatch): SearchBarActionProps => ({
     editSavedQuery: (data: SearchBarAdvanceFormData) => dispatch<any>(editSavedQuery(data)),
     moveUp: () => dispatch<any>(moveUp()),
     moveDown: () => dispatch<any>(moveDown()),
-    setAdvancedDataFromSearchValue: (search: string) => dispatch<any>(setAdvancedDataFromSearchValue(search))
+    setAdvancedDataFromSearchValue: (search: string, vocabulary: Vocabulary) => dispatch<any>(setAdvancedDataFromSearchValue(search, vocabulary))
 });
 
 export const SearchBar = connect(mapStateToProps, mapDispatchToProps)(SearchBarView);