PanelInspect: Update UI for Data display options (#25478)

* Add TableDataOptions component

* A bit along the way

* Make transforms work

* Make it work

* Add collapsed text

* Fix transformations and overflow for QueryOperationRow

* Fix layout

* Minor fixes

* Fix feedback

* Remove unused imports

* Remove unused Container

* Horizontal layout for Switches

* Fix Swicth bug

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -82,11 +82,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       margin-bottom: ${theme.spacing.md};
     `,
     header: css`
-      padding: 0 ${theme.spacing.sm};
+      padding: ${theme.spacing.xs} ${theme.spacing.sm};
       border-radius: ${theme.border.radius.sm};
       background: ${theme.colors.bg2};
-      height: ${theme.spacing.formInputHeight}px;
-      line-height: ${theme.spacing.formInputHeight}px;
+      min-height: ${theme.spacing.formInputHeight}px;
+      line-height: ${theme.spacing.sm}px;
       display: flex;
       align-items: center;
       justify-content: space-between;

public/app/features/dashboard/components/Inspector/DetailText.tsx

+import React, { FC } from 'react';
+import { useStyles } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+const getStyles = (theme: GrafanaTheme) => css`
+  margin: 0;
+  margin-left: ${theme.spacing.md};
+  font-size: ${theme.typography.size.sm};
+  color: ${theme.colors.textWeak};
+`;
+
+export const DetailText: FC = ({ children }) => {
+  const collapsedTextStyles = useStyles(getStyles);
+  return <p className={collapsedTextStyles}>{children}</p>;
+};

public/app/features/dashboard/components/Inspector/styles.ts

@@ -54,14 +54,18 @@ export const getPanelInspectorStyles = stylesFactory(() => {
     `,
     actionsWrapper: css`
       display: flex;
-      flex-wrap: wrap;
     `,
     leftActions: css`
       display: flex;
       flex-grow: 1;
+
+      max-width: 85%;
+      @media (max-width: 1345px) {
+        max-width: 75%;
+      }
     `,
     options: css`
-      margin-top: 19px;
+      padding-top: ${config.theme.spacing.sm};
     `,
     dataDisplayOptions: css`
       flex-grow: 1;