@griddo/ax 1.73.28 → 1.74.0

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/style.tsx

@@ -34,6 +34,7 @@ const Text = styled.div`
 
 const CategoriesWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.m};
 `;
 
 const StyledButton = styled(Button)`
@@ -42,13 +43,4 @@ const StyledButton = styled(Button)`
   right: 0;
 `;
 
-export {
-  Heading,
-  Config,
-  ModalContent,
-  SubscribeWrapper,
-  SectionContent,
-  Text,
-  StyledButton,
-  CategoriesWrapper,
-};
+export { Heading, Config, ModalContent, SubscribeWrapper, SectionContent, Text, StyledButton, CategoriesWrapper };

package/src/modules/Sites/SitesList/GridView/GridHeaderFilter/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const GridHeaderFilter = ({ sortItems, sortedState }: IGridHeaderFilterProps): JSX.Element => {
+  const { isAscending, sortedByTitle, sortedByLastAccess, sortedByDateCreated } = sortedState;
+
+  const sortAscendingName = () => sortItems("name", true);
+  const sortDescendingName = () => sortItems("name", false);
+  const sortAscendingLastAccess = () => sortItems("lastAccess", true);
+  const sortDescendingLastAccess = () => sortItems("lastAccess", false);
+  const sortAscendingDateCreated = () => sortItems("dateCreated", true);
+  const sortDescendingDateCreated = () => sortItems("dateCreated", false);
+
+  const SortedStateArrow = () =>
+    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
+
+  const isActive = sortedByTitle || sortedByLastAccess;
+
+  const getFilterLabel = () => {
+    if (sortedByTitle) return "Name";
+    if (sortedByLastAccess) return "Last access";
+    if (sortedByDateCreated) return "Creation date";
+  };
+
+  const Button = () => (
+    <S.FloatingMenuButton isActive={isActive} data-testid="grid-floating-menu-button">
+      <S.Label data-testid="filter-label">{getFilterLabel()}</S.Label>
+      <S.IconsWrapper>
+        {isActive && <SortedStateArrow />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.FloatingMenuButton>
+  );
+
+  return (
+    <FloatingMenu Button={Button} position="left">
+      <ListTitle>Name Sorting</ListTitle>
+      <ListItem isSelected={sortedByTitle && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
+      <ListTitle>Sort by access date</ListTitle>
+      <ListItem isSelected={sortedByLastAccess && !isAscending} onClick={sortDescendingLastAccess}>
+        Newest
+      </ListItem>
+      <ListItem isSelected={sortedByLastAccess && isAscending} onClick={sortAscendingLastAccess}>
+        Oldest
+      </ListItem>
+      <ListTitle>Sort by creation</ListTitle>
+      <ListItem isSelected={sortedByDateCreated && isAscending} onClick={sortAscendingDateCreated}>
+        Newest
+      </ListItem>
+      <ListItem isSelected={sortedByDateCreated && !isAscending} onClick={sortDescendingDateCreated}>
+        Oldest
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+export interface IGridHeaderFilterProps {
+  sortedState: any;
+  sortItems(orderPointer: string, isAscending: boolean): any;
+}
+
+export default GridHeaderFilter;

package/src/modules/Sites/SitesList/GridView/GridHeaderFilter/style.tsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const FloatingMenuButton = styled(Header)<{ isActive: boolean }>`
+  padding-left: ${(p) => p.theme.spacing.xxs};
+  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 Label = styled.span``;
+
+export { FloatingMenuButton, IconsWrapper, InteractiveArrow, Label };

package/src/modules/Sites/SitesList/{SiteItem → GridView/GridSiteItem}/index.tsx

@@ -2,15 +2,17 @@ import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { useModal } from "@ax/hooks";
-import { trimText, isDevelopment } from "@ax/helpers";
+import { isDevelopment } from "@ax/helpers";
 import { ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { FieldsBehavior, Icon, Modal, Tooltip, Image } from "@ax/components";
+import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
+
+import { ItemName, ItemThumbnail } from "./../../atoms";
 
 import * as S from "./style";
 
-const SiteItem = (props: ISiteItemProps): JSX.Element => {
+const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite } = props;
   const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
   const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
@@ -35,15 +37,8 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
     "offline-pending": "Offline pending",
   };
 
