feat: add plugins SDK and improve plugins middleware (#724)

* feat: add plugins SDK and improve plugins middleware

* docs: add an explanatory README on plugins SDK development

Author: shadowusr

.eslintignore

@@ -1,5 +1,6 @@
 **/.*
 build
+build-ui
 node_modules
 hot
 /lib/static/*.min.js

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 build
+build-ui
 hot
 sqlite.db
 *.log

lib/gui/routes/plugins.ts

@@ -9,6 +9,7 @@ import {
     logError
 } from '../../server-utils';
 import {ReporterConfig} from '../../types';
+import {getPluginMiddlewareRoute} from '../../static/modules/utils/pluginMiddlewareRoute';
 
 export const initPluginsRoutes = (router: Router, pluginConfig: ReporterConfig): Router => {
     if (!pluginConfig.pluginsEnabled) {
@@ -40,7 +41,7 @@ export const initPluginsRoutes = (router: Router, pluginConfig: ReporterConfig):
             const pluginRouter = Router();
             initPluginMiddleware(pluginRouter);
 
-            router.use(`/plugin-routes/${pluginName}`, pluginRouter);
+            router.use(getPluginMiddlewareRoute(pluginName), pluginRouter);
         } catch (err: unknown) {
             logError(err as Error);
         }

lib/static/components/extension-point.jsx

@@ -60,7 +60,7 @@ function composeComponents(PluginComponent, pluginProps, currentComponent, posit
     }
 }
 
-function getExtensionPointComponents(loadedPluginConfigs, pointName) {
+export function getExtensionPointComponents(loadedPluginConfigs, pointName) {
     return loadedPluginConfigs
         .map(config => {
             try {

lib/static/modules/load-plugin.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import * as JSXRuntime from 'react/jsx-runtime';
 import * as Redux from 'redux';
 import * as ReactRedux from 'react-redux';
 import _ from 'lodash';
@@ -10,12 +12,17 @@ import reduceReducers from 'reduce-reducers';
 import immer from 'immer';
 import * as reselect from 'reselect';
 import axios from 'axios';
+import * as GravityUI from '@gravity-ui/uikit';
+import * as pluginsSDKUI from './plugins-sdk-ui';
 import * as selectors from './selectors';
 import actionNames from './action-names';
 import Details from '../components/details';
+import {getPluginMiddlewareRoute} from '@/static/modules/utils/pluginMiddlewareRoute';
 
 const whitelistedDeps = {
     'react': React,
+    'react/jsx-runtime': JSXRuntime,
+    'react-dom': ReactDOM,
     'redux': Redux,
     'react-redux': ReactRedux,
     'lodash': _,
@@ -27,6 +34,8 @@ const whitelistedDeps = {
     'immer': immer,
     'reselect': reselect,
     'axios': axios,
+    '@gravity-ui/uikit': GravityUI,
+    'html-reporter/plugins-sdk/ui': pluginsSDKUI,
     'components': {
         Details
     }
@@ -91,8 +100,16 @@ async function initPlugin(plugin, pluginName, pluginConfig) {
             plugin = _.last(plugin);
             const depArgs = deps.map(dep => whitelistedDeps[dep]);
             // cyclic dep, resolve it dynamically
-            const actions = await import('./actions');
-            return plugin(...depArgs, {pluginName, pluginConfig, actions, actionNames, selectors});
+            const actionsModule = await import('./actions');
+            const actions = actionsModule.default || actionsModule;
+            return plugin(...depArgs, {
+                pluginName,
+                pluginConfig,
+                actions,
+                actionNames,
+                selectors,
+                pluginServerEndpointPrefix: getPluginMiddlewareRoute(pluginName)
+            });
         }
 
         return plugin;

lib/static/modules/plugins-sdk-ui.ts

@@ -0,0 +1,3 @@
+export {PanelSection} from '../new-ui/components/PanelSection';
+export {State} from '../new-ui/types/store';
+export * as Features from '../../constants/features';

lib/static/modules/utils/pluginMiddlewareRoute.ts

@@ -0,0 +1,7 @@
+export const encodePackageNameRoute = (packageName: string): string => {
+    return packageName.replace(/[/@.]/g, '__');
+};
+
+export const getPluginMiddlewareRoute = (pluginName: string): string => {
+    return `/plugin-routes/${encodePackageNameRoute(pluginName)}`;
+};

lib/static/new-ui.css

@@ -99,3 +99,15 @@ body {
     color: var(--g-color-private-black-400);
     font-weight: 500;
 }
+
+a, a:link, a:visited {
+    color: var(--color-link);
+}
+
+a:hover {
+    color: var(--color-link-hover);
+}
+
+b {
+    font-weight: 500;
+}

lib/static/new-ui/components/InfoPanel/index.module.css

@@ -2,14 +2,6 @@
     margin: 20px 0;
 }
 
-.info-panel a:link, .info-panel a:visited {
-    color: var(--color-link);
-}
-
-.info-panel a:hover {
-    color: var(--color-link-hover);
-}
-
 .extra-items-list {
     padding-left: 24px;
     list-style: none;

lib/static/new-ui/components/PanelSection/index.tsx

@@ -3,7 +3,7 @@ import React, {ReactNode} from 'react';
 import styles from './index.module.css';
 
 interface PanelSectionProps {
-    title: string;
+    title: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
 }