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,33 +124,15 @@ export const generateColumns = (
   columns.push(makeTypeColumn(access.kind, access.panel_type, width, styles));
   availableWidth -= width;
 
-  // Show datasources if we have any
-  if (access.ds_uid && onDatasourceChange) {
-    width = DATASOURCE_COLUMN_WIDTH;
-    columns.push(
-      makeDataSourceColumn(
-        access.ds_uid,
-        width,
-        styles.typeIcon,
-        styles.datasourceItem,
-        styles.invalidDatasourceItem,
-        onDatasourceChange
-      )
-    );
-    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) {
+    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(p.cellStyle, styles.locationCellStyle)}>
+          <div {...p.cellProps} className={cx(styles.locationCellStyle)}>
             {parts.map((p) => {
               const info = meta.locationInfo[p];
               return info ? (
@@ -165,10 +149,30 @@ export const generateColumns = (
       id: `column-location`,
       field: access.location ?? access.url,
       Header: 'Location',
-      width: availableWidth,
+      width,
     });
   }
 
+  // Show datasources if we have any
+  if (access.ds_uid && onDatasourceChange) {
+    width = DATASOURCE_COLUMN_WIDTH;
+    columns.push(
+      makeDataSourceColumn(
+        access.ds_uid,
+        width,
+        styles.typeIcon,
+        styles.datasourceItem,
+        styles.invalidDatasourceItem,
+        onDatasourceChange
+      )
+    );
+    availableWidth -= width;
+  }
+
+  if (availableWidth > 0) {
+    columns.push(makeTagsColumn(access.tags, availableWidth, styles.tagList, onTagSelected));
+  }
+
   if (sortField) {
     columns.push({
       Header: () => <div className={styles.sortedHeader}>{getFieldDisplayName(sortField)}</div>,
@@ -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;