Merge pull request #716 from acelaya-forks/feature/api3-support

Feature/api3 support

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 ### Added
-* *Nothing*
+* [#708](https://github.com/shlinkio/shlink-web-client/issues/708) Added support for API v3.
 
 ### Changed
 * [#713](https://github.com/shlinkio/shlink-web-client/issues/713) Updated dependencies.

src/api/ShlinkApiError.tsx

@@ -1,5 +1,5 @@
-import { ProblemDetailsError } from './types';
 import { isInvalidArgumentError } from './utils';
+import { ProblemDetailsError } from './types/errors';
 
 export interface ShlinkApiErrorProps {
   errorData?: ProblemDetailsError;

src/api/services/ShlinkApiClient.ts

@@ -1,5 +1,5 @@
 import { isEmpty, isNil, reject } from 'ramda';
-import { AxiosInstance, AxiosResponse, Method } from 'axios';
+import { AxiosError, AxiosInstance, AxiosResponse, Method } from 'axios';
 import { ShortUrl, ShortUrlData } from '../../short-urls/data';
 import { OptionalString } from '../../utils/utils';
 import {
@@ -19,8 +19,10 @@ import {
   ShlinkShortUrlsListNormalizedParams,
 } from '../types';
 import { orderToString } from '../../utils/helpers/ordering';
+import { isRegularNotFound, parseApiError } from '../utils';
+import { ProblemDetailsError } from '../types/errors';
 
-const buildShlinkBaseUrl = (url: string) => (url ? `${url}/rest/v2` : '');
+const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
 const rejectNilProps = reject(isNil);
 const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShortUrlsListNormalizedParams => {
   const { orderBy = {}, ...rest } = params;
@@ -29,11 +31,14 @@ const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShor
 };
 
 export class ShlinkApiClient {
+  private apiVersion: 2 | 3;
+
   public constructor(
     private readonly axios: AxiosInstance,
     private readonly baseUrl: string,
     private readonly apiKey: string,
   ) {
+    this.apiVersion = 3;
   }
 
   public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
@@ -118,10 +123,19 @@ export class ShlinkApiClient {
   private readonly performRequest = async <T>(url: string, method: Method = 'GET', query = {}, body = {}): Promise<AxiosResponse<T>> =>
     this.axios({
       method,
-      url: `${buildShlinkBaseUrl(this.baseUrl)}${url}`,
+      url: `${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}`,
       headers: { 'X-Api-Key': this.apiKey },
       params: rejectNilProps(query),
       data: body,
       paramsSerializer: { indexes: false },
+    }).catch((e: AxiosError<ProblemDetailsError>) => {
+      if (!isRegularNotFound(parseApiError(e))) {
+        throw e;
+      }
+
+      // If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
+      // v2 and retry
+      this.apiVersion = 2;
+      return this.performRequest(url, method, query, body);
     });
 }

src/api/types/actions.ts

@@ -1,5 +1,5 @@
 import { Action } from 'redux';
-import { ProblemDetailsError } from './index';
+import { ProblemDetailsError } from './errors';
 
 export interface ApiErrorAction extends Action<string> {
   errorData?: ProblemDetailsError;

src/api/types/errors.ts

@@ -0,0 +1,54 @@
+export enum ErrorTypeV2 {
+  INVALID_ARGUMENT = 'INVALID_ARGUMENT',
+  INVALID_SHORT_URL_DELETION = 'INVALID_SHORT_URL_DELETION',
+  DOMAIN_NOT_FOUND = 'DOMAIN_NOT_FOUND',
+  FORBIDDEN_OPERATION = 'FORBIDDEN_OPERATION',
+  INVALID_URL = 'INVALID_URL',
+  INVALID_SLUG = 'INVALID_SLUG',
+  INVALID_SHORTCODE = 'INVALID_SHORTCODE',
+  TAG_CONFLICT = 'TAG_CONFLICT',
+  TAG_NOT_FOUND = 'TAG_NOT_FOUND',
+  MERCURE_NOT_CONFIGURED = 'MERCURE_NOT_CONFIGURED',
+  INVALID_AUTHORIZATION = 'INVALID_AUTHORIZATION',
+  INVALID_API_KEY = 'INVALID_API_KEY',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export enum ErrorTypeV3 {
+  INVALID_ARGUMENT = 'https://shlink.io/api/error/invalid-data',
+  INVALID_SHORT_URL_DELETION = 'https://shlink.io/api/error/invalid-short-url-deletion',
+  DOMAIN_NOT_FOUND = 'https://shlink.io/api/error/domain-not-found',
+  FORBIDDEN_OPERATION = 'https://shlink.io/api/error/forbidden-tag-operation',
+  INVALID_URL = 'https://shlink.io/api/error/invalid-url',
+  INVALID_SLUG = 'https://shlink.io/api/error/non-unique-slug',
+  INVALID_SHORTCODE = 'https://shlink.io/api/error/short-url-not-found',
+  TAG_CONFLICT = 'https://shlink.io/api/error/tag-conflict',
+  TAG_NOT_FOUND = 'https://shlink.io/api/error/tag-not-found',
+  MERCURE_NOT_CONFIGURED = 'https://shlink.io/api/error/mercure-not-configured',
+  INVALID_AUTHORIZATION = 'https://shlink.io/api/error/missing-authentication',
+  INVALID_API_KEY = 'https://shlink.io/api/error/invalid-api-key',
+  NOT_FOUND = 'https://shlink.io/api/error/not-found',
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: ErrorTypeV2.INVALID_ARGUMENT | ErrorTypeV3.INVALID_ARGUMENT;
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION' | ErrorTypeV2.INVALID_SHORT_URL_DELETION | ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  threshold: number;
+}
+
+export interface RegularNotFound extends ProblemDetailsError {
+  type: ErrorTypeV2.NOT_FOUND | ErrorTypeV3.NOT_FOUND;
+  status: 404;
+}

src/api/types/index.ts

@@ -102,21 +102,3 @@ export interface ShlinkShortUrlsListParams {
 export interface ShlinkShortUrlsListNormalizedParams extends Omit<ShlinkShortUrlsListParams, 'orderBy'> {
   orderBy?: string;
 }
-
-export interface ProblemDetailsError {
-  type: string;
-  detail: string;
-  title: string;
-  status: number;
-  [extraProps: string]: any;
-}
-
-export interface InvalidArgumentError extends ProblemDetailsError {
-  type: 'INVALID_ARGUMENT';
-  invalidElements: string[];
-}
-
-export interface InvalidShortUrlDeletion extends ProblemDetailsError {
-  type: 'INVALID_SHORTCODE_DELETION' | 'INVALID_SHORT_URL_DELETION';
-  threshold: number;
-}

src/api/utils/index.ts

@@ -1,10 +1,22 @@
 import { AxiosError } from 'axios';
-import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '../types';
+import {
+  ErrorTypeV2,
+  ErrorTypeV3,
+  InvalidArgumentError,
+  InvalidShortUrlDeletion,
+  ProblemDetailsError,
+  RegularNotFound,
+} from '../types/errors';
 
 export const parseApiError = (e: AxiosError<ProblemDetailsError>) => e.response?.data;
 
 export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
-  error?.type === 'INVALID_ARGUMENT';
+  error?.type === ErrorTypeV2.INVALID_ARGUMENT || error?.type === ErrorTypeV3.INVALID_ARGUMENT;
 
 export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
-  error?.type === 'INVALID_SHORTCODE_DELETION' || error?.type === 'INVALID_SHORT_URL_DELETION';
+  error?.type === 'INVALID_SHORTCODE_DELETION'
+  || error?.type === ErrorTypeV2.INVALID_SHORT_URL_DELETION
+  || error?.type === ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+
+export const isRegularNotFound = (error?: ProblemDetailsError): error is RegularNotFound =>
+  (error?.type === ErrorTypeV2.NOT_FOUND || error?.type === ErrorTypeV3.NOT_FOUND) && error?.status === 404;

src/domains/reducers/domainsList.ts

@@ -1,5 +1,5 @@
 import { Action, Dispatch } from 'redux';
-import { ProblemDetailsError, ShlinkDomainRedirects } from '../../api/types';
+import { ShlinkDomainRedirects } from '../../api/types';
 import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
@@ -9,6 +9,7 @@ import { Domain, DomainStatus } from '../data';
 import { hasServerData } from '../../servers/data';
 import { replaceAuthorityFromUri } from '../../utils/helpers/uri';
 import { EDIT_DOMAIN_REDIRECTS, EditDomainRedirectsAction } from './domainRedirects';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const LIST_DOMAINS_START = 'shlink/domainsList/LIST_DOMAINS_START';
 export const LIST_DOMAINS_ERROR = 'shlink/domainsList/LIST_DOMAINS_ERROR';

src/short-urls/reducers/shortUrlCreation.ts

@@ -3,9 +3,9 @@ import { GetState } from '../../container/types';
 import { ShortUrl, ShortUrlData } from '../data';
 import { buildReducer, buildActionCreator } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
 export const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';

src/short-urls/reducers/shortUrlDeletion.ts

@@ -1,10 +1,10 @@
 import { Action, Dispatch } from 'redux';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { ProblemDetailsError } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
 export const DELETE_SHORT_URL_ERROR = 'shlink/deleteShortUrl/DELETE_SHORT_URL_ERROR';

src/short-urls/reducers/shortUrlDetail.ts

@@ -5,9 +5,9 @@ import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilde
 import { OptionalString } from '../../utils/utils';
 import { GetState } from '../../container/types';
 import { shortUrlMatches } from '../helpers';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
 export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';

src/short-urls/reducers/shortUrlEdition.ts

@@ -4,9 +4,9 @@ import { GetState } from '../../container/types';
 import { OptionalString } from '../../utils/utils';
 import { EditShortUrlData, ShortUrl } from '../data';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
 export const EDIT_SHORT_URL_ERROR = 'shlink/shortUrlEdition/EDIT_SHORT_URL_ERROR';

src/tags/reducers/tagDelete.ts

@@ -2,9 +2,9 @@ import { Action, Dispatch } from 'redux';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
 export const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';

src/tags/reducers/tagEdit.ts

@@ -4,9 +4,9 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ColorGenerator } from '../../utils/services/ColorGenerator';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
 import { ApiErrorAction } from '../../api/types/actions';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 export const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';

src/tags/reducers/tagsList.ts

@@ -2,7 +2,7 @@ import { isEmpty, reject } from 'ramda';
 import { Action, Dispatch } from 'redux';
 import { CREATE_VISITS, CreateVisitsAction } from '../../visits/reducers/visitCreation';
 import { buildReducer } from '../../utils/helpers/redux';
-import { ProblemDetailsError, ShlinkTags } from '../../api/types';
+import { ShlinkTags } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { CreateVisit, Stats } from '../../visits/types';
@@ -12,6 +12,7 @@ import { ApiErrorAction } from '../../api/types/actions';
 import { CREATE_SHORT_URL, CreateShortUrlAction } from '../../short-urls/reducers/shortUrlCreation';
 import { DeleteTagAction, TAG_DELETED } from './tagDelete';
 import { EditTagAction, TAG_EDITED } from './tagEdit';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
 export const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';

src/visits/types/index.ts

@@ -1,7 +1,8 @@
 import { Action } from 'redux';
 import { ShortUrl } from '../../short-urls/data';
-import { ProblemDetailsError, ShlinkVisitsParams } from '../../api/types';
+import { ShlinkVisitsParams } from '../../api/types';
 import { DateInterval, DateRange } from '../../utils/dates/types';
+import { ProblemDetailsError } from '../../api/types/errors';
 
 export interface VisitsInfo {
   visits: Visit[];

test/api/ShlinkApiError.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ShlinkApiError, ShlinkApiErrorProps } from '../../src/api/ShlinkApiError';
-import { InvalidArgumentError, ProblemDetailsError } from '../../src/api/types';
+import { ErrorTypeV2, ErrorTypeV3, InvalidArgumentError, ProblemDetailsError } from '../../src/api/types/errors';
 
 describe('<ShlinkApiError />', () => {
   const setUp = (props: ShlinkApiErrorProps) => render(<ShlinkApiError {...props} />);
@@ -20,7 +20,8 @@ describe('<ShlinkApiError />', () => {
   it.each([
     [undefined, 0],
     [Mock.all<ProblemDetailsError>(), 0],
-    [Mock.of<InvalidArgumentError>({ type: 'INVALID_ARGUMENT', invalidElements: [] }), 1],
+    [Mock.of<InvalidArgumentError>({ type: ErrorTypeV2.INVALID_ARGUMENT, invalidElements: [] }), 1],
+    [Mock.of<InvalidArgumentError>({ type: ErrorTypeV3.INVALID_ARGUMENT, invalidElements: [] }), 1],
   ])('renders list of invalid elements when provided error is an InvalidError', (errorData, expectedElementsCount) => {
     setUp({ errorData });
     expect(screen.queryAllByText(/^Invalid elements/)).toHaveLength(expectedElementsCount);

test/api/services/ShlinkApiClient.test.ts

@@ -1,4 +1,4 @@
-import { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import { Mock } from 'ts-mockery';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 import { OptionalString } from '../../../src/utils/utils';
@@ -87,7 +87,7 @@ describe('ShlinkApiClient', () => {
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: '/short-urls/abc123/visits',
+        url: expect.stringContaining('/short-urls/abc123/visits'),
         method: 'GET',
       }));
     });
@@ -109,7 +109,7 @@ describe('ShlinkApiClient', () => {
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: '/tags/foo/visits',
+        url: expect.stringContaining('/tags/foo/visits'),
         method: 'GET',
       }));
     });
@@ -131,7 +131,7 @@ describe('ShlinkApiClient', () => {
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: '/domains/foo.com/visits',
+        url: expect.stringContaining('/domains/foo.com/visits'),
         method: 'GET',
       }));
     });
@@ -149,7 +149,7 @@ describe('ShlinkApiClient', () => {
 
       expect(expectedShortUrl).toEqual(result);
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: `/short-urls/${shortCode}`,
+        url: expect.stringContaining(`/short-urls/${shortCode}`),
         method: 'GET',
         params: domain ? { domain } : {},
       }));
@@ -170,7 +170,7 @@ describe('ShlinkApiClient', () => {
 
       expect(expectedResp).toEqual(result);
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: `/short-urls/${shortCode}`,
+        url: expect.stringContaining(`/short-urls/${shortCode}`),
         method: 'PATCH',
         params: domain ? { domain } : {},
       }));
@@ -190,7 +190,10 @@ describe('ShlinkApiClient', () => {
       const result = await listTags();
 
       expect({ tags: expectedTags }).toEqual(result);
-      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ url: '/tags', method: 'GET' }));
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: expect.stringContaining('/tags'),
+        method: 'GET',
+      }));
     });
   });
 