-  const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
-  const thumbnail = site.thumbnail ? (
-    <Image width={238} height={178} url={site.thumbnail} />
-  ) : (
-    <S.Thumbnail backgroundUrl={thumbnailPlaceholder} />
-  );
-
   const setSite = async () => {
-    await setSiteInfo(site);
+    setSiteInfo(site);
     const contentPath = "/sites/pages";
     setHistoryPush(contentPath, false);
   };
@@ -117,23 +112,18 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
 
   const { title, mainAction, secondaryAction, content } = getPublishModal(site.isPublished);
 
-  const siteName =
-    site.name.length > 40 ? (
-      <Tooltip content={site.name} left={120}>
-        {trimText(site.name, 40)}
-      </Tooltip>
-    ) : (
-      site.name
-    );
-
   const siteTooltip = isDevelopment() && `Site id: ${site.id}`;
 
   return (
     <>
-      <S.SiteWrapper key={site.id} onClick={setSite}>
-        <Tooltip content={siteTooltip}>{thumbnail}</Tooltip>
+      <S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
+        <Tooltip content={siteTooltip}>
+          <ItemThumbnail src={site.thumbnail} width={280} height={199} />
+        </Tooltip>
         <S.Wrapper>
-          <S.Title>{siteName}</S.Title>
+          <S.Title>
+            <ItemName name={site.name} length={40} />
+          </S.Title>
           <S.IconsWrapper>
             <Tooltip content={publishedTooltip[publishedState]}>
               {publishedState && <Icon name={publishedState} size="24" />}
@@ -150,7 +140,7 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
         mainAction={mainDeleteAction}
       >
         {isOpenDelete ? (
-          <S.ModalContent>
+          <S.ModalContent data-testid="delete-modal">
             <p>
               Are you sure you want to delete <strong>‘{site.name}’</strong> site?
               <br />
@@ -170,13 +160,13 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
         secondaryAction={secondaryAction}
         mainAction={mainAction}
       >
-        {isOpenPublish ? <S.ModalContent>{content}</S.ModalContent> : null}
+        {isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
       </Modal>
     </>
   );
 };
 
-interface ISiteItemProps {
+interface IGridSiteItemProps {
   site: ISite;
   setSiteInfo(currentSiteInfo: any): void;
   setHistoryPush(page: string, isEditor: boolean): void;
@@ -193,4 +183,4 @@ const mapDispatchToProps = {
   unpublishSite: sitesActions.unpublishSite,
 };
 
-export default connect(null, mapDispatchToProps)(SiteItem);
+export default connect(null, mapDispatchToProps)(GridSiteItem);

package/src/modules/Sites/SitesList/{SiteItem → GridView/GridSiteItem}/style.tsx

@@ -1,29 +1,25 @@
 import styled from "styled-components";
-import ActionMenu from "../../../../components/ActionMenu";
+import { ActionMenu } from "@ax/components";
 
 const SiteWrapper = styled.div`
-  background: ${p => p.theme.color.uiBackground02};
-  height: 252px;
+  background: ${(p) => p.theme.color.uiBackground02};
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: ${p => p.theme.spacing.s};
+  padding: ${(p) => p.theme.spacing.s};
   cursor: pointer;
-`;
-
-const Thumbnail = styled.div<{backgroundUrl: string}>`
-  background: url(${p => p.backgroundUrl}) no-repeat;
-  background-size: cover;
-  min-height: 178px;
-  width: 238px;
+  div {
+    max-width: 100%;
+  }
 `;
 
 const Wrapper = styled.div`
   position: relative;
-  margin-top: ${p => p.theme.spacing.xs};
+  margin-top: ${(p) => p.theme.spacing.xs};
   display: flex;
   align-items: center;
+  max-height: 36px;
   width: 100%;
   height: 100%;
   padding-right: 36px;
@@ -31,7 +27,7 @@ const Wrapper = styled.div`
 `;
 
 const Title = styled.span`
-  ${p => p.theme.textStyle.headingXS};
+  ${(p) => p.theme.textStyle.headingXS};
 `;
 
 const IconsWrapper = styled.div`
@@ -47,23 +43,16 @@ const StyledActionMenu = styled(ActionMenu)`
 `;
 
 const ModalContent = styled.div`
-  padding: ${p => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.m};
 
   p:nth-child(1) {
-    margin-bottom: ${p => p.theme.spacing.m};
+    margin-bottom: ${(p) => p.theme.spacing.m};
   }
 
   p:nth-child(2) {
-    margin-bottom: ${p => p.theme.spacing.xxs};
+    margin-bottom: ${(p) => p.theme.spacing.xxs};
   }
 `;
 
-export {
-  SiteWrapper,
-  Thumbnail,
-  Wrapper,
-  Title,
-  IconsWrapper,
-  StyledActionMenu,
-  ModalContent
-}
+
+export { SiteWrapper, Wrapper, Title, IconsWrapper, StyledActionMenu, ModalContent };

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/index.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { CheckField, TableCounter, LastAccessFilter, NameFilter, LiveFilter } from "@ax/components";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const {
+    isScrolling,
+    selectAllItems,
+    checkState,
+    sortItems,
+    filterItems,
+    sortedListStatus,
+    totalItems,
+    filterValues,
+  } = props;
+
+  const liveStatusValue: any = {
+    all: "all",
+    online: "active",
+    offline: "offline",
+  };
+
+  return (
+    <S.TableHeader isScrolling={isScrolling} data-testid="sites-table-header">
+      <S.CheckHeader>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={checkState.isAllSelected}
+          disabled={false}
+          error={false}
+        />
+      </S.CheckHeader>
+      <S.NameWrapper>
+        <NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
+      </S.NameWrapper>
+      <S.DomainHeader>Domain</S.DomainHeader>
+      <S.LiveHeader>
+        <LiveFilter filterItems={filterItems} value={liveStatusValue[filterValues.liveStatus]} hasBasicStatus={true} />
+      </S.LiveHeader>
+      <S.LastAccessCell>
+        <LastAccessFilter sortItems={sortItems} sortedState={sortedListStatus} />
+      </S.LastAccessCell>
+      <TableCounter totalItems={totalItems} />
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  isScrolling: boolean;
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
+  filterValues: any;
+}
+
+export default TableHeader;

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/style.tsx

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const HeaderWrapper = styled.div`
+  position: relative;
+`;
+
+const CheckHeader = styled(Header)`
+  padding-right: 0;
+  width: 40px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameWrapper = styled.div`
+  position: relative;
+  width: 438px;
+`;
+
+const DomainHeader = styled(Header)`
+  flex-grow: 1;
+  position: relative;
+  width: 440px;
+`;
+
+const LiveHeader = styled(Header)`
+  position: relative;
+  justify-content: center;
+`;
+
+const LastAccessCell = styled(Header)`
+  position: relative;
+  white-space: nowrap;
+  width: 200px;
+`;
+
+export { TableHeader, CheckHeader, DomainHeader, LiveHeader, NameWrapper, HeaderWrapper, LastAccessCell };

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { BulkSelectionOptions } from "@ax/components";
+
+import TableHeader from "./TableHeader";
+
+import * as S from "./style";
+
+const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const {
+    showBulk,
+    checkState,
+    bulkPublish,
+    bulkUnpublish,
+    selectItems,
+    selectAllItems,
+    totalItems,
+    sortItems,
+    filterItems,
+    sortedListStatus,
+    filterValues,
+  } = props;
+
+  const actions = [
+    {
+      icon: "upload-pending",
+      text: "publish",
+      action: bulkPublish,
+    },
+    {
+      icon: "offline",
+      text: "unpublish",
+      action: bulkUnpublish,
+    },
+  ];
+
+  return showBulk ? (
+    <S.BulkWrapper data-testid="sites-list-bulk-wrapper">
+      <BulkSelectionOptions
+        isScrolling={false}
+        checkState={checkState}
+        actions={actions}
+        selectItems={selectItems}
+        totalItems={totalItems}
+      />
+    </S.BulkWrapper>
+  ) : (
+    <TableHeader
+      isScrolling={false}
+      selectAllItems={selectAllItems}
+      checkState={checkState}
+      sortItems={sortItems}
+      filterItems={filterItems}
+      sortedListStatus={sortedListStatus}
+      totalItems={totalItems}
+      filterValues={filterValues}
+    />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  bulkPublish: () => void;
+  bulkUnpublish: () => void;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  sortItems: (orderPointer: string, isAscending: any) => void;
+  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortedListStatus: any;
+  filterValues: any;
+}
+
+export default BulkHeader;

package/src/modules/Sites/SitesList/ListView/BulkHeader/style.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const BulkWrapper = styled.div`
+  width: 100%;
+  span {
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;