Chore: Remove a buncha stuff from Sandbox TestStuffPage (#85876)

.betterer.results

@@ -4057,9 +4057,6 @@ exports[`better eslint`] = {
     "public/app/features/sandbox/BenchmarksPage.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
-    "public/app/features/sandbox/TestStuffPage.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/search/page/components/ActionRow.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],

public/app/features/sandbox/TestStuffPage.tsx

@@ -1,59 +1,12 @@
-import React, { useMemo, useState } from 'react';
+import React from 'react';
-import { useObservable } from 'react-use';
-import AutoSizer from 'react-virtualized-auto-sizer';
 
-import {
+import { NavModelItem } from '@grafana/data';
-  ApplyFieldOverrideOptions,
-  DataConfigSource,
-  dateMath,
-  FieldColorModeId,
-  NavModelItem,
-  PanelData,
-} from '@grafana/data';
 import { getPluginExtensions, isPluginExtensionLink } from '@grafana/runtime';
-import { Button, HorizontalGroup, LinkButton, Table } from '@grafana/ui';
+import { Button, LinkButton, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
-import { config } from 'app/core/config';
 import { useAppNotification } from 'app/core/copy/appNotification';
-import { QueryGroupOptions } from 'app/types';
-
-import { PanelRenderer } from '../panel/components/PanelRenderer';
-import { QueryGroup } from '../query/components/QueryGroup';
-import { PanelQueryRunner } from '../query/state/PanelQueryRunner';
-
-interface State {
-  queryRunner: PanelQueryRunner;
-  queryOptions: QueryGroupOptions;
-  data?: PanelData;
-}
 
 export const TestStuffPage = () => {
-  const [state, setState] = useState<State>(getDefaultState());
-  const { queryOptions, queryRunner } = state;
-
-  const onRunQueries = () => {
-    const timeRange = { from: 'now-1h', to: 'now' };
-
-    queryRunner.run({
-      queries: queryOptions.queries,
-      datasource: queryOptions.dataSource,
-      timezone: 'browser',
-      timeRange: { from: dateMath.parse(timeRange.from)!, to: dateMath.parse(timeRange.to)!, raw: timeRange },
-      maxDataPoints: queryOptions.maxDataPoints ?? 100,
-      minInterval: queryOptions.minInterval,
-    });
-  };
-
-  const onOptionsChange = (queryOptions: QueryGroupOptions) => {
-    setState({ ...state, queryOptions });
-  };
-
-  /**
-   * Subscribe to data
-   */
-  const observable = useMemo(() => queryRunner.getData({ withFieldConfig: true, withTransforms: true }), [queryRunner]);
-  const data = useObservable(observable);
-
   const node: NavModelItem = {
     id: 'test-page',
     text: 'Test page',
@@ -66,93 +19,29 @@ export const TestStuffPage = () => {
 
   return (
     <Page navModel={{ node: node, main: node }}>
-      <Page.Contents>
+      <Stack>
-        <HorizontalGroup>
+        <LinkToBasicApp extensionPointId="grafana/sandbox/testing" />
-          <LinkToBasicApp extensionPointId="grafana/sandbox/testing" />
+
-        </HorizontalGroup>
+        <Button onClick={() => notifyApp.success('Success toast', 'some more text goes here')} variant="primary">
-        {data && (
+          Success
-          <AutoSizer style={{ width: '100%', height: '600px' }}>
+        </Button>
-            {({ width }) => {
+        <Button
-              return (
+          onClick={() => notifyApp.warning('Warning toast', 'some more text goes here', 'bogus-trace-99999')}
-                <div>
+          variant="secondary"
-                  <PanelRenderer
+        >
-                    title="Hello"
+          Warning
-                    pluginId="timeseries"
+        </Button>
-                    width={width}
+        <Button
-                    height={300}
+          onClick={() => notifyApp.error('Error toast', 'some more text goes here', 'bogus-trace-fdsfdfsfds')}
-                    data={data}
+          variant="destructive"
-                    options={{}}
+        >
-                    fieldConfig={{ defaults: {}, overrides: [] }}
+          Error
-                    timeZone="browser"
+        </Button>
-                  />
+      </Stack>
-                  <Table data={data.series[0]} width={width} height={300} />
-                </div>
-              );
-            }}
-          </AutoSizer>
-        )}
-        <div style={{ marginTop: '16px', height: '45%' }}>
-          <QueryGroup
-            options={queryOptions}
-            queryRunner={queryRunner}
-            onRunQueries={onRunQueries}
-            onOptionsChange={onOptionsChange}
-          />
-        </div>
-        <div style={{ display: 'flex', gap: '1em' }}>
-          <Button onClick={() => notifyApp.success('Success toast', 'some more text goes here')} variant="primary">
-            Success
-          </Button>
-          <Button
-            onClick={() => notifyApp.warning('Warning toast', 'some more text goes here', 'bogus-trace-99999')}
-            variant="secondary"
-          >
-            Warning
-          </Button>
-          <Button
-            onClick={() => notifyApp.error('Error toast', 'some more text goes here', 'bogus-trace-fdsfdfsfds')}
-            variant="destructive"
-          >
-            Error
-          </Button>
-        </div>
-      </Page.Contents>
     </Page>
   );
 };
 
-export function getDefaultState(): State {
-  const options: ApplyFieldOverrideOptions = {
-    fieldConfig: {
-      defaults: {
-        color: {
-          mode: FieldColorModeId.PaletteClassic,
-        },
-      },
-      overrides: [],
-    },
-    replaceVariables: (v: string) => v,
-    theme: config.theme2,
-  };
-
-  const dataConfig: DataConfigSource = {
-    getTransformations: () => [],
-    getFieldOverrideOptions: () => options,
-    getDataSupport: () => ({ annotations: false, alertStates: false }),
-  };
-
-  return {
-    queryRunner: new PanelQueryRunner(dataConfig),
-    queryOptions: {
-      queries: [],
-      dataSource: {
-        name: 'gdev-testdata',
-      },
-      maxDataPoints: 100,
-    },
-  };
-}
-
 function LinkToBasicApp({ extensionPointId }: { extensionPointId: string }) {
   const { extensions } = getPluginExtensions({ extensionPointId });