Suggestions comments

elastic · Nov 16, 2023 · 1525d7b · 1525d7b
1 parent 2d09bd1
commit 1525d7b
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 149 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx b/x-pack/plugins/lens/public/app_plugin/shared/edit_on_the_fly/layer_configuration_section.tsx
@@ -69,12 +69,7 @@ export function LayerConfiguration({
         framePublicAPI={framePublicAPI}
       />
       <EuiSpacer size="m" />
-      <ConfigPanelWrapper
-        {...layerPanelsProps}
-        css={css`
-          padding: ${euiTheme.size.s};
-        `}
-      />
+      <ConfigPanelWrapper {...layerPanelsProps} />
     </EuiFlexItem>
   );
 }
diff --git a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.test.tsx b/x-pack/plugins/lens/public/datasources/text_based/layerpanel.test.tsx
diff --git a/x-pack/plugins/lens/public/datasources/text_based/layerpanel.tsx b/x-pack/plugins/lens/public/datasources/text_based/layerpanel.tsx
diff --git a/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx b/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
@@ -42,7 +42,6 @@ import type {
 } from './types';
 import { FieldSelect } from './field_select';
 import type { Datasource } from '../../types';
-import { LayerPanel } from './layerpanel';
 import { getUniqueLabelGenerator, nonNullable } from '../../utils';
 import { onDrop, getDropProps } from './dnd';
 import { removeColumn } from './remove_column';
@@ -513,7 +512,7 @@ export function getTextBasedDatasource({
     },
 
     LayerPanelComponent: (props: DatasourceLayerPanelProps<TextBasedPrivateState>) => {
-      return <LayerPanel {...props} />;
+      return null;
     },
 
     uniqueLabels(state: TextBasedPrivateState) {

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
@@ -1,6 +1,10 @@
 @import '../../mixins';
 @import '../../variables';
 
+.lnsSuggestionPanel .euiAccordion__buttonContent {
+  width: 100%;
+}
+
 .lnsSuggestionPanel__suggestions {
   @include euiScrollBar;
   @include lnsOverflowShadowHorizontal;

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -21,6 +21,8 @@ import {
   EuiButtonEmpty,
   EuiAccordion,
   EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
@@ -195,8 +197,9 @@ const SuggestionPreview = ({
               css: css`
                 display: flex;
                 flex-direction: column;
-                flex-basis: calc(50% - 8px);
-                margin-right: 8px;
+                flex-basis: calc(50% - ${euiThemeVars.euiSize});
+                margin-right: ${euiThemeVars.euiSize};
+                margin-bottom: ${euiThemeVars.euiSize};
               `,
             }
           : undefined
@@ -518,6 +521,35 @@ export function SuggestionPanel({
       </>
     );
   };
+  const title = (
+    <EuiTitle size="xxs">
+      <h3>
+        <FormattedMessage
+          id="xpack.lens.editorFrame.suggestionPanelTitle"
+          defaultMessage="Suggestions"
+        />
+      </h3>
+    </EuiTitle>
+  );
+  const accordionWithSuggestionsCount = (
+    <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>{title}</EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <div
+          css={css`
+            background-color: ${euiThemeVars.euiColorLightShade};
+            height: ${euiThemeVars.euiSizeL};
+            width: ${euiThemeVars.euiSizeL};
+            text-align: center;
+            border-radius: ${euiThemeVars.euiSizeXS};
+          `}
+        >
+          {suggestions.length + 1}
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+  const buttonContent = wrapSuggestions ? accordionWithSuggestionsCount : title;
   return (
     <EuiAccordion
       id="lensSuggestionsPanel"
@@ -529,16 +561,7 @@ export function SuggestionPanel({
       css={css`
         padding-bottom: ${wrapSuggestions ? 0 : euiThemeVars.euiSizeS};
       `}
-      buttonContent={
-        <EuiTitle size="xxs">
-          <h3>
-            <FormattedMessage
-              id="xpack.lens.editorFrame.suggestionPanelTitle"
-              defaultMessage="Suggestions"
-            />
-          </h3>
-        </EuiTitle>
-      }
+      buttonContent={buttonContent}
       forceState={hideSuggestions ? 'closed' : 'open'}
       onToggle={toggleSuggestions}
       extraAction={

diff --git a/...ens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/...ens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@@ -149,3 +149,10 @@
   75% { transform: translateY(15%); }
   100% { transform: translateY(10%); }
 }
+
+.lnsVisualizationToolbar--fixed {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+  background-color: $euiColorLightestShade;
+}
diff --git a/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -53,10 +53,11 @@ export interface WorkspacePanelWrapperProps {
 export function VisualizationToolbar(props: {
   activeVisualization: Visualization | null;
   framePublicAPI: FramePublicAPI;
+  isFixedPosition?: boolean;
 }) {
   const dispatchLens = useLensDispatch();
   const visualization = useLensSelector(selectVisualizationState);
-  const { activeVisualization } = props;
+  const { activeVisualization, isFixedPosition } = props;
   const setVisualizationState = useCallback(
     (newState: unknown) => {
       if (!activeVisualization) {
@@ -77,7 +78,12 @@ export function VisualizationToolbar(props: {
   return (
     <>
       {ToolbarComponent && (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem
+          grow={false}
+          className={classNames({
+            'lnsVisualizationToolbar--fixed': isFixedPosition,
+          })}
+        >
           {ToolbarComponent({
             frame: props.framePublicAPI,
             state: visualization.state,