Skip to content

Commit

Permalink
Merge pull request #1742 from jdi-testing/issue_1534-fix-header-colla…
Browse files Browse the repository at this point in the history
…pse-behaviour

Issue 1534: fix header collapse behaviour
  • Loading branch information
Iogsotot authored May 29, 2024
2 parents 7bccbcb + 338a384 commit bfb2dd7
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 52 deletions.
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
15 changes: 15 additions & 0 deletions src/common/styles/headerCollapse.less
Original file line number Diff line number Diff line change
@@ -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);
}
}
6 changes: 0 additions & 6 deletions src/common/styles/itemsList.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 22 additions & 14 deletions src/features/locators/components/LocatorListHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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 (
<>
<div className="jdn__locator-list_header-locator-control-group">
Expand All @@ -113,17 +131,7 @@ export const LocatorListHeader = ({

<Row className="jdn__items-list_header">
<span className="jdn__items-list_header-title">
<CaretDown
style={{
transform: expandAll === ExpandState.Expanded ? 'rotate(180deg)' : 'rotate(0deg)',
}}
className="jdn__items-list_header-collapse"
color="#878A9C"
size={14}
onClick={() =>
setExpandAll(expandAll === ExpandState.Collapsed ? ExpandState.Expanded : ExpandState.Collapsed)
}
/>
<CaretDown className={headerCollapseClassName} size={14} onClick={handleExpandAll} />
<Checkbox
checked={isAllLocatorsSelected}
indeterminate={partiallySelected}
Expand Down
47 changes: 24 additions & 23 deletions src/features/locators/utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -239,30 +239,31 @@ export const getTaskStatus = (
cssSelectorStatus: LocatorTaskStatus,
): LocatorTaskStatus | null => {
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) =>
Expand Down
18 changes: 12 additions & 6 deletions src/features/pageObjects/components/PageObjListHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -80,16 +82,20 @@ export const PageObjListHeader: FC<Props> = ({ 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 (
<Row className="jdn__items-list_header" justify="space-between">
<CaretDown
style={{
transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
}}
className="jdn__items-list_header-collapse"
color="#00000073"
className={headerCollapseClassName}
size={14}
onClick={toggleExpand}
onClick={isHeaderCollapseDisabled ? () => {} : toggleExpand}
/>
<Space direction="horizontal" size={8}>
{size(pageObjects) ? (
Expand Down

0 comments on commit bfb2dd7

Please sign in to comment.