[Canvas][Labs] Integrate Labs Service into Canvas

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

@@ -432,7 +432,11 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'text',
     _meta: { description: 'Non-default value of setting.' },
   },
-  'labs:presentation:unifiedToolbar': {
+  'labs:presentation:timeToPresent': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
+  'labs:canvas:enable_ui': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },

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

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

src/plugins/presentation_util/common/labs.ts

@@ -8,9 +8,9 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const UNIFIED_TOOLBAR = 'labs:presentation:unifiedToolbar';
+export const TIME_TO_PRESENT = 'labs:presentation:timeToPresent';
 
-export const projectIDs = [UNIFIED_TOOLBAR] as const;
+export const projectIDs = [TIME_TO_PRESENT] as const;
 export const environmentNames = ['kibana', 'browser', 'session'] as const;
 export const solutionNames = ['canvas', 'dashboard', 'presentation'] as const;
 
@@ -19,17 +19,18 @@ export const solutionNames = ['canvas', 'dashboard', 'presentation'] as const;
  * provided to users of our solutions in Kibana.
  */
 export const projects: { [ID in ProjectID]: ProjectConfig & { id: ID } } = {
-  [UNIFIED_TOOLBAR]: {
-    id: UNIFIED_TOOLBAR,
+  [TIME_TO_PRESENT]: {
+    id: TIME_TO_PRESENT,
     isActive: false,
+    isDisplayed: false,
     environments: ['kibana', 'browser', 'session'],
-    name: i18n.translate('presentationUtil.labs.enableUnifiedToolbarProjectName', {
-      defaultMessage: 'Unified Toolbar',
+    name: i18n.translate('presentationUtil.labs.enableTimeToPresentProjectName', {
+      defaultMessage: 'Canvas Presentation UI',
     }),
     description: i18n.translate('presentationUtil.labs.enableUnifiedToolbarProjectDescription', {
-      defaultMessage: 'Enable the new unified toolbar design for Presentation solutions',
+      defaultMessage: 'Enable the new presentation-oriented UI for Canvas.',
     }),
-    solutions: ['dashboard', 'canvas'],
+    solutions: ['canvas'],
   },
 };
 
@@ -51,6 +52,7 @@ export interface ProjectConfig {
   id: ProjectID;
   name: string;
   isActive: boolean;
+  isDisplayed: boolean;
   environments: EnvironmentName[];
   description: string;
   solutions: SolutionName[];

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

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

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

@@ -16,6 +16,7 @@ import {
   EuiScreenReaderOnly,
 } from '@elastic/eui';
 
+import { pluginServices } from '../../services';
 import { EnvironmentName } from '../../../common/labs';
 import { LabsStrings } from '../../i18n';
 
@@ -34,29 +35,36 @@ export interface Props {
   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>
-);
+export const EnvironmentSwitch = ({ env, isChecked, onChange, name }: Props) => {
+  const { capabilities } = pluginServices.getHooks();
+
+  const canSet = env === 'kibana' ? capabilities.useService().canSetAdvancedSettings() : true;
+
+  return (
+    <EuiFlexItem grow={false} style={{ marginBottom: '.25rem' }}>
+      <EuiFlexGroup gutterSize="xs" alignItems="flexEnd" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiSwitch
+            disabled={!canSet}
+            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

@@ -16,7 +16,12 @@ export default {
   title: 'Labs/Flyout',
   description:
     'A set of components used for providing Labs controls and projects in another solution.',
-  argTypes: {},
+  argTypes: {
+    canSetAdvancedSettings: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+  },
 };
 
 export function BeakerButton() {

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

@@ -10,6 +10,8 @@ import React, { ReactNode, useRef, useState, useEffect } from 'react';
 import {
   EuiFlyout,
   EuiTitle,
+  EuiSpacer,
+  EuiText,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
@@ -18,6 +20,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiIcon,
+  EuiOverlayMask,
 } from '@elastic/eui';
 
 import { SolutionName, ProjectStatus, ProjectID, Project, EnvironmentName } from '../../../common';
@@ -104,32 +107,47 @@ export const LabsFlyout = (props: Props) => {
 
   footer = (
     <EuiFlyoutFooter>
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
-        <EuiFlexItem grow={false}>{resetButton}</EuiFlexItem>
-        <EuiFlexItem grow={false}>{refreshButton}</EuiFlexItem>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType="cross" onClick={() => onClose()} flush="left">
+            {strings.getCloseButtonLabel()}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
+            <EuiFlexItem grow={false}>{resetButton}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{refreshButton}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
   );
 
   return (
-    <EuiFlyout onClose={onClose}>
-      <EuiFlyoutHeader>
-        <EuiTitle size="m">
-          <h2>
-            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="beaker" size="l" />
-              </EuiFlexItem>
-              <EuiFlexItem>{strings.getTitleLabel()}</EuiFlexItem>
-            </EuiFlexGroup>
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <ProjectList {...{ projects, solutions, onStatusChange }} />
-      </EuiFlyoutBody>
-      {footer}
-    </EuiFlyout>
+    <EuiOverlayMask onClick={() => onClose()} headerZindexLocation="below">
+      <EuiFlyout onClose={onClose} hideCloseButton={true}>
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>
+              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon type="beaker" size="l" />
+                </EuiFlexItem>
+                <EuiFlexItem>{strings.getTitleLabel()}</EuiFlexItem>
+              </EuiFlexGroup>
+            </h2>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" color="subdued">
+            <p>{strings.getDescriptionMessage()}</p>
+          </EuiText>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <ProjectList {...{ projects, solutions, onStatusChange }} />
+        </EuiFlyoutBody>
+        {footer}
+      </EuiFlyout>
+    </EuiOverlayMask>
   );
 };
 

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

@@ -29,6 +29,10 @@ export const ProjectList = (props: Props) => {
 
   const items = Object.values(projects)
     .map((project) => {
+      if (!project.isDisplayed) {
+        return null;
+      }
+
       // Filter out any panels that don't match the solutions filter, (if provided).
       if (solutions && !solutions.some((solution) => project.solutions.includes(solution))) {
         return null;

src/plugins/presentation_util/public/components/labs/project_list_item.scss

@@ -10,7 +10,7 @@
     left: 4px;
     bottom: $euiSizeL;
     width: 4px;
-    background: $euiColorPrimary;
+    background: $euiColorSecondary;
     content: '';
   }
 
@@ -37,10 +37,20 @@
   }
 
   &--isOverridden:before {
-    left: -12px;
+    left: -$euiSizeS;
   }
 
   &--isOverridden:first-child:before {
     top: 0;
   }
 }
+
+.projectListItem__titlePendingChangesIndicator {
+  margin-left: $euiSizeS;
+  position: relative;
+  top: -1px;
+}
+
+.projectListItem__solutions {
+  text-transform: capitalize;
+}

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

@@ -37,7 +37,7 @@ export function EmptyList() {
 export const ListItem = (
   props: Pick<
     Props['project'],
-    'description' | 'isActive' | 'name' | 'solutions' | 'environments'
+    'description' | 'isActive' | 'name' | 'solutions' | 'environments' | 'isDisplayed'
   > &
     Omit<ProjectStatus, 'defaultValue'>
 ) => {

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

@@ -15,6 +15,8 @@ import {
   EuiText,
   EuiFormFieldset,
   EuiScreenReaderOnly,
+  EuiSpacer,
+  EuiIconTip,
 } from '@elastic/eui';
 import classnames from 'classnames';
 
@@ -47,8 +49,20 @@ export const ProjectListItem = ({ project, onStatusChange }: Props) => {
         <EuiFlexItem>
           <EuiFlexGroup direction="column" gutterSize="xs" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiTitle className="projectListItem__title" size="s">
-                <h2>{name}</h2>
+              <EuiTitle className="projectListItem__title" size="xs">
+                <h2>
+                  {name}
+                  {isOverride ? (
+                    <span className="projectListItem__titlePendingChangesIndicator">
+                      <EuiIconTip
+                        content={strings.getOverriddenIconTipLabel()}
+                        position="top"
+                        type="dot"
+                        color="secondary"
+                      />
+                    </span>
+                  ) : null}
+                </h2>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
@@ -59,10 +73,14 @@ export const ProjectListItem = ({ project, onStatusChange }: Props) => {
               </div>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiText size="s">{description}</EuiText>
+              <EuiSpacer size="s" />
+              <EuiText size="s" color="subdued">
+                {description}
+              </EuiText>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiText size="s" color="subdued">
+              <EuiSpacer size="xs" />
+              <EuiText size="xs" color="subdued">
                 {isActive ? strings.getEnabledStatusMessage() : strings.getDisabledStatusMessage()}
               </EuiText>
             </EuiFlexItem>