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

Updated domain components to use defaultRedirects prop when present (Shlink 2.10 or newer)

Browse source
This commit is contained in:
Alejandro Celaya 2021-12-09 13:44:29 +01:00
parent 8d476e0729
commit c9d906316f
8 changed files with 77 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/domains/DomainRow.tsx
View file

@ -9,12 +9,15 @@ import {
import { ShlinkDomain, ShlinkDomainRedirects } from '../api/types';
import { useToggle } from '../utils/helpers/hooks';
import { OptionalString } from '../utils/utils';
import { SelectedServer } from '../servers/data';
import { supportsDefaultDomainRedirectsEdition } from '../utils/helpers/features';
import { EditDomainRedirectsModal } from './helpers/EditDomainRedirectsModal';
interface DomainRowProps {
domain: ShlinkDomain;
defaultRedirects?: ShlinkDomainRedirects;
editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
selectedServer: SelectedServer;
}
const Nr: FC<{ fallback: OptionalString }> = ({ fallback }) => (
@ -30,9 +33,10 @@ const DefaultDomain: FC = () => (
</>
);
export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, defaultRedirects }) => {
export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, defaultRedirects, selectedServer }) => {
const [ isOpen, toggle ] = useToggle();
const { domain: authority, isDefault, redirects } = domain;
const canEditDomain = !isDefault || supportsDefaultDomainRedirectsEdition(selectedServer);
return (
<tr className="responsive-table__row">
@ -48,12 +52,12 @@ export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, def
{redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
</td>
<td className="responsive-table__cell text-right">
<span id={isDefault ? 'defaultDomainBtn' : undefined}>
<Button outline size="sm" disabled={isDefault} onClick={isDefault ? undefined : toggle}>
<FontAwesomeIcon fixedWidth icon={isDefault ? forbiddenIcon : editIcon} />
<span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>
<Button outline size="sm" disabled={!canEditDomain} onClick={!canEditDomain ? undefined : toggle}>
<FontAwesomeIcon fixedWidth icon={!canEditDomain ? forbiddenIcon : editIcon} />
</Button>
</span>
{isDefault && (
{!canEditDomain && (
<UncontrolledTooltip target="defaultDomainBtn" placement="left">
Redirects for default domain cannot be edited here.
<br />

11
src/domains/ManageDomains.tsx
View file

@ -5,6 +5,7 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
import { SimpleCard } from '../utils/SimpleCard';
import SearchField from '../utils/SearchField';
import { ShlinkDomainRedirects } from '../api/types';
import { SelectedServer } from '../servers/data';
import { DomainsList } from './reducers/domainsList';
import { DomainRow } from './DomainRow';
@ -13,15 +14,16 @@ interface ManageDomainsProps {
filterDomains: (searchTerm: string) => void;
editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
domainsList: DomainsList;
selectedServer: SelectedServer;
}
const headers = [ '', 'Domain', 'Base path redirect', 'Regular 404 redirect', 'Invalid short URL redirect', '' ];
export const ManageDomains: FC<ManageDomainsProps> = (
{ listDomains, domainsList, filterDomains, editDomainRedirects },
{ listDomains, domainsList, filterDomains, editDomainRedirects, selectedServer },
) => {
const { filteredDomains: domains, loading, error, errorData } = domainsList;
const defaultRedirects = domains.find(({ isDefault }) => isDefault)?.redirects;
const { filteredDomains: domains, defaultRedirects, loading, error, errorData } = domainsList;
const resolvedDefaultRedirects = defaultRedirects ?? domains.find(({ isDefault }) => isDefault)?.redirects;
useEffect(() => {
listDomains();
@ -53,7 +55,8 @@ export const ManageDomains: FC<ManageDomainsProps> = (
key={domain.domain}
domain={domain}
editDomainRedirects={editDomainRedirects}
defaultRedirects={defaultRedirects}
defaultRedirects={resolvedDefaultRedirects}
selectedServer={selectedServer}
/>
))}
</tbody>

9
src/domains/reducers/domainsList.ts
View file

@ -17,6 +17,7 @@ export const FILTER_DOMAINS = 'shlink/domainsList/FILTER_DOMAINS';
export interface DomainsList {
domains: ShlinkDomain[];
filteredDomains: ShlinkDomain[];
defaultRedirects?: ShlinkDomainRedirects;
loading: boolean;
error: boolean;
errorData?: ProblemDetailsError;
@ -24,6 +25,7 @@ export interface DomainsList {
export interface ListDomainsAction extends Action<string> {
domains: ShlinkDomain[];
defaultRedirects?: ShlinkDomainRedirects;
}
interface FilterDomainsAction extends Action<string> {
@ -48,7 +50,8 @@ export const replaceRedirectsOnDomain = (domain: string, redirects: ShlinkDomain
export default buildReducer<DomainsList, DomainsCombinedAction>({
[LIST_DOMAINS_START]: () => ({ ...initialState, loading: true }),
[LIST_DOMAINS_ERROR]: ({ errorData }) => ({ ...initialState, error: true, errorData }),
[LIST_DOMAINS]: (_, { domains }) => ({ ...initialState, domains, filteredDomains: domains }),
[LIST_DOMAINS]: (_, { domains, defaultRedirects }) =>
({ ...initialState, domains, filteredDomains: domains, defaultRedirects }),
[FILTER_DOMAINS]: (state, { searchTerm }) => ({
...state,
filteredDomains: state.domains.filter(({ domain }) => domain.toLowerCase().match(searchTerm)),
@ -68,9 +71,9 @@ export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => ()
const { listDomains } = buildShlinkApiClient(getState);
try {
const { data: domains } = await listDomains();
const { data: domains, defaultRedirects } = await listDomains();
dispatch<ListDomainsAction>({ type: LIST_DOMAINS, domains });
dispatch<ListDomainsAction>({ type: LIST_DOMAINS, domains, defaultRedirects });
} catch (e: any) {
dispatch<ApiErrorAction>({ type: LIST_DOMAINS_ERROR, errorData: parseApiError(e) });
}

2
src/domains/services/provideServices.ts
View file

@ -12,7 +12,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('ManageDomains', () => ManageDomains);
bottle.decorator('ManageDomains', connect(
[ 'domainsList' ],
[ 'domainsList', 'selectedServer' ],
[ 'listDomains', 'filterDomains', 'editDomainRedirects' ],
));

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

@ -23,3 +23,5 @@ export const supportsQrErrorCorrection = serverMatchesVersions({ minVersion: '2.
export const supportsDomainRedirects = supportsQrErrorCorrection;
export const supportsForwardQuery = serverMatchesVersions({ minVersion: '2.9.0' });
export const supportsDefaultDomainRedirectsEdition = serverMatchesVersions({ minVersion: '2.10.0' });

63
test/domains/DomainRow.test.tsx
View file

@ -5,11 +5,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBan as forbiddenIcon, faEdit as editIcon } from '@fortawesome/free-solid-svg-icons';
import { ShlinkDomain, ShlinkDomainRedirects } from '../../src/api/types';
import { DomainRow } from '../../src/domains/DomainRow';
import { ReachableServer, SelectedServer } from '../../src/servers/data';
describe('<DomainRow />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (domain: ShlinkDomain) => {
wrapper = shallow(<DomainRow domain={domain} editDomainRedirects={jest.fn()} />);
const createWrapper = (domain: ShlinkDomain, selectedServer = Mock.all<SelectedServer>()) => {
wrapper = shallow(<DomainRow domain={domain} editDomainRedirects={jest.fn()} selectedServer={selectedServer} />);
return wrapper;
};
@ -17,28 +18,60 @@ describe('<DomainRow />', () => {
afterEach(() => wrapper?.unmount());
it.each([
[ Mock.of<ShlinkDomain>({ domain: '', isDefault: true }), 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), 0, undefined ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.com', isDefault: true }), 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.bar.com', isDefault: true }), 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }), 0, undefined ],
])('shows proper components based on the fact that provided domain is default or not', (
[ Mock.of<ShlinkDomain>({ domain: '', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), undefined, 0, 0, undefined ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.bar.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn' ],
[ Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }), undefined, 0, 0, undefined ],
[
Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: true }),
Mock.of<ReachableServer>({ version: '2.10.0' }),
1,
0,
undefined,
],
[
Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: true }),
Mock.of<ReachableServer>({ version: '2.9.0' }),
1,
1,
'defaultDomainBtn',
],
[
Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }),
Mock.of<ReachableServer>({ version: '2.9.0' }),
0,
0,
undefined,
],
[
Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }),
Mock.of<ReachableServer>({ version: '2.10.0' }),
0,
0,
undefined,
],
])('shows proper components based on provided domain and selectedServer', (
domain,
expectedComps,
selectedServer,
expectedDefaultDomainIcons,
expectedDisabledComps,
expectedDomainId,
) => {
const wrapper = createWrapper(domain);
const wrapper = createWrapper(domain, selectedServer);
const defaultDomainComp = wrapper.find('td').first().find('DefaultDomain');
const disabledBtn = wrapper.find(Button).findWhere((btn) => !!btn.prop('disabled'));
const tooltip = wrapper.find(UncontrolledTooltip);
const button = wrapper.find(Button);
const icon = wrapper.find(FontAwesomeIcon);
expect(defaultDomainComp).toHaveLength(expectedComps);
expect(button.prop('disabled')).toEqual(domain.isDefault);
expect(icon.prop('icon')).toEqual(domain.isDefault ? forbiddenIcon : editIcon);
expect(tooltip).toHaveLength(expectedComps);
expect(defaultDomainComp).toHaveLength(expectedDefaultDomainIcons);
expect(disabledBtn).toHaveLength(expectedDisabledComps);
expect(button.prop('disabled')).toEqual(expectedDisabledComps > 0);
expect(icon.prop('icon')).toEqual(expectedDisabledComps > 0 ? forbiddenIcon : editIcon);
expect(tooltip).toHaveLength(expectedDisabledComps);
if (expectedComps > 0) {
if (expectedDisabledComps > 0) {
expect(tooltip.prop('target')).toEqual(expectedDomainId);
}
});

2
test/domains/ManageDomains.test.tsx
View file

@ -8,6 +8,7 @@ import SearchField from '../../src/utils/SearchField';
import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types';
import { ShlinkApiError } from '../../src/api/ShlinkApiError';
import { DomainRow } from '../../src/domains/DomainRow';
import { SelectedServer } from '../../src/servers/data';
describe('<ManageDomains />', () => {
const listDomains = jest.fn();
@ -21,6 +22,7 @@ describe('<ManageDomains />', () => {
filterDomains={filterDomains}
editDomainRedirects={editDomainRedirects}
domainsList={domainsList}
selectedServer={Mock.all<SelectedServer>()}
/>,
);

4
test/domains/reducers/domainsList.test.ts
View file

@ -14,7 +14,7 @@ import { EDIT_DOMAIN_REDIRECTS } from '../../../src/domains/reducers/domainRedir
import { ShlinkDomain, ShlinkDomainRedirects } from '../../../src/api/types';
import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
describe('domainsList', () => {
describe('domainsListReducer', () => {
const filteredDomains = [ Mock.of<ShlinkDomain>({ domain: 'foo' }), Mock.of<ShlinkDomain>({ domain: 'boo' }) ];
const domains = [ ...filteredDomains, Mock.of<ShlinkDomain>({ domain: 'bar' }) ];
@ -94,7 +94,7 @@ describe('domainsList', () => {
expect(dispatch).toHaveBeenCalledTimes(2);
expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_DOMAINS_START });
expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_DOMAINS, domains });
expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_DOMAINS, domains, defaultRedirects: undefined });
expect(listDomains).toHaveBeenCalledTimes(1);
});
});