@griddo/ax 11.7.13-rc.0 → 11.8.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.7.13-rc.0",
+  "version": "11.8.0-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -159,6 +159,7 @@
     "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
+    "@griddo/api-types": "^1.0.12",
     "@types/jest": "27.5.2",
     "@types/redux-mock-store": "1.0.3",
     "@typescript-eslint/eslint-plugin": "7.18.0",
@@ -223,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a9e624c2b0b432051abcac24ffdb6da14aa95c0"
+  "gitHead": "130006b9b240d0f92e0950041a0d1012af33e556"
 }

package/src/GlobalStore.tsx

@@ -22,6 +22,7 @@ import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/
 import { integrationsReducer, integrationsInitialState } from "./containers/Integrations/reducer";
 import { fileDriveReducer, fileDriveInitialState } from "./containers/FileDrive/reducer";
 import { formsReducer, formsInitialState } from "./containers/Forms/reducer";
+import { activityLogReducer, activityLogInitialState } from "./containers/ActivityLog/reducer";
 import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
@@ -58,6 +59,7 @@ export class GlobalStore {
       integrations: integrationsReducer as Reducer<any, Action<any>>,
       fileDrive: fileDriveReducer as Reducer<any, Action<any>>,
       forms: formsReducer as Reducer<any, Action<any>>,
+      activityLog: activityLogReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -81,6 +83,7 @@ export class GlobalStore {
           integrations: integrationsInitialState,
           fileDrive: fileDriveInitialState,
           forms: formsInitialState,
+          activityLog: activityLogInitialState,
         };
       }
 

package/src/api/index.tsx

@@ -20,6 +20,8 @@ import roles from "./roles";
 import integrations from "./integrations";
 import forms from "./forms";
 import folders from "./folders";
+import logs from "./logs";
+import schemas from "./schemas";
 
 export {
   sites,
@@ -44,4 +46,6 @@ export {
   integrations,
   forms,
   folders,
+  logs,
+  schemas,
 };

package/src/api/logs.tsx

@@ -0,0 +1,97 @@
+import { AxiosResponse } from "axios";
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+import { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_LOG_ACTIVITY: {
+    ...template,
+    endpoint: "/logs/activity-timeline",
+    method: "GET",
+  },
+  GET_LOG_ACTIVITY_BY_DAY: {
+    ...template,
+    endpoint: "/logs/activity-grouped-day",
+    method: "GET",
+  },
+  GET_LOG_ACTIVITY_BY_USER: {
+    ...template,
+    endpoint: "/logs/activity-grouped-user",
+    method: "GET",
+  },
+  GET_LOG_EVENT_TYPES: {
+    ...template,
+    endpoint: "/logs/activity-events-type",
+    method: "GET",
+  },
+  LOG_EXPORT: {
+    ...template,
+    endpoint: "/logs/activity-timeline/export",
+    method: "POST",
+    responseType: "blob",
+  },
+};
+
+const getLogActivityTimeline = async (params: LogActivityPaginationRequest): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.GET_LOG_ACTIVITY;
+
+  const paramsUrl = new URLSearchParams();
+
+  for (const [clave, valor] of Object.entries(params)) {
+    if (valor !== undefined && valor !== null) {
+      paramsUrl.append(clave, String(valor));
+    }
+  }
+
+  SERVICES.GET_LOG_ACTIVITY.dynamicUrl = `${host}${endpoint}?${paramsUrl.toString()}`;
+
+  return sendRequest(SERVICES.GET_LOG_ACTIVITY);
+};
+
+const getLogActivityTimelineByDay = async (params: LogActivityPaginationRequest): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.GET_LOG_ACTIVITY_BY_DAY;
+
+  const paramsUrl = new URLSearchParams();
+
+  for (const [clave, valor] of Object.entries(params)) {
+    if (valor !== undefined && valor !== null) {
+      paramsUrl.append(clave, String(valor));
+    }
+  }
+
+  SERVICES.GET_LOG_ACTIVITY_BY_DAY.dynamicUrl = `${host}${endpoint}?${paramsUrl.toString()}`;
+
+  return sendRequest(SERVICES.GET_LOG_ACTIVITY_BY_DAY);
+};
+
+const getLogActivityTimelineByUser = async (params: LogActivityPaginationRequest): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.GET_LOG_ACTIVITY_BY_USER;
+
+  const paramsUrl = new URLSearchParams();
+
+  for (const [clave, valor] of Object.entries(params)) {
+    if (valor !== undefined && valor !== null) {
+      paramsUrl.append(clave, String(valor));
+    }
+  }
+
+  SERVICES.GET_LOG_ACTIVITY_BY_USER.dynamicUrl = `${host}${endpoint}?${paramsUrl.toString()}`;
+
+  return sendRequest(SERVICES.GET_LOG_ACTIVITY_BY_USER);
+};
+
+const getLogActivityEventTypes = async (): Promise<AxiosResponse> => {
+  return sendRequest(SERVICES.GET_LOG_EVENT_TYPES);
+};
+
+const logExport = async (data: LogActivityExportRequest): Promise<AxiosResponse> => {
+  return sendRequest(SERVICES.LOG_EXPORT, { ...data });
+};
+
+export default {
+  getLogActivityTimeline,
+  getLogActivityTimelineByDay,
+  getLogActivityTimelineByUser,
+  getLogActivityEventTypes,
+  logExport,
+};

