From 76aa4f770e0a9f25bf116b2e0f56806ec5d981c8 Mon Sep 17 00:00:00 2001
From: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
Date: Wed, 29 Jun 2022 15:45:20 +0200
Subject: [PATCH] SearchV2: add back the column styles for the
 SearchResultsTable component (#51549)

---
 .../page/components/SearchResultsTable.tsx    | 82 ++++++++++++++++++-
 1 file changed, 80 insertions(+), 2 deletions(-)

diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx
index 093ac1202d9..eb88361da35 100644
--- a/public/app/features/search/page/components/SearchResultsTable.tsx
+++ b/public/app/features/search/page/components/SearchResultsTable.tsx
@@ -48,6 +48,7 @@ export const SearchResultsTable = React.memo(
     keyboardEvents,
   }: SearchResultsProps) => {
     const styles = useStyles2(getStyles);
+    const columnStyles = useStyles2(getColumnStyles);
     const tableStyles = useStyles2(getTableStyles);
     const infiniteLoaderRef = useRef<InfiniteLoader>(null);
     const [listEl, setListEl] = useState<FixedSizeList | null>(null);
@@ -82,12 +83,12 @@ export const SearchResultsTable = React.memo(
         selection,
         selectionToggle,
         clearSelection,
-        styles,
+        columnStyles,
         onTagSelected,
         onDatasourceChange,
         response.view?.length >= response.totalRows
       );
-    }, [response, width, styles, selection, selectionToggle, clearSelection, onTagSelected, onDatasourceChange]);
+    }, [response, width, columnStyles, selection, selectionToggle, clearSelection, onTagSelected, onDatasourceChange]);
 
     const options: TableOptions<{}> = useMemo(
       () => ({
@@ -223,3 +224,80 @@ const getStyles = (theme: GrafanaTheme2) => {
     `,
   };
 };
+
+// CSS for columns from react table
+const getColumnStyles = (theme: GrafanaTheme2) => {
+  return {
+    nameCellStyle: css`
+      border-right: none;
+      padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(2)};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: text;
+      white-space: nowrap;
+      &:hover {
+        box-shadow: none;
+      }
+    `,
+    headerNameStyle: css`
+      padding-left: ${theme.spacing(1)};
+    `,
+
+    typeIcon: css`
+      margin-left: 5px;
+      margin-right: 9.5px;
+      vertical-align: middle;
+      display: inline-block;
+      margin-bottom: ${theme.v1.spacing.xxs};
+      fill: ${theme.colors.text.secondary};
+    `,
+    datasourceItem: css`
+      span {
+        &:hover {
+          color: ${theme.colors.text.link};
+        }
+      }
+    `,
+    missingTitleText: css`
+      color: ${theme.colors.text.disabled};
+      font-style: italic;
+    `,
+    invalidDatasourceItem: css`
+      color: ${theme.colors.error.main};
+      text-decoration: line-through;
+    `,
+    typeText: css`
+      color: ${theme.colors.text.secondary};
+      padding-top: ${theme.spacing(1)};
+    `,
+    locationItem: css`
+      color: ${theme.colors.text.secondary};
+      margin-right: 12px;
+    `,
+    sortedHeader: css`
+      text-align: right;
+      padding-right: ${theme.spacing(2)};
+    `,
+    sortedItems: css`
+      text-align: right;
+      padding: ${theme.spacing(1)} ${theme.spacing(3)} ${theme.spacing(1)} ${theme.spacing(1)};
+    `,
+    locationCellStyle: css`
+      padding-top: ${theme.spacing(1)};
+      padding-right: ${theme.spacing(1)};
+    `,
+    checkboxHeader: css`
+      margin-left: 2px;
+    `,
+    checkbox: css`
+      margin-left: 10px;
+      margin-right: 10px;
+      margin-top: 5px;
+    `,
+    tagList: css`
+      padding-top: ${theme.spacing(0.5)};
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+    `,
+  };
+};