Accept image from tree

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

@@ -92,8 +92,6 @@
         }
 
         .tree-view__item--error {
-            --g-color-base-simple-hover: var(--g-color-private-red-50);
-            background: var(--g-color-private-red-100);
             color: var(--g-color-private-red-600-solid);
         }
 

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

@@ -38,8 +38,6 @@
 }
 
 .tree-view-item--error {
-    --g-color-base-simple-hover: var(--g-color-private-red-50);
-    background: var(--g-color-private-red-100);
     color: var(--g-color-private-red-600-solid);
 }
 

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

@@ -17,6 +17,17 @@
     z-index: 10;
 }
 
+.accept-button {
+    composes: regular-button from global, action-button from global;
+    z-index: 1;
+}
+
+:global(.current-tree-node) .accept-button {
+    --_--background-color: #fff;
+    --_--background-color-hover: #efefef;
+    color: var(--g-color-base-brand);
+}
+
 .image-status {
     font-size: 15px;
     word-break: break-word;

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useCallback} from 'react';
 import stripAnsi from 'strip-ansi';
 
 import {TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
@@ -10,6 +10,10 @@ import {makeLinksClickable} from '@/static/new-ui/utils';
 import {HIDE_TREE_VIEW_SCREENSHOTS, Page, TestStatus} from '@/constants';
 import useLocalStorage from '@/static/hooks/useLocalStorage';
 import {usePage} from '@/static/new-ui/hooks/usePage';
+import {useDispatch, useSelector} from 'react-redux';
+import {staticAccepterStageScreenshot, thunkAcceptImages} from '@/static/modules/actions';
+import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
+import {Button} from '@gravity-ui/uikit';
 
 interface TreeViewItemSubtitleProps {
     item: TreeViewItemData;
@@ -20,8 +24,21 @@ interface TreeViewItemSubtitleProps {
 
 export function TreeViewItemSubtitle(props: TreeViewItemSubtitleProps): ReactNode {
     const page = usePage();
+    const analytics = useAnalytics();
+    const dispatch = useDispatch();
+    const isStaticImageAccepterEnabled = useSelector(state => state.staticImageAccepter.enabled);
     const isVisualChecksPage = page === Page.visualChecksPage;
 
+    const onScreenshotAccept = useCallback((imageId: string): void => {
+        analytics?.trackScreenshotsAccept();
+
+        if (isStaticImageAccepterEnabled) {
+            dispatch(staticAccepterStageScreenshot([imageId]));
+        } else {
+            dispatch(thunkAcceptImages({imageIds: [imageId]}));
+        }
+    }, [analytics, isStaticImageAccepterEnabled, dispatch]);
+
     if (props.item.status === TestStatus.SKIPPED && props.item.skipReason) {
         return (
             <div className={styles.skipReasonContainer}>
@@ -68,7 +85,18 @@ export function TreeViewItemSubtitle(props: TreeViewItemSubtitleProps): ReactNod
 
                     return (
                         <div key={imageEntity.id}>
-                            <span className={styles.imageStatus}>{imageEntity.stateName} ⋅ {getAssertViewStatusMessage(imageEntity)}</span>
+                            <span className={styles.imageStatus}>
+                                {imageEntity.stateName}
+                                {' ⋅ '}
+                                {getAssertViewStatusMessage(imageEntity)}
+                                {' ⋅ '}
+                                <Button
+                                    className={classNames(styles.acceptButton)}
+                                    view="action"
+                                    size="xs"
+                                    onClick={(): void => onScreenshotAccept(imageEntity.id)}
+                                >Accept</Button>
+                            </span>
                             {(!isHideScreenshots || isVisualChecksPage) && (
                                 <div className={styles.imageDiff}>
                                     {images.filter(({image}) => Boolean(image)).map((item) => (

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

@@ -27,10 +27,6 @@
     right: 0;
 }
 
-:global(.error-tree-node:hover) {
-    --background-color: var(--g-color-private-red-50-solid);
-}
-
 :global(.current-tree-node) {
     --background-color: var(--g-color-base-brand);
 }