@griddo/ax 11.10.8 → 11.10.9-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.10.8",
+  "version": "11.10.9-rc.1",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "91c941167be71dc2e26ccde20c5808f314a457e5"
+  "gitHead": "ce5d7b9161ccf393d365874cc2f97493bb65dd96"
 }

package/src/components/Fields/AsyncSelect/style.tsx

@@ -104,6 +104,7 @@ export const StyledSelect = styled(AsyncSelect)<{
       border: none;
       height: auto;
       min-width: auto;
+      justify-content: flex-start;
 
       .react-select__value-container {
         flex: 0 1 auto;

package/src/components/Fields/TagsField/index.tsx

@@ -51,6 +51,7 @@ const TagsField = (props: IProps): JSX.Element => {
         placeholder={placeholder}
         onKeyDown={_handleKeyDown}
         disabled={disabled}
+        spellCheck={true}
       />
     </S.Wrapper>
   );

package/src/components/Fields/TextArea/index.tsx

@@ -45,6 +45,7 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
       placeholder={placeholder}
       $error={error}
       disabled={disabled}
+      spellCheck={true}
     />
   );
 };

package/src/components/Fields/TextField/index.tsx

@@ -101,7 +101,9 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
         hasPrefix={!!prefix}
         prefixWidth={width}
         aria-label={name}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={focus}
