Merge branch '15840-project-page-hang'

diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index 377e78e42a8678dae93980549bda9c6a10fc8020..819875bec14c6527ce177ee6478ac435a698844d 100644 (file)
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { PropertyValue } from "~/models/search-bar";
+import { Vocabulary, getTagKeyLabel, getTagValueLabel } from "~/models/vocabulary";
 
 export const formatDate = (isoDate?: string | null, utc: boolean = false) => {
     if (isoDate) {
@@ -76,7 +77,10 @@ const FILE_SIZES = [
     }
 ];
 
-export const formatPropertyValue = (pv: PropertyValue) => {
+export const formatPropertyValue = (pv: PropertyValue, vocabulary?: Vocabulary) => {
+    if (vocabulary && pv.keyID && pv.valueID) {
+        return `${getTagKeyLabel(pv.keyID, vocabulary)}: ${getTagValueLabel(pv.keyID, pv.valueID!, vocabulary)}`;
+    }
     if (pv.key) {
         return pv.value
             ? `${pv.key}: ${pv.value}`

diff --git a/src/index.tsx b/src/index.tsx
index 5a941638e5c5227fd4014ff63bb10701fb2b17d8..a8fa809ca70c728637a0c10484cfa5a5a3b6e2aa 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -45,7 +45,7 @@ import { setBuildInfo } from '~/store/app-info/app-info-actions';
 import { getBuildInfo } from '~/common/app-info';
 import { DragDropContextProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import { initAdvanceFormProjectsTree } from '~/store/search-bar/search-bar-actions';
+import { initAdvancedFormProjectsTree } from '~/store/search-bar/search-bar-actions';
 import { repositoryActionSet } from '~/views-components/context-menu/action-sets/repository-action-set';
 import { sshKeyActionSet } from '~/views-components/context-menu/action-sets/ssh-key-action-set';
 import { keepServiceActionSet } from '~/views-components/context-menu/action-sets/keep-service-action-set';
@@ -149,7 +149,7 @@ const initListener = (history: History, store: RootStore, services: ServiceRepos
             await store.dispatch(loadWorkbench());
             addRouteChangeHandlers(history, store);
             // ToDo: move to searchBar component
-            store.dispatch(initAdvanceFormProjectsTree());
+            store.dispatch(initAdvancedFormProjectsTree());
         }
     };
 };

diff --git a/src/models/search-bar.ts b/src/models/search-bar.ts
index effaeed4c0e676882e6bccc9f445e9eb732d9483..c71faf2ff47c132453e923a8d021816865ef67ee 100644 (file)
--- a/src/models/search-bar.ts
+++ b/src/models/search-bar.ts
@@ -4,7 +4,7 @@
 
 import { ResourceKind } from '~/models/resource';
 
-export type SearchBarAdvanceFormData = {
+export type SearchBarAdvancedFormData = {
     type?: ResourceKind;
     cluster?: string;
     projectUuid?: string;
@@ -19,5 +19,7 @@ export type SearchBarAdvanceFormData = {
 
 export interface PropertyValue {
     key: string;
+    keyID?: string;
     value: string;
+    valueID?: string;
 }

diff --git a/src/services/search-service/search-service.ts b/src/services/search-service/search-service.ts
index 84d120a89c52dacc835256b8f39e6f56ac0f8212..c6cfe786882ea7665eb4d83e49987eabb74bf37e 100644 (file)
--- a/src/services/search-service/search-service.ts
+++ b/src/services/search-service/search-service.ts
@@ -2,11 +2,11 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedFormData } from '~/models/search-bar';
 
 export class SearchService {
     private recentQueries = this.getRecentQueries();
-    private savedQueries: SearchBarAdvanceFormData[] = this.getSavedQueries();
+    private savedQueries: SearchBarAdvancedFormData[] = this.getSavedQueries();
 
     saveRecentQuery(query: string) {
         if (this.recentQueries.length >= MAX_NUMBER_OF_RECENT_QUERIES) {
@@ -20,19 +20,19 @@ export class SearchService {
         return JSON.parse(localStorage.getItem('recentQueries') || '[]');
     }
 
-    saveQuery(data: SearchBarAdvanceFormData) {
+    saveQuery(data: SearchBarAdvancedFormData) {
         this.savedQueries.push({...data});
         localStorage.setItem('savedQueries', JSON.stringify(this.savedQueries));
     }
 
-    editSavedQueries(data: SearchBarAdvanceFormData) {
+    editSavedQueries(data: SearchBarAdvancedFormData) {
         const itemIndex = this.savedQueries.findIndex(item => item.queryName === data.queryName);
         this.savedQueries[itemIndex] = {...data};
         localStorage.setItem('savedQueries', JSON.stringify(this.savedQueries));
     }
 
     getSavedQueries() {
-        return JSON.parse(localStorage.getItem('savedQueries') || '[]') as SearchBarAdvanceFormData[];
+        return JSON.parse(localStorage.getItem('savedQueries') || '[]') as SearchBarAdvancedFormData[];
     }
 
     deleteSavedQuery(id: number) {

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index d9238ef209677788121e50c3862fe7b1f4dce185..ddaf8f317ddae98aa86660a443ad59f3235f16f4 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -5,7 +5,7 @@
 import { ofType, unionize, UnionOf } from "~/common/unionize";
 import { GroupContentsResource, GroupContentsResourcePrefix } from '~/services/groups-service/groups-service';
 import { Dispatch } from 'redux';
-import { arrayPush, change, initialize } from 'redux-form';
+import { change, initialize, untouch } from 'redux-form';
 import { RootState } from '~/store/store';
 import { initUserProject, treePickerActions } from '~/store/tree-picker/tree-picker-actions';
 import { ServiceRepository } from '~/services/services';
@@ -14,7 +14,7 @@ import { ResourceKind, RESOURCE_UUID_REGEX, COLLECTION_PDH_REGEX } from '~/model
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
 import { navigateTo, navigateToSearchResults } from '~/store/navigation/navigation-action';
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
-import { PropertyValue, SearchBarAdvanceFormData } from '~/models/search-bar';
+import { PropertyValue, SearchBarAdvancedFormData } from '~/models/search-bar';
 import * as _ from "lodash";
 import { getModifiedKeysValues } from "~/common/objects";
 import { activateSearchBarProject } from "~/store/search-bar/search-bar-tree-actions";
@@ -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>(),
@@ -30,9 +31,9 @@ export const searchBarActions = unionize({
     CLOSE_SEARCH_VIEW: ofType<{}>(),
     SET_SEARCH_RESULTS: ofType<GroupContentsResource[]>(),
     SET_SEARCH_VALUE: ofType<string>(),
-    SET_SAVED_QUERIES: ofType<SearchBarAdvanceFormData[]>(),
+    SET_SAVED_QUERIES: ofType<SearchBarAdvancedFormData[]>(),
     SET_RECENT_QUERIES: ofType<string[]>(),
-    UPDATE_SAVED_QUERY: ofType<SearchBarAdvanceFormData[]>(),
+    UPDATE_SAVED_QUERY: ofType<SearchBarAdvancedFormData[]>(),
     SET_SELECTED_ITEM: ofType<string>(),
     MOVE_UP: ofType<{}>(),
     MOVE_DOWN: ofType<{}>(),
@@ -41,9 +42,9 @@ export const searchBarActions = unionize({
 
 export type SearchBarActions = UnionOf<typeof searchBarActions>;
 
-export const SEARCH_BAR_ADVANCE_FORM_NAME = 'searchBarAdvanceFormName';
+export const SEARCH_BAR_ADVANCED_FORM_NAME = 'searchBarAdvancedFormName';
 
-export const SEARCH_BAR_ADVANCE_FORM_PICKER_ID = 'searchBarAdvanceFormPickerId';
+export const SEARCH_BAR_ADVANCED_FORM_PICKER_ID = 'searchBarAdvancedFormPickerId';
 
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 
@@ -75,7 +76,7 @@ export const searchData = (searchValue: string) =>
         }
     };
 
-export const searchAdvanceData = (data: SearchBarAdvanceFormData) =>
+export const searchAdvancedData = (data: SearchBarAdvancedFormData) =>
     async (dispatch: Dispatch, getState: () => RootState) => {
         dispatch<any>(saveQuery(data));
         const searchValue = getState().searchBar.searchValue;
@@ -85,7 +86,7 @@ export const searchAdvanceData = (data: SearchBarAdvanceFormData) =>
         dispatch(navigateToSearchResults(searchValue));
     };
 
-export const setSearchValueFromAdvancedData = (data: SearchBarAdvanceFormData, prevData?: SearchBarAdvanceFormData) =>
+export const setSearchValueFromAdvancedData = (data: SearchBarAdvancedFormData, prevData?: SearchBarAdvancedFormData) =>
     (dispatch: Dispatch, getState: () => RootState) => {
         const searchValue = getState().searchBar.searchValue;
         const value = getQueryFromAdvancedData({
@@ -95,17 +96,17 @@ 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);
-        dispatch<any>(initialize(SEARCH_BAR_ADVANCE_FORM_NAME, data));
+        const data = getAdvancedDataFromQuery(search, vocabulary);
+        dispatch<any>(initialize(SEARCH_BAR_ADVANCED_FORM_NAME, data));
         if (data.projectUuid) {
             await dispatch<any>(activateSearchBarProject(data.projectUuid));
-            dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID, id: data.projectUuid }));
+            dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID, id: data.projectUuid }));
         }
     };
 
-const saveQuery = (data: SearchBarAdvanceFormData) =>
+const saveQuery = (data: SearchBarAdvancedFormData) =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         const savedQueries = services.searchService.getSavedQueries();
         if (data.saveQuery && data.queryName) {
@@ -131,11 +132,11 @@ export const deleteSavedQuery = (id: number) =>
         return savedSearchQueries || [];
     };
 
-export const editSavedQuery = (data: SearchBarAdvanceFormData) =>
+export const editSavedQuery = (data: SearchBarAdvancedFormData) =>
     (dispatch: Dispatch<any>) => {
         dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.ADVANCED));
         dispatch(searchBarActions.SET_SEARCH_VALUE(getQueryFromAdvancedData(data)));
-        dispatch<any>(initialize(SEARCH_BAR_ADVANCE_FORM_NAME, data));
+        dispatch<any>(initialize(SEARCH_BAR_ADVANCED_FORM_NAME, data));
     };
 
 export const openSearchView = () =>
@@ -156,7 +157,7 @@ export const closeSearchView = () =>
 export const closeAdvanceView = () =>
     (dispatch: Dispatch<any>) => {
         dispatch(searchBarActions.SET_SEARCH_VALUE(''));
-        dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID }));
+        dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
         dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
     };
 
@@ -255,10 +256,10 @@ const buildQueryFromKeyMap = (data: any, keyMap: string[][], mode: 'rebuild' | '
     return value;
 };
 
-export const getQueryFromAdvancedData = (data: SearchBarAdvanceFormData, prevData?: SearchBarAdvanceFormData) => {
+export const getQueryFromAdvancedData = (data: SearchBarAdvancedFormData, prevData?: SearchBarAdvancedFormData) => {
     let value = '';
 
-    const flatData = (data: SearchBarAdvanceFormData) => {
+    const flatData = (data: SearchBarAdvancedFormData) => {
         const fo = {
             searchValue: data.searchValue,
             type: data.type,
@@ -268,7 +269,7 @@ export const getQueryFromAdvancedData = (data: SearchBarAdvanceFormData, prevDat
             dateFrom: data.dateFrom,
             dateTo: data.dateTo,
         };
-        (data.properties || []).forEach(p => fo[`prop-"${p.key}"`] = `"${p.value}"`);
+        (data.properties || []).forEach(p => fo[`prop-"${p.keyID || p.key}"`] = `"${p.valueID || p.value}"`);
         return fo;
     };
 
@@ -281,14 +282,14 @@ export const getQueryFromAdvancedData = (data: SearchBarAdvanceFormData, prevDat
         ['to', 'dateTo']
     ];
     _.union(data.properties, prevData ? prevData.properties : [])
-        .forEach(p => keyMap.push([`has:"${p.key}"`, `prop-"${p.key}"`]));
+        .forEach(p => keyMap.push([`has:"${p.keyID || p.key}"`, `prop-"${p.keyID || p.key}"`]));
 
     if (prevData) {
         const obj = getModifiedKeysValues(flatData(data), flatData(prevData));
         value = buildQueryFromKeyMap({
             searchValue: data.searchValue,
             ...obj
-        } as SearchBarAdvanceFormData, keyMap, "reuse");
+        } as SearchBarAdvancedFormData, keyMap, "reuse");
     } else {
         value = buildQueryFromKeyMap(flatData(data), keyMap, "rebuild");
     }
@@ -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): SearchBarAdvancedFormData => {
     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: ''
     };
@@ -361,19 +372,20 @@ const buildDateFilter = (date?: string): string => {
     return date ? date : '';
 };
 
-export const initAdvanceFormProjectsTree = () =>
+export const initAdvancedFormProjectsTree = () =>
     (dispatch: Dispatch) => {
-        dispatch<any>(initUserProject(SEARCH_BAR_ADVANCE_FORM_PICKER_ID));
+        dispatch<any>(initUserProject(SEARCH_BAR_ADVANCED_FORM_PICKER_ID));
     };
 
-export const changeAdvanceFormProperty = (property: string, value: PropertyValue[] | string = '') =>
+export const changeAdvancedFormProperty = (propertyField: string, value: PropertyValue[] | string = '') =>
     (dispatch: Dispatch) => {
-        dispatch(change(SEARCH_BAR_ADVANCE_FORM_NAME, property, value));
+        dispatch(change(SEARCH_BAR_ADVANCED_FORM_NAME, propertyField, value));
     };
 
-export const updateAdvanceFormProperties = (propertyValues: PropertyValue) =>
+export const resetAdvancedFormProperty = (propertyField: string) =>
     (dispatch: Dispatch) => {
-        dispatch(arrayPush(SEARCH_BAR_ADVANCE_FORM_NAME, 'properties', propertyValues));
+        dispatch(change(SEARCH_BAR_ADVANCED_FORM_NAME, propertyField, null));
+        dispatch(untouch(SEARCH_BAR_ADVANCED_FORM_NAME, propertyField));
     };
 
 export const moveUp = () =>

diff --git a/src/store/search-bar/search-bar-reducer.ts b/src/store/search-bar/search-bar-reducer.ts
index 4f663eeb393f6f1ea115ca43d42152bcce5ca0cc..32d9305f956df81c69a356096f2a4438bbf0a9bf 100644 (file)
--- a/src/store/search-bar/search-bar-reducer.ts
+++ b/src/store/search-bar/search-bar-reducer.ts
@@ -8,7 +8,7 @@ import {
     SearchBarActions
 } from '~/store/search-bar/search-bar-actions';
 import { GroupContentsResource } from '~/services/groups-service/groups-service';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedFormData } from '~/models/search-bar';
 
 type SearchResult = GroupContentsResource;
 export type SearchBarSelectedItem = {
@@ -21,7 +21,7 @@ interface SearchBar {
     open: boolean;
     searchResults: SearchResult[];
     searchValue: string;
-    savedQueries: SearchBarAdvanceFormData[];
+    savedQueries: SearchBarAdvancedFormData[];
     recentQueries: string[];
     selectedItem: SearchBarSelectedItem;
 }
@@ -47,7 +47,7 @@ const initialState: SearchBar = {
 
 const makeSelectedItem = (id: string, query?: string): SearchBarSelectedItem => ({ id, query: query ? query : id });
 
-const makeQueryList = (recentQueries: string[], savedQueries: SearchBarAdvanceFormData[]) => {
+const makeQueryList = (recentQueries: string[], savedQueries: SearchBarAdvancedFormData[]) => {
     const recentIds = recentQueries.map((q, idx) => makeSelectedItem(`RQ-${idx}-${q}`, q));
     const savedIds = savedQueries.map((q, idx) => makeSelectedItem(`SQ-${idx}-${q.queryName}`, getQueryFromAdvancedData(q)));
     return recentIds.concat(savedIds);

diff --git a/src/store/search-bar/search-bar-tree-actions.ts b/src/store/search-bar/search-bar-tree-actions.ts
index 5101055a45a7b95e77dfeacffd7648b7929d2104..5dc769a6e48e0f7c61262c83029a7d75e6356730 100644 (file)
--- a/src/store/search-bar/search-bar-tree-actions.ts
+++ b/src/store/search-bar/search-bar-tree-actions.ts
@@ -12,10 +12,10 @@ import { FilterBuilder } from "~/services/api/filter-builder";
 import { OrderBuilder } from "~/services/api/order-builder";
 import { ProjectResource } from "~/models/project";
 import { resourcesActions } from "~/store/resources/resources-actions";
-import { SEARCH_BAR_ADVANCE_FORM_PICKER_ID } from "~/store/search-bar/search-bar-actions";
+import { SEARCH_BAR_ADVANCED_FORM_PICKER_ID } from "~/store/search-bar/search-bar-actions";
 
 const getSearchBarTreeNode = (id: string) => (treePicker: TreePicker) => {
-    const searchTree = getTreePicker(SEARCH_BAR_ADVANCE_FORM_PICKER_ID)(treePicker);
+    const searchTree = getTreePicker(SEARCH_BAR_ADVANCED_FORM_PICKER_ID)(treePicker);
     return searchTree
         ? getNode(id)(searchTree)
         : undefined;
@@ -23,7 +23,7 @@ const getSearchBarTreeNode = (id: string) => (treePicker: TreePicker) => {
 
 export const loadSearchBarTreeProjects = (projectUuid: string) =>
     async (dispatch: Dispatch, getState: () => RootState) => {
-        const treePicker = getTreePicker(SEARCH_BAR_ADVANCE_FORM_PICKER_ID)(getState().treePicker);
+        const treePicker = getTreePicker(SEARCH_BAR_ADVANCED_FORM_PICKER_ID)(getState().treePicker);
         const node = treePicker ? getNode(projectUuid)(treePicker) : undefined;
         if (node || projectUuid === '') {
             await dispatch<any>(loadSearchBarProject(projectUuid));
@@ -31,7 +31,7 @@ export const loadSearchBarTreeProjects = (projectUuid: string) =>
     };
 
 export const getSearchBarTreeNodeAncestorsIds = (id: string) => (treePicker: TreePicker) => {
-    const searchTree = getTreePicker(SEARCH_BAR_ADVANCE_FORM_PICKER_ID)(treePicker);
+    const searchTree = getTreePicker(SEARCH_BAR_ADVANCED_FORM_PICKER_ID)(treePicker);
     return searchTree
         ? getNodeAncestorsIds(id)(searchTree)
         : [];
@@ -49,16 +49,16 @@ export const activateSearchBarTreeBranch = (id: string) =>
                 ...[],
                 ...ancestors.map(ancestor => ancestor.uuid)
             ],
-            pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID
+            pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID
         }));
-        dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id, pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID }));
+        dispatch(treePickerActions.ACTIVATE_TREE_PICKER_NODE({ id, pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
     };
 
 export const expandSearchBarTreeItem = (id: string) =>
     async (dispatch: Dispatch, getState: () => RootState) => {
         const node = getSearchBarTreeNode(id)(getState().treePicker);
         if (node && !node.expanded) {
-            dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID }));
+            dispatch(treePickerActions.TOGGLE_TREE_PICKER_NODE_COLLAPSE({ id, pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
         }
     };
 
@@ -73,7 +73,7 @@ export const activateSearchBarProject = (id: string) =>
         }
         dispatch(treePickerActions.EXPAND_TREE_PICKER_NODES({
             ids: getSearchBarTreeNodeAncestorsIds(id)(treePicker),
-            pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID
+            pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID
         }));
         dispatch<any>(expandSearchBarTreeItem(id));
     };
@@ -81,7 +81,7 @@ export const activateSearchBarProject = (id: string) =>
 
 const loadSearchBarProject = (projectUuid: string) =>
     async (dispatch: Dispatch, _: () => RootState, services: ServiceRepository) => {
-        dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ id: projectUuid, pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID }));
+        dispatch(treePickerActions.LOAD_TREE_PICKER_NODE({ id: projectUuid, pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
         const params = {
             filters: new FilterBuilder()
                 .addEqual('ownerUuid', projectUuid)
@@ -93,7 +93,7 @@ const loadSearchBarProject = (projectUuid: string) =>
         const { items } = await services.projectService.list(params);
         dispatch(treePickerActions.LOAD_TREE_PICKER_NODE_SUCCESS({
             id: projectUuid,
-            pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID,
+            pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID,
             nodes: items.map(item => initTreeNode({ id: item.uuid, value: item })),
         }));
         dispatch(resourcesActions.SET_RESOURCES(items));

diff --git a/src/views-components/form-fields/search-bar-form-fields.tsx b/src/views-components/form-fields/search-bar-form-fields.tsx
index 8de48ea744a8494ae2575a5ee51358a0c591902f..837f13cb548b3144e8677f086030665cd02a366f 100644 (file)
--- a/src/views-components/form-fields/search-bar-form-fields.tsx
+++ b/src/views-components/form-fields/search-bar-form-fields.tsx
@@ -3,20 +3,18 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { Field, WrappedFieldProps, FieldArray, formValues } from 'redux-form';
+import { Field, WrappedFieldProps, FieldArray } from 'redux-form';
 import { TextField, DateTextField } from "~/components/text-field/text-field";
 import { CheckboxField } from '~/components/checkbox-field/checkbox-field';
 import { NativeSelectField } from '~/components/select-field/select-field';
 import { ResourceKind } from '~/models/resource';
 import { HomeTreePicker } from '~/views-components/projects-tree-picker/home-tree-picker';
-import { SEARCH_BAR_ADVANCE_FORM_PICKER_ID } from '~/store/search-bar/search-bar-actions';
+import { SEARCH_BAR_ADVANCED_FORM_PICKER_ID } from '~/store/search-bar/search-bar-actions';
 import { SearchBarAdvancedPropertiesView } from '~/views-components/search-bar/search-bar-advanced-properties-view';
 import { TreeItem } from "~/components/tree/tree";
 import { ProjectsTreePickerItem } from "~/views-components/projects-tree-picker/generic-projects-tree-picker";
-import { PropertyKeyInput } from '~/views-components/resource-properties-form/property-key-field';
-import { PropertyValueInput, PropertyValueFieldProps } from '~/views-components/resource-properties-form/property-value-field';
-import { VocabularyProp, connectVocabulary } from '~/views-components/resource-properties-form/property-field-common';
-import { compose } from 'redux';
+import { PropertyKeyField, } from '~/views-components/resource-properties-form/property-key-field';
+import { PropertyValueField } from '~/views-components/resource-properties-form/property-value-field';
 import { connect } from "react-redux";
 import { RootState } from "~/store/store";
 
@@ -59,7 +57,7 @@ export const SearchBarProjectField = () =>
 const ProjectsPicker = (props: WrappedFieldProps) =>
     <div style={{ height: '100px', display: 'flex', flexDirection: 'column', overflow: 'overlay' }}>
         <HomeTreePicker
-            pickerId={SEARCH_BAR_ADVANCE_FORM_PICKER_ID}
+            pickerId={SEARCH_BAR_ADVANCED_FORM_PICKER_ID}
             toggleItemActive={
                 (_: any, { id }: TreeItem<ProjectsTreePickerItem>) => {
                     props.input.onChange(id);
@@ -88,22 +86,11 @@ export const SearchBarPropertiesField = () =>
         name="properties"
         component={SearchBarAdvancedPropertiesView} />;
 
-export const SearchBarKeyField = connectVocabulary(
-    ({ vocabulary }: VocabularyProp) =>
-        <Field
-            name='key'
-            component={PropertyKeyInput}
-            vocabulary={vocabulary} />);
+export const SearchBarKeyField = () =>
+    <PropertyKeyField skipValidation={true} />;
 
-export const SearchBarValueField = compose(
-    connectVocabulary,
-    formValues({ propertyKey: 'key' })
-)(
-    (props: PropertyValueFieldProps) =>
-        <Field
-            name='value'
-            component={PropertyValueInput}
-            {...props} />);
+export const SearchBarValueField = () =>
+    <PropertyValueField skipValidation={true} />;
 
 export const SearchBarSaveSearchField = () =>
     <Field

diff --git a/src/views-components/resource-properties-form/property-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index 65d0c7c87f18752df97ba6862dc7cef215b90a82..e802ad5ccbd8b355b4d362eab0b3065714cfaa7f 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -12,7 +12,12 @@ export interface VocabularyProp {
     vocabulary: Vocabulary;
 }
 
-export const mapStateToProps = (state: RootState): VocabularyProp => ({
+export interface ValidationProp {
+    skipValidation?: boolean;
+}
+
+export const mapStateToProps = (state: RootState, ownProps: ValidationProp): VocabularyProp & ValidationProp => ({
+    skipValidation: ownProps.skipValidation,
     vocabulary: getVocabulary(state.properties),
 });
 
@@ -33,7 +38,7 @@ export const buildProps = ({ input, meta }: WrappedFieldProps) => {
         value: input.value,
         onChange: input.onChange,
         items: ITEMS_PLACEHOLDER,
-        renderSuggestion: (item:PropFieldSuggestion) => item.label,
+        renderSuggestion: (item: PropFieldSuggestion) => item.label,
         error: hasError(meta),
         helperText: getErrorMsg(meta),
     };
@@ -47,20 +52,20 @@ export const handleBlur = (
     { dispatch }: WrappedFieldMetaProps,
     { onBlur, value }: WrappedFieldInputProps,
     fieldValue: string) =>
-        () => {
-            dispatch(change(formName, fieldName, fieldValue));
-            onBlur(value);
-        };
+    () => {
+        dispatch(change(formName, fieldName, fieldValue));
+        onBlur(value);
+    };
 
 // When selecting a property value, save its ID for later usage.
 export const handleSelect = (
     fieldName: string,
     formName: string,
     { onChange }: WrappedFieldInputProps,
-    { dispatch }: WrappedFieldMetaProps ) =>
-        (item:PropFieldSuggestion) => {
-            if (item) {
-                onChange(item.label);
-                dispatch(change(formName, fieldName, item.id));
-            }
-        };
+    { dispatch }: WrappedFieldMetaProps) =>
+    (item: PropFieldSuggestion) => {
+        if (item) {
+            onChange(item.label);
+            dispatch(change(formName, fieldName, item.id));
+        }
+    };

diff --git a/src/views-components/resource-properties-form/property-key-field.tsx b/src/views-components/resource-properties-form/property-key-field.tsx
index 89a03946d594d49ced6a567b1af0edbe9b50ae55..1f92118885690992b19cb6c81e5a88eaea47c959 100644 (file)
--- a/src/views-components/resource-properties-form/property-key-field.tsx
+++ b/src/views-components/resource-properties-form/property-key-field.tsx
@@ -7,7 +7,7 @@ import { WrappedFieldProps, Field, FormName } from 'redux-form';
 import { memoize } from 'lodash';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary, getTags, getTagKeyID } from '~/models/vocabulary';
-import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { handleSelect, handleBlur, connectVocabulary, VocabularyProp, ValidationProp, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 import { TAG_KEY_VALIDATION } from '~/validators/validators';
 import { escapeRegExp } from '~/common/regexp.ts';
 
@@ -15,15 +15,15 @@ export const PROPERTY_KEY_FIELD_NAME = 'key';
 export const PROPERTY_KEY_FIELD_ID = 'keyID';
 
 export const PropertyKeyField = connectVocabulary(
-    ({ vocabulary }: VocabularyProp) =>
+    ({ vocabulary, skipValidation }: VocabularyProp & ValidationProp) =>
         <Field
             name={PROPERTY_KEY_FIELD_NAME}
             component={PropertyKeyInput}
             vocabulary={vocabulary}
-            validate={getValidation(vocabulary)} />
+            validate={skipValidation ? undefined : getValidation(vocabulary)} />
 );
 
-export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
+const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & VocabularyProp) =>
     <FormName children={data => (
         <Autocomplete
             label='Key'
@@ -32,7 +32,7 @@ export const PropertyKeyInput = ({ vocabulary, ...props }: WrappedFieldProps & V
             onBlur={handleBlur(PROPERTY_KEY_FIELD_ID, data.form, props.meta, props.input, getTagKeyID(props.input.value, vocabulary))}
             {...buildProps(props)}
         />
-    )}/>;
+    )} />;
 
 const getValidation = memoize(
     (vocabulary: Vocabulary) =>

diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx
index 4df44619a635ad4b56c24e11dca1f9d332f58b96..99745199feebe96b7dad0ca80cb140da4c6853e2 100644 (file)
--- a/src/views-components/resource-properties-form/property-value-field.tsx
+++ b/src/views-components/resource-properties-form/property-value-field.tsx
@@ -8,7 +8,7 @@ import { compose } from 'redux';
 import { Autocomplete } from '~/components/autocomplete/autocomplete';
 import { Vocabulary, isStrictTag, getTagValues, getTagValueID } from '~/models/vocabulary';
 import { PROPERTY_KEY_FIELD_ID } from '~/views-components/resource-properties-form/property-key-field';
-import { handleSelect, handleBlur, VocabularyProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common';
+import { handleSelect, handleBlur, VocabularyProp, ValidationProp, connectVocabulary, buildProps } from '~/views-components/resource-properties-form/property-field-common';
 import { TAG_VALUE_VALIDATION } from '~/validators/validators';
 import { escapeRegExp } from '~/common/regexp.ts';
 
@@ -16,24 +16,26 @@ interface PropertyKeyProp {
     propertyKey: string;
 }
 
-export type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp;
+type PropertyValueFieldProps = VocabularyProp & PropertyKeyProp & ValidationProp;
 
 export const PROPERTY_VALUE_FIELD_NAME = 'value';
 export const PROPERTY_VALUE_FIELD_ID = 'valueID';
 
-export const PropertyValueField = compose(
+const connectVocabularyAndPropertyKey = compose(
     connectVocabulary,
-    formValues({ propertyKey: PROPERTY_KEY_FIELD_ID })
-)(
-    (props: PropertyValueFieldProps) =>
+    formValues({ propertyKey: PROPERTY_KEY_FIELD_ID }),
+);
+
+export const PropertyValueField = connectVocabularyAndPropertyKey(
+    ({ skipValidation, ...props }: PropertyValueFieldProps) =>
         <Field
             name={PROPERTY_VALUE_FIELD_NAME}
             component={PropertyValueInput}
-            validate={getValidation(props)}
+            validate={skipValidation ? undefined : getValidation(props)}
             {...props} />
 );
 
-export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
+const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: WrappedFieldProps & PropertyValueFieldProps) =>
     <FormName children={data => (
         <Autocomplete
             label='Value'
@@ -42,7 +44,7 @@ export const PropertyValueInput = ({ vocabulary, propertyKey, ...props }: Wrappe
             onBlur={handleBlur(PROPERTY_VALUE_FIELD_ID, data.form, props.meta, props.input, getTagValueID(propertyKey, props.input.value, vocabulary))}
             {...buildProps(props)}
         />
-    )}/>;
+    )} />;
 
 const getValidation = (props: PropertyValueFieldProps) =>
     isStrictTag(props.propertyKey, props.vocabulary)
@@ -59,4 +61,3 @@ const getSuggestions = (value: string, tagName: string, vocabulary: Vocabulary)
     const re = new RegExp(escapeRegExp(value), "i");
     return getTagValues(tagName, vocabulary).filter(v => re.test(v.label) && v.label !== value);
 };
-

diff --git a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
index d4044f958d55b0d1c270232b32469c0c74fe3559..eb049b7625262dfe5caee013d21681f8df3bc0ae 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-properties-view.tsx
@@ -3,21 +3,23 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Dispatch } from 'redux';
+import { Dispatch, compose } from 'redux';
 import { connect } from 'react-redux';
 import { InjectedFormProps, formValueSelector } from 'redux-form';
 import { Grid, withStyles, StyleRulesCallback, WithStyles, Button } from '@material-ui/core';
 import { RootState } from '~/store/store';
 import {
-    SEARCH_BAR_ADVANCE_FORM_NAME,
-    changeAdvanceFormProperty,
-    updateAdvanceFormProperties
+    SEARCH_BAR_ADVANCED_FORM_NAME,
+    changeAdvancedFormProperty,
+    resetAdvancedFormProperty
 } from '~/store/search-bar/search-bar-actions';
 import { PropertyValue } from '~/models/search-bar';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { SearchBarKeyField, SearchBarValueField } from '~/views-components/form-fields/search-bar-form-fields';
 import { Chips } from '~/components/chips/chips';
 import { formatPropertyValue } from "~/common/formatters";
+import { Vocabulary } from '~/models/vocabulary';
+import { connectVocabulary } from '../resource-properties-form/property-field-common';
 
 type CssRules = 'label' | 'button';
 
@@ -38,11 +40,12 @@ interface SearchBarAdvancedPropertiesViewDataProps {
     pristine: boolean;
     propertyValues: PropertyValue;
     fields: PropertyValue[];
+    vocabulary: Vocabulary;
 }
 
 interface SearchBarAdvancedPropertiesViewActionProps {
     setProps: () => void;
-    addProp: (propertyValues: PropertyValue) => void;
+    setProp: (propertyValues: PropertyValue, properties: PropertyValue[]) => void;
     getAllFields: (propertyValues: PropertyValue[]) => PropertyValue[] | [];
 }
 
@@ -50,30 +53,37 @@ type SearchBarAdvancedPropertiesViewProps = SearchBarAdvancedPropertiesViewDataP
     & SearchBarAdvancedPropertiesViewActionProps
     & InjectedFormProps & WithStyles<CssRules>;
 
-const selector = formValueSelector(SEARCH_BAR_ADVANCE_FORM_NAME);
+const selector = formValueSelector(SEARCH_BAR_ADVANCED_FORM_NAME);
 const mapStateToProps = (state: RootState) => {
     return {
-        propertyValues: selector(state, 'key', 'value')
+        propertyValues: selector(state, 'key', 'value', 'keyID', 'valueID')
     };
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     setProps: (propertyValues: PropertyValue[]) => {
-        dispatch<any>(changeAdvanceFormProperty('properties', propertyValues));
+        dispatch<any>(changeAdvancedFormProperty('properties', propertyValues));
     },
-    addProp: (propertyValues: PropertyValue) => {
-        dispatch<any>(updateAdvanceFormProperties(propertyValues));
-        dispatch<any>(changeAdvanceFormProperty('key'));
-        dispatch<any>(changeAdvanceFormProperty('value'));
+    setProp: (propertyValue: PropertyValue, properties: PropertyValue[]) => {
+        dispatch<any>(changeAdvancedFormProperty(
+            'properties',
+            [...properties.filter(e => e.keyID! !== propertyValue.keyID!), propertyValue]
+        ));
+        dispatch<any>(resetAdvancedFormProperty('key'));
+        dispatch<any>(resetAdvancedFormProperty('value'));
+        dispatch<any>(resetAdvancedFormProperty('keyID'));
+        dispatch<any>(resetAdvancedFormProperty('valueID'));
     },
     getAllFields: (fields: any) => {
         return fields.getAll() || [];
     }
 });
 
-export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispatchToProps)(
+export const SearchBarAdvancedPropertiesView = compose(
+    connectVocabulary,
+    connect(mapStateToProps, mapDispatchToProps))(
     withStyles(styles)(
-        ({ classes, fields, propertyValues, setProps, addProp, getAllFields }: SearchBarAdvancedPropertiesViewProps) =>
+        ({ classes, fields, propertyValues, setProps, setProp, getAllFields, vocabulary }: SearchBarAdvancedPropertiesViewProps) =>
             <Grid container item xs={12} spacing={16}>
                 <Grid item xs={2} className={classes.label}>Properties</Grid>
                 <Grid item xs={4}>
@@ -83,7 +93,7 @@ export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispa
                     <SearchBarValueField />
                 </Grid>
                 <Grid container item xs={2} justify='flex-end' alignItems="center">
-                    <Button className={classes.button} onClick={() => addProp(propertyValues)}
+                    <Button className={classes.button} onClick={() => setProp(propertyValues, getAllFields(fields))}
                         color="primary"
                         size='small'
                         variant="contained"
@@ -96,7 +106,7 @@ export const SearchBarAdvancedPropertiesView = connect(mapStateToProps, mapDispa
                     <Chips values={getAllFields(fields)}
                         deletable
                         onChange={setProps}
-                        getLabel={(field: PropertyValue) => formatPropertyValue(field)} />
+                        getLabel={(field: PropertyValue) => formatPropertyValue(field, vocabulary)} />
                 </Grid>
             </Grid>
     )

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index b001cb3eb1f1920e0b08ec1f50ff95e4e9aea1fb..71d32ad7e95dd51efa91ee4794b6e4172154cbc1 100644 (file)
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -7,13 +7,13 @@ import { reduxForm, InjectedFormProps, reset } from 'redux-form';
 import { compose, Dispatch } from 'redux';
 import { Paper, StyleRulesCallback, withStyles, WithStyles, Button, Grid, IconButton, CircularProgress } from '@material-ui/core';
 import {
-    SEARCH_BAR_ADVANCE_FORM_NAME, SEARCH_BAR_ADVANCE_FORM_PICKER_ID,
-    searchAdvanceData,
+    SEARCH_BAR_ADVANCED_FORM_NAME, SEARCH_BAR_ADVANCED_FORM_PICKER_ID,
+    searchAdvancedData,
     setSearchValueFromAdvancedData
 } from '~/store/search-bar/search-bar-actions';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { CloseIcon } from '~/components/icon/icon';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedFormData } from '~/models/search-bar';
 import {
     SearchBarTypeField, SearchBarClusterField, SearchBarProjectField, SearchBarTrashField,
     SearchBarDateFromField, SearchBarDateToField, SearchBarPropertiesField,
@@ -100,15 +100,15 @@ const validate = (values: any) => {
 };
 
 export const SearchBarAdvancedView = compose(
-    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewProps>({
-        form: SEARCH_BAR_ADVANCE_FORM_NAME,
+    reduxForm<SearchBarAdvancedFormData, SearchBarAdvancedViewProps>({
+        form: SEARCH_BAR_ADVANCED_FORM_NAME,
         validate,
-        onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
-            dispatch<any>(searchAdvanceData(data));
-            dispatch(reset(SEARCH_BAR_ADVANCE_FORM_NAME));
-            dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCE_FORM_PICKER_ID }));
+        onSubmit: (data: SearchBarAdvancedFormData, dispatch: Dispatch) => {
+            dispatch<any>(searchAdvancedData(data));
+            dispatch(reset(SEARCH_BAR_ADVANCED_FORM_NAME));
+            dispatch(treePickerActions.DEACTIVATE_TREE_PICKER_NODE({ pickerId: SEARCH_BAR_ADVANCED_FORM_PICKER_ID }));
         },
-        onChange: (data: SearchBarAdvanceFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvanceFormData) => {
+        onChange: (data: SearchBarAdvancedFormData, dispatch: Dispatch, props: any, prevData: SearchBarAdvancedFormData) => {
             dispatch<any>(setSearchValueFromAdvancedData(data, prevData));
         },
     }),

diff --git a/src/views-components/search-bar/search-bar-save-queries.tsx b/src/views-components/search-bar/search-bar-save-queries.tsx
index 5234c214cb9050d950781bf9224c36c030d9279d..af1c24b41dd5c4e176f7914159871e065f82cad6 100644 (file)
--- a/src/views-components/search-bar/search-bar-save-queries.tsx
+++ b/src/views-components/search-bar/search-bar-save-queries.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, IconButton } from '@material-ui/core';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedFormData } from '~/models/search-bar';
 import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
 import { getQueryFromAdvancedData } from "~/store/search-bar/search-bar-actions";
 
@@ -31,14 +31,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 export interface SearchBarSavedQueriesDataProps {
-    savedQueries: SearchBarAdvanceFormData[];
+    savedQueries: SearchBarAdvancedFormData[];
     selectedItem: SearchBarSelectedItem;
 }
 
 export interface SearchBarSavedQueriesActionProps {
     onSearch: (searchValue: string) => void;
     deleteSavedQuery: (id: number) => void;
-    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
+    editSavedQuery: (data: SearchBarAdvancedFormData, id: number) => void;
 }
 
 type SearchBarSavedQueriesProps = SearchBarSavedQueriesDataProps

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 176ca018b420eff2a8ef6e3ae951d91cacb1e825..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>;
@@ -132,20 +136,15 @@ const handleInputClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
 
 const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) => {
     e.stopPropagation();
-    if (props.isPopoverOpen) {
-        if (props.currentView === SearchView.ADVANCED) {
-            props.closeView();
-        } else {
-            props.setAdvancedDataFromSearchValue(props.searchValue);
-            props.onSetView(SearchView.ADVANCED);
-        }
+    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..6e8ec0813f594d8de246eac446eef19d08f30975 100644 (file)
--- a/src/views-components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -16,10 +16,11 @@ import {
     navigateToItem,
     editSavedQuery,
     changeData,
-    submitData, moveUp, moveDown, setAdvancedDataFromSearchValue
+    submitData, moveUp, moveDown, setAdvancedDataFromSearchValue, SEARCH_BAR_ADVANCED_FORM_NAME
 } 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 { SearchBarAdvancedFormData } from '~/models/search-bar';
+import { Vocabulary } from '~/models/vocabulary';
 
 const mapStateToProps = ({ searchBar, form }: RootState): SearchBarDataProps => {
     return {
@@ -29,10 +30,10 @@ const mapStateToProps = ({ searchBar, form }: RootState): SearchBarDataProps =>
         searchResults: searchBar.searchResults,
         selectedItem: searchBar.selectedItem,
         savedQueries: searchBar.savedQueries,
-        tags: form.searchBarAdvanceFormName,
-        saveQuery: form.searchBarAdvanceFormName &&
-            form.searchBarAdvanceFormName.values &&
-            form.searchBarAdvanceFormName.values.saveQuery
+        tags: form[SEARCH_BAR_ADVANCED_FORM_NAME],
+        saveQuery: form[SEARCH_BAR_ADVANCED_FORM_NAME] &&
+            form[SEARCH_BAR_ADVANCED_FORM_NAME].values &&
+            form[SEARCH_BAR_ADVANCED_FORM_NAME].values!.saveQuery
     };
 };
 
@@ -47,10 +48,10 @@ const mapDispatchToProps = (dispatch: Dispatch): SearchBarActionProps => ({
     deleteSavedQuery: (id: number) => dispatch<any>(deleteSavedQuery(id)),
     openSearchView: () => dispatch<any>(openSearchView()),
     navigateTo: (uuid: string) => dispatch<any>(navigateToItem(uuid)),
-    editSavedQuery: (data: SearchBarAdvanceFormData) => dispatch<any>(editSavedQuery(data)),
+    editSavedQuery: (data: SearchBarAdvancedFormData) => 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);

diff --git a/src/views/search-results-panel/search-results-panel.tsx b/src/views/search-results-panel/search-results-panel.tsx
index 7de1abd3c501937ae9e7dcbf8aac97fb4b26d3ce..0cc52e5efc9a0d7186e8e97853efe5b3015cb620 100644 (file)
--- a/src/views/search-results-panel/search-results-panel.tsx
+++ b/src/views/search-results-panel/search-results-panel.tsx
@@ -10,13 +10,13 @@ import { navigateTo } from '~/store/navigation/navigation-action';
 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
 import { SearchResultsPanelView } from '~/views/search-results-panel/search-results-panel-view';
 import { RootState } from '~/store/store';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchBarAdvancedFormData } from '~/models/search-bar';
 import { User } from "~/models/user";
 import { Config } from '~/common/config';
 import { Session } from "~/models/session";
 
 export interface SearchResultsPanelDataProps {
-    data: SearchBarAdvanceFormData;
+    data: SearchBarAdvancedFormData;
     user: User;
     sessions: Session[];
     remoteHostsConfig: { [key: string]: Config };