ref(new-widget-builder-experence): Update dropdown menu height & remove sticky footer (#33493)

static/app/components/events/searchBar.tsx

@@ -33,6 +33,10 @@ export type SearchBarProps = Omit<React.ComponentProps<typeof SmartSearchBar>, '
   tags: TagCollection;
   fields?: Readonly<Field[]>;
   includeSessionTagsValues?: boolean;
+  /**
+   * Used to define the max height of the menu in px.
+   */
+  maxMenuHeight?: number;
   maxSearchItems?: React.ComponentProps<typeof SmartSearchBar>['maxSearchItems'];
   omitTags?: string[];
   projectIds?: number[] | Readonly<number[]>;
@@ -47,6 +51,7 @@ function SearchBar(props: SearchBarProps) {
     fields,
     projectIds,
     includeSessionTagsValues,
+    maxMenuHeight,
   } = props;
 
   const api = useApi();
@@ -140,7 +145,7 @@ function SearchBar(props: SearchBarProps) {
               maxSearchItems={maxSearchItems}
               excludeEnvironment
               dropdownClassName={css`
-                max-height: 300px;
+                max-height: ${maxMenuHeight ?? 300}px;
                 overflow-y: auto;
               `}
               {...props}

static/app/views/dashboardsV2/widgetBuilder/buildSteps/filterResultsStep/eventsSearchBar.tsx

@@ -4,6 +4,10 @@ import SearchBar, {SearchBarProps} from 'sentry/components/events/searchBar';
 import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {Organization} from 'sentry/types';
 import {WidgetQuery} from 'sentry/views/dashboardsV2/types';
+import {
+  MAX_MENU_HEIGHT,
+  MAX_SEARCH_ITEMS,
+} from 'sentry/views/dashboardsV2/widgetBuilder/utils';
 
 interface Props {
   onBlur: SearchBarProps['onBlur'];
@@ -31,6 +35,8 @@ export function EventsSearchBar({
       onBlur={onBlur}
       useFormWrapper={false}
       maxQueryLength={MAX_QUERY_LENGTH}
+      maxSearchItems={MAX_SEARCH_ITEMS}
+      maxMenuHeight={MAX_MENU_HEIGHT}
     />
   );
 }

static/app/views/dashboardsV2/widgetBuilder/buildSteps/filterResultsStep/issuesSearchBar.tsx

@@ -1,3 +1,4 @@
+import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {fetchTagValues} from 'sentry/actionCreators/tags';
@@ -7,6 +8,10 @@ import {getUtcDateString} from 'sentry/utils/dates';
 import useApi from 'sentry/utils/useApi';
 import withIssueTags from 'sentry/utils/withIssueTags';
 import {WidgetQuery} from 'sentry/views/dashboardsV2/types';
+import {
+  MAX_MENU_HEIGHT,
+  MAX_SEARCH_ITEMS,
+} from 'sentry/views/dashboardsV2/widgetBuilder/utils';
 import IssueListSearchBar from 'sentry/views/issueList/searchBar';
 
 interface Props {
@@ -42,18 +47,27 @@ function IssuesSearchBarContainer({
   }
 
   return (
-    <StyledIssueListSearchBar
-      searchSource={searchSource}
-      organization={organization}
-      query={query.conditions || ''}
-      sort=""
-      onSearch={onSearch}
-      onBlur={onBlur}
-      excludeEnvironment
-      supportedTags={tags}
-      tagValueLoader={tagValueLoader}
-      onSidebarToggle={() => undefined}
-    />
+    <ClassNames>
+      {({css}) => (
+        <StyledIssueListSearchBar
+          searchSource={searchSource}
+          organization={organization}
+          query={query.conditions || ''}
+          sort=""
+          onSearch={onSearch}
+          onBlur={onBlur}
+          excludeEnvironment
+          supportedTags={tags}
+          tagValueLoader={tagValueLoader}
+          onSidebarToggle={() => undefined}
+          maxSearchItems={MAX_SEARCH_ITEMS}
+          dropdownClassName={css`
+            max-height: ${MAX_MENU_HEIGHT}px;
+            overflow-y: auto;
+          `}
+        />
+      )}
+    </ClassNames>
   );
 }
 

static/app/views/dashboardsV2/widgetBuilder/buildSteps/filterResultsStep/releaseSearchBar.tsx

@@ -9,6 +9,10 @@ import {MetricsTagValue, Organization, Tag} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
 import {useMetricsContext} from 'sentry/utils/useMetricsContext';
 import {WidgetQuery} from 'sentry/views/dashboardsV2/types';
+import {
+  MAX_MENU_HEIGHT,
+  MAX_SEARCH_ITEMS,
+} from 'sentry/views/dashboardsV2/widgetBuilder/utils';
 
 const SEARCH_SPECIAL_CHARS_REGEXP = new RegExp(
   `^${NEGATION_OPERATOR}|\\${SEARCH_WILDCARD}`,
@@ -65,12 +69,13 @@ export function ReleaseSearchBar({orgSlug, query, projectIds, onSearch, onBlur}:
           prepareQuery={prepareQuery}
           excludeEnvironment
           dropdownClassName={css`
-            max-height: 300px;
+            max-height: ${MAX_MENU_HEIGHT ?? 300}px;
             overflow-y: auto;
           `}
           onSearch={onSearch}
           onBlur={onBlur}
           maxQueryLength={MAX_QUERY_LENGTH}
+          maxSearchItems={MAX_SEARCH_ITEMS}
           searchSource="widget_builder"
           query={query.conditions}
           hasRecentSearches

static/app/views/dashboardsV2/widgetBuilder/footer.tsx

@@ -68,7 +68,4 @@ const Actions = styled(ButtonBar)`
 const Wrapper = styled('div')`
   background: ${p => p.theme.background};
   border-top: 1px solid ${p => p.theme.gray200};
-  position: sticky;
-  bottom: 0;
-  z-index: ${p => p.theme.zIndex.initial};
 `;

static/app/views/dashboardsV2/widgetBuilder/utils.tsx

@@ -288,6 +288,12 @@ export function getMetricFields(queries: WidgetQuery[]) {
   }, [] as string[]);
 }
 
+// Used to limit the number of results of the "filter your results" fields dropdown
+export const MAX_SEARCH_ITEMS = 5;
+
+// Used to set the max height of the smartSearchBar menu
+export const MAX_MENU_HEIGHT = 250;
+
 // Any function/field choice for Big Number widgets is legal since the
 // data source is from an endpoint that is not timeseries-based.
 // The function/field choice for World Map widget will need to be numeric-like.

static/app/views/issueList/searchBar.tsx

@@ -55,6 +55,10 @@ type Props = React.ComponentProps<typeof SmartSearchBar> & {
   organization: Organization;
   sort: string;
   tagValueLoader: TagValueLoader;
+  /**
+   * Used to define the max height of the menu in px.
+   */
+  maxMenuHeight?: number;
   projectIds?: string[];
   savedSearch?: SavedSearch;
 };