@griddo/ax 10.6.13 → 10.6.15

package/package.json

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

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/App/Routing/NavMenu/index.tsx

@@ -46,7 +46,8 @@ const NavMenu = (props: IProps) => {
   const goToPublishedSite = () => {
     const language = siteLanguages.find((l) => l.id === lang.id);
     if (language && language.home) {
-      window.open(`${language.home}/`, "_blank");
+      const urlHome = `${language.home}${language.home.endsWith("/") ? "" : "/"}`;
+      window.open(urlHome, "_blank");
     }
   };
 

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/ContentTypes/DataPacks/Config/Form/index.tsx

@@ -1,7 +1,15 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPackConfigImport, IDataPackConfigImportCategory, IRootState, ISite, ITemplate } from "@ax/types";
+import {
+  IDataPack,
+  IDataPackConfigImport,
+  IDataPackConfigImportCategory,
+  IRootState,
+  ISite,
+  IStructuredData,
+  ITemplate,
+} from "@ax/types";
 import { dataPacksActions } from "@ax/containers/Settings";
 import { FieldsBehavior, Modal, Tag } from "@ax/components";
 import { useModal } from "@ax/hooks";
@@ -11,12 +19,17 @@ import * as S from "./style";
 
 const Form = (props: IProps): JSX.Element => {
   const { currentSite, selected, updateFormValue, configFormData, allStructuredData } = props;
-  const { templates, categories, structuredData } = selected;
 
   if (!currentSite) {
     throw new Error(`ERROR: User reached Data Pack form with null site info`);
   }
 
+  if (!selected) {
+    throw new Error(`ERROR: User reached Data Pack form without one selected`);
+  }
+
+  const { templates, categories, structuredData } = selected;
+
   const getSubscribedData = (importValue: IDataPackConfigImport[]) => {
     const value: Record<string, ICategoryValue[]> = {};
     if (!importValue) return value;
@@ -82,21 +95,21 @@ const Form = (props: IProps): JSX.Element => {
   const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
   const getCategoryText = (id: string): string => {
-    const data = [...categories, ...allStructuredData.global, ...allStructuredData.site].find(
-      (elem: any) => elem.id === id
-    );
+    const data = [...categories, ...allStructuredData.global, ...allStructuredData.site].find((elem) => elem.id === id);
     return data ? data.title : id;
   };
 
   const getIsGlobal = (id: string): boolean => {
-    const data = allStructuredData && allStructuredData.site.find((elem: any) => elem.id === id);
+    const data = allStructuredData && allStructuredData.site.find((elem) => elem.id === id);
     return data && data.local ? false : true;
   };
 
+  const globalPageData = structuredData.find((data) => data.fromPage && !data.local);
+
   const elements =
-    structuredData[0] &&
-    structuredData[0].relatedCategories &&
-    structuredData[0].relatedCategories.map((cat: string) => {
+    globalPageData &&
+    globalPageData.relatedCategories &&
+    globalPageData.relatedCategories.map((cat) => {
       return { source: cat, key: cat, placeholder: getCategoryText(cat), isGlobal: getIsGlobal(cat) };
     });
 
@@ -132,12 +145,10 @@ const Form = (props: IProps): JSX.Element => {
     </S.CategoriesWrapper>
   );
 
-  const isGlobalDataPage = structuredData[0] && structuredData[0].fromPage && !structuredData[0].local;
-
   return (
     <>
       <S.Config>
-        {isGlobalDataPage && (
+        {!!globalPageData && (
           <S.SectionContent>
             <S.SubscribeWrapper>
               <S.Heading>Subscribe to data</S.Heading>
@@ -215,11 +226,11 @@ interface ICategoryValue {
 }
 
 interface IProps {
-  selected: any;
+  selected: IDataPack | null;
   currentSite: ISite | null;
   updateFormValue: (config?: any) => void;
   configFormData: any;
-  allStructuredData: any;
+  allStructuredData: { global: IStructuredData[]; site: IStructuredData[] };
 }
 
 const mapDispatchToProps = {

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`

package/src/types/index.tsx

@@ -454,6 +454,7 @@ export interface IStructuredData {
   dataPacks: string[];
   private?: boolean;
   exportable?: boolean;
+  relatedCategories: string[];
 }
 
 export interface IDataLanguage {
@@ -628,6 +629,7 @@ export interface IDataPack {
   categories: any[];
   activated: boolean;
   config: string;
+  structuredData: IStructuredData[];
 }
 
 export interface ISocialState {