From 01a1d0ebdcad346e4d88537d3662d17a3b551cb0 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Tue, 30 May 2023 18:05:58 +0000 Subject: [PATCH] OUI 1.2 & Breadcrumb stuff Update snapshot Signed-off-by: Josh Romero chore (chrome): Remove other remnants of breadcrumb styling Essentially reverting: - https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1954 - https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2085 Signed-off-by: Josh Romero chore(chrome): Remove OSD breadcrumb styling and classes Now that the breacrumb styling is updated in OUI v1.2.0 Signed-off-by: Josh Romero Update snapshots Signed-off-by: Josh Romero chore (oui): Bump oui from rc1 to 1.2.0 release Signed-off-by: Josh Romero chore(oui): Bump OUI dependency to 1.2.0-rc.1 Signed-off-by: Josh Romero --- CHANGELOG.md | 2 + package.json | 2 +- packages/osd-ui-framework/package.json | 2 +- packages/osd-ui-shared-deps/package.json | 2 +- src/core/public/_variables.scss | 7 -- .../chrome/public/assets/round_filter.svg | 8 -- .../header/__snapshots__/header.test.tsx.snap | 68 ++++++----- .../header_breadcrumbs.test.tsx.snap | 6 +- src/core/public/chrome/ui/header/header.tsx | 3 +- .../chrome/ui/header/header_breadcrumbs.scss | 107 ------------------ .../ui/header/header_breadcrumbs.test.tsx | 6 +- .../chrome/ui/header/header_breadcrumbs.tsx | 16 +-- .../plugins/osd_tp_run_pipeline/package.json | 2 +- .../osd_sample_panel_action/package.json | 2 +- .../osd_tp_custom_visualizations/package.json | 2 +- yarn.lock | 8 +- 16 files changed, 57 insertions(+), 186 deletions(-) delete mode 100644 src/core/public/chrome/public/assets/round_filter.svg delete mode 100644 src/core/public/chrome/ui/header/header_breadcrumbs.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 04dc5d82b498..3b4226d1bf26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -45,6 +45,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - Bump `js-yaml` from `3.14.0` to `4.1.0` ([#3770](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3770)) - Adding @ZilongX and @Flyingliuhub as maintainers. ([#4137](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4137)) - Add new MAINTAINERS to CODEOWNERS file. ([#4199](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4199)) +- Bump `oui` from `1.1.1` to `1.2.0` ([#4170](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4170)) + ### 🪛 Refactoring diff --git a/package.json b/package.json index 30e6756ca108..fac361f79f68 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "dependencies": { "@aws-crypto/client-node": "^3.1.1", "@elastic/datemath": "5.0.3", - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "@elastic/good": "^9.0.1-kibana3", "@elastic/numeral": "^2.5.0", "@elastic/request-crypto": "2.0.0", diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json index ffd624757392..32f189e87099 100644 --- a/packages/osd-ui-framework/package.json +++ b/packages/osd-ui-framework/package.json @@ -23,7 +23,7 @@ "enzyme-adapter-react-16": "^1.9.1" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "@osd/babel-preset": "1.0.0", "@osd/optimizer": "1.0.0", "grunt": "^1.5.2", diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json index a4924657cb1e..d4fb9624d826 100644 --- a/packages/osd-ui-shared-deps/package.json +++ b/packages/osd-ui-shared-deps/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@elastic/charts": "31.1.0", - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "@elastic/numeral": "^2.5.0", "@osd/i18n": "1.0.0", "@osd/monaco": "1.0.0", diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index f77e2b4d2755..9d8077b50ad4 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,10 +1,3 @@ @import "@elastic/eui/src/global_styling/variables/header"; $osdHeaderOffset: $euiHeaderHeightCompensation; -$osdHeaderBreadcrumbBlueBackground: #b9d9eb; -$osdHeaderBreadcrumbGrayBackground: #d9e1e2; -$osdHeaderBreadcrumbCollapsedLink: #002a3a; -$osdHeaderBreadcrumbPacificSkyDarkestBackground: #163f66; -$osdHeaderBreadcrumbMidnightSkyMediumBackground: #4c636f; -$osdHeaderBreadcrumbMidnightSkyMediumLightColor: #96a0a5; -$osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor: #b0b8bb; diff --git a/src/core/public/chrome/public/assets/round_filter.svg b/src/core/public/chrome/public/assets/round_filter.svg deleted file mode 100644 index 84cf36058553..000000000000 --- a/src/core/public/chrome/public/assets/round_filter.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 4c2beb329a98..d0eb9b2987b7 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3594,19 +3594,16 @@ exports[`Header handles visibility and lock changes 1`] = ` "thrownError": null, } } - isDarkMode={false} > @@ -3614,32 +3611,39 @@ exports[`Header handles visibility and lock changes 1`] = ` breadcrumbs={ Array [ Object { - "className": "osdBreadcrumbs", "data-test-subj": "breadcrumb first last", "text": "test", }, ] } - className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs" + className="euiHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} truncate={true} > @@ -8837,19 +8841,16 @@ exports[`Header renders condensed header 1`] = ` "thrownError": null, } } - isDarkMode={false} > @@ -8857,32 +8858,39 @@ exports[`Header renders condensed header 1`] = ` breadcrumbs={ Array [ Object { - "className": "osdBreadcrumbs", "data-test-subj": "breadcrumb first", "text": "test", }, ] } - className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs" + className="euiHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} truncate={true} > diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap index 2308839a19a9..5080b23e99c2 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap @@ -3,7 +3,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = ` @@ -15,7 +15,7 @@ exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] = Array [ @@ -23,7 +23,7 @@ Array [ , diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index a78371f4f264..f8eb7c9e7052 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -114,7 +114,7 @@ export function Header({ const toggleCollapsibleNavRef = createRef void }>(); const navId = htmlIdGenerator()(); const className = classnames('hide-for-sharing', 'headerGlobalNav'); - const { useExpandedHeader = true, darkMode } = branding; + const { useExpandedHeader = true } = branding; return ( <> @@ -202,7 +202,6 @@ export function Header({ diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss deleted file mode 100644 index 5ac333e1615a..000000000000 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.scss +++ /dev/null @@ -1,107 +0,0 @@ -@import "../../../../public/variables"; - -$firstBreadcrumbPolygon: polygon( - 0% 0%, - 100% 0%, - calc(100% - #{$euiSizeS}) 100%, - 0% 100% -); -$breadcrumbPolygon: polygon( - $euiSizeS 0%, - 100% 0%, - calc(100% - #{$euiSizeS}) 100%, - 0% 100% -); - -/* remove background color on autofocus for euiBreadcrumbs in Popover */ -.euiBreadcrumbs__inPopover { - .euiLink.euiLink--text:focus { - background: none; - } -} - -.osdHeaderBreadcrumbs { - /* common for both light & dark theme */ - .osdBreadcrumbs, - &--dark .osdBreadcrumbs { - clip-path: $breadcrumbPolygon; - padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS; - - &:first-child { - clip-path: $firstBreadcrumbPolygon; - } - } - - .osdBreadcrumbs { - background-color: $osdHeaderBreadcrumbGrayBackground; - - &:last-child { - background-color: $osdHeaderBreadcrumbBlueBackground; - } - } - - /* only light mode */ - .euiBreadcrumb__collapsedLink { - color: $osdHeaderBreadcrumbCollapsedLink; - background: $euiColorEmptyShade; - } - - .euiLink.euiLink--subdued:focus { - background: $euiColorEmptyShade; - outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbBlueBackground; - } - - /* common for dark & light mode */ - &, - &--dark { - /* - filter defines a custom filter effect by grouping atomic filter primitives! - here we are using Gaussian filter with stdDeviation for applying - border-radius on clipped background. - */ - filter: url("../../public/assets/round_filter.svg#round"); - - button { - line-height: inherit; - } - - .euiBreadcrumbSeparator { - display: none; - } - - .euiPopover__anchor { - padding: 0 $euiSizeS; - } - - .euiBreadcrumb:not(.euiBreadcrumb:last-child) { - margin-right: 0; - } - } - - /* only dark mode */ - &--dark { - .osdBreadcrumbs { - background-color: $osdHeaderBreadcrumbMidnightSkyMediumBackground; - color: $osdHeaderBreadcrumbMidnightSkyMediumLightColor; - - &:hover { - color: $osdHeaderBreadcrumbMidnightSkyMediumLightHoverColor; - } - - &:last-child { - background-color: $osdHeaderBreadcrumbPacificSkyDarkestBackground; - color: $euiColorFullShade; - } - } - - .euiBreadcrumb__collapsedLink { - color: $euiColorGhost; - background: $euiColorEmptyShade; - } - - .euiLink.euiLink--subdued:focus { - background: $euiColorEmptyShade; - outline: $euiSizeXS - 1 solid $osdHeaderBreadcrumbPacificSkyDarkestBackground; - } - } -} diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx index d95e7881cf5a..2008a3f6c493 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx @@ -38,11 +38,7 @@ describe('HeaderBreadcrumbs', () => { it('renders updates to the breadcrumbs$ observable', () => { const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]); const wrapper = mount( - + ); expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot(); diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx index ba81b61e8bcd..ca50b15d5af6 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx @@ -35,18 +35,14 @@ import useObservable from 'react-use/lib/useObservable'; import { Observable } from 'rxjs'; import { ChromeBreadcrumb } from '../../chrome_service'; -import './header_breadcrumbs.scss'; - interface Props { appTitle$: Observable; breadcrumbs$: Observable; - isDarkMode?: boolean; } -export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props) { +export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { const appTitle = useObservable(appTitle$, 'OpenSearch Dashboards'); const breadcrumbs = useObservable(breadcrumbs$, []); - const className = isDarkMode ? 'osdHeaderBreadcrumbs--dark' : 'osdHeaderBreadcrumbs'; let crumbs = breadcrumbs; if (breadcrumbs.length === 0 && appTitle) { @@ -61,15 +57,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$, isDarkMode }: Props i === 0 && 'first', i === breadcrumbs.length - 1 && 'last' ), - className: classNames('osdBreadcrumbs'), })); - return ( - - ); + return ; } diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json index 5f308268566c..f9be37ddc0a2 100644 --- a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json +++ b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "@osd/plugin-helpers": "1.0.0", "react": "^16.14.0", "react-dom": "^16.12.0", diff --git a/test/plugin_functional/plugins/osd_sample_panel_action/package.json b/test/plugin_functional/plugins/osd_sample_panel_action/package.json index 35f7e84ae0e2..df9e82b6a3e2 100644 --- a/test/plugin_functional/plugins/osd_sample_panel_action/package.json +++ b/test/plugin_functional/plugins/osd_sample_panel_action/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "react": "^16.14.0", "typescript": "4.0.2" } diff --git a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json index 13f7b1695a0d..fc8955a03dc9 100644 --- a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json +++ b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.1", + "@elastic/eui": "npm:@opensearch-project/oui@1.2.0", "@osd/plugin-helpers": "1.0.0", "react": "^16.14.0", "typescript": "4.0.2" diff --git a/yarn.lock b/yarn.lock index e1985b3cd645..110e67ff2b3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,10 +1273,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@npm:@opensearch-project/oui@1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.1.1.tgz#4a9318c2954659cdd8d83263ff2dc22a77cbd779" - integrity sha512-RBXbsZh6mjJKJqB/hSI2loenyM2rvdq9id29P/ZYlZGKKy0/tSreIOGcegSYMtNFmG029D20xVkhRmdn7cxK1A== +"@elastic/eui@npm:@opensearch-project/oui@1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.2.0.tgz#7a4ec2fa8dfff9c599819dd2086679ec4366b01f" + integrity sha512-m7rcerNwt59p/CpAqyYfj/oK3KLiENFJXYjeTaMpWE4OOqKoBPGzgbJ4m4MEEaUVSRr0HDNInkkqpASrEiKixA== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160"