@@ -203,7 +206,7 @@ describe('ShlinkApiClient', () => {
       await deleteTags(tags);
 
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: '/tags',
+        url: expect.stringContaining('/tags'),
         method: 'DELETE',
         params: { tags },
       }));
@@ -220,7 +223,7 @@ describe('ShlinkApiClient', () => {
       await editTag(oldName, newName);
 
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: '/tags',
+        url: expect.stringContaining('/tags'),
         method: 'PUT',
         data: { oldName, newName },
       }));
@@ -235,7 +238,7 @@ describe('ShlinkApiClient', () => {
       await deleteShortUrl(shortCode, domain);
 
       expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
-        url: `/short-urls/${shortCode}`,
+        url: expect.stringContaining(`/short-urls/${shortCode}`),
         method: 'DELETE',
         params: domain ? { domain } : {},
       }));
@@ -341,5 +344,26 @@ describe('ShlinkApiClient', () => {
       expect(axiosSpy).toHaveBeenCalled();
       expect(result).toEqual(resp);
     });
+
+    it('retries request if API version is not supported', async () => {
+      const axiosSpy = jest.fn()
+        .mockImplementationOnce(() => Promise.reject(Mock.of<AxiosError>({
+          response: {
+            data: { type: 'NOT_FOUND', status: 404 },
+          },
+        })))
+        .mockImplementation(createAxios({})) as unknown as AxiosInstance;
+      const { editDomainRedirects } = new ShlinkApiClient(axiosSpy, '', '');
+
+      await editDomainRedirects({ domain: 'foo' });
+
+      expect(axiosSpy).toHaveBeenCalledTimes(2);
+      expect(axiosSpy).toHaveBeenNthCalledWith(1, expect.objectContaining({
+        url: expect.stringContaining('/v3/'),
+      }));
+      expect(axiosSpy).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        url: expect.stringContaining('/v2/'),
+      }));
+    });
   });
 });

