diff --git a/.betterer.results b/.betterer.results index 122f941bded..5e71c366204 100644 --- a/.betterer.results +++ b/.betterer.results @@ -3144,26 +3144,6 @@ exports[`better eslint`] = { "public/app/features/explore/ContentOutline/ContentOutline.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/features/explore/ExploreDrawer.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] - ], - "public/app/features/explore/ExplorePaneContainer.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/features/explore/FeatureTogglePage.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/features/explore/LiveTailButton.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] - ], "public/app/features/explore/Logs/LiveLogs.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "1"], @@ -3213,19 +3193,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "3"] ], - "public/app/features/explore/MetaInfoText.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] - ], - "public/app/features/explore/NoData.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], - "public/app/features/explore/NoDataSourceCallToAction.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/explore/NodeGraph/NodeGraphContainer.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], @@ -3309,13 +3276,6 @@ exports[`better eslint`] = { [0, 0, 0, "Styles should be written using objects.", "5"], [0, 0, 0, "Styles should be written using objects.", "6"] ], - "public/app/features/explore/SecondaryActions.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/features/explore/SupplementaryResultError.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/features/explore/TraceView/TraceView.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], diff --git a/public/app/features/explore/ExploreDrawer.tsx b/public/app/features/explore/ExploreDrawer.tsx index a58ae9415a6..d04fc46fcac 100644 --- a/public/app/features/explore/ExploreDrawer.tsx +++ b/public/app/features/explore/ExploreDrawer.tsx @@ -21,7 +21,7 @@ export function ExploreDrawer(props: Props) { return ( keyframes` `; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - position: fixed !important; - bottom: 0; - background: ${theme.colors.background.primary}; - border-top: 1px solid ${theme.colors.border.weak}; - margin: ${theme.spacing(0, -2, 0, -2)}; - box-shadow: ${theme.shadows.z3}; - z-index: ${theme.zIndex.navbarFixed}; - `, - drawerActive: css` - opacity: 1; - animation: 0.5s ease-out ${drawerSlide(theme)}; - `, - rzHandle: css` - background: ${theme.colors.secondary.main}; - transition: 0.3s background ease-in-out; - position: relative; - width: 200px !important; - height: 7px !important; - left: calc(50% - 100px) !important; - top: -4px !important; - cursor: grab; - border-radius: ${theme.shape.radius.pill}; - &:hover { - background: ${theme.colors.secondary.shade}; - } - `, + // @ts-expect-error csstype doesn't allow !important. see https://github.com/frenic/csstype/issues/114 + fixed: css({ + position: 'fixed !important', + }), + container: css({ + bottom: 0, + background: theme.colors.background.primary, + borderTop: `1px solid ${theme.colors.border.weak}`, + margin: theme.spacing(0, -2, 0, -2), + boxShadow: theme.shadows.z3, + zIndex: theme.zIndex.navbarFixed, + }), + drawerActive: css({ + opacity: 1, + animation: `0.5s ease-out ${drawerSlide(theme)}`, + }), + rzHandle: css({ + background: theme.colors.secondary.main, + transition: '0.3s background ease-in-out', + position: 'relative', + width: '200px !important', + height: '7px !important', + left: 'calc(50% - 100px) !important', + top: '-4px !important', + cursor: 'grab', + borderRadius: theme.shape.radius.pill, + ['&:hover']: { + background: theme.colors.secondary.shade, + }, + }), }); diff --git a/public/app/features/explore/ExplorePaneContainer.tsx b/public/app/features/explore/ExplorePaneContainer.tsx index 2c5f73917df..7eec0b39ed4 100644 --- a/public/app/features/explore/ExplorePaneContainer.tsx +++ b/public/app/features/explore/ExplorePaneContainer.tsx @@ -2,26 +2,22 @@ import { css } from '@emotion/css'; import React, { useEffect, useMemo, useRef } from 'react'; import { connect } from 'react-redux'; -import { EventBusSrv, GrafanaTheme2 } from '@grafana/data'; +import { EventBusSrv } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, CustomScrollbar } from '@grafana/ui'; +import { CustomScrollbar } from '@grafana/ui'; import { stopQueryState } from 'app/core/utils/explore'; import { StoreState, useSelector } from 'app/types'; import Explore from './Explore'; import { getExploreItemSelector } from './state/selectors'; -const getStyles = (theme: GrafanaTheme2) => { - return { - explore: css` - label: explorePaneContainer; - display: flex; - flex-direction: column; - min-width: 600px; - height: 100%; - `, - }; -}; +const containerStyles = css({ + label: 'explorePaneContainer', + display: 'flex', + flexDirection: 'column', + minWidth: '600px', + height: '100%', +}); interface Props { exploreId: string; @@ -38,7 +34,6 @@ interface Props { */ function ExplorePaneContainerUnconnected({ exploreId }: Props) { useStopQueries(exploreId); - const styles = useStyles2(getStyles); const eventBus = useRef(new EventBusSrv()); const ref = useRef(null); @@ -49,7 +44,7 @@ function ExplorePaneContainerUnconnected({ exploreId }: Props) { return ( -
+
diff --git a/public/app/features/explore/FeatureTogglePage.tsx b/public/app/features/explore/FeatureTogglePage.tsx index 254da695d93..f7ca69bd6d2 100644 --- a/public/app/features/explore/FeatureTogglePage.tsx +++ b/public/app/features/explore/FeatureTogglePage.tsx @@ -5,12 +5,14 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; +function getStyles(theme: GrafanaTheme2) { + return css({ + marginTop: theme.spacing(2), + }); +} + export default function FeatureTogglePage() { - const styles = useStyles2( - (theme: GrafanaTheme2) => css` - margin-top: ${theme.spacing(2)}; - ` - ); + const styles = useStyles2(getStyles); return ( diff --git a/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx b/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx index 6458cb0b69d..43d7ceb7e54 100644 --- a/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx +++ b/public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx @@ -38,11 +38,11 @@ export const FlameGraphExploreContainer = (props: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - background: ${theme.colors.background.primary}; - display: flow-root; - padding: 0 ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}; - border: 1px solid ${theme.components.panel.borderColor}; - border-radius: ${theme.shape.radius.default}; - `, + container: css({ + background: theme.colors.background.primary, + display: 'flow-root', + padding: theme.spacing(0, 1, 1, 1), + border: `1px solid ${theme.components.panel.borderColor}`, + borderRadius: theme.shape.radius.default, + }), }); diff --git a/public/app/features/explore/LiveTailButton.tsx b/public/app/features/explore/LiveTailButton.tsx index e062dc0d6f7..8d6decc3e57 100644 --- a/public/app/features/explore/LiveTailButton.tsx +++ b/public/app/features/explore/LiveTailButton.tsx @@ -56,26 +56,26 @@ export function LiveTailButton(props: LiveTailButtonProps) { } const styles = { - stopButtonEnter: css` - label: stopButtonEnter; - width: 0; - opacity: 0; - overflow: hidden; - `, - stopButtonEnterActive: css` - label: stopButtonEnterActive; - opacity: 1; - width: 32px; - `, - stopButtonExit: css` - label: stopButtonExit; - width: 32px; - opacity: 1; - overflow: hidden; - `, - stopButtonExitActive: css` - label: stopButtonExitActive; - opacity: 0; - width: 0; - `, + stopButtonEnter: css({ + label: 'stopButtonEnter', + width: 0, + opacity: 0, + overflow: 'hidden', + }), + stopButtonEnterActive: css({ + label: 'stopButtonEnterActive', + opacity: 1, + width: '32px', + }), + stopButtonExit: css({ + label: 'stopButtonExit', + width: '32px', + opacity: 1, + overflow: 'hidden', + }), + stopButtonExitActive: css({ + label: 'stopButtonExitActive', + opacity: 0, + width: 0, + }), }; diff --git a/public/app/features/explore/MetaInfoText.tsx b/public/app/features/explore/MetaInfoText.tsx index 3392f6c7969..29c8528d355 100644 --- a/public/app/features/explore/MetaInfoText.tsx +++ b/public/app/features/explore/MetaInfoText.tsx @@ -5,33 +5,32 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; const getStyles = (theme: GrafanaTheme2) => ({ - metaContainer: css` - flex: 1; - color: ${theme.colors.text.secondary}; - margin-bottom: ${theme.spacing(2)}; - min-width: 30%; - display: flex; - flex-wrap: wrap; - `, - metaItem: css` - margin-right: ${theme.spacing(2)}; - margin-top: ${theme.spacing(0.5)}; - display: flex; - align-items: center; - - .logs-meta-item__error { - color: ${theme.colors.error.text}; - } - `, - metaLabel: css` - margin-right: calc(${theme.spacing(2)} / 2); - font-size: ${theme.typography.bodySmall.fontSize}; - font-weight: ${theme.typography.fontWeightMedium}; - `, - metaValue: css` - font-family: ${theme.typography.fontFamilyMonospace}; - font-size: ${theme.typography.bodySmall.fontSize}; - `, + metaContainer: css({ + flex: 1, + color: theme.colors.text.secondary, + marginBottom: theme.spacing(2), + minWidth: '30%', + display: 'flex', + flexWrap: 'wrap', + }), + metaItem: css({ + marginRight: theme.spacing(2), + marginTop: theme.spacing(0.5), + display: 'flex', + alignItems: 'center', + ['.logs-meta-item__error']: { + color: theme.colors.error.text, + }, + }), + metaLabel: css({ + marginRight: `calc(${theme.spacing(2)} / 2)`, + fontSize: theme.typography.bodySmall.fontSize, + fontWeight: theme.typography.fontWeightMedium, + }), + metaValue: css({ + fontFamily: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.bodySmall.fontSize, + }), }); export interface MetaItemProps { diff --git a/public/app/features/explore/NoData.tsx b/public/app/features/explore/NoData.tsx index 7c5182851dd..ed819de9ffe 100644 --- a/public/app/features/explore/NoData.tsx +++ b/public/app/features/explore/NoData.tsx @@ -16,20 +16,20 @@ export const NoData = () => { }; const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - label: no-data-card; - padding: ${theme.spacing(3)}; - background: ${theme.colors.background.primary}; - border-radius: ${theme.shape.radius.default}; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex-grow: 1; - `, - message: css` - font-size: ${theme.typography.h2.fontSize}; - padding: ${theme.spacing(4)}; - color: ${theme.colors.text.disabled}; - `, + wrapper: css({ + label: 'no-data-card', + padding: theme.spacing(3), + background: theme.colors.background.primary, + borderRadius: theme.shape.radius.default, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + flexGrow: 1, + }), + message: css({ + fontSize: theme.typography.h2.fontSize, + padding: theme.spacing(4), + color: theme.colors.text.disabled, + }), }); diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx index 1e390cf7bdb..a3e773f3a57 100644 --- a/public/app/features/explore/NoDataSourceCallToAction.tsx +++ b/public/app/features/explore/NoDataSourceCallToAction.tsx @@ -1,12 +1,21 @@ import { css } from '@emotion/css'; import React from 'react'; -import { LinkButton, CallToActionCard, Icon, useTheme2 } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { LinkButton, CallToActionCard, Icon, useStyles2 } from '@grafana/ui'; import { contextSrv } from 'app/core/core'; import { AccessControlAction } from 'app/types'; +function getCardStyles(theme: GrafanaTheme2) { + return css({ + maxWidth: `${theme.breakpoints.values.lg}px`, + marginTop: theme.spacing(2), + alignSelf: 'center', + }); +} + export const NoDataSourceCallToAction = () => { - const theme = useTheme2(); + const cardStyles = useStyles2(getCardStyles); const canCreateDataSource = contextSrv.hasPermission(AccessControlAction.DataSourcesCreate) && @@ -35,13 +44,5 @@ export const NoDataSourceCallToAction = () => { ); - const cardClassName = css` - max-width: ${theme.breakpoints.values.lg}px; - margin-top: ${theme.spacing(2)}; - align-self: center; - `; - - return ( - - ); + return ; }; diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx index 5c10ed23664..d5c29d43e2e 100644 --- a/public/app/features/explore/SecondaryActions.tsx +++ b/public/app/features/explore/SecondaryActions.tsx @@ -20,12 +20,12 @@ type Props = { const getStyles = (theme: GrafanaTheme2) => { return { - containerMargin: css` - display: flex; - flex-wrap: wrap; - gap: ${theme.spacing(1)}; - margin-top: ${theme.spacing(2)}; - `, + containerMargin: css({ + display: 'flex', + flexWrap: 'wrap', + gap: theme.spacing(1), + marginTop: theme.spacing(2), + }), }; }; diff --git a/public/app/features/explore/SupplementaryResultError.tsx b/public/app/features/explore/SupplementaryResultError.tsx index 6193dc1af67..0ad91832057 100644 --- a/public/app/features/explore/SupplementaryResultError.tsx +++ b/public/app/features/explore/SupplementaryResultError.tsx @@ -55,18 +55,18 @@ export function SupplementaryResultError(props: Props) { const getStyles = (theme: GrafanaTheme2) => { return { - supplementaryErrorContainer: css` - width: 50%; - min-width: ${theme.breakpoints.values.sm}px; - margin: 0 auto; - `, - suggestedActionWrapper: css` - height: ${theme.spacing(6)}; - button { - position: absolute; - right: ${theme.spacing(2)}; - top: ${theme.spacing(7)}; - } - `, + supplementaryErrorContainer: css({ + width: '50%', + minWidth: `${theme.breakpoints.values.sm}px`, + margin: '0 auto', + }), + suggestedActionWrapper: css({ + height: theme.spacing(6), + ['button']: { + position: 'absolute', + right: theme.spacing(2), + top: theme.spacing(7), + }, + }), }; };