refactoring. fix broken test

public/app/plugins/datasource/stackdriver/components/Filter.tsx

@@ -38,9 +38,17 @@ export class Filter extends React.Component<Props, State> {
       return;
     }
 
-    const { groupBys, filters, filtersChanged, groupBysChanged, hideGroupBys } = this.props;
+    const { groupBys, filters, hideGroupBys } = this.props;
     const loader = getAngularLoader();
 
+    const filtersChanged = filters => {
+      this.props.filtersChanged(filters);
+    };
+
+    const groupBysChanged = groupBys => {
+      this.props.groupBysChanged(groupBys);
+    };
+
     const scopeProps = {
       loading: null,
       labelData,
@@ -57,8 +65,8 @@ export class Filter extends React.Component<Props, State> {
                         group-bys="groupBys"
                         label-data="labelData"
                         loading="loading"
-                        filters-changed="filtersChanged"
-                        group-bys-changed="groupBysChanged"
+                        filters-changed="filtersChanged(filters)"
+                        group-bys-changed="groupBysChanged(groupBys)"
                         hide-group-bys="hideGroupBys"/>`;
     this.component = loader.load(this.element, scopeProps, template);
   }

public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts

@@ -33,8 +33,6 @@ export class StackdriverFilterCtrl {
 
   /** @ngInject */
   constructor(private $scope, private uiSegmentSrv, private templateSrv) {
-    // this.$scope = $scope.labelData ? $scope : $scope.$parent;
-
     this.initSegments(this.$scope.ctrl.hideGroupBys);
   }
 
@@ -112,7 +110,7 @@ export class StackdriverFilterCtrl {
 
   async getGroupBys(segment) {
     let elements = await this.createLabelKeyElements();
-
+    console.log('elements', elements);
     elements = elements.filter(e => this.$scope.ctrl.groupBys.indexOf(e.value) === -1);
     const noValueOrPlusButton = !segment || segment.type === 'plus-button';
     if (noValueOrPlusButton && elements.length === 0) {
@@ -138,7 +136,7 @@ export class StackdriverFilterCtrl {
     };
 
     const groupBys = this.groupBySegments.reduce(reducer, []);
-    this.$scope.ctrl.groupBysChanged()(groupBys);
+    this.$scope.ctrl.groupBysChanged({ groupBys });
     this.ensurePlusButton(this.groupBySegments);
   }
 
@@ -179,7 +177,7 @@ export class StackdriverFilterCtrl {
   filterSegmentUpdated(segment, index) {
     const filters = this.filterSegments.filterSegmentUpdated(segment, index);
     if (!filters.some(f => f === DefaultFilterValue)) {
-      this.$scope.ctrl.filtersChanged()(filters);
+      this.$scope.ctrl.filtersChanged({ filters });
     }
   }
 

public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts

@@ -34,8 +34,8 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when labels are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
-        ctrl.$scope.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
+        ctrl.$scope.ctrl.labelData.metricLabels = { 'metric-key-1': ['metric-value-1'] };
+        ctrl.$scope.ctrl.labelData.resourceLabels = { 'resource-key-1': ['resource-value-1'] };
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -50,15 +50,15 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when a group by label is selected', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
-        ctrl.$scope.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
+        ctrl.$scope.ctrl.groupBys = ['metric.label.metric-key-1', 'resource.label.resource-key-1'];
 
         result = await ctrl.getGroupBys({ type: '' });
       });
@@ -74,7 +74,7 @@ describe('StackdriverQueryFilterCtrl', () => {
     describe('when a group by is selected', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.groupBysChanged = groupByChangedMock;
+        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -82,14 +82,14 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(groupByChangedMock).toHaveBeenCalledWith(['groupby1']);
+        expect(groupByChangedMock).toHaveBeenCalledWith({ groupBys: ['groupby1'] });
       });
     });
 
     describe('when a selected group by is removed', () => {
       beforeEach(() => {
         groupByChangedMock = jest.fn();
-        ctrl.$scope.groupBysChanged = groupByChangedMock;
+        ctrl.$scope.ctrl.groupBysChanged = groupByChangedMock;
         const removeSegment = { fake: true, value: '-- remove group by --' };
         const segment = { value: 'groupby1' };
         ctrl.groupBySegments = [segment, removeSegment];
@@ -97,7 +97,7 @@ describe('StackdriverQueryFilterCtrl', () => {
       });
 
       it('should be added to group bys list', () => {
-        expect(groupByChangedMock).toHaveBeenCalledWith([]);
+        expect(groupByChangedMock).toHaveBeenCalledWith({ groupBys: [] });
       });
     });
   });
@@ -136,11 +136,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a key filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -161,11 +161,11 @@ describe('StackdriverQueryFilterCtrl', () => {
 
     describe('when values for a value filter part are fetched', () => {
       beforeEach(async () => {
-        ctrl.$scope.labelData.metricLabels = {
+        ctrl.$scope.ctrl.labelData.metricLabels = {
           'metric-key-1': ['metric-value-1'],
           'metric-key-2': ['metric-value-2'],
         };
-        ctrl.$scope.labelData.resourceLabels = {
+        ctrl.$scope.ctrl.labelData.resourceLabels = {
           'resource-key-1': ['resource-value-1'],
           'resource-key-2': ['resource-value-2'],
         };
@@ -392,22 +392,24 @@ function createCtrlWithFakes(existingFilters?: string[]) {
     },
   };
   const scope = {
-    hideGroupBys: false,
-    groupBys: [],
-    filters: existingFilters || [],
-    labelData: {
-      metricLabels: {},
-      resourceLabels: {},
-      resourceTypes: [],
-    },
-    filtersChanged: () => {},
-    groupBysChanged: () => {},
-    datasource: {
-      getDefaultProject: () => {
-        return 'project';
+    ctrl: {
+      hideGroupBys: false,
+      groupBys: [],
+      filters: existingFilters || [],
+      labelData: {
+        metricLabels: {},
+        resourceLabels: {},
+        resourceTypes: [],
       },
+      filtersChanged: () => {},
+      groupBysChanged: () => {},
+      datasource: {
+        getDefaultProject: () => {
+          return 'project';
+        },
+      },
+      refresh: () => {},
     },
-    refresh: () => {},
   };
 
   return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub());