@griddo/ax 10.1.32 → 10.1.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.1.32",
+  "version": "10.1.34",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4070adfcad5961ec9ed3395c0d445c586768b0ca"
+  "gitHead": "a32a21230a8bbfb36e6ac9f2f4b24065f880a61f"
 }

package/src/__tests__/components/Gallery/Gallery.test.tsx

@@ -149,72 +149,55 @@ describe("Gallery component rendering", () => {
     expect(screen.queryAllByTestId("grid-item")).toHaveLength(2);
   });
 
-  it("should activate the handleClick with an image", () => {
+  it("should show image data after click", () => {
     const defaultGalleryProps = mock<IGalleryProps>();
     const defaultDispatchProps = mock<IDispatchProps>();
 
-    const dataProps = {
-      items: [
-        {
-          id: 1001,
-          name: "Imagen_Interior_fullstack.png",
-          title: "",
-          description: "",
-          alt: "",
-          tags: [],
-          url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-          thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-          publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-          damId: "imagen-interior-fullstack",
-          published: new Date("2022-06-30T07:06:54.352Z"),
-          size: 55286,
-          width: 680,
-          height: 353,
-          orientation: "L",
-          site: "Global",
-        },
-        {
-          id: 1002,
-          name: "Imagen_Interior_fullstack_2.png",
-          title: "",
-          description: "",
-          alt: "",
-          tags: [],
-          url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-          thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-          publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-          damId: "imagen-interior-fullstack",
-          published: new Date("2022-06-30T07:06:54.352Z"),
-          size: 55286,
-          width: 680,
-          height: 353,
-          orientation: "L",
-          site: "Global",
-        },
-      ],
-      isImageSelected: true,
-      imageSelected: {
-        id: 1001,
-        name: "Imagen_Interior_fullstack.png",
-        title: "",
-        description: "",
-        alt: "",
-        tags: [],
-        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-        damId: "imagen-interior-fullstack",
-        published: new Date("2022-06-30T07:06:54.352Z"),
-        size: 55286,
-        width: 680,
-        height: 353,
-        orientation: "L",
-        site: "Global",
+    const responsePromise = Promise.resolve({
+      status: 200,
+      statusText: "ok",
+      data: {
+        items: [],
       },
-      page: 1,
-      isFinished: false,
+    } as AxiosResponse);
+
+    mockedAxios.mockResolvedValue(responsePromise);
+
+    defaultGalleryProps.data = defaultDataProps;
+    defaultGalleryProps.site = defaultSiteProps;
+    defaultGalleryProps.isLoading = {
+      init: false,
+      more: false,
+    };
+
+    const defaultProps = {
+      ...defaultGalleryProps,
+      ...defaultDispatchProps,
     };
 
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Gallery {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+    store.clearActions();
+
+    const images = screen.queryAllByTestId("image-item");
+    expect(screen.queryAllByTestId("image-item")).toHaveLength(2);
+
+    act(() => {
+      fireEvent.click(images[0]);
+    });
+
+    const imageName = screen.getByTestId("gallery-image-name");
+    expect(imageName).toHaveTextContent(defaultDataProps.items[0].name);
+  });
+
+  it("should hide image data after second click", () => {
+    const defaultGalleryProps = mock<IGalleryProps>();
+    const defaultDispatchProps = mock<IDispatchProps>();
+
     const responsePromise = Promise.resolve({
       status: 200,
       statusText: "ok",
@@ -252,10 +235,13 @@ describe("Gallery component rendering", () => {
       fireEvent.click(images[0]);
     });
 
-    expect(store.getActions()).toContainEqual({
-      payload: { data: dataProps },
-      type: "gallery/SET_DATA",
+    expect(screen.getByTestId("gallery-image-name")).toHaveTextContent(defaultDataProps.items[0].name);
+
+    act(() => {
+      fireEvent.click(images[0]);
     });
+
+    expect(screen.queryByTestId("gallery-image-name")).toBeFalsy();
   });
 
   it("should activate the setImage action", async () => {
@@ -296,25 +282,6 @@ describe("Gallery component rendering", () => {
           site: "Global",
         },
       ],
-      isImageSelected: true,
-      imageSelected: {
-        id: 1002,
-        name: "Imagen_Interior_fullstack_2.png",
-        title: "",
-        description: "",
-        alt: "",
-        tags: [],
-        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-        damId: "imagen-interior-fullstack",
-        published: new Date("2022-06-30T07:06:54.352Z"),
-        size: 55286,
-        width: 680,
-        height: 353,
-        orientation: "L",
-        site: "Global",
-      },
       page: 1,
       isFinished: false,
     };
@@ -359,11 +326,18 @@ describe("Gallery component rendering", () => {
       { store }
     );
 
+    const images = screen.queryAllByTestId("image-item");
+
+    act(() => {
+      fireEvent.click(images[0]);
+    });
+
     const buttonDetailPanel = screen.getByTestId("button-default");
 
     act(() => {
       fireEvent.click(buttonDetailPanel);
     });
+
     await waitFor(() => expect(getImageSelectedMocked).toBeCalled());
     expect(toggleModalMock).toBeCalled();
   });
@@ -426,25 +400,6 @@ describe("Gallery component rendering", () => {
           site: "Global",
         },
       ],
-      isImageSelected: true,
-      imageSelected: {
-        id: 1002,
-        name: "Imagen_Interior_fullstack_2.png",
-        title: "",
-        description: "",
-        alt: "",
-        tags: [],
-        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-        damId: "imagen-interior-fullstack",
-        published: new Date("2022-06-30T07:06:54.352Z"),
-        size: 55286,
-        width: 680,
-        height: 353,
-        orientation: "L",
-        site: "Global",
-      },
       page: 2,
       isFinished: false,
     };
@@ -469,26 +424,7 @@ describe("Gallery component rendering", () => {
     };
 
     const dataProps = {
-      imageSelected: {
-        alt: "",
-        damId: "imagen-interior-fullstack",
-        description: "",
-        height: 353,
-        id: 1002,
-        name: "Imagen_Interior_fullstack_2.png",
-        orientation: "L",
-        publicId: "thesaurus-dev/Imagen_Interior_fullstack_6c908d9f-b493-4c93-b4d2-a0439bc00820",
-        published: new Date("2022-06-30T07:06:54.352Z"),
-        site: "Global",
-        size: 55286,
-        tags: [],
-        thumb: "https://images.dev.griddo.io/w/215/h/161/imagen-interior-fullstack",
-        title: "",
-        url: "https://images.dev.griddo.io/imagen-interior-fullstack",
-        width: 680,
-      },
       isFinished: true,
-      isImageSelected: true,
       items: [
         {
           alt: "",
@@ -551,9 +487,15 @@ describe("Gallery component rendering", () => {
       { store }
     );
 
+    const images = screen.queryAllByTestId("image-item");
+
+    act(() => {
+      fireEvent.click(images[0]);
+    });
+
     const buttonDetailPanel = screen.getAllByTestId("button-line-inverse");
 
-    await act(() => {
+    await act(async () => {
       fireEvent.click(buttonDetailPanel[2]);
     });
 

package/src/__tests__/components/Gallery/GalleryPanel/DetailPanel/DetailPanel.test.tsx

@@ -12,7 +12,7 @@ import { parseTheme } from "@ax/helpers";
 import { history } from "@ax/routes";
 import GalleryDetailPanel, { IDetailPanelProps, IDispatchProps } from "@ax/components/Gallery/GalleryPanel/DetailPanel";
 import globalTheme from "@ax/themes/theme.json";
-import { IImageForm } from "@ax/types";
+import { IImage, IImageForm } from "@ax/types";
 
 // for testing copy to clipboard
 Object.assign(navigator, {
@@ -182,6 +182,7 @@ describe("Gallery component rendering", () => {
     const deleteImageMocked = defaultDispatchProps.deleteImage as jest.MockedFunction<
       (imageID: number) => Promise<boolean>
     >;
+    const selectImageMocked = defaultDetailProps.selectImage as jest.MockedFunction<(img: IImage | null) => void>;
 
     const defaultProps = {
       ...defaultDetailProps,
@@ -205,6 +206,7 @@ describe("Gallery component rendering", () => {
       fireEvent.click(buttonWrapper);
     });
     expect(screen.getByText(/1 image deleted/i)).toBeInTheDocument();
+    expect(selectImageMocked).toBeCalled();
     expect(refreshImagesMocked).toBeCalled();
   });
 

package/src/__tests__/components/Gallery/GalleryPanel/GalleryPanel.test.tsx

@@ -21,8 +21,6 @@ const mockStore = configureStore(middlewares);
 
 const defaultProps = mock<IGalleryPanelProps>();
 
-defaultProps.isImageSelected = true;
-defaultProps.imageSelected = null;
 defaultProps.validFormats = ["png", "jpg"];
 const setImageMocked = defaultProps.setImage as jest.MockedFunction<(imageData: any) => void>;
 defaultProps.isGlobalTab = true;

package/src/components/FieldContainer/index.tsx

@@ -13,7 +13,7 @@ const FieldContainer = (props: IFieldContainerProps) => {
 
   const hideField = () => updateValue(key, nullValue);
 
-  const containerValue = selectedContent[objKey];
+  const containerValue = selectedContent[objKey] !== undefined ? selectedContent[objKey] : null;
 
   const fieldProps = {
     fieldType: type,
@@ -28,7 +28,7 @@ const FieldContainer = (props: IFieldContainerProps) => {
   };
 
   const hasMultipleOptions = field.whiteList && field.whiteList.length > 1;
-  const nullValue = isContainer ? getNullValue(containerValue, hasMultipleOptions) : null;
+  const nullValue = isContainer && containerValue ? getNullValue(containerValue, hasMultipleOptions) : null;
   const hasNullValue = JSON.stringify(containerValue) === JSON.stringify(nullValue);
 
   const getField = () => <FieldsBehavior {...fieldProps} key={key} />;

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

@@ -81,7 +81,7 @@ const ImageField = (props: IImageFieldProps) => {
         </S.IconWrapper>
         <S.Text>Add image</S.Text>
       </S.FieldWrapper>
-      {value && Object.keys(value).length > 1 && typeof value !== "string" && (
+      {value && previewSrc && Object.keys(value).length > 1 && typeof value !== "string" && (
         <S.ImageDataWrapper data-testid="imageDataWrapper">
           <S.FileName>{value.name}</S.FileName>
           <S.ImageData>

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -87,8 +87,12 @@ const AutoItem = (props: IProps) => {
     return false;
   };
 
-  const handleSelectOnChange = (newValue: any) => {
-    getCategoryContent(newValue);
+  const handleSelectOnChange = (newValue: string | null) => {
+    if(newValue){
+      getCategoryContent(newValue);
+    } else {
+      setState({ ...state, selected: "", options: [] });
+    }
   };
 
   const handleCheckChange = (checkValue: any) => {

package/src/components/FieldsBehavior/index.tsx

@@ -52,7 +52,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
 
   const containerInfo: any = isComponentContainer && value && isEmptyContainer(value, hasMultipleOptions);
 
-  const { isEmpty } = containerInfo;
+  const isEmpty = containerInfo ? containerInfo.isEmpty : false;
   const showTitle = hasTitle && (!isEmpty || hasMultipleOptions);
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);

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

@@ -19,6 +19,7 @@ const GalleryDetailPanel = (props: IProps) => {
     isSaving,
     setImage,
     uploadImage,
+    selectImage,
   } = props;
 
   const initialState: IImageForm = {
@@ -96,7 +97,10 @@ const GalleryDetailPanel = (props: IProps) => {
   const handleDelete = async () => {
     if (imageForm.id) {
       const deleted = await deleteImage(imageForm.id);
-      if (deleted) setDeletedToast(true);
+      if (deleted) {
+        selectImage(null);
+        setDeletedToast(true);
+      }
       refreshImages();
     }
   };
@@ -145,7 +149,7 @@ const GalleryDetailPanel = (props: IProps) => {
           </Button>
           <IconAction icon="OpenOutside" size="m" onClick={handleOpenUrl} />
         </S.ImageWrapper>
-        <S.ImageName>{imageSelected.name}</S.ImageName>
+        <S.ImageName data-testid="gallery-image-name">{imageSelected.name}</S.ImageName>
         <S.Date>
           <strong>Uploaded:</strong> {getFormattedDateWithTimezone(imageSelected.published, "d MMM Y")}
         </S.Date>
@@ -226,6 +230,7 @@ export interface IDetailPanelProps {
   isGlobalTab: boolean;
   refreshImages: () => void;
   isSaving: IIsSaving;
+  selectImage(item: IImage | null): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -206,14 +206,13 @@ const mapStateToProps = (state: IRootState) => ({
 
 export interface IDispatchProps {
   getSiteImages(params: IGetSiteImages): Promise<void>;
-  selectImage(item: IImage): void;
+  selectImage(item: IImage | null): void;
   uploadError: (error: boolean, msg?: string) => Promise<void>;
   uploadImage: (imageFiles: File | File[], site: number | string) => Promise<IImage>;
 }
 
 const mapDispatchToProps = {
   getSiteImages: galleryActions.getSiteImages,
-  selectImage: galleryActions.selectImage,
   uploadError: galleryActions.uploadError,
   uploadImage: galleryActions.uploadImage,
 };

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

@@ -7,32 +7,32 @@ import DetailPanel from "./DetailPanel";
 import * as S from "./style";
 
 const GalleryPanel = (props: IGalleryPanelProps) => {
-  const { isImageSelected, imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages } =
-    props;
+  const { imageSelected, validFormats, setImage, isGlobalTab, site, selectedTab, refreshImages, selectImage } = props;
   const allowUpload = !isGlobalTab || !selectedTab;
 
   return (
     <S.GalleryPanel>
       <GalleryDragAndDrop
-        isImageSelected={isImageSelected}
+        isImageSelected={!!imageSelected}
         validFormats={validFormats}
         site={site}
         allowUpload={allowUpload}
         refreshImages={refreshImages}
+        selectImage={selectImage}
       />
       <DetailPanel
         imageSelected={imageSelected}
-        isImageSelected={isImageSelected}
+        isImageSelected={!!imageSelected}
         setImage={setImage}
         isGlobalTab={isGlobalTab}
         refreshImages={refreshImages}
+        selectImage={selectImage}
       />
     </S.GalleryPanel>
   );
 };
 
 export interface IGalleryPanelProps {
-  isImageSelected: boolean;
   imageSelected: IImage | null;
   validFormats: string[];
   setImage: (imageData: any) => void;
@@ -40,6 +40,7 @@ export interface IGalleryPanelProps {
   site: number | string;
   selectedTab: string;
   refreshImages: () => Promise<void>;
+  selectImage(item: IImage | null): void;
 }
 
 export default memo(GalleryPanel);

package/src/components/Gallery/index.tsx

@@ -10,21 +10,21 @@ import Orientation from "./GalleryFilters/Orientation";
 import SortBy from "./GalleryFilters/SortBy";
 import Type from "./GalleryFilters/Type";
 import GalleryPanel from "./GalleryPanel";
-import * as S from "./style";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import { getSortedListStatus } from "./utils";
 
+import * as S from "./style";
+
 const itemsPerPage = 50;
 const firstPage = 1;
 
 const Gallery = (props: IProps): JSX.Element => {
-  const { data, isLoading, getSiteImages, selectImage, getImageSelected, toggleModal, site, uploadError } = props;
+  const { data, isLoading, getSiteImages, getImageSelected, toggleModal, site, uploadError } = props;
 
   const tabs = [];
   if (site) tabs.unshift(...["Local", "Global"]);
   const [selectedTab, setSelectedTab] = useState(tabs[0]);
-  const [selectedImage, setSelectedImage] = useState<number>();
-  const [imageSelectedData, setImageSelectedData] = useState<IData>(data);
+  const [selectedImage, setSelectedImage] = useState<IImage | null>(null);
   const isLocalTab = selectedTab === "Local";
   const isGlobalTab = selectedTab === "Global";
   const galleryScope = isLocalTab ? site.id : "global";
@@ -57,10 +57,6 @@ const Gallery = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [galleryScope]);
 
-  useEffect(() => {
-    setImageSelectedData(data);
-  }, [data]);
-
   useEffect(() => {
     const handleScroll = () => {
       const loadMore =
@@ -88,17 +84,22 @@ const Gallery = (props: IProps): JSX.Element => {
   };
 
   useEffect(() => {
+    setSelectedImage(null);
     const params = getParams();
     getSiteImages({ ...params, page: firstPage });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentFilterQuery, searchQuery]);
 
-  const handleClick = (item: IImage) => (e: React.MouseEvent<HTMLDivElement>) => {
-    selectImage(item);
-  };
+  const handleClick = (item: IImage) => () => {
+    if(item.id !== selectedImage?.id) {
+      setSelectedImage(item);
+    } else {
+      setSelectedImage(null);
+    }
+  }
 
   const setImage = (imageData: any) => {
-    const updatedImage = { ...imageSelectedData.imageSelected, ...imageData };
+    const updatedImage = { ... selectedImage,...imageData };
     getImageSelected(updatedImage);
     toggleModal();
   };
@@ -118,6 +119,13 @@ const Gallery = (props: IProps): JSX.Element => {
     setCurrentFilterQuery(filterQuery);
   };
 
+  const handleSelectedTab = (tab: string) => {
+    if (tab !== selectedTab) {
+      setSelectedImage(null);
+      setSelectedTab(tab);
+    }
+  };
+
   const emptyStateProps = {
     icon: "search",
     title: "Oh! No Results Found",
@@ -132,7 +140,7 @@ const Gallery = (props: IProps): JSX.Element => {
         <S.Header>
           {!!tabs.length && (
             <S.TabsWrapper>
-              <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} noMargins />
+              <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
             </S.TabsWrapper>
           )}
           <S.Filters>
@@ -169,11 +177,7 @@ const Gallery = (props: IProps): JSX.Element => {
                   {data &&
                     data.items &&
                     data.items.map((item: IImage, index: number) => {
-                      const isSelected = data.imageSelected ? item.id === data.imageSelected.id : false;
-                      if (isSelected && selectedImage !== item.id) {
-                        setSelectedImage(item.id);
-                        setImageSelectedData(data);
-                      }
+                      const isSelected = item.id === selectedImage?.id;
                       return (
                         <S.GridItem data-testid="grid-item" key={item.name + index} orientation={item.orientation}>
                           <S.ImageWrapper
@@ -205,14 +209,14 @@ const Gallery = (props: IProps): JSX.Element => {
         </S.GalleryWrapper>
       </S.GalleryTabs>
       <GalleryPanel
-        isImageSelected={imageSelectedData?.isImageSelected}
-        imageSelected={imageSelectedData?.imageSelected}
+        imageSelected={selectedImage}
         validFormats={validFormats}
         setImage={setImage}
         isGlobalTab={!isLocalTab}
         site={galleryScope}
         selectedTab={selectedTab}
         refreshImages={refreshImages}
+        selectImage={setSelectedImage}
       />
     </S.Wrapper>
   );
@@ -233,13 +237,11 @@ const mapStateToProps = (state: IRootState) => ({
 
 export interface IDispatchProps {
   getSiteImages(params: IGetSiteImages): Promise<void>;
-  selectImage(item: IImage): void;
   uploadError: (error: boolean, msg?: string) => Promise<void>;
 }
 
 const mapDispatchToProps = {
   getSiteImages: galleryActions.getSiteImages,
-  selectImage: galleryActions.selectImage,
   uploadError: galleryActions.uploadError,
 };
 

package/src/components/TableFilters/CategoryFilter/style.tsx

@@ -22,6 +22,7 @@ const IconsWrapper = styled.div`
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   overflow-y: auto;
+  max-height: 300px;
 `;
 
 export { HeaderWrapper, IconsWrapper, ChecksWrapper };

package/src/components/Tooltip/index.tsx

@@ -4,7 +4,7 @@ import { useHandleClickOutside } from "@ax/hooks";
 import * as S from "./style";
 
 const Tooltip = (props: ITooltipProps): JSX.Element => {
-  const { content, children, hideOnClick = true, bottom, left } = props;
+  const { content, children, hideOnClick = true, bottom, left, expanded, top } = props;
 
   const initialState: IState = {
     active: false,
@@ -79,7 +79,13 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
   if (!content) return children;
 
   return (
-    <S.Tooltip data-testid="tooltip-component" onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
+    <S.Tooltip
+      data-testid="tooltip-component"
+      onMouseEnter={showTip}
+      onMouseLeave={hideTip}
+      onMouseDown={handleClick}
+      expanded={expanded}
+    >
       <div ref={childrenRef}>{children}</div>
       <S.Tip
         data-testid="tip-component"
@@ -89,6 +95,8 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
         ref={tipRef}
         fixOutOfBounds={fixOutOfBounds}
         left={left}
+        expanded={expanded}
+        top={top}
       >
         {content}
       </S.Tip>
@@ -104,11 +112,13 @@ interface IState {
 }
 
 export interface ITooltipProps {
-  content: string | boolean | undefined;
+  content?: string | boolean | JSX.Element[];
   children: any;
   hideOnClick?: boolean;
   bottom?: boolean;
   left?: number;
+  expanded?: boolean;
+  top?: number;
 }
 
 export default Tooltip;

package/src/components/Tooltip/style.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-const Tooltip = styled.div`
-  position: relative;
+const Tooltip = styled.div<{ expanded?: boolean }>`
+  position: ${(p) => (p.expanded ? "static" : "relative")};
 `;
 
 const Tip = styled.span<{
@@ -10,24 +10,28 @@ const Tip = styled.span<{
   bottom?: boolean;
   fixOutOfBounds: number;
   left?: number;
+  top?: number;
+  expanded?: boolean;
 }>`
   position: absolute;
-  top: ${(p) => (p.bottom ? "auto" : "-32px")};
+  top: ${(p) => (p.top ? `${p.top}px` : p.bottom ? "auto" : "-32px")};
   bottom: ${(p) => (p.bottom ? "-32px" : "auto")};
   left: ${(p) => (p.left ? `${p.left}px` : "auto")};
   border-radius: 2px;
-  transform: translateX(calc(-50% + ${(p) => `${p.childrenWidth / 2}px`} - ${(p) => `${p.fixOutOfBounds}px`}));
+  transform: ${(p) =>
+    p.expanded ? "none" : `translateX(calc(-50% + ${p.childrenWidth / 2}px - ${p.fixOutOfBounds}px))`};
   padding: 8px;
   color: #fff;
   background: ${(p) => p.theme.color.uiMainMenuBackground};
   font-size: 12px;
   line-height: 1;
   z-index: 100;
-  white-space: nowrap;
+  white-space: ${(p) => (p.expanded ? "normal" : "nowrap")};
   display: ${(p) => (p.active ? "block" : "none")};
   animation: fadeIn 0.3s;
   font-weight: normal;
   text-transform: none;
+  max-width: 350px;
 
   @keyframes fadeIn {
     from {

package/src/containers/Gallery/actions.tsx

@@ -67,8 +67,6 @@ function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: ()
           setData({
             items: images,
             page,
-            isImageSelected: data.isImageSelected,
-            imageSelected: data.imageSelected,
             isFinished: result.data.items.length < items,
           })
         );
@@ -81,19 +79,6 @@ function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: ()
   };
 }
 
-function selectImage(item: IImage): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
-  return async (dispatch, getState) => {
-    const {
-      gallery: { data },
-    } = getState();
-    if (data?.imageSelected?.id === item.id) {
-      dispatch(setData({ ...data, imageSelected: null, isImageSelected: false }));
-    } else {
-      dispatch(setData({ ...data, imageSelected: item, isImageSelected: true }));
-    }
-  };
-}
-
 function uploadImage(imageFiles: File | File[], site: number | string): (dispatch: Dispatch) => Promise<IImage> {
   return async (dispatch) => {
     try {
@@ -162,14 +147,8 @@ function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRoo
         gallery: { data },
       } = getState();
       const responseActions = {
-        handleSuccess: () => {
-          dispatch(setData({ ...data, isImageSelected: false, imageSelected: null }));
-          return true;
-        },
-        handleError: (response: any) => {
-          appActions.handleError(response)(dispatch);
-          return false;
-        },
+        handleSuccess: () => null,
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
       const callback = async () => images.deleteImage(imageID);
@@ -182,4 +161,4 @@ function deleteImage(imageID: number): (dispatch: Dispatch, getState: () => IRoo
   };
 }
 
-export { setIsLoading, getSiteImages, uploadImage, updateImage, deleteImage, selectImage, uploadError };
+export { setIsLoading, getSiteImages, uploadImage, updateImage, deleteImage, uploadError };

package/src/containers/Gallery/reducer.tsx

@@ -11,8 +11,6 @@ import { GalleryActionsCreators } from "./interfaces";
 
 export interface IData {
   items: IImage[];
-  isImageSelected: boolean;
-  imageSelected: IImage | null;
   page: number;
   isFinished: boolean;
 }
@@ -41,8 +39,6 @@ export interface IGalleryState {
 export const initialState = {
   data: {
     items: [],
-    isImageSelected: false,
-    imageSelected: null,
     page: 1,
     isFinished: false,
   },

package/src/containers/StructuredData/actions.tsx

@@ -577,7 +577,7 @@ function getDataContentTranslation(langID: number): (dispatch: Dispatch, getStat
 
       const responseActions = {
         handleSuccess: (data: IStructuredDataContent) => {
-          const newForm = {...data, canBeTranslated: false };
+          const newForm = { ...data, canBeTranslated: false };
           dispatch(setForm(newForm));
           dispatch(setIsIATranslated(true));
         },
@@ -614,6 +614,18 @@ function setIsTranslated(isTranslated: boolean): (dispatch: Dispatch) => Promise
   };
 }
 
+function resetCurrentData(): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setCurrentData(null));
+      dispatch(setCurrentDataID(null));
+      dispatch(setCurrentDataContent([]));
+    } catch (e) {
+      console.log("Error", e);
+    }
+  };
+}
+
 export {
   setIsActive,
   setCategories,
@@ -649,4 +661,5 @@ export {
   getDataContentTranslation,
   setFormValues,
   setIsTranslated,
+  resetCurrentData,
 };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useRef } from "react";
+import React, { useEffect, useCallback, useState, useRef, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
 import { structuredDataActions } from "@ax/containers/StructuredData";
@@ -32,6 +32,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
     deleteDataContent,
     restoreDataContent,
     setHistoryPush,
+    resetCurrentData,
   } = props;
 
   const itemsPerPage = 50;
@@ -67,11 +68,11 @@ const CategoriesList = (props: IProps): JSX.Element => {
   }, [page]);
 
   const getContents = useCallback(
-    (id: string) => {
+    async (id: string) => {
       const params: any = getParams();
       params.dataID = id;
       setSelectedCategory(id, scope);
-      getStructuredDataContents(params, currentSiteID);
+      await getStructuredDataContents(params, currentSiteID);
     },
     [getStructuredDataContents, currentSiteID, getParams, setSelectedCategory, scope]
   );
@@ -81,6 +82,12 @@ const CategoriesList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lang, currentStructuredData, page]);
 
+  useLayoutEffect(() => {
+    return () => {
+      resetCurrentData();
+    };
+  }, []);
+
   const handleClick = (dataID: string) => {
     setSelectedCategory(dataID, scope);
   };
@@ -235,13 +242,14 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 interface IDispatchProps {
-  getStructuredDataContents(params: IGetStructuredDataParams, siteID?: number | undefined): void;
+  getStructuredDataContents(params: IGetStructuredDataParams, siteID?: number | undefined): Promise<void>;
   resetCategoryValues(): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
   setSelectedCategory(id: string, scope: string): void;
   deleteDataContent(catID: number[]): Promise<boolean>;
   restoreDataContent(catID: number | number[]): void;
   setHistoryPush(path: string): void;
+  resetCurrentData(): Promise<void>;
 }
 
 interface ICategoriesProps {
@@ -266,6 +274,7 @@ const mapDispatchToProps = {
   deleteDataContent: structuredDataActions.deleteStructuredDataContent,
   restoreDataContent: structuredDataActions.restoreStructuredDataContent,
   setHistoryPush: appActions.setHistoryPush,
+  resetCurrentData: structuredDataActions.resetCurrentData,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CategoriesList);

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

@@ -487,8 +487,21 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
               Home
             </S.Home>
           )}
-          <S.Title width={title.width}>{title.text}</S.Title>
-          {!isHome && <S.Slug width={path.width}>{path.text}</S.Slug>}
+          <Tooltip
+            content={[
+              <>
+                <strong>{page.title}</strong>
+                <br />
+              </>,
+              <>{fullPath.page}</>,
+            ]}
+            left={0}
+            top={1}
+            expanded
+          >
+            <S.Title width={title.width}>{title.text}</S.Title>
+            {!isHome && <S.Slug width={path.width}>{path.text}</S.Slug>}
+          </Tooltip>
         </S.NameCell>
         {CategoryColumns}
         {activeColumns.includes("type") && (

package/src/modules/Content/PageItem/style.tsx

@@ -27,7 +27,6 @@ const NameCell = styled(Cell)`
 const Title = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  display: inline;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -35,7 +34,6 @@ const Title = styled.div<{ width: number }>`
 `;
 
 const Slug = styled.div<{ width: number }>`
-  display: inline;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -121,6 +119,7 @@ const StyledActionMenu = styled(ActionMenu)`
 `;
 
 const PageRow = styled(Row)<{ global?: boolean }>`
+  position: relative;
   &:hover {
     ${TypeCell}, ${SeoCell} {
       color: ${(p) => p.theme.color.textHighEmphasis};

package/src/modules/Content/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useRef } from "react";
+import React, { useEffect, useCallback, useState, useRef, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { schemas } from "components";
@@ -237,17 +237,17 @@ const Content = (props: IProps): JSX.Element => {
     return params;
   }, [filter, currentSiteInfo, isStructuredData, page, searchQuery, lang]);
 
-  const getPages = (params: any, filterQuery?: any) => {
+  const getPages = async (params: any, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";
     const pageFilter = isStructuredDataPage ? filter : undefined;
-    getSitePages(params, pageFilter, filterQuery);
+    await getSitePages(params, pageFilter, filterQuery);
   };
 
   const getSiteContent = useCallback(
-    (filterQuery?: any) => {
+    async (filterQuery?: any) => {
       const params = getParams();
       isStructuredData && params.siteID
-        ? getStructuredDataContents(params, params.siteID)
+        ? await getStructuredDataContents(params, params.siteID)
         : getPages(params, filterQuery);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -263,16 +263,17 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line
   }, [page, filter, currentFilterQuery, searchQuery]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setPage(firstPage);
     const initialColumns = filter !== "unique-pages" ? filterColumns : defaultColumns;
     setColumnsState(initialColumns);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
+
   const params = { language: lang.id, recentSitesNumber: 7 };
   const fetchSitesByLang = async () => await getSitesByLang(params);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     checkUserSession();
     if (history.action !== "POP" && (!locationState || locationState.isFromEditor !== true)) {
       setFilter("unique-pages");

package/src/modules/Login/index.tsx

@@ -28,7 +28,7 @@ const LoginModule = (props: IProps) => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    login(state.email, state.password, state.rememberMe);
+    await login(state.email, state.password, state.rememberMe);
   };
 
   const _handleEmail = (email: string) => {
@@ -63,7 +63,7 @@ interface IProps {
   isLoggingIn: boolean;
   children: any;
   globalSettings: IGlobalSettings;
-  login(email: string, password: string, rememberMe: boolean): void;
+  login(email: string, password: string, rememberMe: boolean): Promise<void>;
   resetError(): void;
   getGlobalSettings(): void;
 }

package/src/modules/Sites/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useLayoutEffect } from "react";
 
 import { connect } from "react-redux";
 import { withRouter, RouteComponentProps } from "react-router-dom";
@@ -25,25 +25,25 @@ const Sites = (props: ISitesProps): JSX.Element => {
     globalLangs,
   } = props;
 
-  const fetchInitialData = async () => {
-    setCurrentSiteInfo(null);
-    await getStructuredData(token);
-    await getAllDataPacks();
-    await getUser("me");
+  useLayoutEffect(() => {
+    const fetchInitialData = async () => {
+      setCurrentSiteInfo(null);
+      await getUser("me", token);
+      await getStructuredData(token);
+      await getAllDataPacks();
 
-    const defaultLanguage = globalLangs.find((language: any) => language.isDefault);
-    if (defaultLanguage) {
-      const { locale, id } = defaultLanguage;
-      const lang = {
-        locale,
-        id,
-      };
+      const defaultLanguage = globalLangs.find((language: any) => language.isDefault);
+      if (defaultLanguage) {
+        const { locale, id } = defaultLanguage;
+        const lang = {
+          locale,
+          id,
+        };
 
-      setLanguage(lang);
-    }
-  };
+        setLanguage(lang);
+      }
+    };
 
-  useEffect(() => {
     fetchInitialData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
@@ -68,7 +68,7 @@ interface IDispatchProps {
   getStructuredData(token: string, siteId?: number): Promise<void>;
   setLanguage(lang: { locale: string; id: number | null }): void;
   getAllDataPacks: () => Promise<void>;
-  getUser: (id: string) => Promise<void>;
+  getUser: (id: string, token?: string) => Promise<void>;
 }
 
 export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;

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

@@ -26,7 +26,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
             <S.Heading>{category.title}</S.Heading>
             {category.filters &&
               category.filters.map((filter: any, filterKey: number) => {
-                const { name, value } = filter;
+                const { name, value, editable } = filter;
 
                 const handleClick = () => {
                   onClick(value);
@@ -43,7 +43,7 @@ const ContentFilters = (props: IProps): JSX.Element => {
                 };
 
                 return (
-                  <MenuItem key={filterKey} onClick={handleClick} extendedAction={isSelected ? extendedAction : null}>
+                  <MenuItem key={filterKey} onClick={handleClick} extendedAction={isSelected && editable ? extendedAction : null}>
                     <NavLink to="#" className={selectedClass}>
                       <S.Link active={isSelected}>
                         {name}

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

@@ -4,6 +4,7 @@ const getDynamicFilters = (values: any) =>
     name: value.title,
     value: value.id,
     fromPage: value.fromPage,
+    editable: value.editable ? value.editable : false,
   }));
 
 const getFilters = (staticFilters: any, dynamicValues: any) => {

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

@@ -54,6 +54,20 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     skipReview,
   } = props;
 
+  const { locale } = lang;
+  const {
+    pageLanguages,
+    metaDescription,
+    metaTitle,
+    isIndexed,
+    availableSites,
+    structuredData,
+    structuredDataContent,
+    fullUrl,
+  } = globalPage;
+
+  const slug = fullUrl ? fullUrl.replace(/^.*\/\/[^\/]+\/[\w-.]+/, "") : "";
+
   const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
 
   const initValue = { title: "", slug: "" };
@@ -67,19 +81,9 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const theme: any = useTheme();
   const nameCellPadding = Number(theme.spacing.s.slice(0, -2));
   const title = useAdaptiveText(nameCellRef, globalPage.title, nameCellPadding);
+  const path = useAdaptiveText(nameCellRef, slug, nameCellPadding);
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
 
-  const { locale } = lang;
-  const {
-    pageLanguages,
-    metaDescription,
-    metaTitle,
-    isIndexed,
-    availableSites,
-    structuredData,
-    structuredDataContent,
-  } = globalPage;
-
   const publishedTooltip: Record<string, string> = {
     active: "Live",
     "upload-pending": "Publication pending",
@@ -361,7 +365,21 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
           <CheckField name="check" value={globalPage.id} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
         <S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
-          <S.Title width={title.width}>{title.text}</S.Title>
+          <Tooltip
+            content={[
+              <>
+                <strong>{globalPage.title}</strong>
+                <br />
+              </>,
+              <>{slug}</>,
+            ]}
+            left={0}
+            top={1}
+            expanded
+          >
+            <S.Title width={title.width}>{title.text}</S.Title>
+            <S.Slug width={path.width}>{path.text}</S.Slug>
+          </Tooltip>
         </S.NameCell>
         {isAllPages && activeColumns.includes("type") && (
           <S.TypeCell role="cell">{structuredData && getStructuredDataTitle(structuredData)}</S.TypeCell>

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

@@ -19,7 +19,13 @@ const NameCell = styled(Cell)`
 const Title = styled.div<{ width: number }>`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  display: inline;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: ${(p) => `${p.width}px`};
+`;
+
+const Slug = styled.div<{ width: number }>`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -83,6 +89,7 @@ const StyledActionMenu = styled(ActionMenu)`
 `;
 
 const StructuredDataRow = styled(Row)<{ disabled: boolean }>`
+  position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:hover {
     ${StyledActionMenu} {
@@ -174,4 +181,5 @@ export {
   FloatingSeo,
   ModalContent,
   Title,
+  Slug,
 };

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

@@ -148,7 +148,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     live: { title: "Live", show: true },
     status: { title: "Status", show: true },
     translation: { title: "Trans.", show: true },
-    ...(isStructuredDataFromPage && { seo: { title: "SEO", show: true } }),
+    ...((isStructuredDataFromPage || currentStructuredData === null)  && { seo: { title: "SEO", show: true } }),
   };
 
   const extraColumns = categoryColumns.reduce((acc: Record<string, IColumn>, cur: any) => {
@@ -193,19 +193,19 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   }, [page, searchQuery]);
 
   const getStructuredData = useCallback(
-    (id: string, filterQuery?: string) => {
+    async (id: string, filterQuery?: string) => {
       const params: IGetStructuredDataParams = { ...getParams(), dataID: null };
       params.dataID = id;
       params.filterQuery = filterQuery;
-      getStructuredDataContents(params);
+      await getStructuredDataContents(params);
     },
     [getParams, getStructuredDataContents]
   );
 
-  const handleGetGlobalPages = () => {
+  const handleGetGlobalPages = async () => {
     const params: IGetGlobalPagesParams = getParams();
     params.filterStructuredData = isStructuredDataFromPage && !isAllPages && filter;
-    getGlobalPages(params, currentFilterQuery);
+    await getGlobalPages(params, currentFilterQuery);
   };
 
   const handleGetStructuredData = () => getStructuredData(filter, currentFilterQuery);
@@ -233,17 +233,15 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const isGlobalData = structuredData.global.some((data) => data.id === currentStructuredData?.id);
     const type = currentStructuredData && isGlobalData ? currentStructuredData.id : "all";
     setStructuredDataType(type);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStructuredData]);
 
-  useEffect(() => {
     filterItems("types", "all");
     if (filter === "all-pages" || !isStructuredDataFromPage) {
       filterItems("filterSites", "all");
+      setColumnsState({ all: allColumns });
     }
     unselectAllItems();
     if (filter !== "all-pages" && currentStructuredData) {
@@ -257,7 +255,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       }));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filter]);
+  }, [currentStructuredData]);
 
   useEffect(() => {
     if (!isFirstRender) {
@@ -289,9 +287,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       } else {
         emptyState.message = isAllPages
           ? "You don’t have pages with this content type yet."
-          : "To start using pages in your site, create as many pages as you need.";
-        emptyState.button = isAllPages ? "View all content" : "Create the first page";
-        emptyState.action = isAllPages ? resetFilterValues : addNewAction;
+          : isDataEditable ? "To start using pages in your site, create as many pages as you need." : undefined;
+        emptyState.button = isAllPages ? "View all content" : isDataEditable ? "Create the first page" : undefined;
+        emptyState.action = isAllPages ? resetFilterValues : isDataEditable ? addNewAction : undefined;
       }
       const isEmpty = isStructuredDataFromPage ? !currentSitePages.length : !currentDataContent.length;
       setIsEmpty(isEmpty);
@@ -320,7 +318,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setHistoryPush(path, isFromPage);
   };
 
-  const handleMenuClick = (dataID: string) => {
+  const handleMenuClick = async (dataID: string) => {
     setPage(firstPage);
     setSelectedStructuredData(dataID, scope);
   };
@@ -702,7 +700,7 @@ interface IDispatchProps {
   setHistoryPush(route: string, isEditor?: boolean): void;
   resetForm(setDefault?: boolean): void;
   setLanguage(lang: { locale: string; id: number }): void;
-  getStructuredDataContents(params: IGetStructuredDataParams): void;
+  getStructuredDataContents(params: IGetStructuredDataParams): Promise<void>;
   setSelectedStructuredData(id: string, scope: string): void;
   deleteDataContent(dataID: number[]): Promise<boolean>;
   restoreDataContent(dataID: number | number[]): void;

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

@@ -68,8 +68,11 @@ const UserList = (props: IProps): JSX.Element => {
   } = useBulkSelection(usersIds);
 
   useEffect(() => {
-    const query = searchQuery ? (currentFilterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
-    getUsers({ filterQuery: currentFilterQuery, query });
+    const handleGetUsers = async () => {
+      const query = searchQuery ? (currentFilterQuery ? `&query=${searchQuery}` : `?query=${searchQuery}`) : "";
+      await getUsers({ filterQuery: currentFilterQuery, query });
+    }
+    handleGetUsers();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentFilterQuery, searchQuery]);
 
@@ -241,7 +244,7 @@ const mapDispatchToProps = {
 };
 
 interface IDispatchProps {
-  getUsers(params?: any): void;
+  getUsers(params?: any): Promise<void>;
   getUser(id: number): Promise<void>;
   resetUserData(): void;
   setHistoryPush(route: string): void;