ui: Added test ids for more components (#5927)

* Added test ids for more components

* Reverted back a id removal

* [pre-commit.ci lite] apply automatic fixes

* Linter fixes

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/shared/components/src/Select/index.tsx

@@ -50,6 +50,7 @@ const Select = ({
   icon,
   id,
   hideCaretDropdown,
+  flyoutTestId,
   ...props
 }: {
   items: SelectItem[];
@@ -64,6 +65,7 @@ const Select = ({
   icon?: JSX.Element;
   id?: string;
   hideCaretDropdown?: boolean;
+  flyoutTestId?: string;
 } & React.HTMLAttributes<HTMLButtonElement>): JSX.Element => {
   const selection = items.find(v => v.key === selectedKey) ?? {
     key: selectedKey,
@@ -120,6 +122,7 @@ const Select = ({
               className={cx(
                 'absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm'
               )}
+              data-testid={flyoutTestId}
             >
               {loading === true ? (
                 <div className="w-[270px]">{loader}</div>

ui/packages/shared/profile/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -13,6 +13,8 @@
 
 import Select from 'react-select';
 
+import {testId} from '@parca/test-utils';
+
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
 
 interface LabelOption {
@@ -28,20 +30,30 @@ interface Props {
 
 const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" {...testId('GROUP_BY_CONTAINER')}>
       <div className="flex items-center justify-between">
-        <label className="text-sm">Group by</label>
+        <label className="text-sm" {...testId('GROUP_BY_LABEL')}>
+          Group by
+        </label>
       </div>
 
       <Select<LabelOption, true>
-        id="h-group-by-labels-selector"
         isMulti
         defaultMenuIsOpen={false}
         defaultValue={undefined}
         name="labels"
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
+        menuPortalTarget={document.body}
+        components={{
+          // eslint-disable-next-line react/prop-types
+          MenuList: ({children, innerProps}) => (
+            <div {...testId('GROUP_BY_SELECT_FLYOUT')} {...innerProps}>
+              {children}
+            </div>
+          ),
+        }}
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}

ui/packages/shared/profile/src/ProfileView/components/ProfileFilters/index.tsx

@@ -17,6 +17,7 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {Button, Input, Select, type SelectItem} from '@parca/components';
+import {testId} from '@parca/test-utils';
 
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 import {getPresetByKey, getPresetsForProfileType, isPresetKey} from './filterPresets';
@@ -204,7 +205,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
   const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
 
   return (
-    <div className="flex gap-2 w-full items-start">
+    <div className="flex gap-2 w-full items-start" {...testId('PROFILE_FILTERS_CONTAINER')}>
       <div className="flex-1 flex flex-wrap gap-2">
         {filtersToRender.map(filter => {
           const isNumberField = filter.field === 'address' || filter.field === 'line_number';
@@ -218,6 +219,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                 selectedKey={filter.type}
                 placeholder="Select Filter"
                 disabled={readOnly}
+                {...testId('FILTER_TYPE_SELECT')}
+                flyoutTestId="filter-type-select-flyout"
                 onSelection={key => {
                   // Check if this is a preset selection
                   if (isPresetKey(key)) {
@@ -266,6 +269,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_FIELD_SELECT')}
+                    flyoutTestId="filter-field-select-flyout"
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
                       const isNewFieldNumber = newField === 'address' || newField === 'line_number';
@@ -292,6 +297,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_MATCH_TYPE_SELECT')}
+                    flyoutTestId="filter-match-type-select-flyout"
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
                     }
@@ -309,13 +316,15 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     onChange={e => updateFilter(filter.id, {value: e.target.value})}
                     onKeyDown={handleKeyDown}
                     className="rounded-none w-36 text-sm focus:outline-1"
+                    {...testId('FILTER_VALUE_INPUT')}
                   />
                 </>
               )}
 
               {!readOnly && (
                 <Button
                   variant="neutral"
+                  {...testId('FILTER_REMOVE_BUTTON')}
                   onClick={() => {
                     // If we're displaying local filters and this is the last one, reset everything
                     if (localFilters.length > 0 && localFilters.length === 1) {
@@ -345,13 +354,23 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
         })}
 
         {!readOnly && localFilters.length > 0 && (
-          <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="p-3 h-[38px]"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
         )}
 
         {!readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
-          <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="flex items-center gap-2"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
           </Button>
@@ -364,6 +383,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
           onClick={onApplyFilters}
           disabled={!hasUnsavedChanges || !localFilters.some(isFilterComplete)}
           className={cx('flex items-center gap-2 sticky top-0')}
+          {...testId('APPLY_FILTERS_BUTTON')}
         >
           <span>Apply</span>
         </Button>

ui/packages/shared/test-utils/src/test-ids.ts

@@ -87,6 +87,24 @@ export const TEST_IDS = {
   FLAMEGRAPH_CONTAINER: 'flamegraph-container',
   FLAMEGRAPH_RESET_BUTTON: 'flamegraph-reset-button',
 
+  // Profile Filters
+  PROFILE_FILTERS_CONTAINER: 'profile-filters-container',
+  FILTER_TYPE_SELECT: 'filter-type-select',
+  FILTER_TYPE_SELECT_FLYOUT: 'filter-type-select-flyout',
+  FILTER_FIELD_SELECT: 'filter-field-select',
+  FILTER_FIELD_SELECT_FLYOUT: 'filter-field-select-flyout',
+  FILTER_MATCH_TYPE_SELECT: 'filter-match-type-select',
+  FILTER_MATCH_TYPE_SELECT_FLYOUT: 'filter-match-type-select-flyout',
+  FILTER_VALUE_INPUT: 'filter-value-input',
+  FILTER_REMOVE_BUTTON: 'filter-remove-button',
+  ADD_FILTER_BUTTON: 'add-filter-button',
+  APPLY_FILTERS_BUTTON: 'apply-filters-button',
+
+  // Group By Controls
+  GROUP_BY_CONTAINER: 'group-by-container',
+  GROUP_BY_LABEL: 'group-by-label',
+  GROUP_BY_SELECT_FLYOUT: 'group-by-select-flyout',
+
   // Common Interactive Elements
   SELECT_DROPDOWN: 'select-dropdown',
   SELECT_OPTION: 'select-option',