From e781716a38d8a43fab75577e0999dc4e6a60a22b Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Jun 2024 11:47:47 +0100 Subject: [PATCH] Chore: move `PageHeader` component to angular folder (#88556) move page-header component to angular folder, scss to angular.scss --- .betterer.results | 12 +- public/app/angular/angular_wrappers.ts | 3 +- .../components/PageHeader/PageHeader.test.tsx | 0 .../components/PageHeader/PageHeader.tsx | 9 +- .../PageHeader/PanelHeaderMenuItem.tsx | 0 public/sass/_angular.scss | 106 ++++++++++++++++++ public/sass/_grafana.scss | 1 - public/sass/components/_page_header.scss | 105 ----------------- 8 files changed, 117 insertions(+), 119 deletions(-) rename public/app/{core => angular}/components/PageHeader/PageHeader.test.tsx (100%) rename public/app/{core => angular}/components/PageHeader/PageHeader.tsx (94%) rename public/app/{core => angular}/components/PageHeader/PanelHeaderMenuItem.tsx (100%) delete mode 100644 public/sass/components/_page_header.scss diff --git a/.betterer.results b/.betterer.results index 1406670859c..90a453a8262 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1148,10 +1148,6 @@ exports[`better eslint`] = { "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [ [0, 0, 0, "Styles should be written using objects.", "0"] ], - "public/app/core/components/PageHeader/PageHeader.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/core/components/PageNotFound/EntityNotFound.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], @@ -7795,6 +7791,10 @@ exports[`no gf-form usage`] = { [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], + "public/app/angular/components/PageHeader/PageHeader.tsx:5381": [ + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], + [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] + ], "public/app/angular/components/code_editor/code_editor.ts:5381": [ [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], @@ -7877,10 +7877,6 @@ exports[`no gf-form usage`] = { "public/app/core/components/AccessControl/PermissionList.tsx:5381": [ [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] ], - "public/app/core/components/PageHeader/PageHeader.tsx:5381": [ - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], - [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"] - ], "public/app/features/admin/UserLdapSyncInfo.tsx:5381": [ [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"], diff --git a/public/app/angular/angular_wrappers.ts b/public/app/angular/angular_wrappers.ts index fc0263ca322..57d2508b69b 100644 --- a/public/app/angular/angular_wrappers.ts +++ b/public/app/angular/angular_wrappers.ts @@ -17,11 +17,12 @@ import { QueryEditor as CloudMonitoringQueryEditor } from 'app/plugins/datasourc import EmptyListCTA from '../core/components/EmptyListCTA/EmptyListCTA'; import { Footer } from '../core/components/Footer/Footer'; -import { PageHeader } from '../core/components/PageHeader/PageHeader'; import { MetricSelect } from '../core/components/Select/MetricSelect'; import { TagFilter } from '../core/components/TagFilter/TagFilter'; import { HelpModal } from '../core/components/help/HelpModal'; +import { PageHeader } from './components/PageHeader/PageHeader'; + const { SecretFormField } = LegacyForms; export function registerAngularDirectives() { diff --git a/public/app/core/components/PageHeader/PageHeader.test.tsx b/public/app/angular/components/PageHeader/PageHeader.test.tsx similarity index 100% rename from public/app/core/components/PageHeader/PageHeader.test.tsx rename to public/app/angular/components/PageHeader/PageHeader.test.tsx diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/angular/components/PageHeader/PageHeader.tsx similarity index 94% rename from public/app/core/components/PageHeader/PageHeader.tsx rename to public/app/angular/components/PageHeader/PageHeader.tsx index 12c80a204f9..5d9ebd07b6a 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/angular/components/PageHeader/PageHeader.tsx @@ -3,11 +3,12 @@ import React from 'react'; import { NavModelItem, GrafanaTheme2 } from '@grafana/data'; import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui'; -import { PanelHeaderMenuItem } from 'app/core/components/PageHeader/PanelHeaderMenuItem'; -import { PageInfoItem } from '../Page/types'; -import { PageInfo } from '../PageInfo/PageInfo'; -import { ProBadge } from '../Upgrade/ProBadge'; +import { PageInfoItem } from '../../../core/components/Page/types'; +import { PageInfo } from '../../../core/components/PageInfo/PageInfo'; +import { ProBadge } from '../../../core/components/Upgrade/ProBadge'; + +import { PanelHeaderMenuItem } from './PanelHeaderMenuItem'; export interface Props { navItem: NavModelItem; diff --git a/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx b/public/app/angular/components/PageHeader/PanelHeaderMenuItem.tsx similarity index 100% rename from public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx rename to public/app/angular/components/PageHeader/PanelHeaderMenuItem.tsx diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss index 2a43c67e0f3..ef72d796223 100644 --- a/public/sass/_angular.scss +++ b/public/sass/_angular.scss @@ -1162,3 +1162,109 @@ div.editor-option label { } } } + +.page-header { + margin-top: $space-md; + + .btn { + float: right; + margin-left: $space-md; + + // better align icons + .fa { + position: relative; + top: 1px; + } + } + + @include media-breakpoint-up(md) { + margin-top: 0; + } +} + +.page-header__inner { + flex-grow: 1; + display: flex; + padding: $space-lg 0; +} + +.page-header__title { + font-size: $font-size-h2; + margin-bottom: 1px; + padding-top: $spacer; +} + +.page-header__img { + position: relative; + top: 10px; + height: 50px; +} + +.page-header__icon { + font-size: 50px; + width: 50px; + height: 50px; + position: relative; + color: $text-color-weak; + + &.fa { + top: 10px; + } + + &.gicon { + top: 10px; + } + + &.icon-gf { + top: 3px; + } +} + +.page-header__logo { + margin: -1px $spacer -1px 0; + color: $text-color-weak; +} + +.page-header__sub-title { + color: $text-muted; +} + +.page-header-stamps-type { + color: $link-color-disabled; + text-transform: uppercase; +} + +.page-header__select-nav { + margin-bottom: 10px; + max-width: 100%; + + @include media-breakpoint-up(lg) { + display: none; + } +} + +.page-header__link { + color: $text-color; + text-decoration: underline; +} + +.page-header__tabs { + display: none; + @include media-breakpoint-up(lg) { + display: block; + } +} + +.page-breadcrumbs { + display: flex; + padding: 10px 0; + line-height: 0.5; +} + +.breadcrumb { + display: inline-block; + box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); + overflow: hidden; + border-radius: 5px; + counter-reset: flag; +} diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 1182aa2cc05..da24198ee45 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -43,7 +43,6 @@ @import 'components/row'; @import 'components/json_explorer'; @import 'components/dashboard_grid'; -@import 'components/page_header'; @import 'components/add_data_source'; @import 'components/panel_header'; diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss deleted file mode 100644 index f0b3eb1dcd9..00000000000 --- a/public/sass/components/_page_header.scss +++ /dev/null @@ -1,105 +0,0 @@ -.page-header { - margin-top: $space-md; - - .btn { - float: right; - margin-left: $space-md; - - // better align icons - .fa { - position: relative; - top: 1px; - } - } - - @include media-breakpoint-up(md) { - margin-top: 0; - } -} - -.page-header__inner { - flex-grow: 1; - display: flex; - padding: $space-lg 0; -} - -.page-header__title { - font-size: $font-size-h2; - margin-bottom: 1px; - padding-top: $spacer; -} - -.page-header__img { - position: relative; - top: 10px; - height: 50px; -} - -.page-header__icon { - font-size: 50px; - width: 50px; - height: 50px; - position: relative; - color: $text-color-weak; - - &.fa { - top: 10px; - } - - &.gicon { - top: 10px; - } - - &.icon-gf { - top: 3px; - } -} - -.page-header__logo { - margin: -1px $spacer -1px 0; - color: $text-color-weak; -} - -.page-header__sub-title { - color: $text-muted; -} - -.page-header-stamps-type { - color: $link-color-disabled; - text-transform: uppercase; -} - -.page-header__select-nav { - margin-bottom: 10px; - max-width: 100%; - - @include media-breakpoint-up(lg) { - display: none; - } -} - -.page-header__link { - color: $text-color; - text-decoration: underline; -} - -.page-header__tabs { - display: none; - @include media-breakpoint-up(lg) { - display: block; - } -} - -.page-breadcrumbs { - display: flex; - padding: 10px 0; - line-height: 0.5; -} - -.breadcrumb { - display: inline-block; - box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); - overflow: hidden; - border-radius: 5px; - counter-reset: flag; -}