Loki: Label browser sticky footer (#73243)

* Create sticky footer section in loki metrics browser for query preview and action buttons

public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx

@@ -110,9 +110,11 @@ export function facetLabels(
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     background-color: ${theme.colors.background.secondary};
-    padding: ${theme.spacing(2)};
     width: 100%;
   `,
+  wrapperPadding: css`
+    padding: ${theme.spacing(2)};
+  `,
   list: css`
     margin-top: ${theme.spacing(1)};
     display: flex;
@@ -124,11 +126,20 @@ const getStyles = (theme: GrafanaTheme2) => ({
     & + & {
       margin: ${theme.spacing(2, 0)};
     }
+
     position: relative;
   `,
+  footerSectionStyles: css`
+    padding: ${theme.spacing(1)};
+    background-color: ${theme.colors.background.primary};
+    position: sticky;
+    bottom: -${theme.spacing(3)}; /* offset the padding on modal */
+    left: 0;
+  `,
   selector: css`
     font-family: ${theme.typography.fontFamilyMonospace};
     margin-bottom: ${theme.spacing(1)};
+    width: 100%;
   `,
   status: css`
     margin-bottom: ${theme.spacing(1)};
@@ -138,6 +149,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
     text-overflow: ellipsis;
     transition: opacity 100ms linear;
     opacity: 0;
+    font-size: ${theme.typography.bodySmall.fontSize};
+    height: calc(${theme.typography.bodySmall.fontSize} + 10px);
   `,
   statusShowing: css`
     opacity: 1;
@@ -434,8 +447,9 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
     }
 
     return (
+      <>
         <div className={styles.wrapper}>
-        <div className={styles.section}>
+          <div className={cx(styles.section, styles.wrapperPadding)}>
             <Label description="Which labels would you like to consider for your search?">
               1. Select labels to search in
             </Label>
@@ -453,7 +467,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
               ))}
             </div>
           </div>
-        <div className={styles.section}>
+          <div className={cx(styles.section, styles.wrapperPadding)}>
             <Label description="Choose the label values that you would like to use for the query. Use the search field to find values across selected labels.">
               2. Find values for the selected labels
             </Label>
@@ -510,11 +524,12 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
               ))}
             </div>
           </div>
-        <div className={styles.section}>
-          <Label>3. Resulting selector</Label>
-          <div aria-label="selector" className={styles.selector}>
-            {selector}
         </div>
+        <div className={styles.footerSectionStyles}>
+          <Label>3. Resulting selector</Label>
+          <pre aria-label="selector" className={styles.selector}>
+            {selector}
+          </pre>
           {validationStatus && <div className={styles.validationStatus}>{validationStatus}</div>}
           <div className={cx(styles.status, (status || error) && styles.statusShowing)}>
             <span className={error ? styles.error : ''}>{error || status}</span>
@@ -544,7 +559,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
             </Button>
           </HorizontalGroup>
         </div>
-      </div>
+      </>
     );
   }
 }