@griddo/ax 11.0.4 → 11.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b97706dc29f2f8066e22ca49a9ee9c8959e8f820"
+  "gitHead": "b528c1933f0fe79e4feedacd2247336ab8f967a4"
 }

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

@@ -15,8 +15,8 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
   const validFormats =
     allowedFormats && allowedFormats.length
       ? allowedFormats
-      : ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
-
+      : ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt", "mov", "mp4", "wmv", "avi", "webm", "mkv"];
+  const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
   const handleClick = () => {
     if (!disabled) {
       toggleModal();
@@ -92,7 +92,10 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
               <Icon name="File" size="24" />
             </S.IconWrapper>
           </S.Field>
-          <S.HelpText>Valid formats: {validFormats.join(", ")}. Max. size: 50MB</S.HelpText>
+          <S.HelpText>
+            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos. Max.
+            size: 50MB
+          </S.HelpText>
         </>
       )}
       {value && (

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -25,7 +25,7 @@ const GalleryDragAndDrop = (props: IProps) => {
     resetGalleryState,
   } = props;
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
-
+  const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
   const filesInputRef = useRef<HTMLInputElement>(null);
   const filesButtonRef = useRef<HTMLButtonElement>(null);
   const [inDropZone, setInDropZone] = useState(false);
@@ -130,7 +130,9 @@ const GalleryDragAndDrop = (props: IProps) => {
           <S.FilesButton ref={filesButtonRef} type="button" buttonStyle="line" onClick={handleFileClick}>
             Select files
           </S.FilesButton>
-          <S.DragSubtitle>Valid formats: {validFormats.join(", ")}</S.DragSubtitle>
+          <S.DragSubtitle>
+            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+          </S.DragSubtitle>
           <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
         </S.DragStatus>
         <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
@@ -138,7 +140,9 @@ const GalleryDragAndDrop = (props: IProps) => {
             <Icon name="success" size="36" />
           </S.DragIcon>
           <S.DragTitle>Drop your file</S.DragTitle>
-          <S.DragSubtitle>Valid formats: {validFormats.join(", ")}</S.DragSubtitle>
+          <S.DragSubtitle>
+            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+          </S.DragSubtitle>
           <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
         </S.DragOverStatus>
       </S.StatusWrapper>

package/src/components/MenuGroup/index.tsx

@@ -7,7 +7,7 @@ import { IContentFilter } from "@ax/types";
 import * as S from "./style";
 
 const MenuGroup = (props: IProps): JSX.Element => {
-  const { filter, current, isAllowedToCreate, onClick, addNew } = props;
+  const { filter, current, isAllowedToCreate, isAllowedToAccessPrivate, onClick, addNew } = props;
 
   const [isOpen, setIsOpen] = useState(true);
   const [isSelected, setIsSelected] = useState(false);
@@ -47,7 +47,7 @@ const MenuGroup = (props: IProps): JSX.Element => {
       <S.Dropdown isOpen={isOpen}>
         {filter.items &&
           filter.items.map((filter) => {
-            const { label, value, fromPage, firstTemplate, editable, isPrivate } = filter;
+            const { label, value, fromPage, firstTemplate, editable, isPrivate = false } = filter;
 
             const isSelected = value === current;
             const selectedClass = isSelected ? "selected" : "";
@@ -58,10 +58,13 @@ const MenuGroup = (props: IProps): JSX.Element => {
                 onClick={() => handleClick(value, fromPage, firstTemplate)}
                 extendedAction={editable && isAllowedToCreate ? extendedAction : null}
                 className={selectedClass}
+                disabled={isPrivate && !isAllowedToAccessPrivate}
               >
                 <NavLink to="#">
                   <S.Link>
-                    <S.Text active={isSelected}>{label}</S.Text>
+                    <S.Text active={isSelected} disabled={isPrivate && !isAllowedToAccessPrivate}>
+                      {label}
+                    </S.Text>
                     {isPrivate && (
                       <S.Icon>
                         <Icon name="lock" size="16" />
@@ -81,6 +84,7 @@ interface IProps {
   filter: IContentFilter;
   current: string | undefined;
   isAllowedToCreate: boolean;
+  isAllowedToAccessPrivate: boolean;
   onClick: (value: string, fromPage: boolean, firstTemplate: string | null) => void;
   addNew: () => void;
 }

package/src/components/MenuGroup/style.tsx

@@ -48,9 +48,14 @@ const Icon = styled.div`
   margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
-const Text = styled.div<{ active: boolean }>`
+const Text = styled.div<{ active: boolean; disabled: boolean }>`
   ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  color: ${(p) =>
+    p.disabled
+      ? p.theme.color.interactiveDisabled
+      : p.active
+      ? p.theme.color.textHighEmphasis
+      : p.theme.color.textMediumEmphasis};
 `;
 
 export { Item, NavLink, Title, Arrow, Dropdown, Link, Icon, Text };

package/src/components/MenuItem/index.tsx

@@ -4,10 +4,10 @@ import { IconAction } from "@ax/components";
 import * as S from "./style";
 
 const MenuItem = (props: IMenuItemProps): JSX.Element => {
-  const { children, onClick, extendedAction, className } = props;
+  const { children, onClick, extendedAction, className, disabled = false } = props;
 
   const handleOnClick = (e: React.MouseEvent<HTMLLIElement>) => {
-    if (onClick !== undefined) {
+    if (onClick !== undefined && !disabled) {
       e.preventDefault();
       onClick(e);
     }
@@ -24,6 +24,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
       className={className}
       onlyOnHover={(extendedAction && extendedAction.onlyOnHover) ?? true}
       data-testid="menu-subitem"
+      disabled={disabled}
     >
       <div>{children}</div>
       {extendedAction && (
@@ -42,6 +43,7 @@ export interface IMenuItemProps {
   onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
   extendedAction?: { icon: string; action: () => void; onlyOnHover?: boolean } | null;
   className?: string;
+  disabled?: boolean;
 }
 
 export default MenuItem;

package/src/components/MenuItem/style.tsx

@@ -10,11 +10,11 @@ const ExtendedAction = styled.div`
   display: none;
 `;
 
-const SubItem = styled.li<{ onlyOnHover: boolean }>`
+const SubItem = styled.li<{ onlyOnHover: boolean; disabled: boolean }>`
   ${(p) => p.theme.textStyle.uiM};
   display: flex;
   align-items: center;
-  color: ${(p) => p.theme.color.textHighEmphasis};
+  color: ${(p) => (p.disabled ? p.theme.color.disabled : p.theme.color.textHighEmphasis)};
   width: 100%;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   margin-top: ${(p) => p.theme.spacing.xxs};
@@ -35,19 +35,19 @@ const SubItem = styled.li<{ onlyOnHover: boolean }>`
   }
 
   :hover {
-    cursor: pointer;
+    cursor: ${(p) => (p.disabled ? "default" : "pointer")};
     ${ExtendedAction} {
       display: ${(p) => (p.onlyOnHover ? "block" : "none")};
     }
   }
 
   :hover:before {
-    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    background-color: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayHoverPrimary)};
     opacity: 1;
   }
 
   :active:before {
-    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+    background-color: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayPressedPrimary)};
     opacity: 1;
   }
 

package/src/helpers/files.tsx

@@ -12,6 +12,11 @@ const getFileIcon = (type: string) => {
     case "zip":
       return "zip.png";
     case "mp4":
+    case "mov":
+    case "wmv":
+    case "avi":
+    case "webm":
+    case "mkv":
     case "mpg":
     case "mp2":
     case "mpeg":

package/src/modules/Content/ContentFilters/index.tsx

@@ -8,6 +8,8 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { INITIAL_TEMPLATE } from "@ax/containers/PageEditor/constants";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { IQueryValue, IStructuredData } from "@ax/types";
+import { usePermission } from "@ax/hooks";
+
 import { getFilters } from "./utils";
 
 import * as S from "./style";
@@ -27,6 +29,14 @@ const ContentFilters = (props: IProps): JSX.Element => {
     addNew,
   } = props;
 
+  const privatePermissions = [
+    "content.createPrivateContentTypes",
+    "content.deletePrivateContentTypes",
+    "content.duplicatePrivateContentTypes",
+    "content.publishUnpublishPrivateContentTypes",
+  ];
+  const isAllowedToAccessPrivate = usePermission(privatePermissions);
+
   const type = typeFilters[0].value;
   const filters = getFilters(dynamicValues);
 
@@ -80,6 +90,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
                   onClick={handleClick}
                   addNew={addNew}
                   isAllowedToCreate={isAllowedToCreate}
+                  isAllowedToAccessPrivate={isAllowedToAccessPrivate}
                 />
               )}
             </React.Fragment>

package/src/modules/Content/index.tsx

@@ -207,7 +207,10 @@ const Content = (props: IProps): JSX.Element => {
 
   const [isDeleting, setIsDeleting] = useState<boolean>(false);
 
-  const isAllowedToCreatePages = usePermission("content.createPages");
+  const createPermission = isDataPrivate ? "content.createPrivateContentTypes" : "content.createPages";
+  const exportPermission = isDataPrivate ? "content.exportPrivateContentTypes" : "content.exportContentTypes";
+  const isAllowedToCreatePages = usePermission(createPermission);
+  const isAllowedToExport = usePermission(exportPermission);
 
   const {
     resetBulkSelection,
@@ -550,14 +553,15 @@ const Content = (props: IProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
-  const exportContent = isDataExportable
-    ? async (formats: (number | string)[]) => {
-        if (currentStructuredData && formats.length) {
-          const ids = selectedItems.all.length ? selectedItems.all : undefined;
-          await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+  const exportContent =
+    isDataExportable && isAllowedToExport
+      ? async (formats: (number | string)[]) => {
+          if (currentStructuredData && formats.length) {
+            const ids = selectedItems.all.length ? selectedItems.all : undefined;
+            await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+          }
         }
-      }
-    : undefined;
+      : undefined;
 
   const Header = (
     <BulkHeader

package/src/modules/FileDrive/FileDragAndDrop/index.tsx

@@ -28,7 +28,7 @@ const FileDragAndDrop = (props: IProps) => {
   } = props;
 
   const validExtensions = validFormats.map((format) => `.${format}`).join(",");
-
+  const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
   const filesInputRef = useRef<any>(null);
   const filesButtonRef = useRef<any>(null);
   const [inDropZone, setInDropZone] = useState(false);
@@ -169,7 +169,8 @@ const FileDragAndDrop = (props: IProps) => {
             Select files
           </S.FilesButton>
           <S.DragSubtitle>
-            Valid formats: {validFormats.join(", ")}.<br />
+            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+            <br />
             Max. size: 50MB
           </S.DragSubtitle>
         </S.DragStatus>
@@ -179,7 +180,8 @@ const FileDragAndDrop = (props: IProps) => {
           </S.DropIcon>
           <S.DragTitle>Drop your file</S.DragTitle>
           <S.DragSubtitle>
-            Valid formats: {validFormats.join(", ")}.<br />
+            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
+            <br />
             Max. size: 50MB
           </S.DragSubtitle>
         </S.DragOverStatus>

package/src/modules/FileDrive/FileModal/index.tsx

@@ -38,7 +38,7 @@ const FileModal = (props: IProps) => {
   const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
   const index = items.indexOf(file.id);
 
-  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
+  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "mov", "mp4", "wmv", "avi", "webm", "mkv"];
 
   const handleArrowClick = (isPrev: boolean) => () => {
     if (isDirty) {

package/src/modules/FileDrive/index.tsx

@@ -122,7 +122,22 @@ const FileDrive = (props: IProps) => {
   const hasFolders = !!folders.length;
   const isRoot = !breadcrumb.length;
   const isGrid = displayMode === "grid";
-  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
+  const validFormats = [
+    "pdf",
+    "doc",
+    "docx",
+    "xls",
+    "xlsx",
+    "zip",
+    "csv",
+    "txt",
+    "mov",
+    "mp4",
+    "wmv",
+    "avi",
+    "webm",
+    "mkv",
+  ];
 
   const allowedToAccessGlobalFromSite = usePermission("mediaGallery.accessToGlobalFileDriveFromSite");
 

package/src/modules/StructuredData/StructuredDataList/ContentFilters/index.tsx

@@ -5,6 +5,7 @@ import { NavLink } from "react-router-dom";
 import { IStructuredData } from "@ax/types";
 import { MenuGroup, MenuItem, SubNav } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+import { usePermission } from "@ax/hooks";
 
 import { getFilters } from "./utils";
 
@@ -13,6 +14,14 @@ import * as S from "./style";
 const ContentFilters = (props: IProps): JSX.Element => {
   const { current, dynamicValues, onClick, addNew, isAllowedToCreate } = props;
 
+  const privatePermissions = [
+    "global.content.createPrivateContentTypes",
+    "global.content.deletePrivateContentTypes",
+    "global.content.duplicatePrivateContentTypes",
+    "global.content.publishUnpublishPrivateContentTypes",
+  ];
+  const isAllowedToAccessPrivate = usePermission(privatePermissions);
+
   const filters = getFilters(dynamicValues);
 
   const handleClick = (value: string) => {
@@ -43,6 +52,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
                   onClick={handleClick}
                   addNew={addNew}
                   isAllowedToCreate={isAllowedToCreate}
+                  isAllowedToAccessPrivate={isAllowedToAccessPrivate}
                 />
               )}
             </React.Fragment>

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -20,6 +20,7 @@ import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
 import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, CategoryCell } from "@ax/components";
 import { useAdaptiveText, usePermission } from "@ax/hooks";
+import { getPermission } from "./utils";
 
 import * as S from "./style";
 
@@ -51,23 +52,13 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     hoverCheck,
   } = props;
 
-  const isAllowedToDuplicatePagesGlobal = usePermission("global.globalData.duplicateGlobalData");
-  const isAllowedToDuplicatePagesSite = usePermission("content.duplicatePages");
-  const isAllowedToPublishPagesGlobal = usePermission("global.globalData.publishUnpublishAllGlobalData");
-  const isAllowedToPublishPagesSite = usePermission("content.publishUnpublishPages");
-  const isAllowedToCreatePagesGlobal = usePermission("global.globalData.createAllGlobalData");
-  const isAllowedToCreatePagesSite = usePermission("content.createPages");
-  const isAllowedToDeletePageGlobal = usePermission("global.globalData.deleteAllGlobalData");
-  const isAllowedToDeletePageSite = usePermission("content.deletePages");
-
-  const isAllowedToDuplicatePages =
-    (!currentSiteInfo && isAllowedToDuplicatePagesGlobal) || (currentSiteInfo && isAllowedToDuplicatePagesSite);
-  const isAllowedToPublishPages =
-    (!currentSiteInfo && isAllowedToPublishPagesGlobal) || (currentSiteInfo && isAllowedToPublishPagesSite);
-  const isAllowedToCreatePages =
-    (!currentSiteInfo && isAllowedToCreatePagesGlobal) || (currentSiteInfo && isAllowedToCreatePagesSite);
-  const isAllowedToDeletePage =
-    (!currentSiteInfo && isAllowedToDeletePageGlobal) || (currentSiteInfo && isAllowedToDeletePageSite);
+  const isPrivateData = currentStructuredData?.private || false;
+  const isGlobal = !currentSiteInfo;
+
+  const isAllowedToDuplicatePages = usePermission(getPermission("duplicate", isGlobal, isPrivateData));
+  const isAllowedToPublishPages = usePermission(getPermission("publish", isGlobal, isPrivateData));
+  const isAllowedToCreatePages = usePermission(getPermission("create", isGlobal, isPrivateData));
+  const isAllowedToDeletePage = usePermission(getPermission("delete", isGlobal, isPrivateData));
 
   const nameCellRef = useRef<HTMLDivElement>(null);
   const theme: any = useTheme();

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/utils.tsx

@@ -0,0 +1,54 @@
+const getPermission = (type: "duplicate" | "create" | "delete" | "publish", isGlobal: boolean, isPrivate: boolean) => {
+  const permissions: Record<
+    "duplicate" | "create" | "delete" | "publish",
+    Record<"global" | "site", Record<"default" | "private", string>>
+  > = {
+    duplicate: {
+      global: {
+        default: "global.globalData.duplicateGlobalData",
+        private: "global.content.duplicatePrivateContentTypes",
+      },
+      site: {
+        default: "content.duplicatePages",
+        private: "content.duplicatePrivateContentTypes",
+      },
+    },
+    create: {
+      global: {
+        default: "global.globalData.createAllGlobalData",
+        private: "global.content.createPrivateContentTypes",
+      },
+      site: {
+        default: "content.createPages",
+        private: "content.createPrivateContentTypes",
+      },
+    },
+    delete: {
+      global: {
+        default: "global.globalData.deleteAllGlobalData",
+        private: "global.content.deletePrivateContentTypes",
+      },
+      site: {
+        default: "content.deletePages",
+        private: "content.deletePrivateContentTypes",
+      },
+    },
+    publish: {
+      global: {
+        default: "global.globalData.publishUnpublishAllGlobalData",
+        private: "global.content.publishUnpublishPrivateContentTypes",
+      },
+      site: {
+        default: "content.publishUnpublishPages",
+        private: "content.publishUnpublishPrivateContentTypes",
+      },
+    },
+  };
+
+  const privateStr = isPrivate ? "private" : "default";
+  const global = isGlobal ? "global" : "site";
+
+  return permissions[type][global][privateStr];
+};
+
+export { getPermission };

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -147,7 +147,16 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     subErrors?: { id: number; error: string }[];
   } | null>(null);
 
-  const allowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
+  const isPrivateData = currentStructuredData?.private || false;
+  const createPermission = isPrivateData
+    ? "global.content.createPrivateContentTypes"
+    : "global.globalData.createAllGlobalData";
+  const exportPermission = isPrivateData
+    ? "global.content.exportPrivateContentTypes"
+    : "global.content.exportContentTypes";
+
+  const allowedToCreatePages = usePermission(createPermission);
+  const allowedToExport = usePermission(exportPermission);
 
   const scope = currentSiteID ? "site" : "global";
 
@@ -155,7 +164,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const isDataTranslatable = currentStructuredData && currentStructuredData.translate;
   const isAllPages = filter === "all-pages";
   const isStructuredDataFromPage = !!currentStructuredData?.fromPage || isAllPages;
-  const isPrivateData = currentStructuredData?.private || false;
   const isDataExportable = currentStructuredData?.exportable || false;
   const dataIds = isStructuredDataFromPage
     ? currentSitePages.map((page: IPage) => page.id)
@@ -455,14 +463,15 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
-  const exportContent = isDataExportable
-    ? async (formats: (number | string)[]) => {
-        if (currentStructuredData && formats.length) {
-          const ids = selectedItems.all.length ? selectedItems.all : undefined;
-          await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+  const exportContent =
+    isDataExportable && allowedToExport
+      ? async (formats: (number | string)[]) => {
+          if (currentStructuredData && formats.length) {
+            const ids = selectedItems.all.length ? selectedItems.all : undefined;
+            await exportDataContent(currentStructuredData?.id, { format: formats as string[], ids });
+          }
         }
-      }
-    : undefined;
+      : undefined;
 
   const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];