@griddo/ax 10.3.3 → 10.3.4

package/src/hooks/index.tsx

@@ -6,6 +6,7 @@ import { useCategoryColors, useEmptyState, useAdaptiveText } from "./content";
 import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { usePermission, useGlobalPermission } from "./users";
+import { useResizable } from "./resize";
 
 export {
   useModal,
@@ -20,6 +21,7 @@ export {
   useCategoryColors,
   useEmptyState,
   useWindowSize,
+  useResizable,
   useAdaptiveText,
   usePermission,
   useGlobalPermission,

package/src/hooks/resize.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect, useState } from "react";
+
+const useResizable = () => {
+  const [node, setNode] = useState<HTMLElement>();
+
+  const ref = useCallback((nodeEle: any) => {
+    setNode(nodeEle);
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!node) {
+        return;
+      }
+
+      const startPos = e.clientX;
+      const styles = window.getComputedStyle(node);
+      const w = parseInt(styles.width, 10);
+
+      const handleMouseMove = (e: MouseEvent) => {
+        e.preventDefault();
+        const dx = e.clientX - startPos;
+        node.style.width = `${w + dx}px`;
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [node]
+  );
+
+  useEffect(() => {
+    if (!node) {
+      return;
+    }
+
+    const resizerElements = [...node.querySelectorAll(".resizer")];
+    resizerElements.forEach((resizerEle: any) => {
+      resizerEle.addEventListener("mousedown", handleMouseDown);
+    });
+
+    return () => {
+      resizerElements.forEach((resizerEle: any) => {
+        resizerEle.removeEventListener("mousedown", handleMouseDown);
+      });
+    };
+  }, [node]);
+
+  return [ref];
+};
+
+export { useResizable };

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

@@ -198,6 +198,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
         setRemovedPage(page.originalGlobalPage);
         toggleToast();
       }
+      toggleRemoveModal();
     });
   };
 

package/src/modules/Content/index.tsx

@@ -49,6 +49,7 @@ import PageImporter from "./PageImporter";
 import { DeleteModal } from "./atoms";
 
 import * as S from "./style";
