@griddo/ax 12.10.5 → 12.11.1-rc.0

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

@@ -28,6 +28,7 @@ const RadioGroup = (props: IRadioGroupProps): JSX.Element => {
 							checked={checked}
 							value={item.value}
 							title={item.title}
+							description={item.description}
 							name={name}
 							error={item.error}
 							disabled={item.disabled || disabled}

package/src/containers/Redirects/actions.tsx

@@ -1,6 +1,8 @@
 import { redirects } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { handleRequest } from "@ax/helpers";
+import type { RedirectType } from "@ax/types";
+
 import {
 	DEFAULT_PARAMS,
 	ERROR_CODE,
@@ -11,8 +13,18 @@ import {
 } from "./constants";
 import type { ISetImports, ISetRedirects, ISetTotalImports, ISetTotalItems } from "./interfaces";
 
+// El contrato del tipo de redirección con la API no está cerrado (sc-62031) y
+// un código HTTP en BD es naturalmente un entero. `RadioGroup` compara con
+// `===`, así que un 301 numérico no casaría con la opción "301" y el panel se
+// abriría sin nada marcado. Se normaliza aquí, en la única puerta de entrada de
+// las redirecciones al store, para que listado y panel vean siempre lo mismo.
+const normalizeRedirectType = (redirect: any) =>
+	redirect?.type === null || redirect?.type === undefined || redirect?.type === ""
+		? redirect
+		: { ...redirect, type: String(redirect.type) };
+
 function setRedirects(redirects: any[]): ISetRedirects {
-	return { type: SET_REDIRECTS, payload: { redirects } };
+	return { type: SET_REDIRECTS, payload: { redirects: redirects.map(normalizeRedirectType) } };
 }
 
 function setTotalItems(totalItems: number): ISetTotalItems {
@@ -50,7 +62,7 @@ function getRedirects(params: any, filters?: string): (dispatch: any) => Promise
 }
 
 function addRedirect(
-	redirect: { from: string; to: string | number },
+	redirect: { from: string; to: string | number; type?: RedirectType },
 	errorAction: () => void,
 	force?: boolean,
 	filter?: string,
@@ -84,7 +96,7 @@ function addRedirect(
 }
 
 function updateRedirect(
-	redirect: { from: string; to: string | number },
+	redirect: { from: string; to: string | number; type?: RedirectType },
 	redirectID: number,
 	filter?: string,
 ): (dispatch: any, getState: any) => Promise<void> {

package/src/global.d.ts

@@ -3,7 +3,6 @@ declare module "components";
 declare module "froala-editor";
 declare module "react-froala-wysiwyg";
 declare module "lodash.isequal";
-declare module "is-wsl";
 declare module "react-draft-wysiwyg";
 declare module "history";
 declare module "draftjs-to-html";

package/src/modules/ActivityLog/DownloadModal/index.tsx

@@ -1,5 +1,6 @@
 import type React from "react";
 
+import type { ExportFormat } from "@griddo/api-types";
 import type { IModal } from "@ax/types";
 import { FieldsBehavior, Modal } from "@ax/components";
 import type { IDownloadFormState } from "..";
@@ -14,7 +15,7 @@ const DownloadModal = (props: IDownloadModalProps) => {
 	const setEndDate = (endDate: string) => setForm((state) => ({ ...state, endDate }));
 	const setStartTime = (startTime: string) => setForm((state) => ({ ...state, startTime }));
 	const setMaxEvents = (maxEvents: number) => setForm((state) => ({ ...state, maxEvents }));
-	const setFormat = (format: string) => setForm((state) => ({ ...state, format }));
+	const setFormat = (format: ExportFormat) => setForm((state) => ({ ...state, format }));
 
 	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 

package/src/modules/ActivityLog/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { format, subDays } from "date-fns";
 
-import type { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+import type { ExportFormat, LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
 import type { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState, IStructuredData } from "@ax/types";
 import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Select, TableList } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
@@ -290,7 +290,7 @@ export interface IDownloadFormState {
 	dateRange: string;
 	startTime: string | null;
 	maxEvents: number | null;
-	format: string;
+	format: ExportFormat;
 	startDate: string | null;
 	endDate: string | null;
 }

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

@@ -3,6 +3,8 @@ import React from "react";
 import { CheckField, SiteFilter, TableCounter, DateFilter, Tooltip } from "@ax/components";
 import type { IQueryValue } from "@ax/types";
 
+import TypeFilter from "../../TypeFilter";
+
 import * as S from "./style";
 
 const TableHeader = (props: IProps): JSX.Element => {
@@ -35,6 +37,9 @@ const TableHeader = (props: IProps): JSX.Element => {
 					/>
 				</Tooltip>
 			</S.CheckHeader>
+			<S.TypeHeader>
+				<TypeFilter filterItems={filterItems} value={filterValues.type} />
+			</S.TypeHeader>
 			{!isSiteItem && (
 				<S.SiteHeader>
 					<SiteFilter filterItems={filterItems} value={filterValues} pointer="sites" center={false} />

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

@@ -16,6 +16,10 @@ const CheckHeader = styled(Header)`
   width: 32px;
 `;
 
+const TypeHeader = styled(Header)`
+  width: 96px;
+`;
+
 const SiteHeader = styled(Header)`
   width: 200px;
 `;
@@ -30,4 +34,4 @@ const ActionsHeader = styled(Header)`
   justify-content: flex-end;
 `;
 
-export { TableHeader, CheckHeader, SiteHeader, UrlHeader, ActionsHeader };
+export { TableHeader, CheckHeader, TypeHeader, SiteHeader, UrlHeader, ActionsHeader };

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

@@ -10,6 +10,7 @@ import { format } from "date-fns";
 
 import { DeleteModal } from "../atoms";
 import RedirectPanel from "../RedirectPanel";
+import { DEFAULT_REDIRECT_TYPE, REDIRECT_TYPE_COLORS } from "../utils";
 
 import * as S from "./style";
 
@@ -36,7 +37,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 	const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
 
 	const handleClick = () => {
-		const mappedRedirect = { ...redirect, to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url } };
+		const mappedRedirect = {
+			...redirect,
+			type: redirect.type ?? DEFAULT_REDIRECT_TYPE,
+			to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url },
+		};
 		setFormValues(mappedRedirect);
 		setIsOpenedSecond(false);
 		toggleModal("edit");
@@ -94,6 +99,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 						onChange={handleOnChange}
 					/>
 				</S.CheckCell>
+				<S.TypeCell role="cell" onClick={handleClick} data-testid="redirect-type">
+					{redirect.type && (
+						<S.TypeTag type="square" text={redirect.type} color={REDIRECT_TYPE_COLORS[redirect.type]} />
+					)}
+				</S.TypeCell>
 				{!isSiteItem && (
 					<S.SiteCell role="cell" onClick={handleClick}>
 						{redirect.site?.siteName && <ElementsTooltip elements={[redirect.site.siteName]} maxChar={20} />}

package/src/modules/Redirects/RedirectItem/style.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
+import Tag from "@ax/components/Tag";
 import { ActionMenu } from "@ax/components";
 
 const CheckCell = styled(Cell)`
@@ -11,6 +12,22 @@ const CheckCell = styled(Cell)`
   }
 `;
 
+// `Cell` es `flex-flow: column wrap`, que por defecto estira al hijo al ancho
+// del content box; el chip debe ceñirse a su texto.
+const TypeCell = styled(Cell)`
+  width: 96px;
+  align-items: flex-start;
+`;
+
+// `Tag` pinta el texto casi blanco en cuanto recibe `color`, ilegible sobre
+// estos pasteles. El `&&` duplica la especificidad para ganarle a la regla de
+// TagSquare siempre, y no solo cuando el orden de inyección acompaña.
+const TypeTag = styled(Tag)`
+  && {
+    color: ${(p) => p.theme.color.textMediumEmphasis};
+  }
+`;
+
 const SiteCell = styled(Cell)`
   width: 200px;
 `;
@@ -54,4 +71,15 @@ const ModalContent = styled.div`
   }
 `;
 
-export { CheckCell, SiteCell, ActionsCell, UrlCell, StyledActionMenu, ItemRow, ModalContent, DateCell };
+export {
+	CheckCell,
+	TypeCell,
+	TypeTag,
+	SiteCell,
+	ActionsCell,
+	UrlCell,
+	StyledActionMenu,
+	ItemRow,
+	ModalContent,
+	DateCell,
+};

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

@@ -1,12 +1,27 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import type { IRedirect } from "@ax/types";
+import type { IRedirect, RedirectType } from "@ax/types";
 import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
 
 import * as S from "./style";
 
+const REDIRECTION_TYPE_OPTIONS = [
+	{
+		name: "permanent",
+		value: "301",
+		title: "301 - Permanent",
+		description: "Keeps SEO. Use for definitive redirects.",
+	},
+	{
+		name: "temporary",
+		value: "302",
+		title: "302 - Temporary",
+		description: "Doesn’t keep SEO. Use for short-lived changes.",
+	},
+];
+
 const RedirectPanel = (props: IProps): JSX.Element => {
 	const {
 		isOpen,
@@ -30,11 +45,18 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 		setFormValues({ ...formValues, to: toValue });
 	};
 
+	const handleType = (newValue: RedirectType) => setFormValues({ ...formValues, type: newValue });
+
 	const addItemAction = () => addRedirect();
 
 	const editItemAction = async () => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
+		formValues.id &&
+			(await updateRedirect(
+				{ from: formValues.from, to: toPage, type: formValues.type },
+				formValues.id,
+				currentFilter,
+			));
 		toggleModal();
 	};
 
@@ -81,6 +103,17 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 					autoComplete="redirect-new"
 					helptext="Select an internal page or paste an external url."
 				/>
+				{/* El panel de alta sigue montado mientras se edita una fila. Con el mismo
+				    `name` y sin <form>, el navegador trata los radios de los dos paneles
+				    como un solo grupo y el `checked` se lo queda el panel cerrado. */}
+				<FieldsBehavior
+					title="Redirection type"
+					name={redirect ? `redirectionType-${redirect.id}` : "redirectionType"}
+					fieldType="RadioGroup"
+					value={formValues.type}
+					options={REDIRECTION_TYPE_OPTIONS}
+					onChange={handleType}
+				/>
 				<S.Footer>
 					{redirect ? (
 						<Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
@@ -113,7 +146,11 @@ interface ICategoryPanelProps {
 
 interface IDispatchProps {
 	addRedirect(force?: boolean): void;
-	updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
+	updateRedirect(
+		redirect: { from: string; to: string | number; type?: RedirectType },
+		redirectID: number,
+		filter?: string,
+	): Promise<void>;
 }
 
 type IProps = ICategoryPanelProps & IDispatchProps;

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

@@ -0,0 +1,44 @@
+import { FloatingMenu, Icon, ListItem, ListTitle } from "@ax/components";
+import type { IQueryValue, RedirectType } from "@ax/types";
+
+import * as S from "./style";
+
+const REDIRECT_TYPES: RedirectType[] = ["301", "302"];
+
+const TypeFilter = (props: ITypeFilterProps): JSX.Element => {
+	const { filterItems, value } = props;
+
+	const selected = value?.length ? value[0].value : undefined;
+
+	// El menú no ofrece un "All": volver a marcar el tipo activo es lo que lo
+	// quita, y la barra de filtros seleccionados conserva su "Clear All".
+	const chooseType = (type: RedirectType) =>
+		filterItems("type", selected === type ? [] : [{ value: type, label: type }]);
+
+	const Header = () => (
+		<S.Type isActive={!!selected} data-testid="redirect-type-filter">
+			Type
+			<S.IconsWrapper>
+				{selected ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
+			</S.IconsWrapper>
+		</S.Type>
+	);
+
+	return (
+		<FloatingMenu Button={Header} position="left">
+			<ListTitle>Filter by type</ListTitle>
+			{REDIRECT_TYPES.map((type) => (
+				<ListItem key={type} isSelected={selected === type} onClick={() => chooseType(type)}>
+					{type}
+				</ListItem>
+			))}
+		</FloatingMenu>
+	);
+};
+
+export interface ITypeFilterProps {
+	filterItems(pointer: string, filter: IQueryValue[]): void;
+	value?: IQueryValue[];
+}
+
+export default TypeFilter;

package/src/modules/Redirects/TypeFilter/style.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+// Va dentro de la celda `TypeHeader`, que ya pone el ancho y el padding de la
+// columna: aquí solo el estado del filtro.
+const Type = styled.div<{ isActive: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+  color: ${(p) => (p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+export { Type, IconsWrapper };

package/src/modules/Redirects/hooks.tsx

@@ -18,14 +18,17 @@ const useSortedListStatus = () => {
 const useFilterQuery = (site: ISite | null) => {
 	const initialQueryValues: Record<string, IQueryValue[]> = {
 		sites: site ? [{ value: site.id, label: site.name }] : [{ value: "all", label: "All" }],
+		type: [],
 		order: [],
 	};
 
+	const initialFilterQuery = `&sites=${site?.id || "global"}`;
+
 	const [query, setQuery] = useState(initialQueryValues);
-	const [currentFilterQuery, setCurrentFilterQuery] = useState(`&sites=${site?.id || "global"}`);
+	const [currentFilterQuery, setCurrentFilterQuery] = useState(initialFilterQuery);
 
 	const setFilterQuery = (filterValues: any) => {
-		const { sites, order } = filterValues;
+		const { sites, type, order } = filterValues;
 		let filterQuery = "";
 
 		const currentQuery = (pointer: string, values: IQueryValue[]): string => {
@@ -40,6 +43,10 @@ const useFilterQuery = (site: ISite | null) => {
 			filterQuery = currentQuery("sites", sites);
 		}
 
+		if (type) {
+			filterQuery = currentQuery("type", type);
+		}
+
 		if (order) {
 			filterQuery = currentQuery("order", order);
 		}
@@ -48,10 +55,11 @@ const useFilterQuery = (site: ISite | null) => {
 	};
 
 	const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
-		const { sites, order } = query;
+		const { sites, type, order } = query;
 		const orderMethod = isAscendent ? "asc" : "desc";
 		const filterValues: Record<string, IQueryValue[]> = {
 			sites: pointer === "sites" ? filter : sites,
+			type: pointer === "type" ? filter : type,
 			order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
 		};
 
@@ -61,7 +69,7 @@ const useFilterQuery = (site: ISite | null) => {
 
 	const resetFilterQuery = () => {
 		setQuery(initialQueryValues);
-		setCurrentFilterQuery("");
+		setCurrentFilterQuery(initialFilterQuery);
 	};
 
 	return {

package/src/modules/Redirects/index.tsx

@@ -14,14 +14,14 @@ import {
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useBulkSelection, useModals, useToast } from "@ax/hooks";
-import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
+import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite, RedirectType } from "@ax/types";
 
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import RedirectItem from "./RedirectItem";
 import RedirectPanel from "./RedirectPanel";
-import { getSortedListStatus } from "./utils";
+import { DEFAULT_REDIRECT_TYPE, getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
@@ -61,12 +61,13 @@ const Redirects = (props: IProps): JSX.Element => {
 	const [isEmpty, setIsEmpty] = useState(false);
 	const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
 
-	const initState = {
+	const initState: IRedirect = {
 		from: "",
 		to: {
 			pageId: undefined,
 			url: "",
 		},
+		type: DEFAULT_REDIRECT_TYPE,
 	};
 
 	const [formValues, setFormValues] = useState<IRedirect>(initState);
@@ -202,7 +203,12 @@ 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 }, () => toggleModal("overwrite"), force, filterQuery);
+		await addRedirect(
+			{ from: formValues.from, to: toPage, type: formValues.type },
+			() => toggleModal("overwrite"),
+			force,
+			filterQuery,
+		);
 		isOpen("edit") && toggleModal("edit");
 	};
 
@@ -268,7 +274,8 @@ const Redirects = (props: IProps): JSX.Element => {
 					<S.TitleWrapper>
 						<S.Title>URL Redirects Manager</S.Title>
 						<S.Description>
-							You can create 301 redirects to direct users and search engines from an old URL to a new one.
+							You can create redirects to direct users and search engines from an old URL to a new one, and choose
+							whether each one is permanent (301) or temporary (302).
 						</S.Description>
 					</S.TitleWrapper>
 					<S.TableWrapper>
@@ -282,14 +289,15 @@ const Redirects = (props: IProps): JSX.Element => {
 							<>
 								<S.SearchTags>
 									<SearchTagsBar query={searchQuery} setQuery={handleSearch} />
-									{!currentSite && (
-										<FilterTagsBar
-											filters={filterValues}
-											setFilters={setFiltersSelection}
-											resetFilters={resetFilterQuery}
-											labels={{ sites: "Site" }}
-										/>
-									)}
+									{/* El filtro de tipo existe en los dos ámbitos, así que la barra ya no
+									    depende del ámbito. En el de sitio se etiqueta solo el tipo: el sitio
+									    lo fija la ruta y ofrecer su tag invitaría a quitar lo que no se puede. */}
+									<FilterTagsBar
+										filters={filterValues}
+										setFilters={setFiltersSelection}
+										resetFilters={resetFilterQuery}
+										labels={currentSite ? { type: "Type" } : { sites: "Site", type: "Type" }}
+									/>
 								</S.SearchTags>
 								{isEmpty ? (
 									<S.EmptyWrapper>
@@ -399,7 +407,7 @@ interface IDispatchProps {
 	getRedirects(params: any, filters: string): void;
 	deleteRedirect(redirectID: number[]): Promise<boolean>;
 	addRedirect(
-		redirect: { from: string; to: string | number },
+		redirect: { from: string; to: string | number; type?: RedirectType },
 		errorAction: () => void,
 		force?: boolean,
 		filter?: string,

package/src/modules/Redirects/utils.tsx

@@ -1,3 +1,5 @@
+import type { RedirectType } from "@ax/types";
+
 const getSortedListStatus = (
 	orderPointer: string,
 	isAscending: boolean,
@@ -10,4 +12,11 @@ const getSortedListStatus = (
 	return sortedListStatus;
 };
 
-export { getSortedListStatus };
+const DEFAULT_REDIRECT_TYPE: RedirectType = "301";
+
+const REDIRECT_TYPE_COLORS: Record<RedirectType, string> = {
+	"301": "#C9EFFF",
+	"302": "#DBB9FF",
+};
+
+export { getSortedListStatus, DEFAULT_REDIRECT_TYPE, REDIRECT_TYPE_COLORS };

package/src/types/index.tsx

@@ -914,10 +914,13 @@ export interface IDomainRobot {
 	computedContent: string;
 }
 
+export type RedirectType = "301" | "302";
+
 export interface IRedirect {
 	id?: number;
 	from: string;
 	to: { pageId?: number; url: string; linkTo?: number; href?: string };
+	type?: RedirectType;
 	site?: { siteId: number | null; siteName: string | null; siteUrl: string | null };
 	domain?: string;
 	date?: string;

package/tsconfig.json

@@ -15,15 +15,7 @@
 		"useUnknownInCatchVariables": false,
 		"noEmit": true,
 		"jsx": "react-jsx",
-		"types": [
-			"vitest/globals",
-			"react",
-			"reflect-metadata",
-			"node",
-			"webpack-env",
-			"react-dom",
-			"@testing-library/jest-dom"
-		]
+		"types": ["vitest/globals", "react", "node", "react-dom", "@testing-library/jest-dom"]
 	},
 	"include": ["src"],
 	"extends": "./tsconfig.paths.json"