@backstage/plugin-search 0.4.16 → 0.5.1
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.
- package/CHANGELOG.md +75 -0
- package/dist/esm/{index-6f14e751.esm.js → index-04d32ed0.esm.js} +6 -5
- package/dist/esm/index-04d32ed0.esm.js.map +1 -0
- package/dist/esm/{index-4ef7a5c8.esm.js → index-3cbe4558.esm.js} +6 -5
- package/dist/esm/index-3cbe4558.esm.js.map +1 -0
- package/dist/esm/{index-9c0d67e6.esm.js → index-893ec2f5.esm.js} +393 -245
- package/dist/esm/index-893ec2f5.esm.js.map +1 -0
- package/dist/esm/{index-3eebaa65.esm.js → index-bc274d46.esm.js} +13 -12
- package/dist/esm/{index-3eebaa65.esm.js.map → index-bc274d46.esm.js.map} +1 -1
- package/dist/esm/index-bfe6f2c6.esm.js +23 -0
- package/dist/esm/index-bfe6f2c6.esm.js.map +1 -0
- package/dist/esm/index-ca07a7cd.esm.js +38 -0
- package/dist/esm/index-ca07a7cd.esm.js.map +1 -0
- package/dist/esm/index-e9bf7392.esm.js +23 -0
- package/dist/esm/index-e9bf7392.esm.js.map +1 -0
- package/dist/index.d.ts +29 -13
- package/dist/index.esm.js +6 -5
- package/dist/index.esm.js.map +1 -1
- package/package.json +15 -14
- package/dist/esm/index-4ef7a5c8.esm.js.map +0 -1
- package/dist/esm/index-6f14e751.esm.js.map +0 -1
- package/dist/esm/index-92a9e2ec.esm.js +0 -18
- package/dist/esm/index-92a9e2ec.esm.js.map +0 -1
- package/dist/esm/index-9c0d67e6.esm.js.map +0 -1
- package/dist/esm/index-ee8d2563.esm.js +0 -46
- package/dist/esm/index-ee8d2563.esm.js.map +0 -1
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import { createApiRef, useApi, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
|
|
2
2
|
import { ResponseError } from '@backstage/errors';
|
|
3
3
|
import qs from 'qs';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
|
|
6
|
+
import { ListItem, ListItemIcon, ListItemText, Box, Divider, makeStyles, IconButton, Typography, Card, CardHeader, Button, CardContent, Select, MenuItem, List, Checkbox, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Chip } from '@material-ui/core';
|
|
7
|
+
import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
|
|
7
8
|
import FilterListIcon from '@material-ui/icons/FilterList';
|
|
8
9
|
import { usePrevious, useAsync, useDebounce, useEffectOnce } from 'react-use';
|
|
9
10
|
import SearchIcon from '@material-ui/icons/Search';
|
|
10
11
|
import ClearButton from '@material-ui/icons/Clear';
|
|
11
|
-
import { useOutlet, useLocation } from 'react-router';
|
|
12
12
|
import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
|
|
13
|
+
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
|
|
14
|
+
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
|
|
15
|
+
import { createSvgIcon } from '@material-ui/core/utils';
|
|
16
|
+
import { useOutlet, useLocation } from 'react-router';
|
|
13
17
|
import InputBase$1 from '@material-ui/core/InputBase';
|
|
14
18
|
import IconButton$1 from '@material-ui/core/IconButton';
|
|
15
19
|
import { Alert } from '@material-ui/lab';
|
|
16
20
|
import { catalogApiRef } from '@backstage/plugin-catalog-react';
|
|
17
21
|
import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
|
|
18
|
-
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
|
|
19
|
-
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
|
|
20
22
|
import { useNavigate } from 'react-router-dom';
|
|
21
23
|
|
|
22
24
|
const searchApiRef = createApiRef({
|
|
@@ -33,7 +35,7 @@ class SearchClient {
|
|
|
33
35
|
const queryString = qs.stringify(query);
|
|
34
36
|
const url = `${await this.discoveryApi.getBaseUrl("search/query")}?${queryString}`;
|
|
35
37
|
const response = await fetch(url, {
|
|
36
|
-
headers: token ? {Authorization: `Bearer ${token}`} : {}
|
|
38
|
+
headers: token ? { Authorization: `Bearer ${token}` } : {}
|
|
37
39
|
});
|
|
38
40
|
if (!response.ok) {
|
|
39
41
|
throw await ResponseError.fromResponse(response);
|
|
@@ -42,7 +44,25 @@ class SearchClient {
|
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
const
|
|
47
|
+
const DefaultResultListItem$1 = ({
|
|
48
|
+
result,
|
|
49
|
+
icon,
|
|
50
|
+
secondaryAction
|
|
51
|
+
}) => {
|
|
52
|
+
return /* @__PURE__ */ React__default.createElement(Link, {
|
|
53
|
+
to: result.location
|
|
54
|
+
}, /* @__PURE__ */ React__default.createElement(ListItem, {
|
|
55
|
+
alignItems: "center"
|
|
56
|
+
}, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
|
|
57
|
+
primaryTypographyProps: { variant: "h6" },
|
|
58
|
+
primary: result.title,
|
|
59
|
+
secondary: result.text
|
|
60
|
+
}), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
|
|
61
|
+
alignItems: "flex-end"
|
|
62
|
+
}, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const useStyles$9 = makeStyles((theme) => ({
|
|
46
66
|
filters: {
|
|
47
67
|
width: "250px",
|
|
48
68
|
display: "flex"
|
|
@@ -55,19 +75,19 @@ const FiltersButton$1 = ({
|
|
|
55
75
|
numberOfSelectedFilters,
|
|
56
76
|
handleToggleFilters
|
|
57
77
|
}) => {
|
|
58
|
-
const classes = useStyles$
|
|
59
|
-
return /* @__PURE__ */
|
|
78
|
+
const classes = useStyles$9();
|
|
79
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
|
60
80
|
className: classes.filters
|
|
61
|
-
}, /* @__PURE__ */
|
|
81
|
+
}, /* @__PURE__ */ React__default.createElement(IconButton, {
|
|
62
82
|
className: classes.icon,
|
|
63
83
|
"aria-label": "settings",
|
|
64
84
|
onClick: handleToggleFilters
|
|
65
|
-
}, /* @__PURE__ */
|
|
85
|
+
}, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
|
|
66
86
|
variant: "h6"
|
|
67
87
|
}, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
|
|
68
88
|
};
|
|
69
89
|
|
|
70
|
-
const useStyles$
|
|
90
|
+
const useStyles$8 = makeStyles((theme) => ({
|
|
71
91
|
filters: {
|
|
72
92
|
background: "transparent",
|
|
73
93
|
boxShadow: "0px 0px 0px 0px"
|
|
@@ -86,22 +106,22 @@ const Filters$1 = ({
|
|
|
86
106
|
updateSelected,
|
|
87
107
|
updateChecked
|
|
88
108
|
}) => {
|
|
89
|
-
const classes = useStyles$
|
|
90
|
-
return /* @__PURE__ */
|
|
109
|
+
const classes = useStyles$8();
|
|
110
|
+
return /* @__PURE__ */ React__default.createElement(Card, {
|
|
91
111
|
className: classes.filters
|
|
92
|
-
}, /* @__PURE__ */
|
|
93
|
-
title: /* @__PURE__ */
|
|
112
|
+
}, /* @__PURE__ */ React__default.createElement(CardHeader, {
|
|
113
|
+
title: /* @__PURE__ */ React__default.createElement(Typography, {
|
|
94
114
|
variant: "h6"
|
|
95
115
|
}, "Filters"),
|
|
96
|
-
action: /* @__PURE__ */
|
|
116
|
+
action: /* @__PURE__ */ React__default.createElement(Button, {
|
|
97
117
|
color: "primary",
|
|
98
118
|
onClick: () => resetFilters()
|
|
99
119
|
}, "CLEAR ALL")
|
|
100
|
-
}), /* @__PURE__ */
|
|
120
|
+
}), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
101
121
|
variant: "subtitle2"
|
|
102
|
-
}, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */
|
|
122
|
+
}, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
103
123
|
variant: "subtitle2"
|
|
104
|
-
}, "Kind"), /* @__PURE__ */
|
|
124
|
+
}, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
|
|
105
125
|
id: "outlined-select",
|
|
106
126
|
onChange: (e) => {
|
|
107
127
|
var _a;
|
|
@@ -110,22 +130,22 @@ const Filters$1 = ({
|
|
|
110
130
|
variant: "outlined",
|
|
111
131
|
className: classes.dropdown,
|
|
112
132
|
value: filters.selected
|
|
113
|
-
}, filterOptions.kind.map((filter) => /* @__PURE__ */
|
|
133
|
+
}, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
|
|
114
134
|
selected: filter === "",
|
|
115
135
|
dense: true,
|
|
116
136
|
key: filter,
|
|
117
137
|
value: filter
|
|
118
|
-
}, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */
|
|
138
|
+
}, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
119
139
|
variant: "subtitle2"
|
|
120
|
-
}, "Lifecycle"), /* @__PURE__ */
|
|
140
|
+
}, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
|
|
121
141
|
disablePadding: true,
|
|
122
142
|
dense: true
|
|
123
|
-
}, filterOptions.lifecycle.map((filter) => /* @__PURE__ */
|
|
143
|
+
}, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
|
|
124
144
|
key: filter,
|
|
125
145
|
dense: true,
|
|
126
146
|
button: true,
|
|
127
147
|
onClick: () => updateChecked(filter)
|
|
128
|
-
}, /* @__PURE__ */
|
|
148
|
+
}, /* @__PURE__ */ React__default.createElement(Checkbox, {
|
|
129
149
|
edge: "start",
|
|
130
150
|
disableRipple: true,
|
|
131
151
|
className: classes.checkbox,
|
|
@@ -134,7 +154,7 @@ const Filters$1 = ({
|
|
|
134
154
|
tabIndex: -1,
|
|
135
155
|
value: filter,
|
|
136
156
|
name: filter
|
|
137
|
-
}), /* @__PURE__ */
|
|
157
|
+
}), /* @__PURE__ */ React__default.createElement(ListItemText, {
|
|
138
158
|
id: filter,
|
|
139
159
|
primary: filter
|
|
140
160
|
}))))));
|
|
@@ -156,6 +176,8 @@ const SearchContextProvider = ({
|
|
|
156
176
|
const [filters, setFilters] = useState(initialState.filters);
|
|
157
177
|
const [term, setTerm] = useState(initialState.term);
|
|
158
178
|
const [types, setTypes] = useState(initialState.types);
|
|
179
|
+
const [open, setOpen] = useState(false);
|
|
180
|
+
const toggleModal = useCallback(() => setOpen((prevState) => !prevState), []);
|
|
159
181
|
const prevTerm = usePrevious(term);
|
|
160
182
|
const result = useAsync(() => searchApi.query({
|
|
161
183
|
term,
|
|
@@ -182,6 +204,8 @@ const SearchContextProvider = ({
|
|
|
182
204
|
result,
|
|
183
205
|
filters,
|
|
184
206
|
setFilters,
|
|
207
|
+
open,
|
|
208
|
+
toggleModal,
|
|
185
209
|
term,
|
|
186
210
|
setTerm,
|
|
187
211
|
types,
|
|
@@ -191,7 +215,7 @@ const SearchContextProvider = ({
|
|
|
191
215
|
fetchNextPage: hasNextPage ? fetchNextPage : void 0,
|
|
192
216
|
fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
|
|
193
217
|
};
|
|
194
|
-
return /* @__PURE__ */
|
|
218
|
+
return /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
|
|
195
219
|
value,
|
|
196
220
|
children
|
|
197
221
|
});
|
|
@@ -205,51 +229,56 @@ const useSearch = () => {
|
|
|
205
229
|
};
|
|
206
230
|
|
|
207
231
|
const SearchBarBase = ({
|
|
232
|
+
autoFocus,
|
|
208
233
|
value,
|
|
209
234
|
onChange,
|
|
210
235
|
onSubmit,
|
|
211
236
|
className,
|
|
212
|
-
placeholder: overridePlaceholder
|
|
237
|
+
placeholder: overridePlaceholder,
|
|
238
|
+
clearButton = true
|
|
213
239
|
}) => {
|
|
214
240
|
const configApi = useApi(configApiRef);
|
|
215
|
-
const onKeyDown =
|
|
241
|
+
const onKeyDown = React__default.useCallback((e) => {
|
|
216
242
|
if (onSubmit && e.key === "Enter") {
|
|
217
243
|
onSubmit();
|
|
218
244
|
}
|
|
219
245
|
}, [onSubmit]);
|
|
220
|
-
const handleClear =
|
|
246
|
+
const handleClear = React__default.useCallback(() => {
|
|
221
247
|
onChange("");
|
|
222
248
|
}, [onChange]);
|
|
223
249
|
const placeholder = overridePlaceholder != null ? overridePlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
|
|
224
|
-
return /* @__PURE__ */
|
|
250
|
+
return /* @__PURE__ */ React__default.createElement(InputBase, {
|
|
251
|
+
autoFocus,
|
|
225
252
|
"data-testid": "search-bar-next",
|
|
226
253
|
fullWidth: true,
|
|
227
254
|
placeholder,
|
|
228
255
|
value,
|
|
229
256
|
onChange: (e) => onChange(e.target.value),
|
|
230
|
-
inputProps: {"aria-label": "Search"},
|
|
231
|
-
startAdornment: /* @__PURE__ */
|
|
257
|
+
inputProps: { "aria-label": "Search" },
|
|
258
|
+
startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
|
|
232
259
|
position: "start"
|
|
233
|
-
}, /* @__PURE__ */
|
|
260
|
+
}, /* @__PURE__ */ React__default.createElement(IconButton, {
|
|
234
261
|
"aria-label": "Query",
|
|
235
262
|
disabled: true
|
|
236
|
-
}, /* @__PURE__ */
|
|
237
|
-
endAdornment: /* @__PURE__ */
|
|
263
|
+
}, /* @__PURE__ */ React__default.createElement(SearchIcon, null))),
|
|
264
|
+
endAdornment: clearButton && /* @__PURE__ */ React__default.createElement(InputAdornment, {
|
|
238
265
|
position: "end"
|
|
239
|
-
}, /* @__PURE__ */
|
|
266
|
+
}, /* @__PURE__ */ React__default.createElement(IconButton, {
|
|
240
267
|
"aria-label": "Clear",
|
|
241
268
|
onClick: handleClear
|
|
242
|
-
}, /* @__PURE__ */
|
|
243
|
-
...className && {className},
|
|
244
|
-
...onSubmit && {onKeyDown}
|
|
269
|
+
}, /* @__PURE__ */ React__default.createElement(ClearButton, null))),
|
|
270
|
+
...className && { className },
|
|
271
|
+
...onSubmit && { onKeyDown }
|
|
245
272
|
});
|
|
246
273
|
};
|
|
247
274
|
const SearchBar$1 = ({
|
|
275
|
+
autoFocus,
|
|
248
276
|
className,
|
|
249
277
|
debounceTime = 0,
|
|
250
|
-
placeholder
|
|
278
|
+
placeholder,
|
|
279
|
+
clearButton = true
|
|
251
280
|
}) => {
|
|
252
|
-
const {term, setTerm} = useSearch();
|
|
281
|
+
const { term, setTerm } = useSearch();
|
|
253
282
|
const [value, setValue] = useState(term);
|
|
254
283
|
useEffect(() => {
|
|
255
284
|
setValue((prevValue) => prevValue !== term ? term : prevValue);
|
|
@@ -259,16 +288,18 @@ const SearchBar$1 = ({
|
|
|
259
288
|
setValue(newValue);
|
|
260
289
|
};
|
|
261
290
|
const handleClear = () => setValue("");
|
|
262
|
-
return /* @__PURE__ */
|
|
291
|
+
return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
|
|
292
|
+
autoFocus,
|
|
263
293
|
className,
|
|
264
294
|
value,
|
|
265
295
|
onChange: handleQuery,
|
|
266
296
|
onClear: handleClear,
|
|
267
|
-
placeholder
|
|
297
|
+
placeholder,
|
|
298
|
+
clearButton
|
|
268
299
|
});
|
|
269
300
|
};
|
|
270
301
|
|
|
271
|
-
const useStyles$
|
|
302
|
+
const useStyles$7 = makeStyles({
|
|
272
303
|
label: {
|
|
273
304
|
textTransform: "capitalize"
|
|
274
305
|
}
|
|
@@ -279,8 +310,8 @@ const CheckboxFilter = ({
|
|
|
279
310
|
defaultValue,
|
|
280
311
|
values = []
|
|
281
312
|
}) => {
|
|
282
|
-
const classes = useStyles$
|
|
283
|
-
const {filters, setFilters} = useSearch();
|
|
313
|
+
const classes = useStyles$7();
|
|
314
|
+
const { filters, setFilters } = useSearch();
|
|
284
315
|
useEffect(() => {
|
|
285
316
|
if (Array.isArray(defaultValue)) {
|
|
286
317
|
setFilters((prevFilters) => ({
|
|
@@ -291,29 +322,29 @@ const CheckboxFilter = ({
|
|
|
291
322
|
}, []);
|
|
292
323
|
const handleChange = (e) => {
|
|
293
324
|
const {
|
|
294
|
-
target: {value, checked}
|
|
325
|
+
target: { value, checked }
|
|
295
326
|
} = e;
|
|
296
327
|
setFilters((prevFilters) => {
|
|
297
|
-
const {[name]: filter, ...others} = prevFilters;
|
|
328
|
+
const { [name]: filter, ...others } = prevFilters;
|
|
298
329
|
const rest = (filter || []).filter((i) => i !== value);
|
|
299
330
|
const items = checked ? [...rest, value] : rest;
|
|
300
|
-
return items.length ? {...others, [name]: items} : others;
|
|
331
|
+
return items.length ? { ...others, [name]: items } : others;
|
|
301
332
|
});
|
|
302
333
|
};
|
|
303
|
-
return /* @__PURE__ */
|
|
334
|
+
return /* @__PURE__ */ React__default.createElement(FormControl, {
|
|
304
335
|
className,
|
|
305
336
|
fullWidth: true,
|
|
306
337
|
"data-testid": "search-checkboxfilter-next"
|
|
307
|
-
}, /* @__PURE__ */
|
|
338
|
+
}, /* @__PURE__ */ React__default.createElement(FormLabel, {
|
|
308
339
|
className: classes.label
|
|
309
340
|
}, name), values.map((value) => {
|
|
310
341
|
var _a;
|
|
311
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ React__default.createElement(FormControlLabel, {
|
|
312
343
|
key: value,
|
|
313
|
-
control: /* @__PURE__ */
|
|
344
|
+
control: /* @__PURE__ */ React__default.createElement(Checkbox, {
|
|
314
345
|
color: "primary",
|
|
315
346
|
tabIndex: -1,
|
|
316
|
-
inputProps: {"aria-labelledby": value},
|
|
347
|
+
inputProps: { "aria-labelledby": value },
|
|
317
348
|
value,
|
|
318
349
|
name: value,
|
|
319
350
|
onChange: handleChange,
|
|
@@ -329,8 +360,8 @@ const SelectFilter = ({
|
|
|
329
360
|
defaultValue,
|
|
330
361
|
values = []
|
|
331
362
|
}) => {
|
|
332
|
-
const classes = useStyles$
|
|
333
|
-
const {filters, setFilters} = useSearch();
|
|
363
|
+
const classes = useStyles$7();
|
|
364
|
+
const { filters, setFilters } = useSearch();
|
|
334
365
|
useEffect(() => {
|
|
335
366
|
if (typeof defaultValue === "string") {
|
|
336
367
|
setFilters((prevFilters) => ({
|
|
@@ -341,46 +372,266 @@ const SelectFilter = ({
|
|
|
341
372
|
}, []);
|
|
342
373
|
const handleChange = (e) => {
|
|
343
374
|
const {
|
|
344
|
-
target: {value}
|
|
375
|
+
target: { value }
|
|
345
376
|
} = e;
|
|
346
377
|
setFilters((prevFilters) => {
|
|
347
|
-
const {[name]: filter, ...others} = prevFilters;
|
|
348
|
-
return value ? {...others, [name]: value} : others;
|
|
378
|
+
const { [name]: filter, ...others } = prevFilters;
|
|
379
|
+
return value ? { ...others, [name]: value } : others;
|
|
349
380
|
});
|
|
350
381
|
};
|
|
351
|
-
return /* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ React__default.createElement(FormControl, {
|
|
352
383
|
className,
|
|
353
384
|
variant: "filled",
|
|
354
385
|
fullWidth: true,
|
|
355
386
|
"data-testid": "search-selectfilter-next"
|
|
356
|
-
}, /* @__PURE__ */
|
|
387
|
+
}, /* @__PURE__ */ React__default.createElement(InputLabel, {
|
|
357
388
|
className: classes.label,
|
|
358
389
|
margin: "dense"
|
|
359
|
-
}, name), /* @__PURE__ */
|
|
390
|
+
}, name), /* @__PURE__ */ React__default.createElement(Select, {
|
|
360
391
|
variant: "outlined",
|
|
361
392
|
value: filters[name] || "",
|
|
362
393
|
onChange: handleChange
|
|
363
|
-
}, /* @__PURE__ */
|
|
394
|
+
}, /* @__PURE__ */ React__default.createElement(MenuItem, {
|
|
364
395
|
value: ""
|
|
365
|
-
}, /* @__PURE__ */
|
|
396
|
+
}, /* @__PURE__ */ React__default.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
|
|
366
397
|
key: value,
|
|
367
398
|
value
|
|
368
399
|
}, value))));
|
|
369
400
|
};
|
|
370
|
-
const SearchFilter = ({component: Element, ...props}) => /* @__PURE__ */
|
|
401
|
+
const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React__default.createElement(Element, {
|
|
371
402
|
...props
|
|
372
403
|
});
|
|
373
|
-
SearchFilter.Checkbox = (props) => /* @__PURE__ */
|
|
404
|
+
SearchFilter.Checkbox = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
|
|
374
405
|
...props,
|
|
375
406
|
component: CheckboxFilter
|
|
376
407
|
});
|
|
377
|
-
SearchFilter.Select = (props) => /* @__PURE__ */
|
|
408
|
+
SearchFilter.Select = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
|
|
378
409
|
...props,
|
|
379
410
|
component: SelectFilter
|
|
380
411
|
});
|
|
381
412
|
const SearchFilterNext = SearchFilter;
|
|
382
413
|
|
|
383
|
-
|
|
414
|
+
var Launch = createSvgIcon( /*#__PURE__*/React.createElement("path", {
|
|
415
|
+
d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
|
|
416
|
+
}), 'Launch');
|
|
417
|
+
|
|
418
|
+
const SearchResultComponent = ({ children }) => {
|
|
419
|
+
const {
|
|
420
|
+
result: { loading, error, value }
|
|
421
|
+
} = useSearch();
|
|
422
|
+
if (loading) {
|
|
423
|
+
return /* @__PURE__ */ React__default.createElement(Progress, null);
|
|
424
|
+
}
|
|
425
|
+
if (error) {
|
|
426
|
+
return /* @__PURE__ */ React__default.createElement(ResponseErrorPanel, {
|
|
427
|
+
title: "Error encountered while fetching search results",
|
|
428
|
+
error
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
if (!(value == null ? void 0 : value.results.length)) {
|
|
432
|
+
return /* @__PURE__ */ React__default.createElement(EmptyState, {
|
|
433
|
+
missing: "data",
|
|
434
|
+
title: "Sorry, no results were found"
|
|
435
|
+
});
|
|
436
|
+
}
|
|
437
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({ results: value.results }));
|
|
438
|
+
};
|
|
439
|
+
|
|
440
|
+
const useStyles$6 = makeStyles((theme) => ({
|
|
441
|
+
root: {
|
|
442
|
+
display: "flex",
|
|
443
|
+
justifyContent: "space-between",
|
|
444
|
+
gap: theme.spacing(2),
|
|
445
|
+
margin: theme.spacing(2, 0)
|
|
446
|
+
}
|
|
447
|
+
}));
|
|
448
|
+
const SearchResultPager = () => {
|
|
449
|
+
const { fetchNextPage, fetchPreviousPage } = useSearch();
|
|
450
|
+
const classes = useStyles$6();
|
|
451
|
+
if (!fetchNextPage && !fetchPreviousPage) {
|
|
452
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
|
|
453
|
+
}
|
|
454
|
+
return /* @__PURE__ */ React__default.createElement("nav", {
|
|
455
|
+
"arial-label": "pagination navigation",
|
|
456
|
+
className: classes.root
|
|
457
|
+
}, /* @__PURE__ */ React__default.createElement(Button, {
|
|
458
|
+
"aria-label": "previous page",
|
|
459
|
+
disabled: !fetchPreviousPage,
|
|
460
|
+
onClick: fetchPreviousPage,
|
|
461
|
+
startIcon: /* @__PURE__ */ React__default.createElement(ArrowBackIosIcon, null)
|
|
462
|
+
}, "Previous"), /* @__PURE__ */ React__default.createElement(Button, {
|
|
463
|
+
"aria-label": "next page",
|
|
464
|
+
disabled: !fetchNextPage,
|
|
465
|
+
onClick: fetchNextPage,
|
|
466
|
+
endIcon: /* @__PURE__ */ React__default.createElement(ArrowForwardIosIcon, null)
|
|
467
|
+
}, "Next"));
|
|
468
|
+
};
|
|
469
|
+
|
|
470
|
+
const rootRouteRef = createRouteRef({
|
|
471
|
+
id: "search"
|
|
472
|
+
});
|
|
473
|
+
const rootNextRouteRef = createRouteRef({
|
|
474
|
+
id: "search:next"
|
|
475
|
+
});
|
|
476
|
+
const searchPlugin = createPlugin({
|
|
477
|
+
id: "search",
|
|
478
|
+
apis: [
|
|
479
|
+
createApiFactory({
|
|
480
|
+
api: searchApiRef,
|
|
481
|
+
deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
|
|
482
|
+
factory: ({ discoveryApi, identityApi }) => {
|
|
483
|
+
return new SearchClient({ discoveryApi, identityApi });
|
|
484
|
+
}
|
|
485
|
+
})
|
|
486
|
+
],
|
|
487
|
+
routes: {
|
|
488
|
+
root: rootRouteRef,
|
|
489
|
+
nextRoot: rootNextRouteRef
|
|
490
|
+
}
|
|
491
|
+
});
|
|
492
|
+
const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
|
|
493
|
+
name: "SearchPage",
|
|
494
|
+
component: () => import('./index-04d32ed0.esm.js').then((m) => m.SearchPage),
|
|
495
|
+
mountPoint: rootRouteRef
|
|
496
|
+
}));
|
|
497
|
+
const SearchPageNext = searchPlugin.provide(createRoutableExtension({
|
|
498
|
+
name: "SearchPageNext",
|
|
499
|
+
component: () => import('./index-04d32ed0.esm.js').then((m) => m.SearchPage),
|
|
500
|
+
mountPoint: rootNextRouteRef
|
|
501
|
+
}));
|
|
502
|
+
searchPlugin.provide(createComponentExtension({
|
|
503
|
+
name: "SearchBar",
|
|
504
|
+
component: {
|
|
505
|
+
lazy: () => import('./index-bfe6f2c6.esm.js').then((m) => m.SearchBar)
|
|
506
|
+
}
|
|
507
|
+
}));
|
|
508
|
+
const SearchBarNext = searchPlugin.provide(createComponentExtension({
|
|
509
|
+
name: "SearchBarNext",
|
|
510
|
+
component: {
|
|
511
|
+
lazy: () => import('./index-bfe6f2c6.esm.js').then((m) => m.SearchBar)
|
|
512
|
+
}
|
|
513
|
+
}));
|
|
514
|
+
const SearchResult$1 = searchPlugin.provide(createComponentExtension({
|
|
515
|
+
name: "SearchResult",
|
|
516
|
+
component: {
|
|
517
|
+
lazy: () => import('./index-3cbe4558.esm.js').then((m) => m.SearchResult)
|
|
518
|
+
}
|
|
519
|
+
}));
|
|
520
|
+
searchPlugin.provide(createComponentExtension({
|
|
521
|
+
name: "SearchResultNext",
|
|
522
|
+
component: {
|
|
523
|
+
lazy: () => import('./index-3cbe4558.esm.js').then((m) => m.SearchResult)
|
|
524
|
+
}
|
|
525
|
+
}));
|
|
526
|
+
const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
|
|
527
|
+
name: "SidebarSearchModal",
|
|
528
|
+
component: {
|
|
529
|
+
lazy: () => import('./index-ca07a7cd.esm.js').then((m) => m.SidebarSearchModal)
|
|
530
|
+
}
|
|
531
|
+
}));
|
|
532
|
+
const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
|
|
533
|
+
name: "DefaultResultListItem",
|
|
534
|
+
component: {
|
|
535
|
+
lazy: () => import('./index-e9bf7392.esm.js').then((m) => m.DefaultResultListItem)
|
|
536
|
+
}
|
|
537
|
+
}));
|
|
538
|
+
const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
|
|
539
|
+
name: "HomePageSearchBar",
|
|
540
|
+
component: {
|
|
541
|
+
lazy: () => import('./index-bc274d46.esm.js').then((m) => m.HomePageSearchBar)
|
|
542
|
+
}
|
|
543
|
+
}));
|
|
544
|
+
|
|
545
|
+
const useStyles$5 = makeStyles$1((theme) => ({
|
|
546
|
+
container: {
|
|
547
|
+
borderRadius: 30,
|
|
548
|
+
display: "flex",
|
|
549
|
+
height: "2.4em"
|
|
550
|
+
},
|
|
551
|
+
input: {
|
|
552
|
+
flex: 1
|
|
553
|
+
},
|
|
554
|
+
paperFullWidth: { height: "calc(100% - 128px)" },
|
|
555
|
+
dialogActionsContainer: { padding: theme.spacing(1, 3) },
|
|
556
|
+
viewResultsLink: { verticalAlign: "0.5em" }
|
|
557
|
+
}));
|
|
558
|
+
const Modal = ({ open = true, toggleModal }) => {
|
|
559
|
+
const getSearchLink = useRouteRef(rootRouteRef);
|
|
560
|
+
const classes = useStyles$5();
|
|
561
|
+
const { term, setTerm } = useSearch();
|
|
562
|
+
const [value, setValue] = useState(term);
|
|
563
|
+
useEffect(() => {
|
|
564
|
+
setValue((prevValue) => prevValue !== term ? term : prevValue);
|
|
565
|
+
}, [term]);
|
|
566
|
+
useDebounce(() => setTerm(value), 500, [value]);
|
|
567
|
+
const handleQuery = (newValue) => {
|
|
568
|
+
setValue(newValue);
|
|
569
|
+
};
|
|
570
|
+
const handleClear = () => setValue("");
|
|
571
|
+
const handleResultClick = () => {
|
|
572
|
+
toggleModal();
|
|
573
|
+
handleClear();
|
|
574
|
+
};
|
|
575
|
+
const handleKeyPress = () => {
|
|
576
|
+
handleResultClick();
|
|
577
|
+
};
|
|
578
|
+
return /* @__PURE__ */ React__default.createElement(Dialog, {
|
|
579
|
+
classes: {
|
|
580
|
+
paperFullWidth: classes.paperFullWidth
|
|
581
|
+
},
|
|
582
|
+
onClose: toggleModal,
|
|
583
|
+
"aria-labelledby": "search-modal-title",
|
|
584
|
+
open,
|
|
585
|
+
fullWidth: true,
|
|
586
|
+
maxWidth: "lg"
|
|
587
|
+
}, /* @__PURE__ */ React__default.createElement(DialogTitle, null, /* @__PURE__ */ React__default.createElement(Paper, {
|
|
588
|
+
className: classes.container
|
|
589
|
+
}, /* @__PURE__ */ React__default.createElement(SearchBarBase, {
|
|
590
|
+
className: classes.input,
|
|
591
|
+
value,
|
|
592
|
+
onChange: handleQuery,
|
|
593
|
+
onClear: handleClear
|
|
594
|
+
}))), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
595
|
+
container: true,
|
|
596
|
+
direction: "row-reverse",
|
|
597
|
+
justifyContent: "flex-start",
|
|
598
|
+
alignItems: "center"
|
|
599
|
+
}, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
600
|
+
item: true
|
|
601
|
+
}, /* @__PURE__ */ React__default.createElement(Link, {
|
|
602
|
+
onClick: toggleModal,
|
|
603
|
+
to: `${getSearchLink()}?query=${value}`
|
|
604
|
+
}, /* @__PURE__ */ React__default.createElement("span", {
|
|
605
|
+
className: classes.viewResultsLink
|
|
606
|
+
}, "View Full Results"), /* @__PURE__ */ React__default.createElement(Launch, {
|
|
607
|
+
color: "primary"
|
|
608
|
+
})))), /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(SearchResultComponent, null, ({ results }) => /* @__PURE__ */ React__default.createElement(List, null, results.map(({ document }) => /* @__PURE__ */ React__default.createElement("div", {
|
|
609
|
+
role: "button",
|
|
610
|
+
tabIndex: 0,
|
|
611
|
+
key: `${document.location}-btn`,
|
|
612
|
+
onClick: handleResultClick,
|
|
613
|
+
onKeyPress: handleKeyPress
|
|
614
|
+
}, /* @__PURE__ */ React__default.createElement(DefaultResultListItem$1, {
|
|
615
|
+
key: document.location,
|
|
616
|
+
result: document
|
|
617
|
+
})))))), /* @__PURE__ */ React__default.createElement(DialogActions, {
|
|
618
|
+
className: classes.dialogActionsContainer
|
|
619
|
+
}, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
620
|
+
container: true,
|
|
621
|
+
direction: "row"
|
|
622
|
+
}, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
623
|
+
item: true,
|
|
624
|
+
xs: 12
|
|
625
|
+
}, /* @__PURE__ */ React__default.createElement(SearchResultPager, null)))));
|
|
626
|
+
};
|
|
627
|
+
const SearchModal = ({ open = true, toggleModal }) => {
|
|
628
|
+
return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(Modal, {
|
|
629
|
+
open,
|
|
630
|
+
toggleModal
|
|
631
|
+
}));
|
|
632
|
+
};
|
|
633
|
+
|
|
634
|
+
const useStyles$4 = makeStyles$1(() => ({
|
|
384
635
|
root: {
|
|
385
636
|
display: "flex",
|
|
386
637
|
alignItems: "center"
|
|
@@ -394,28 +645,28 @@ const SearchBar = ({
|
|
|
394
645
|
handleSearch,
|
|
395
646
|
handleClearSearchBar
|
|
396
647
|
}) => {
|
|
397
|
-
const classes = useStyles$
|
|
398
|
-
return /* @__PURE__ */
|
|
648
|
+
const classes = useStyles$4();
|
|
649
|
+
return /* @__PURE__ */ React__default.createElement(Paper, {
|
|
399
650
|
component: "form",
|
|
400
651
|
onSubmit: (e) => handleSearch(e),
|
|
401
652
|
className: classes.root
|
|
402
|
-
}, /* @__PURE__ */
|
|
653
|
+
}, /* @__PURE__ */ React__default.createElement(IconButton$1, {
|
|
403
654
|
disabled: true,
|
|
404
655
|
type: "submit",
|
|
405
656
|
"aria-label": "search"
|
|
406
|
-
}, /* @__PURE__ */
|
|
657
|
+
}, /* @__PURE__ */ React__default.createElement(SearchIcon, null)), /* @__PURE__ */ React__default.createElement(InputBase$1, {
|
|
407
658
|
className: classes.input,
|
|
408
659
|
placeholder: "Search in Backstage",
|
|
409
660
|
value: searchQuery,
|
|
410
661
|
onChange: (e) => handleSearch(e),
|
|
411
|
-
inputProps: {"aria-label": "search backstage"}
|
|
412
|
-
}), /* @__PURE__ */
|
|
662
|
+
inputProps: { "aria-label": "search backstage" }
|
|
663
|
+
}), /* @__PURE__ */ React__default.createElement(IconButton$1, {
|
|
413
664
|
"aria-label": "search",
|
|
414
665
|
onClick: () => handleClearSearchBar()
|
|
415
|
-
}, /* @__PURE__ */
|
|
666
|
+
}, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
|
|
416
667
|
};
|
|
417
668
|
|
|
418
|
-
const useStyles$
|
|
669
|
+
const useStyles$3 = makeStyles((theme) => ({
|
|
419
670
|
filters: {
|
|
420
671
|
width: "250px",
|
|
421
672
|
display: "flex"
|
|
@@ -428,19 +679,19 @@ const FiltersButton = ({
|
|
|
428
679
|
numberOfSelectedFilters,
|
|
429
680
|
handleToggleFilters
|
|
430
681
|
}) => {
|
|
431
|
-
const classes = useStyles$
|
|
432
|
-
return /* @__PURE__ */
|
|
682
|
+
const classes = useStyles$3();
|
|
683
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
|
433
684
|
className: classes.filters
|
|
434
|
-
}, /* @__PURE__ */
|
|
685
|
+
}, /* @__PURE__ */ React__default.createElement(IconButton, {
|
|
435
686
|
className: classes.icon,
|
|
436
687
|
"aria-label": "settings",
|
|
437
688
|
onClick: handleToggleFilters
|
|
438
|
-
}, /* @__PURE__ */
|
|
689
|
+
}, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
|
|
439
690
|
variant: "h6"
|
|
440
691
|
}, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
|
|
441
692
|
};
|
|
442
693
|
|
|
443
|
-
const useStyles$
|
|
694
|
+
const useStyles$2 = makeStyles((theme) => ({
|
|
444
695
|
filters: {
|
|
445
696
|
background: "transparent",
|
|
446
697
|
boxShadow: "0px 0px 0px 0px"
|
|
@@ -459,22 +710,22 @@ const Filters = ({
|
|
|
459
710
|
updateSelected,
|
|
460
711
|
updateChecked
|
|
461
712
|
}) => {
|
|
462
|
-
const classes = useStyles$
|
|
463
|
-
return /* @__PURE__ */
|
|
713
|
+
const classes = useStyles$2();
|
|
714
|
+
return /* @__PURE__ */ React__default.createElement(Card, {
|
|
464
715
|
className: classes.filters
|
|
465
|
-
}, /* @__PURE__ */
|
|
466
|
-
title: /* @__PURE__ */
|
|
716
|
+
}, /* @__PURE__ */ React__default.createElement(CardHeader, {
|
|
717
|
+
title: /* @__PURE__ */ React__default.createElement(Typography, {
|
|
467
718
|
variant: "h6"
|
|
468
719
|
}, "Filters"),
|
|
469
|
-
action: /* @__PURE__ */
|
|
720
|
+
action: /* @__PURE__ */ React__default.createElement(Button, {
|
|
470
721
|
color: "primary",
|
|
471
722
|
onClick: () => resetFilters()
|
|
472
723
|
}, "CLEAR ALL")
|
|
473
|
-
}), /* @__PURE__ */
|
|
724
|
+
}), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
474
725
|
variant: "subtitle2"
|
|
475
|
-
}, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */
|
|
726
|
+
}, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
476
727
|
variant: "subtitle2"
|
|
477
|
-
}, "Kind"), /* @__PURE__ */
|
|
728
|
+
}, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
|
|
478
729
|
id: "outlined-select",
|
|
479
730
|
onChange: (e) => {
|
|
480
731
|
var _a;
|
|
@@ -483,22 +734,22 @@ const Filters = ({
|
|
|
483
734
|
variant: "outlined",
|
|
484
735
|
className: classes.dropdown,
|
|
485
736
|
value: filters.selected
|
|
486
|
-
}, filterOptions.kind.map((filter) => /* @__PURE__ */
|
|
737
|
+
}, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
|
|
487
738
|
selected: filter === "",
|
|
488
739
|
dense: true,
|
|
489
740
|
key: filter,
|
|
490
741
|
value: filter
|
|
491
|
-
}, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */
|
|
742
|
+
}, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
|
|
492
743
|
variant: "subtitle2"
|
|
493
|
-
}, "Lifecycle"), /* @__PURE__ */
|
|
744
|
+
}, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
|
|
494
745
|
disablePadding: true,
|
|
495
746
|
dense: true
|
|
496
|
-
}, filterOptions.lifecycle.map((filter) => /* @__PURE__ */
|
|
747
|
+
}, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
|
|
497
748
|
key: filter,
|
|
498
749
|
dense: true,
|
|
499
750
|
button: true,
|
|
500
751
|
onClick: () => updateChecked(filter)
|
|
501
|
-
}, /* @__PURE__ */
|
|
752
|
+
}, /* @__PURE__ */ React__default.createElement(Checkbox, {
|
|
502
753
|
edge: "start",
|
|
503
754
|
disableRipple: true,
|
|
504
755
|
className: classes.checkbox,
|
|
@@ -507,13 +758,13 @@ const Filters = ({
|
|
|
507
758
|
tabIndex: -1,
|
|
508
759
|
value: filter,
|
|
509
760
|
name: filter
|
|
510
|
-
}), /* @__PURE__ */
|
|
761
|
+
}), /* @__PURE__ */ React__default.createElement(ListItemText, {
|
|
511
762
|
id: filter,
|
|
512
763
|
primary: filter
|
|
513
764
|
}))))));
|
|
514
765
|
};
|
|
515
766
|
|
|
516
|
-
const useStyles$
|
|
767
|
+
const useStyles$1 = makeStyles((theme) => ({
|
|
517
768
|
searchQuery: {
|
|
518
769
|
color: theme.palette.text.primary,
|
|
519
770
|
background: theme.palette.background.default,
|
|
@@ -534,7 +785,7 @@ const columns = [
|
|
|
534
785
|
title: "Name",
|
|
535
786
|
field: "name",
|
|
536
787
|
highlight: true,
|
|
537
|
-
render: (result) => /* @__PURE__ */
|
|
788
|
+
render: (result) => /* @__PURE__ */ React__default.createElement(Link, {
|
|
538
789
|
to: result.url || ""
|
|
539
790
|
}, result.name)
|
|
540
791
|
},
|
|
@@ -561,27 +812,27 @@ const TableHeader = ({
|
|
|
561
812
|
numberOfResults,
|
|
562
813
|
handleToggleFilters
|
|
563
814
|
}) => {
|
|
564
|
-
const classes = useStyles$
|
|
565
|
-
return /* @__PURE__ */
|
|
815
|
+
const classes = useStyles$1();
|
|
816
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
|
566
817
|
className: classes.tableHeader
|
|
567
|
-
}, /* @__PURE__ */
|
|
818
|
+
}, /* @__PURE__ */ React__default.createElement(FiltersButton, {
|
|
568
819
|
numberOfSelectedFilters,
|
|
569
820
|
handleToggleFilters
|
|
570
|
-
}), /* @__PURE__ */
|
|
821
|
+
}), /* @__PURE__ */ React__default.createElement(Divider, {
|
|
571
822
|
className: classes.divider,
|
|
572
823
|
orientation: "vertical"
|
|
573
|
-
}), /* @__PURE__ */
|
|
824
|
+
}), /* @__PURE__ */ React__default.createElement(Grid, {
|
|
574
825
|
item: true,
|
|
575
826
|
xs: 12
|
|
576
|
-
}, searchQuery ? /* @__PURE__ */
|
|
827
|
+
}, searchQuery ? /* @__PURE__ */ React__default.createElement(Typography, {
|
|
577
828
|
variant: "h6"
|
|
578
|
-
}, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */
|
|
829
|
+
}, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */ React__default.createElement("span", {
|
|
579
830
|
className: classes.searchQuery
|
|
580
|
-
}, '"', searchQuery, '"'), " ") : /* @__PURE__ */
|
|
831
|
+
}, '"', searchQuery, '"'), " ") : /* @__PURE__ */ React__default.createElement(Typography, {
|
|
581
832
|
variant: "h6"
|
|
582
833
|
}, `${numberOfResults} results`)));
|
|
583
834
|
};
|
|
584
|
-
const SearchResult
|
|
835
|
+
const SearchResult = ({ searchQuery }) => {
|
|
585
836
|
const catalogApi = useApi(catalogApiRef);
|
|
586
837
|
const [showFilters, toggleFilters] = useState(false);
|
|
587
838
|
const [selectedFilters, setSelectedFilters] = useState({
|
|
@@ -626,15 +877,15 @@ const SearchResult$1 = ({searchQuery}) => {
|
|
|
626
877
|
}
|
|
627
878
|
}, [selectedFilters, searchQuery, results]);
|
|
628
879
|
if (loading) {
|
|
629
|
-
return /* @__PURE__ */
|
|
880
|
+
return /* @__PURE__ */ React__default.createElement(Progress, null);
|
|
630
881
|
}
|
|
631
882
|
if (error) {
|
|
632
|
-
return /* @__PURE__ */
|
|
883
|
+
return /* @__PURE__ */ React__default.createElement(Alert, {
|
|
633
884
|
severity: "error"
|
|
634
885
|
}, "Error encountered while fetching search results. ", error.toString());
|
|
635
886
|
}
|
|
636
887
|
if (!results || results.length === 0) {
|
|
637
|
-
return /* @__PURE__ */
|
|
888
|
+
return /* @__PURE__ */ React__default.createElement(EmptyState, {
|
|
638
889
|
missing: "data",
|
|
639
890
|
title: "Sorry, no results were found"
|
|
640
891
|
});
|
|
@@ -676,25 +927,25 @@ const SearchResult$1 = ({searchQuery}) => {
|
|
|
676
927
|
kind: [],
|
|
677
928
|
lifecycle: []
|
|
678
929
|
});
|
|
679
|
-
return /* @__PURE__ */
|
|
930
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
680
931
|
container: true
|
|
681
|
-
}, showFilters && /* @__PURE__ */
|
|
932
|
+
}, showFilters && /* @__PURE__ */ React__default.createElement(Grid, {
|
|
682
933
|
item: true,
|
|
683
934
|
xs: 3
|
|
684
|
-
}, /* @__PURE__ */
|
|
935
|
+
}, /* @__PURE__ */ React__default.createElement(Filters, {
|
|
685
936
|
filters: selectedFilters,
|
|
686
937
|
filterOptions,
|
|
687
938
|
resetFilters,
|
|
688
939
|
updateSelected,
|
|
689
940
|
updateChecked
|
|
690
|
-
})), /* @__PURE__ */
|
|
941
|
+
})), /* @__PURE__ */ React__default.createElement(Grid, {
|
|
691
942
|
item: true,
|
|
692
943
|
xs: showFilters ? 9 : 12
|
|
693
|
-
}, /* @__PURE__ */
|
|
694
|
-
options: {paging: true, pageSize: 20, search: false},
|
|
944
|
+
}, /* @__PURE__ */ React__default.createElement(Table, {
|
|
945
|
+
options: { paging: true, pageSize: 20, search: false },
|
|
695
946
|
data: filteredResults,
|
|
696
947
|
columns,
|
|
697
|
-
title: /* @__PURE__ */
|
|
948
|
+
title: /* @__PURE__ */ React__default.createElement(TableHeader, {
|
|
698
949
|
searchQuery,
|
|
699
950
|
numberOfResults: filteredResults.length,
|
|
700
951
|
numberOfSelectedFilters: (selectedFilters.selected !== "" ? 1 : 0) + selectedFilters.checked.length,
|
|
@@ -717,24 +968,24 @@ const LegacySearchPage = () => {
|
|
|
717
968
|
const handleClearSearchBar = () => {
|
|
718
969
|
setSearchQuery("");
|
|
719
970
|
};
|
|
720
|
-
return /* @__PURE__ */
|
|
971
|
+
return /* @__PURE__ */ React__default.createElement(Page, {
|
|
721
972
|
themeId: "home"
|
|
722
|
-
}, /* @__PURE__ */
|
|
973
|
+
}, /* @__PURE__ */ React__default.createElement(Header, {
|
|
723
974
|
title: "Search"
|
|
724
|
-
}), /* @__PURE__ */
|
|
975
|
+
}), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
725
976
|
container: true,
|
|
726
977
|
direction: "row"
|
|
727
|
-
}, /* @__PURE__ */
|
|
978
|
+
}, /* @__PURE__ */ React__default.createElement(Grid, {
|
|
728
979
|
item: true,
|
|
729
980
|
xs: 12
|
|
730
|
-
}, /* @__PURE__ */
|
|
981
|
+
}, /* @__PURE__ */ React__default.createElement(SearchBar, {
|
|
731
982
|
handleSearch,
|
|
732
983
|
handleClearSearchBar,
|
|
733
984
|
searchQuery
|
|
734
|
-
})), /* @__PURE__ */
|
|
985
|
+
})), /* @__PURE__ */ React__default.createElement(Grid, {
|
|
735
986
|
item: true,
|
|
736
987
|
xs: 12
|
|
737
|
-
}, /* @__PURE__ */
|
|
988
|
+
}, /* @__PURE__ */ React__default.createElement(SearchResult, {
|
|
738
989
|
searchQuery: (queryString != null ? queryString : "").toLocaleLowerCase("en-US")
|
|
739
990
|
})))));
|
|
740
991
|
};
|
|
@@ -756,7 +1007,7 @@ const UrlUpdater = () => {
|
|
|
756
1007
|
if (location.search === prevQueryParams) {
|
|
757
1008
|
return;
|
|
758
1009
|
}
|
|
759
|
-
const query = qs.parse(location.search.substring(1), {arrayLimit: 0}) || {};
|
|
1010
|
+
const query = qs.parse(location.search.substring(1), { arrayLimit: 0 }) || {};
|
|
760
1011
|
if (query.filters) {
|
|
761
1012
|
setFilters(query.filters);
|
|
762
1013
|
}
|
|
@@ -776,47 +1027,15 @@ const UrlUpdater = () => {
|
|
|
776
1027
|
types,
|
|
777
1028
|
pageCursor,
|
|
778
1029
|
filters
|
|
779
|
-
}, {arrayFormat: "brackets"});
|
|
1030
|
+
}, { arrayFormat: "brackets" });
|
|
780
1031
|
const newUrl = `${window.location.pathname}?${newParams}`;
|
|
781
1032
|
window.history.replaceState(null, document.title, newUrl);
|
|
782
1033
|
}, [term, types, pageCursor, filters]);
|
|
783
1034
|
return null;
|
|
784
1035
|
};
|
|
785
|
-
const SearchPage
|
|
1036
|
+
const SearchPage = () => {
|
|
786
1037
|
const outlet = useOutlet();
|
|
787
|
-
return /* @__PURE__ */
|
|
788
|
-
};
|
|
789
|
-
|
|
790
|
-
const useStyles$1 = makeStyles((theme) => ({
|
|
791
|
-
root: {
|
|
792
|
-
display: "flex",
|
|
793
|
-
justifyContent: "space-between",
|
|
794
|
-
gap: theme.spacing(2),
|
|
795
|
-
margin: theme.spacing(4)
|
|
796
|
-
}
|
|
797
|
-
}));
|
|
798
|
-
const SearchResultPager = () => {
|
|
799
|
-
const {fetchNextPage, fetchPreviousPage} = useSearch();
|
|
800
|
-
const classes = useStyles$1();
|
|
801
|
-
if (!fetchNextPage && !fetchPreviousPage) {
|
|
802
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null);
|
|
803
|
-
}
|
|
804
|
-
return /* @__PURE__ */ React.createElement("nav", {
|
|
805
|
-
"arial-label": "pagination navigation",
|
|
806
|
-
className: classes.root
|
|
807
|
-
}, /* @__PURE__ */ React.createElement(Button, {
|
|
808
|
-
"aria-label": "previous page",
|
|
809
|
-
disabled: !fetchPreviousPage,
|
|
810
|
-
onClick: fetchPreviousPage,
|
|
811
|
-
startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null),
|
|
812
|
-
size: "small"
|
|
813
|
-
}, "Back"), /* @__PURE__ */ React.createElement(Button, {
|
|
814
|
-
"aria-label": "next page",
|
|
815
|
-
disabled: !fetchNextPage,
|
|
816
|
-
onClick: fetchNextPage,
|
|
817
|
-
endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null),
|
|
818
|
-
size: "small"
|
|
819
|
-
}, "Next"));
|
|
1038
|
+
return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
|
|
820
1039
|
};
|
|
821
1040
|
|
|
822
1041
|
const useStyles = makeStyles((theme) => ({
|
|
@@ -839,7 +1058,7 @@ const SearchType = ({
|
|
|
839
1058
|
defaultValue
|
|
840
1059
|
}) => {
|
|
841
1060
|
const classes = useStyles();
|
|
842
|
-
const {types, setTypes} = useSearch();
|
|
1061
|
+
const { types, setTypes } = useSearch();
|
|
843
1062
|
useEffectOnce(() => {
|
|
844
1063
|
if (!types.length) {
|
|
845
1064
|
if (defaultValue && Array.isArray(defaultValue)) {
|
|
@@ -853,121 +1072,50 @@ const SearchType = ({
|
|
|
853
1072
|
const value = e.target.value;
|
|
854
1073
|
setTypes(value);
|
|
855
1074
|
};
|
|
856
|
-
return /* @__PURE__ */
|
|
1075
|
+
return /* @__PURE__ */ React__default.createElement(FormControl, {
|
|
857
1076
|
className,
|
|
858
1077
|
variant: "filled",
|
|
859
1078
|
fullWidth: true,
|
|
860
1079
|
"data-testid": "search-typefilter-next"
|
|
861
|
-
}, /* @__PURE__ */
|
|
1080
|
+
}, /* @__PURE__ */ React__default.createElement(InputLabel, {
|
|
862
1081
|
className: classes.label,
|
|
863
1082
|
margin: "dense"
|
|
864
|
-
}, name), /* @__PURE__ */
|
|
1083
|
+
}, name), /* @__PURE__ */ React__default.createElement(Select, {
|
|
865
1084
|
multiple: true,
|
|
866
1085
|
variant: "outlined",
|
|
867
1086
|
value: types,
|
|
868
1087
|
onChange: handleChange,
|
|
869
1088
|
placeholder: "All Results",
|
|
870
|
-
renderValue: (selected) => /* @__PURE__ */
|
|
1089
|
+
renderValue: (selected) => /* @__PURE__ */ React__default.createElement("div", {
|
|
871
1090
|
className: classes.chips
|
|
872
|
-
}, selected.map((value) => /* @__PURE__ */
|
|
1091
|
+
}, selected.map((value) => /* @__PURE__ */ React__default.createElement(Chip, {
|
|
873
1092
|
key: value,
|
|
874
1093
|
label: value,
|
|
875
1094
|
className: classes.chip,
|
|
876
1095
|
size: "small"
|
|
877
1096
|
})))
|
|
878
|
-
}, values.map((value) => /* @__PURE__ */
|
|
1097
|
+
}, values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
|
|
879
1098
|
key: value,
|
|
880
1099
|
value
|
|
881
|
-
}, /* @__PURE__ */
|
|
1100
|
+
}, /* @__PURE__ */ React__default.createElement(Checkbox, {
|
|
882
1101
|
checked: types.indexOf(value) > -1
|
|
883
|
-
}), /* @__PURE__ */
|
|
1102
|
+
}), /* @__PURE__ */ React__default.createElement(ListItemText, {
|
|
884
1103
|
primary: value
|
|
885
1104
|
})))));
|
|
886
1105
|
};
|
|
887
1106
|
|
|
888
|
-
const rootRouteRef = createRouteRef({
|
|
889
|
-
path: "/search",
|
|
890
|
-
title: "search"
|
|
891
|
-
});
|
|
892
|
-
const rootNextRouteRef = createRouteRef({
|
|
893
|
-
path: "/search-next",
|
|
894
|
-
title: "search"
|
|
895
|
-
});
|
|
896
|
-
const searchPlugin = createPlugin({
|
|
897
|
-
id: "search",
|
|
898
|
-
apis: [
|
|
899
|
-
createApiFactory({
|
|
900
|
-
api: searchApiRef,
|
|
901
|
-
deps: {discoveryApi: discoveryApiRef, identityApi: identityApiRef},
|
|
902
|
-
factory: ({discoveryApi, identityApi}) => {
|
|
903
|
-
return new SearchClient({discoveryApi, identityApi});
|
|
904
|
-
}
|
|
905
|
-
})
|
|
906
|
-
],
|
|
907
|
-
routes: {
|
|
908
|
-
root: rootRouteRef,
|
|
909
|
-
nextRoot: rootNextRouteRef
|
|
910
|
-
}
|
|
911
|
-
});
|
|
912
|
-
const SearchPage = searchPlugin.provide(createRoutableExtension({
|
|
913
|
-
name: "SearchPage",
|
|
914
|
-
component: () => import('./index-4ef7a5c8.esm.js').then((m) => m.SearchPage),
|
|
915
|
-
mountPoint: rootRouteRef
|
|
916
|
-
}));
|
|
917
|
-
const SearchPageNext = searchPlugin.provide(createRoutableExtension({
|
|
918
|
-
name: "SearchPageNext",
|
|
919
|
-
component: () => import('./index-4ef7a5c8.esm.js').then((m) => m.SearchPage),
|
|
920
|
-
mountPoint: rootNextRouteRef
|
|
921
|
-
}));
|
|
922
|
-
searchPlugin.provide(createComponentExtension({
|
|
923
|
-
name: "SearchBar",
|
|
924
|
-
component: {
|
|
925
|
-
lazy: () => import('./index-6f14e751.esm.js').then((m) => m.SearchBar)
|
|
926
|
-
}
|
|
927
|
-
}));
|
|
928
|
-
const SearchBarNext = searchPlugin.provide(createComponentExtension({
|
|
929
|
-
name: "SearchBarNext",
|
|
930
|
-
component: {
|
|
931
|
-
lazy: () => import('./index-6f14e751.esm.js').then((m) => m.SearchBar)
|
|
932
|
-
}
|
|
933
|
-
}));
|
|
934
|
-
const SearchResult = searchPlugin.provide(createComponentExtension({
|
|
935
|
-
name: "SearchResult",
|
|
936
|
-
component: {
|
|
937
|
-
lazy: () => import('./index-ee8d2563.esm.js').then((m) => m.SearchResult)
|
|
938
|
-
}
|
|
939
|
-
}));
|
|
940
|
-
searchPlugin.provide(createComponentExtension({
|
|
941
|
-
name: "SearchResultNext",
|
|
942
|
-
component: {
|
|
943
|
-
lazy: () => import('./index-ee8d2563.esm.js').then((m) => m.SearchResult)
|
|
944
|
-
}
|
|
945
|
-
}));
|
|
946
|
-
const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
|
|
947
|
-
name: "DefaultResultListItem",
|
|
948
|
-
component: {
|
|
949
|
-
lazy: () => import('./index-92a9e2ec.esm.js').then((m) => m.DefaultResultListItem)
|
|
950
|
-
}
|
|
951
|
-
}));
|
|
952
|
-
const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
|
|
953
|
-
name: "HomePageSearchBar",
|
|
954
|
-
component: {
|
|
955
|
-
lazy: () => import('./index-3eebaa65.esm.js').then((m) => m.HomePageSearchBar)
|
|
956
|
-
}
|
|
957
|
-
}));
|
|
958
|
-
|
|
959
1107
|
const SidebarSearch = () => {
|
|
960
1108
|
const searchRoute = useRouteRef(rootRouteRef);
|
|
961
1109
|
const navigate = useNavigate();
|
|
962
1110
|
const handleSearch = useCallback((query) => {
|
|
963
|
-
const queryString = qs.stringify({query}, {addQueryPrefix: true});
|
|
1111
|
+
const queryString = qs.stringify({ query }, { addQueryPrefix: true });
|
|
964
1112
|
navigate(`${searchRoute()}${queryString}`);
|
|
965
1113
|
}, [navigate, searchRoute]);
|
|
966
|
-
return /* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ React__default.createElement(SidebarSearchField, {
|
|
967
1115
|
onSearch: handleSearch,
|
|
968
1116
|
to: "/search"
|
|
969
1117
|
});
|
|
970
1118
|
};
|
|
971
1119
|
|
|
972
|
-
export { DefaultResultListItem as D, Filters$1 as F, HomePageSearchBar as H, SearchPage
|
|
973
|
-
//# sourceMappingURL=index-
|
|
1120
|
+
export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, SearchBarNext as m, SearchPage$1 as n, SearchPageNext as o, searchPlugin as p, SearchResult$1 as q, rootRouteRef as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
|
|
1121
|
+
//# sourceMappingURL=index-893ec2f5.esm.js.map
|