@griddo/ax 10.6.9 → 10.6.12

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

@@ -106,6 +106,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   } = useBulkSelection(catIds);
 
   const getParams = useCallback((): IGetStructuredDataParams => {
@@ -222,6 +223,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
       bulkActions={bulkActions}
       filterValues={filterValues}
       filterItems={filterItems}
+      setHoverCheck={setHoverCheck}
     />
   );
 
@@ -276,6 +278,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
           getContents={getContents}
           icon={getIcon(item, onExpand, onCollapse)}
           dragHandleProps={provided.dragHandleProps}
+          hoverCheck={checkState.hoverCheck}
         />
       </S.Draggable>
     );

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -9,6 +9,7 @@ import {
   StatusFilter,
   LiveFilter,
   TranslationsFilter,
+  Tooltip,
 } from "@ax/components";
 import { IColumn, IQueryValue, ISchemaField } from "@ax/types";
 
@@ -31,6 +32,7 @@ const TableHeader = (props: IProps): JSX.Element => {
     filterValues,
     siteID,
     maxColumns,
+    setHoverCheck,
   } = props;
 
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
@@ -54,15 +56,18 @@ const TableHeader = (props: IProps): JSX.Element => {
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          checked={checkState.isAllSelected}
-          disabled={false}
-          error={false}
-        />
+        <Tooltip content="Select All Pages" bottom>
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       {isStructuredData ? (
         <>
@@ -137,6 +142,7 @@ interface IProps {
   isGlobalPages: boolean;
   filterValues: any;
   siteID: number;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;

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

@@ -28,6 +28,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     siteID,
     maxColumns,
     exportAction,
+    setHoverCheck,
   } = props;
 
   const isAllowedToDeletePage = usePermission("content.deletePages");
@@ -82,6 +83,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
       isGlobalPages={isGlobalPages}
       siteID={siteID}
       maxColumns={maxColumns}
+      setHoverCheck={setHoverCheck}
     />
   );
 };
@@ -109,6 +111,7 @@ interface IProps {
   isGlobalPages: boolean;
   siteID: number;
   exportAction?(formats: (number | string)[]): void;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkHeader;

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

@@ -3,7 +3,7 @@ import { schemas } from "components";
 import { useTheme } from "styled-components";
 
 import { useAdaptiveText, useModal, usePermission } from "@ax/hooks";
-import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
+import { getHumanLastModifiedDate, getScheduleFormatDate, getTemplateDisplayName, slugify } from "@ax/helpers";
 import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
@@ -37,6 +37,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     dataPacks,
     sites,
     skipReview,
+    hoverCheck,
   } = props;
   const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
@@ -68,6 +69,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     templateId,
     structuredDataContent,
     liveStatus,
+    publicationScheduled,
+    haveDraftPage,
   } = page;
 
   const displayName = getTemplateDisplayName(templateId);
@@ -105,13 +108,15 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const isPublished = liveStatus.status === pageStatus.PUBLISHED || liveStatus.status === pageStatus.UPLOAD_PENDING;
   const isAllowedToDelete = (isPublished && isAllowedToDeletePublishedPage) || (!isPublished && isAllowedToDeletePage);
+  const isScheduledPub = !!publicationScheduled && liveStatus.status === pageStatus.SCHEDULED;
 
