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

Chore: Remove some SASS classnames from SubMenu (#69302)

Browse Source 
Remove classNames from SubMenu
This commit is contained in:
Tobias Skarhed 2023-06-12 17:25:38 +02:00 committed by GitHub
parent 555ebb891b
commit b1da3dd202
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/app/features/dashboard/components/SubMenu/SubMenu.tsx
View File

@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import React, { PureComponent } from 'react';
import { connect, MapStateToProps } from 'react-redux';
import { AnnotationQuery, DataQuery } from '@grafana/data';
import { AnnotationQuery, DataQuery, GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
import { StoreState } from '../../../../types';
import { getSubMenuVariables, getVariablesState } from '../../../variables/state/selectors';
@ -14,7 +15,7 @@ import { Annotations } from './Annotations';
import { DashboardLinks } from './DashboardLinks';
import { SubMenuItems } from './SubMenuItems';
interface OwnProps {
interface OwnProps extends Themeable2 {
dashboard: DashboardModel;
links: DashboardLink[];
annotations: AnnotationQuery[];
@ -43,7 +44,9 @@ class SubMenuUnConnected extends PureComponent<Props> {
};
render() {
const { dashboard, variables, links, annotations } = this.props;
const { dashboard, variables, links, annotations, theme } = this.props;
const styles = getStyles(theme);
if (!dashboard.isSubMenuVisible()) {
return null;
@ -52,8 +55,8 @@ class SubMenuUnConnected extends PureComponent<Props> {
const readOnlyVariables = dashboard.meta.isSnapshot ?? false;
return (
<div className="submenu-controls">
<form aria-label="Template variables" className={styles}>
<div className={styles.submenu}>
<form aria-label="Template variables" className={styles.formStyles}>
<SubMenuItems variables={variables} readOnly={readOnlyVariables} />
</form>
<Annotations
@ -61,7 +64,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
onAnnotationChanged={this.onAnnotationStateChanged}
events={dashboard.events}
/>
<div className="gf-form gf-form--grow" />
<div className={styles.spacer} />
{dashboard && <DashboardLinks dashboard={dashboard} links={links} />}
</div>
);
@ -76,12 +79,28 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
};
};
const styles = css`
display: flex;
flex-wrap: wrap;
display: contents;
`;
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
formStyles: css`
display: flex;
flex-wrap: wrap;
display: contents;
`,
submenu: css`
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
align-items: flex-start;
gap: ${theme.spacing(1)} ${theme.spacing(2)};
padding: 0 0 ${theme.spacing(1)} 0;
`,
spacer: css({
flexGrow: 1,
}),
};
});
export const SubMenu = connect(mapStateToProps)(SubMenuUnConnected);
export const SubMenu = withTheme2(connect(mapStateToProps)(SubMenuUnConnected));
SubMenu.displayName = 'SubMenu';