[Discover 2.0] UI Fixes

docs/openapi/README.md

@@ -6,4 +6,9 @@ The OpenAPI (https://swagger.io/specification/) Specification defines a standard
 When generated, OpenAPI definition can then be used by documentation generation tools to display the API such as swagger UI, code generation tools to generate servers and clients in various programming languages, testing tools, and many other use cases.
 
 ### Starting Up the Swagger UI Locally
-To start up the swagger UI locally for development or validation purposes, you can simply start a server in the directory where the index.html file is located. `npx serve` is a simple way to start a server. 
+To start up the swagger UI locally for development or validation purposes, you can simply start a server in the directory where the index.html file is located. `npx serve` is a simple way to start a server. 
+
+### API Docs
+
+- [Saved Objects](https://opensearch-project.github.io/OpenSearch-Dashboards/docs/openapi/saved_objects/)
+- [Index Patterns](https://opensearch-project.github.io/OpenSearch-Dashboards/docs/openapi/index_patterns/)https://github.com/ashwin-pc/OpenSearch-Dashboards/blob/26b8c38cf4b9f6cf9a809dad370d26cf37b72571/docs/openapi/README.md

src/core/public/overlays/modal/modal_service.tsx

@@ -31,7 +31,7 @@
 /* eslint-disable max-classes-per-file */
 
 import { i18n as t } from '@osd/i18n';
-import { EuiModal, EuiConfirmModal, EuiConfirmModalProps } from '@elastic/eui';
+import { EuiModal, EuiConfirmModal, EuiConfirmModalProps, EuiModalProps } from '@elastic/eui';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Subject } from 'rxjs';
@@ -111,7 +111,7 @@ export interface OverlayModalStart {
 /**
  * @public
  */
-export interface OverlayModalOpenOptions {
+export interface OverlayModalOpenOptions extends Pick<EuiModalProps, 'maxWidth'> {
   className?: string;
   closeButtonAriaLabel?: string;
   'data-test-subj'?: string;

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

@@ -0,0 +1,3 @@
+.datasetConfigurator {
+  height: 600px;
+}

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

@@ -11,4 +11,17 @@
     width: 365px;
     padding: $euiSizeXS;
   }
+
+  &__footer {
+    padding: $euiSizeXS;
+  }
+
+  &__advancedModal {
+    width: 1200px;
+  }
+
+  &__checkbox {
+    flex: 1;
+    align-self: center;
+  }
 }

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

@@ -1,2 +1,3 @@
 @import "./dataset_explorer";
 @import "./dataset_selector";
+@import "./dataset_configurator";

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

@@ -79,7 +79,7 @@ export const Configurator = ({
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
-        <EuiForm>
+        <EuiForm className="datasetConfigurator">
           <EuiFormRow
             label={i18n.translate(
               'data.explorer.datasetSelector.advancedSelector.configurator.datasetLabel',

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

@@ -133,6 +133,7 @@ export const DatasetExplorer = ({
                     },
                     searchable: true,
                   })}
+                  height="full"
                   className="datasetExplorer__selectable"
                 >
                   {(list, search) => (
@@ -182,7 +183,7 @@ const LoadingEmptyColumn = ({ isLoading }: { isLoading: boolean }) =>
       <EuiTitle size="xxs" className="datasetExplorer__columnTitle">
         <h3>...</h3>
       </EuiTitle>
-      <EuiSelectable options={[]} singleSelection className="datasetSelector__selectable" isLoading>
+      <EuiSelectable options={[]} singleSelection className="datasetExplorer__selectable" isLoading>
         {(list) => <>{list}</>}
       </EuiSelectable>
     </div>

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

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import {
+  EuiButton,
   EuiButtonEmpty,
   EuiIcon,
   EuiPopover,
-  EuiPopoverTitle,
+  EuiPopoverFooter,
   EuiSelectable,
   EuiSelectableOption,
   EuiToolTip,
@@ -35,6 +36,14 @@ export const DatasetSelector = ({
   const [datasets, setDatasets] = useState<Dataset[]>([]);
   const { overlays, savedObjects } = services;
 
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
   const datasetService = getQueryService().queryString.getDatasetService();
 
   const datasetIcon =
@@ -46,6 +55,8 @@ export const DatasetSelector = ({
 
     const fetchedIndexPatternDataStructures = await typeConfig.fetch(savedObjects.client, []);
 
+    if (!isMounted.current) return;
+
     const fetchedDatasets =
       fetchedIndexPatternDataStructures.children?.map((pattern) =>
         typeConfig.toDataset([pattern])
@@ -139,13 +150,33 @@ export const DatasetSelector = ({
       display="block"
       panelPaddingSize="none"
     >
-      <EuiPopoverTitle paddingSize="s">
-        <EuiButtonEmpty
+      <EuiSelectable
+        className="datasetSelector__selectable"
+        options={options}
+        singleSelection="always"
+        searchable={true}
+        onChange={handleOptionChange}
+        listProps={{
+          showIcons: false,
+        }}
+        searchProps={{
+          compressed: true,
+        }}
+      >
+        {(list, search) => (
+          <>
+            {search}
+            {list}
+          </>
+        )}
+      </EuiSelectable>
+      <EuiPopoverFooter paddingSize="none" className="datasetSelector__footer">
+        <EuiButton
           className="datasetSelector__advancedButton"
           iconType="gear"
           iconSide="right"
           iconSize="s"
-          size="xs"
+          size="s"
           isSelected={false}
           onClick={() => {
             closePopover();
@@ -161,36 +192,20 @@ export const DatasetSelector = ({
                   }}
                   onCancel={() => overlay?.close()}
                 />
-              )
+              ),
+              {
+                maxWidth: false,
+                className: 'datasetSelector__advancedModal',
+              }
             );
           }}
         >
           <FormattedMessage
             id="data.datasetSelector.advancedButton"
             defaultMessage="View all available data"
           />
-        </EuiButtonEmpty>
-      </EuiPopoverTitle>
-      <EuiSelectable
-        className="datasetSelector__selectable"
-        options={options}
-        singleSelection="always"
-        searchable={true}
-        onChange={handleOptionChange}
-        listProps={{
-          showIcons: false,
-        }}
-        searchProps={{
-          compressed: true,
-        }}
-      >
-        {(list, search) => (
-          <>
-            {search}
-            {list}
-          </>
-        )}
-      </EuiSelectable>
+        </EuiButton>
+      </EuiPopoverFooter>
     </EuiPopover>
   );
 };

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

@@ -193,7 +193,6 @@
 .osdQuerEditor__singleLine {
   padding: $euiSizeS;
   background-color: $euiColorEmptyShade;
-  border: $euiBorderThin;
 
   .monaco-editor .view-overlays .current-line {
     border: none;

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

@@ -1,26 +1,9 @@
-.defaultEditor__footer {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  background-color: $euiColorLightestShade;
-  gap: $euiSizeS;
-  margin-top: 1px;
-  margin-left: $euiSizeS;
-  margin-right: $euiSizeS;
-
-  .defaultEditor__footerItem {
-    padding: 0 $euiSizeXS;
-    display: flex;
-    align-items: center;
-  }
-
-  .defaultEditor__footerItem__end {
-    justify-content: flex-end;
-  }
-}
-
 .defaultEditor {
   border: $euiBorderThin;
   border-radius: $euiSizeXS;
   margin: 0 $euiSizeXS $euiSizeXS;
+
+  &__footer {
+    margin-left: $euiSizeXS;
+  }
 }

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

@@ -66,22 +66,23 @@
           ],
         }}
       />
-      {footerItems && (
-        <EuiFlexGroup direction="row" className="defaultEditor__footer">
-          <EuiFlexGroup direction="row">
+      <div className="defaultEditor__footer">
+        {footerItems && (
+          <EuiFlexGroup direction="row" alignItems="center">
             {footerItems.start?.map((item) => (
-              <EuiFlexItem grow={false} color="red" className="defaultEditor__footerItem">
+              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
                 {item}
               </EuiFlexItem>
             ))}
-          </EuiFlexGroup>
-          <EuiFlexGroup direction="row" className="defaultEditor__footerItem__end">
+            <EuiFlexItem grow />
             {footerItems.end?.map((item) => (
-              <EuiFlexItem grow={false}>{item}</EuiFlexItem>
+              <EuiFlexItem grow={false} className="defaultEditor__footerItem">
+                {item}
+              </EuiFlexItem>
             ))}
           </EuiFlexGroup>
-        </EuiFlexGroup>
-      )}
+        )}
+      </div>
     </div>
   );
 };

src/plugins/data/public/ui/query_editor/editors/shared.tsx

@@ -67,7 +67,7 @@
   provideCompletionItems,
   prepend,
 }) => (
-  <div className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout--compressed osdQueryBar__wrap">
+  <div className="euiFormControlLayout euiFormControlLayout--group osdQueryBar__wrap">
     {prepend}
     <div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
       <CodeEditor