[Explore] Update recent queries and saved queries dropdown styling (#10882)

paulstn · opensearch-changeset-bot[bot] · web-flow · commit ace1ca2a4df0 · 2025-11-07T12:29:41.000-08:00
* allow for changeable classname on recent queries Signed-off-by: Paul Sebastian <paulstn@amazon.com> * Changeset file for PR #10882 created/updated * put patterns tab in experimental Signed-off-by: Paul Sebastian <paulstn@amazon.com> * update saved queries dropdown padding Signed-off-by: Paul Sebastian <paulstn@amazon.com> * Changeset file for PR #10882 created/updated * remove unnecessary comment Signed-off-by: Paul Sebastian <paulstn@amazon.com> --------- Signed-off-by: Paul Sebastian <paulstn@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
diff --git a/changelogs/fragments/10882.yml b/changelogs/fragments/10882.yml
@@ -0,0 +1,2 @@
+fix:
+- Recent queries and saved queries dropdown styling ([#10882](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10882))
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx b/src/plugins/data/public/query/query_string/language_service/lib/recent_query.tsx
@@ -16,6 +16,7 @@ export function RecentQueriesTable({
   queryString,
   onClickRecentQuery,
   isVisible,
+  className,
 }: RecentQueriesTableProps) {
   const currentLanguage = queryString.getQuery().language;
   const [recentQueries, setRecentQueries] = useState<RecentQueryItem[]>(
@@ -95,7 +96,7 @@ export function RecentQueriesTable({
       columns={tableColumns}
       rowProps={getRowProps}
       cellProps={getCellProps}
-      className="recentQuery__table"
+      className={className || 'recentQuery__table'}
       data-test-subj="recentQueryTable"
       tableLayout="fixed"
       compressed
diff --git a/src/plugins/data/public/query/query_string/language_service/types.ts b/src/plugins/data/public/query/query_string/language_service/types.ts
@@ -31,6 +31,7 @@ export interface RecentQueriesTableProps {
   queryString: QueryStringContract;
   onClickRecentQuery: (query: Query, timeRange?: TimeRange) => void;
   isVisible: boolean;
+  className?: string;
 }
 
 export interface EditorEnhancements {
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -223,9 +223,10 @@ export function SavedQueryManagementComponent({
       className="osdSavedQueryManagement__popover"
       data-test-subj="saved-query-management-popover"
     >
-      <EuiListGroup>
-        <div>
+      <EuiListGroup className="osdSavedQueryManagement__newUIList">
+        <div className="osdSavedQueryManagement__newUIItem">
           <EuiButtonEmpty
+            className="osdSavedQueryManagement__newUIButton"
             data-test-subj="saved-query-management-save-button"
             disabled={saveQueryIsDisabled}
             iconType="save"
@@ -252,8 +253,9 @@ export function SavedQueryManagementComponent({
             </EuiText>
           </EuiButtonEmpty>
         </div>
-        <div>
+        <div className="osdSavedQueryManagement__newUIItem">
           <EuiButtonEmpty
+            className="osdSavedQueryManagement__newUIButton"
             data-test-subj="saved-query-management-open-button"
             iconType="folderOpen"
             onClick={() => {
diff --git a/src/plugins/explore/public/application/register_tabs.ts b/src/plugins/explore/public/application/register_tabs.ts
@@ -38,6 +38,8 @@ export const registerBuiltInTabs = (
   services: ExploreServices,
   registryFlavor: ExploreFlavor
 ) => {
+  const isExperimentalEnabled = services.uiSettings.get(ENABLE_EXPERIMENTAL_SETTING, false);
+
   // Register Logs Tab
   const logsTabDefinition: TabDefinition = {
     id: EXPLORE_LOGS_TAB_ID,
@@ -52,89 +54,91 @@ export const registerBuiltInTabs = (
   tabRegistry.registerTab(logsTabDefinition);
 
   // Register Patterns Tab
-  tabRegistry.registerTab({
-    id: EXPLORE_PATTERNS_TAB_ID,
-    label: 'Patterns',
-    flavor: [ExploreFlavor.Logs, ExploreFlavor.Metrics],
-    order: 15,
-    supportedLanguages: [EXPLORE_DEFAULT_LANGUAGE],
+  if (isExperimentalEnabled) {
+    tabRegistry.registerTab({
+      id: EXPLORE_PATTERNS_TAB_ID,
+      label: 'Patterns',
+      flavor: [ExploreFlavor.Logs, ExploreFlavor.Metrics],
+      order: 15,
+      supportedLanguages: [EXPLORE_DEFAULT_LANGUAGE],
 
-    prepareQuery: (query) => {
-      const state = services.store.getState();
+      prepareQuery: (query) => {
+        const state = services.store.getState();
 
-      // Get the selected patterns field from the Redux state
-      let patternsField = state.tab.patterns.patternsField;
+        // Get the selected patterns field from the Redux state
+        let patternsField = state.tab.patterns.patternsField;
 
-      const preparedQuery = getQueryWithSource(query);
-      if (!patternsField) {
-        try {
-          patternsField = findDefaultPatternsField(services);
-        } catch {
-          return preparedQuery.query;
+        const preparedQuery = getQueryWithSource(query);
+        if (!patternsField) {
+          try {
+            patternsField = findDefaultPatternsField(services);
+          } catch {
+            return preparedQuery.query;
+          }
         }
-      }
 
-      if (state.tab.patterns.usingRegexPatterns)
-        return regexPatternQuery(preparedQuery.query, patternsField);
-
-      return brainPatternQuery(preparedQuery.query, patternsField);
-    },
-
-    handleQueryError: (error, cacheKey) => {
-      const state = services.store.getState();
-
-      /**
-       * The below conditional is checking for the error returned when attempting to use a BRAIN
-       * query on an older version of the querying engine. If this error appears, an attempt is made
-       * to switch over to a patterns query which works on older versions of the querying engine.
-       * A redux state is set to inform the UI that this older query is being utilized
-       * Finally, the query is retriggered.
-       * The return value being true will prevent the standard error from dispatching, keeping the page clear
-       */
-      if (
-        error &&
-        error.status &&
-        error.status === 400 &&
-        error.error.details &&
-        error.error.details.startsWith(BRAIN_QUERY_OLD_ENGINE_ERROR_PREFIX)
-      ) {
-        // can check further details of err if needed
-        let patternsField = state.tab.patterns.patternsField;
-        if (!patternsField) {
-          patternsField = findDefaultPatternsField(services);
+        if (state.tab.patterns.usingRegexPatterns)
+          return regexPatternQuery(preparedQuery.query, patternsField);
+
+        return brainPatternQuery(preparedQuery.query, patternsField);
+      },
+
+      handleQueryError: (error, cacheKey) => {
+        const state = services.store.getState();
+
+        /**
+         * The below conditional is checking for the error returned when attempting to use a BRAIN
+         * query on an older version of the querying engine. If this error appears, an attempt is made
+         * to switch over to a patterns query which works on older versions of the querying engine.
+         * A redux state is set to inform the UI that this older query is being utilized
+         * Finally, the query is retriggered.
+         * The return value being true will prevent the standard error from dispatching, keeping the page clear
+         */
+        if (
+          error &&
+          error.status &&
+          error.status === 400 &&
+          error.error.details &&
+          error.error.details.startsWith(BRAIN_QUERY_OLD_ENGINE_ERROR_PREFIX)
+        ) {
+          // can check further details of err if needed
+          let patternsField = state.tab.patterns.patternsField;
+          if (!patternsField) {
+            patternsField = findDefaultPatternsField(services);
+          }
+          const query = state.query;
+          const preparedQuery = getQueryWithSource(query);
+          services.store.dispatch(setUsingRegexPatterns(true));
+          services.store.dispatch(
+            executeTabQuery({
+              services,
+              cacheKey: regexPatternQuery(preparedQuery.query, patternsField),
+              queryString: query.query,
+            })
+          );
+
+          // set the old cacheKey to uninitialized to finalize loading, our new tab query has new cacheKey
+          services.store.dispatch(
+            setIndividualQueryStatus({
+              cacheKey,
+              status: {
+                status: QueryExecutionStatus.UNINITIALIZED,
+                startTime: undefined,
+                elapsedMs: undefined,
+                error: undefined,
+              },
+            })
+          );
+
+          return true;
         }
-        const query = state.query;
-        const preparedQuery = getQueryWithSource(query);
-        services.store.dispatch(setUsingRegexPatterns(true));
-        services.store.dispatch(
-          executeTabQuery({
-            services,
-            cacheKey: regexPatternQuery(preparedQuery.query, patternsField),
-            queryString: query.query,
-          })
-        );
-
-        // set the old cacheKey to uninitialized to finalize loading, our new tab query has new cacheKey
-        services.store.dispatch(
-          setIndividualQueryStatus({
-            cacheKey,
-            status: {
-              status: QueryExecutionStatus.UNINITIALIZED,
-              startTime: undefined,
-              elapsedMs: undefined,
-              error: undefined,
-            },
-          })
-        );
-
-        return true;
-      }
-
-      return false;
-    },
 
-    component: PatternsTab,
-  });
+        return false;
+      },
+
+      component: PatternsTab,
+    });
+  }
 
   // Register Visualizations Tab
   tabRegistry.registerTab({
@@ -155,7 +159,6 @@ export const registerBuiltInTabs = (
   });
 
   // Register Field Stats Tab
-  const isExperimentalEnabled = services.uiSettings.get(ENABLE_EXPERIMENTAL_SETTING, false);
   if (isExperimentalEnabled) {
     tabRegistry.registerTab({
       id: EXPLORE_FIELD_STATS_TAB_ID,
diff --git a/src/plugins/explore/public/components/query_panel/query_panel_widgets/recent_queries_button/recent_queries_button.tsx b/src/plugins/explore/public/components/query_panel/query_panel_widgets/recent_queries_button/recent_queries_button.tsx
@@ -83,6 +83,7 @@ export const RecentQueriesButton = () => {
         isVisible={popoverIsOpen}
         queryString={services.data.query.queryString}
         onClickRecentQuery={onClick}
+        className="exploreRecentQueriesButton__table"
       />
     </EuiPopover>
   );
diff --git a/src/plugins/explore/public/components/query_panel/query_panel_widgets/save_query/save_query.scss b/src/plugins/explore/public/components/query_panel/query_panel_widgets/save_query/save_query.scss
@@ -7,3 +7,21 @@
 .exploreSaveQuery {
   @include exploreQueryPanelButton;
 }
+
+.exploreSaveQuery__popoverContent {
+  .osdSavedQueryManagement__newUIList {
+    padding: 0;
+  }
+
+  .osdSavedQueryManagement__newUIItem {
+    padding: 0;
+    margin: 0;
+  }
+
+  .osdSavedQueryManagement__newUIButton {
+    padding: $euiSizeS;
+    width: 100%;
+    text-align: left;
+    justify-content: flex-start;
+  }
+}
diff --git a/src/plugins/explore/public/components/query_panel/query_panel_widgets/save_query/save_query.tsx b/src/plugins/explore/public/components/query_panel/query_panel_widgets/save_query/save_query.tsx
@@ -184,6 +184,7 @@ export const SaveQueryButton = () => {
       closePopover={closePopover}
       anchorPosition="downCenter"
       panelPaddingSize="none"
+      panelClassName="exploreSaveQuery__popoverContent"
     >
       <SavedQueryManagementComponent
         savedQueryService={savedQueryService}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+fix:`
	`2`	`+- Recent queries and saved queries dropdown styling ([#10882](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10882))`
Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ export interface RecentQueriesTableProps {`
`31`	`31`	`queryString: QueryStringContract;`
`32`	`32`	`onClickRecentQuery: (query: Query, timeRange?: TimeRange) => void;`
`33`	`33`	`isVisible: boolean;`
	`34`	`+ className?: string;`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`export interface EditorEnhancements {`
Original file line number	Diff line number	Diff line change
`@@ -184,6 +184,7 @@ export const SaveQueryButton = () => {`
`184`	`184`	`closePopover={closePopover}`
`185`	`185`	`anchorPosition="downCenter"`
`186`	`186`	`panelPaddingSize="none"`
	`187`	`+ panelClassName="exploreSaveQuery__popoverContent"`
`187`	`188`	`>`
`188`	`189`	`<SavedQueryManagementComponent`
`189`	`190`	`savedQueryService={savedQueryService}`