From 8444c7760c8ff3d2cfd1ce73553711744086ca83 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Tue, 9 Jul 2024 12:53:43 +0100 Subject: [PATCH] Chore: Remove deprecated SCSS styles (#90187) clean up infobox styles --- .../DataSourceHttpSettings.tsx | 16 ++----- .../components/EmptyListCTA/EmptyListCTA.tsx | 7 ++- public/app/features/admin/AdminSettings.tsx | 5 +- public/app/features/users/UsersListPage.tsx | 5 +- .../components/AnnotationsHelp.tsx | 7 +-- public/sass/_angular.scss | 48 +++++++++++++++++++ public/sass/_grafana.scss | 1 - public/sass/components/_infobox.scss | 48 ------------------- 8 files changed, 67 insertions(+), 70 deletions(-) delete mode 100644 public/sass/components/_infobox.scss diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index ad412649e7e..6f1dc9e7d58 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -1,10 +1,11 @@ import { css, cx } from '@emotion/css'; import { useState, useCallback, useId } from 'react'; -import { GrafanaTheme2, SelectableValue } from '@grafana/data'; +import { SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes'; +import { Alert } from '../Alert/Alert'; import { FormField } from '../FormField/FormField'; import { InlineFormLabel } from '../FormLabel/FormLabel'; import { InlineField } from '../Forms/InlineField'; @@ -38,9 +39,8 @@ const DEFAULT_ACCESS_OPTION = { }; const HttpAccessHelp = () => { - const styles = useStyles2(getAccessStyles); return ( -
+

Access mode controls how requests to the data source will be handled. @@ -60,16 +60,10 @@ const HttpAccessHelp = () => { Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode.

-
+ ); }; -const getAccessStyles = (theme: GrafanaTheme2) => ({ - infoBox: css({ - marginTop: theme.spacing(3), - }), -}); - const LABEL_WIDTH = 26; export const DataSourceHttpSettings = (props: HttpSettingsProps) => { diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index 6f6a667365a..cbe06efd0aa 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { MouseEvent } from 'react'; import { selectors } from '@grafana/e2e-selectors'; -import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui'; +import { Alert, Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui'; export interface Props { title: string; @@ -59,10 +59,9 @@ const EmptyListCTA = ({ '' )} {infoBox ? ( -
- {infoBoxTitle &&
{infoBoxTitle}
} +
-
+ ) : ( '' )} diff --git a/public/app/features/admin/AdminSettings.tsx b/public/app/features/admin/AdminSettings.tsx index fd9a4abf5a9..ddad7b7993a 100644 --- a/public/app/features/admin/AdminSettings.tsx +++ b/public/app/features/admin/AdminSettings.tsx @@ -1,6 +1,7 @@ import { useAsync } from 'react-use'; import { getBackendSrv } from '@grafana/runtime'; +import { Alert } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import { AdminSettingsTable } from './AdminSettingsTable'; @@ -13,10 +14,10 @@ function AdminSettings() { return ( -
+ These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change these you currently need to restart Grafana. -
+ {loading && } diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx index 357326d28bc..452901a89bb 100644 --- a/public/app/features/users/UsersListPage.tsx +++ b/public/app/features/users/UsersListPage.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { renderMarkdown } from '@grafana/data'; +import { Alert } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import { contextSrv } from 'app/core/core'; import { OrgUser, OrgRole, StoreState } from 'app/types'; @@ -104,7 +105,9 @@ export const UsersListPageUnconnected = ({ {externalUserMngInfoHtml && ( -
+ +
+ )} {isLoading && renderTable()} diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx index 91a81625017..807850f41c0 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationsHelp.tsx @@ -1,8 +1,9 @@ +import { Alert } from '@grafana/ui'; + export const AnnotationsHelp = () => { return ( -
+
-
Annotation Query Format

An annotation is an event that is overlaid on top of graphs. Annotation rendering is expensive so it is important to limit the number of rows returned.{' '} @@ -37,6 +38,6 @@ export const AnnotationsHelp = () => { {`${'{{resource.label.label_name}}'}`} = Resource label metadata e.g. resource.label.zone

-
+ ); }; diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index a068641e58d..080cacd5866 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -1981,3 +1981,51 @@ $easing: cubic-bezier(0, 0, 0.265, 1); color: $text-muted; } } + +.grafana-info-box { + position: relative; + padding: $space-lg; + background-color: $empty-list-cta-bg; + border-left: 3px solid $info-box-border-color; + margin-bottom: $space-md; + margin-right: $space-xs; + box-shadow: $card-shadow; + flex-grow: 1; + + h5 { + margin-bottom: $spacer; + } + ul { + padding-left: $spacer * 1.5; + } + + code { + @include font-family-monospace(); + font-size: $font-size-base - 2; + background-color: $code-tag-bg; + color: $text-color; + border: 1px solid $code-tag-border; + border-radius: 4px; + } + + p:last-child { + margin-bottom: 0; + } + + a { + @extend .external-link; + } + + &--max-lg { + max-width: map.get($grid-breakpoints, 'lg'); + } +} + +.grafana-info-box__close { + text-align: center; + display: block; + color: $link-color !important; + height: 0; + position: relative; + top: -9px; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index c2e237719dc..ffff5a0b999 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -19,7 +19,6 @@ @import 'components/gf-form'; @import 'components/modals'; @import 'components/dropdown'; -@import 'components/infobox'; @import 'components/query_editor'; @import 'components/dashboard_grid'; diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss deleted file mode 100644 index bae8c24fa13..00000000000 --- a/public/sass/components/_infobox.scss +++ /dev/null @@ -1,48 +0,0 @@ -@use 'sass:map'; -.grafana-info-box { - position: relative; - padding: $space-lg; - background-color: $empty-list-cta-bg; - border-left: 3px solid $info-box-border-color; - margin-bottom: $space-md; - margin-right: $space-xs; - box-shadow: $card-shadow; - flex-grow: 1; - - h5 { - margin-bottom: $spacer; - } - ul { - padding-left: $spacer * 1.5; - } - - code { - @include font-family-monospace(); - font-size: $font-size-base - 2; - background-color: $code-tag-bg; - color: $text-color; - border: 1px solid $code-tag-border; - border-radius: 4px; - } - - p:last-child { - margin-bottom: 0; - } - - a { - @extend .external-link; - } - - &--max-lg { - max-width: map.get($grid-breakpoints, 'lg'); - } -} - -.grafana-info-box__close { - text-align: center; - display: block; - color: $link-color !important; - height: 0; - position: relative; - top: -9px; -}