Merge pull request #536 from acelaya-forks/feature/default-domain-edition

Feature/default domain edition

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 ### Added
-* *Nothing*
+* [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
 
 ### Changed
 * [#534](https://github.com/shlinkio/shlink-web-client/pull/534) Updated axios.

src/api/services/ShlinkApiClient.ts

@@ -11,7 +11,6 @@ import {
   ShlinkVisits,
   ShlinkVisitsParams,
   ShlinkShortUrlData,
-  ShlinkDomain,
   ShlinkDomainsResponse,
   ShlinkVisitsOverview,
   ShlinkEditDomainRedirects,
@@ -107,8 +106,8 @@ export default class ShlinkApiClient {
     this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET')
       .then((resp) => resp.data);
 
-  public readonly listDomains = async (): Promise<ShlinkDomain[]> =>
+  public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
-    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains.data);
+    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains);
 
   public readonly editDomainRedirects = async (
     domainRedirects: ShlinkEditDomainRedirects,

src/api/types/index.ts

@@ -84,6 +84,7 @@ export interface ShlinkDomain {
 
 export interface ShlinkDomainsResponse {
   data: ShlinkDomain[];
+  defaultRedirects?: ShlinkDomainRedirects; // Optional only for Shlink older than 2.10
 }
 
 export interface ShlinkShortUrlsListParams {

src/domains/DomainRow.tsx

@@ -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}>
+        <span id={!canEditDomain ? 'defaultDomainBtn' : undefined}>
-          <Button outline size="sm" disabled={isDefault} onClick={isDefault ? undefined : toggle}>
+          <Button outline size="sm" disabled={!canEditDomain} onClick={!canEditDomain ? undefined : toggle}>
-            <FontAwesomeIcon fixedWidth icon={isDefault ? forbiddenIcon : editIcon} />
+            <FontAwesomeIcon fixedWidth icon={!canEditDomain ? forbiddenIcon : editIcon} />
           </Button>
         </span>
-        {isDefault && (
+        {!canEditDomain && (
           <UncontrolledTooltip target="defaultDomainBtn" placement="left">
             Redirects for default domain cannot be edited here.
             <br />

src/domains/ManageDomains.tsx

@@ -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 { filteredDomains: domains, defaultRedirects, loading, error, errorData } = domainsList;
-  const defaultRedirects = domains.find(({ isDefault }) => isDefault)?.redirects;
+  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>

src/domains/reducers/domainsList.ts

@@ -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 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) });
   }

src/domains/services/provideServices.ts

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

src/utils/helpers/features.ts

@@ -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' });

test/api/services/ShlinkApiClient.test.ts

@@ -256,10 +256,8 @@ describe('ShlinkApiClient', () => {
 
   describe('listDomains', () => {
     it('returns domains', async () => {
-      const expectedData = [ Mock.all<ShlinkDomain>(), Mock.all<ShlinkDomain>() ];
+      const expectedData = { data: [ Mock.all<ShlinkDomain>(), Mock.all<ShlinkDomain>() ] };
-      const resp = {
+      const resp = { domains: expectedData };
-        domains: { data: expectedData },
-      };
       const axiosSpy = createAxiosMock({ data: resp });
       const { listDomains } = new ShlinkApiClient(axiosSpy, '', '');
 

test/domains/DomainRow.test.tsx

@@ -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) => {
+  const createWrapper = (domain: ShlinkDomain, selectedServer = Mock.all<SelectedServer>()) => {
-    wrapper = shallow(<DomainRow domain={domain} editDomainRedirects={jest.fn()} />);
+    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: true }), undefined, 1, 1, 'defaultDomainBtn' ],
-    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), 0, undefined ],
+    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), undefined, 0, 0, undefined ],
-    [ Mock.of<ShlinkDomain>({ domain: 'foo.com', isDefault: true }), 1, 'defaultDomainBtn' ],
+    [ Mock.of<ShlinkDomain>({ domain: 'foo.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn' ],
-    [ Mock.of<ShlinkDomain>({ domain: 'foo.bar.com', isDefault: true }), 1, 'defaultDomainBtn' ],
+    [ Mock.of<ShlinkDomain>({ domain: 'foo.bar.com', isDefault: true }), undefined, 1, 1, 'defaultDomainBtn' ],
-    [ Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }), 0, undefined ],
+    [ Mock.of<ShlinkDomain>({ domain: 'foo.baz', isDefault: false }), undefined, 0, 0, undefined ],
-  ])('shows proper components based on the fact that provided domain is default or not', (
+    [
+      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(defaultDomainComp).toHaveLength(expectedDefaultDomainIcons);
-    expect(button.prop('disabled')).toEqual(domain.isDefault);
+    expect(disabledBtn).toHaveLength(expectedDisabledComps);
-    expect(icon.prop('icon')).toEqual(domain.isDefault ? forbiddenIcon : editIcon);
+    expect(button.prop('disabled')).toEqual(expectedDisabledComps > 0);
-    expect(tooltip).toHaveLength(expectedComps);
+    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);
     }
   });

test/domains/ManageDomains.test.tsx

@@ -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>()}
       />,
     );
 

test/domains/reducers/domainsList.test.ts

@@ -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' }) ];
 
@@ -88,13 +88,13 @@ describe('domainsList', () => {
     });
 
     it('dispatches domains once loaded', async () => {
-      listDomains.mockResolvedValue(domains);
+      listDomains.mockResolvedValue({ data: domains });
 
       await listDomainsAction(buildShlinkApiClient)()(dispatch, getState);
 
       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);
     });
   });