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

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}>
-          <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 />

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 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>

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

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