test/domains/ManageDomains.test.tsx

@@ -2,9 +2,10 @@ import { screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { DomainsList } from '../../src/domains/reducers/domainsList';
 import { ManageDomains } from '../../src/domains/ManageDomains';
-import { ProblemDetailsError, ShlinkDomain } from '../../src/api/types';
+import { ShlinkDomain } from '../../src/api/types';
 import { SelectedServer } from '../../src/servers/data';
 import { renderWithEvents } from '../__helpers__/setUpTest';
+import { ProblemDetailsError } from '../../src/api/types/errors';
 
 describe('<ManageDomains />', () => {
   const listDomains = jest.fn();

test/short-urls/helpers/DeleteShortUrlModal.test.tsx

@@ -3,8 +3,8 @@ import { Mock } from 'ts-mockery';
 import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
 import { ShortUrl } from '../../../src/short-urls/data';
 import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { ErrorTypeV2, ErrorTypeV3, InvalidShortUrlDeletion, ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('<DeleteShortUrlModal />', () => {
   const shortUrl = Mock.of<ShortUrl>({
@@ -33,7 +33,17 @@ describe('<DeleteShortUrlModal />', () => {
       shortCode: 'abc123',
       errorData: Mock.of<ProblemDetailsError>({ type: 'OTHER_ERROR' }),
     });
-    expect(screen.getByText('Something went wrong while deleting the URL :(')).toBeInTheDocument();
+    expect(screen.getByText('Something went wrong while deleting the URL :(').parentElement).not.toHaveClass(
+      'bg-warning',
+    );
+  });
+
+  it.each([
+    [Mock.of<InvalidShortUrlDeletion>({ type: ErrorTypeV3.INVALID_SHORT_URL_DELETION })],
+    [Mock.of<InvalidShortUrlDeletion>({ type: ErrorTypeV2.INVALID_SHORT_URL_DELETION })],
+  ])('shows specific error when threshold error occurs', (errorData) => {
+    setUp({ loading: false, error: true, shortCode: 'abc123', errorData });
+    expect(screen.getByText('Something went wrong while deleting the URL :(').parentElement).toHaveClass('bg-warning');
   });
 
   it('disables submit button when loading', () => {

test/short-urls/reducers/shortUrlDeletion.test.ts

@@ -7,8 +7,8 @@ import reducer, {
   resetDeleteShortUrl,
   deleteShortUrl,
 } from '../../../src/short-urls/reducers/shortUrlDeletion';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
+import { ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('shortUrlDeletionReducer', () => {
   describe('reducer', () => {

test/tags/helpers/EditTagModal.test.tsx

@@ -3,8 +3,8 @@ import { Mock } from 'ts-mockery';
 import { TagEdition } from '../../../src/tags/reducers/tagEdit';
 import { EditTagModal as createEditTagModal } from '../../../src/tags/helpers/EditTagModal';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
-import { ProblemDetailsError } from '../../../src/api/types';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
+import { ProblemDetailsError } from '../../../src/api/types/errors';
 
 describe('<EditTagModal />', () => {
   const EditTagModal = createEditTagModal(Mock.of<ColorGenerator>({ getColorForKey: jest.fn(() => 'green') }));