[Discover 2.0] UI Fixes (#7885)

* [Discover 2.0] UI Fixes Signed-off-by: Ashwin P Chandran <[email protected]> * minor fixes Signed-off-by: Ashwin P Chandran <[email protected]> * fix test failures Signed-off-by: Ashwin P Chandran <[email protected]> * fix test Signed-off-by: Ashwin P Chandran <[email protected]> * fix bootstrap Signed-off-by: Ashwin P Chandran <[email protected]> --------- Signed-off-by: Ashwin P Chandran <[email protected]> (cherry picked from commit eefbdfd) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Aug 28, 2024 · d3b1e52 · d3b1e52
1 parent abed5ba
commit d3b1e52
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 65 deletions.
diff --git a/docs/openapi/README.md b/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
diff --git a/src/core/public/overlays/modal/modal_service.tsx b/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;

diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_configurator.scss
@@ -0,0 +1,3 @@
+.datasetConfigurator {
+  height: 600px;
+}
diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/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;
+  }
 }
diff --git a/src/plugins/data/public/ui/dataset_selector/_index.scss b/src/plugins/data/public/ui/dataset_selector/_index.scss
@@ -1,2 +1,3 @@
 @import "./dataset_explorer";
 @import "./dataset_selector";
+@import "./dataset_configurator";
diff --git a/src/plugins/data/public/ui/dataset_selector/configurator.tsx b/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',

diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_explorer.tsx b/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>

diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/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>
   );
 };
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/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;

diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/_default_editor.scss b/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;
+  }
 }
diff --git a/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx b/src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx
@@ -66,22 +66,23 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
           ],
         }}
       />
-      {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>
   );
 };

diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -67,7 +67,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   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