fix: header collapse behaviour

jdi-testing · May 29, 2024 · f992042 · f992042
1 parent 8a0da4f
commit f992042
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 26 deletions.
diff --git a/src/common/styles/headerCollapse.less 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);
+  }
+}
diff --git 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
@@ -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}

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