Issue 1534: fix header collapse behaviour

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"
   },

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",

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);
+  }
+}

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;

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 (
     <>
       <div className="jdn__locator-list_header-locator-control-group">
@@ -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}

src/features/locators/utils/utils.ts

@@ -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) =>

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<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) ? (