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,34 @@ 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);
+            }}
+            onKeyDownCapture={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                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([]);
       }
@@ -288,6 +289,10 @@ export const AdHocCombobox = forwardRef(function AdHocCombobox(
               return;
             }
           }
+          if (filter?.origin) {
+            return;
+          }
+
           setInputType('operator');
           return;
         }
@@ -518,22 +523,36 @@ 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}
+              tabIndex={filter.origin ? -1 : 0}
               onClick={(event) => {
+                if (filter.origin) {
+                  handleChangeViewMode?.();
+                  return;
+                }
+
                 event.stopPropagation();
                 setInputValue('');
                 switchInputType('operator', setInputType, undefined, refs.domReference.current);
               }}
               onKeyDown={(event) => {
+                if (filter.origin) {
+                  return;
+                }
+
                 handleShiftTabInput(event, hasMultiValueOperator);
                 if (event.key === 'Enter') {
                   setInputValue('');
                   switchInputType('operator', setInputType, undefined, refs.domReference.current);
                 }
               }}
+              {...(!filter.origin && { role: 'button' })}
             >
               {filter.operator}
             </div>