[Canvas][Labs] Integrate Labs Service into Canvas

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

@@ -436,4 +436,8 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     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:canvas:enable_ui': boolean;
   'labs:presentation:unifiedToolbar': boolean;
 }

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

@@ -18,6 +18,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiIcon,
+  EuiOverlayMask,
 } from '@elastic/eui';
 
 import { SolutionName, ProjectStatus, ProjectID, Project, EnvironmentName } from '../../../common';
@@ -104,32 +105,43 @@ 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>
+          <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>
   );
 };
 

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.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>

src/plugins/presentation_util/public/i18n/labs.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCode } from '@elastic/eui';
 
 export const LabsStrings = {
   Components: {
@@ -18,7 +19,8 @@ export const LabsStrings = {
           defaultMessage: 'Kibana',
         }),
         help: i18n.translate('presentationUtil.labs.components.kibanaSwitchHelp', {
-          defaultMessage: 'Sets the corresponding Advanced Setting for this lab project in Kibana',
+          defaultMessage:
+            'Sets the corresponding Advanced Setting for this lab project; affects all Kibana users',
         }),
       }),
       getBrowserSwitchText: () => ({
@@ -51,24 +53,28 @@ export const LabsStrings = {
         i18n.translate('presentationUtil.labs.components.overrideFlagsLabel', {
           defaultMessage: 'Override flags',
         }),
+      getOverriddenIconTipLabel: () =>
+        i18n.translate('presentationUtil.labs.components.overridenIconTipLabel', {
+          defaultMessage: 'Default overridden',
+        }),
       getEnabledStatusMessage: () => (
         <FormattedMessage
-          id="presentationUtil.labs.components.defaultStatusMessage"
-          defaultMessage="{status} by default"
+          id="presentationUtil.labs.components.enabledStatusMessage"
+          defaultMessage="Default: {status}"
           values={{
-            status: <strong>Enabled</strong>,
+            status: <EuiCode>Enabled</EuiCode>,
           }}
-          description="Displays the current status of a lab project"
+          description="Displays the enabled status of a lab project"
         />
       ),
       getDisabledStatusMessage: () => (
         <FormattedMessage
-          id="presentationUtil.labs.components.defaultStatusMessage"
-          defaultMessage="{status} by default"
+          id="presentationUtil.labs.components.disabledStatusMessage"
+          defaultMessage="Default: {status}"
           values={{
-            status: <strong>Disabled</strong>,
+            status: <EuiCode>Disabled</EuiCode>,
           }}
-          description="Displays the current status of a lab project"
+          description="Displays the disabled status of a lab project"
         />
       ),
     },
@@ -89,6 +95,10 @@ export const LabsStrings = {
         i18n.translate('presentationUtil.labs.components.calloutHelp', {
           defaultMessage: 'Refresh to apply changes',
         }),
+      getCloseButtonLabel: () =>
+        i18n.translate('presentationUtil.labs.components.closeButtonLabel', {
+          defaultMessage: 'Close',
+        }),
     },
   },
 };

src/plugins/presentation_util/public/index.ts

@@ -8,6 +8,12 @@
 
 import { PresentationUtilPlugin } from './plugin';
 
+export {
+  PresentationCapabilitiesService,
+  PresentationDashboardsService,
+  PresentationLabsService,
+} from './services';
+
 export { PresentationUtilPluginSetup, PresentationUtilPluginStart } from './types';
 export { SaveModalDashboardProps } from './components/types';
 export { projectIDs, ProjectID, Project } from '../common/labs';

src/plugins/presentation_util/public/services/capabilities.ts

@@ -10,4 +10,5 @@ export interface PresentationCapabilitiesService {
   canAccessDashboards: () => boolean;
   canCreateNewDashboards: () => boolean;
   canSaveVisualizations: () => boolean;
+  canSetAdvancedSettings: () => boolean;
 }

src/plugins/presentation_util/public/services/index.ts

@@ -10,6 +10,10 @@ import { PluginServices } from './create';
 import { PresentationCapabilitiesService } from './capabilities';
 import { PresentationDashboardsService } from './dashboards';
 import { PresentationLabsService } from './labs';
+
+export { PresentationCapabilitiesService } from './capabilities';
+export { PresentationDashboardsService } from './dashboards';
+export { PresentationLabsService } from './labs';
 export interface PresentationUtilServices {
   dashboards: PresentationDashboardsService;
   capabilities: PresentationCapabilitiesService;

src/plugins/presentation_util/public/services/kibana/capabilities.ts

@@ -16,11 +16,12 @@ export type CapabilitiesServiceFactory = KibanaPluginServiceFactory<
 >;
 
 export const capabilitiesServiceFactory: CapabilitiesServiceFactory = ({ coreStart }) => {
-  const { dashboard, visualize } = coreStart.application.capabilities;
+  const { dashboard, visualize, advancedSettings } = coreStart.application.capabilities;
 
   return {
     canAccessDashboards: () => Boolean(dashboard.show),
     canCreateNewDashboards: () => Boolean(dashboard.createNew),
     canSaveVisualizations: () => Boolean(visualize.save),
+    canSetAdvancedSettings: () => Boolean(advancedSettings.save),
   };
 };