Add css width because reasons

grafana · Sep 14, 2022 · 02e8413 · 02e8413
1 parent ccd984a
commit 02e8413
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/grafana/fire-datasource/src/QueryEditor/EditorRow.tsx b/grafana/fire-datasource/src/QueryEditor/EditorRow.tsx
@@ -7,15 +7,18 @@ import { useStyles2 } from '@grafana/ui';
 import { Stack } from './Stack';
 
 interface EditorRowProps {
-  children: React.ReactNode
+  children: React.ReactNode;
+  stackProps?: Partial<React.ComponentProps<typeof Stack>>;
 }
 
-export const EditorRow: React.FC<EditorRowProps> = ({ children }) => {
+export const EditorRow: React.FC<EditorRowProps> = ({ children, stackProps }) => {
   const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.root}>
-      <Stack gap={2}>{children}</Stack>
+      <Stack gap={2} {...stackProps}>
+        {children}
+      </Stack>
     </div>
   );
 };

diff --git a/grafana/fire-datasource/src/QueryEditor/LabelsEditor.tsx b/grafana/fire-datasource/src/QueryEditor/LabelsEditor.tsx
@@ -145,7 +145,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     queryField: css`
       border-radius: ${theme.shape.borderRadius()};
       border: 1px solid ${theme.components.input.borderColor};
+      
       flex: 1;
+      // Not exactly sure but without this the editor doe not shrink after resizing (so you can make it bigger but not
+      // smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
+      // this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
+      width: 100px;
     `,
   };
 };
diff --git a/grafana/fire-datasource/src/QueryEditor/QueryEditor.tsx b/grafana/fire-datasource/src/QueryEditor/QueryEditor.tsx
@@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { useMount } from 'react-use';
 
 import { ButtonCascader, CascaderOption } from '@grafana/ui';
-import {CoreApp, QueryEditorProps} from '@grafana/data';
+import { CoreApp, QueryEditorProps } from '@grafana/data';
 
 import { FireDataSource } from '../datasource';
 import { defaultQuery, MyDataSourceOptions, ProfileTypeMessage, Query } from '../types';
@@ -70,7 +70,7 @@ export function QueryEditor(props: Props) {
 
   return (
     <EditorRows>
-      <EditorRow>
+      <EditorRow stackProps={{ wrap: false, gap: 1 }}>
         <ButtonCascader onChange={onProfileTypeChange} options={cascaderOptions} buttonProps={{ variant: 'secondary' }}>
           {selectedProfileName}
         </ButtonCascader>
@@ -99,5 +99,5 @@ function normalizeQuery(query: Query, app?: CoreApp) {
     // This will also be a default when having 'both' query and adding it from explore to dashboard
     normalized.queryType = 'profile';
   }
-  return normalized
+  return normalized;
 }