+import { IError } from "@ax/containers/App/reducer";
 
 // TODO: Make this monster manageable
 const Content = (props: IProps): JSX.Element => {
@@ -107,6 +108,7 @@ const Content = (props: IProps): JSX.Element => {
     deleteAndRemoveFromSiteBulk,
     checkUserSession,
     getDefaults,
+    error,
   } = props;
 
   if (!currentSiteInfo) {
@@ -117,6 +119,7 @@ const Content = (props: IProps): JSX.Element => {
   const firstPage = 1;
 
   const tableRef = useRef<HTMLDivElement>(null);
+  const errorRef = useRef<HTMLDivElement>(null);
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isImporterOpen, toggleModal: toggleImporterModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
@@ -326,6 +329,16 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterValues]);
 
+  useEffect(() => {
+    const errorCode = (error && error.code) || undefined;
+    if (errorCode === 400 && errorRef.current) {
+      errorRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [error]);
+
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
   const handleAddToBulk = (item: ICheck) => {
@@ -738,11 +751,13 @@ const Content = (props: IProps): JSX.Element => {
 
   const addNewAction = filter === "unique-pages" || isGlobalPages ? toggleNewModal : addNewData;
 
-  const rightButtonProps = isAllowedToCreatePages ? {
-    label: "New",
-    action: addNewAction,
-    disabled: !isDataEditable,
-  } : undefined;
+  const rightButtonProps = isAllowedToCreatePages
+    ? {
+        label: "New",
+        action: addNewAction,
+        disabled: !isDataEditable,
+      }
+    : undefined;
 
   const errorPagesText =
     currentSiteErrorPages.length > 1
@@ -765,7 +780,7 @@ const Content = (props: IProps): JSX.Element => {
       <S.ContentListWrapper>
         <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
         <S.TableWrapper>
-          <ErrorToast />
+          <ErrorToast ref={errorRef} />
           {!isDataEditable && (
             <S.NotificationWrapper>
               <Notification type="info" text={notEditableText} closeButton={false} />
@@ -863,6 +878,7 @@ const mapStateToProps = (state: IRootState) => ({
   user: state.users.currentUser,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
   contentFilters: state.sites.contentFilters,
+  error: state.app.error,
 });
 
 interface IDispatchProps {
@@ -966,6 +982,7 @@ interface IPagesProps {
   user: IUser | null;
   skipReviewOnPublish?: boolean;
   contentFilters: Record<string, string> | null;
+  error: IError;
 }
 
 type IProps = IPagesProps & IDispatchProps;

package/src/modules/FileDrive/BulkListHeader/TableHeader/index.tsx

@@ -5,7 +5,7 @@ import { CheckField, TableCounter } from "@ax/components";
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
-  const { isScrolling, selectAllItems, checkState, totalItems } = props;
+  const { isScrolling, selectAllItems, checkState, totalItems, isSearching } = props;
 
   return (
     <S.TableHeader isScrolling={isScrolling}>
@@ -25,6 +25,7 @@ const TableHeader = (props: IProps): JSX.Element => {
       <S.SizeHeader>Size</S.SizeHeader>
       <S.UpdatedHeader>Updated</S.UpdatedHeader>
       <S.TagsHeader>Tags</S.TagsHeader>
+      {isSearching && <S.FolderHeader>Folder</S.FolderHeader>}
       <S.CounterHeader>
         <TableCounter totalItems={totalItems} />
       </S.CounterHeader>
@@ -37,6 +38,7 @@ interface IProps {
   totalItems: number;
   selectAllItems: () => void;
   checkState: Record<string, boolean>;
+  isSearching: boolean;
 }
 
 export default TableHeader;

package/src/modules/FileDrive/BulkListHeader/TableHeader/style.tsx

@@ -31,7 +31,7 @@ const TypeHeader = styled(Header)`
 `;
 
 const SizeHeader = styled(Header)`
-  flex: 0 0 80px;
+  flex: 0 0 85px;
   justify-content: center;
 `;
 
@@ -44,10 +44,24 @@ const TagsHeader = styled(Header)`
   flex: 0 0 300px;
 `;
 
+const FolderHeader = styled(Header)`
+  flex: 0 0 200px;
+`;
+
 const CounterHeader = styled(Header)`
   flex: 0 0 70px;
   justify-content: flex-end;
   padding 0;
 `;
 
-export { TableHeader, CheckHeader, NameHeader, TypeHeader, SizeHeader, UpdatedHeader, TagsHeader, CounterHeader };
+export {
+  TableHeader,
+  CheckHeader,
+  NameHeader,
+  TypeHeader,
+  SizeHeader,
+  UpdatedHeader,
+  TagsHeader,
+  CounterHeader,
+  FolderHeader,
+};

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

@@ -6,7 +6,7 @@ import TableHeader from "./TableHeader";
 import * as S from "./style";
 
 const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
-  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, isSearching } = props;
 
   return showBulk ? (
     <S.BulkWrapper>
@@ -19,7 +19,13 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
       />
     </S.BulkWrapper>
   ) : (
-    <TableHeader isScrolling={false} selectAllItems={selectAllItems} checkState={checkState} totalItems={totalItems} />
+    <TableHeader
+      isScrolling={false}
+      selectAllItems={selectAllItems}
+      checkState={checkState}
+      totalItems={totalItems}
+      isSearching={isSearching}
+    />
   );
 };
 
@@ -30,6 +36,7 @@ export interface IBulkHeaderProps {
   selectAllItems: () => void;
   totalItems: number;
   bulkActions: IBulkAction[];
+  isSearching: boolean;
 }
 
 export default BulkListHeader;

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

@@ -80,7 +80,7 @@ const FileDragAndDrop = (props: IProps) => {
 
       setUploadingState({ total: files.length, ready: 0 });
 
-      let result = [];
+      let result: IFile[] = [];
       if (replaceData) {
         const fileUploaded = files[0] && (await replaceFile(files[0], replaceData.fileID, replaceData.keepURL, siteID));
         if (fileUploaded) {
@@ -100,7 +100,9 @@ const FileDragAndDrop = (props: IProps) => {
       if (result) {
         setInDropZone(false);
         setUploadingState({ total: 0, ready: 0 });
-        handleUpload(result);
+        setTimeout(() => {
+          handleUpload(result);
+        }, 3000)
       }
     } catch (error) {
       console.log(error);

package/src/modules/FileDrive/FileFilters/SortBy/index.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
+  const { isAscending, sortedByName, sortedByDate, sortedBySize } = sortedState;
+  const sortBy = (pointer: string, isAscending: boolean) => sortItems(pointer, isAscending);
+  const sortAscendingName = () => sortBy("name", true);
+  const sortDescendingName = () => sortBy("name", false);
+  const sortAscendingDate = () => sortBy("date", true);
+  const sortDescendingDate = () => sortBy("date", false);
+  const sortAscendingSize = () => sortBy("size", true);
+  const sortDescendingSize = () => sortBy("size", false);
+
+  const SortedStateArrow = () =>
+    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
+  const isActive = sortedByName || sortedByDate || sortedBySize;
+
+  const Header = () => (
+    <S.SortBy data-testid="sortby-wrapper" isActive={isActive}>
+      Sort by
+      <S.IconsWrapper>
+        {isActive && <SortedStateArrow />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.SortBy>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Name Sorting</ListTitle>
+      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>Ascendent</ListItem>
+      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>Descendent</ListItem>
+      <ListTitle>Date sorting</ListTitle>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortDescendingDate}>Newest first</ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortAscendingDate}>Oldest first</ListItem>
+      <ListTitle>Size sorting</ListTitle>
+      <ListItem isSelected={sortedBySize && isAscending} onClick={sortAscendingSize}>Ascendent</ListItem>
+      <ListItem isSelected={sortedBySize && !isAscending} onClick={sortDescendingSize}>Descendent</ListItem>
+    </FloatingMenu>
+  );
+};
+
+export interface ISortByProps {
+  sortedState: ISortedListStatus;
+  sortItems(orderPointer: string, isAscendent: boolean): void;
+}
+
+interface ISortedListStatus {
+  isAscending: boolean;
+  sortedByName: boolean;
+  sortedByDate: boolean;
+  sortedBySize: boolean;
+}
+
+export default SortBy;

package/src/modules/FileDrive/FileFilters/SortBy/style.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const SortBy = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 100%;
+  cursor: pointer;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { SortBy, IconsWrapper, InteractiveArrow };

package/src/modules/FileDrive/FileFilters/Type/index.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { FloatingMenu, Icon, ListTitle, CheckGroup } from "@ax/components";
+import { areEquals } from "@ax/helpers";
+
+import * as S from "./style";
+
+const Type = (props: ITypeProps): JSX.Element => {
+  const { filterItems, value } = props;
+
+  const initialState = ["all"];
+  const selectAllOption = "all";
+  const pointer = "filterType";
+  const cleanValue = value.replace(/docx|xlsx|csv/gi, "");
+  const arrayValues = cleanValue.split(",");
+  const [selectedValue, setSelectedValue] = useState(arrayValues);
+
+  const setQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = initialState;
+    }
+    setSelectedValue(selection);
+    const queryFilters = selection.join(",");
+
+    var mapObj: Record<string, string> = {
+      doc: "doc,docx",
+      xls: "xls,xlsx,csv",
+    };
+
+    const fullFilters = queryFilters.replace(/doc|xls/gi, (matched: string) => mapObj[matched]);
+
+    filterItems(pointer, fullFilters);
+  };
+
+  const isActive = !areEquals(selectedValue, initialState);
+
+  const Header = () => (
+    <S.Type data-testid="type-wrapper" isActive={isActive}>
+      File type
+      <S.IconsWrapper>
+        {isActive && <Icon name="Filter" size="16" />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.Type>
+  );
+
+  const filters = [
+    { name: "all", value: "all", title: "ALL" },
+    { name: "pdf", value: "pdf", title: "PDF" },
+    { name: "doc", value: "doc", title: "DOC, DOCX" },
+    { name: "xls", value: "xls", title: "XLS, XLSX, CSV" },
+    { name: "zip", value: "zip", title: "ZIP" },
+  ];
+
+  return (
+    <FloatingMenu Button={Header} position="center" closeOnSelect={true} isCheckGroup={true}>
+      <ListTitle>Filter by type</ListTitle>
+      <S.ChecksWrapper>
+        <CheckGroup
+          options={filters}
+          value={selectedValue}
+          onChange={setQuery}
+          selectAllOption={selectAllOption}
+          multipleSelection={true}
+        />
+      </S.ChecksWrapper>
+    </FloatingMenu>
+  );
+};
+
+export interface ITypeProps {
+  filterItems(pointer: string, filter: string): void;
+  value: string;
+}
+
+export default Type;

package/src/modules/FileDrive/FileFilters/Type/style.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const Type = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 90px;
+  white-space: nowrap;
+  justify-content: center;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const ChecksWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+`;
+
+export { Type, IconsWrapper, InteractiveArrow, ChecksWrapper };

package/src/modules/FileDrive/FileFilters/Usage/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const UsageFilter = (props: IProps): JSX.Element => {
+  const { value, filterItems } = props;
+
+  const [selectedValue, setSelectedValue] = useState<string>("");
+
+  const isFilterActived = selectedValue !== "";
+
+  useEffect(() => {
+    value && setSelectedValue(value);
+  }, [value]);
+
+  const setFilterQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = "";
+    }
+    setSelectedValue(selection);
+    filterItems("filterUsage", selection);
+  };
+
+  const filterAllStates = () => setFilterQuery("");
+  const filterUsedState = () => setFilterQuery("used");
+  const filterUnusedState = () => setFilterQuery("unused");
+
+  const Header = () => (
+    <S.State isActive={isFilterActived}>
+      Usage
+      <S.IconsWrapper>
+        {isFilterActived ? (
+          <Icon name="Filter" size="16" />
+        ) : (
+          <S.InteractiveArrow>
+            <Icon name="DownArrow" size="16" />
+          </S.InteractiveArrow>
+        )}
+      </S.IconsWrapper>
+    </S.State>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Filter by usage</ListTitle>
+      <ListItem isSelected={!isFilterActived} onClick={filterAllStates}>
+        All
+      </ListItem>
+      <ListItem isSelected={selectedValue === "used"} onClick={filterUsedState}>
+        Show files in use
+      </ListItem>
+      <ListItem isSelected={selectedValue === "unused"} onClick={filterUnusedState}>
+        Show unused files
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface IProps {
+  filterItems(pointer: string, filter: string): void;
+  value: string;
+}
+
+export default UsageFilter;

package/src/modules/FileDrive/FileFilters/Usage/style.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const State = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 170px;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { State, IconsWrapper, InteractiveArrow };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { connect } from "react-redux";
 
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
@@ -11,15 +11,25 @@ import { DeleteFileModal } from "../../atoms";
 import * as S from "./style";
 
 const DetailPanel = (props: IProps) => {
-  const { file, isSaving, activeDelete, isAllowedToEdit, toggleModal, onDelete, updateFile } = props;
+  const {
+    file,
+    isSaving,
+    activeDelete,
+    isAllowedToEdit,
+    toggleModal,
+    onDelete,
+    updateFile,
+    form,
+    setForm,
+    isDirty,
+    resetDirty,
+  } = props;
   const { title, alt, tags, site } = file;
 
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
-  const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
-  const [form, setForm] = useState(initState);
-
   useEffect(() => {
+    const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
     setForm(initState);
   }, [file]);
 
@@ -27,7 +37,12 @@ const DetailPanel = (props: IProps) => {
   const handleAlt = (value: string) => setForm({ ...form, alt: value });
   const handleTags = (value: string[]) => setForm({ ...form, tags: value });
 
-  const handleSave = async () => await updateFile(file.id, form, site || "global");
+  const handleSave = async () => {
+    const updated = await updateFile(file.id, form, site || "global");
+    if (updated) {
+      resetDirty();
+    }
+  };
 
   const handleOpenUrl = () => {
     const win = window.open(file.url, "_blank");
@@ -118,7 +133,7 @@ const DetailPanel = (props: IProps) => {
               </Button>
             )}
             {isAllowedToEdit && (
-              <Button type="button" onClick={handleSave} disabled={isSaving}>
+              <Button type="button" onClick={handleSave} disabled={isSaving || !isDirty}>
                 {isSaving ? "Saving" : "Save"}
               </Button>
             )}
@@ -144,6 +159,10 @@ interface IProps {
   isSaving: boolean;
   activeDelete: boolean;
   isAllowedToEdit: boolean;
+  form: IFormState;
+  setForm(form: IFormState): void;
+  isDirty: boolean;
+  resetDirty(): void;
   toggleModal(): void;
   onDelete(fileID: number): void;
   updateFile(