Table: add a select option when multiple tables exist (#23545)

* add a table picker

* move picker to the top

* add missing change

* Removed overflow from panel-content so dropdown menus can extend a panel, moved the select to the bottom

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/types/theme.ts

@@ -67,7 +67,7 @@ export interface GrafanaThemeCommons {
     formSpacingBase: number;
     formMargin: string;
     formFieldsetMargin: string;
-    formInputHeight: string;
+    formInputHeight: number;
     formButtonHeight: number;
     formInputPaddingHorizontal: string;
     // Used for icons do define spacing between icon and input field

packages/grafana-ui/src/components/Input/Input.tsx

@@ -57,7 +57,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
         label: input-wrapper;
         display: flex;
         width: 100%;
-        height: ${height};
+        height: ${height}px;
         border-radius: ${borderRadius};
         &:hover {
           > .prefix,

packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts

@@ -133,7 +133,7 @@ export function sharedSingleStatMigrationHandler(panel: PanelModel<SingleStatBas
 
   const { fieldOptions } = options;
 
-  if (previousVersion < 6.6) {
+  if (previousVersion < 6.6 && fieldOptions) {
     // discard the old `override` options and enter an empty array
     if (fieldOptions && fieldOptions.override) {
       const { override, ...rest } = options.fieldOptions;

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx

@@ -73,7 +73,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         background-color: ${bgColor};
         border-radius: ${borderRadius};
         border-color: ${borderColor};
-        height: ${theme.spacing.formInputHeight};
+        height: ${theme.spacing.formInputHeight}px;
 
         &:focus {
           ${getFocusCss(theme)}

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap

@@ -199,7 +199,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formButtonHeight": 32,
                   "formFieldsetMargin": "16px",
                   "formInputAffixPaddingHorizontal": "4px",
-                  "formInputHeight": "32px",
+                  "formInputHeight": 32,
                   "formInputMargin": "16px",
                   "formInputPaddingHorizontal": "8px",
                   "formLabelMargin": "0 0 4px 0",
@@ -515,7 +515,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formButtonHeight": 32,
                   "formFieldsetMargin": "16px",
                   "formInputAffixPaddingHorizontal": "4px",
-                  "formInputHeight": "32px",
+                  "formInputHeight": 32,
                   "formInputMargin": "16px",
                   "formInputPaddingHorizontal": "8px",
                   "formLabelMargin": "0 0 4px 0",

packages/grafana-ui/src/themes/default.ts

@@ -89,7 +89,7 @@ const theme: GrafanaThemeCommons = {
     formSpacingBase: SPACING_BASE,
     formMargin: `${SPACING_BASE * 4}px`,
     formFieldsetMargin: `${SPACING_BASE * 2}px`,
-    formInputHeight: `${SPACING_BASE * 4}px`,
+    formInputHeight: SPACING_BASE * 4,
     formButtonHeight: SPACING_BASE * 4,
     formInputPaddingHorizontal: `${SPACING_BASE}px`,