Plugin Extensions: E2E test addLink and legacy APIs (grafana#92394)

* cleanup tests

* more cleanup

* added links

* test legacy hooks

* test legacy hooks

* update codeowners

* revert package changes

* add project specfic example script

* remove console log

* Update .github/CODEOWNERS

Co-authored-by: Timur Olzhabayev <[email protected]>

* Update CODEOWNERS

* use correct file names

* cleanup tests

---------

Co-authored-by: Timur Olzhabayev <[email protected]>

Author: sunker

.github/CODEOWNERS

@@ -319,6 +319,7 @@
 /e2e/ @grafana/grafana-frontend-platform
 /e2e/cloud-plugins-suite/ @grafana/partner-datasources
 /e2e/plugin-e2e/plugin-e2e-api-tests/ @grafana/plugins-platform-frontend
+/e2e/test-plugins/grafana-extensionstest-app/ @grafana/plugins-platform-frontend 
 
 # Packages
 /packages/ @grafana/grafana-frontend-platform @grafana/plugins-platform-frontend

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/extensionPoints.spec.ts

@@ -32,4 +32,4 @@ Note that this plugin extends the `@grafana/plugin-configs` configs which is why
 
 ## Run Playwright tests
 
-- `yarn e2e:playwright`
+- `yarn playwright --project extensions-test-app`

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/extensions.spec.ts

@@ -1,7 +1,7 @@
 import { PluginExtension, PluginExtensionLink, SelectableValue, locationUtil } from '@grafana/data';
 import { isPluginExtensionLink, locationService } from '@grafana/runtime';
 import { Button, ButtonGroup, ButtonSelect, Modal, Stack, ToolbarButton } from '@grafana/ui';
-import { testIds } from '../testIds';
+import { testIds } from '../../testIds';
 
 import { ReactElement, useMemo, useState } from 'react';
 

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/useExposedComponent.spec.ts

@@ -1,18 +1,22 @@
 import { Route, Routes } from 'react-router-dom';
+
 import { AppRootProps } from '@grafana/data';
+
 import { ROUTES } from '../../constants';
-import { AddedComponents, ExposedComponents, LegacyAPIs } from '../../pages';
-import { testIds } from '../testIds';
+import { AddedComponents, AddedLinks, ExposedComponents, LegacyGetters, LegacyHooks } from '../../pages';
+import { testIds } from '../../testIds';
 
 export function App(props: AppRootProps) {
   return (
     <div data-testid={testIds.container} style={{ marginTop: '5%' }}>
       <Routes>
-        <Route path={ROUTES.LegacyAPIs} element={<LegacyAPIs />} />
+        <Route path={ROUTES.LegacyGetters} element={<LegacyGetters />} />
+        <Route path={ROUTES.LegacyHooks} element={<LegacyHooks />} />
         <Route path={ROUTES.ExposedComponents} element={<ExposedComponents />} />
         <Route path={ROUTES.AddedComponents} element={<AddedComponents />} />
+        <Route path={ROUTES.AddedLinks} element={<AddedLinks />} />
 
-        <Route path={'*'} element={<LegacyAPIs />} />
+        <Route path={'*'} element={<LegacyGetters />} />
       </Routes>
     </div>
   );

e2e/plugin-e2e/plugin-e2e-api-tests/as-admin-user/extensions/usePluginComponents.spec.ts

@@ -1,6 +1,6 @@
 import { DataQuery } from '@grafana/data';
 import { Button, FilterPill, Modal, Stack } from '@grafana/ui';
-import { testIds } from '../testIds';
+import { testIds } from '../../testIds';
 import { ReactElement, useState } from 'react';
 import { selectQuery } from '../../utils/utils';
 

e2e/test-plugins/grafana-extensionstest-app/README.md

@@ -3,7 +3,9 @@ import pluginJson from './plugin.json';
 export const PLUGIN_BASE_URL = `/a/${pluginJson.id}`;
 
 export enum ROUTES {
-  LegacyAPIs = 'legacy-apis',
+  LegacyGetters = 'legacy-getters',
+  LegacyHooks = 'legacy-hooks',
   ExposedComponents = 'exposed-components',
   AddedComponents = 'added-components',
+  AddedLinks = 'added-links',
 }

e2e/test-plugins/grafana-extensionstest-app/components/ActionButton/ActionButton.tsx

@@ -1,7 +1,8 @@
-import { testIds } from '../components/testIds';
 import { PluginPage, usePluginComponents } from '@grafana/runtime';
 import { Stack } from '@grafana/ui';
 
+import { testIds } from '../testIds';
+
 type ReusableComponentProps = {
   name: string;
 };

e2e/test-plugins/grafana-extensionstest-app/components/App/App.tsx

@@ -0,0 +1,25 @@
+import { PluginPage, usePluginLinks } from '@grafana/runtime';
+
+import { testIds } from '../testIds';
+
+export const LINKS_EXTENSION_POINT_ID = 'plugins/grafana-extensionstest-app/use-plugin-links/v1';
+
+export function AddedLinks() {
+  const { links, isLoading } = usePluginLinks({ extensionPointId: LINKS_EXTENSION_POINT_ID });
+
+  return (
+    <PluginPage>
+      <div data-testid={testIds.addedLinksPage.container}>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          links.map(({ id, title, path, onClick }) => (
+            <a href={path} title={title} key={id} onClick={onClick}>
+              {title}
+            </a>
+          ))
+        )}
+      </div>
+    </PluginPage>
+  );
+}