@griddo/ax 10.3.23 → 10.3.25

package/src/modules/FileDrive/index.tsx

@@ -16,8 +16,19 @@ import {
   Tabs,
   BackFolder,
   SearchField,
+  SearchTagsBar,
+  FilterTagsBar,
 } from "@ax/components";
-import { IBulkAction, IFile, IFilesFolder, IFolder, IFolderTree, IGetFolderParams, IRootState } from "@ax/types";
+import {
+  IBulkAction,
+  IFile,
+  IFilesFolder,
+  IFolder,
+  IFolderTree,
+  IGetFolderParams,
+  IQueryValue,
+  IRootState,
+} from "@ax/types";
 import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
 import { fileDriveActions } from "@ax/containers/FileDrive";
 
@@ -96,9 +107,8 @@ const FileDrive = (props: IProps) => {
 
   const initFolderState = { name: "", folderID: currentFolderID };
   const [folderForm, setFolderForm] = useState<IFolderFormState>(initFolderState);
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const isSearching = searchQuery.length > 0;
 
@@ -148,12 +158,12 @@ const FileDrive = (props: IProps) => {
       siteID,
       folderID: currentFolderID,
       search: searchQuery,
-      query: currentFilterQuery,
+      query: filterQuery,
       loading: true,
     };
 
     return params;
-  }, [currentFolderID, selectedTab, searchQuery, currentFilterQuery]);
+  }, [currentFolderID, selectedTab, searchQuery, filterQuery]);
 
   useLayoutEffect(() => {
     return () => {
@@ -366,20 +376,14 @@ const FileDrive = (props: IProps) => {
 
   const handleDownload = async (fileID: number, fileName: string) => await downloadFiles(fileID, false, fileName);
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+  const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
-
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
+  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFiltersSelection(filterPointer, filtersSelected);
 
   let bulkActions: IBulkAction[] = [];
 
@@ -621,7 +625,16 @@ const FileDrive = (props: IProps) => {
           {isLoading ? (
             <Loading />
           ) : (
-            <>
+            <S.FolderContent>
+              <S.SearchTags>
+                <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                <FilterTagsBar
+                  filters={filterValues}
+                  setFilters={setFiltersSelection}
+                  labels={{ filterType: "Type" }}
+                  resetFilters={resetFilterQuery}
+                />
+              </S.SearchTags>
               {!isRoot && <Breadcrumb breadcrumb={breadcrumb} onClick={handleUpdateCurrentFolder} />}
               {(hasFolders || !isRoot) && (
                 <S.SectionWrapper>
@@ -675,7 +688,7 @@ const FileDrive = (props: IProps) => {
                   </S.EmptyStateWrapper>
                 )}
               </S.BigSectionWrapper>
-            </>
+            </S.FolderContent>
           )}
         </S.ContentWrapper>
       </S.Wrapper>

package/src/modules/FileDrive/style.tsx

@@ -34,15 +34,23 @@ const ContentWrapper = styled.div`
   flex-direction: column;
 `;
 
+const FolderContent = styled.div`
+  padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+
 const SectionWrapper = styled.div`
   width: 100%;
-  padding: ${(p) => p.theme.spacing.m};
+  padding-top: ${(p) => p.theme.spacing.m};
   display: flex;
   flex-direction: column;
 `;
 
 const BigSectionWrapper = styled(SectionWrapper)`
   flex-grow: 1;
+  padding-top: ${(p) => p.theme.spacing.m};
 `;
 
 const SectionHeader = styled.div`
@@ -165,11 +173,21 @@ const ResizeHandle = styled.div`
   }
 `;
 
+const SearchTags = styled.div`
+  & > div:nth-child(1){
+    margin-top: ${p => p.theme.spacing.m};
+  }
+  & > div:nth-child(2){
+    margin-top: ${p => p.theme.spacing.xs};
+  }
+`;
+
 export {
   Wrapper,
   FolderPanel,
   FolderPanelContent,
   ContentWrapper,
+  FolderContent,
   SectionWrapper,
   SectionHeader,
   SectionTitle,
@@ -187,5 +205,6 @@ export {
   TabsWrapper,
   ResizeHandle,
   Filters,
+  SearchTags,
   BigSectionWrapper,
 };

package/src/modules/Navigation/Defaults/Item/style.tsx

@@ -52,6 +52,8 @@ const FlagsWrapper = styled.div`
   svg {
     margin-right: 2px;
     margin-bottom: -3px; // TODO
+    display: inline;
+    vertical-align: baseline;
   }
 `;
 

package/src/modules/Navigation/Menus/List/Nav/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 
@@ -10,13 +10,11 @@ import { menuActions } from "@ax/containers/Navigation";
 import * as S from "./style";
 
 const Nav = (props: INav): JSX.Element => {
-  const { getCurrentMenu, currentType, isDirty, currentMenus } = props;
-  const [category, setCategory] = useState(currentType);
-
+  const { getCurrentMenu, currentType, setCurrentType, isDirty, currentMenus } = props;
   const { isOpen, toggleModal } = useModal();
 
   const discardChanges = () => {
-    getCurrentMenu(category);
+    getCurrentMenu(currentType);
     toggleModal();
   };
 
@@ -25,21 +23,21 @@ const Nav = (props: INav): JSX.Element => {
       <GuardModal isOpen={isOpen} discardChanges={discardChanges} toggleModal={toggleModal} />
       <SubNav>
         {currentMenus &&
-          currentMenus.map((category: any) => {
+          currentMenus.map((category: any, index: number) => {
             const _handleClick = () => {
-              setCategory(category.name);
+              setCurrentType(category.name);
               isDirty ? toggleModal() : getCurrentMenu(category.name);
             };
 
-            const isSelected = category.name === currentType;
+            const isEmpty = currentType === "" && index === 0;
+
+            const isSelected = isEmpty ? true : category.name === currentType;
             const selectedClass = isSelected ? "selected" : "";
 
             return (
               <MenuItem onClick={_handleClick} key={category.name}>
                 <NavLink to="#" className={selectedClass}>
-                  <S.Link active={isSelected}>
-                    {category.title}
-                  </S.Link>
+                  <S.Link active={isSelected}>{category.title}</S.Link>
                 </NavLink>
               </MenuItem>
             );
@@ -53,6 +51,7 @@ interface IProps {
   currentType: string;
   isDirty: boolean;
   currentMenus: any[] | null;
+  setCurrentType(currentType: string): void;
 }
 
 interface IDispatchProps {
@@ -64,7 +63,6 @@ const mapDispatchToProps = {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-  currentType: state.menu.type,
   currentMenus: state.menu.savedMenus,
 });
 

package/src/modules/Navigation/Menus/List/Table/SidePanel/index.tsx

@@ -90,7 +90,6 @@ const SidePanel = (props: IProps): JSX.Element => {
 const mapStateToProps = (state: IRootState) => ({
   form: state.menu.form,
   item: state.menu.item,
-  type: state.menu.type,
 });
 
 const mapDispatchToProps = {
@@ -100,7 +99,6 @@ const mapDispatchToProps = {
 
 interface IStateProps {
   form: IMenuForm;
-  type: string;
   item: IMenuItem | null;
 }
 interface ISidePanelProps {

package/src/modules/Navigation/Menus/List/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, memo } from "react";
+import React, { useEffect, useCallback, memo, useState } from "react";
 import { connect } from "react-redux";
 
 import { IGetSitePagesParams, IRootState, IMenuItem } from "@ax/types";
@@ -13,12 +13,15 @@ import Table from "./Table";
 import * as S from "./style";
 
 const List = (props: IMenuList): JSX.Element => {
-  const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, currentType } = props;
+  const { getMenus, lang, getSitePages, currentSiteID, editorMenu, savedMenu, savedMenus } = props;
 
   if (!currentSiteID) {
     throw new Error(`ERROR: User reached Menu List with null site info`);
   }
 
+  const initialState = savedMenus && savedMenus.length ? savedMenus[0].name : "";
+  const [currentType, setCurrentType] = useState(initialState);
+
   const { isDirty } = useShouldBeSaved(editorMenu, savedMenu, currentType);
   const memoizedGetMenus = useCallback(() => getMenus(), [getMenus]);
   const memoizedGetSitePages = useCallback(
@@ -42,7 +45,7 @@ const List = (props: IMenuList): JSX.Element => {
 
   return (
     <S.ListWrapper>
-      <Nav isDirty={isDirty} />
+      <Nav isDirty={isDirty} currentType={currentType} setCurrentType={setCurrentType} />
       <S.TableWrapper>
         <Table isDirty={isDirty} />
       </S.TableWrapper>
@@ -53,9 +56,9 @@ const List = (props: IMenuList): JSX.Element => {
 const mapStateToProps = (state: IRootState) => ({
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
   lang: state.app.lang,
-  currentType: state.menu.type,
   editorMenu: state.menu.editorMenu.elements,
   savedMenu: state.menu.savedMenu.elements,
+  savedMenus: state.menu.savedMenus,
 });
 
 const mapDispatchToProps = {
@@ -66,9 +69,9 @@ const mapDispatchToProps = {
 interface IStateProps {
   currentSiteID: number | null;
   lang: { locale: string; id: number | null };
-  currentType: string;
   editorMenu: IMenuItem[] | undefined;
   savedMenu: IMenuItem[] | undefined;
+  savedMenus: IMenuItem[] | null;
 }
 
 interface IDispatchProps {

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

@@ -1,6 +1,8 @@
 import React from "react";
 
 import { CheckField, SiteFilter, TableCounter, DateFilter } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
@@ -47,10 +49,10 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   selectAllItems: () => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   filterValues: any;
   isSiteItem: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
   sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 }
 

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -55,10 +56,10 @@ interface IProps {
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   filterValues: any;
   isSiteItem: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
   sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 }
 

package/src/modules/Redirects/hooks.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
+import { IQueryValue, ISite } from "@ax/types";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: { isAscending: boolean; sortedByDate: boolean; } = {
+  const sortedInitialState: { isAscending: boolean; sortedByDate: boolean } = {
     isAscending: false,
     sortedByDate: false,
   };
@@ -14,20 +15,25 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = (currentSiteID: number | null) => {
-  const initialQueryValues = {
-    sites: currentSiteID || "all",
-    order: "",
+const useFilterQuery = (site: ISite | null) => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    sites: site ? [{ value: site.id, label: site.name }] : [{ value: "all", label: "All" }],
+    order: [],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${site?.id || "global"}`);
 
   const setFilterQuery = (filterValues: any) => {
     const { sites, order } = filterValues;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery.concat(`&${pointer}=${values}`);
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues = Array.isArray(values)
+        ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+        : "";
+
+      return !stringValues.length ? filterQuery : filterQuery.concat(`&${pointer}=${stringValues}`);
     };
 
     if (sites) {
@@ -38,29 +44,31 @@ const useFilterQuery = (currentSiteID: number | null) => {
       filterQuery = currentQuery("order", order);
     }
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { sites, order } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
-    const filterValues = {
+    const filterValues: Record<string, IQueryValue[]> = {
       sites: pointer === "sites" ? filter : sites,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
     };
 
     setQuery(filterValues);
-
-    return filterValues;
+    setFilterQuery(filterValues);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };
 

package/src/modules/Redirects/index.tsx

@@ -1,10 +1,19 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IEmptyStateProps, INavItem, IRedirect, IRootState } from "@ax/types";
+import { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
-import { MainWrapper, ErrorToast, Nav, TableList, EmptyState, Toast } from "@ax/components";
+import {
+  MainWrapper,
+  ErrorToast,
+  Nav,
+  TableList,
+  EmptyState,
+  Toast,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 import { useBulkSelection, useModal, useToast } from "@ax/hooks";
 
 import BulkHeader from "./BulkHeader";
@@ -26,7 +35,7 @@ const Redirects = (props: IProps): JSX.Element => {
     totalItems,
     deleteRedirect,
     addRedirect,
-    currentSiteID,
+    currentSite,
     importRedirects,
     imports,
     totalImports,
@@ -35,7 +44,6 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const itemsPerPage = 50;
   const firstPage = 1;
-  const siteID = currentSiteID ? currentSiteID : "global";
   const [page, setPage] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const [isOpenedSecond, setIsOpenedSecond] = useState(false);
@@ -43,8 +51,7 @@ const Redirects = (props: IProps): JSX.Element => {
   const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
   const tableRef = useRef<HTMLDivElement>(null);
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery(currentSiteID);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${siteID}`);
+  const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery(currentSite);
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const { isVisible: isImportVisible, toggleToast: toggleImportToast, setIsVisible: setIsImportVisible } = useToast();
   const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
@@ -83,12 +90,12 @@ const Redirects = (props: IProps): JSX.Element => {
 
   useEffect(() => {
     const params = getParams();
-    getRedirects(params, currentFilterQuery);
+    getRedirects(params, filterQuery);
     if (tableRef.current) {
       tableRef.current.scrollTo(0, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, currentFilterQuery, searchQuery, searchFilter]);
+  }, [page, filterQuery, searchQuery, searchFilter]);
 
   useEffect(() => {
     if (!isLoading) {
@@ -133,21 +140,17 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const handleSelectAll = () => selectAllItems();
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+  const sortItems = async (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+  const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
     setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const TableHeader = (
@@ -161,7 +164,7 @@ const Redirects = (props: IProps): JSX.Element => {
       isScrolling={isScrolling}
       filterItems={filterItems}
       filterValues={filterValues}
-      isSiteItem={!!currentSiteID}
+      isSiteItem={!!currentSite}
       sortItems={sortItems}
       sortedListStatus={sortedListStatus}
     />
@@ -193,7 +196,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const handleAddRedirect = async (force?: boolean) => {
     const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-    await addRedirect({ from: formValues.from, to: toPage }, toggleOverwriteModal, force, currentFilterQuery);
+    await addRedirect({ from: formValues.from, to: toPage }, toggleOverwriteModal, force, filterQuery);
     isOpen && toggleModal();
   };
 
@@ -270,6 +273,7 @@ const Redirects = (props: IProps): JSX.Element => {
       searchAction={setSearchQuery}
       filterSearchAction={setSearchFilter}
       searchFilters={searchFilters}
+      searchValue={searchQuery}
     >
       <S.Wrapper>
         <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
@@ -289,29 +293,42 @@ const Redirects = (props: IProps): JSX.Element => {
               hasFixedHeader={true}
               tableRef={tableRef}
             >
-              {isEmpty ? (
-                <S.EmptyWrapper>
-                  <EmptyState {...emptyStateProps} />
-                </S.EmptyWrapper>
-              ) : (
-                redirects.map((redirect: any) => {
-                  const isItemSelected = isSelected(redirect.id);
-                  return (
-                    <RedirectItem
-                      key={redirect.id}
-                      redirect={redirect}
-                      isSelected={isItemSelected}
-                      onChange={addToBulkSelection}
-                      toggleToast={toggleToast}
-                      setFormValues={setFormValues}
-                      formValues={formValues}
-                      addRedirect={handleAddRedirect}
-                      currentFilter={currentFilterQuery}
-                      isSiteItem={!!currentSiteID}
+              <>
+                <S.SearchTags>
+                  <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+                  {!currentSite && (
+                    <FilterTagsBar
+                      filters={filterValues}
+                      setFilters={setFiltersSelection}
+                      resetFilters={resetFilterQuery}
+                      labels={{ sites: "Site" }}
                     />
-                  );
-                })
-              )}
+                  )}
+                </S.SearchTags>
+                {isEmpty ? (
+                  <S.EmptyWrapper>
+                    <EmptyState {...emptyStateProps} />
+                  </S.EmptyWrapper>
+                ) : (
+                  redirects.map((redirect: any) => {
+                    const isItemSelected = isSelected(redirect.id);
+                    return (
+                      <RedirectItem
+                        key={redirect.id}
+                        redirect={redirect}
+                        isSelected={isItemSelected}
+                        onChange={addToBulkSelection}
+                        toggleToast={toggleToast}
+                        setFormValues={setFormValues}
+                        formValues={formValues}
+                        addRedirect={handleAddRedirect}
+                        currentFilter={filterQuery}
+                        isSiteItem={!!currentSite}
+                      />
+                    );
+                  })
+                )}
+              </>
             </TableList>
           </S.TableWrapper>
           {isVisible && <Toast {...toastProps} />}
@@ -327,7 +344,7 @@ const Redirects = (props: IProps): JSX.Element => {
           formValues={formValues}
           setFormValues={setFormValues}
           addRedirect={handleAddRedirect}
-          currentFilter={currentFilterQuery}
+          currentFilter={filterQuery}
         />
       )}
       <DeleteModal
@@ -364,7 +381,7 @@ const Redirects = (props: IProps): JSX.Element => {
 const mapStateToProps = (state: IRootState) => ({
   redirects: state.redirects.redirects,
   totalItems: state.redirects.totalItems,
-  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  currentSite: state.sites.currentSiteInfo,
   totalImports: state.redirects.totalImports,
   imports: state.redirects.imports,
   isLoading: state.app.isLoading,
@@ -382,7 +399,7 @@ interface IRedirectsProps {
   currentNavItem: INavItem;
   redirects: IRedirect[];
   totalItems: number;
-  currentSiteID: number | null;
+  currentSite: ISite | null;
   totalImports: number;
   isLoading: boolean;
   imports: null | {

package/src/modules/Redirects/style.tsx

@@ -146,6 +146,15 @@ const ModalUrl = styled.div`
   width: 50%;
 `;
 
+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};
+  }
+`;
+
 export {
   Wrapper,
   ContentWrapper,
@@ -170,4 +179,5 @@ export {
   ModalUrl,
   ModalIconWrapper,
   ModalUploadingText,
+  SearchTags,
 };