Merge pull request #499 from shlinkio/develop

Release 3.3.1

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [3.3.1] - 2021-09-27
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#497](https://github.com/shlinkio/shlink-web-client/issues/497) Fixed crash in domains section when one of the domains have more than one dot.
+
+
 ## [3.3.0] - 2021-09-25
 ### Added
 * [#465](https://github.com/shlinkio/shlink-web-client/issues/465) Added new page to manage domains and their redirects, when consuming Shlink 2.8 or higher.

src/domains/DomainRow.tsx

@@ -33,7 +33,7 @@ const DefaultDomain: FC = () => (
 export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, defaultRedirects }) => {
   const [ isOpen, toggle ] = useToggle();
   const { domain: authority, isDefault, redirects } = domain;
-  const domainId = `domainEdit${authority.replace('.', '')}`;
+  const domainId = `domainEdit${authority.replace(/\./g, '')}`;
 
   return (
     <tr className="responsive-table__row">

test/domains/DomainRow.test.tsx

@@ -17,9 +17,15 @@ describe('<DomainRow />', () => {
   afterEach(() => wrapper?.unmount());
 
   it.each([
-    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: true }), 1 ],
+    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: true }), 1, 'domainEdit' ],
-    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), 0 ],
+    [ Mock.of<ShlinkDomain>({ domain: '', isDefault: false }), 0, '' ],
-  ])('shows proper components based on the fact that provided domain is default or not', (domain, expectedComps) => {
+    [ Mock.of<ShlinkDomain>({ domain: 'foo.com', isDefault: true }), 1, 'domainEditfoocom' ],
+    [ Mock.of<ShlinkDomain>({ domain: 'foo.bar.com', isDefault: true }), 1, 'domainEditfoobarcom' ],
+  ])('shows proper components based on the fact that provided domain is default or not', (
+    domain,
+    expectedComps,
+    expectedDomainId,
+  ) => {
     const wrapper = createWrapper(domain);
     const defaultDomainComp = wrapper.find('td').first().find('DefaultDomain');
     const tooltip = wrapper.find(UncontrolledTooltip);
@@ -27,9 +33,13 @@ describe('<DomainRow />', () => {
     const icon = wrapper.find(FontAwesomeIcon);
 
     expect(defaultDomainComp).toHaveLength(expectedComps);
-    expect(tooltip).toHaveLength(expectedComps);
     expect(button.prop('disabled')).toEqual(domain.isDefault);
     expect(icon.prop('icon')).toEqual(domain.isDefault ? forbiddenIcon : editIcon);
+    expect(tooltip).toHaveLength(expectedComps);
+
+    if (expectedComps > 0) {
+      expect(tooltip.prop('target')).toEqual(expectedDomainId);
+    }
   });
 
   it.each([