From b344f48e68dd7ff3d93610916c4ba53e53f6861d Mon Sep 17 00:00:00 2001 From: Maria Alexandra <239999+axelavargas@users.noreply.github.com> Date: Fri, 3 Jun 2022 17:33:04 +0200 Subject: [PATCH] SearchV2: Fix Move and Delete not updating list in folder view (#49524) Co-authored-by: Ryan McKinley --- .../page/components/SearchResultsTable.tsx | 10 ++- .../search/page/components/SearchView.tsx | 7 +- .../search/page/components/columns.tsx | 79 +++++++++---------- 3 files changed, 52 insertions(+), 44 deletions(-) diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx index e9e3f486f71..564ef43e318 100644 --- a/public/app/features/search/page/components/SearchResultsTable.tsx +++ b/public/app/features/search/page/components/SearchResultsTable.tsx @@ -190,9 +190,9 @@ const getStyles = (theme: GrafanaTheme2) => { display: flex; align-items: center; `, - cellWrapper: css` + nameCellStyle: css` border-right: none; - padding: ${theme.spacing(1)}; + padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(2)}; overflow: hidden; text-overflow: ellipsis; user-select: text; @@ -201,6 +201,9 @@ const getStyles = (theme: GrafanaTheme2) => { box-shadow: none; } `, + headerNameStyle: css` + padding-left: ${theme.spacing(1)}; + `, headerCell: css` padding: ${theme.spacing(1)}; `, @@ -254,10 +257,11 @@ const getStyles = (theme: GrafanaTheme2) => { `, sortedHeader: css` text-align: right; + padding-right: ${theme.spacing(2)}; `, sortedItems: css` text-align: right; - padding: ${theme.spacing(1)}; + padding: ${theme.spacing(1)} ${theme.spacing(3)} ${theme.spacing(1)} ${theme.spacing(1)}; `, locationCellStyle: css` padding-top: ${theme.spacing(1)}; diff --git a/public/app/features/search/page/components/SearchView.tsx b/public/app/features/search/page/components/SearchView.tsx index f224a75f83a..5c8f45a9d54 100644 --- a/public/app/features/search/page/components/SearchView.tsx +++ b/public/app/features/search/page/components/SearchView.tsx @@ -50,6 +50,8 @@ export const SearchView = ({ const layout = getValidQueryLayout(query); const isFolders = layout === SearchLayout.Folders; + const [listKey, setListKey] = useState(Date.now()); + const searchQuery = useMemo(() => { const q: SearchQuery = { query: queryText, @@ -121,7 +123,8 @@ export const SearchView = ({ // function to update items when dashboards or folders are moved or deleted const onChangeItemsList = async () => { // clean up search selection - setSearchSelection(newSearchSelection()); + clearSelection(); + setListKey(Date.now()); // trigger again the search to the backend onQueryChange(query.query); }; @@ -169,11 +172,13 @@ export const SearchView = ({ onTagSelected={onTagAdd} renderStandaloneBody={true} tags={query.tag} + key={listKey} /> ); } return ( +
{ - let classNames = cx(p.cellStyle, styles.cellWrapper); + let classNames = cx(styles.nameCellStyle); let name = access.name.values.get(p.row.index); if (!name?.length) { name = 'Missing title'; // normal for panels @@ -113,7 +113,9 @@ export const generateColumns = ( }, id: `column-name`, field: access.name!, - Header: 'Name', + Header: () => { + return
Name
; + }, width, }); availableWidth -= width; @@ -122,6 +124,35 @@ export const generateColumns = ( columns.push(makeTypeColumn(access.kind, access.panel_type, width, styles)); availableWidth -= width; + const meta = response.view.dataFrame.meta?.custom as SearchResultMeta; + if (meta?.locationInfo && availableWidth > 0) { + width = Math.max(availableWidth / 1.75, 300); + availableWidth -= width; + columns.push({ + Cell: (p) => { + const parts = (access.location?.values.get(p.row.index) ?? '').split('/'); + return ( +
+ {parts.map((p) => { + const info = meta.locationInfo[p]; + return info ? ( + + {info.name} + + ) : ( + {p} + ); + })} +
+ ); + }, + id: `column-location`, + field: access.location ?? access.url, + Header: 'Location', + width, + }); + } + // Show datasources if we have any if (access.ds_uid && onDatasourceChange) { width = DATASOURCE_COLUMN_WIDTH; @@ -138,35 +169,8 @@ export const generateColumns = ( availableWidth -= width; } - width = Math.max(availableWidth / 2.5, 200); - columns.push(makeTagsColumn(access.tags, width, styles.tagList, onTagSelected)); - availableWidth -= width; - - const meta = response.view.dataFrame.meta?.custom as SearchResultMeta; - if (meta?.locationInfo && availableWidth > 0) { - columns.push({ - Cell: (p) => { - const parts = (access.location?.values.get(p.row.index) ?? '').split('/'); - return ( -
- {parts.map((p) => { - const info = meta.locationInfo[p]; - return info ? ( - - {info.name} - - ) : ( - {p} - ); - })} -
- ); - }, - id: `column-location`, - field: access.location ?? access.url, - Header: 'Location', - width: availableWidth, - }); + if (availableWidth > 0) { + columns.push(makeTagsColumn(access.tags, availableWidth, styles.tagList, onTagSelected)); } if (sortField) { @@ -223,7 +227,7 @@ function makeDataSourceColumn( return null; } return ( -
+
{dslist.map((v, i) => { const settings = srv.getInstanceSettings(v); const icon = settings?.meta?.info?.logos?.small; @@ -283,16 +287,12 @@ function makeTypeColumn( break; case 'panel': - icon = 'public/img/icons/unicons/graph-bar.svg'; + icon = 'public/img/icons/mono/library-panel.svg'; const type = typeField.values.get(i); if (type) { txt = type; const info = config.panels[txt]; if (info?.name) { - const v = info.info?.logos.small; - if (v && v.endsWith('.svg')) { - icon = v; - } txt = info.name; } else { switch (type) { @@ -302,7 +302,6 @@ function makeTypeColumn( break; case 'singlestat': // auto-migration txt = 'Singlestat'; - icon = `public/app/plugins/panel/stat/img/icn-singlestat-panel.svg`; break; default: icon = `public/img/icons/unicons/question.svg`; // plugin not found @@ -333,7 +332,7 @@ function makeTagsColumn( Cell: (p) => { const tags = field.values.get(p.row.index); return tags ? ( -
+
) : null;