package/src/api/navigation.tsx

@@ -77,7 +77,7 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 const getNavigation = (id: number) => {
   const { host, endpoint } = SERVICES.GET_NAVIGATION;
 
-  SERVICES.GET_NAVIGATION.dynamicUrl = `${host}${endpoint}${id}`;
+  SERVICES.GET_NAVIGATION.dynamicUrl = `${host}${endpoint}${id}?skipDelete=false`;
 
   return sendRequest(SERVICES.GET_NAVIGATION);
 };

package/src/api/pages.tsx

@@ -165,7 +165,7 @@ const deletePage = async (pageID: number) => {
   return sendRequest(SERVICES.DELETE_PAGE);
 };
 
-const restorePage = async (id: number | number[]) => {
+const restorePage = async (id: number) => {
   const {
     host,
     endpoint: [prefix, suffix],

package/src/api/schemas.tsx

@@ -0,0 +1,18 @@
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  SCHEMAS_SELECT_ALL: {
+    ...template,
+    endpoint: "/schemas/select/all",
+    method: "GET",
+  },
+};
+
+const getSchemasSelectAll = async () => {
+  return sendRequest(SERVICES.SCHEMAS_SELECT_ALL);
+};
+
+export default {
+  getSchemasSelectAll,
+};

package/src/api/users.tsx

@@ -47,6 +47,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/user/", "/resend"],
     method: "PUT",
   },
+  REMOVE_USER_SITE: {
+    ...template,
+    endpoint: ["/user/", "/site/"],
+    method: "DELETE",
+  },
 };
 
 const getUsers = async (params: any) => {
@@ -133,6 +138,17 @@ const resendInvitation = async (id: number) => {
   return sendRequest(SERVICES.RESEND);
 };
 
+const removeUserFromSite = async (userID: number, siteID: number) => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.REMOVE_USER_SITE;
+
+  SERVICES.REMOVE_USER_SITE.dynamicUrl = `${host}${prefix}${userID}${suffix}${siteID}`;
+
+  return sendRequest(SERVICES.REMOVE_USER_SITE);
+};
+
 export default {
   getUsers,
   getSiteUsers,
@@ -143,4 +159,5 @@ export default {
   deleteUser,
   deleteUserBulk,
   resendInvitation,
+  removeUserFromSite,
 };

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -27,6 +27,7 @@ const NavConnectedField = (props: any): JSX.Element => {
     disabled,
     moduleCopy,
     themeElements,
+    isReadOnly,
   } = props;
 
   const updateValue = (key: string, value: any) => {
@@ -44,7 +45,7 @@ const NavConnectedField = (props: any): JSX.Element => {
   const defaultNavId = currentDefaultNav && currentDefaultNav.id;
   const selectedContentId = selectedContent && selectedContent.id;
   const isDefaultNav = defaultNavId === selectedContentId;
-  const isDisabled = isSetAsDefaultField && isDefaultNav;
+  const isDisabled = (isSetAsDefaultField && isDefaultNav) || isReadOnly;
   const isConditional = field.type === "ConditionalField";
 
   let isTemplateActivated = true;
@@ -64,7 +65,7 @@ const NavConnectedField = (props: any): JSX.Element => {
       selectedContent,
       isTemplateActivated,
       theme,
-      disabled,
+      disabled || isDisabled,
       site
     );
   }

package/src/components/ConfigPanel/Form/index.tsx

@@ -22,6 +22,7 @@ export const Form = (props: IFormProps): JSX.Element => {
     footer,
     isEditLive,
     headerHeight,
+    isDisabled,
   } = props;
 
   const isAllowedToEditSitePages = usePermission("content.editContentPages");
@@ -58,7 +59,7 @@ export const Form = (props: IFormProps): JSX.Element => {
         isGlobal={isGlobal}
         theme={theme}
         setHistoryPush={setHistoryPush}
-        isReadOnly={isEditLive}
+        isReadOnly={isEditLive || isDisabled}
       />
     );
   };
@@ -149,6 +150,7 @@ export interface IFormProps {
   footer?: number | null;
   isEditLive?: boolean;
   headerHeight: number;
+  isDisabled: boolean;
 }
 
 export default Form;

package/src/components/ConfigPanel/index.tsx

@@ -36,6 +36,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     header,
     footer,
     isEditLive,
+    isDisabled = false,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -91,6 +92,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           footer={footer}
           isEditLive={isEditLive}
           headerHeight={headerHeight}
+          isDisabled={isDisabled}
         />
       );
     }
