feat: add result meta extension point to new ui and enhance plugins SDK (#733)

* feat: add result meta extension point to new ui and enhance plugins SDK

* feat: support nested plugin descriptions

Author: shadowusr

lib/config/index.ts

@@ -88,6 +88,10 @@ const assertArrayOf = <T>(itemsType: string, name: string, predicateFn: TypePred
 };
 
 const assertPluginDescription = (description: unknown): description is PluginDescription => {
+    if (Array.isArray(description)) {
+        return description.every(assertPluginDescription);
+    }
+
     const maybeDescription = description as PluginDescription;
 
     if (!_.isPlainObject(maybeDescription)) {
@@ -255,6 +259,7 @@ const getParser = (): ReturnType<typeof root<ReporterConfig>> => {
             defaultValue: configDefaults.plugins,
             parseEnv: JSON.parse,
             parseCli: JSON.parse,
+            map: (value: PluginDescription[] | PluginDescription[][]) => value.flat(),
             validate: assertArrayOf('plugin descriptions', 'plugins', assertPluginDescription)
         }),
         staticImageAccepter: section({

lib/static/modules/default-state.ts

@@ -174,5 +174,6 @@ export default Object.assign({config: configDefaults}, {
         }
     },
     timestamp: 0,
-    browserFeatures: {}
+    browserFeatures: {},
+    plugins: {}
 }) satisfies State;

lib/static/modules/load-plugin.js

@@ -13,6 +13,7 @@ import immer from 'immer';
 import * as reselect from 'reselect';
 import axios from 'axios';
 import * as GravityUI from '@gravity-ui/uikit';
+import * as GravityUIIcons from '@gravity-ui/icons';
 import * as pluginsSDKUI from './plugins-sdk-ui';
 import * as selectors from './selectors';
 import actionNames from './action-names';
@@ -35,6 +36,7 @@ const whitelistedDeps = {
     'reselect': reselect,
     'axios': axios,
     '@gravity-ui/uikit': GravityUI,
+    '@gravity-ui/icons': GravityUIIcons,
     'html-reporter/plugins-sdk/ui': pluginsSDKUI,
     'components': {
         Details

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

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

lib/static/new-ui/constants/plugins.ts

@@ -1,3 +1,4 @@
 export enum ExtensionPointName {
-    SettingsPanel = 'settings-panel'
+    SettingsPanel = 'settings-panel',
+    ResultMeta = 'result_meta'
 }

lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx

@@ -15,6 +15,8 @@ interface CollapsibleSectionProps {
     title: string;
     children?: ReactNode;
     className?: string;
+    defaultExpanded?: boolean;
+    onUpdate?: (expanded: boolean) => void;
 }
 
 interface CollapsibleSectionInternalProps extends CollapsibleSectionProps{
@@ -26,6 +28,7 @@ interface CollapsibleSectionInternalProps extends CollapsibleSectionProps{
 export function CollapsibleSectionInternal(props: CollapsibleSectionInternalProps): ReactNode {
     const onUpdateHandler = (): void => {
         props.actions.setSectionExpandedState({sectionId: props.sectionId, isExpanded: !props.expanded});
+        props.onUpdate?.(!props.expanded);
     };
 
     return <Disclosure expanded={props.expanded} size={'l'} arrowPosition={'end'} key={props.sectionId} className={props.className}>
@@ -52,6 +55,6 @@ export const CollapsibleSection = connect((state: State, props: CollapsibleSecti
 
     return {
         sectionId,
-        expanded: state.ui.suitesPage.expandedSectionsById[sectionId] ?? true
+        expanded: state.ui.suitesPage.expandedSectionsById[sectionId] ?? props.defaultExpanded ?? true
     };
 }, (dispatch) => ({actions: bindActionCreators(actions, dispatch)}))(CollapsibleSectionInternal);

lib/static/new-ui/features/suites/components/TestInfo/index.tsx

@@ -12,6 +12,8 @@ import {ErrorHandler} from '@/static/new-ui/features/error-handling/components/E
 import {RunTestLoading} from '@/static/new-ui/components/RunTestLoading';
 
 import styles from './index.module.css';
+import ExtensionPoint from '../../../../../components/extension-point';
+import {ExtensionPointName} from '../../../../constants/plugins';
 
 export function TestInfo(): ReactNode {
     const currentResult = useSelector(getCurrentResult);
@@ -23,7 +25,7 @@ export function TestInfo(): ReactNode {
 
     const shouldShowPlayer = isPlayerAvailable && isPlayerVisible;
 
-    return <>
+    return <ExtensionPoint name={ExtensionPointName.ResultMeta} result={currentResult} testName={currentResult?.name}>
         <CollapsibleSection id={'actions'} title={'Actions'}>
             <div className={styles.stepsContainer}>
                 {steps.length > 0 ? (
@@ -48,5 +50,5 @@ export function TestInfo(): ReactNode {
                 <MetaInfo resultId={currentResult.id}/>
             </div>}
         </CollapsibleSection>
-    </>;
+    </ExtensionPoint>;
 }

lib/static/new-ui/types/store.ts

@@ -16,6 +16,7 @@ import {CheckStatus} from '@/constants/checked-statuses';
 import {EntityType} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 import {DbDetails} from '@/db-utils/common';
 import {Stats, PerBrowserStats} from '@/tests-tree-builder/static';
+import type {Database} from '@gemini-testing/sql.js';
 
 export interface GroupEntity {
     id: string;
@@ -366,6 +367,8 @@ export interface State {
     timestamp: number;
     fetchDbDetails: DbDetails[];
     stats: {all: Stats | Record<string, never>, perBrowser: PerBrowserStats | undefined} | null;
+    db?: Database;
+    plugins: Record<string, unknown>;
 }
 
 declare module 'react-redux' {

lib/static/styles.css

@@ -20,8 +20,25 @@
 }
 
 :root {
+    --color-link: #4f46e5;
+    --color-link-hover: #818cf8;
+    --color-bg-dark: #101827;
+    --color-bg-gray: #eee;
+
     --color-pink-100: #fce0ff;
     --color-pink-600: #be00ffbf;
+
+    --color-neutral-50: oklch(0.985 0 0);
+    --color-neutral-100: oklch(0.97 0 0);
+    --color-neutral-200: oklch(0.922 0 0);
+    --color-neutral-300: oklch(0.87 0 0);
+    --color-neutral-400: oklch(0.708 0 0);
+    --color-neutral-500: oklch(0.556 0 0);
+    --color-neutral-600: oklch(0.439 0 0);
+    --color-neutral-700: oklch(0.371 0 0);
+    --color-neutral-800: oklch(0.269 0 0);
+    --color-neutral-900: oklch(0.205 0 0);
+    --color-neutral-950: oklch(0.145 0 0);
 }
 
 .report {