ui: Add refetch support for label names in matchers UI (#5990)

yomete · web-flow · commit 022555008024 · 2025-10-10T09:26:22.000+02:00
* ui: Add refetch support for label names in matchers UI

Introduces a refetch function to the useLabelNames hook and exposes it through context, allowing the SimpleMatchers component to provide a refresh button for label name options. Also updates the Select component to use the new refetch function and adjusts styling for dark mode.

* change prop name
diff --git a/ui/packages/shared/profile/src/MatchersInput/SuggestionsList.tsx b/ui/packages/shared/profile/src/MatchersInput/SuggestionsList.tsx
@@ -19,6 +19,7 @@ import cx from 'classnames';
 import {usePopper} from 'react-popper';
 
 import {useParcaContext} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import SuggestionItem from './SuggestionItem';
 
@@ -56,6 +57,7 @@ interface Props {
   isLabelValuesLoading: boolean;
   shouldTrimPrefix: boolean;
   refetchLabelValues: () => void;
+  refetchLabelNames: () => void;
 }
 
 const LoadingSpinner = (): JSX.Element => {
@@ -64,6 +66,43 @@ const LoadingSpinner = (): JSX.Element => {
   return <div className="pt-2 pb-4">{Spinner}</div>;
 };
 
+interface RefreshButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+  title: string;
+  testId: string;
+}
+
+const RefreshButton = ({onClick, disabled, title, testId}: RefreshButtonProps): JSX.Element => {
+  return (
+    <div className="absolute w-full flex items-center justify-center bottom-0 px-3 py-2 bg-gray-50 dark:bg-gray-900">
+      <button
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick();
+        }}
+        disabled={disabled}
+        className={cx(
+          'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
+          disabled
+            ? 'cursor-wait opacity-50'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
+        )}
+        title={title}
+        type="button"
+        data-testid={testId}
+      >
+        <Icon
+          icon="system-uicons:reset"
+          className={cx('w-3 h-3 text-gray-500 dark:text-gray-400', disabled && 'animate-spin')}
+        />
+        <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
+      </button>
+    </div>
+  );
+};
+
 const transformLabelsForSuggestions = (labelNames: string, shouldTrimPrefix = false): string => {
   const trimmedLabel = shouldTrimPrefix ? labelNames.split('.').pop() ?? labelNames : labelNames;
   return trimmedLabel;
@@ -79,25 +118,38 @@ const SuggestionsList = ({
   isLabelValuesLoading,
   shouldTrimPrefix = false,
   refetchLabelValues,
+  refetchLabelNames,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const {styles, attributes} = usePopper(inputRef, popperElement, {
     placement: 'bottom-start',
   });
   const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState<number>(-1);
   const [showSuggest, setShowSuggest] = useState(true);
-  const [isRefetching, setIsRefetching] = useState(false);
+  const [isRefetchingValues, setIsRefetchingValues] = useState(false);
+  const [isRefetchingNames, setIsRefetchingNames] = useState(false);
 
-  const handleRefetch = useCallback(async () => {
-    if (isRefetching) return;
+  const handleRefetchValues = useCallback(async () => {
+    if (isRefetchingValues) return;
 
-    setIsRefetching(true);
+    setIsRefetchingValues(true);
     try {
       await refetchLabelValues();
     } finally {
-      setIsRefetching(false);
+      setIsRefetchingValues(false);
+    }
+  }, [refetchLabelValues, isRefetchingValues]);
+
+  const handleRefetchNames = useCallback(async () => {
+    if (isRefetchingNames) return;
+
+    setIsRefetchingNames(true);
+    try {
+      await refetchLabelNames();
+    } finally {
+      setIsRefetchingNames(false);
     }
-  }, [refetchLabelValues, isRefetching]);
+  }, [refetchLabelNames, isRefetchingNames]);
 
   const suggestionsLength =
     suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
@@ -227,6 +279,12 @@ const SuggestionsList = ({
     };
   }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
 
+  useEffect(() => {
+    if (suggestionsLength > 0 && focusedInput) {
+      setShowSuggest(true);
+    }
+  }, [suggestionsLength, focusedInput]);
+
   return (
     <>
       {suggestionsLength > 0 && (
@@ -247,9 +305,41 @@ const SuggestionsList = ({
               style={{width: inputRef?.offsetWidth}}
               className="absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm"
             >
-              <div className="relative pb-12">
+              <div
+                className={cx('relative', {
+                  'pb-12': suggestions.labelNames.length === 0 && suggestions.literals.length === 0,
+                })}
+              >
                 {isLabelNamesLoading ? (
                   <LoadingSpinner />
+                ) : suggestions.literals.length === 0 && suggestions.labelValues.length === 0 ? (
+                  <>
+                    {suggestions.labelNames.length === 0 ? (
+                      <div
+                        className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
+                        {...testId(TEST_IDS.SUGGESTIONS_NO_RESULTS)}
+                      >
+                        No label names found
+                      </div>
+                    ) : (
+                      suggestions.labelNames.map((l, i) => (
+                        <SuggestionItem
+                          isHighlighted={highlightedSuggestionIndex === i}
+                          onHighlight={() => setHighlightedSuggestionIndex(i)}
+                          onApplySuggestion={() => applySuggestionWithIndex(i)}
+                          onResetHighlight={() => resetHighlight()}
+                          value={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                          key={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                        />
+                      ))
+                    )}
+                    <RefreshButton
+                      onClick={() => void handleRefetchNames()}
+                      disabled={isRefetchingNames}
+                      title="Refresh label names"
+                      testId="suggestions-refresh-names-button"
+                    />
+                  </>
                 ) : (
                   <>
                     {suggestions.labelNames.map((l, i) => (
@@ -287,7 +377,7 @@ const SuggestionsList = ({
                     {suggestions.labelValues.length === 0 ? (
                       <div
                         className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
-                        data-testid="suggestions-no-results"
+                        {...testId(TEST_IDS.SUGGESTIONS_NO_RESULTS)}
                       >
                         No label values found
                       </div>
@@ -314,36 +404,12 @@ const SuggestionsList = ({
                         />
                       ))
                     )}
-                    <div className="absolute w-full flex items-center justify-center bottom-0 px-3 py-2 bg-gray-50 dark:bg-gray-800">
-                      <button
-                        onClick={e => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          void handleRefetch();
-                        }}
-                        disabled={isRefetching}
-                        className={cx(
-                          'p-1 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
-                          isRefetching
-                            ? 'cursor-wait opacity-50'
-                            : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
-                        )}
-                        title="Refresh label values"
-                        type="button"
-                        data-testid="suggestions-refresh-button"
-                      >
-                        <Icon
-                          icon="system-uicons:reset"
-                          className={cx(
-                            'w-3 h-3 text-gray-500 dark:text-gray-400',
-                            isRefetching && 'animate-spin'
-                          )}
-                        />
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
-                          Refresh results
-                        </span>
-                      </button>
-                    </div>
+                    <RefreshButton
+                      onClick={() => void handleRefetchValues()}
+                      disabled={isRefetchingValues}
+                      title="Refresh label values"
+                      testId="suggestions-refresh-values-button"
+                    />
                   </>
                 ) : (
                   suggestions.labelValues.map((l, i) => (
diff --git a/ui/packages/shared/profile/src/MatchersInput/index.tsx b/ui/packages/shared/profile/src/MatchersInput/index.tsx
@@ -46,6 +46,7 @@ export interface ILabelNamesResult {
 interface UseLabelNames {
   result: ILabelNamesResult;
   loading: boolean;
+  refetch: () => void;
 }
 
 export const useLabelNames = (
@@ -57,7 +58,7 @@ export const useLabelNames = (
 ): UseLabelNames => {
   const metadata = useGrpcMetadata();
 
-  const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
+  const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
     key: ['labelNames', profileType, match?.join(','), start, end],
     queryFn: async signal => {
       const request: LabelsRequest = {match: match !== undefined ? match : []};
@@ -77,7 +78,13 @@ export const useLabelNames = (
     },
   });
 
-  return {result: {response: data, error: error as Error}, loading: isLoading};
+  return {
+    result: {response: data, error: error as Error},
+    loading: isLoading,
+    refetch: () => {
+      void refetch();
+    },
+  };
 };
 
 interface UseLabelValues {
@@ -163,6 +170,7 @@ const MatchersInput = ({
     setCurrentLabelName,
     shouldHandlePrefixes,
     refetchLabelValues,
+    refetchLabelNames,
   } = useLabels();
 
   const value = currentQuery.matchersString();
@@ -333,9 +341,12 @@ const MatchersInput = ({
         inputRef={inputRef.current}
         runQuery={runQuery}
         focusedInput={focusedInput}
-        isLabelValuesLoading={isLabelValuesLoading && lastCompleted.type === 'literal'}
+        isLabelValuesLoading={
+          isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ','
+        }
         shouldTrimPrefix={shouldHandlePrefixes}
         refetchLabelValues={refetchLabelValues}
+        refetchLabelNames={refetchLabelNames}
       />
     </div>
   );
diff --git a/ui/packages/shared/profile/src/SimpleMatchers/Select.tsx b/ui/packages/shared/profile/src/SimpleMatchers/Select.tsx
@@ -18,6 +18,7 @@ import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
 
 import {Button, DividerWithLabel, useParcaContext} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils/dist/test-ids';
 
 export interface SelectElement {
   active: JSX.Element;
@@ -55,7 +56,7 @@ interface CustomSelectProps {
   searchable?: boolean;
   onButtonClick?: () => void;
   editable?: boolean;
-  refetchLabelValues?: () => void;
+  refetchValues?: () => void;
   showLoadingInButton?: boolean;
   hasRefreshButton?: boolean;
 }
@@ -76,7 +77,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   searchable = false,
   onButtonClick,
   editable = false,
-  refetchLabelValues,
+  refetchValues,
   showLoadingInButton = false,
   hasRefreshButton = false,
 }) => {
@@ -91,15 +92,15 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   const optionRefs = useRef<Array<HTMLElement | null>>([]);
 
   const handleRefetch = useCallback(async () => {
-    if (refetchLabelValues == null || isRefetching) return;
+    if (refetchValues == null || isRefetching) return;
 
     setIsRefetching(true);
     try {
-      await refetchLabelValues();
+      await refetchValues();
     } finally {
       setIsRefetching(false);
     }
-  }, [refetchLabelValues, isRefetching]);
+  }, [refetchValues, isRefetching]);
 
   let items: TypedSelectItem[] = [];
   if (itemsProp[0] != null && 'type' in itemsProp[0]) {
@@ -212,7 +213,10 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   const renderSelection = (selection: SelectItem | string | undefined): string | JSX.Element => {
     if (showLoadingInButton && loading === true && selectedKey === '') {
       return (
-        <span className="flex items-center gap-2" data-testid="label-value-loading-indicator">
+        <span
+          className="flex items-center gap-2"
+          {...testId(TEST_IDS.LABEL_VALUE_LOADING_INDICATOR)}
+        >
           <Icon icon="svg-spinners:ring-resize" className="w-4 h-4" />
           <span>Loading...</span>
         </span>
@@ -334,8 +338,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
                 </div>
               </div>
             )}
-            {refetchLabelValues !== undefined && loading !== true && (
-              <div className="absolute w-full bottom-0 px-3 bg-gray-50 dark:bg-gray-800">
+            {refetchValues !== undefined && loading !== true && (
+              <div className="absolute w-full flex items-center justify-center bottom-0 px-3 bg-gray-50 dark:bg-gray-900">
                 <button
                   onClick={e => {
                     e.preventDefault();
@@ -344,14 +348,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
                   }}
                   disabled={isRefetching}
                   className={cx(
-                    'p-1 flex items-center gap-1 rounded-full transition-all duration-200 w-full justify-center',
+                    'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
                     isRefetching
                       ? 'cursor-wait opacity-50'
                       : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
                   )}
                   title="Refresh label values"
                   type="button"
-                  data-testid="label-value-refresh-button"
+                  {...testId(TEST_IDS.LABEL_VALUE_REFRESH_BUTTON)}
                 >
                   <Icon
                     icon="system-uicons:reset"
@@ -369,7 +373,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
             ) : groupedFilteredItems.length === 0 ? (
               <div
                 className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
-                data-testid="label-value-no-results"
+                {...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS)}
               >
                 No values found
               </div>
diff --git a/ui/packages/shared/profile/src/SimpleMatchers/index.tsx b/ui/packages/shared/profile/src/SimpleMatchers/index.tsx
@@ -203,7 +203,12 @@ const SimpleMatchers = ({
     [setMatchersString]
   );
 
-  const {labelNameOptions, isLoading: labelNamesLoading, refetchLabelValues} = useLabels();
+  const {
+    labelNameOptions,
+    isLoading: labelNamesLoading,
+    refetchLabelValues,
+    refetchLabelNames,
+  } = useLabels();
 
   // Helper to ensure selected label name is in the options (for page load before API returns)
   const getLabelNameOptionsWithSelected = useCallback(
@@ -451,6 +456,8 @@ const SimpleMatchers = ({
             loading={labelNamesLoading}
             searchable={true}
             {...testId(TEST_IDS.LABEL_NAME_SELECT)}
+            refetchValues={refetchLabelNames}
+            hasRefreshButton={true}
           />
           <Select
             items={operatorOptions}
@@ -478,7 +485,7 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
-            refetchLabelValues={refetchLabelValues}
+            refetchValues={refetchLabelValues}
             showLoadingInButton={true}
             hasRefreshButton={true}
           />
diff --git a/ui/packages/shared/profile/src/contexts/MatchersInputLabelsContext.tsx b/ui/packages/shared/profile/src/contexts/MatchersInputLabelsContext.tsx
diff --git a/ui/packages/shared/profile/src/contexts/SimpleMatchersLabelContext.tsx b/ui/packages/shared/profile/src/contexts/SimpleMatchersLabelContext.tsx
