[Backport 2.x] Make the steps diagram honor the theme

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 */
+  }
+}

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) {
           </EuiText>
 
           <EuiSpacer size="l" />
-          {props.config.ui.backend_configurable && (
-            <div className="text-center">
-              <EuiImage
-                size="xl"
-                alt="Three steps to set up your security"
-                url={securityStepsDiagram}
-                style={{ maxWidth: '100%', height: 'auto', width: 'auto' }}
-              />
-            </div>
-          )}
+          {props.config.ui.backend_configurable && <div className={'security-steps-diagram'} />}
 
           <EuiSpacer size="l" />
 

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"
       />
       <div
-        className="text-center"
-      >
-        <EuiImage
-          alt="Three steps to set up your security"
-          size="xl"
-          style={
-            Object {
-              "height": "auto",
-              "maxWidth": "100%",
-              "width": "auto",
-            }
-          }
-          url="test-file-stub"
-        />
-      </div>
+        className="security-steps-diagram"
+      />
       <EuiSpacer
         size="l"
       />

test/jest_integration/jwt_auth.test.ts

@@ -234,7 +234,7 @@ describe('start OpenSearch Dashboards server', () => {
       .sign(key);
     const driver = getDriver(browser, options).build();
     await driver.get(`http://localhost:5601/app/opensearch_dashboards_overview?token=${token}`);
-    await driver.wait(until.elementsLocated(By.xpath(pageTitleXPath)), 10000);
+    await driver.wait(until.elementsLocated(By.xpath(pageTitleXPath)), 15000);
 
     const cookie = await driver.manage().getCookies();
     expect(cookie.length).toEqual(1);
@@ -259,7 +259,7 @@ describe('start OpenSearch Dashboards server', () => {
 
     await driver.wait(
       until.elementsLocated(By.xpath('//*[@data-test-subj="sendRequestButton"]')),
-      10000
+      15000
     );
 
     const cookie = await driver.manage().getCookies();