@@ -136,6 +138,7 @@ export interface IStateProps {
   header?: number | null;
   footer?: number | null;
   isEditLive?: boolean;
+  isDisabled?: boolean;
 }
 
 export default ConfigPanel;

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

@@ -6,7 +6,7 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import * as S from "./style";
 
 const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
-  const { autoSummary, getPageSummary } = props;
+  const { autoSummary, getPageSummary, disabled } = props;
 
   const initialState = {
     isLoading: false,
@@ -30,8 +30,8 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
   const buttonText = state.isLoading
     ? "Processing..."
     : state.isClicked
-    ? "Regenerate SEO data with AI"
-    : "Generate SEO data with AI";
+      ? "Regenerate SEO data with AI"
+      : "Generate SEO data with AI";
 
   return (
     <>
@@ -47,11 +47,12 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
               onClick={handleClick}
               icon={!state.isLoading ? "Ia" : undefined}
               loader={state.isLoading ? "circle" : undefined}
+              disabled={disabled}
             >
               {buttonText}
             </S.StyledButton>
           </S.ButtonWrapper>
-          {state.error && <S.ErrorText>We're having problems. Please try again in a few minutes.</S.ErrorText>}
+          {state.error && <S.ErrorText>We&apos;re having problems. Please try again in a few minutes.</S.ErrorText>}
         </S.Wrapper>
       ) : (
         <></>
@@ -62,6 +63,7 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
 
 export interface ISummaryButtonProps {
   autoSummary: boolean;
+  disabled: boolean;
   getPageSummary: () => Promise<boolean>;
 }
 

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

@@ -3,7 +3,6 @@ import styled from "styled-components";
 const FieldWrapper = styled.div<{ error?: boolean; disabled?: boolean }>`
   display: flex;
   height: ${(p) => p.theme.spacing.l};
-  max-width: ${(p) => `calc(8 * ${p.theme.spacing.l})`};
   min-width: ${(p) => `calc(5 * ${p.theme.spacing.l})`};
   width: 100%;
   border: 1px solid

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

@@ -26,6 +26,7 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
     isFormIATranslated,
     getFormTranslation,
     setIsFormTranslated,
+    disabled,
   } = props;
 
   const getContent = (type: "page" | "data" | "form") => {
@@ -99,6 +100,7 @@ const TranslateButton = (props: ITranslateButtonProps): JSX.Element => {
                 onClick={toggleModal}
                 icon={!state.isLoading ? "Ia" : undefined}
                 loader={state.isLoading ? "circle" : undefined}
+                disabled={disabled}
               >
                 {buttonText}
               </S.StyledButton>
@@ -136,6 +138,7 @@ export interface ITranslateButtonProps {
   isFormIATranslated: boolean;
   contentType: "page" | "data" | "form";
   formContent: FormContent | null;
+  disabled: boolean;
   getPageTranslation: (langID: number) => Promise<boolean>;
   getDataContentTranslation: (langID: number) => Promise<boolean>;
   getFormTranslation: (langID: number) => Promise<boolean>;

package/src/components/FloatingMenu/index.tsx

@@ -14,6 +14,10 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
     isCheckGroup,
     reactiveToHover,
     offset,
+    hasMargin = true,
+    fixedWidth,
+    actionOnClose,
+    disabled = false,
   } = props;
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const buttonRef = useRef<HTMLDivElement | null>(null);
@@ -40,6 +44,10 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
       return;
     }
 
+    if (actionOnClose) {
+      actionOnClose();
+    }
+
     setOpen(false);
   };
 
@@ -49,8 +57,16 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
     isChecked && setOpen(false);
   };
 
+  const closeWhenApply = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLSpanElement;
+    if (target.innerHTML === "Apply") {
+      setOpen(false);
+    }
+  };
+
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
+    if (disabled) return;
     const buttonWasClicked = buttonRef.current?.contains(e.target as HTMLElement);
     const optionWasSelected = isOpen && menuOptionsRef.current?.contains(e.target as HTMLElement);
 
@@ -61,6 +77,8 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
     if (optionWasSelected) {
       closeOnSelect ? (isCheckGroup ? closeWhenChecked(e) : setOpen(!isOpen)) : setOpen(true);
     }
+
+    closeWhenApply(e);
   };
 
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>
@@ -90,7 +108,9 @@ const FloatingMenu = (props: IFloatingProps): JSX.Element => {
           offset={offset}
           data-testid="floating-menu-wrapper"
         >
-          <S.Menu>{children}</S.Menu>
+          <S.Menu hasMargin={hasMargin} width={fixedWidth}>
+            {children}
+          </S.Menu>
         </S.MenuWrapper>
       )}
     </S.Wrapper>
@@ -106,6 +126,10 @@ export interface IFloatingProps {
   isCheckGroup?: boolean;
   reactiveToHover?: boolean;
   offset?: number;
+  hasMargin?: boolean;
+  fixedWidth?: number;
+  actionOnClose?(): void;
+  disabled?: boolean;
 }
 
 export default FloatingMenu;

package/src/components/FloatingMenu/style.tsx

@@ -16,8 +16,9 @@ const MenuWrapper = styled.div<{ isInAppBar?: boolean; position: string; offset?
   ${(p) => p.position}: ${(p) => (p.offset ? `${p.offset}px` : "0")};
 `;
 
-const Menu = styled.div`
-  padding: ${(p) => p.theme.spacing.xs} 0;
+const Menu = styled.div<{ hasMargin: boolean; width?: number }>`
+  padding: ${(p) => (p.hasMargin ? `${p.theme.spacing.xs} 0` : `${p.theme.spacing.xs} 0 0 0`)};
+  width: ${(p) => (p.width ? `${p.width}px` : "auto")};
   max-width: ${(p) => `calc(${p.theme.spacing.l} * 5)`};
   min-width: ${(p) => `calc(${p.theme.spacing.m} * 7)`};
   background: ${(p) => p.theme.color.uiBackground02};

package/src/components/LanguageMenu/index.tsx

@@ -63,7 +63,7 @@ const LanguageMenu = (props: ILanguageMenuProps): JSX.Element => {
 
   return (
     <S.ActionMenu data-testid="language-menu">
-      {availableLanguages && availableLanguages.map((item) => languageMenuItem(item))}
+      {!!availableLanguages.length && availableLanguages.map((item) => languageMenuItem(item))}
     </S.ActionMenu>
   );
 };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -93,7 +93,7 @@ const AppBar = (props: IProps): JSX.Element => {
           <Flag name={language.locale} size="24" />
         </S.FlagWrapper>
         <S.LanguageTextWrapper data-testid="language-locale-label">{language.locale}</S.LanguageTextWrapper>
-        <DownArrowButton />
+        {!!availableLanguages?.length && <DownArrowButton />}
       </>
     ) : (
       <></>
@@ -218,6 +218,7 @@ const AppBar = (props: IProps): JSX.Element => {
                   isInAppBar={true}
                   position="left"
                   offset={rightButton || rightLineButton ? 0 : -85}
+                  disabled={!availableLanguages.length}
                 >
                   <LanguageMenu
                     language={language.locale}
@@ -262,13 +263,13 @@ const AppBar = (props: IProps): JSX.Element => {
             type="button"
             buttonStyle="line"
             onClick={rightLineButton.action}
-            disabled={rightLineButton.disabled}
+            {...rightLineButton}
           >
             {rightLineButton.label}
           </Button>
         )}
         {rightButton && (
-          <Button className="button" type="button" onClick={rightButton.action} disabled={rightButton.disabled}>
+          <Button className="button" type="button" onClick={rightButton.action} {...rightButton}>
             {rightButton.label}
           </Button>
         )}

package/src/components/RestoreModal/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { Modal } from "@ax/components";
+
+import * as S from "./style";
+
+const RestorePageModal = (props: IRestorePageProps): JSX.Element => {
+  const { isOpen, toggleModal, isChild, hasIssues, restorePage } = props;
+
+  const buttonText = hasIssues ? "Ok, restore it" : "Yes, restore it";
+
+  const mainRestoreAction = { title: buttonText, onClick: restorePage };
+  const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+  const title = hasIssues ? "Possible compatibility issues" : "Restore item";
+  const modalText = hasIssues ? (
+    <>
+      Restoring deleted items <strong>may cause conflicts if their structure has changed since removal</strong>. Please
+      review the restored content after recovery.
+    </>
+  ) : (
+    <>
+      You are about to restore this item.{" "}
+      <strong>It will reappear on your site exactly as it was before it was deleted.</strong> Are you sure you want to
+      continue?
+    </>
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title={title}
+      secondaryAction={secondaryModalAction}
+      mainAction={mainRestoreAction}
+      size="S"
+      height={240}
+      isChild={isChild}
+    >
+      <S.ModalContent>{modalText}</S.ModalContent>
+    </Modal>
+  );
+};
+
+interface IRestorePageProps extends IModal {
+  hasIssues: boolean;
+  restorePage(): void;
+}
+
+export default RestorePageModal;

package/src/components/RestoreModal/style.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+`;
+
+export { ModalContent };

package/src/components/SearchField/index.tsx

@@ -132,7 +132,7 @@ export interface ISearchFieldProps {
   onFilterChange?(filter: string): void;
   small?: boolean;
   focus?: boolean;
-  size?: "M" | "S" | "XS";
+  size?: "M" | "S" | "XS" | "XXS";
   value?: string;
 }
 

package/src/components/SearchField/style.tsx

@@ -12,8 +12,8 @@ const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>
     p.disabled
       ? p.theme.color.interactiveDisabled
       : p.closeOnInactive
-      ? p.theme.color.interactive01
-      : p.theme.color.uiLine};
+        ? p.theme.color.interactive01
+        : p.theme.color.uiLine};
   border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
   border-style: solid;
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
@@ -26,13 +26,13 @@ const Input = styled.input<{
   closeOnInactive: boolean;
   disabled: boolean;
   small?: boolean;
-  inputSize: "M" | "S" | "XS";
+  inputSize: "M" | "S" | "XS" | "XXS";
 }>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
   flex: 1 1 auto;
-  height: ${(p) => (p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
+  height: ${(p) => (p.inputSize === "XXS" ? "32px" : p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
   padding-left: ${(p) => p.theme.spacing.s};
   border: none;
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};