diff --git a/manifest.json b/manifest.json index 32147cae..c03dc2e7 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "JDN — Page Object Generator", "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development", "devtools_page": "index.html", - "version": "3.15.35", + "version": "3.15.36", "icons": { "128": "icon128.png" }, diff --git a/package-lock.json b/package-lock.json index d9974878..4435d792 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jdn-ai-chrome-extension", - "version": "3.15.35", + "version": "3.15.36", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/package.json b/package.json index ee82819e..7d7ab20e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jdn-ai-chrome-extension", - "version": "3.15.35", + "version": "3.15.36", "description": "jdn-ai chrome extension", "scripts": { "start": "webpack --watch --env devenv", diff --git a/src/common/styles/headerCollapse.less b/src/common/styles/headerCollapse.less new file mode 100644 index 00000000..8e711b4f --- /dev/null +++ b/src/common/styles/headerCollapse.less @@ -0,0 +1,15 @@ +.jdn__items-list_header-collapse { + // collapsed by default: + transform: rotate(0deg); + cursor: pointer; + color: #878A9C; + + &.disabled { + color: #00000040; + cursor: default; + } + + &.expanded { + transform: rotate(180deg); + } +} \ No newline at end of file diff --git a/src/common/styles/itemsList.less b/src/common/styles/itemsList.less index e066bd1f..d4f0fa32 100644 --- a/src/common/styles/itemsList.less +++ b/src/common/styles/itemsList.less @@ -17,12 +17,6 @@ height: 28px; } - &-collapse { - margin-top: auto; - margin-bottom: auto; - cursor: pointer; - } - .ant-select-multiple .ant-select-selection-item { background-color: #ffffff; border: 1px solid #d9d9d9; diff --git a/src/features/locators/components/LocatorListHeader.tsx b/src/features/locators/components/LocatorListHeader.tsx index 6c1293c2..c97fc585 100644 --- a/src/features/locators/components/LocatorListHeader.tsx +++ b/src/features/locators/components/LocatorListHeader.tsx @@ -11,12 +11,12 @@ import { LocatorsSearch } from './LocatorsSearch'; import { LocatorEditDialog } from './LocatorEditDialog'; import { OnboardingTooltip } from '../../onboarding/components/OnboardingTooltip'; import { LocatorMenu } from './LocatorMenu'; -import { LocatorTreeProps, ExpandState } from './LocatorsTree'; +import { ExpandState, LocatorTreeProps } from './LocatorsTree'; import { selectActiveLocators, - selectFilteredLocators, - selectCheckedLocatorsByPageObject, selectActualActiveByPageObject, + selectCheckedLocatorsByPageObject, + selectFilteredLocators, selectGenerateByPageObject, } from '../selectors/locatorsFiltered.selectors'; import { useOnboardingContext } from '../../onboarding/OnboardingProvider'; @@ -25,6 +25,8 @@ import { selectIsOnboardingOpen } from '../../onboarding/store/onboarding.select import { useOnboarding } from '../../onboarding/useOnboarding'; import { selectIsCreatingFormOpen } from '../selectors/customLocator.selectors'; import { setIsCreatingFormOpen } from '../customLocator.slice'; +import classNames from 'classnames'; +import '../../../common/styles/headerCollapse.less'; interface LocatorListHeaderProps { render: (viewProps: LocatorTreeProps['viewProps']) => ReactNode; @@ -93,6 +95,22 @@ export const LocatorListHeader = ({ } }, []); + const isLocatorHasSubLocators = locators.some( + (locator) => Array.isArray(locator.children) && locator.children.length > 0, + ); + const isHeaderCollapseDisabled = !locators.length || !isLocatorHasSubLocators; + const isHeaderCollapseExpanded = isHeaderCollapseDisabled ? false : expandAll === ExpandState.Expanded; + const headerCollapseClassName = classNames( + 'jdn__items-list_header-collapse', + { disabled: isHeaderCollapseDisabled }, + { expanded: isHeaderCollapseExpanded }, + ); + + const handleExpandAll = () => { + if (isHeaderCollapseDisabled) return; + setExpandAll(expandAll === ExpandState.Collapsed ? ExpandState.Expanded : ExpandState.Collapsed); + }; + return ( <>
@@ -113,17 +131,7 @@ export const LocatorListHeader = ({ - - setExpandAll(expandAll === ExpandState.Collapsed ? ExpandState.Expanded : ExpandState.Collapsed) - } - /> + { if (!xPathStatus && !cssSelectorStatus) return LocatorTaskStatus.NOT_STARTED; + // TODO: delete when back-end will be ready (issues/1284) + return xPathStatus; - // return xPathStatus; - // TODO: uncomment when back-end will be ready (issues/1284) 246-267 lines - const statusMap = { - success: xPathStatus === LocatorTaskStatus.SUCCESS && cssSelectorStatus === LocatorTaskStatus.SUCCESS, - pending: xPathStatus === LocatorTaskStatus.PENDING || cssSelectorStatus === LocatorTaskStatus.PENDING, - failure: xPathStatus === LocatorTaskStatus.FAILURE || cssSelectorStatus === LocatorTaskStatus.FAILURE, - revoked: xPathStatus === LocatorTaskStatus.REVOKED || cssSelectorStatus === LocatorTaskStatus.REVOKED, - }; - - if (statusMap.success) { - return LocatorTaskStatus.SUCCESS; - } - if (statusMap.pending) { - return LocatorTaskStatus.PENDING; - } - if (statusMap.failure) { - return LocatorTaskStatus.FAILURE; - } - if (statusMap.revoked) { - return LocatorTaskStatus.REVOKED; - } - // fallback for any unhandled cases - return null; + // TODO: uncomment when back-end will be ready (issues/1284) 246-266 lines + // const statusMap = { + // success: xPathStatus === LocatorTaskStatus.SUCCESS && cssSelectorStatus === LocatorTaskStatus.SUCCESS, + // pending: xPathStatus === LocatorTaskStatus.PENDING || cssSelectorStatus === LocatorTaskStatus.PENDING, + // failure: xPathStatus === LocatorTaskStatus.FAILURE || cssSelectorStatus === LocatorTaskStatus.FAILURE, + // revoked: xPathStatus === LocatorTaskStatus.REVOKED || cssSelectorStatus === LocatorTaskStatus.REVOKED, + // }; + // + // if (statusMap.success) { + // return LocatorTaskStatus.SUCCESS; + // } + // if (statusMap.pending) { + // return LocatorTaskStatus.PENDING; + // } + // if (statusMap.failure) { + // return LocatorTaskStatus.FAILURE; + // } + // if (statusMap.revoked) { + // return LocatorTaskStatus.REVOKED; + // } + // // fallback for any unhandled cases + // return null; }; export const hasAllLocators = ({ locatorValue }: ILocator) => diff --git a/src/features/pageObjects/components/PageObjListHeader.tsx b/src/features/pageObjects/components/PageObjListHeader.tsx index b5981649..60f37a50 100644 --- a/src/features/pageObjects/components/PageObjListHeader.tsx +++ b/src/features/pageObjects/components/PageObjListHeader.tsx @@ -18,6 +18,8 @@ import { checkLocatorsValidity } from '../../locators/reducers/checkLocatorValid import { useAddPageObject } from '../utils/useAddPageObject'; import { useOnboardingContext } from '../../onboarding/OnboardingProvider'; import { PageObject } from '../types/pageObjectSlice.types'; +import classNames from 'classnames'; +import '../../../common/styles/headerCollapse.less'; const { confirm } = Modal; @@ -80,16 +82,20 @@ export const PageObjListHeader: FC = ({ template, toggleExpand, isExpande } }, [enableDownload]); + const isHeaderCollapseDisabled = !pageObjects.length; + const isHeaderCollapseExpanded = isHeaderCollapseDisabled ? false : isExpanded; + const headerCollapseClassName = classNames( + 'jdn__items-list_header-collapse', + { disabled: isHeaderCollapseDisabled }, + { expanded: isHeaderCollapseExpanded }, + ); + return ( {} : toggleExpand} /> {size(pageObjects) ? (