Add read-only mode to ProfileFilters component (#5872)

Introduces a readOnly prop to the ProfileFilters component, disabling filter editing and hiding interactive controls when enabled.

Author: yomete

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

@@ -49,6 +49,7 @@ const Select = ({
   disabled = false,
   icon,
   id,
+  hideCaretDropdown,
 }: {
   items: SelectItem[];
   selectedKey: string | undefined;
@@ -61,6 +62,7 @@ const Select = ({
   disabled?: boolean;
   icon?: JSX.Element;
   id?: string;
+  hideCaretDropdown?: boolean;
 }): JSX.Element => {
   const selection = items.find(v => v.key === selectedKey) ?? {
     key: selectedKey,
@@ -83,7 +85,7 @@ const Select = ({
               className={cx(
                 styles,
                 width !== undefined ? `w-${width}` : 'w-full',
-                disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '',
+                disabled ? 'cursor-not-allowed pointer-events-none' : '',
                 primary ? primaryStyles : defaultStyles,
                 {[className]: className.length > 0}
               )}
@@ -97,9 +99,11 @@ const Select = ({
                   ? selection.element.active
                   : placeholder}
               </div>
-              <div className={cx(icon != null ? '' : 'pointer-events-none text-gray-400')}>
-                {icon ?? <Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />}
-              </div>
+              {hideCaretDropdown !== true && (
+                <div className={cx(icon != null ? '' : 'pointer-events-none text-gray-400')}>
+                  {icon ?? <Icon icon="heroicons:chevron-up-down-20-solid" aria-hidden="true" />}
+                </div>
+              )}
             </Listbox.Button>
           </div>
 

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

@@ -168,7 +168,11 @@ const numberMatchTypeItems: SelectItem[] = [
   },
 ];
 
-const ProfileFilters = (): JSX.Element => {
+export interface ProfileFiltersProps {
+  readOnly?: boolean;
+}
+
+const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Element => {
   const {profileSource} = useProfileViewContext();
   const currentProfileType = profileSource?.ProfileType()?.toString();
   const filterTypeItems = getFilterTypeItems(currentProfileType);
@@ -213,6 +217,7 @@ const ProfileFilters = (): JSX.Element => {
                 items={filterTypeItems}
                 selectedKey={filter.type}
                 placeholder="Select Filter"
+                disabled={readOnly}
                 onSelection={key => {
                   // Check if this is a preset selection
                   if (isPresetKey(key)) {
@@ -246,17 +251,21 @@ const ProfileFilters = (): JSX.Element => {
                   }
                 }}
                 className={cx(
-                  'rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1',
-                  isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none',
-                  filter.type != null ? 'border-r-0 w-auto' : 'w-32'
+                  'gap-0 focus:z-50 focus:relative focus:outline-1',
+                  readOnly ? '' : 'pr-1',
+                  readOnly && isPresetFilter ? 'rounded-md' : 'rounded-l-md rounded-r-none',
+                  !readOnly && (isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none'),
+                  readOnly ? 'w-auto' : filter.type != null ? 'border-r-0 w-auto' : 'w-32'
                 )}
+                hideCaretDropdown={readOnly}
               />
 
               {filter.type != null && !isPresetFilter && (
                 <>
                   <Select
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
+                    disabled={readOnly}
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
                       const isNewFieldNumber = newField === 'address' || newField === 'line_number';
@@ -272,70 +281,84 @@ const ProfileFilters = (): JSX.Element => {
                         updateFilter(filter.id, {field: newField});
                       }
                     }}
-                    className="rounded-none border-r-0 w-32 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                    className={cx(
+                      'rounded-none border-r-0 w-32 gap-0 focus:z-50 focus:relative focus:outline-1',
+                      readOnly ? '' : 'pr-1'
+                    )}
+                    hideCaretDropdown={readOnly}
                   />
 
                   <Select
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
+                    disabled={readOnly}
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
                     }
-                    className="rounded-none border-r-0 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                    className={cx(
+                      'rounded-none border-r-0 gap-0 focus:z-50 focus:relative focus:outline-1',
+                      readOnly ? '' : 'pr-1'
+                    )}
+                    hideCaretDropdown={readOnly}
                   />
 
                   <Input
                     placeholder="Value"
                     value={filter.value}
+                    disabled={readOnly}
                     onChange={e => updateFilter(filter.id, {value: e.target.value})}
                     onKeyDown={handleKeyDown}
                     className="rounded-none w-36 text-sm focus:outline-1"
                   />
                 </>
               )}
 
-              <Button
-                variant="neutral"
-                onClick={() => {
-                  // If we're displaying local filters and this is the last one, reset everything
-                  if (localFilters.length > 0 && localFilters.length === 1) {
-                    resetFilters();
-                  }
-                  // If we're displaying applied filters and this is the last one, reset everything
-                  else if (localFilters.length === 0 && filtersToRender.length === 1) {
-                    resetFilters();
-                  }
-                  // Otherwise, just remove this specific filter
-                  else {
-                    removeFilter(filter.id);
-                  }
-                }}
-                className={cx(
-                  'h-[38px] p-3',
-                  filter.type != null ? 'rounded-none rounded-r-md' : 'rounded-l-none rounded-r-md'
-                )}
-              >
-                <Icon icon="mdi:close" className="h-4 w-4" />
-              </Button>
+              {!readOnly && (
+                <Button
+                  variant="neutral"
+                  onClick={() => {
+                    // If we're displaying local filters and this is the last one, reset everything
+                    if (localFilters.length > 0 && localFilters.length === 1) {
+                      resetFilters();
+                    }
+                    // If we're displaying applied filters and this is the last one, reset everything
+                    else if (localFilters.length === 0 && filtersToRender.length === 1) {
+                      resetFilters();
+                    }
+                    // Otherwise, just remove this specific filter
+                    else {
+                      removeFilter(filter.id);
+                    }
+                  }}
+                  className={cx(
+                    'h-[38px] p-3',
+                    filter.type != null
+                      ? 'rounded-none rounded-r-md'
+                      : 'rounded-l-none rounded-r-md'
+                  )}
+                >
+                  <Icon icon="mdi:close" className="h-4 w-4" />
+                </Button>
+              )}
             </div>
           );
         })}
 
-        {localFilters.length > 0 && (
+        {!readOnly && localFilters.length > 0 && (
           <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
         )}
 
-        {localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
+        {!readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
           <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
           </Button>
         )}
       </div>
 
-      {localFilters.length > 0 && (
+      {!readOnly && localFilters.length > 0 && (
         <Button
           variant="primary"
           onClick={onApplyFilters}

ui/packages/shared/profile/src/index.tsx

@@ -26,6 +26,9 @@ export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
 
+export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
+export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
+
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
   dashboard_items: 'flamegraph',
 };