@griddo/ax 11.7.13 → 11.8.0-rc.0

package/src/modules/ActivityLog/TableHeader/style.tsx

@@ -0,0 +1,73 @@
+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.xs} ${p.theme.spacing.m}`};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  margin-left: ${(p) => p.theme.spacing.xs};
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const UserHeader = styled(Header)`
+  width: 24%;
+  padding: ${(p) => `0 0 0 ${p.theme.spacing.s}`};
+  & > div {
+    margin-right: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const TimeHeader = styled(Header)`
+  width: 8%;
+  justify-content: center;
+  padding: 0;
+`;
+
+const SiteHeader = styled(Header)`
+  width: 15%;
+  justify-content: center;
+  padding: 0;
+`;
+
+const ContentHeader = styled(Header)`
+  width: 15%;
+  justify-content: center;
+  padding: 0;
+`;
+
+const EventHeader = styled(Header)`
+  width: 38%;
+  padding: 0;
+`;
+
+const FiltersHeader = styled(Header)`
+  width: 50%;
+  padding: ${(p) => `0 0 0 ${p.theme.spacing.s}`};
+  & > div {
+    margin-right: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const SiteUserHeader = styled(Header)`
+  width: 25%;
+  padding: 0;
+`;
+
+const ContentUserHeader = styled(Header)`
+  width: 25%;
+  padding: ${(p) => `0 ${p.theme.spacing.s} 0 0`};
+`;
+
+export {
+  TableHeader,
+  UserHeader,
+  TimeHeader,
+  SiteHeader,
+  ContentHeader,
+  EventHeader,
+  FiltersHeader,
+  ContentUserHeader,
+  SiteUserHeader,
+};

package/src/modules/ActivityLog/constants.tsx

@@ -0,0 +1,10 @@
+const eventKey: Record<string, string> = Object.freeze({
+  DELETED_PAGE: "DELETED_PAGE",
+  DELETED_CONTENT_TYPE_PAGE: "DELETED_X_CONTENT_TYPE_PAGE",
+  DELETED_FOOTER: "DELETED_FOOTER",
+  DELETED_HEADER: "DELETED_HEADER",
+  DELETED_STRUCTURED_DATA: "DELETED_HEADER",
+  DELETED_CONTENT_TYPE: "DELETED_X_CONTENT_TYPE_SIMPLE",
+});
+
+export { eventKey };

package/src/modules/ActivityLog/hooks.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { IQueryValue } from "@ax/types";
+
+const useFilterQuery = () => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    sites: [{ value: "all", label: "All" }],
+    users: [{ value: "all", label: "All" }],
+    eventTypes: [{ value: "all", label: "All" }],
+    contentTypes: [{ value: "all", label: "All" }],
+    date: [],
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState<Record<string, string>>({});
+
+  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
+    const filterQuery = Object.fromEntries(
+      Object.entries(filterValues)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .filter(([_, arr]) => Array.isArray(arr) && arr.length > 0 && !(arr.length === 1 && arr[0].value === "all"))
+        .map(([key, arr]) => [key, arr.map((item) => item.value).join(",")])
+    );
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[]) => {
+    const { sites, users, eventTypes, contentTypes, date } = query;
+    const filterValues: Record<string, IQueryValue[]> = {
+      sites: pointer === "sites" ? filter : sites,
+      users: pointer === "users" ? filter : users,
+      eventTypes: pointer === "eventTypes" ? filter : eventTypes,
+      contentTypes: pointer === "contentTypes" ? filter : contentTypes,
+      date: pointer === "date" ? filter : date,
+    };
+
+    setQuery(filterValues);
+    setFilterQuery(filterValues);
+  };
+
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery({});
+  };
+
+  return {
+    setFiltersSelection,
+    resetFilterQuery,
+    filterValues: query,
+    filterQuery: currentFilterQuery,
+  };
+};
+
+export { useFilterQuery };

package/src/modules/ActivityLog/index.tsx

@@ -0,0 +1,313 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+import { format, subDays } from "date-fns";
+
+import { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+import { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState } from "@ax/types";
+import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Select, TableList } from "@ax/components";
+import { activityLogActions } from "@ax/containers/ActivityLog";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { useModal } from "@ax/hooks";
+
+import { useFilterQuery } from "./hooks";
+import TableHeader from "./TableHeader";
+import ItemLog from "./ItemLog";
+import ItemLogUser from "./ItemLogUser";
+import DownloadModal from "./DownloadModal";
+
+import * as S from "./style";
+
+const ActivityLog = (props: IActivityLogProps) => {
+  const {
+    activityLog,
+    listMode,
+    setListMode,
+    getActivityLog,
+    getActivityLogByUser,
+    downloadActivityLog,
+    getStructuredData,
+  } = props;
+
+  const itemsPerPage = 100;
+  const firstPage = 1;
+  const [page, setPage] = useState(firstPage);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [isSortAscending, setIsSortAscending] = useState(false);
+  const initialState: IDownloadFormState = {
+    dateRange: "7",
+    startTime: null,
+    maxEvents: 0,
+    format: "csv",
+    startDate: null,
+    endDate: null,
+  };
+  const [downloadForm, setDownloadForm] = useState(initialState);
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
+  const tableRef = useRef<HTMLDivElement>(null);
+  const { isOpen: isDownloadOpen, toggleModal: toggleDownloadModal } = useModal();
+
+  const { totalItems } = activityLog;
+  const isEmpty = totalItems === 0;
+  const isModeUser = listMode === "user";
+  const isSearching = searchQuery.length > 0;
+
+  const getParams = useCallback(() => {
+    const params: LogActivityPaginationRequest = {
+      page,
+      itemsPerPage,
+      ...(isSortAscending && { order: "ASC" }),
+      ...(searchQuery.length && { search: searchQuery }),
+      ...filterQuery,
+    };
+
+    return params;
+  }, [page, filterQuery, isSortAscending, searchQuery]);
+
+  const handleGetLog = async () => {
+    const params = getParams();
+    if (isModeUser) {
+      await getActivityLogByUser(params);
+    } else {
+      await getActivityLog(params);
+    }
+  };
+
+  const handleUpdateStructuredDate = async () => await getStructuredData(null, null, false);
+
+  useEffect(() => {
+    handleGetLog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getParams]);
+
+  useEffect(() => {
+    handleUpdateStructuredDate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
+
+  const handleSelectChange = async (value: string) => {
+    const params = getParams();
+    if (value === "user") {
+      await getActivityLogByUser({ ...params, page: firstPage });
+    } else {
+      await getActivityLog({ ...params, page: firstPage });
+    }
+    setListMode(value);
+  };
+
+  const sortItems = async (isAscending: boolean) => {
+    setPage(firstPage);
+    setIsSortAscending(isAscending);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
+    setPage(firstPage);
+    setFiltersSelection(filterPointer, filtersSelected);
+  };
+
+  const handleDownloadLog = async () => {
+    const nowString = format(new Date(), "yyyy/MM/dd");
+    let startDate = nowString;
+    let endDate = nowString;
+
+    if (downloadForm.dateRange === "7") {
+      startDate = format(subDays(new Date(), 7), "yyyy/MM/dd");
+    }
+
+    if (downloadForm.dateRange === "30") {
+      startDate = format(subDays(new Date(), 30), "yyyy/MM/dd");
+    }
+
+    if (downloadForm.dateRange === "custom" && downloadForm.startDate && downloadForm.endDate) {
+      startDate = format(new Date(downloadForm.startDate), "yyyy/MM/dd");
+      endDate = format(new Date(downloadForm.endDate), "yyyy/MM/dd");
+    }
+
+    const data: LogActivityExportRequest = {
+      dateRange: `${startDate}-${endDate}`,
+      startTime: downloadForm.startTime,
+      maxEvents: downloadForm.maxEvents ? downloadForm.maxEvents : null,
+      format: [downloadForm.format],
+    };
+
+    await downloadActivityLog(data);
+
+    toggleDownloadModal();
+    setDownloadForm(initialState);
+  };
+
+  const header = (
+    <TableHeader
+      isScrolling={isScrolling}
+      filterItems={filterItems}
+      filterValues={filterValues}
+      sortItems={sortItems}
+      isSortAscending={isSortAscending}
+      isModeUser={isModeUser}
+    />
+  );
+
+  const pagination = {
+    setPage,
+    itemsPerPage,
+    totalItems,
+    currPage: page,
+  };
+
+  const rightButtonProps = {
+    label: "Refresh",
+    action: handleGetLog,
+    buttonStyle: "line",
+    icon: "refresh",
+  };
+
+  const rightLineButtonProps = {
+    label: "Download",
+    action: toggleDownloadModal,
+    buttonStyle: "text",
+    icon: "download",
+  };
+
+  const mainDownloadAction = { title: "Download", onClick: handleDownloadLog };
+
+  const selectOptions = [
+    { value: "default", label: "Activity timeline" },
+    { value: "user", label: "Grouped by user" },
+  ];
+
+  const filterLabels = {
+    date: "Date",
+    users: "User",
+    sites: "Site",
+    contentTypes: "Content Type",
+    eventTypes: "Event",
+  };
+
+  const emptyProps = {
+    message: (
+      <>
+        You will start to see the User Activity Log when you
+        <br />
+        make some changes.
+      </>
+    ),
+  };
+
+  const emptySearchStateProps = {
+    icon: "search",
+    title: "Oh! No Results Found",
+    message: "We couldn’t find what you are looking for. Please, try another search.",
+  };
+
+  return (
+    <MainWrapper
+      title="Logs"
+      rightButton={rightButtonProps}
+      rightLineButton={rightLineButtonProps}
+      searchAction={setSearchQuery}
+      searchValue={searchQuery}
+    >
+      <S.TableWrapper>
+        <ErrorToast />
+        <S.Intro>
+          <S.IntroContent>
+            <S.IntroTitle>User Activity Log</S.IntroTitle>
+            <div>
+              <strong>Track</strong> and record <strong>all actions performed by users</strong> on the Griddo. This
+              enables monitoring, and issue identification,
+              <br />
+              and ensures the security and integrity of content and data within the system.
+              <br />
+              For more details on each action, please refer to the Activity Log Glossary.
+            </div>
+          </S.IntroContent>
+          <S.SelectWrapper>
+            <Select
+              name="visualSelect"
+              value={listMode}
+              options={selectOptions}
+              onChange={handleSelectChange}
+              mandatory={true}
+            />
+          </S.SelectWrapper>
+        </S.Intro>
+        <TableList
+          tableHeader={header}
+          onScroll={onScroll}
+          pagination={pagination}
+          hasFixedHeader={true}
+          tableRef={tableRef}
+        >
+          <S.SearchTags>
+            <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+            <FilterTagsBar
+              filters={filterValues}
+              setFilters={setFiltersSelection}
+              resetFilters={resetFilterQuery}
+              labels={filterLabels}
+            />
+          </S.SearchTags>
+          {isEmpty ? (
+            <S.EmptyWrapper>
+              {isSearching && <EmptyState {...emptySearchStateProps} />}
+              {!isSearching && <EmptyState {...emptyProps} />}
+            </S.EmptyWrapper>
+          ) : (
+            <>
+              {isModeUser
+                ? (activityLog as ILogItemsByUser).items.map((item) => (
+                    <ItemLogUser key={item.date} items={item} getLog={handleGetLog} />
+                  ))
+                : (activityLog as ILogItemsByDay).items.map((item) => (
+                    <ItemLog key={item.date} items={item} getLog={handleGetLog} />
+                  ))}
+            </>
+          )}
+        </TableList>
+      </S.TableWrapper>
+      <DownloadModal
+        isOpen={isDownloadOpen}
+        toggleModal={toggleDownloadModal}
+        mainModalAction={mainDownloadAction}
+        form={downloadForm}
+        setForm={setDownloadForm}
+      />
+    </MainWrapper>
+  );
+};
+
+export interface IDownloadFormState {
+  dateRange: string;
+  startTime: string | null;
+  maxEvents: number | null;
+  format: string;
+  startDate: string | null;
+  endDate: string | null;
+}
+
+interface IActivityLogProps {
+  activityLog: ILogItemsByDay | ILogItemsByUser;
+  listMode: string;
+  getActivityLog(params: LogActivityPaginationRequest): Promise<void>;
+  getActivityLogByUser(params: LogActivityPaginationRequest): Promise<void>;
+  setListMode(listMode: string): void;
+  downloadActivityLog(data: LogActivityExportRequest): Promise<void>;
+  getStructuredData(token: string | null, siteID?: number | null, hasLoading?: boolean): Promise<void>;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  activityLog: state.activityLog.activityLog,
+  listMode: state.activityLog.listMode,
+});
+
+const mapDispatchToProps = {
+  getActivityLog: activityLogActions.getActivityLog,
+  getActivityLogByUser: activityLogActions.getActivityLogByUser,
+  setListMode: activityLogActions.setListMode,
+  downloadActivityLog: activityLogActions.downloadActivityLog,
+  getStructuredData: structuredDataActions.getStructuredData,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ActivityLog);

package/src/modules/ActivityLog/style.tsx

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
+`;
+
+const EmptyWrapper = styled.div`
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 3))`};
+  display: flex;
+  align-items: center;
+`;
+
+const Intro = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const IntroContent = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  flex-grow: 1;
+`;
+
+const IntroTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const SelectWrapper = styled.div`
+  displa: flex;
+  width: 196px;
+  align-content: center;
+`;
+
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+`;
+
+export { TableWrapper, EmptyWrapper, Intro, IntroContent, IntroTitle, SelectWrapper, SearchTags, ModalContent };

package/src/modules/ActivityLog/utils.tsx

@@ -0,0 +1,31 @@
+import { pages, structuredData } from "@ax/api";
+import { isReqOk } from "@ax/helpers";
+import { IPage, IStructuredDataContent } from "@ax/types";
+
+const getPageSchemaVersion = async (id: number) => {
+  try {
+    const result = await pages.getPageInfo(id);
+    if (result && isReqOk(result.status)) {
+      const page: IPage = result.data;
+      return page.schemaVersionTimestamp;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  return undefined;
+};
+
+const getContentTypeSchemaVersion = async (id: number) => {
+  try {
+    const result = await structuredData.getDataContent(id, null);
+    if (result && isReqOk(result.status)) {
+      const data: IStructuredDataContent = result.data;
+      return data.schemaVersionTimestamp;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+  return undefined;
+};
+
+export { getPageSchemaVersion, getContentTypeSchemaVersion };

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

@@ -94,7 +94,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
   const currentCategories = categories[scope].sort(sortBy("title", false));
   const isEmpty = currentDataContent && currentDataContent.length === 0;
   const hasCategories = currentCategories.length > 0;
-  const categoryName = currentStructuredData && currentStructuredData.title;
+  const categoryName = (currentStructuredData && currentStructuredData.title) || "";
   const availableLanguages = currentSiteID ? siteLanguages : globalLangs;
   const isTranslatable = currentStructuredData ? currentStructuredData.translate : true;
   const indentationWidth = 35;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/index.tsx

@@ -16,6 +16,7 @@ export const Form = (props: IFormProps): JSX.Element => {
     theme,
     headerHeight,
     errors,
+    isDisabled,
     setSelectedTab,
     setHistoryPush,
     setErrors,
@@ -45,6 +46,7 @@ export const Form = (props: IFormProps): JSX.Element => {
         setHistoryPush={setHistoryPush}
         errors={errors}
         setErrors={setErrors}
+        isReadOnly={isDisabled}
       />
     );
   };
@@ -86,6 +88,7 @@ export interface IFormProps {
   headerHeight: number;
   errors: IErrorItem[];
   setErrors(errors: IErrorItem[]): void;
+  isDisabled: boolean;
 }
 
 export default Form;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/index.tsx

@@ -25,6 +25,7 @@ const FormConfigPanel = (props: IStateProps): JSX.Element => {
     selectedParent,
     errors,
     setErrors,
+    isDisabled,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -66,6 +67,7 @@ const FormConfigPanel = (props: IStateProps): JSX.Element => {
         headerHeight={headerHeight}
         errors={errors}
         setErrors={setErrors}
+        isDisabled={isDisabled}
       />
     </S.Wrapper>
   );
@@ -87,6 +89,7 @@ export interface IStateProps {
   selectedParent: Record<string, unknown> | null;
   errors: IErrorItem[];
   setErrors(errors: IErrorItem[]): void;
+  isDisabled: boolean;
 }
 
 export default FormConfigPanel;

package/src/modules/Forms/FormEditor/Editor/index.tsx

@@ -22,6 +22,7 @@ const Editor = (props: IProps) => {
     selectedParent,
     errors,
     template,
+    isDisabled,
     setErrors,
     setNotification,
     setSelectedTab,
@@ -84,7 +85,7 @@ const Editor = (props: IProps) => {
     <ResizePanel
       leftPanel={
         <S.EditorWrapper>
-          {hasFieldArrays && (
+          {hasFieldArrays && !isDisabled && (
             <SideModal
               onClick={handleClick}
               theme={theme}
@@ -93,7 +94,7 @@ const Editor = (props: IProps) => {
               selectField={handleSetSelectedField}
             />
           )}
-          <PageBrowser isReadOnly={false} theme={theme} browserRef={browserRef} />
+          <PageBrowser isReadOnly={isDisabled} theme={theme} browserRef={browserRef} />
         </S.EditorWrapper>
       }
       rightPanel={
@@ -110,6 +111,7 @@ const Editor = (props: IProps) => {
           selectedParent={selectedParent}
           errors={errors}
           setErrors={setErrors}
+          isDisabled={isDisabled}
         />
       }
       full={true}
@@ -140,6 +142,7 @@ interface IPageBrowserDispatchProps {
   theme: string;
   browserRef: React.RefObject<HTMLDivElement>;
   errors: IErrorItem[];
+  isDisabled: boolean;
   setErrors(errors: IErrorItem[]): void;
 }