-  const publishedTooltip: any = {
+  const publishedTooltip: Record<string, string> = {
     active: "Live",
     "upload-pending": "Publication pending",
     offline: "Offline",
     "offline-pending": "Offline pending",
     modified: "Live & Modified",
+    scheduled: `Scheduled publication: ${isScheduledPub ? getScheduleFormatDate(publicationScheduled) : ""}`,
   };
 
   const setRoute = (path: string) => setHistoryPush(path, true);
@@ -456,7 +461,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const mainCopyModalAction = { title: "Copy page", onClick: copyToOtherSite, disabled: !site };
 
-  const getLiveStatus = () => (page.haveDraftPage ? "modified" : page.liveStatus.status);
+  const getLiveStatus = () => (haveDraftPage ? "modified" : liveStatus.status);
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
@@ -491,7 +496,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     <>
       <S.PageRow role="rowgroup" selected={isSelected} global={isGlobal}>
         <S.CheckCell role="cell">
-          <CheckField name="check" value={page.id} checked={isSelected} onChange={handleOnChange} />
+          <CheckField name="check" value={page.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
         </S.CheckCell>
         <S.NameCell role="cell" onClick={goToPage} ref={nameCellRef}>
           {isHome && (
@@ -689,6 +694,7 @@ interface IPageItemProps {
   dataPacks: IDataPack[];
   sites: ISite[];
   skipReview?: boolean;
+  hoverCheck?: boolean;
 }
 
 export default memo(PageItem);

package/src/modules/Content/index.tsx

@@ -217,6 +217,7 @@ const Content = (props: IProps): JSX.Element => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   } = useBulkSelection(contentIds);
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -582,6 +583,7 @@ const Content = (props: IProps): JSX.Element => {
       siteID={currentSiteInfo.id}
       maxColumns={maxColumns}
       exportAction={exportContent}
+      setHoverCheck={setHoverCheck}
     />
   );
 
@@ -633,6 +635,7 @@ const Content = (props: IProps): JSX.Element => {
           columns={columnsState}
           categoryColors={categoryColors}
           addCategoryColors={addCategoryColors}
+          hoverCheck={checkState.hoverCheck}
         />
       );
     });
@@ -722,6 +725,7 @@ const Content = (props: IProps): JSX.Element => {
           addCategoryColors={addCategoryColors}
           dataPacks={dataPacks}
           skipReview={skipReviewOnPublish}
+          hoverCheck={checkState.hoverCheck}
         />
       );
     });

package/src/modules/Content/utils.tsx

@@ -1,5 +1,5 @@
 import { schemas } from "components";
-import { arrayInsert, filterDuplicatedValues, getActivatedDataPacksIds } from "@ax/helpers";
+import { arrayInsert, getActivatedDataPacksIds } from "@ax/helpers";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { IColumn, IDataPack, IPage, ISchemaField, IStructuredData } from "@ax/types";
 
