Merge branch 'master' into ui-polish-qanotes

package.json

@@ -108,7 +108,7 @@
     "@elastic/charts": "45.0.1",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.2.0-canary.1",
-    "@elastic/ems-client": "8.1.0",
+    "@elastic/ems-client": "8.2.0",
     "@elastic/eui": "51.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",

packages/kbn-shared-ux-components/src/index.ts

@@ -94,3 +94,20 @@ export const LazyIconButtonGroup = React.lazy(() =>
  * The IconButtonGroup component that is wrapped by the `withSuspence` HOC.
  */
 export const IconButtonGroup = withSuspense(LazyIconButtonGroup);
+
+/**
+ * The Lazily-loaded `KibanaSolutionAvatar` component.  Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
+ */
+export const KibanaSolutionAvatarLazy = React.lazy(() =>
+  import('./solution_avatar').then(({ KibanaSolutionAvatar }) => ({
+    default: KibanaSolutionAvatar,
+  }))
+);
+
+/**
+ * A `KibanaSolutionAvatar` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `KibanaPageTemplateSolutionNavAvatarLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const KibanaSolutionAvatar = withSuspense(KibanaSolutionAvatarLazy);

packages/kbn-shared-ux-components/src/solution_avatar/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { KibanaSolutionAvatar } from './solution_avatar';

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.scss

@@ -0,0 +1,14 @@
+.kbnSolutionAvatar {
+  @include euiBottomShadowSmall;
+
+  &--xxl {
+    @include euiBottomShadowMedium;
+    @include size(100px);
+    line-height: 100px;
+    border-radius: 100px;
+    display: inline-block;
+    background: $euiColorEmptyShade url('/assets/texture.svg') no-repeat;
+    background-size: cover, 125%;
+    text-align: center;
+  }
+}

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 React from 'react';
+import { KibanaSolutionAvatar, KibanaSolutionAvatarProps } from './solution_avatar';
+
+export default {
+  title: 'Solution Avatar',
+  description: 'A wrapper around EuiAvatar, specifically to stylize Elastic Solutions',
+};
+
+type Params = Pick<KibanaSolutionAvatarProps, 'size' | 'name'>;
+
+export const PureComponent = (params: Params) => {
+  return <KibanaSolutionAvatar {...params} />;
+};
+
+PureComponent.argTypes = {
+  name: {
+    control: 'text',
+    defaultValue: 'Kibana',
+  },
+  size: {
+    control: 'radio',
+    options: ['s', 'm', 'l', 'xl', 'xxl'],
+    defaultValue: 'xxl',
+  },
+};

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.test.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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 React from 'react';
+import { shallow } from 'enzyme';
+import { KibanaSolutionAvatar } from './solution_avatar';
+
+describe('KibanaSolutionAvatar', () => {
+  test('renders', () => {
+    const component = shallow(<KibanaSolutionAvatar name="Solution" iconType="logoElastic" />);
+    expect(component).toMatchSnapshot();
+  });
+});

packages/kbn-shared-ux-components/src/solution_avatar/solution_avatar.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 './solution_avatar.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+
+export type KibanaSolutionAvatarProps = DistributiveOmit<EuiAvatarProps, 'size'> & {
+  /**
+   * Any EuiAvatar size available, or `xxl` for custom large, brand-focused version
+   */
+  size?: EuiAvatarProps['size'] | 'xxl';
+};
+
+/**
+ * Applies extra styling to a typical EuiAvatar;
+ * The `name` value will be appended to 'logo' to configure the `iconType` unless `iconType` is provided.
+ */
+export const KibanaSolutionAvatar = ({ className, size, ...rest }: KibanaSolutionAvatarProps) => {
+  return (
+    // @ts-ignore Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
+    <EuiAvatar
+      className={classNames(
+        'kbnSolutionAvatar',
+        {
+          [`kbnSolutionAvatar--${size}`]: size,
+        },
+        className
+      )}
+      color="plain"
+      size={size === 'xxl' ? 'xl' : size}
+      iconSize={size}
+      iconType={`logo${rest.name}`}
+      {...rest}
+    />
+  );
+};

packages/kbn-test/jest-preset.js

