SearchV2: Fix Move and Delete not updating list in folder view (#49524)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

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)};

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 (
         <FolderView
+          key={listKey}
           selection={selection}
           selectionToggle={toggleSelection}
           tags={query.tag}

public/app/features/search/page/components/columns.tsx

@@ -77,7 +77,7 @@ export const generateColumns = (
         const selected = selection(kind, uid);
         const hasUID = uid != null; // Panels don't have UID! Likely should not be shown on pages with manage options
         return (
-          <div {...p.cellProps} className={p.cellStyle}>
+          <div {...p.cellProps}>
             <div className={styles.checkbox}>
               <Checkbox
                 disabled={!hasUID}
@@ -99,7 +99,7 @@ export const generateColumns = (
   width = Math.max(availableWidth * 0.2, 300);
   columns.push({
     Cell: (p) => {
-      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 <div className={styles.headerNameStyle}>Name</div>;
+    },
     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 (
+          <div {...p.cellProps} className={cx(styles.locationCellStyle)}>
+            {parts.map((p) => {
+              const info = meta.locationInfo[p];
+              return info ? (
+                <a key={p} href={info.url} className={styles.locationItem}>
+                  <Icon name={getIconForKind(info.kind)} /> {info.name}
+                </a>
+              ) : (
+                <span key={p}>{p}</span>
+              );
+            })}
+          </div>
+        );
+      },
+      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 (
-          <div {...p.cellProps} className={cx(p.cellStyle, styles.locationCellStyle)}>
-            {parts.map((p) => {
-              const info = meta.locationInfo[p];
-              return info ? (
-                <a key={p} href={info.url} className={styles.locationItem}>
-                  <Icon name={getIconForKind(info.kind)} /> {info.name}
-                </a>
-              ) : (
-                <span key={p}>{p}</span>
-              );
-            })}
-          </div>
-        );
-      },
-      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 (
-        <div {...p.cellProps} className={cx(p.cellStyle, datasourceItemClass)}>
+        <div {...p.cellProps} className={cx(datasourceItemClass)}>
           {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 ? (
-        <div {...p.cellProps} className={p.cellStyle}>
+        <div {...p.cellProps}>
           <TagList className={tagListClass} tags={tags} onClick={onTagSelected} />
         </div>
       ) : null;