+        spellCheck={true}
       />
       {hasBackgroundIcon && (
         <S.BackgroundIcon data-testid="background-icon-component" onClick={onClickIcon} inversed={inversed}>

package/src/components/Gallery/index.tsx

@@ -211,6 +211,11 @@ const Gallery = (props: IProps): JSX.Element => {
   const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) =>
     setFiltersSelection(filterPointer, filtersSelected);
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(firstPage);
+  };
+
   const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
   const emptySearchStateProps = {
@@ -254,7 +259,7 @@ const Gallery = (props: IProps): JSX.Element => {
         <S.Search>
           {!isSiteView && <S.FiltersGlobal>{filters}</S.FiltersGlobal>}
           <SearchField
-            onChange={setSearchQuery}
+            onChange={handleSearch}
             value={searchQuery}
             placeholder="Type an image’s name, title, or #tag"
             focus={false}
@@ -269,7 +274,7 @@ const Gallery = (props: IProps): JSX.Element => {
           ) : (
             <>
               <S.SearchTags>
-                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
                 <FilterTagsBar
                   filters={filterValues}
                   setFilters={setFiltersSelection}

package/src/components/PageFinder/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 
-import { IContentType, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/types";
-import { useDebounce } from "@ax/hooks";
+import { IContentType, IGetSitePagesParams, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/types";
 import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
 import { sites, structuredData } from "@ax/api";
-import { Loader, Pagination, TextField, Select, Button, AsyncSelect } from "@ax/components";
+import { Loader, Pagination, Select, Button, AsyncSelect, SearchField } from "@ax/components";
 import SelectionListItem from "./SelectionListItem";
 
 import * as S from "./style";
@@ -15,33 +14,40 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
 
-  const initialState = {
+  const initialState: IState = {
     site: currentSiteID || allSites[0].id,
     lang: lang.id,
     type: "all",
-    query: "",
     items: [],
     page: 1,
     totalItems: 0,
   };
-  const [state, setState] = useState(initialState);
+
+  const [state, setState] = useState<IState>(initialState);
   const [isLoading, setIsLoading] = useState(false);
   const [selectedPages, setSelectedPages] = useState<IPage[]>([]);
   const [selectedPagesIds, setSelectedPagesIds] = useState<number[]>(pages ? pages : []);
   const [showSelected, setShowSelected] = useState(false);
-  const debouncedSearch = useDebounce(state.query);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const defultTypeOptions = [
+    { label: "All content", value: "all" },
+    { label: "Base templates", value: "basic" },
+    { label: "List pages", value: "list" },
+    { label: "Static pages", value: "static" },
+  ];
 
-  const allTypesOption = { label: "All content", value: "all" };
-  const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string; value: string }[]>([
-    { ...allTypesOption },
-  ]);
+  const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string; value: string }[]>(defultTypeOptions);
 
   const changeContentTypeOptions = (types: { label: string; value: string }[]) =>
-    setContentTypeOptions([allTypesOption, ...types]);
+    setContentTypeOptions([...defultTypeOptions, ...types]);
 
   const itemsPerPage = 50;
 
-  const resetQuery = () => setState((state) => ({ ...state, query: "" }));
+  const resetQuery = () => {
+    setSearchQuery("");
+    setPage(1);
+  };
 
   const changeState = (key: string, value: string | number | null) => setState((state) => ({ ...state, [key]: value }));
 
@@ -52,16 +58,19 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   useEffect(() => {
     let isMounted = true;
-    const params = {
+    const params: IGetSitePagesParams = {
       deleted: false,
       filterPages: selectedPagesIds,
-      siteID: state.site,
+      siteID: state.site || "global",
       ignoreLang: true,
     };
 
     const getSelectedItems = async () => {
       if (!isMounted) return;
-      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(params);
+
+      const response: { status: number; data: { totalItems: number; items: IPage[] } } =
+        await sites.getSitePages(params);
+
       if (isReqOk(response.status)) {
         setSelectedPages(response.data.items);
       } else {
@@ -81,22 +90,30 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   useEffect(() => {
     let isMounted = true;
-    const params = {
-      siteID: state.site,
+
+    const isTypeFilter = (value: string) => ["basic", "list", "static"].includes(value);
+
+    const params: IGetSitePagesParams = {
+      siteID: state.site || "global",
       deleted: false,
       page: state.page,
       itemsPerPage,
-      query: debouncedSearch,
+      query: searchQuery,
       lang: state.lang,
-      filterStructuredData: state.type,
+      filterStructuredData: isTypeFilter(state.type) ? "all" : state.type,
       format: "list",
     };
 
+    const filterQuery = isTypeFilter(state.type) ? `&type=${state.type}` : "";
+
     const getAndSetItems = async () => {
       if (!isMounted) return;
 
       setIsLoading(true);
-      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(params);
+      const response: { status: number; data: { totalItems: number; items: IPage[] } } = await sites.getSitePages(
+        params,
+        filterQuery
+      );
       if (isReqOk(response.status)) {
         setState((state) => ({ ...state, items: response.data.items, totalItems: response.data.totalItems }));
       } else {
@@ -110,12 +127,14 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSiteID, debouncedSearch, state.page, state.lang, state.site, state.type]);
+  }, [currentSiteID, searchQuery, state.page, state.lang, state.site, state.type]);
 
   const getAndSetContentTypes = async () => {
     const { site, lang } = state;
     const { data } = await structuredData.getContentTypes(site, lang);
-    const contentTypes = data.items ? data.items.map((type: IContentType) => ({ label: type.title, value: type.id })) : [];
+    const contentTypes = data.items
+      ? data.items.map((type: IContentType) => ({ label: type.title, value: type.id }))
+      : [];
     changeContentTypeOptions(contentTypes);
     changeState("type", "all");
   };
@@ -125,14 +144,6 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.site]);
 
-  const textFieldProps = {
-    value: state.query,
-    onChange: (search: string) => changeState("query", search),
-    placeholder: "Search",
-    icon: "search",
-    iconPosition: "in",
-  };
-
   const setPage = (newPage: number) => changeState("page", newPage);
 
   const handleChange = (item: { value: IPage; isChecked: boolean }) => {
@@ -154,6 +165,11 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const handleButtonClick = () => onClick(selectedPages);
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(1);
+  };
+
   const getPageList = (items: IPage[]) =>
     items &&
     items.map((page: IPage) => (
@@ -173,8 +189,6 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const showPagination = state.totalItems > itemsPerPage;
 
-  const hasQuery = state.query.length > 0;
-
   const buttonText = !showSelected ? `view selected (${selectedPages.length})` : "hide selected";
 
   return (
@@ -217,11 +231,13 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
         />
       </S.ContentTypeFilter>
       <S.SearchWrapper>
-        {hasQuery ? (
-          <TextField {...textFieldProps} onClickIcon={resetQuery} icon="close" />
-        ) : (
-          <TextField {...textFieldProps} />
-        )}
+        <SearchField
+          onChange={handleSearch}
+          placeholder="Search"
+          value={searchQuery}
+          searchOnEnter={false}
+          focus={false}
+        />
       </S.SearchWrapper>
       <S.LowText>Most recent content</S.LowText>
       {isLoading ? (
@@ -255,6 +271,15 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
   );
 };
 
+interface IState {
+  site: number | null;
+  lang: number;
+  type: string;
+  items: IPage[];
+  page: number;
+  totalItems: number;
+}
+
 interface IPageFinderProps {
   onClick: (value: IPage | IPage[]) => void;
   currentSiteID: number | null;

package/src/components/PageFinder/style.tsx

@@ -7,6 +7,10 @@ const Wrapper = styled.div`
   height: 100%;
   padding-bottom: ${(p) => p.theme.spacing.xl};
   flex-direction: column;
+
+  #react-select-7-option-3 {
+    border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  }
 `;
 
 const ListWrapper = styled.div`

package/src/modules/ActivityLog/ItemLog/EventItem/index.tsx

@@ -112,14 +112,14 @@ const EventItem = (props: IEventItemProps) => {
         </S.ContentType>
         <S.Event>
           {eventType?.name || ""}{" "}
-          <div
+          <span
             onClick={!isDeleteEvent ? handleClick : undefined}
             role="button"
             tabIndex={0}
             onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
           >
             {content?.title || contentType?.title || ""}
-          </div>
+          </span>
         </S.Event>
       </S.Item>
       <DetailModal

package/src/modules/ActivityLog/ItemLog/EventItem/style.tsx

@@ -65,12 +65,14 @@ const ContentType = styled.div`
 
 const Event = styled.div`
   ${(p) => p.theme.textStyle.uiS};
-  display: flex;
-  align-items: center;
   color: ${(p) => p.theme.colors.textMediumEmphasis};
   width: 38%;
   padding-right: ${(p) => p.theme.spacing.s};
-  div {
+  align-content: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  span {
     margin-left: ${(p) => p.theme.spacing.xxs};
     color: ${(p) => p.theme.colors.interactive01};
   }

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/index.tsx

@@ -97,14 +97,14 @@ const EventItem = (props: IEventItemProps) => {
           <S.Time>{created.hour}</S.Time>
           <S.Event>
             {eventType?.name || ""}{" "}
-            <div
+            <span
               onClick={!isDeleteEvent ? handleClick : undefined}
               role="button"
               tabIndex={0}
               onKeyDown={!isDeleteEvent ? handleKeyDown : undefined}
             >
               {content?.title || contentType?.title || ""}
-            </div>
+            </span>
           </S.Event>
         </S.EventWrapper>
         <S.Site>

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/style.tsx

@@ -56,11 +56,13 @@ const ContentType = styled.div`
 
 const Event = styled.div`
   ${(p) => p.theme.textStyle.uiS};
-  display: flex;
-  align-items: center;
+  align-content: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   color: ${(p) => p.theme.colors.textMediumEmphasis};
-  flex-grow: 1;
-  div {
+  width: 100%;
+  span {
     margin-left: ${(p) => p.theme.spacing.xxs};
     color: ${(p) => p.theme.colors.interactive01};
   }

package/src/modules/ActivityLog/index.tsx

@@ -109,6 +109,11 @@ const ActivityLog = (props: IActivityLogProps) => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(firstPage);
+  };
+
   const handleDownloadLog = async () => {
     const nowString = format(new Date(), "yyyy/MM/dd");
     let startDate = nowString;
@@ -208,7 +213,7 @@ const ActivityLog = (props: IActivityLogProps) => {
       title="Logs"
       rightButton={rightButtonProps}
       rightLineButton={rightLineButtonProps}
-      searchAction={setSearchQuery}
+      searchAction={handleSearch}
       searchValue={searchQuery}
     >
       <S.TableWrapper>
@@ -243,7 +248,7 @@ const ActivityLog = (props: IActivityLogProps) => {
           tableRef={tableRef}
         >
           <S.SearchTags>
-            <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+            <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
             <FilterTagsBar
               filters={filterValues}
               setFilters={setFiltersSelection}

package/src/modules/Content/index.tsx

@@ -827,6 +827,11 @@ const Content = (props: IProps): JSX.Element => {
 
   const addNewAction = baseFilters.includes(filter) || isGlobalPages ? toggleNewModal : addNewData;
 
+  const handleSearch = (query: string) => {
+    updateCurrentSearch(query);
+    setPage(1);
+  };
+
   const rightButtonProps = isAllowedToCreatePages
     ? {
         label: "New",
@@ -858,7 +863,7 @@ const Content = (props: IProps): JSX.Element => {
       languageAction={handleLanguage}
       availableLanguages={siteLanguages}
       rightButton={rightButtonProps}
-      searchAction={updateCurrentSearch}
+      searchAction={handleSearch}
       errors={errors}
       searchValue={currentSearch}
       exportAction={exportContent}
@@ -908,7 +913,7 @@ const Content = (props: IProps): JSX.Element => {
             tableRef={tableRef}
           >
             <S.SearchTags>
-              <SearchTagsBar query={currentSearch} setQuery={updateCurrentSearch} />
+              <SearchTagsBar query={currentSearch} setQuery={handleSearch} />
               <FilterTagsBar
                 filters={filterValues}
                 setFilters={setFiltersSelection}

package/src/modules/Forms/FormList/index.tsx

@@ -224,6 +224,11 @@ const FormList = (props: IUserListProps): JSX.Element => {
     toggleDeleteModal();
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(1);
+  };
+
   const bulkActions = isAllowedToPublishForm
     ? [
         {
@@ -326,7 +331,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
       language={lang}
       availableLanguages={availableLanguages}
       languageAction={handleLanguage}
-      searchAction={setSearchQuery}
+      searchAction={handleSearch}
       searchValue={searchQuery}
     >
       <S.FormListWrapper ref={wrapperRef} data-testid="forms-wrapper">
@@ -355,7 +360,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
             >
               <>
                 <S.SearchTags>
-                  <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                  <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
                   <FilterTagsBar
                     filters={filterValues}
                     setFilters={setFiltersSelection}

package/src/modules/MediaGallery/index.tsx

@@ -461,6 +461,11 @@ const MediaGallery = (props: IProps) => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(firstPage);
+  };
+
   let bulkActions: IBulkAction[] = [];
 
   if (allowedToEditFile) {
@@ -706,7 +711,7 @@ const MediaGallery = (props: IProps) => {
           <S.FiltersBar isSite={false}>
             {isSiteView && filters}
             <S.SearchWrapper>
-              <SearchField onChange={setSearchQuery} placeholder="Search" value={searchQuery} focus={false} />
+              <SearchField onChange={handleSearch} placeholder="Search" value={searchQuery} focus={false} />
             </S.SearchWrapper>
           </S.FiltersBar>
           {isLoading ? (
@@ -714,7 +719,7 @@ const MediaGallery = (props: IProps) => {
           ) : (
             <S.FolderContent>
               <S.SearchTags>
-                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
                 <FilterTagsBar
                   filters={filterValues}
                   setFilters={setFiltersSelection}

package/src/modules/Redirects/index.tsx

@@ -154,6 +154,11 @@ const Redirects = (props: IProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(firstPage);
+  };
+
   const TableHeader = (
     <BulkHeader
       showBulk={areItemsSelected(redIds)}
@@ -272,7 +277,7 @@ const Redirects = (props: IProps): JSX.Element => {
       title="SEO Settings"
       rightButton={rightButtonProps}
       rightLineButton={rightLineButtonProps}
-      searchAction={setSearchQuery}
+      searchAction={handleSearch}
       filterSearchAction={setSearchFilter}
       searchFilters={searchFilters}
       searchValue={searchQuery}
@@ -297,7 +302,7 @@ const Redirects = (props: IProps): JSX.Element => {
             >
               <>
                 <S.SearchTags>
-                  <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                  <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
                   {!currentSite && (
                     <FilterTagsBar
                       filters={filterValues}

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

@@ -342,11 +342,16 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     liveStatus: "Live",
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(1);
+  };
+
   const listTable = (
     <TableList tableHeader={Header} pagination={pagination} hasFixedHeader={true} tableRef={tableRef}>
       <>
         <S.SearchTags>
-          <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+          <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
           <FilterTagsBar
             filters={filterValues}
             setFilters={setFiltersSelection}
@@ -369,7 +374,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
     <MainWrapper
       title="Sites"
       rightButton={rightButtonProps}
-      searchAction={setSearchQuery}
+      searchAction={handleSearch}
       hasAnimation={hasAnimation}
       searchValue={searchQuery}
     >

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

@@ -548,6 +548,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     languageAction: isAllPages || isDataTranslatable ? handleLanguage : undefined,
   };
 
+  const handleSearch = (query: string) => {
+    updateCurrentSearch(query);
+    setPage(1);
+  };
+
   const selectedValue = getSelectedValue(options, filter);
 
   const mapCurrentDataContent = () =>
@@ -634,7 +639,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       availableLanguages={languageProps.globalLangs}
       language={languageProps.lang}
       languageAction={languageProps.languageAction}
-      searchAction={updateCurrentSearch}
+      searchAction={handleSearch}
       searchValue={currentSearch}
       exportAction={exportContent}
     >
@@ -676,7 +681,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           >
             <>
               <S.SearchTags>
-                <SearchTagsBar query={currentSearch} setQuery={updateCurrentSearch} />
+                <SearchTagsBar query={currentSearch} setQuery={handleSearch} />
                 <FilterTagsBar
                   filters={filterValues[currentStructuredData?.id || "all"]}
                   setFilters={setFiltersSelection}

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

@@ -173,6 +173,11 @@ const UserList = (props: IUserListProps): JSX.Element => {
     setFiltersSelection(filterPointer, filtersSelected);
   };
 
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setPage(firstPage);
+  };
+
   const handleClick = (id: number | null) => async () => {
     if (id) {
       await getUser(id);
@@ -223,7 +228,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
     <MainWrapper
       title="Users & Roles"
       rightButton={rightButtonProps}
-      searchAction={setSearchQuery}
+      searchAction={handleSearch}
       searchValue={searchQuery}
     >
       <S.UsersWrapper ref={wrapperRef} data-testid="users-wrapper">
@@ -239,7 +244,7 @@ const UserList = (props: IUserListProps): JSX.Element => {
           >
             <>
               <S.SearchTags>
-                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <SearchTagsBar query={searchQuery} setQuery={handleSearch} />
                 <FilterTagsBar
                   filters={filterValues}
                   setFilters={setFiltersSelection}