Dashboard: Fixes lazy loading & expanding collapsed rows on mobile (#17055)

* Dashboard: Fixes lazy loading & expanding collapsing rows on mobile

Fixes #16978

* Updated dashboard tags

public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx

+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DashboardGrid, Props } from './DashboardGrid';
+import { DashboardModel } from '../state';
+
+interface ScenarioContext {
+  props: Props;
+  wrapper?: ShallowWrapper<Props, any, DashboardGrid>;
+  setup?: (fn: () => void) => void;
+  setProps: (props: Partial<Props>) => void;
+}
+
+function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
+  const data = Object.assign(
+    {
+      title: 'My dashboard',
+      panels: [
+        {
+          id: 1,
+          type: 'graph',
+          title: 'My graph',
+          gridPos: { x: 0, y: 0, w: 24, h: 10 },
+        },
+        {
+          id: 2,
+          type: 'graph2',
+          title: 'My graph2',
+          gridPos: { x: 0, y: 10, w: 25, h: 10 },
+        },
+        {
+          id: 3,
+          type: 'graph3',
+          title: 'My graph3',
+          gridPos: { x: 0, y: 20, w: 25, h: 100 },
+        },
+        {
+          id: 4,
+          type: 'graph4',
+          title: 'My graph4',
+          gridPos: { x: 0, y: 120, w: 25, h: 10 },
+        },
+      ],
+    },
+    overrides
+  );
+
+  const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
+  return new DashboardModel(data, meta);
+}
+
+function dashboardGridScenario(description, scenarioFn: (ctx: ScenarioContext) => void) {
+  describe(description, () => {
+    let setupFn: () => void;
+
+    const ctx: ScenarioContext = {
+      setup: fn => {
+        setupFn = fn;
+      },
+      props: {
+        isEditing: false,
+        isFullscreen: false,
+        scrollTop: null,
+        dashboard: getTestDashboard(),
+      },
+      setProps: (props: Partial<Props>) => {
+        Object.assign(ctx.props, props);
+        if (ctx.wrapper) {
+          ctx.wrapper.setProps(ctx.props);
+        }
+      },
+    };
+
+    beforeEach(() => {
+      setupFn();
+      ctx.wrapper = shallow(<DashboardGrid {...ctx.props} />);
+    });
+
+    scenarioFn(ctx);
+  });
+}
+
+describe('DashboardGrid', () => {
+  dashboardGridScenario('Can render dashboard grid', ctx => {
+    ctx.setup(() => {});
+
+    it('Should render', () => {
+      expect(ctx.wrapper).toMatchSnapshot();
+    });
+  });
+});

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -205,7 +205,7 @@ export class DashboardGrid extends PureComponent<Props> {
       return false;
     }
 
-    const top = parseInt(elem.style.top.replace('px', ''), 10);
+    const top = elem.offsetTop;
     const height = panel.gridPos.h * GRID_CELL_HEIGHT + 40;
     const bottom = top + height;
 

public/app/features/dashboard/dashgrid/DashboardGridDirective.ts

-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import DashboardGrid from './DashboardGrid';
-
-react2AngularDirective('dashboardGrid', DashboardGrid, [['dashboard', { watchDepth: 'reference' }]]);

public/app/features/dashboard/index.ts

-import './dashgrid/DashboardGridDirective';
-
 // Services
 import './services/UnsavedChangesSrv';
 import './services/DashboardLoaderSrv';