mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-10-23 13:06:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added forward query component to short URL form

Browse source
This commit is contained in:
Alejandro Celaya 2021-10-13 22:50:48 +02:00
parent eaa6efe803
commit 9e6907deb4
5 changed files with 60 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/short-urls/CreateShortUrl.tsx
View file

@ -30,6 +30,7 @@ const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => (
maxVisits: undefined,
findIfExists: false,
validateUrl: settings?.validateUrls ?? false,
forwardQuery: true,
});
const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResult: FC<CreateShortUrlResultProps>) => ({

1
src/short-urls/EditShortUrl.tsx
View file

@ -42,6 +42,7 @@ const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSetting
validUntil: shortUrl.meta.validUntil ?? undefined,
maxVisits: shortUrl.meta.maxVisits ?? undefined,
crawlable: shortUrl.crawlable,
forwardQuery: shortUrl.forwardQuery,
validateUrl,
};
};

50
src/short-urls/ShortUrlForm.tsx
View file

@ -5,7 +5,7 @@ import { isEmpty, pipe, replace, trim } from 'ramda';
import classNames from 'classnames';
import { parseISO } from 'date-fns';
import DateInput, { DateInputProps } from '../utils/DateInput';
import { supportsCrawlableVisits, supportsShortUrlTitle } from '../utils/helpers/features';
import { supportsCrawlableVisits, supportsForwardQuery, supportsShortUrlTitle } from '../utils/helpers/features';
import { SimpleCard } from '../utils/SimpleCard';
import { handleEventPreventingDefault, hasValue } from '../utils/utils';
import Checkbox from '../utils/Checkbox';
@ -33,6 +33,7 @@ export interface ShortUrlFormProps {
const normalizeTag = pipe(trim, replace(/ /g, '-'));
const toDate = (date?: string | Date): Date | undefined => typeof date === 'string' ? parseISO(date) : date;
const dynamicColClasses = (flag: boolean) => ({ 'col-sm-6': flag, 'col-sm-12': !flag });
export const ShortUrlForm = (
TagsSelector: FC<TagsSelectorProps>,
@ -98,11 +99,11 @@ export const ShortUrlForm = (
const supportsTitle = supportsShortUrlTitle(selectedServer);
const showCustomizeCard = supportsTitle || !isEdit;
const limitAccessCardClasses = classNames('mb-3', {
'col-sm-6': showCustomizeCard,
'col-sm-12': !showCustomizeCard,
});
const limitAccessCardClasses = classNames('mb-3', dynamicColClasses(showCustomizeCard));
const showCrawlableControl = supportsCrawlableVisits(selectedServer);
const showForwardQueryControl = supportsForwardQuery(selectedServer);
const showBehaviorCard = showCrawlableControl || showForwardQueryControl;
const extraChecksCardClasses = classNames('mb-3', dynamicColClasses(showBehaviorCard));
return (
<form className="short-url-form" onSubmit={submit}>
@ -154,7 +155,9 @@ export const ShortUrlForm = (
</div>
</Row>
<SimpleCard title="Extra checks" className="mb-3">
<Row>
<div className={extraChecksCardClasses}>
<SimpleCard title="Extra checks">
<ShortUrlFormCheckboxGroup
infoTooltip="If checked, Shlink will try to reach the long URL, failing in case it's not publicly accessible."
checked={shortUrlData.validateUrl}
@ -162,15 +165,6 @@ export const ShortUrlForm = (
>
Validate URL
</ShortUrlFormCheckboxGroup>
{showCrawlableControl && (
<ShortUrlFormCheckboxGroup
infoTooltip="This short URL will be included in the robots.txt for your Shlink instance, allowing web crawlers (like Google) to index it."
checked={shortUrlData.crawlable}
onChange={(crawlable) => setShortUrlData({ ...shortUrlData, crawlable })}
>
Make it crawlable
</ShortUrlFormCheckboxGroup>
)}
{!isEdit && (
<p>
<Checkbox
@ -185,6 +179,32 @@ export const ShortUrlForm = (
</p>
)}
</SimpleCard>
</div>
{showBehaviorCard && (
<div className="col-sm-6 mb-3">
<SimpleCard title="Configure behavior">
{showCrawlableControl && (
<ShortUrlFormCheckboxGroup
infoTooltip="This short URL will be included in the robots.txt for your Shlink instance, allowing web crawlers (like Google) to index it."
checked={shortUrlData.crawlable}
onChange={(crawlable) => setShortUrlData({ ...shortUrlData, crawlable })}
>
Make it crawlable
</ShortUrlFormCheckboxGroup>
)}
{showForwardQueryControl && (
<ShortUrlFormCheckboxGroup
infoTooltip="When this short URL is visited, any query params appended to it will be forwarded to the long URL."
checked={shortUrlData.forwardQuery}
onChange={(forwardQuery) => setShortUrlData({ ...shortUrlData, forwardQuery })}
>
Forward query params on redirect
</ShortUrlFormCheckboxGroup>
)}
</SimpleCard>
</div>
)}
</Row>
</>
)}

2
src/short-urls/data/index.ts
View file

@ -9,6 +9,7 @@ export interface EditShortUrlData {
maxVisits?: number | null;
validateUrl?: boolean;
crawlable?: boolean;
forwardQuery?: boolean;
}
export interface ShortUrlData extends EditShortUrlData {
@ -30,6 +31,7 @@ export interface ShortUrl {
domain: string | null;
title?: string | null;
crawlable?: boolean;
forwardQuery?: boolean;
}
export interface ShortUrlMeta {

2
src/utils/helpers/features.ts
View file

@ -21,3 +21,5 @@ export const supportsCrawlableVisits = supportsBotVisits;
export const supportsQrErrorCorrection = serverMatchesVersions({ minVersion: '2.8.0' });
export const supportsDomainRedirects = supportsQrErrorCorrection;
export const supportsForwardQuery = serverMatchesVersions({ minVersion: '2.9.0' });