AdHocVariable: Edit injected filters

packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFilterPill.tsx

@@ -27,14 +27,14 @@ export function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }:
   const handleChangeViewMode = useCallback(
     (event?: React.MouseEvent, shouldFocusOnPillWrapperOverride?: boolean) => {
       event?.stopPropagation();
-      if (readOnly || filter.origin) {
+      if (readOnly) {
         return;
       }
 
       setShouldFocusOnPillWrapper(shouldFocusOnPillWrapperOverride ?? !viewMode);
       setViewMode(!viewMode);
     },
-    [readOnly, viewMode, filter.origin]
+    [readOnly, viewMode]
   );
 
   useEffect(() => {
@@ -115,14 +115,27 @@ export function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }:
           />
         ) : null}
 
-        {filter.origin && (
+        {filter.origin && !filter.originalValue && (
           <IconButton
             name="info-circle"
             size="md"
             className={styles.pillIcon}
             tooltip={`This is a ${filter.origin} injected filter`}
           />
         )}
+
+        {filter.origin && filter.originalValue && (
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation();
+              model.restoreOriginalFilter(filter);
+            }}
+            name="history"
+            size="md"
+            className={styles.pillIcon}
+            tooltip={`Restore filter to its original value`}
+          />
+        )}
       </div>
     );
   }

packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersCombobox.tsx

@@ -117,6 +117,7 @@ export const AdHocCombobox = forwardRef(function AdHocCombobox(
           valueLabels.push(item.label ?? item.value!);
           values.push(item.value!);
         });
+
         model._updateFilter(filter!, { valueLabels, values, value: values[0] });
         setFilterMultiValues([]);
       }
@@ -518,11 +519,19 @@ export const AdHocCombobox = forwardRef(function AdHocCombobox(
           {filter?.key && filter?.operator && filterInputType !== 'operator' ? (
             <div
               id={operatorIdentifier}
-              className={cx(styles.basePill, styles.operatorPill, operatorIdentifier)}
-              role="button"
+              className={cx(
+                styles.basePill,
+                !filter.origin && styles.operatorPill,
+                filter.origin && styles.keyPill,
+                operatorIdentifier
+              )}
               aria-label="Edit filter operator"
               tabIndex={0}
               onClick={(event) => {
+                if (filter.origin) {
+                  return;
+                }
+
                 event.stopPropagation();
                 setInputValue('');
                 switchInputType('operator', setInputType, undefined, refs.domReference.current);
@@ -534,6 +543,7 @@ export const AdHocCombobox = forwardRef(function AdHocCombobox(
                   switchInputType('operator', setInputType, undefined, refs.domReference.current);
                 }
               }}
+              {...(!filter.origin && { role: 'button' })}
             >
               {filter.operator}
             </div>