From 71de4d751c539e5368f171d8de9203cd55f8ce72 Mon Sep 17 00:00:00 2001 From: shadowusr Date: Sat, 16 Nov 2024 19:19:25 +0300 Subject: [PATCH] fix: hide divider, change opacity of disabled buttons, hide checkboxes when they are not needed, fix images in tree view --- .../new-ui/components/IconButton/index.tsx | 3 ++- .../components/ImageWithMagnifier/index.tsx | 2 +- .../suites/components/SuitesTreeView/index.tsx | 2 +- .../TreeActionsToolbar/index.module.css | 4 ++++ .../components/TreeActionsToolbar/index.tsx | 18 ++++++++++++------ .../components/TreeViewItemTitle/index.tsx | 4 +++- lib/static/new-ui/store/selectors.ts | 3 +++ 7 files changed, 26 insertions(+), 10 deletions(-) diff --git a/lib/static/new-ui/components/IconButton/index.tsx b/lib/static/new-ui/components/IconButton/index.tsx index 723bc957..7063db91 100644 --- 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 - + ; } diff --git a/lib/static/new-ui/components/ImageWithMagnifier/index.tsx b/lib/static/new-ui/components/ImageWithMagnifier/index.tsx index c8fece91..25f17df1 100644 --- 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
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 index 14676e0f..4fade97a 100644 --- 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 ({ 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 index b36906ae..b07deb50 100644 --- 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 index e8a10e26..bf8315f3 100644 --- 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 && } + {isRunTestsAvailable && } tooltip={`Run ${selectedOrVisible}`} view={'flat'} onClick={handleRun} disabled={isRunning || !isInitialized}>} {isEditScreensAvailable && ( isUndoButtonVisible ? - } tooltip={`Undo accepting ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleUndo} disabled={areActionsDisabled}> : - } tooltip={`Accept ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleAccept} disabled={areActionsDisabled}> + } tooltip={`Undo accepting ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleUndo} disabled={areActionsDisabled}> : + } tooltip={`Accept ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleAccept} disabled={areActionsDisabled || !isAtLeastOneAcceptable}> )} -
+ {(isRunTestsAvailable || isEditScreensAvailable) &&
} } tooltip={'Focus on active test'} view={'flat'} onClick={props.onHighlightCurrentTest} disabled={!isInitialized}/> } tooltip={'Expand all'} view={'flat'} onClick={handleExpandAll} disabled={!isInitialized}/> } tooltip={'Collapse all'} view={'flat'} onClick={handleCollapseAll} disabled={!isInitialized}/> - } tooltip={isSelectedAll ? 'Deselect all' : 'Select all'} view={'flat'} onClick={handleToggleAll} disabled={!isInitialized}/> + {areCheckboxesNeeded && } tooltip={isSelectedAll ? 'Deselect all' : 'Select all'} view={'flat'} onClick={handleToggleAll} disabled={!isInitialized}/>} ; return
diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx index e248e2ab..ad22addb 100644 --- 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(null); @@ -45,6 +47,6 @@ export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): Re item.errorTitle && {item.errorTitle} } - + {areCheckboxesNeeded && }
; } diff --git a/lib/static/new-ui/store/selectors.ts b/lib/static/new-ui/store/selectors.ts index 5b025a21..af049e88 100644 --- 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 => state.tree.suites.byId; @@ -20,3 +21,5 @@ export const getImages = (state: State): Record => 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);