feat: implement test run options extension point (#734)

Author: shadowusr

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

@@ -1,3 +1,26 @@
+.buttons-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
 .retry-button {
     composes: regular-button from global, action-button from global;
 }
+
+.run-options-button::before {
+    border-left: none;
+}
+
+.run-options-button-icon {
+    transition: transform 0.1s ease-in-out;
+}
+
+.run-options-button-icon-rotated {
+    transform: rotate(180deg);
+}
+
+.run-options-container {
+    width: 450px;
+    padding: 16px;
+}

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

@@ -1,14 +1,18 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useCallback, useState} from 'react';
 
 import styles from './index.module.css';
-import {Button, ButtonProps, Icon, Spin} from '@gravity-ui/uikit';
-import {ArrowRotateRight} from '@gravity-ui/icons';
+import {Button, ButtonProps, Icon, Popover, Spin} from '@gravity-ui/uikit';
+import {ArrowRotateRight, ChevronDown} from '@gravity-ui/icons';
 import {thunkRunTest} from '@/static/modules/actions';
 import {useDispatch, useSelector} from 'react-redux';
 import {RunTestsFeature} from '@/constants';
 import {useAnalytics} from '../../hooks/useAnalytics';
 import type {BrowserEntity} from '@/static/new-ui/types/store';
 import {isFeatureAvailable} from '../../utils/features';
+import classNames from 'classnames';
+import ExtensionPoint, {getExtensionPointComponents} from '../../../components/extension-point';
+import * as plugins from '../../../modules/plugins';
+import {ExtensionPointName} from '../../constants/plugins';
 
 interface RunTestProps {
     browser: BrowserEntity | null;
@@ -35,10 +39,45 @@ export const RunTestButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, R
             return null;
         }
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return <Button ref={ref as any} view={'action'} className={styles.retryButton} onClick={onRetryTestHandler} disabled={isRunning} style={{width: buttonText === null ? '28px' : undefined}} {...buttonProps}>
-            {isRunning ? <Spin size={'xs'} /> : <Icon data={ArrowRotateRight}/>}{buttonText === undefined ? 'Retry' : buttonText}
-        </Button>;
+        const loadedPluginConfigs = plugins.getLoadedConfigs();
+        const pluginComponents = getExtensionPointComponents(loadedPluginConfigs, ExtensionPointName.RunTestOptions);
+        const hasRunTestOptions = pluginComponents.length > 0;
+        const [isRunOptionsOpen, setIsRunOptionsOpen] = useState(false);
+        const onRunOptionsOpenChange = useCallback((open: boolean) => {
+            setIsRunOptionsOpen(open);
+        }, []);
+
+        return <div className={styles.buttonsContainer}>
+            <Button
+                ref={ref as any} // eslint-disable-line @typescript-eslint/no-explicit-any
+                view={'action'}
+                className={styles.retryButton}
+                onClick={onRetryTestHandler}
+                disabled={isRunning}
+                style={{width: buttonText === null ? '28px' : undefined}}
+                pin={hasRunTestOptions ? 'round-brick' : undefined}
+                {...buttonProps}
+            >
+                {isRunning ? <Spin size={'xs'} /> : <Icon data={ArrowRotateRight}/>}{buttonText === undefined ? 'Retry' : buttonText}
+            </Button>
+            {hasRunTestOptions && <Popover
+                onOpenChange={onRunOptionsOpenChange}
+                content={<div className={styles.runOptionsContainer}><ExtensionPoint name={ExtensionPointName.RunTestOptions}></ExtensionPoint></div>}
+                trigger='click'
+                placement='bottom-end'
+            >
+                <Button
+                    view='action'
+                    disabled={isRunning}
+                    className={classNames(styles.retryButton, styles.runOptionsButton)}
+                    style={{width: buttonText === null ? '28px' : undefined}}
+                    pin='brick-round'
+                    {...buttonProps}
+                >
+                    <Icon data={ChevronDown} className={classNames(styles.runOptionsButtonIcon, {[styles.runOptionsButtonIconRotated]: isRunOptionsOpen})}/>
+                </Button>
+            </Popover>}
+        </div>;
     }
 );
 

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

@@ -68,3 +68,8 @@
 .select-all-button {
     width: 34px !important;
 }
+
+.run-options-container {
+    width: 450px;
+    padding: 16px;
+}

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

@@ -1,4 +1,4 @@
-import {Icon, Spin} from '@gravity-ui/uikit';
+import {Icon, Popover, Spin} from '@gravity-ui/uikit';
 import classNames from 'classnames';
 import {
     ArrowUturnCcwLeft,
@@ -12,7 +12,8 @@ import {
     SquareDashed,
     SquareMinus,
     ListUl,
-    Hierarchy
+    Hierarchy,
+    GearPlay
 } from '@gravity-ui/icons';
 import React, {ReactNode, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
@@ -48,6 +49,9 @@ import {GroupBySelect} from '@/static/new-ui/features/suites/components/GroupByS
 import {SortBySelect} from '@/static/new-ui/features/suites/components/SortBySelect';
 import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/screenshots';
 import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
+import ExtensionPoint, {getExtensionPointComponents} from '../../../components/extension-point';
+import {ExtensionPointName} from '../../constants/plugins';
+import * as plugins from '../../../modules/plugins';
 
 interface TreeActionsToolbarProps {
     onHighlightCurrentTest?: () => void;
@@ -180,6 +184,10 @@ export function TreeActionsToolbar({onHighlightCurrentTest, className}: TreeActi
     const selectedOrVisible = isSelectedAtLeastOne ? 'selected' : 'visible';
     const areActionsDisabled = isRunning || !isInitialized;
 
+    const loadedPluginConfigs = plugins.getLoadedConfigs();
+    const pluginComponents = getExtensionPointComponents(loadedPluginConfigs, ExtensionPointName.RunTestOptions);
+    const hasRunTestOptions = pluginComponents.length > 0;
+
     const getViewButtons = (): ReactNode => (
         <>
             {isRunTestsAvailable && (
@@ -197,6 +205,18 @@ export function TreeActionsToolbar({onHighlightCurrentTest, className}: TreeActi
                         />
                     )
             )}
+            {isRunTestsAvailable && hasRunTestOptions && <Popover
+                content={<div className={styles.runOptionsContainer}><ExtensionPoint name={ExtensionPointName.RunTestOptions}></ExtensionPoint></div>}
+                trigger='click'
+            >
+                <IconButton
+                    view='flat'
+                    disabled={isRunning || !isInitialized}
+                    className={classNames(styles.iconButton)}
+                    icon={<Icon data={GearPlay} height={14}/>}
+                    tooltip='View run options'
+                />
+            </Popover>}
             {isEditScreensAvailable && (
                 isUndoButtonVisible ?
                     <IconButton className={styles.iconButton} icon={<Icon data={ArrowUturnCcwLeft} />} tooltip={`Undo accepting ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleUndo} disabled={areActionsDisabled}></IconButton> :

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

@@ -1,4 +1,5 @@
 export enum ExtensionPointName {
     SettingsPanel = 'settings-panel',
-    ResultMeta = 'result_meta'
+    ResultMeta = 'result_meta',
+    RunTestOptions = 'run-test-options'
 }