refactor: density and consistency changes for discover and query bar (#…

…7299) * refactor: density and consistency changes for discover and query ba --------- Signed-off-by: Viraj Sanghvi <virajs@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Jul 19, 2024 · 54cdf23 · 54cdf23
1 parent 5741fd7
commit 54cdf23
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 20 deletions.
diff --git a/changelogs/fragments/7299.yml b/changelogs/fragments/7299.yml
@@ -0,0 +1,2 @@
+refactor:
+- Density and consistency changes for discover and query bar ([#7299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7299))
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -32,10 +32,8 @@
 }
 
 .globalFilterGroup__branch {
-  padding: $euiSizeS $euiSizeM 0 0;
-  background-repeat: no-repeat;
-  background-position: $euiSizeM ($euiSizeS * -1);
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+  // matches inline #GlobalFilterGroup height and same size as add filter button + padding to vertically center
+  line-height: 40px;
 }
 
 .globalFilterGroup__wrapper {

diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@@ -83,7 +83,7 @@
 }
 
 .globalFilterItem__editorForm {
-  padding: $euiSizeM;
+  padding: $euiSizeS;
 }
 
 .globalFilterItem__popover,

diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -110,15 +110,15 @@ function FilterBarUI(props: Props) {
 
     const button = (
       <EuiButtonEmpty
-        size="xs"
+        size="s"
         onClick={() => setIsAddFilterPopoverOpen(true)}
         data-test-subj="addFilter"
         aria-label={i18n.translate('data.filter.filterBar.addFilterButtonLabel', {
           defaultMessage: 'Add filter',
         })}
         className="globalFilterBar__addButton"
+        iconType="plusInCircle"
       >
-        +{' '}
         <FormattedMessage
           id="data.filter.filterBar.addFilterButtonLabel"
           defaultMessage="Add filter"

diff --git a/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx b/src/plugins/data/public/ui/filter_bar/filter_editor/index.tsx
@@ -108,7 +108,7 @@ class FilterEditorUI extends Component<Props, State> {
   public render() {
     return (
       <div>
-        <EuiPopoverTitle>
+        <EuiPopoverTitle paddingSize="s">
           <EuiFlexGroup alignItems="baseline" responsive={false}>
             <EuiFlexItem>
               <FormattedMessage

diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -34,7 +34,7 @@
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
   padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
-  transform: translateY(-2px) translateX(-1px);
+  transform: translateY(-1px) translateX(-1px);
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;

diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_flyout.tsx
@@ -52,7 +52,9 @@ export function DataGridFlyout({
       <EuiFlyoutBody>
         <EuiFlexGroup direction="column">
           <EuiFlexItem>
-            <DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
+            <EuiText size="s">
+              <DocViewerLinks hit={hit} indexPattern={indexPattern} columns={columns} />
+            </EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
             <DocViewer

diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -1,3 +1,5 @@
+$osdDocTableCellPadding: calc($ouiSizeM / 2); // corresponds to DataGrid medium cellPadding (6px)
+
 .osdDocTable__detailsParent {
   border-top: none !important;
 }
@@ -8,7 +10,7 @@
 }
 
 .osd-table td.osdDocTableCell__toggleDetails {
-  padding: 5px 0 0 4px;
+  padding: 4px 0 0 4px;
 }
 
 /**
@@ -27,7 +29,7 @@
 
     // Vertically align the button group with the first line of text
     // 8px is set by .table and 2em is the line-height
-    top: calc(2em / 2 + 8px);
+    top: calc(2em / 2 + $osdDocTableCellPadding);
     transform: translateY(-50%);
 
     // Stick it to the right but use the padding of the container to distance it from the edge (below)
@@ -83,6 +85,13 @@
   }
 }
 
+// nested for specificity
+.osd-table {
+  .osdDocTableCell {
+    padding: $osdDocTableCellPadding;
+  }
+}
+
 .osdDocTableCell__source {
   .truncate-by-height {
     margin-top: -1.5px;

diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss
@@ -1,6 +1,11 @@
 .osdDocTableHeader {
   white-space: nowrap;
   text-align: left;
+
+  // nested for specificity
+  .docTableHeaderField {
+    padding: calc($ouiSizeM / 2); // corresponds to DataGrid medium cellPadding
+  }
 }
 
 .osdDocTableHeader button {

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_row.tsx
@@ -144,7 +144,7 @@ const TableRowUI = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <h4
-              className="euiTitle euiTitle--xsmall"
+              className="euiTitle euiTitle--xxsmall"
               i18n-id="discover.docTable.tableRow.detailHeading"
               i18n-default-message="Expanded document"
             >

diff --git a/...public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap b/...public/application/components/json_code_block/__snapshots__/json_code_block.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/json_code_block/json_code_block.tsx b/src/plugins/discover/public/application/components/json_code_block/json_code_block.tsx
@@ -39,7 +39,7 @@ export function JsonCodeBlock({ hit }: DocViewRenderProps) {
     defaultMessage: 'Read only JSON view of an opensearch document',
   });
   return (
-    <EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s">
+    <EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s" fontSize="s">
       {stringify(hit, null, 2)}
     </EuiCodeBlock>
   );

diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -2,6 +2,8 @@
   width: 100%;
 
   .euiButtonEmpty__content {
+    font-size: $euiFontSizeXS;
+    font-weight: $euiFontWeightSemiBold;
     justify-content: flex-end;
   }
 }

diff --git a/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx b/src/plugins/discover/public/application/components/top_nav/get_top_nav_links.tsx
@@ -241,7 +241,7 @@ export const getTopNavLinks = (
     }),
     run() {
       inspector.open(inspectorAdapters, {
-        title: savedSearch?.title,
+        title: savedSearch?.title || undefined,
       });
     },
   };

diff --git a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
@@ -36,6 +36,7 @@ import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiPopover,
+  EuiText,
   EuiToolTip,
 } from '@elastic/eui';
 import { InspectorViewDescription } from '../types';
@@ -111,11 +112,13 @@ export class InspectorViewChooser extends Component<Props, State> {
   renderSingleView() {
     return (
       <EuiToolTip position="bottom" content={this.props.selectedView.help}>
-        <FormattedMessage
-          id="inspector.view"
-          defaultMessage="View: {viewName}"
-          values={{ viewName: this.props.selectedView.title }}
-        />
+        <EuiText size="s">
+          <FormattedMessage
+            id="inspector.view"
+            defaultMessage="View: {viewName}"
+            values={{ viewName: this.props.selectedView.title }}
+          />
+        </EuiText>
       </EuiToolTip>
     );
   }