Creating a Labs service for Presentation Solutions (#95435) (#96373)

Co-authored-by: Clint Andrew Hall <[email protected]>

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

@@ -416,6 +416,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.' },
@@ -432,7 +436,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

@@ -119,4 +119,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;