fix: hide divider, change opacity of disabled buttons, hide checkboxe…

…s when they are not needed, fix images in tree view
gemini-testing · Nov 16, 2024 · 71de4d7 · 71de4d7
1 parent dbbf96b
commit 71de4d7
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 10 deletions.
diff --git a/lib/static/new-ui/components/IconButton/index.tsx b/lib/static/new-ui/components/IconButton/index.tsx
@@ -7,10 +7,11 @@ interface IconButtonProps {
     onClick?: () => void;
     view?: ButtonView;
     disabled?: boolean;
+    className?: string;
 }
 
 export function IconButton(props: IconButtonProps): ReactNode {
     return <Tooltip content={props.tooltip} placement={'top'} openDelay={0}>
-        <Button view={props.view} onClick={props.onClick} disabled={props.disabled}>{props.icon}</Button>
+        <Button className={props.className} view={props.view} onClick={props.onClick} disabled={props.disabled}>{props.icon}</Button>
     </Tooltip>;
 }
diff --git a/lib/static/new-ui/components/ImageWithMagnifier/index.tsx b/lib/static/new-ui/components/ImageWithMagnifier/index.tsx
@@ -104,7 +104,7 @@ export function ImageWithMagnifier({
     return <div>
         <Screenshot
             image={image}
-            containerStyle={style}
+            style={style}
             ref={imgRef}
             onMouseEnter={(e): void => mouseEnter(e)}
             onMouseLeave={(e): void => mouseLeave(e)}

diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
@@ -68,7 +68,7 @@ export const SuitesTreeView = forwardRef<SuitesTreeViewHandle, SuitesTreeViewPro
 
     useImperativeHandle(ref, () => ({
         scrollToId: (id: string): void => {
-            virtualizer.scrollToIndex(list.structure.visibleFlattenIds.indexOf(id), {align: 'center'});
+            virtualizer.scrollToIndex(list.structure.visibleFlattenIds.indexOf(id), {align: 'start'});
         }
     }));
 

diff --git a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css
@@ -53,3 +53,7 @@
     background-color: var(--divider-color);
     margin: 0 4px;
 }
+
+.icon-button[disabled] {
+    opacity: 0.5;
+}
diff --git a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx
@@ -33,7 +33,12 @@ import {
     getVisibleBrowserIds,
     getVisibleImages
 } from '@/static/modules/selectors/tree';
-import {getIsGui, getIsInitialized, getIsStaticImageAccepterEnabled} from '@/static/new-ui/store/selectors';
+import {
+    getAreCheckboxesNeeded,
+    getIsGui,
+    getIsInitialized,
+    getIsStaticImageAccepterEnabled
+} from '@/static/new-ui/store/selectors';
 import {isAcceptable, isScreenRevertable} from '@/static/modules/utils';
 import {EditScreensFeature, RunTestsFeature} from '@/constants';
 
@@ -74,6 +79,7 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
 
     const isStaticImageAccepterEnabled = useSelector(getIsStaticImageAccepterEnabled);
     const isGuiMode = useSelector(getIsGui);
+    const areCheckboxesNeeded = useSelector(getAreCheckboxesNeeded);
     const visibleImages: ImageEntity[] = useSelector(getVisibleImages);
     const selectedImages: ImageEntity[] = useSelector(getSelectedImages);
     const activeImages = isSelectedAtLeastOne ? selectedImages : visibleImages;
@@ -144,19 +150,19 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
     const areActionsDisabled = isRunning || !isInitialized;
 
     const viewButtons = <>
-        {isRunTestsAvailable && <IconButton icon={<Icon data={Play} height={14}/>}
+        {isRunTestsAvailable && <IconButton className={styles.iconButton} icon={<Icon data={Play} height={14}/>}
             tooltip={`Run ${selectedOrVisible}`} view={'flat'} onClick={handleRun}
             disabled={isRunning || !isInitialized}></IconButton>}
         {isEditScreensAvailable && (
             isUndoButtonVisible ?
-                <IconButton icon={<Icon data={ArrowUturnCcwLeft} />} tooltip={`Undo accepting ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleUndo} disabled={areActionsDisabled}></IconButton> :
-                <IconButton icon={<Icon data={Check} />} tooltip={`Accept ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleAccept} disabled={areActionsDisabled}></IconButton>
+                <IconButton className={styles.iconButton} icon={<Icon data={ArrowUturnCcwLeft} />} tooltip={`Undo accepting ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleUndo} disabled={areActionsDisabled}></IconButton> :
+                <IconButton className={styles.iconButton} icon={<Icon data={Check} />} tooltip={`Accept ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleAccept} disabled={areActionsDisabled || !isAtLeastOneAcceptable}></IconButton>
         )}
-        <div className={styles.buttonsDivider}></div>
+        {(isRunTestsAvailable || isEditScreensAvailable) && <div className={styles.buttonsDivider}></div>}
         <IconButton icon={<Icon data={SquareDashed} height={14}/>} tooltip={'Focus on active test'} view={'flat'} onClick={props.onHighlightCurrentTest} disabled={!isInitialized}/>
         <IconButton icon={<Icon data={ChevronsExpandVertical} height={14}/>} tooltip={'Expand all'} view={'flat'} onClick={handleExpandAll} disabled={!isInitialized}/>
         <IconButton icon={<Icon data={ChevronsCollapseVertical} height={14}/>} tooltip={'Collapse all'} view={'flat'} onClick={handleCollapseAll} disabled={!isInitialized}/>
-        <IconButton icon={<Icon data={isSelectedAll ? Square : SquareCheck}/>} tooltip={isSelectedAll ? 'Deselect all' : 'Select all'} view={'flat'} onClick={handleToggleAll} disabled={!isInitialized}/>
+        {areCheckboxesNeeded && <IconButton icon={<Icon data={isSelectedAll ? Square : SquareCheck}/>} tooltip={isSelectedAll ? 'Deselect all' : 'Select all'} view={'flat'} onClick={handleToggleAll} disabled={!isInitialized}/>}
     </>;
 
     return <div className={styles.container}>

diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx
@@ -6,6 +6,7 @@ import {Checkbox} from '@gravity-ui/uikit';
 import {useDispatch, useSelector} from 'react-redux';
 import {toggleBrowserCheckbox, toggleSuiteCheckbox} from '@/static/modules/actions';
 import {getToggledCheckboxState, isCheckboxChecked, isCheckboxIndeterminate} from '@/common-utils';
+import {getAreCheckboxesNeeded} from '@/static/new-ui/store/selectors';
 
 interface TreeViewItemTitleProps {
     className?: string;
@@ -14,6 +15,7 @@ interface TreeViewItemTitleProps {
 
 export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): React.JSX.Element {
     const dispatch = useDispatch();
+    const areCheckboxesNeeded = useSelector(getAreCheckboxesNeeded);
     const checkStatus = useSelector(state =>
         item.type === TreeViewItemType.Suite ? state.tree.suites.stateById[item.id].checkStatus : state.tree.browsers.stateById[item.id].checkStatus);
     const ref = useRef<HTMLInputElement>(null);
@@ -45,6 +47,6 @@ export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): Re
             item.errorTitle &&
             <span className={classNames(styles['tree-view-item__error-title'], className)}>{item.errorTitle}</span>
         }
-        <Checkbox checked={isCheckboxChecked(checkStatus)} indeterminate={isCheckboxIndeterminate(checkStatus)} className={styles.checkbox} size={'m'} controlRef={ref}/>
+        {areCheckboxesNeeded && <Checkbox checked={isCheckboxChecked(checkStatus)} indeterminate={isCheckboxIndeterminate(checkStatus)} className={styles.checkbox} size={'m'} controlRef={ref}/>}
     </div>;
 }
diff --git a/lib/static/new-ui/store/selectors.ts b/lib/static/new-ui/store/selectors.ts
@@ -7,6 +7,7 @@ import {
     SuiteState,
     BrowserState
 } from '@/static/new-ui/types/store';
+import {EditScreensFeature, RunTestsFeature} from '@/constants';
 
 export const getAllRootSuiteIds = (state: State): string[] => state.tree.suites.allRootIds;
 export const getSuites = (state: State): Record<string, SuiteEntity> => state.tree.suites.byId;
@@ -20,3 +21,5 @@ export const getImages = (state: State): Record<string, ImageEntity> => state.tr
 export const getIsInitialized = (state: State): boolean => state.app.isInitialized;
 export const getIsStaticImageAccepterEnabled = (state: State): boolean => state.staticImageAccepter.enabled;
 export const getIsGui = (state: State): boolean => state.gui;
+
+export const getAreCheckboxesNeeded = (state: State): boolean => state.app.availableFeatures.includes(RunTestsFeature) || state.app.availableFeatures.includes(EditScreensFeature);