@griddo/ax 1.66.1 → 1.66.4

package/src/modules/PageEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -10,11 +10,11 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
-import { isModuleDisabled } from "@ax/helpers";
+import { isModuleDisabled, getDeactivatedModules } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
-import { DeleteModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
+import { DeleteModal } from "./atoms";
 
 import * as S from "./style";
 
@@ -46,14 +46,15 @@ const PageEditor = (props: IProps) => {
     isNewTranslation,
   } = props;
 
-  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
+  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const browserRef = useRef<HTMLDivElement>(null);
 
   const isGlobal = editorContent.editorContent && editorContent.editorContent.origin === "GLOBAL";
   const isEditable = editorContent.editorContent && editorContent.editorContent.editable;
@@ -61,8 +62,8 @@ const PageEditor = (props: IProps) => {
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
   const hasDraft = editorContent.editorContent && editorContent.editorContent.haveDraftPage;
   const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
-  const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
+  const isTranslated = pageLanguages.length > 1;
 
   useEffect(() => {
     const { pageID, getPage, setTab, sendPagePing } = props;
@@ -118,7 +119,7 @@ const PageEditor = (props: IProps) => {
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -138,7 +139,7 @@ const PageEditor = (props: IProps) => {
   const publishChanges = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -167,13 +168,13 @@ const PageEditor = (props: IProps) => {
 
   const reviewPage = () => {
     const { validatePage } = props;
-    validatePage();
+    validatePage(false, browserRef);
   };
 
   const handlePublishDraft = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const isSaved = await savePage(false, null, true);
@@ -295,10 +296,12 @@ const PageEditor = (props: IProps) => {
 
   const goToPages = (path: string) => setRoute(path);
 
-  const goToError = (editorID: number, tab: string, template: boolean) => {
+  const goToError = (editorID: number | null, tab: string, template: boolean) => {
     const realEditorID = template ? 0 : editorID;
-    setSelectedContent(realEditorID);
-    setTab(tab);
+    if (realEditorID !== null) {
+      setSelectedContent(realEditorID);
+      setTab(tab);
+    }
   };
 
   const modalText = (
@@ -309,9 +312,18 @@ const PageEditor = (props: IProps) => {
 
   let isTemplateActivated = true;
   let hasDeactivatedModules = false;
+  let deactivatedModules: string[] = [];
   if (editorContent.editorContent && editorContent.editorContent.template) {
     const editorTemplate = editorContent.editorContent.template;
-    hasDeactivatedModules = isModuleDisabled(selectedComponent, schema.schemaType, activatedModules);
+    const mainContentModules = editorTemplate?.mainContent?.modules;
+
+    if (mainContentModules) {
+      deactivatedModules = getDeactivatedModules(activatedModules, mainContentModules);
+      hasDeactivatedModules = deactivatedModules.length > 0;
+    } else {
+      hasDeactivatedModules = isModuleDisabled(selectedComponent, schema.schemaType, activatedModules);
+    }
+
     isTemplateActivated = activatedTemplates.find((temp: any) => temp.id === editorTemplate.templateType)
       ? true
       : false;
@@ -395,7 +407,8 @@ const PageEditor = (props: IProps) => {
       if (!isTemplateActivated) {
         getSiteDataPackbyTemplate(editorTemplate.templateType);
       } else if (hasDeactivatedModules) {
-        getSiteDataPackbyModule(selectedComponent);
+        const currentModule = deactivatedModules.length === 1 ? deactivatedModules[0] : selectedComponent;
+        getSiteDataPackbyModule(currentModule);
       }
       setHistoryPush("/sites/settings/content-types", false);
     }
@@ -506,6 +519,7 @@ const PageEditor = (props: IProps) => {
               isEditable={isEditable}
               pageTitle={pageName}
               isReadOnly={isReadOnly}
+              browserRef={browserRef}
               setNotification={setNotification}
             />
           </S.Content>
@@ -622,7 +636,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(publish?: boolean): Promise<boolean>;
+  validatePage(publish?: boolean, browserRef?: any): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/Redirects/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { INavItem, IRedirect, IRootState } from "@ax/types";
+import { IEmptyStateProps, INavItem, IRedirect, IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { MainWrapper, ErrorToast, Nav, TableList, EmptyState, Toast } from "@ax/components";
@@ -30,6 +30,7 @@ const Redirects = (props: IProps): JSX.Element => {
     importRedirects,
     imports,
     totalImports,
+    isLoading,
   } = props;
 
   const itemsPerPage = 50;
@@ -50,6 +51,10 @@ const Redirects = (props: IProps): JSX.Element => {
   const { isOpen: isOpenCheckImport, toggleModal: toggleCheckImportModal } = useModal();
   const [importData, setImportData] = useState<{ from: string; to: string }[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [searchFilter, setSearchFilter] = useState<string>("");
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
 
   const initState = {
     from: "",
@@ -62,17 +67,18 @@ const Redirects = (props: IProps): JSX.Element => {
   const [formValues, setFormValues] = useState<IRedirect>(initState);
 
   const redIds = redirects && redirects.map((red: any) => red.id);
-  const isEmpty = redirects && redirects.length === 0;
 
   const getParams = useCallback(() => {
     const params = {
       page,
       itemsPerPage,
       pagination: true,
+      query: searchQuery,
+      filterBy: searchFilter === "filterby" ? "" : searchFilter,
     };
 
     return params;
-  }, [page]);
+  }, [page, searchQuery, searchFilter]);
 
   useEffect(() => {
     const params = getParams();
@@ -81,7 +87,26 @@ const Redirects = (props: IProps): JSX.Element => {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, currentFilterQuery]);
+  }, [page, currentFilterQuery, searchQuery, searchFilter]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      const emptyState: IEmptyStateProps = {};
+      const isSearching = searchQuery.length > 0;
+      if (isSearching) {
+        emptyState.icon = "search";
+        emptyState.title = "Oh! No Results Found";
+        emptyState.message = "We couldn’t find what you are looking for. Please, try another search.";
+      } else {
+        emptyState.message = "To have a redirects on your site, create as many redirects as you want.";
+        emptyState.button = "Create New redirect";
+        emptyState.action = handleModal;
+      }
+      setIsEmpty(!redirects.length);
+      setEmptyStateProps(emptyState);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading]);
 
   const {
     resetBulkSelection,
@@ -176,12 +201,6 @@ const Redirects = (props: IProps): JSX.Element => {
     toggleOverwriteModal();
   };
 
-  const emptyStateProps = {
-    message: "To have a redirects on your site, create as many redirects as you want.",
-    button: "Create New redirect",
-    action: handleModal,
-  };
-
   const pagination = {
     setPage,
     itemsPerPage,
@@ -236,6 +255,12 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const secondaryImportModalAction = { title: "Cancel", onClick: toggleCheckImportModal };
 
+  const searchFilters = [
+    { value: "filterby", label: "Filter by" },
+    { value: "from", label: "Old URL" },
+    { value: "to", label: "New URL" },
+  ];
+
   return (
     <>
       <MainWrapper
@@ -243,6 +268,9 @@ const Redirects = (props: IProps): JSX.Element => {
         title="SEO Settings"
         rightButton={rightButtonProps}
         rightLineButton={rightLineButtonProps}
+        searchAction={setSearchQuery}
+        filterSearchAction={setSearchFilter}
+        searchFilters={searchFilters}
       >
         <S.Wrapper>
           <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
@@ -341,6 +369,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   totalImports: state.redirects.totalImports,
   imports: state.redirects.imports,
+  isLoading: state.app.isLoading,
 });
 
 const mapDispatchToProps = {
@@ -357,6 +386,7 @@ interface IRedirectsProps {
   totalItems: number;
   currentSiteID: number | null;
   totalImports: number;
+  isLoading: boolean;
   imports: null | {
     error: IRedirect[];
     existing: IRedirect[];

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/index.tsx

@@ -30,7 +30,7 @@ const Editor = (props: IProps) => {
 type IProps = {
   isLoading: boolean;
   template: string;
-}
+};
 
 const mapStateToProps = (state: IRootState): IProps => ({
   isLoading: state.app.isLoading,

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import { IRootState } from "@ax/types";

package/src/modules/Settings/ContentTypes/DataPacks/Config/index.tsx

@@ -68,7 +68,7 @@ const ConfigPack = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-  selected: any;
+  selected?: any;
   currentSiteInfo: ISite;
 }
 

package/src/modules/Settings/ContentTypes/DataPacks/index.tsx

@@ -181,7 +181,7 @@ const DataPacks = (props: IProps): JSX.Element => {
     action: addNewAction,
   };
 
-  const Content = () => (!isEmpty ? <Section /> : <EmptyState {...emptyStateProps} />);
+  const Content = () => (selected || !isEmpty ? <Section /> : <EmptyState {...emptyStateProps} />);
 
   return (
     <MainWrapper {...mainWrapperProps}>

package/src/modules/Sites/index.tsx

@@ -15,7 +15,6 @@ const Sites = (props: IProps): JSX.Element => {
   const {
     isLoading,
     sites,
-    token,
     setCurrentSiteInfo,
     getSites,
     getStructuredData,
@@ -23,12 +22,13 @@ const Sites = (props: IProps): JSX.Element => {
     getAllDataPacks,
     getUser,
     globalLangs,
+    token
   } = props;
 
   const fetchInitialData = async () => {
     setCurrentSiteInfo(null);
     await getStructuredData(token);
-    await getSites(token);
+    await getSites();
     await getAllDataPacks();
     await getUser("me");
 
@@ -68,7 +68,7 @@ interface IStateProps {
 
 interface IDispatchProps {
   setCurrentSiteInfo(currentSiteInfo: any): void;
-  getSites(token: string): Promise<void>;
+  getSites(language?: number): Promise<void>;
   getStructuredData(token: string, siteId?: number): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   getAllDataPacks: () => Promise<void>;

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

@@ -405,7 +405,7 @@ interface IGlobalPageItemProps {
   isAllPages?: boolean;
   globalPage: IPage;
   updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
-  duplicatePage(pageID: number, data: { title: string; slug: string }): Promise<void>;
+  duplicatePage(pageID: number, data: { title: string; slug: string }, siteID?: number): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   deletePage(params?: ISavePageParams, currentLanguage?: string): Promise<boolean>;
   getGlobalPages(): void;

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

@@ -87,4 +87,4 @@ interface IActionButton {
   title: string;
 }
 
-export { DeleteModal, MainActionButton, SecondaryActionButton };
+export { DeleteModal, MainActionButton, SecondaryActionButton };

package/src/modules/Users/Profile/index.tsx

@@ -11,14 +11,14 @@ import { useURLSearchParam } from "@ax/hooks";
 import UserForm from "../UserForm";
 
 const Profile = (props: IProps) => {
-  const { user, getUser, updateUser, isSaving, isLoading, getSites, token } = props;
+  const { user, getUser, updateUser, isSaving, isLoading, getSites } = props;
 
   const isUserInit = useURLSearchParam("init");
 
   const [form, setForm] = useState<IUser>({ ...user });
 
   useEffect(() => {
-    isUserInit ? getSites(token) : getUser("me");
+    isUserInit ? getSites() : getUser("me");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -58,7 +58,7 @@ const mapStateToProps = (state: IRootState) => ({
 interface IDispatchProps {
   setHistoryPush(path: string): any;
   getUser(id: string): any;
-  getSites(token: string): Promise<void>;
+  getSites(): Promise<void>;
   updateUser(id: number, data: any, isProfile: boolean, isList: boolean): any;
 }
 
@@ -73,7 +73,6 @@ interface IProfileProps {
   user: IUser;
   isSaving: boolean;
   isLoading: boolean;
-  token: string;
 }
 
 type IProps = IProfileProps & IDispatchProps;

package/src/modules/Users/UserCreate/SiteItem/index.tsx

@@ -41,4 +41,4 @@ interface IProps {
   readOnly?: boolean;
 }
 
-export default SiteItem;
+export default SiteItem;

package/src/modules/Users/UserCreate/SiteItem/style.tsx

@@ -27,4 +27,4 @@ const SiteItem = styled(Row)<{ disabled?: boolean; readOnly?: boolean }>`
   }
 `;
 
-export { CheckCell, NameCell, SiteItem };
+export { CheckCell, NameCell, SiteItem };

package/src/modules/Users/UserForm/style.tsx

@@ -19,7 +19,7 @@ const SubTitle = styled.div`
 `;
 
 const ModalContent = styled.div`
-  padding: ${p => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.m};
 `;
 
 const SettingsWrapper = styled.div`
@@ -64,5 +64,5 @@ export {
   SettingContent,
   Heading,
   SearchFieldWrapper,
-  SelectAllSitesFieldWrapper
-};
+  SelectAllSitesFieldWrapper,
+};

package/src/modules/Users/UserList/UserItem/index.tsx

@@ -115,7 +115,9 @@ const UserItem = (props: IProps): JSX.Element => {
         </S.UserCell>
         {isSiteView ? null : (
           <S.UserCell role="cell" onClick={handleClick}>
-            {user?.sites?.length > 0 && <ElementsTooltip elements={getElementsNames()} elementsPerRow={3} defaultElements={3} />}
+            {user?.sites?.length > 0 && (
+              <ElementsTooltip elements={getElementsNames()} elementsPerRow={3} defaultElements={3} />
+            )}
           </S.UserCell>
         )}
         {isSiteView ? null : (

package/src/modules/Users/UserList/hooks.tsx

@@ -72,4 +72,4 @@ interface IUseFilterQuery {
   filterValues: IUsersQueryValues;
 }
 
-export { useSortedListStatus, useFilterQuery };
+export { useSortedListStatus, useFilterQuery };

package/src/modules/Users/UserList/index.tsx

@@ -18,16 +18,16 @@ import * as S from "./style";
 
 const UserList = (props: IProps): JSX.Element => {
   const {
-    currentSiteInfo,
     users,
+    sites,
     getUsers,
     navItems,
     currentNavItem,
     setHistoryPush,
     getUser,
     resetUserData,
-    sites,
     deleteUser,
+    currentSiteInfo,
     removeUsersBulk,
   } = props;
 

package/src/types/index.tsx

@@ -151,8 +151,8 @@ export interface IImage {
   published: Date;
   description: string;
   thumb: string;
-  tags: string[];
   file: File;
+  tags: string[];
   orientation: string;
 }
 
@@ -573,8 +573,8 @@ export interface IErrorItem {
   type: string;
   message: string;
   validator: Record<string, unknown>;
-  editorID: number;
-  component: string;
+  editorID: number | null;
+  component: string | null;
   name: string;
   key: string;
   tab: string;
@@ -622,6 +622,11 @@ export interface IUsersQueryValues {
   filterSites: string;
 }
 
+export interface IUsersQueryValues {
+  order: string;
+  filterSites: string;
+}
+
 export interface IDataPackConfigImportCategory {
   id: number;
   title: string;
@@ -740,6 +745,13 @@ export interface INotification {
   onClick?: () => void;
 }
 
+export interface ILinkField {
+  text: string;
+  linkType: string;
+  url: IUrlField;
+  modal: any;
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"
@@ -753,6 +765,7 @@ export type Field =
   | "HeadingField"
   | "HiddenField"
   | "ImageField"
+  | "LinkField"
   | "NumberField"
   | "RadioField"
   | "RadioGroup"