Merge pull request #655 from shlinkio/develop

Release 3.7.1

.github/workflows/ci.yml

@@ -11,6 +11,6 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 16.13
+      node-version: 16.15
       with-mutation-tests: true
       publish-coverage: true

.github/workflows/deploy-preview.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Use node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.13
+          node-version: 16.15
       - name: Build
         run: |
           npm ci && \

.github/workflows/publish-release.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Use node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.13
+          node-version: 16.15
       - name: Generate release assets
         run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets

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.7.1] - 2022-05-25
+### Added
+* *Nothing*
+
+### Changed
+* [#648](https://github.com/shlinkio/shlink-web-client/pull/648) Migrated some scripts to ESM and updated to chalk 5.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#653](https://github.com/shlinkio/shlink-web-client/pull/653) Fixed rendering values greater than 1000 in charts, when the browser has certain locales configured.
+
+
 ## [3.7.0] - 2022-05-14
 ### Added
 * [#622](https://github.com/shlinkio/shlink-web-client/pull/622) Added support to load domain visits when consuming Shlink 3.1.0 or newer.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.13-alpine as node
+FROM node:16.15-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}

docker-compose.yml

@@ -3,7 +3,7 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:16.13-alpine
+    image: node:16.15-alpine
     command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www

package-lock.json

@@ -4436,22 +4436,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@stryker-mutator/core/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/@stryker-mutator/core/node_modules/cli-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -4616,6 +4600,22 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/@stryker-mutator/core/node_modules/inquirer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/@stryker-mutator/core/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -29962,16 +29962,6 @@
             "color-convert": "^2.0.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cli-cursor": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -30088,6 +30078,18 @@
             "string-width": "^4.1.0",
             "strip-ansi": "^6.0.0",
             "through": "^2.3.6"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+              "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            }
           }
         },
         "is-fullwidth-code-point": {

package.json

@@ -13,8 +13,8 @@
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js:fix": "npm run lint:js -- --fix",
     "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.js",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.mjs",
-    "build:dist": "npm run build && node scripts/create-dist-file.js",
+    "build:dist": "npm run build && node scripts/create-dist-file.mjs",
     "build:serve": "serve -p 5000 ./build",
     "test": "jest --env=jsdom --colors --verbose",
     "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",

scripts/create-dist-file.mjs

@@ -2,9 +2,9 @@
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
-const chalk = require('chalk');
+import chalk from 'chalk';
-const AdmZip = require('adm-zip');
+import AdmZip from 'adm-zip';
-const fs = require('fs');
+import fs from 'fs';
 
 function zipDist(version) {
   const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;

scripts/replace-version.mjs

@@ -1,4 +1,4 @@
-const fs = require('fs');
+import fs from 'fs';
 
 function replaceVersionPlaceholder(version) {
   const staticJsFilesPath = './build/static/js';

src/domains/helpers/EditDomainRedirectsModal.tsx

@@ -38,7 +38,7 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
 
   return (
     <Modal isOpen={isOpen} toggle={toggle} centered>
-      <form onSubmit={handleSubmit}>
+      <form name="domainRedirectsModal" onSubmit={handleSubmit}>
         <ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
         <ModalBody>
           <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>

src/servers/ServersDropdown.tsx

@@ -10,7 +10,7 @@ export interface ServersDropdownProps {
   selectedServer: SelectedServer;
 }
 
-const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
+export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
   const serversList = values(servers);
 
   const renderServers = () => {
@@ -46,5 +46,3 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
     </UncontrolledDropdown>
   );
 };
-
-export default ServersDropdown;

src/servers/services/provideServices.ts

@@ -1,6 +1,6 @@
 import Bottle from 'bottlejs';
 import CreateServer from '../CreateServer';
-import ServersDropdown from '../ServersDropdown';
+import { ServersDropdown } from '../ServersDropdown';
 import DeleteServerModal from '../DeleteServerModal';
 import DeleteServerButton from '../DeleteServerButton';
 import { EditServer } from '../EditServer';

src/utils/helpers/charts.ts

@@ -11,8 +11,6 @@ export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveEle
   canvas.style.cursor = firstElement ? 'pointer' : 'default';
 };
 
-export const renderChartLabel = ({ dataset, formattedValue }: TooltipItem<ChartType>) =>
+export const renderChartLabel = ({ dataset, raw }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(`${raw}`)}`;
-  `${dataset.label}: ${prettify(formattedValue)}`;
 
-export const renderPieChartLabel = ({ label, formattedValue }: TooltipItem<ChartType>) =>
+export const renderPieChartLabel = ({ label, raw }: TooltipItem<ChartType>) => `${label}: ${prettify(`${raw}`)}`;
-  `${label}: ${prettify(formattedValue)}`;

src/visits/VisitsStats.tsx

@@ -300,19 +300,19 @@ const VisitsStats: FC<VisitsStatsProps> = ({
           {visits.length > 0 && (
             <div className="col-lg-5 col-xl-6 mt-3 mt-lg-0">
               <div className="d-flex">
-                <Button
-                  outline
-                  disabled={highlightedVisits.length === 0}
-                  className="btn-md-block me-2"
-                  onClick={() => setSelectedVisits([])}
-                >
-                  Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
-                </Button>
                 <ExportBtn
                   className="btn-md-block"
                   amount={normalizedVisits.length}
                   onClick={() => exportCsv(normalizedVisits)}
                 />
+                <Button
+                  outline
+                  disabled={highlightedVisits.length === 0}
+                  className="btn-md-block ms-2"
+                  onClick={() => setSelectedVisits([])}
+                >
+                  Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
+                </Button>
               </div>
             </div>
           )}

test/domains/helpers/EditDomainRedirectsModal.test.tsx

@@ -1,12 +1,10 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Mock } from 'ts-mockery';
-import { Button, ModalHeader } from 'reactstrap';
 import { ShlinkDomain } from '../../../src/api/types';
 import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
-import { InfoTooltip } from '../../../src/utils/InfoTooltip';
 
 describe('<EditDomainRedirectsModal />', () => {
-  let wrapper: ShallowWrapper;
   const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
   const toggle = jest.fn();
   const domain = Mock.of<ShlinkDomain>({
@@ -15,81 +13,67 @@ describe('<EditDomainRedirectsModal />', () => {
       baseUrlRedirect: 'baz',
     },
   });
-
+  const setUp = () => ({
-  beforeEach(() => {
+    user: userEvent.setup(),
-    wrapper = shallow(
+    ...render(
       <EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
-    );
+    ),
   });
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
   it('renders domain in header', () => {
-    const header = wrapper.find(ModalHeader);
+    setUp();
-
+    expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');
-    expect(header.html()).toContain('foo.com');
   });
 
-  it('expected amount of form groups and tooltips', () => {
+  it('has different handlers to toggle the modal', async () => {
-    const formGroups = wrapper.find('FormGroup');
+    const { user } = setUp();
-    const tooltips = wrapper.find(InfoTooltip);
 
-    expect(formGroups).toHaveLength(3);
-    expect(tooltips).toHaveLength(3);
-  });
-
-  it('has different handlers to toggle the modal', () => {
     expect(toggle).not.toHaveBeenCalled();
-
+    await user.click(screen.getByLabelText('Close'));
-    (wrapper.prop('toggle') as Function)();
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
-    (wrapper.find(ModalHeader).prop('toggle') as Function)();
+    expect(toggle).toHaveBeenCalledTimes(2);
-    wrapper.find(Button).first().simulate('click');
-
-    expect(toggle).toHaveBeenCalledTimes(3);
   });
 
-  it('saves expected values when form is submitted', () => {
+  it('saves expected values when form is submitted', async () => {
-    const formGroups = wrapper.find('FormGroup');
+    const { user } = setUp();
+    // TODO Using fire event because userEvent.click on the Submit button does not submit the form
+    const submitForm = () => fireEvent.submit(screen.getByRole('form'));
 
     expect(editDomainRedirects).not.toHaveBeenCalled();
-
+    submitForm();
-    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
-    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
       baseUrlRedirect: 'baz',
       regular404Redirect: null,
       invalidShortUrlRedirect: null,
-    });
+    }));
 
-    formGroups.at(0).simulate('change', 'new_base_url');
+    await user.clear(screen.getByDisplayValue('baz'));
-    formGroups.at(2).simulate('change', 'new_invalid_short_url');
+    await user.type(screen.getAllByPlaceholderText('No redirect')[0], 'new_base_url');
-
+    await user.type(screen.getAllByPlaceholderText('No redirect')[2], 'new_invalid_short_url');
-    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    submitForm();
-    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
       baseUrlRedirect: 'new_base_url',
       regular404Redirect: null,
       invalidShortUrlRedirect: 'new_invalid_short_url',
-    });
+    }));
 
-    formGroups.at(1).simulate('change', 'new_regular_404');
+    await user.type(screen.getAllByPlaceholderText('No redirect')[1], 'new_regular_404');
-    formGroups.at(2).simulate('change', '');
+    await user.clear(screen.getByDisplayValue('new_invalid_short_url'));
-
+    submitForm();
-    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
-    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
       baseUrlRedirect: 'new_base_url',
       regular404Redirect: 'new_regular_404',
       invalidShortUrlRedirect: null,
-    });
+    }));
 
-    formGroups.at(0).simulate('change', '');
+    await Promise.all(screen.getAllByPlaceholderText('No redirect').map((element) => user.clear(element)));
-    formGroups.at(1).simulate('change', '');
+    submitForm();
-    formGroups.at(2).simulate('change', '');
+    await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
-
-    wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
-    expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
       baseUrlRedirect: null,
       regular404Redirect: null,
       invalidShortUrlRedirect: null,
-    });
+    }));
   });
 });

test/servers/DeleteServerButton.test.tsx

@@ -1,29 +1,39 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { ReactNode } from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
 import { ServerWithId } from '../../src/servers/data';
 
 describe('<DeleteServerButton />', () => {
-  let wrapper: ShallowWrapper;
+  const DeleteServerButton = deleteServerButtonConstruct(
-  const DeleteServerModal = () => null;
+    ({ isOpen }) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}</>,
-
+  );
-  beforeEach(() => {
+  const setUp = (children?: ReactNode) => ({
-    const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
+    user: userEvent.setup(),
-
+    ...render(
-    wrapper = shallow(<DeleteServerButton server={Mock.all<ServerWithId>()} className="button" />);
+      <DeleteServerButton server={Mock.all<ServerWithId>()} textClassName="button">{children}</DeleteServerButton>,
-  });
+    ),
-  afterEach(() => wrapper.unmount());
-
-  it('renders a button and a modal', () => {
-    expect(wrapper.find('.button')).toHaveLength(1);
-    expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
   });
 
-  it('displays modal when button is clicked', () => {
+  it.each([
-    const btn = wrapper.find('.button');
+    ['Foo bar'],
+    ['baz'],
+    ['something'],
+    [undefined],
+  ])('renders expected content', (children) => {
+    const { container } = setUp(children);
+    expect(container.firstChild).toBeTruthy();
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
+  it('displays modal when button is clicked', async () => {
-    btn.simulate('click');
+    const { user, container } = setUp();
-    expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(true);
+
+    expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
+    expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
+    container.firstElementChild && await user.click(container.firstElementChild);
+
+    await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
   });
 });

test/servers/ServersDropdown.test.tsx

@@ -1,44 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { values } from 'ramda';
 import { Mock } from 'ts-mockery';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { MemoryRouter } from 'react-router-dom';
-import { DropdownItem, DropdownToggle } from 'reactstrap';
+import { ServersDropdown } from '../../src/servers/ServersDropdown';
-import ServersDropdown from '../../src/servers/ServersDropdown';
+import { ServersMap, ServerWithId } from '../../src/servers/data';
-import { ServerWithId } from '../../src/servers/data';
 
 describe('<ServersDropdown />', () => {
-  let wrapped: ShallowWrapper;
+  const fallbackServers: ServersMap = {
-  const servers = {
     '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
     '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
     '3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
   };
-
+  const setUp = (servers: ServersMap = fallbackServers) => ({
-  beforeEach(() => {
+    user: userEvent.setup(),
-    wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
+    ...render(<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>),
-  });
-  afterEach(() => wrapped.unmount());
-
-  it('contains the list of servers, the divider, the create button and the export button', () =>
-    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
-
-  it('contains a toggle with proper title', () =>
-    expect(wrapped.find(DropdownToggle)).toHaveLength(1));
-
-  it('contains a button to export servers', () => {
-    const items = wrapped.find(DropdownItem);
-
-    expect(items.filter('[divider]')).toHaveLength(1);
-    expect(items.filterWhere((item) => item.prop('to') === '/manage-servers')).toHaveLength(1);
   });
 
-  it('shows only create link when no servers exist yet', () => {
+  it('contains the list of servers and the "mange servers" button', async () => {
-    wrapped = shallow(
+    const { user } = setUp();
-      <ServersDropdown servers={{}} selectedServer={null} />,
-    );
-    const item = wrapped.find(DropdownItem);
 
-    expect(item).toHaveLength(1);
+    await user.click(screen.getByText('Servers'));
-    expect(item.prop('to')).toEqual('/server/create');
+    const items = screen.getAllByRole('menuitem');
-    expect(item.find('span').text()).toContain('Add a server');
+    expect(items).toHaveLength(values(fallbackServers).length + 1);
+    expect(items[0]).toHaveTextContent('foo');
+    expect(items[1]).toHaveTextContent('bar');
+    expect(items[2]).toHaveTextContent('baz');
+    expect(items[3]).toHaveTextContent('Manage servers');
+  });
+
+  it('contains a toggle with proper text', () => {
+    setUp();
+    expect(screen.getByRole('link')).toHaveTextContent('Servers');
+  });
+
+  it('contains a button to manage servers', async () => {
+    const { user } = setUp();
+
+    await user.click(screen.getByText('Servers'));
+    expect(screen.getByRole('menuitem', { name: 'Manage servers' })).toHaveAttribute('href', '/manage-servers');
+  });
+
+  it('shows only create link when no servers exist yet', async () => {
+    const { user } = setUp({});
+
+    await user.click(screen.getByText('Servers'));
+    expect(screen.getByRole('menuitem')).toHaveTextContent('Add a server');
   });
 });

test/servers/__snapshots__/DeleteServerButton.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeleteServerButton /> renders expected content 1`] = `
+<span>
+  <span
+    class="button"
+  >
+    Foo bar
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 2`] = `
+<span>
+  <span
+    class="button"
+  >
+    baz
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 3`] = `
+<span>
+  <span
+    class="button"
+  >
+    something
+  </span>
+</span>
+`;
+
+exports[`<DeleteServerButton /> renders expected content 4`] = `
+<span>
+  <svg
+    aria-hidden="true"
+    class="svg-inline--fa fa-circle-minus fa-fw "
+    data-icon="circle-minus"
+    data-prefix="fas"
+    focusable="false"
+    role="img"
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM168 232C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H168z"
+      fill="currentColor"
+    />
+  </svg>
+  <span
+    class="button"
+  >
+    Remove this server
+  </span>
+</span>
+`;