@@ -16,7 +16,7 @@ module.exports = {
   coverageDirectory: '<rootDir>/target/kibana-coverage/jest',
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ['/node_modules/', '.*\\.d\\.ts'],
+  coveragePathIgnorePatterns: ['/node_modules/', '.*\\.d\\.ts', 'jest\\.config\\.js'],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: !!process.env.CODE_COVERAGE

src/core/server/status/cached_plugins_status.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { Observable } from 'rxjs';
+
+import { type PluginName } from '../plugins';
+import { type ServiceStatus } from './types';
+
+import { type Deps, PluginsStatusService as BasePluginsStatusService } from './plugins_status';
+
+export class PluginsStatusService extends BasePluginsStatusService {
+  private all$?: Observable<Record<PluginName, ServiceStatus>>;
+  private dependenciesStatuses$: Record<PluginName, Observable<Record<PluginName, ServiceStatus>>>;
+  private derivedStatuses$: Record<PluginName, Observable<ServiceStatus>>;
+
+  constructor(deps: Deps) {
+    super(deps);
+    this.dependenciesStatuses$ = {};
+    this.derivedStatuses$ = {};
+  }
+
+  public getAll$(): Observable<Record<PluginName, ServiceStatus>> {
+    if (!this.all$) {
+      this.all$ = super.getAll$();
+    }
+
+    return this.all$;
+  }
+
+  public getDependenciesStatus$(plugin: PluginName): Observable<Record<PluginName, ServiceStatus>> {
+    if (!this.dependenciesStatuses$[plugin]) {
+      this.dependenciesStatuses$[plugin] = super.getDependenciesStatus$(plugin);
+    }
+
+    return this.dependenciesStatuses$[plugin];
+  }
+
+  public getDerivedStatus$(plugin: PluginName): Observable<ServiceStatus> {
+    if (!this.derivedStatuses$[plugin]) {
+      this.derivedStatuses$[plugin] = super.getDerivedStatus$(plugin);
+    }
+
+    return this.derivedStatuses$[plugin];
+  }
+}

src/core/server/status/plugins_status.test.ts

@@ -10,7 +10,7 @@ import { PluginName } from '../plugins';
 import { PluginsStatusService } from './plugins_status';
 import { of, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { ServiceStatusLevels, CoreStatus, ServiceStatus } from './types';
-import { first } from 'rxjs/operators';
+import { first, skip } from 'rxjs/operators';
 import { ServiceStatusLevelSnapshotSerializer } from './test_utils';
 
 expect.addSnapshotSerializer(ServiceStatusLevelSnapshotSerializer);
@@ -215,7 +215,7 @@ describe('PluginStatusService', () => {
       service.set('a', of({ level: ServiceStatusLevels.available, summary: 'a status' }));
 
       expect(await service.getAll$().pipe(first()).toPromise()).toEqual({
-        a: { level: ServiceStatusLevels.available, summary: 'a status' }, // a is available depsite savedObjects being degraded
+        a: { level: ServiceStatusLevels.available, summary: 'a status' }, // a is available despite savedObjects being degraded
         b: {
           level: ServiceStatusLevels.degraded,
           summary: '1 service is degraded: savedObjects',
@@ -239,6 +239,10 @@ describe('PluginStatusService', () => {
       const statusUpdates: Array<Record<PluginName, ServiceStatus>> = [];
       const subscription = service
         .getAll$()
+        // If we subscribe to the $getAll() Observable BEFORE setting a custom status Observable
+        // for a given plugin ('a' in this test), then the first emission will happen
+        // right after core$ services Observable emits
+        .pipe(skip(1))
         .subscribe((pluginStatuses) => statusUpdates.push(pluginStatuses));
 
       service.set('a', of({ level: ServiceStatusLevels.degraded, summary: 'a degraded' }));
@@ -261,6 +265,8 @@ describe('PluginStatusService', () => {
       const statusUpdates: Array<Record<PluginName, ServiceStatus>> = [];
       const subscription = service
         .getAll$()
+        // the first emission happens right after core services emit (see explanation above)
+        .pipe(skip(1))
         .subscribe((pluginStatuses) => statusUpdates.push(pluginStatuses));
 
       const aStatus$ = new BehaviorSubject<ServiceStatus>({
@@ -280,19 +286,21 @@ describe('PluginStatusService', () => {
     });
 
     it('emits an unavailable status if first emission times out, then continues future emissions', async () => {
-      jest.useFakeTimers();
-      const service = new PluginsStatusService({
-        core$: coreAllAvailable$,
-        pluginDependencies: new Map([
-          ['a', []],
-          ['b', ['a']],
-        ]),
-      });
+      const service = new PluginsStatusService(
+        {
+          core$: coreAllAvailable$,
+          pluginDependencies: new Map([
+            ['a', []],
+            ['b', ['a']],
+          ]),
+        },
+        10 // set a small timeout so that the registered status Observable for 'a' times out quickly
+      );
 
       const pluginA$ = new ReplaySubject<ServiceStatus>(1);
       service.set('a', pluginA$);
-      const firstEmission = service.getAll$().pipe(first()).toPromise();
-      jest.runAllTimers();
+      // the first emission happens right after core$ services emit
+      const firstEmission = service.getAll$().pipe(skip(1), first()).toPromise();
 
       expect(await firstEmission).toEqual({
         a: { level: ServiceStatusLevels.unavailable, summary: 'Status check timed out after 30s' },
@@ -308,16 +316,16 @@ describe('PluginStatusService', () => {
 
       pluginA$.next({ level: ServiceStatusLevels.available, summary: 'a available' });
       const secondEmission = service.getAll$().pipe(first()).toPromise();
-      jest.runAllTimers();
       expect(await secondEmission).toEqual({
         a: { level: ServiceStatusLevels.available, summary: 'a available' },
         b: { level: ServiceStatusLevels.available, summary: 'All dependencies are available' },
       });
-      jest.useRealTimers();
     });
   });
 
   describe('getDependenciesStatus$', () => {
+    const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
     it('only includes dependencies of specified plugin', async () => {
       const service = new PluginsStatusService({
         core$: coreAllAvailable$,
@@ -357,7 +365,7 @@ describe('PluginStatusService', () => {
 
     it('debounces plugins custom status registration', async () => {
       const service = new PluginsStatusService({
-        core$: coreAllAvailable$,
+        core$: coreOneCriticalOneDegraded$,
         pluginDependencies,
       });
       const available: ServiceStatus = {
@@ -375,8 +383,6 @@ describe('PluginStatusService', () => {
 
       expect(statusUpdates).toStrictEqual([]);
 
-      const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
       // Waiting for the debounce timeout should cut a new update
       await delay(25);
       subscription.unsubscribe();
@@ -404,7 +410,6 @@ describe('PluginStatusService', () => {
       const subscription = service
         .getDependenciesStatus$('b')
         .subscribe((status) => statusUpdates.push(status));
-      const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
       pluginA$.next(degraded);
       pluginA$.next(available);