[Controls] Update empty state (#122618)

src/plugins/controls/public/control_group/component/control_group_component.tsx

@@ -46,6 +46,7 @@ import { forwardAllContext } from '../editor/forward_all_context';
 import { controlGroupReducers } from '../state/control_group_reducers';
 import { ControlClone, SortableControl } from './control_group_sortable_item';
 import { useReduxContainerContext } from '../../../../presentation_util/public';
+import { ControlsIllustration } from './controls_illustration';
 
 export const ControlGroup = () => {
   // Controls Services Context
@@ -108,8 +109,8 @@ export const ControlGroup = () => {
     return null;
   }
 
-  let panelBg: 'subdued' | 'primary' | 'success' = 'subdued';
-  if (emptyState) panelBg = 'primary';
+  let panelBg: 'subdued' | 'plain' | 'success' = 'subdued';
+  if (emptyState) panelBg = 'plain';
   if (draggingId) panelBg = 'success';
 
   return (
@@ -201,10 +202,18 @@ export const ControlGroup = () => {
       ) : (
         <>
           <EuiFlexGroup alignItems="center" gutterSize="xs" data-test-subj="controls-empty">
-            <EuiFlexItem grow={1}>
-              <EuiText className="emptyStateText eui-textCenter" size="s">
-                <p>{ControlGroupStrings.emptyState.getCallToAction()}</p>
-              </EuiText>
+            <EuiFlexItem grow={1} className="controlsIllustration__container">
+              <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <ControlsIllustration />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  {' '}
+                  <EuiText className="emptyStateText" size="s">
+                    <p>{ControlGroupStrings.emptyState.getCallToAction()}</p>
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <div className="addControlButton">

src/plugins/controls/public/control_group/component/controls_illustration.scss

@@ -0,0 +1,6 @@
+@include euiBreakpoint('xs', 's') {
+  .controlsIllustration {
+    width: $euiSize * 6;
+    height: $euiSize * 6;
+  }
+}

src/plugins/controls/public/control_group/control_group.scss

@@ -11,22 +11,26 @@ $controlMinWidth: $euiSize * 14;
   &--empty {
     display: flex;
     @include euiBreakpoint('m', 'l', 'xl') {
-      background: url(opt_a.svg);
-      background-position: left top;
-      background-repeat: no-repeat;
       .addControlButton {
         text-align: center;
       }
       .emptyStateText {
         padding-left: $euiSize * 2;
       }
+      height: $euiSize * 4;
+      overflow: hidden;
     }
     @include euiBreakpoint('xs', 's') {
       .addControlButton {
         text-align: center;
       }
+      .emptyStateText {
+        text-align: center;
+      }
+      .controlsIllustration__container {
+        margin-bottom: 0 !important;
+      }
     }
-    min-height: $euiSize * 4;
   }
 
   &--twoLine {

src/plugins/controls/public/control_group/opt_a.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="58" height="55" fill="none" viewBox="0 0 58 55">
-  <path fill="#3375C6" d="M0 55V0h58L0 55z"/>
-  <path fill="#F5C748" d="M0 11h58v6H0z"/>
-  <path fill="#EB95C4" d="M16 23h32v6H16z"/>
-</svg>

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -263,12 +263,19 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       ReactDOM.unmountComponentAtNode(this.domNode);
     }
     this.domNode = dom;
+    const controlsEnabled = this.services.presentationUtil.labsService.isProjectEnabled(
+      'labs:dashboard:dashboardControls'
+    );
     ReactDOM.render(
       <I18nProvider>
         <KibanaContextProvider services={this.services}>
           <KibanaThemeProvider theme$={this.services.theme.theme$}>
             <this.services.presentationUtil.ContextProvider>
-              <DashboardViewport container={this} controlGroup={this.controlGroup} />
+              <DashboardViewport
+                controlsEnabled={controlsEnabled}
+                container={this}
+                controlGroup={this.controlGroup}
+              />
             </this.services.presentationUtil.ContextProvider>
           </KibanaThemeProvider>
         </KibanaContextProvider>

src/plugins/dashboard/public/application/embeddable/viewport/_dashboard_viewport.scss

@@ -8,6 +8,7 @@
 
 .dshDashboardViewport-controlGroup {
   margin: 0 $euiSizeS  0 $euiSizeS;
+  padding-bottom: $euiSizeXS;
 }
 
 .dshDashboardEmptyScreen {

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -18,6 +18,7 @@ import { ControlGroupContainer } from '../../../../../controls/public';
 export interface DashboardViewportProps {
   container: DashboardContainer;
   controlGroup?: ControlGroupContainer;
+  controlsEnabled?: boolean;
 }
 
 interface State {
@@ -93,13 +94,15 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
   };
 
   public render() {
-    const { container } = this.props;
+    const { container, controlsEnabled } = this.props;
     const isEditMode = container.getInput().viewMode !== ViewMode.VIEW;
     const { isEmbeddedExternally, isFullScreenMode, panelCount, title, description, useMargins } =
       this.state;
     return (
       <>
-        <div className="dshDashboardViewport-controlGroup" ref={this.controlsRoot} />
+        {controlsEnabled ? (
+          <div className="dshDashboardViewport-controlGroup" ref={this.controlsRoot} />
+        ) : null}
         <div
           data-shared-items-count={panelCount}
           data-shared-items-container

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

@@ -57,9 +57,15 @@ export const SolutionToolbar = ({ isDarkModeEnabled, children }: Props) => {
       gutterSize="s"
     >
       <EuiFlexItem grow={false}>{primaryActionButton}</EuiFlexItem>
-      {quickButtonGroup ? <EuiFlexItem grow={false}>{quickButtonGroup}</EuiFlexItem> : null}
-      {extra}
-      {addFromLibraryButton ? <EuiFlexItem grow={false}>{addFromLibraryButton}</EuiFlexItem> : null}
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
+          {quickButtonGroup ? <EuiFlexItem grow={false}>{quickButtonGroup}</EuiFlexItem> : null}
+          {extra}
+          {addFromLibraryButton ? (
+            <EuiFlexItem grow={false}>{addFromLibraryButton}</EuiFlexItem>
+          ) : null}
+        </EuiFlexGroup>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };