@griddo/ax 10.6.9 → 10.6.12

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

@@ -244,6 +244,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   } = useBulkSelection(sitesIds);
 
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, sites);
@@ -285,6 +286,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
       sortedListStatus={currentConfig.sortedListStatus}
       filterItems={filterItems}
       filterValues={currentConfig.filterValues}
+      setHoverCheck={setHoverCheck}
     />
   );
 
@@ -301,6 +303,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
             isSelected={isItemSelected}
             onCheck={handleAddToBulk}
             getParams={getParams}
+            hoverCheck={checkState.hoverCheck}
           />
         );
       })

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

@@ -3,11 +3,11 @@ import { connect } from "react-redux";
 
 import { IDataPack, IErrorItem, ILanguage, INotification, IRootState, ISchemaField, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
-import { getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
+import { MainWrapper, ErrorToast, Notification, Loading, CancelScheduleModal, ScheduleModal } from "@ax/components";
+import { dateToString, getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty } from "@ax/hooks";
+import { useIsDirty, useModal } from "@ax/hooks";
 import { setIsSavedData } from "@ax/forms";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 
@@ -44,6 +44,9 @@ const Form = (props: IProps) => {
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
   const [notification, setNotification] = useState<INotification | null>(null);
+  const [scheduleDate, setScheduleDate] = useState({ date: "", time: "" });
+  const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
+  const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
   const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 
   const { fields } = schema;
@@ -62,6 +65,12 @@ const Form = (props: IProps) => {
     currentStructuredData.local &&
     !activatedDataPacksIds.some((pack: string) => currentStructuredData.dataPacks.includes(pack));
   const isDataTranslatable = currentStructuredData && currentStructuredData.translate;
+  const isScheduled = !!form && !!form.publicationScheduled;
+  const status = isScheduled
+    ? "scheduled"
+    : !form || form.draft === true || form.draft === undefined
+    ? "offline"
+    : "active";
 
   let title = "";
 
@@ -102,7 +111,7 @@ const Form = (props: IProps) => {
         );
       });
 
-  const handleSave = async (publish: boolean) => {
+  const handleSave = async (publish: boolean, scheduleDate?: string | null) => {
     const validated = publish && !skipReviewOnPublish ? await validateForm(true) : true;
 
     if (validated) {
@@ -114,6 +123,7 @@ const Form = (props: IProps) => {
         structuredData: currentStructuredData ? currentStructuredData.id : null,
         draft: publish === true ? false : status,
         relatedSite: site ? site.id : null,
+        publicationScheduled: scheduleDate !== undefined ? scheduleDate : form.publicationScheduled,
       };
 
       let saved = false;
@@ -196,7 +206,7 @@ const Form = (props: IProps) => {
     setHistoryPush("/sites/settings/content-types", false);
   };
 
-  const removeItem = async () => {
+  const removeItem = () => {
     const path = site ? "/sites/pages" : "/data";
     deleteStructuredDataContent(form.id).then((deleted: boolean) => {
       if (deleted) {
@@ -245,6 +255,19 @@ const Form = (props: IProps) => {
     await validateForm();
   };
 
+  const handleSchedulePublication = () => {
+    const date = new Date(`${scheduleDate.date} ${scheduleDate.time}`);
+    const dateString = dateToString(date, "dd/MM/yyyy HH:mm:ss");
+    handleSave(false, dateString);
+    toggleScheduleModal();
+  };
+
+  const handleCancelSchedulePublication = () => {
+    handleSave(false, null);
+    setScheduleDate({ date: "", time: "" });
+    toggleCancelScheduleModal();
+  };
+
   const downArrowMenu = {
     displayed: true,
     button: getPublishButton(form?.draft),
@@ -262,13 +285,41 @@ const Form = (props: IProps) => {
     ],
   };
 
-  const status = !form || form.draft === true || form.draft === undefined ? "offline" : "active";
+  if (status === "offline" && !isScheduled) {
+    downArrowMenu.options.unshift({
+      label: "Schedule",
+      icon: "calendar",
+      action: toggleScheduleModal,
+    });
+  }
+
+  if (isScheduled) {
+    downArrowMenu.options.unshift({
+      label: "Cancel Schedule",
+      icon: "cancelEvent",
+      action: toggleCancelScheduleModal,
+    });
+  }
 
   const languageProps = {
     lang: isDataTranslatable ? lang : null,
     languageActions: isDataTranslatable ? languageActions : null,
   };
 
+  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 };
+
   return isLoading ? (
     <Loading />
   ) : (
@@ -289,6 +340,7 @@ const Form = (props: IProps) => {
         isFromEditor={true}
         currentPageID={form?.id}
         errors={errors}
+        scheduledPublication={form?.publicationScheduled}
       >
         {isDisabled && (
           <S.NotificationWrapper>
@@ -314,6 +366,20 @@ const Form = (props: IProps) => {
         <ErrorToast size="l" />
         <S.Wrapper>{Fields}</S.Wrapper>
       </MainWrapper>
+      <ScheduleModal
+        isOpen={isScheduleOpen}
+        toggleModal={toggleScheduleModal}
+        mainModalAction={mainScheduleModalAction}
+        secondaryModalAction={secondaryScheduleModalAction}
+        scheduleDate={scheduleDate}
+        setScheduleDate={setScheduleDate}
+      />
+      <CancelScheduleModal
+        isOpen={isCancelScheduleOpen}
+        toggleModal={toggleCancelScheduleModal}
+        mainModalAction={mainCancelScheduleModalAction}
+        secondaryModalAction={secondaryCancelScheduleModalAction}
+      />
     </>
   );
 };

package/src/modules/StructuredData/Form/style.tsx

@@ -14,4 +14,20 @@ const NotificationWrapper = styled.div`
   z-index: 2;
 `;
 
-export { Wrapper, NotificationWrapper };
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const ModalFields = styled.div`
+  display: flex;
+  width: 100%;
+  & > div:nth-child(odd) {
+    margin-right: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { Wrapper, NotificationWrapper, ModalContent, ModalFields };

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

@@ -10,6 +10,7 @@ import {
   SiteFilter,
   LiveFilter,
   TranslationsFilter,
+  Tooltip,
 } from "@ax/components";
 import { IColumn, IQueryValue, ISchemaField, IStructuredDataQueryValues } from "@ax/types";
 import { getGlobalPageTypes } from "@ax/helpers";
@@ -32,6 +33,7 @@ const TableHeader = (props: IProps): JSX.Element => {
     columns,
     setColumns,
     maxColumns,
+    setHoverCheck,
   } = props;
 
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
@@ -56,15 +58,18 @@ const TableHeader = (props: IProps): JSX.Element => {
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          disabled={false}
-          error={false}
-          checked={checkState.isAllSelected}
-        />
+        <Tooltip content="Select All Pages" bottom>
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            disabled={false}
+            error={false}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       {isFromPage ? (
         <>
@@ -141,6 +146,7 @@ interface IProps {
   columns: IColumn[];
   setColumns: (columns: IColumn[]) => void;
   maxColumns: { value: number; text: string };
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;

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

@@ -33,6 +33,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     setColumns,
     maxColumns,
     exportAction,
+    setHoverCheck,
   } = props;
 
   const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
@@ -86,6 +87,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
       columns={columns}
       setColumns={setColumns}
       maxColumns={maxColumns}
+      setHoverCheck={setHoverCheck}
     />
   );
 };
@@ -112,6 +114,7 @@ interface IProps {
   setColumns: (columns: IColumn[]) => void;
   maxColumns: { value: number; text: string };
   exportAction?(formats: (number | string)[]): void;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkHeader;

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { useTheme } from "styled-components";
 
 import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPage, IColumn } from "@ax/types";
-import { getHumanLastModifiedDate, getStructuredDataTitle, trimText } from "@ax/helpers";
+import { getHumanLastModifiedDate, getScheduleFormatDate, getStructuredDataTitle, trimText } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 import {
@@ -52,6 +52,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     categoryColors,
     addCategoryColors,
     skipReview,
+    hoverCheck,
   } = props;
 
   const { locale } = lang;
@@ -64,9 +65,13 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     structuredData,
     structuredDataContent,
     fullPath,
+    publicationScheduled,
+    liveStatus,
+    haveDraftPage,
   } = globalPage;
 
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
+  const isScheduledPub = !!publicationScheduled && liveStatus.status === pageStatus.SCHEDULED;
 
   const initValue = { title: "", slug: "" };
   const [duplicateModalState, setDuplicateModalState] = useState(initValue);
@@ -94,6 +99,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     offline: "Offline",
     "offline-pending": "Offline pending",
     modified: "Live & Modified",
+    scheduled: `Scheduled publication: ${isScheduledPub ? getScheduleFormatDate(publicationScheduled) : ""}`,
   };
 
   const _handleClick = () => {
@@ -346,7 +352,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
 
   const availableSiteNames = availableSites && availableSites.map((site: IAvailableSites) => site.name);
 
-  const getLiveStatus = () => (globalPage.haveDraftPage ? "modified" : globalPage.liveStatus.status);
+  const getLiveStatus = () => (haveDraftPage ? "modified" : liveStatus.status);
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
@@ -384,7 +390,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
     <>
       <S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
         <S.CheckCell role="cell">
-          <CheckField name="check" value={globalPage.id} checked={isSelected} onChange={handleOnChange} />
+          <CheckField name="check" value={globalPage.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
         </S.CheckCell>
         <S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
           <Tooltip
@@ -485,6 +491,7 @@ interface IGlobalPageItemProps {
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
   skipReview?: boolean;
+  hoverCheck?: boolean;
 }
 
 const mapDispatchToProps = {

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

@@ -12,7 +12,7 @@ import {
   IColumn,
   ISite,
 } from "@ax/types";
-import { getActivatedDataPacksIds, getHumanLastModifiedDate } from "@ax/helpers";
+import { getActivatedDataPacksIds, getHumanLastModifiedDate, getScheduleFormatDate } from "@ax/helpers";
 import { setIsSavedData } from "@ax/forms";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
@@ -46,6 +46,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     categoryColors,
     addCategoryColors,
     currentSiteInfo,
+    hoverCheck,
   } = props;
 
   const isAllowedToDuplicatePagesGlobal = usePermission("global.globalData.duplicateGlobalData");
@@ -72,8 +73,9 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   const title = useAdaptiveText(nameCellRef, structuredData.content.title, nameCellPadding);
 
   const { locale } = lang;
-  const { dataLanguages } = structuredData;
+  const { dataLanguages, publicationScheduled } = structuredData;
 
+  const isScheduledPub = !!publicationScheduled && structuredData.draft;
   const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
 
   const publishedTooltip: Record<string, string> = {
@@ -81,6 +83,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     "upload-pending": "Publication pending",
     offline: "Offline",
     "offline-pending": "Offline pending",
+    scheduled: `Scheduled publication: ${isScheduledPub ? getScheduleFormatDate(publicationScheduled) : ""}`,
   };
 
   const _handleClick = () => {
@@ -110,7 +113,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   };
 
   const checkStatus = () => {
-    return structuredData.draft ? "offline" : "active";
+    return isScheduledPub ? "scheduled" : structuredData.draft ? "offline" : "active";
   };
 
   const getCurrentLanguages = () => {
@@ -236,7 +239,12 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   return (
     <S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
       <S.CheckCell role="cell">
-        <CheckField name="check" value={structuredData.id} checked={isSelected} onChange={handleOnChange} />
+        <CheckField
+          name="check"
+          value={structuredData.id}
+          checked={isSelected || hoverCheck}
+          onChange={handleOnChange}
+        />
       </S.CheckCell>
       <S.NameCell role="cell" onClick={_handleClick} ref={nameCellRef}>
         <Tooltip content={structuredData.content.title} left={0} top={1} expanded>
@@ -289,6 +297,7 @@ interface IStructuredDataItemProps {
   addCategoryColors(cats: string[]): void;
   setCurrentDataID(id: number | null): void;
   currentSiteInfo: ISite | null;
+  hoverCheck?: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -87,4 +87,4 @@ interface IActionButton {
   title: string;
 }
 
-export { DeleteModal, MainActionButton, SecondaryActionButton };
+export { DeleteModal, MainActionButton, SecondaryActionButton };

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

@@ -181,6 +181,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   } = useBulkSelection(dataIds);
 
   const getParams = useCallback(() => {
@@ -488,6 +489,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       setColumns={changeColumnsState}
       maxColumns={maxColumns}
       exportAction={exportContent}
+      setHoverCheck={setHoverCheck}
     />
   );
 
@@ -558,6 +560,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           columns={currentDataColumnsState}
           categoryColors={categoryColors}
           addCategoryColors={addCategoryColors}
+          hoverCheck={checkState.hoverCheck}
         />
       );
     });
@@ -590,6 +593,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           categoryColors={categoryColors}
           addCategoryColors={addCategoryColors}
           skipReview={skipReviewOnPublish}
+          hoverCheck={checkState.hoverCheck}
         />
       );
     });

package/src/modules/Users/Roles/BulkHeader/TableHeader/index.tsx

@@ -1,24 +1,36 @@
 import React from "react";
 
-import { CheckField, TableCounter, NameFilter, PermissionsFilter, UsersFilter } from "@ax/components";
+import { CheckField, TableCounter, NameFilter, PermissionsFilter, UsersFilter, Tooltip } from "@ax/components";
 import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
-  const { totalItems, selectAllItems, isScrolling, sortItems, sortedListStatus, isSiteView } = props;
+  const {
+    totalItems,
+    selectAllItems,
+    isScrolling,
+    sortItems,
+    sortedListStatus,
+    isSiteView,
+    checkState,
+    setHoverCheck,
+  } = props;
 
   return (
     <S.TableHeader isScrolling={isScrolling} data-testid="roles-table-header">
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          checked={false}
-          error={false}
-        />
+        <Tooltip content="Select All Roles" bottom>
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       <S.NameWrapper>
         <NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
@@ -47,6 +59,8 @@ interface IProps {
   sortedListStatus: any;
   filterValues: any;
   isSiteView: boolean;
+  checkState: Record<string, boolean>;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;

package/src/modules/Users/Roles/BulkHeader/index.tsx

@@ -18,6 +18,7 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
     isSiteView,
     roles,
     selectedRoles,
+    setHoverCheck,
   } = props;
 
   const deactivatedSelectedRoles = roles.filter((role: IRole) => selectedRoles.includes(role.id) && !role.active);
@@ -48,6 +49,8 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
       isSiteView={isSiteView}
+      checkState={checkState}
+      setHoverCheck={setHoverCheck}
     />
   );
 };
@@ -66,6 +69,7 @@ export interface IBulkHeaderProps {
   isSiteView: boolean;
   roles: IRole[];
   selectedRoles: number[];
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkHeader;

package/src/modules/Users/Roles/RoleItem/index.tsx

@@ -8,7 +8,7 @@ import { CheckField, ToggleField, Tag, Tooltip, Avatar } from "@ax/components";
 import * as S from "./style";
 
 const RoleItem = (props: IRoleItemProps): JSX.Element => {
-  const { role, users, isSelected, onChange, activateRole, siteId, onClick } = props;
+  const { role, users, isSelected, onChange, activateRole, siteId, onClick, hoverCheck } = props;
   const isSiteView = siteId !== "global";
   const [isOpen, setIsOpen] = useState(false);
 
@@ -41,7 +41,7 @@ const RoleItem = (props: IRoleItemProps): JSX.Element => {
         <CheckField
           name="check"
           value={role.id ?? ""}
-          checked={isSelected}
+          checked={isSelected || (hoverCheck && role.editable)}
           onChange={(value: ICheck) => onChange(value)}
           disabled={!role.editable}
         />
@@ -92,6 +92,7 @@ interface IRoleItemProps {
   users: IUser[];
   isSelected: boolean;
   siteId: string | number;
+  hoverCheck: boolean;
   onChange: (value: ICheck) => void;
   onClick: () => void;
   activateRole(value: boolean): void;

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

@@ -47,6 +47,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
     addToBulkSelection,
     selectAllItems,
     selectedItems,
+    setHoverCheck,
   } = useBulkSelection(rolesIds);
 
   useEffect(() => {
@@ -67,9 +68,16 @@ const Roles = (props: IRolesProps): JSX.Element => {
 
   const unselectAllItems = () => resetBulkSelection();
 
-  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+  const checkAllEditableSelected = () => pageRoles.filter((role) => role.editable).length === selectedItems.all.length;
 
-  const handleSelectAll = () => selectAllItems();
+  const selectItems = () => (checkAllEditableSelected() ? unselectAllItems() : handleSelectAll());
+
+  const bulkFilter = (bulkSelection: number[]) => {
+    const activeRoles = bulkSelection.filter((item) => pageRoles.find((role) => role.id === item)?.editable);
+    return { all: activeRoles };
+  };
+
+  const handleSelectAll = () => selectAllItems(bulkFilter);
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
@@ -147,6 +155,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
       isSiteView={isSiteView}
       roles={roles}
       selectedRoles={selectedItems.all}
+      setHoverCheck={setHoverCheck}
     />
   );
 
@@ -192,6 +201,7 @@ const Roles = (props: IRolesProps): JSX.Element => {
                     onClick={() => openSideModal(role)}
                     siteId={siteId}
                     activateRole={handleActivateRole}
+                    hoverCheck={checkState.hoverCheck}
                   />
                 );
               })

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter } from "@ax/components";
+import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter, Tooltip } from "@ax/components";
 import { IQueryValue, IRole } from "@ax/types";
 
 import * as S from "./style";
@@ -16,6 +16,8 @@ const TableHeader = (props: IProps): JSX.Element => {
     filterValues,
     isSiteView,
     roles,
+    checkState,
+    setHoverCheck,
   } = props;
 
   const roleFilters = [
@@ -38,15 +40,18 @@ const TableHeader = (props: IProps): JSX.Element => {
   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 Users" 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.NameWrapper>
         <NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
@@ -91,6 +96,8 @@ interface IProps {
   sortedListStatus: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean };
   filterValues: Record<string, IQueryValue[]>;
   roles: IRole[];
+  checkState: Record<string, boolean>;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default TableHeader;

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

@@ -19,6 +19,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     filterValues,
     isSiteView = false,
     roles,
+    setHoverCheck,
   } = props;
 
   const isAllowedToRemoveUsers = usePermission("usersRoles.removeUsers");
@@ -51,6 +52,8 @@ const BulkHeader = (props: IProps): JSX.Element => {
       sortedListStatus={sortedListStatus}
       isSiteView={isSiteView}
       roles={roles}
+      setHoverCheck={setHoverCheck}
+      checkState={checkState}
     />
   );
 };
@@ -69,6 +72,7 @@ interface IProps {
   filterValues: Record<string, IQueryValue[]>;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   roles: IRole[];
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkHeader;