From ca3b67c8d85293eeb2491f7a8d495619484f393d Mon Sep 17 00:00:00 2001 From: Miki Date: Thu, 10 Aug 2023 11:35:17 -0700 Subject: [PATCH] Make the steps diagram honor the theme (#1538) Signed-off-by: Miki Co-authored-by: Craig Perkins Co-authored-by: Ryan Liang <109499885+RyanL1997@users.noreply.github.com> Signed-off-by: Sam --- public/apps/configuration/_index.scss | 42 ++++++++++ .../apps/configuration/panels/get-started.tsx | 13 +-- .../__snapshots__/get-started.test.tsx.snap | 17 +--- public/assets/get_started.svg | 79 +------------------ public/assets/get_started_layer_1.svg | 1 + public/assets/get_started_layer_2.svg | 1 + 6 files changed, 48 insertions(+), 105 deletions(-) create mode 100644 public/assets/get_started_layer_1.svg create mode 100644 public/assets/get_started_layer_2.svg diff --git a/public/apps/configuration/_index.scss b/public/apps/configuration/_index.scss index 57f25c45d..4914998cb 100644 --- a/public/apps/configuration/_index.scss +++ b/public/apps/configuration/_index.scss @@ -41,3 +41,45 @@ .limit-width-input { max-width: 400px; } + +.security-steps-diagram { + height: 114px; + position: relative; + + &::before, + &::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + } + + &::before { + mask: url("../../assets/get_started_layer_1.svg") center / contain no-repeat; + background: $euiColorDarkestShade; + } + + &::after { + mask: url("../../assets/get_started_layer_2.svg") center / contain no-repeat; + background: $euiColorPrimary; + } + + @supports not (mask: center / contain no-repeat) { + /* stylelint-disable property-no-vendor-prefix */ + &::before, + &::after { + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; + -webkit-mask-position: center; + } + + &::before { + -webkit-mask-image: url("../../assets/get_started_layer_1.svg"); + } + + &::after { + -webkit-mask-image: url("../../assets/get_started_layer_2.svg"); + } + /* stylelint-enable property-no-vendor-prefix */ + } +} diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx index fffa99570..b2c562e35 100644 --- a/public/apps/configuration/panels/get-started.tsx +++ b/public/apps/configuration/panels/get-started.tsx @@ -18,7 +18,6 @@ import { EuiCode, EuiFlexGroup, EuiFlexItem, - EuiImage, EuiPageHeader, EuiPanel, EuiSpacer, @@ -31,7 +30,6 @@ import { FormattedMessage } from '@osd/i18n/react'; import { flow } from 'lodash'; import { HashRouter as Router, Route } from 'react-router-dom'; import { AppDependencies } from '../../types'; -import securityStepsDiagram from '../../../assets/get_started.svg'; import { buildHashUrl, buildUrl } from '../utils/url-builder'; import { Action, ResourceType, RouteItem } from '../types'; import { API_ENDPOINT_CACHE, DocLinks } from '../constants'; @@ -189,16 +187,7 @@ export function GetStarted(props: AppDependencies) { - {props.config.ui.backend_configurable && ( -
- -
- )} + {props.config.ui.backend_configurable &&
} diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap index 355d3817e..d7fd749e2 100644 --- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap +++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap @@ -279,21 +279,8 @@ exports[`Get started (landing page) renders when backend configuration is enable size="l" />
- -
+ className="security-steps-diagram" + /> diff --git a/public/assets/get_started.svg b/public/assets/get_started.svg index 842164f5c..babb3db47 100644 --- a/public/assets/get_started.svg +++ b/public/assets/get_started.svg @@ -1,78 +1 @@ - - - get_started - - - - - - - - - - - - - - - - - - - - - - Map backend roles - - - - - - - - - - - - - - Map internal users - - - - - - - - - - - - Role - - - - - - - - - - - - (authc & authz) - - - Backends - - - - - - - - - - - - \ No newline at end of file +Map backend rolesMap internal usersRole(authc & authz)Backends diff --git a/public/assets/get_started_layer_1.svg b/public/assets/get_started_layer_1.svg new file mode 100644 index 000000000..e1413f4db --- /dev/null +++ b/public/assets/get_started_layer_1.svg @@ -0,0 +1 @@ +Map backend rolesMap internal usersRole(authc & authz)Backends diff --git a/public/assets/get_started_layer_2.svg b/public/assets/get_started_layer_2.svg new file mode 100644 index 000000000..d060b85dc --- /dev/null +++ b/public/assets/get_started_layer_2.svg @@ -0,0 +1 @@ +