Update Discover appearance

changelogs/fragments/8651.yml

@@ -0,0 +1,2 @@
+feat:
+- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))

src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss

@@ -1,9 +1,9 @@
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
-  border-bottom-right-radius: $euiSizeL;
   background-color: $euiSideNavBackgroundColor;
   overflow: hidden;
+  box-shadow: 1px 0 0 $euiBorderColor !important;
 
   .nav-link-item {
     padding: $euiSizeS;

src/plugins/data/public/index.ts

@@ -62,7 +62,15 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
-export { createEditor, DefaultInput, DQLBody, SingleLineInput, DatasetSelector } from './ui';
+
+export {
+  createEditor,
+  DefaultInput,
+  DQLBody,
+  SingleLineInput,
+  DatasetSelector,
+  DatasetSelectorAppearance,
+} from './ui';
 
 import {
   generateFilters,

src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss

@@ -19,7 +19,9 @@
   &__advancedModal {
     width: 1200px;
     height: 800px;
-    max-height: calc(100vh - $euiSizeS);
+
+    // euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
+    max-height: calc(90vh - $euiSizeL);
 
     .euiModal__flex {
       max-height: none;

src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx

@@ -11,6 +11,7 @@
   EuiSelectable,
   EuiSelectableOption,
   EuiSmallButtonEmpty,
+  EuiSmallButton,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
@@ -22,12 +23,41 @@
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
 
+export enum DatasetSelectorAppearance {
+  Button = 'button',
+  None = 'none',
+}
+
+type EuiSmallButtonProps = React.ComponentProps<typeof EuiSmallButton>;
+type EuiSmallButtonEmptyProps = React.ComponentProps<typeof EuiSmallButtonEmpty>;
+
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
   setSelectedDataset: (dataset: Dataset) => void;
   services: IDataPluginServices;
 }
 
+export interface DatasetSelectorUsingButtonProps {
+  appearance: DatasetSelectorAppearance.Button;
+  buttonProps?: EuiSmallButtonProps;
+}
+
+export interface DatasetSelectorUsingButtonEmptyProps {
+  appearance?: DatasetSelectorAppearance.None;
+  buttonProps?: EuiSmallButtonEmptyProps;
+}
+
+const RootComponent: React.FC<
+  (EuiSmallButtonEmptyProps | EuiSmallButtonProps) & { appearance?: DatasetSelectorAppearance }
+> = (props) => {
+  const { appearance, ...rest } = props;
+  if (appearance === DatasetSelectorAppearance.Button) {
+    return <EuiSmallButton {...(rest as EuiSmallButtonProps)} />;
+  } else {
+    return <EuiSmallButtonEmpty {...(rest as EuiSmallButtonEmptyProps)} />;
+  }
+};
+
 /**
  * This component provides a dropdown selector for datasets and an advanced selector modal.
  * It fetches datasets once on mount to populate the selector options.
@@ -42,7 +72,10 @@
   selectedDataset,
   setSelectedDataset,
   services,
-}: DatasetSelectorProps) => {
+  appearance,
+  buttonProps,
+}: DatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const isMounted = useRef(false);
   const [isOpen, setIsOpen] = useState(false);
   const [indexPatterns, setIndexPatterns] = useState<Dataset[]>([]);
@@ -177,15 +210,17 @@
             })
           }`}
         >
-          <EuiSmallButtonEmpty
+          <RootComponent
+            appearance={appearance}
+            {...buttonProps}
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
             onClick={togglePopover}
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiSmallButtonEmpty>
+          </RootComponent>
         </EuiToolTip>
       }
       isOpen={isOpen}

src/plugins/data/public/ui/dataset_selector/index.tsx

@@ -6,15 +6,24 @@
 import { useCallback, useState, useEffect } from 'react';
 import React from 'react';
 import { Dataset, Query, TimeRange } from '../../../common';
-import { DatasetSelector } from './dataset_selector';
+import {
+  DatasetSelector,
+  DatasetSelectorUsingButtonEmptyProps,
+  DatasetSelectorUsingButtonProps,
+  DatasetSelectorAppearance,
+} from './dataset_selector';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IDataPluginServices } from '../../types';
 
 interface ConnectedDatasetSelectorProps {
   onSubmit: ((query: Query, dateRange?: TimeRange | undefined) => void) | undefined;
 }
 
-const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) => {
+const ConnectedDatasetSelector = ({
+  onSubmit,
+  ...datasetSelectorProps
+}: ConnectedDatasetSelectorProps &
+  (DatasetSelectorUsingButtonProps | DatasetSelectorUsingButtonEmptyProps)) => {
   const { services } = useOpenSearchDashboards<IDataPluginServices>();
   const queryString = services.data.query.queryString;
   const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>(
@@ -46,11 +55,12 @@ const ConnectedDatasetSelector = ({ onSubmit }: ConnectedDatasetSelectorProps) =
 
   return (
     <DatasetSelector
+      {...datasetSelectorProps}
       selectedDataset={selectedDataset}
       setSelectedDataset={handleDatasetChange}
       services={services}
     />
   );
 };
 
-export { ConnectedDatasetSelector as DatasetSelector };
+export { ConnectedDatasetSelector as DatasetSelector, DatasetSelectorAppearance };

src/plugins/data/public/ui/filter_bar/_global_filter_group.scss

@@ -81,4 +81,8 @@
   &--compressed {
     margin-top: -$euiSizeS;
   }
+
+  &__allFiltersPopover {
+    background-color: $euiFormInputGroupLabelBackground;
+  }
 }

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -407,7 +407,6 @@ const FilterOptionsUI = (props: Props) => {
     return (
       <EuiPopover
         id="popoverForAllFilters"
-        className="globalFilterGroup__allFiltersPopover"
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         button={savedQueryPopoverButton}
@@ -425,7 +424,7 @@ const FilterOptionsUI = (props: Props) => {
   return (
     <EuiPopover
       id="popoverForAllFilters"
-      className="globalFilterGroup__allFiltersPopover"
+      className={useNewHeader ? 'globalFilterGroup__allFiltersPopover' : undefined}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       button={props.useSaveQueryMenu ? savedQueryPopoverButton : filterPopoverButton}

src/plugins/data/public/ui/index.ts

@@ -51,4 +51,4 @@ export {
   useQueryStringManager,
 } from './search_bar';
 export { SuggestionsComponent } from './typeahead';
-export { DatasetSelector } from './dataset_selector';
+export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -137,14 +137,12 @@
 .osdQueryEditor__header {
   display: flex;
   align-items: center;
-  padding: 0 $euiSizeXS $euiSizeXS;
+  padding: 0 $euiSizeXS $euiSizeS;
 }
 
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
-  padding: $euiSizeS;
-  gap: $euiSizeXS;
 
   > * {
     flex: 0 1 auto;
@@ -186,13 +184,19 @@
 
 .osdQuerEditor__singleLine {
   padding: calc($euiSizeXS + 1px);
-  background-color: $euiColorEmptyShade;
   overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
   min-width: 0;
 
   .monaco-editor .view-overlays .current-line {
     border: none;
   }
+
+  &,
+  & .monaco-editor,
+  & .monaco-editor .inputarea.ime-input,
+  & .monaco-editor-background {
+    background-color: $euiFormBackgroundColor;
+  }
 }
 
 .suggest-widget {

src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss

@@ -1,9 +1,38 @@
 .defaultEditor {
   border: $euiBorderThin;
   border-radius: $euiSizeXS;
-  margin: 0 $euiSizeXS $euiSizeXS;
 
   &__footer {
-    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+    background-color: $euiColorLightestShade;
   }
+
+  .monaco-editor {
+    border-radius: $euiSizeXS $euiSizeXS 0 0;
+
+    .margin {
+      border-radius: $euiSizeXS 0 0 0;
+      background-color: $euiFormBackgroundColor;
+      padding: 0 $euiSizeXS;
+    }
+
+    .view-lines {
+      padding: 0 $euiSizeXS;
+    }
+
+    .monaco-scrollable-element {
+      border-radius: 0 $euiSizeXS 0 0;
+    }
+  }
+
+  .monaco-editor,
+  .monaco-editor-background,
+  .monaco-editor .inputarea.ime-input,
+  .monaco-editor .decorationsOverviewRuler {
+    background-color: $euiColorEmptyShade;
+  }
+}
+
+.defaultEditor__footerRow {
+  gap: $euiSizeM;
 }

src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx

@@ -43,14 +43,15 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
         options={{
           minimap: { enabled: false },
           scrollBeyondLastLine: false,
-          fontSize: 14,
-          fontFamily: 'Roboto Mono',
+          fontSize: 12,
+          lineHeight: 20,
+          fontFamily: 'var(--font-code)',
           lineNumbers: 'on',
           folding: true,
           wordWrap: 'on',
           wrappingIndent: 'same',
           lineDecorationsWidth: 0,
-          lineNumbersMinChars: 2,
+          lineNumbersMinChars: 1,
           wordBasedSuggestions: false,
         }}
         suggestionProvider={{
@@ -70,7 +71,12 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
       />
       <div className="defaultEditor__footer">
         {footerItems && (
-          <EuiFlexGroup direction="row" alignItems="center">
+          <EuiFlexGroup
+            direction="row"
+            alignItems="center"
+            gutterSize="none"
+            className="defaultEditor__footerRow"
+          >
             {footerItems.start?.map((item) => (
               <EuiFlexItem grow={false} className="defaultEditor__footerItem">
                 {item}

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -91,3 +91,7 @@
     }
   }
 }
+
+.osdQueryBar--hideEmpty:empty {
+  display: none;
+}

src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx

@@ -402,7 +402,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
       >
         {renderQueryInput()}
         {renderSharingMetaFields()}
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} className="osdQueryBar--hideEmpty">
           {shouldUseDatePickerRef
             ? createPortal(renderUpdateButton(), props.datePickerRef!.current!)
             : renderUpdateButton()}

src/plugins/data_explorer/public/components/app_container.scss

@@ -11,6 +11,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
 
 .deLayout {
   height: calc(100vh - #{$osdHeaderOffset * 1});
+  padding: $euiSizeS;
 
   &.dsc--next {
     height: calc(100vh - #{$osdHeaderOffset * 2});
@@ -19,6 +20,15 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
   &__canvas {
     height: 100%;
   }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  & > .euiResizableContainer {
+    gap: $euiSizeXS;
+  }
+
+  .globalQueryBar {
+    padding: 0;
+  }
 }
 
 .headerIsExpanded .deLayout {

src/plugins/data_explorer/public/components/sidebar/index.scss

@@ -2,10 +2,6 @@
   &_panel {
     border-top: 0;
   }
-
-  &_dataSource {
-    border-bottom: $euiBorderThin !important;
-  }
 }
 
 .dataPanelTypeFilterPopover {

src/plugins/data_explorer/public/components/sidebar/index.tsx

@@ -12,7 +12,11 @@ import {
   DataSourceSelectable,
   UI_SETTINGS,
 } from '../../../../data/public';
-import { DataSourceOption, DatasetSelector } from '../../../../data/public/';
+import {
+  DataSourceOption,
+  DatasetSelector,
+  DatasetSelectorAppearance,
+} from '../../../../data/public/';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { DataExplorerServices } from '../../types';
 import { setIndexPattern, useTypedDispatch, useTypedSelector } from '../../utils/state_management';
@@ -129,8 +133,7 @@ export const Sidebar: FC = ({ children }) => {
       <EuiSplitPanel.Outer
         className="eui-yScroll deSidebar_panel"
         hasBorder={true}
-        borderRadius="none"
-        color="transparent"
+        borderRadius="l"
       >
         <EuiSplitPanel.Inner
           paddingSize="s"
@@ -139,7 +142,14 @@ export const Sidebar: FC = ({ children }) => {
           className="deSidebar_dataSource"
         >
           {isEnhancementEnabled ? (
-            <DatasetSelector onSubmit={handleDatasetSubmit} />
+            <DatasetSelector
+              onSubmit={handleDatasetSubmit}
+              appearance={DatasetSelectorAppearance.Button}
+              buttonProps={{
+                color: 'text',
+                fullWidth: true,
+              }}
+            />
           ) : (
             <DataSourceSelectable
               dataSources={activeDataSources}