@@ -7,10 +7,15 @@ const getTemplatesFilters = (activatedDataPacks: IDataPack[]) => {
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
   const { templates } = schemas;
 
-  const filters: { label: string; value: string; mode?: string }[] = Object.keys(templates)
-    .filter((templateName: string) => !templates[templateName].dataPacks)
+  const staticFilters: { label: string; value: string; mode?: string }[] = Object.keys(templates)
+    .filter((templateName: string) => !Array.isArray(templates[templateName].dataPacks))
     .map((templateName: string) => templates[templateName].type);
 
+  const uniqueStaticFilters = [...new Map(staticFilters.map((item: any) => [item.value, item])).values()];
+  const sortedUniqueFilters = uniqueStaticFilters.sort((a, b) => a.label.localeCompare(b.label));
+
+  const dataPackFilters: { label: string; value: string; mode?: string }[] = [];
+
   Object.keys(templates)
     .filter((templateName: string) => Array.isArray(templates[templateName].dataPacks))
     .forEach((templateName: string) => {
@@ -24,7 +29,7 @@ const getTemplatesFilters = (activatedDataPacks: IDataPack[]) => {
           );
 
           if (currentDataPack) {
-            filters.push({
+            dataPackFilters.push({
               label: currentDataPack?.title,
               value: currentDataPack?.id,
               mode: type.mode,
@@ -34,9 +39,7 @@ const getTemplatesFilters = (activatedDataPacks: IDataPack[]) => {
       }
     });
 
-  const uniqueFilters: { label: string; value: string; mode: string }[] = filterDuplicatedValues(filters);
-
-  return uniqueFilters;
+  return { staticFilters: sortedUniqueFilters, dataPackFilters };
 };
 
 const mapStructuredOptions = (options: any[]) => {
@@ -82,7 +85,7 @@ const getOptionValues = (options: IStructuredData[]) => {
 
 const getOptionFilters = (options: IStructuredData[], activatedDataPacks: IDataPack[]) => {
   const pureOptions = options.filter((option: IStructuredData) => !option.fromPage);
-  const templateFilters = getTemplatesFilters(activatedDataPacks);
+  const { staticFilters, dataPackFilters } = getTemplatesFilters(activatedDataPacks);
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
 
   const mappedOptions = pureOptions.flatMap((option: IStructuredData) =>
@@ -104,10 +107,10 @@ const getOptionFilters = (options: IStructuredData[], activatedDataPacks: IDataP
     }, [])
   );
 
-  const filters = [...templateFilters, ...mappedOptions];
+  const filters = [...dataPackFilters, ...mappedOptions];
   const uniqueFilters = [...new Map(filters.map((item: any) => [item.value, item])).values()];
   const sortedUniqueFilters = uniqueFilters.sort((a, b) => a.label.localeCompare(b.label));
-  return sortedUniqueFilters;
+  return [...staticFilters, ...sortedUniqueFilters];
 };
 
 const getCurrentFilter = (structuredData: any, filter: any) =>

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

@@ -1,24 +1,27 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
+import { CheckField, TableCounter, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
-  const { isScrolling, selectAllItems, checkState, totalItems, isSearching } = props;
+  const { isScrolling, selectAllItems, checkState, totalItems, isSearching, setHoverCheck } = props;
 
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          checked={checkState.isAllSelected}
-          disabled={false}
-          error={false}
-        />
+        <Tooltip content="Select All Files">
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       <S.NameHeader>Name</S.NameHeader>
       <S.TypeHeader>Type</S.TypeHeader>
@@ -39,6 +42,7 @@ interface IProps {
   selectAllItems: () => void;
   checkState: Record<string, boolean>;
   isSearching: boolean;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;

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

@@ -6,7 +6,8 @@ import TableHeader from "./TableHeader";
 import * as S from "./style";
 
 const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
-  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, isSearching } = props;
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, isSearching, setHoverCheck } =
+    props;
 
   return showBulk ? (
     <S.BulkWrapper>
@@ -25,6 +26,7 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
       checkState={checkState}
       totalItems={totalItems}
       isSearching={isSearching}
+      setHoverCheck={setHoverCheck}
     />
   );
 };
@@ -37,6 +39,7 @@ export interface IBulkHeaderProps {
   totalItems: number;
   bulkActions: IBulkAction[];
   isSearching: boolean;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkListHeader;

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

@@ -17,6 +17,7 @@ const ListItem = (props: IProps) => {
     isAllowedToEdit,
     isAllowedToMove,
     isSearching,
+    hoverCheck,
     onChange,
     onClick,
     onDelete,
@@ -117,7 +118,7 @@ const ListItem = (props: IProps) => {
     <>
       <S.ItemRow role="rowgroup" selected={isSelected}>
         <S.CheckCell role="cell">
-          <CheckField name="check" value={id} checked={isSelected} onChange={handleChange} />
+          <CheckField name="check" value={id} checked={isSelected || hoverCheck} onChange={handleChange} />
         </S.CheckCell>
         <S.IconCell role="cell" onClick={handleClick}>
           <img src={iconUrl} alt={`${fileType} Icon`} />
@@ -192,6 +193,7 @@ interface IProps {
   onClick(file: IFile): void;
   onDelete(fileID: number): void;
   onMove(fileID: number, folderID: number): void;
+  hoverCheck: boolean;
 }
 
 export default ListItem;

package/src/modules/FileDrive/index.tsx

@@ -201,6 +201,7 @@ const FileDrive = (props: IProps) => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   } = useBulkSelection(filesIds);
 
   const handleSelectedTab = (tab: "site" | "global") => {
@@ -431,10 +432,11 @@ const FileDrive = (props: IProps) => {
       selectItems={selectItems}
       bulkActions={bulkActions}
       isSearching={isSearching}
+      setHoverCheck={setHoverCheck}
     />
   );
 
-  const GridList = () => (
+  const gridList = (
     <S.GridWrapper isSearching={isSearching}>
       {progressItems.map((progress: number, index: number) => (
         <UploadItem uploadPercentage={progress} grid={true} key={index} />
@@ -461,7 +463,7 @@ const FileDrive = (props: IProps) => {
     </S.GridWrapper>
   );
 
-  const ListTable = () => (
+  const listTable = (
     <TableList tableHeader={Header} hasFixedHeader={true} tableRef={tableRef} className="no-padding">
       <>
         {progressItems.map((progress: number, index: number) => (
@@ -483,6 +485,7 @@ const FileDrive = (props: IProps) => {
               isAllowedToEdit={allowedToEditFile}
               isAllowedToMove={!isRoot || (isRoot && (folders.length > 0 || isSearching))}
               isSearching={isSearching}
+              hoverCheck={checkState.hoverCheck}
             />
           );
         })}
@@ -681,7 +684,7 @@ const FileDrive = (props: IProps) => {
                   )}
                   {!hasFolders && isRoot && !isSearching && <NewFolderButton />}
                 </S.SectionHeader>
-                <S.DocumentsWrapper>{isGrid ? <GridList /> : <ListTable />}</S.DocumentsWrapper>
+                <S.DocumentsWrapper>{isGrid ? gridList : listTable}</S.DocumentsWrapper>
                 {totalItems === 0 && !hasFolders && (
                   <S.EmptyStateWrapper data-testid="empty-state" margin={!isRoot}>
                     {isSearching ? <EmptyState {...emptySearchStateProps} /> : <EmptyState {...emptyProps} />}

package/src/modules/GlobalEditor/index.tsx

@@ -4,7 +4,16 @@ import { RouteComponentProps } from "react-router-dom";
 import { withErrorBoundary } from "react-error-boundary";
 
 import { IErrorItem, INotification, IRootState, ISavePageParams, ISite, IUserEditing } from "@ax/types";
-import { MainWrapper, Loading, ErrorToast, Notification, Modal, ErrorPage } from "@ax/components";
+import {
+  MainWrapper,
+  Loading,
+  ErrorToast,
+  Notification,
+  Modal,
+  ErrorPage,
+  CancelScheduleModal,
+  ScheduleModal,
+} from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
@@ -13,7 +22,7 @@ import { sitesActions } from "@ax/containers/Sites";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal, usePermission } from "@ax/hooks";
-import { getDefaultTheme } from "@ax/helpers";
+import { dateToString, getDefaultTheme } from "@ax/helpers";
 
 import Editor from "./Editor";
 import Preview from "./Preview";
@@ -45,6 +54,7 @@ const GlobalEditor = (props: IProps) => {
     isNewTranslation,
     currentSiteErrorPages,
     getUserCurrentPermissions,
+    schedulePublication,
   } = props;
 
   const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
@@ -61,6 +71,9 @@ const GlobalEditor = (props: IProps) => {
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const [errorPagesChecked, setErrorPagesChecked] = useState(false);
+  const [scheduleDate, setScheduleDate] = useState({ date: "", time: "" });
+  const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
+  const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
   const browserRef = useRef<HTMLDivElement>(null);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -68,7 +81,8 @@ const GlobalEditor = (props: IProps) => {
   const hasDraft: boolean = editorContent && !!editorContent.haveDraftPage;
   const isLivePageChanged = editorContent && editorContent.liveChanged;
   const structuredData = editorContent ? editorContent.structuredData : "";
-  const isEditLive: boolean = isPublished && hasDraft;
+  const isEditLive = isPublished && hasDraft;
+  const isScheduled = props.pageStatus === pageStatus.SCHEDULED;
 
   const errorNotificationText =
     "There are some errors on the page so you can not publish yet. Please review them in the error panel.";
@@ -228,6 +242,25 @@ const GlobalEditor = (props: IProps) => {
     if (isSaved) resetDirty();
   };
 
+  const handleSchedulePublication = async () => {
+    const date = new Date(`${scheduleDate.date} ${scheduleDate.time}`);
+    const dateString = dateToString(date, "dd/MM/yyyy HH:mm:ss");
+    const saved = await schedulePublication(dateString);
+    if (saved) {
+      resetDirty();
+      toggleScheduleModal();
+    }
+  };
+
+  const handleCancelSchedulePublication = async () => {
+    const saved = await schedulePublication(null);
+    if (saved) {
+      setScheduleDate({ date: "", time: "" });
+      resetDirty();
+      toggleCancelScheduleModal();
+    }
+  };
+
   const getPublishButton = (status: string) => {
     switch (status) {
       case pageStatus.OFFLINE:
@@ -270,6 +303,22 @@ const GlobalEditor = (props: IProps) => {
 
   const menuOptions = [];
 
+  if (isAllowedToPublishPages && !isScheduled) {
+    menuOptions.push({
+      label: "Schedule",
+      icon: "calendar",
+      action: toggleScheduleModal,
+    });
+  }
+
+  if (isAllowedToPublishPages && isScheduled) {
+    menuOptions.push({
+      label: "Cancel Schedule",
+      icon: "cancelEvent",
+      action: toggleCancelScheduleModal,
+    });
+  }
+
   if (isAllowedToEditContentPage) {
     menuOptions.push({
       label: "Review",
@@ -418,6 +467,20 @@ const GlobalEditor = (props: IProps) => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const mainScheduleModalAction = {
+    title: "Schedule",
+    onClick: handleSchedulePublication,
+  };
+
+  const secondaryScheduleModalAction = { title: "Cancel", onClick: toggleScheduleModal };
+
+  const mainCancelScheduleModalAction = {
+    title: "Cancel Schedule",
+    onClick: handleCancelSchedulePublication,
+  };
+
+  const secondaryCancelScheduleModalAction = { title: "Back", onClick: toggleCancelScheduleModal };
+
   const tabIcons = isAllowedToEditContentPage
     ? [
         { name: "edit", text: "Edit mode" },
@@ -457,6 +520,7 @@ const GlobalEditor = (props: IProps) => {
         pageStatusActions={pageStatusActions}
         tabs={tabsPreview}
         isDirty={isDirty}
+        scheduledPublication={editorContent?.publicationScheduled}
       >
         {selectedTab === "edit" ? (
           <>
@@ -531,6 +595,20 @@ const GlobalEditor = (props: IProps) => {
             </S.ModalContent>
           )}
         </Modal>
+        <ScheduleModal
+          isOpen={isScheduleOpen}
+          toggleModal={toggleScheduleModal}
+          mainModalAction={mainScheduleModalAction}
+          secondaryModalAction={secondaryScheduleModalAction}
+          scheduleDate={scheduleDate}
+          setScheduleDate={setScheduleDate}
+        />
+        <CancelScheduleModal
+          isOpen={isCancelScheduleOpen}
+          toggleModal={toggleCancelScheduleModal}
+          mainModalAction={mainCancelScheduleModalAction}
+          secondaryModalAction={secondaryCancelScheduleModalAction}
+        />
       </MainWrapper>
     </>
   );
@@ -593,6 +671,7 @@ const mapDispatchToProps = {
   setStructuredDataFilter: structuredDataActions.setFilter,
   discardDraft: pageEditorActions.discardDraft,
   getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
+  schedulePublication: pageEditorActions.schedulePublication,
 };
 
 interface IPageEditorDispatchProps {
@@ -612,6 +691,7 @@ interface IPageEditorDispatchProps {
   setStructuredDataFilter(filter: string | null): void;
   discardDraft(): Promise<void>;
   getUserCurrentPermissions(): void;
+  schedulePublication(date: string | null): Promise<boolean>;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/GlobalEditor/style.tsx

@@ -16,6 +16,17 @@ const NotificationWrapper = styled.div`
 
 const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
 `;
 
-export { Content, NotificationWrapper, ModalContent };
+const ModalFields = styled.div`
+  display: flex;
+  width: 100%;
+  & > div:nth-child(odd) {
+    margin-right: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { Content, NotificationWrapper, ModalContent, ModalFields };

package/src/modules/Navigation/Defaults/BulkHeader/TableHeader/index.tsx

@@ -1,22 +1,26 @@
 import React from "react";
 
-import { CheckField, TableCounter } from "@ax/components";
+import { CheckField, TableCounter, Tooltip } from "@ax/components";
 import * as S from "./style";
 
-const TableHeader = (props: IProps) => {
-  const { totalItems, selectAllItems, isScrolling } = props;
+const TableHeader = (props: IProps): JSX.Element => {
+  const { totalItems, selectAllItems, isScrolling, checkState, setHoverCheck } = props;
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          checked={false}
-          disabled={false}
-          error={false}
-        />
+        <Tooltip content="Select All Items" bottom>
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       <S.NameHeader>Name</S.NameHeader>
       <S.TransHeader>Translations</S.TransHeader>
@@ -32,6 +36,8 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;