[Guided onboarding] Setup guide panel component

src/plugins/guided_onboarding/public/components/guide_panel.styles.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+/**
+ *
+ * Style overrides for the setup guide dropdown panel.
+ * There is currently no existing EUI component that fully supports what we need.
+ * In order to leverage a11y features, we are using the EuiFlyout and applying customizations
+ * See https://github.com/elastic/eui/issues/6241 for more details
+ */
+export const getGuidePanelStyles = (euiTheme: EuiThemeComputed) => ({
+  flyoutOverrides: {
+    flyoutContainer: css`
+      top: 55px !important;
+      bottom: 25px !important;
+      right: 128px;
+      border-radius: 6px;
+      width: 480px;
+      height: auto;
+      animation: euiModal 350ms cubic-bezier(0.34, 1.61, 0.7, 1);
+      box-shadow: none;
+      "@media only screen and (max-width: 574px)": {
+        right: 25px;
+        width: 100%;
+      },
+    `,
+    flyoutBody: css`
+      .euiFlyoutBody__overflowContent {
+        width: 480px;
+        padding-top: 10px;
+      }
+    `,
+    flyoutFooter: css`
+      border-radius: 0 0 6px 6px;
+      background: ${euiTheme.colors.ghost};
+      padding: 24px 30px;
+    `,
+  },
+});

src/plugins/guided_onboarding/public/components/guide_panel.test.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { act } from 'react-dom/test-utils';
+import React from 'react';
+
+import { applicationServiceMock } from '@kbn/core-application-browser-mocks';
+import { httpServiceMock } from '@kbn/core/public/mocks';
+import { HttpSetup } from '@kbn/core/public';
+
+import { apiService } from '../services/api';
+import { guidesConfig } from '../constants/guides_config';
+import { GuidePanel } from './guide_panel';
+import { registerTestBed, TestBed } from '@kbn/test-jest-helpers';
+
+const applicationMock = applicationServiceMock.createStartContract();
+
+const getGuidePanel = () => () => {
+  return <GuidePanel application={applicationMock} api={apiService} />;
+};
+
+describe('GuidePanel', () => {
+  let httpClient: jest.Mocked<HttpSetup>;
+  let testBed: TestBed;
+
+  beforeEach(async () => {
+    httpClient = httpServiceMock.createStartContract({ basePath: '/base/path' });
+    // Set default state on initial request (no active guides)
+    httpClient.get.mockResolvedValue({
+      state: { activeGuide: 'unset', activeStep: 'unset' },
+    });
+    apiService.setup(httpClient);
+
+    await act(async () => {
+      const GuidePanelComponent = getGuidePanel();
+      testBed = registerTestBed(GuidePanelComponent)();
+    });
+
+    testBed.component.update();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('it should be disabled in there is no active guide', async () => {
+    const { exists } = testBed;
+    expect(exists('disabledGuideButton')).toBe(true);
+    expect(exists('guideButton')).toBe(false);
+    expect(exists('guidePanel')).toBe(false);
+  });
+
+  test('it should be enabled if there is an active guide', async () => {
+    const { exists, component, find } = testBed;
+
+    await act(async () => {
+      // Enable the "search" guide
+      await apiService.updateGuideState({
+        activeGuide: 'search',
+        activeStep: guidesConfig.search.steps[0].id,
+      });
+    });
+
+    component.update();
+
+    expect(exists('disabledGuideButton')).toBe(false);
+    expect(exists('guideButton')).toBe(true);
+    expect(exists('guidePanel')).toBe(true);
+    expect(find('guidePanelStep').length).toEqual(guidesConfig.search.steps.length);
+  });
+});