@cccsaurora/howler-ui 2.13.0-dev.131 → 2.13.0-dev.133

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/components/routes/advanced/QueryEditor.js +8 -13
  2. package/components/routes/views/Views.js +25 -9
  3. package/package.json +1 -1
package/components/routes/advanced/QueryEditor.js CHANGED
@@ -26,18 +26,6 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
26
26
  _monaco.languages.register({ id: 'lucene' });
27
27
  _monaco.languages.register({ id: 'eql' });
28
28
  }, []);
29
- useEffect(() => {
30
- const handleKeyPress = event => {
31
- if (setFzfSearch && event.ctrlKey && event.key == 'r') {
32
- event.preventDefault();
33
- setFzfSearch(!fzfSearch);
34
- }
35
- };
36
- window.addEventListener('keydown', handleKeyPress);
37
- return () => {
38
- window.removeEventListener('keydown', handleKeyPress);
39
- };
40
- }, [fzfSearch, setFzfSearch]);
41
29
  useEffect(() => {
42
30
  if (!monaco) {
43
31
  return;
@@ -90,6 +78,13 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
90
78
  fontSize,
91
79
  ...editorOptions
92
80
  }), [setQuery, fontSize, editorOptions]);
93
- return (_jsx(Box, { sx: { flex: 1 }, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
81
+ const handleKeyPress = useCallback((event) => {
82
+ if (setFzfSearch && event.ctrlKey && event.key == 'r') {
83
+ event.preventDefault();
84
+ event.stopPropagation();
85
+ setFzfSearch(!fzfSearch);
86
+ }
87
+ }, [fzfSearch, setFzfSearch]);
88
+ return (_jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
94
89
  };
95
90
  export default memo(QueryEditor);
package/components/routes/views/Views.js CHANGED
@@ -39,7 +39,7 @@ const ViewsBase = () => {
39
39
  const [phrase, setPhrase] = useState('');
40
40
  const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
41
41
  const [response, setResponse] = useState(null);
42
- const [types, setTypes] = useState([]);
42
+ const [type, setType] = useState(searchParams.get('type') || null);
43
43
  const [hasError, setHasError] = useState(false);
44
44
  const [searching, setSearching] = useState(false);
45
45
  const [favouritesOnly, setFavouritesOnly] = useState(false);
@@ -58,7 +58,7 @@ const ViewsBase = () => {
58
58
  setSearchParams(searchParams, { replace: true });
59
59
  const searchTerm = phrase ? `*${sanitizeLuceneQuery(phrase)}*` : '*';
60
60
  const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
61
- const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' OR ') || '*'}${types.includes('personal') ? ' OR readonly' : ''})`;
61
+ const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
62
62
  const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
63
63
  setResponse(await dispatchApi(api.search.view.post({
64
64
  query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
@@ -78,7 +78,7 @@ const ViewsBase = () => {
78
78
  searchParams,
79
79
  user.username,
80
80
  user.favourite_views,
81
- types,
81
+ type,
82
82
  favouritesOnly,
83
83
  dispatchApi,
84
84
  pageCount,
@@ -132,9 +132,29 @@ const ViewsBase = () => {
132
132
  setDefaultViewLoading(false);
133
133
  }
134
134
  }, [fetchViews]);
135
+ const onTypeChange = useCallback(async (_type) => {
136
+ setType(_type);
137
+ if (_type) {
138
+ searchParams.delete('type');
139
+ searchParams.set('type', _type);
140
+ setSearchParams(searchParams, { replace: true });
141
+ }
142
+ else if (searchParams.has('type')) {
143
+ searchParams.delete('type');
144
+ setSearchParams(searchParams, { replace: true });
145
+ }
146
+ }, [searchParams, setSearchParams]);
135
147
  useEffect(() => {
148
+ let changed = false;
136
149
  if (!searchParams.has('offset')) {
137
150
  searchParams.set('offset', '0');
151
+ changed = true;
152
+ }
153
+ if (searchParams.has('type') && !['personal', 'global'].includes(searchParams.get('type'))) {
154
+ searchParams.delete('type');
155
+ changed = true;
156
+ }
157
+ if (changed) {
138
158
  setSearchParams(searchParams, { replace: true });
139
159
  }
140
160
  }, [searchParams, setSearchParams]);
@@ -150,12 +170,8 @@ const ViewsBase = () => {
150
170
  onSearch();
151
171
  }
152
172
  // eslint-disable-next-line react-hooks/exhaustive-deps
153
- }, [offset, favouritesOnly, types]);
154
- return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: types, onChange: (__, _types) => {
155
- if (_types) {
156
- setTypes(_types.length < 2 ? _types : []);
157
- }
158
- }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
173
+ }, [offset, favouritesOnly, type]);
174
+ return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
159
175
  _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
160
176
  v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
161
177
  (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
package/package.json CHANGED
@@ -96,7 +96,7 @@
96
96
  "internal-slot": "1.0.7"
97
97
  },
98
98
  "type": "module",
99
- "version": "2.13.0-dev.131",
99
+ "version": "2.13.0-dev.133",
100
100
  "exports": {
101
101
  "./i18n": "./i18n.js",
102
102
  "./index.css": "./index.css",