@griddo/ax 10.6.12 → 10.6.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.12",
+  "version": "10.6.14",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "082f6dfe0abb06f73d81d7fb31684f3aa7910b95"
+  "gitHead": "bf6a44085efc5362970097d5e1c02a2d47dade9d"
 }

package/src/__tests__/components/TableFilters/StatusFilter/StatusFilter.test.tsx

@@ -27,7 +27,7 @@ describe("StatusFilter component rendering", () => {
 
     const statusFilter = screen.getByTestId("status-filter-header");
     expect(statusFilter).toBeTruthy();
-    expect(statusFilter.textContent).toEqual("Status");
+    expect(statusFilter.textContent).toEqual("Last update");
   });
 
   it("should render interactive arrow if not filter selected", () => {

package/src/components/Fields/ComponentContainer/index.tsx

@@ -157,6 +157,8 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     </>
   );
 
+  const dragProps = provided && isArray && arrayLength >= 2 ? provided.dragHandleProps : {};
+
   return isEmpty ? (
     <EmptyContainer
       whiteList={whiteList}
@@ -177,9 +179,10 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
         ref={innerRef}
         data-testid="component-container"
         {...provided?.draggableProps}
+        {...dragProps}
       >
         {isArray && provided && (
-          <S.HandleWrapper {...provided?.dragHandleProps} hidden={arrayLength < 2} data-testid="handle-wrapper">
+          <S.HandleWrapper hidden={arrayLength < 2} data-testid="handle-wrapper">
             <S.IconHandleWrapper>
               <Icon name="drag" size="16" />
             </S.IconHandleWrapper>

package/src/components/Fields/ComponentContainer/style.tsx

@@ -43,6 +43,7 @@ const Component = styled.span<{ disabled?: boolean }>`
 
   &:hover {
     border: 1px solid ${(p) => p.theme.color.overlayHoverPrimary};
+    cursor: pointer;
     &:before {
       content: "";
       position: absolute;
@@ -140,6 +141,9 @@ const HandleWrapper = styled.div<{ hidden?: boolean }>`
   display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
   z-index: 1;
+  :hover {
+    cursor: grab;
+  }
 `;
 
 const IconHandleWrapper = styled.div`

package/src/components/Fields/ReferenceField/ItemList/Item/index.tsx

@@ -8,7 +8,7 @@ import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
-const Item = (props: IProps) => {
+const Item = (props: IProps): JSX.Element => {
   const { item, handleDelete, listLength, source, innerRef, provided } = props;
 
   const removeItem = () => {
@@ -23,9 +23,11 @@ const Item = (props: IProps) => {
     },
   ];
 
+  const dragProps = listLength < 2 ? {} : provided?.dragHandleProps;
+
   return (
-    <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps}>
-      <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
+    <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps} {...dragProps}>
+      <S.HandleWrapper hidden={listLength < 2} data-testid="handle-wrapper">
         <S.IconHandleWrapper>
           <Icon name="drag" size="16" />
         </S.IconHandleWrapper>

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -30,7 +30,6 @@ const ManualPanel = (props: IProps) => {
     site: state.site || currentSite,
   };
   const [form, setForm] = useState(initForm);
-  const [itemSite, setItemSite] = useState<number | null>(state.site || currentSite);
   const debouncedSearch = useDebounce(state.search);
 
   const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
@@ -83,13 +82,9 @@ const ManualPanel = (props: IProps) => {
     if (itemSelectedID) {
       newSelIds = state.fixed.filter((a: number) => a !== itemSelectedID);
       selItems = state.selectedItems.filter((b: IStructuredDataContent) => b.id !== itemSelectedID);
-      if (selItems.length === 0) {
-        setItemSite(form.site);
-      }
     } else {
       newSelIds = [...state.fixed, item.id];
       selItems = [...state.selectedItems, item];
-      setItemSite(form.site);
     }
     const showSelected = state.showSelected && newSelIds.length === 0 ? false : state.showSelected;
     setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems, showSelected }));
@@ -131,8 +126,6 @@ const ManualPanel = (props: IProps) => {
     setState((state: IReferenceState) => ({ ...state, site: siteID }));
   };
 
-  const hasContentFromOtherSite = state.fixed.length > 0 && form.site !== itemSite && !state.showSelected;
-
   return (
     <S.Wrapper>
       {state.fixed.length > 0 && (
@@ -191,17 +184,6 @@ const ManualPanel = (props: IProps) => {
       ) : (
         <S.ListWrapper>
           <S.Order>Most recent</S.Order>
-          {state.site && !hasContentFromOtherSite && !state.showSelected && (
-            <S.Note>
-              You can only select content <strong>from 1 site</strong>.
-            </S.Note>
-          )}
-          {hasContentFromOtherSite && (
-            <S.Note>
-              Select content from one site at a time. <strong>Remove previous selection</strong> to choose from other
-              site.
-            </S.Note>
-          )}
           <S.ItemList>
             {showedItems &&
               showedItems.map((item: IStructuredDataContent) => {
@@ -216,8 +198,7 @@ const ManualPanel = (props: IProps) => {
                 const disabled =
                   (hasMaxItems && !isChecked) ||
                   !!hasVersionInPageLanguage ||
-                  (maxItems && state.fixed.length >= maxItems && !isChecked) ||
-                  hasContentFromOtherSite;
+                  (!!maxItems && state.fixed.length >= maxItems && !isChecked);
                 return (
                   <React.Fragment key={`${item.content.title}-${item.id}`}>
                     {source && (

package/src/components/TableFilters/StatusFilter/index.tsx

@@ -19,7 +19,7 @@ const StatusFilter = (props: IStatusFilterProps) => {
 
   const Header = () => (
     <S.Status isActive={sortedByDate} data-testid="status-filter-header">
-      Status
+      Last update
       <S.IconsWrapper>
         {sortedByDate ? (
           <SortedStateArrow />

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -29,6 +29,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     icon,
     deleteCategoryGroup,
     hoverCheck,
+    isDragging,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -52,7 +53,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
   const { dataLanguages = [], content } = category;
   const isGroup = category.type === "group";
 
-  const handleClick = () => toggleModal();
+  const handleClick = () => !isDragging && toggleModal();
 
   const handleCloseModal = () => {
     setTranslation(null);
@@ -61,6 +62,8 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
   const handleOnChange = (value: ICheck) => onChange(value);
 
+  const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
   const removeCategory = async () => {
     const categoryIDs = dataLanguages.length > 0 ? dataLanguages.map((lang: IDataLanguage) => lang.id) : category.id;
     const deleted = await deleteStructuredDataContent(categoryIDs);
@@ -186,17 +189,17 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
   return (
     <>
-      <S.CategoryRow role="rowgroup" selected={isSelected}>
+      <S.CategoryRow role="rowgroup" selected={isSelected} onClick={handleClick} {...dragHandleProps}>
         <S.HandleCell>
-          <S.IconWrapperDrag role="cell" {...dragHandleProps}>
+          <S.IconWrapperDrag role="cell">
             <Icon name="drag" size="16" />
           </S.IconWrapperDrag>
           <S.IconWrapper>{icon}</S.IconWrapper>
         </S.HandleCell>
-        <S.CheckCell role="cell">
+        <S.CheckCell role="cell" onClick={handleCheckClick}>
           <CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy} isGroup={isGroup}>
+        <S.NameCell role="cell" clickable={allowedToEditTaxonomy} isGroup={isGroup}>
           {isGroup && (
             <S.FolderWrapper>
               <Icon name="project" size="24" />
@@ -204,7 +207,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
           )}
           <div>{content?.title || ""}</div>
         </S.NameCell>
-        <S.CodeCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy}>
+        <S.CodeCell role="cell" clickable={allowedToEditTaxonomy}>
           {isCategory(category) && category.content ? category.content.code : ""}
         </S.CodeCell>
         <S.SelectableCell role="cell">
@@ -265,6 +268,7 @@ interface IProps {
   icon: JSX.Element;
   dragHandleProps?: any;
   hoverCheck?: boolean;
+  isDragging: boolean;
 }
 
 interface IDispatchProps {

package/src/modules/Categories/CategoriesList/index.tsx

@@ -264,6 +264,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
   const renderItem = ({ item, onExpand, onCollapse, provided }: RenderItemParams) => {
     const category = formatItem(item, tree);
     const isItemSelected = isSelected(category.id);
+    const isDragging = !!itemDragging && itemDragging !== category.id;
     return (
       <S.Draggable ref={provided.innerRef} {...provided.draggableProps}>
         <CategoryItem
@@ -279,6 +280,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
           icon={getIcon(item, onExpand, onCollapse)}
           dragHandleProps={provided.dragHandleProps}
           hoverCheck={checkState.hoverCheck}
+          isDragging={isDragging}
         />
       </S.Draggable>
     );

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -127,6 +127,8 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
     }
   };
 
+  const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
   const isToggleDisabled =
     (integration.active && !isAllowedToDeactivateIntegrations) ||
     (!integration.active && !isAllowedToActivateIntegrations);
@@ -187,6 +189,8 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
     />
   );
 
+  const dragProps = listLength < 2 ? {} : provided?.dragHandleProps;
+
   return (
     <>
       <S.ItemRow
@@ -195,14 +199,17 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
         ref={innerRef}
         data-testid="integration-item-row"
         disabled={!integration.editable}
+        onClick={handleClick}
+        clickable={isAllowedToManageIntegrations}
         {...provided?.draggableProps}
+        {...dragProps}
       >
-        <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
+        <S.HandleWrapper hidden={listLength < 2} data-testid="handle-wrapper">
           <S.IconHandleWrapper>
             <Icon name="drag" size="16" />
           </S.IconHandleWrapper>
         </S.HandleWrapper>
-        <S.CheckCell role="cell" hasHandle={listLength >= 2}>
+        <S.CheckCell role="cell" hasHandle={listLength >= 2} onClick={handleCheckClick}>
           {!integration.editable ? (
             <Tooltip content="This cannot be selected. You can only reorder it" left={60}>
               {checkBox}
@@ -211,24 +218,20 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
             <>{checkBox}</>
           )}
         </S.CheckCell>
-        <S.NameCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
+        <S.NameCell role="cell">
           <S.Order>#{integration.correlativeScriptOrder}</S.Order>
           <div>{integration.name}</div>
         </S.NameCell>
-        <S.DescriptionCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
-          {getIntegrationDescription()}
-        </S.DescriptionCell>
+        <S.DescriptionCell role="cell">{getIntegrationDescription()}</S.DescriptionCell>
         {integration.type === "addon" && (
           <>
-            <S.AppliedOnCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
+            <S.AppliedOnCell role="cell">
               <div>
                 Applied on: <S.ContentPresence>{getContentPresence(integration.contentPresence)}</S.ContentPresence>
               </div>
             </S.AppliedOnCell>
-            <S.CodeCell role="cell" onClick={handleClick} clickable={isAllowedToManageIntegrations}>
-              {getIntegrationTag()}
-            </S.CodeCell>
-            <S.StateCell role="cell">
+            <S.CodeCell role="cell">{getIntegrationTag()}</S.CodeCell>
+            <S.StateCell role="cell" onClick={handleCheckClick}>
               <ToggleField
                 name="state"
                 value={integration.active}

package/src/modules/Settings/Integrations/IntegrationItem/style.tsx

@@ -12,9 +12,8 @@ const CheckCell = styled(Cell)<{ hasHandle: boolean }>`
   }
 `;
 
-const NameCell = styled(Cell)<{ clickable: boolean }>`
+const NameCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiM};
-  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textHighEmphasis};
   flex: 0 0 350px;
   flex-flow: row wrap;
@@ -27,9 +26,8 @@ const Order = styled.div`
   margin-right: ${(p) => p.theme.spacing.xxs};
 `;
 
-const DescriptionCell = styled(Cell)<{ clickable: boolean }>`
+const DescriptionCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   flex: 1;
   a {
@@ -38,15 +36,13 @@ const DescriptionCell = styled(Cell)<{ clickable: boolean }>`
   }
 `;
 
-const AppliedOnCell = styled(Cell)<{ clickable: boolean }>`
+const AppliedOnCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiXS};
-  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   flex: 0 0 200px;
 `;
 
-const CodeCell = styled(Cell)<{ clickable: boolean }>`
-  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+const CodeCell = styled(Cell)`
   flex: 0 0 130px;
   align-items: center;
 `;
@@ -80,9 +76,11 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const ItemRow = styled(Row)<{ disabled: boolean }>`
+const ItemRow = styled(Row)<{ disabled: boolean; clickable: boolean }>`
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
   &:hover {
+    cursor: pointer;
     ${StyledActionMenu} {
       opacity: 1;
     }
@@ -93,6 +91,9 @@ const HandleWrapper = styled.div<{ hidden?: boolean }>`
   padding-left: ${(p) => p.theme.spacing.xs};
   display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
+  :hover {
+    cursor: grab;
+  }
 `;
 
 const IconHandleWrapper = styled.div`