feat: add updateFilters method instead of polluting setState interface

grafana · Dec 18, 2024 · b99db18 · b99db18
1 parent 5bf94a2
commit b99db18
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.test.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.test.tsx
@@ -958,7 +958,7 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
       expect(evtHandler).not.toHaveBeenCalled();
     });
 
-    it('Should publish event on when expr did change', () => {
+    it('updateFilters should not publish event when expr did not change', () => {
       const variable = new AdHocFiltersVariable({
         datasource: { uid: 'hello' },
         applyMode: 'manual',
@@ -970,12 +970,30 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
       const evtHandler = jest.fn();
       variable.subscribeToEvent(SceneVariableValueChangedEvent, evtHandler);
 
-      variable.setState({ filters: [{ key: 'key2', operator: '=', value: 'val1' }] });
+      variable.updateFilters(variable.state.filters.slice(0));
+
+      expect(evtHandler).not.toHaveBeenCalled();
+    });
+
+    it('updateFilters should publish event on when expr did change', () => {
+      const variable = new AdHocFiltersVariable({
+        datasource: { uid: 'hello' },
+        applyMode: 'manual',
+        filters: [{ key: 'key1', operator: '=', value: 'val1' }],
+      });
+
+      variable.activate();
+
+      const evtHandler = jest.fn();
+      variable.subscribeToEvent(SceneVariableValueChangedEvent, evtHandler);
+
+      variable.updateFilters( [{ key: 'key2', operator: '=', value: 'val1' }]);
 
       expect(evtHandler).toHaveBeenCalled();
+      expect(variable.state.filterExpression).toEqual(`key2="val1"`)
     });
 
-    it('Should not publish event on when expr did change, if skipPublish is true', () => {
+    it('updateFilters should not publish event on when expr did change, if skipPublish is true', () => {
       const variable = new AdHocFiltersVariable({
         datasource: { uid: 'hello' },
         applyMode: 'manual',
@@ -987,9 +1005,10 @@ describe.each(['11.1.2', '11.1.1'])('AdHocFiltersVariable', (v) => {
       const evtHandler = jest.fn();
       variable.subscribeToEvent(SceneVariableValueChangedEvent, evtHandler);
 
-      variable.setState({ filters: [{ key: 'key2', operator: '=', value: 'val1' }] }, { skipPublish: true });
+      variable.updateFilters([{ key: 'key2', operator: '=', value: 'val1' }], { skipPublish: true });
 
       expect(evtHandler).not.toHaveBeenCalled();
+      expect(variable.state.filterExpression).toEqual(`key2="val1"`)
     });
 
     it('Should create variable with applyMode as manual by default and it allows to override it', () => {

diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersVariable.tsx
@@ -189,7 +189,7 @@ export class AdHocFiltersVariable
     }
   }
 
-  public setState(update: Partial<AdHocFiltersVariableState>, options?: { skipPublish?: boolean }): void {
+  public setState(update: Partial<AdHocFiltersVariableState>): void {
     let filterExpressionChanged = false;
 
     if (update.filters && update.filters !== this.state.filters && !update.filterExpression) {
@@ -199,6 +199,31 @@ export class AdHocFiltersVariable
 
     super.setState(update);
 
+    if (filterExpressionChanged) {
+      this.publishEvent(new SceneVariableValueChangedEvent(this), true);
+    }
+  }
+
+  /**
+   * Updates the variable's `filters` and `filterExpression` state.
+   * If `skipPublish` option is true, this will not emit the `SceneVariableValueChangedEvent`,
+   * allowing consumers to update the filters without triggering dependent data providers.
+   */
+  public updateFilters(filters: AdHocFilterWithLabels[], options?: {
+    skipPublish?: boolean
+  }): void {
+    let filterExpressionChanged = false;
+    let filterExpression = undefined
+
+    if (filters && filters !== this.state.filters) {
+      filterExpression = renderExpression(this.state.expressionBuilder, filters);
+      filterExpressionChanged = filterExpression !== this.state.filterExpression;
+    }
+
+    super.setState({
+      filters, filterExpression
+    })
+
     if (filterExpressionChanged && options?.skipPublish !== true) {
       this.publishEvent(new SceneVariableValueChangedEvent(this), true);
     }