Query Library: Vertical space between rows; change "Run query" button color (#94177)

public/app/features/explore/ExploreRunQueryButton.tsx

@@ -3,7 +3,7 @@ import { ConnectedProps, connect } from 'react-redux';
 
 import { config, reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import { Button, Dropdown, Menu, ToolbarButton } from '@grafana/ui';
+import { Button, ButtonVariant, Dropdown, Menu, ToolbarButton } from '@grafana/ui';
 import { t } from '@grafana/ui/src/utils/i18n';
 import { useSelector } from 'app/types';
 
@@ -22,6 +22,7 @@ interface ExploreRunQueryButtonProps {
   queries: DataQuery[];
   rootDatasourceUid?: string;
   disabled?: boolean;
+  variant?: ButtonVariant;
   onClick?: () => void;
 }
 
@@ -36,6 +37,7 @@ export function ExploreRunQueryButton({
   rootDatasourceUid,
   queries,
   disabled = false,
+  variant = 'secondary',
   onClick,
   changeDatasource,
   setQueries,
@@ -82,7 +84,7 @@ export function ExploreRunQueryButton({
       const buttonText = runQueryText(exploreId, rootDatasourceUid);
       return (
         <Button
-          variant="secondary"
+          variant={variant}
           aria-label={buttonText.translation}
           onClick={() => {
             runQuery(exploreId);

public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx

@@ -82,6 +82,7 @@ function ActionsCell({ queryTemplate, rootDatasourceUid, queryUid }: ActionsCell
       <ExploreRunQueryButton
         queries={queryTemplate.query ? [queryTemplate.query] : []}
         rootDatasourceUid={rootDatasourceUid}
+        variant="primary"
         onClick={() => {
           setDrawerOpened(false);
           queryLibraryTrackRunQuery(queryTemplate.datasourceType || '');

public/app/features/explore/QueryLibrary/QueryTemplatesTable/index.tsx

@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
 import { SortByFn } from 'react-table';
 
-import { Column, InteractiveTable } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Column, InteractiveTable, useStyles2 } from '@grafana/ui';
 
 import ActionsCell from './ActionsCell';
 import { AddedByCell } from './AddedByCell';
@@ -34,12 +36,34 @@ type Props = {
 };
 
 export default function QueryTemplatesTable({ queryTemplateRows }: Props) {
+  const styles = useStyles2(getStyles);
   return (
     <InteractiveTable
       columns={columns}
       data={queryTemplateRows}
       getRowId={(row: { index: string }) => row.index}
       pageSize={20}
+      className={styles.table}
     />
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  table: css({
+    'tbody tr': {
+      position: 'relative',
+      backgroundColor: theme.colors.background.secondary,
+      borderCollapse: 'collapse',
+      borderBottom: 'unset',
+      overflow: 'hidden', // Ensure the row doesn't overflow and cause additonal scrollbars
+    },
+    /* Adds the pseudo-element for the lines between table rows */
+    'tbody tr::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 'auto 0 0 0',
+      height: theme.spacing(0.5),
+      backgroundColor: theme.colors.background.primary,
+    },
+  }),
+});