Merge branch 'master' of github.com:elastic/kibana into extract-typed…

…-server-repository

package.json

@@ -98,7 +98,7 @@
   "dependencies": {
     "@elastic/apm-rum": "^5.6.1",
     "@elastic/apm-rum-react": "^1.2.5",
-    "@elastic/charts": "27.0.0",
+    "@elastic/charts": "28.0.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath/npm_module",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.4",
     "@elastic/ems-client": "7.12.0",

src/plugins/charts/public/static/components/current_time.tsx

@@ -9,7 +9,7 @@
 import moment, { Moment } from 'moment';
 import React, { FC } from 'react';
 
-import { LineAnnotation, AnnotationDomainTypes, LineAnnotationStyle } from '@elastic/charts';
+import { LineAnnotation, AnnotationDomainType, LineAnnotationStyle } from '@elastic/charts';
 import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
 import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
 
@@ -46,7 +46,7 @@ export const CurrentTime: FC<CurrentTimeProps> = ({ isDarkMode, domainEnd }) =>
     <LineAnnotation
       id="__current-time__"
       hideTooltips
-      domainType={AnnotationDomainTypes.XDomain}
+      domainType={AnnotationDomainType.XDomain}
       dataValues={lineAnnotationData}
       style={lineAnnotationStyle}
     />

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -412,6 +412,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'observability:enableInspectEsQueries': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'banners:placement': {
     type: 'keyword',
     _meta: { description: 'Non-default value of setting.' },
@@ -428,7 +432,7 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
-  'observability:enableInspectEsQueries': {
+  'labs:presentation:unifiedToolbar': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -118,4 +118,5 @@ export interface UsageStats {
   'banners:placement': string;
   'banners:textColor': string;
   'banners:backgroundColor': string;
+  'labs:presentation:unifiedToolbar': boolean;
 }

src/plugins/presentation_util/common/index.ts

@@ -8,3 +8,5 @@
 
 export const PLUGIN_ID = 'presentationUtil';
 export const PLUGIN_NAME = 'presentationUtil';
+
+export * from './labs';

src/plugins/presentation_util/common/labs.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const UNIFIED_TOOLBAR = 'labs:presentation:unifiedToolbar';
+
+export const projectIDs = [UNIFIED_TOOLBAR] as const;
+export const environmentNames = ['kibana', 'browser', 'session'] as const;
+export const solutionNames = ['canvas', 'dashboard', 'presentation'] as const;
+
+/**
+ * This is a list of active Labs Projects for the Presentation Team.  It is the "source of truth" for all projects
+ * provided to users of our solutions in Kibana.
+ */
+export const projects: { [ID in ProjectID]: ProjectConfig & { id: ID } } = {
+  [UNIFIED_TOOLBAR]: {
+    id: UNIFIED_TOOLBAR,
+    isActive: false,
+    environments: ['kibana', 'browser', 'session'],
+    name: i18n.translate('presentationUtil.labs.enableUnifiedToolbarProjectName', {
+      defaultMessage: 'Unified Toolbar',
+    }),
+    description: i18n.translate('presentationUtil.labs.enableUnifiedToolbarProjectDescription', {
+      defaultMessage: 'Enable the new unified toolbar design for Presentation solutions',
+    }),
+    solutions: ['dashboard', 'canvas'],
+  },
+};
+
+export type ProjectID = typeof projectIDs[number];
+export type EnvironmentName = typeof environmentNames[number];
+export type SolutionName = typeof solutionNames[number];
+
+export type EnvironmentStatus = {
+  [env in EnvironmentName]?: boolean;
+};
+
+export type ProjectStatus = {
+  defaultValue: boolean;
+  isEnabled: boolean;
+  isOverride: boolean;
+} & EnvironmentStatus;
+
+export interface ProjectConfig {
+  id: ProjectID;
+  name: string;
+  isActive: boolean;
+  environments: EnvironmentName[];
+  description: string;
+  solutions: SolutionName[];
+}
+
+export type Project = ProjectConfig & { status: ProjectStatus };
+
+export const getProjectIDs = () => projectIDs;
+
+export const isProjectEnabledByStatus = (active: boolean, status: EnvironmentStatus): boolean => {
+  // If the project is enabled by default, then any false flag will flip the switch, and vice-versa.
+  return active
+    ? Object.values(status).every((value) => value === true)
+    : Object.values(status).some((value) => value === true);
+};

src/plugins/presentation_util/kibana.json

@@ -2,8 +2,10 @@
   "id": "presentationUtil",
   "version": "1.0.0",
   "kibanaVersion": "kibana",
-  "server": false,
+  "server": true,
   "ui": true,
-  "requiredPlugins": ["savedObjects"],
+  "requiredPlugins": [
+    "savedObjects"
+  ],
   "optionalPlugins": []
 }

src/plugins/presentation_util/public/components/index.tsx

@@ -25,6 +25,12 @@ export const withSuspense = <P extends {}>(
   </EuiErrorBoundary>
 );
 
+export const LazyLabsBeakerButton = withSuspense(
+  React.lazy(() => import('./labs/labs_beaker_button'))
+);
+
+export const LazyLabsFlyout = withSuspense(React.lazy(() => import('./labs/labs_flyout')));
+
 export const LazyDashboardPicker = React.lazy(() => import('./dashboard_picker'));
 
 export const LazySavedObjectSaveModalDashboard = React.lazy(

src/plugins/presentation_util/public/components/labs/environment_switch.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSwitch,
+  EuiIconTip,
+  EuiSpacer,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
+
+import { EnvironmentName } from '../../../common/labs';
+import { LabsStrings } from '../../i18n';
+
+const { Switch: strings } = LabsStrings.Components;
+
+const switchText: { [env in EnvironmentName]: { name: string; help: string } } = {
+  kibana: strings.getKibanaSwitchText(),
+  browser: strings.getBrowserSwitchText(),
+  session: strings.getSessionSwitchText(),
+};
+
+export interface Props {
+  env: EnvironmentName;
+  isChecked: boolean;
+  onChange: (checked: boolean) => void;
+  name: string;
+}
+
+export const EnvironmentSwitch = ({ env, isChecked, onChange, name }: Props) => (
+  <EuiFlexItem grow={false} style={{ marginBottom: '.25rem' }}>
+    <EuiFlexGroup gutterSize="xs" alignItems="flexEnd" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiSwitch
+          checked={isChecked}
+          style={{ marginTop: 1 }}
+          label={
+            <EuiFlexItem grow={false}>
+              <EuiScreenReaderOnly>
+                <span>{name} - </span>
+              </EuiScreenReaderOnly>
+              {switchText[env].name}
+            </EuiFlexItem>
+          }
+          onChange={(e) => onChange(e.target.checked)}
+          compressed
+        />
+      </EuiFlexItem>
+      <EuiFlexItem style={{ textAlign: 'right' }}>
+        <EuiIconTip content={switchText[env].help} position="left" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="xs" />
+  </EuiFlexItem>
+);

src/plugins/presentation_util/public/components/labs/labs.stories.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+
+import { LabsBeakerButton } from './labs_beaker_button';
+import { LabsFlyout } from './labs_flyout';
+
+export default {
+  title: 'Labs/Flyout',
+  description:
+    'A set of components used for providing Labs controls and projects in another solution.',
+  argTypes: {},
+};
+
+export function BeakerButton() {
+  return <LabsBeakerButton />;
+}
+
+export function Flyout() {
+  return <LabsFlyout onClose={action('onClose')} />;
+}
+
+export function EmptyFlyout() {
+  return <LabsFlyout onClose={action('onClose')} solutions={[]} />;
+}

src/plugins/presentation_util/public/components/labs/labs_beaker_button.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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, { useState } from 'react';
+import { EuiButton, EuiIcon, EuiNotificationBadge, EuiButtonProps } from '@elastic/eui';
+
+import { pluginServices } from '../../services';
+import { LabsFlyout, Props as FlyoutProps } from './labs_flyout';
+
+export type Props = EuiButtonProps & Pick<FlyoutProps, 'solutions'>;
+
+export const LabsBeakerButton = ({ solutions, ...props }: Props) => {
+  const { labs: labsService } = pluginServices.getHooks();
+  const { getProjects } = labsService.useService();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const projects = getProjects();
+
+  const [overrideCount, onEnabledCountChange] = useState(
+    Object.values(projects).filter((project) => project.status.isOverride).length
+  );
+
+  const onButtonClick = () => setIsOpen((open) => !open);
+  const onClose = () => setIsOpen(false);
+
+  return (
+    <>
+      <EuiButton {...props} onClick={onButtonClick} minWidth={0}>
+        <EuiIcon type="beaker" />
+        {overrideCount > 0 ? (
+          <EuiNotificationBadge color="subdued" style={{ marginLeft: 2 }}>
+            {overrideCount}
+          </EuiNotificationBadge>
+        ) : null}
+      </EuiButton>
+      {isOpen ? <LabsFlyout {...{ onClose, solutions, onEnabledCountChange }} /> : null}
+    </>
+  );
+};
+
+// required for dynamic import using React.lazy()
+// eslint-disable-next-line import/no-default-export
+export default LabsBeakerButton;