[Explore] Fit and finish (#10871)

* Recent queries label change

Signed-off-by: Paul Sebastian <[email protected]>

* remove language tooltip and ppl language ref

Signed-off-by: Paul Sebastian <[email protected]>

* saved queries dropdown font size reduction for explore

Signed-off-by: Paul Sebastian <[email protected]>

* open saved search panel title change

Signed-off-by: Paul Sebastian <[email protected]>

* update jest tests

Signed-off-by: Paul Sebastian <[email protected]>

* Changeset file for PR #10871 created/updated

* update cypress tests to remove language tooltip

Signed-off-by: Paul Sebastian <[email protected]>

* discover fields header styling update

Signed-off-by: Paul Sebastian <[email protected]>

* change open saved search to select saved search

Signed-off-by: Paul Sebastian <[email protected]>

---------

Signed-off-by: Paul Sebastian <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: paulstn

changelogs/fragments/10871.yml

@@ -0,0 +1,2 @@
+fix:
+- Explore fit and finish around font and sizing ([#10871](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10871))

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/02/language_specific_display.spec.js

@@ -14,10 +14,7 @@ import {
   getRandomizedWorkspaceName,
   setDatePickerDatesAndSearchIfRelevant,
 } from '../../../../../../utils/apps/explore/shared';
-import {
-  generateDisplayTestConfiguration,
-  getLanguageReferenceTestText,
-} from '../../../../../../utils/apps/explore/language_specific_display';
+import { generateDisplayTestConfiguration } from '../../../../../../utils/apps/explore/language_specific_display';
 import { prepareTestSuite } from '../../../../../../utils/helpers';
 
 const workspaceName = getRandomizedWorkspaceName();
@@ -82,12 +79,6 @@ export const runDisplayTests = () => {
           config.sort ? 'exist' : 'not.exist'
         );
 
-        // testing the language information popup button
-        cy.getElementByTestId('exploreLanguageReference').click();
-        cy.get('.euiPopoverTitle').contains('Syntax options').should('be.visible');
-        cy.get('.euiPanel').contains(getLanguageReferenceTestText(config.language));
-        cy.getElementByTestId('exploreLanguageReference').click();
-
         // testing the saved queries management button
         cy.getElementByTestId('queryPanelFooterSaveQueryButton').click();
         cy.getElementByTestId('saved-query-management-popover').should('be.visible');

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/04/queries_ui.spec.js

@@ -70,6 +70,7 @@ interface Props {
   closeMenuPopover: () => void;
   saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
   saveQueryIsDisabled?: boolean;
+  textSize?: React.ComponentProps<typeof EuiText>['size'];
 }
 
 export function SavedQueryManagementComponent({
@@ -84,6 +85,7 @@ export function SavedQueryManagementComponent({
   useNewSavedQueryUI,
   saveQuery,
   saveQueryIsDisabled,
+  textSize = 's',
 }: Props) {
   const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
   const [count, setTotalCount] = useState(0);
@@ -243,9 +245,11 @@ export function SavedQueryManagementComponent({
               );
             }}
           >
-            {i18n.translate('data.saved_query_management.save_query_item_label', {
-              defaultMessage: 'Save query',
-            })}
+            <EuiText size={textSize}>
+              {i18n.translate('data.saved_query_management.save_query_item_label', {
+                defaultMessage: 'Save query',
+              })}
+            </EuiText>
           </EuiButtonEmpty>
         </div>
         <div>
@@ -267,9 +271,11 @@ export function SavedQueryManagementComponent({
               );
             }}
           >
-            {i18n.translate('data.saved_query_management.open_query_item_label', {
-              defaultMessage: 'Open query',
-            })}
+            <EuiText size={textSize}>
+              {i18n.translate('data.saved_query_management.open_query_item_label', {
+                defaultMessage: 'Open query',
+              })}
+            </EuiText>
           </EuiButtonEmpty>
         </div>
       </EuiListGroup>

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -3,4 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './ppl_reference';
+.exploreSidebar__headerTitle {
+  &__text {
+    font-weight: 600;
+  }
+}

src/plugins/explore/public/application/components/recent_query_selector.tsx

@@ -7,6 +7,7 @@ import React, { useCallback } from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiText } from '@elastic/eui';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import './discover_field_header.scss';
 
 export interface IDiscoverFieldHeaderProps {
   onCollapse?: () => void;
@@ -40,8 +41,8 @@ export function DiscoverFieldHeader({ onCollapse }: IDiscoverFieldHeaderProps) {
   return (
     <EuiFlexGroup responsive={false} gutterSize="xs">
       <EuiFlexItem>
-        <EuiText size="xs">
-          <h5>{fieldsHeaderText}</h5>
+        <EuiText size="s" className="exploreSidebar__headerTitle__text">
+          {fieldsHeaderText}
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>