IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

NewPanelEdit: Add unified UI to queries and transformations (#23478)

Browse Source 
* Do not use pointer cursor on icon by default

* Allow items alignment in the HorizontalGroup layout

* Add util for rendering components based on their type (element or function)

* Components for rendering query and transformation rows in a unified way

* Apply new UI fo query and transformation rows

* Add some tests

* Minor fix for scroll area

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Dominik Prokop
2020-04-09 21:23:22 +02:00
committed by GitHub
parent 76827d2152
commit 712564f66a
15 changed files with 705 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Icon/Icon.tsx
View File

@@ -24,7 +24,6 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
vertical-align: middle;
display: inline-block;
margin-bottom: ${theme.spacing.xxs};
cursor: pointer;
fill: currentColor;
`,
orange: css`

4
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@@ -42,8 +42,8 @@ export const Layout: React.FC<LayoutProps> = ({
);
};
export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify }) => (
<Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal}>
export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify, align }) => (
<Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal} align={align}>
{children}
</Layout>
);

2
packages/grafana-ui/src/utils/index.ts
View File

@@ -11,3 +11,5 @@ export { DOMUtil };
// Exposes standard editors for registries of optionsUi config and panel options UI
export { getStandardFieldConfigs, getStandardOptionEditors } from './standardEditors';
export { renderOrCallToRender } from './renderOrCallToRender';

22
packages/grafana-ui/src/utils/renderOrCallToRender.ts Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
/**
* Given react node or function returns element accordingly
*
* @param itemToRender
* @param props props to be passed to the function if item provided as such
*/
export function renderOrCallToRender<TProps = any>(
itemToRender: ((props?: TProps) => React.ReactNode) | React.ReactNode,
props?: TProps
): React.ReactNode {
if (React.isValidElement(itemToRender) || typeof itemToRender === 'string' || typeof itemToRender === 'number') {
return itemToRender;
}
if (typeof itemToRender === 'function') {
return itemToRender(props);
}
throw new Error(`${itemToRender} is not a React element nor a function that returns React element`);
}