Merge pull request #1147 from shlinkio/develop

Release 4.1.2

.github/ISSUE_TEMPLATE/Bug.yml

@@ -34,5 +34,10 @@ body:
     validations:
       required: true
     attributes:
-      label: How to reproduce
-      value: '<!-- Provide steps to reproduce the bug. -->'
+      label: Minimum steps to reproduce
+      value: |
+        <!--
+        Emphasis in MINIMUM: What is the simplest way to reproduce the bug?
+        Avoid things like "Create a kubernetes cluster", or anything related with cloud providers, as that is rarely the root cause and the bug may be closed as "not reproducible".
+        If you can provide a simple docker compose config, that's even better.
+        -->

.github/dependabot.yml

@@ -12,6 +12,11 @@ updates:
       fontawesome:
         patterns:
           - '@fortawesome/*'
+      eslint:
+        patterns:
+          - '@shlinkio/eslint-config-js-coding-standard'
+          - '@typescript-eslint/*'
+          - 'eslint'
       shlink:
         patterns:
           - '@shlinkio/*'

CHANGELOG.md

@@ -4,6 +4,82 @@ 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).
 
+## [4.1.2] - 2024-04-17
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [shlink-web-component#244](https://github.com/shlinkio/shlink-web-component/issues/244) Display `visitedUrl` in visits table if the visit object has it, regardless of it being an orphan visit or not.
+* [shlink-web-component#327](https://github.com/shlinkio/shlink-web-component/issues/327) Ensure orphan visits type is sent to the server, to enable server-side filtering when consumed Shlink supports it.
+
+
+## [4.1.1] - 2024-04-11
+### Added
+* [shlink-web-component#293](https://github.com/shlinkio/shlink-web-component/issues/293) Allow ordering redirect rules via drag'n'drop.
+
+### Changed
+* Update JS coding standard
+* [#1132](https://github.com/shlinkio/shlink-web-client/issues/1132) Add warning message in "validate URLs" setting, indicating it is ignored when consuming Shlink >=4.0.0.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [shlink-web-component#294](https://github.com/shlinkio/shlink-web-component/issues/294) Make sure "validate URL" control is not displayed in short URL creation/edition, when consuming Shlink >=4.0.0.
+* [#1130](https://github.com/shlinkio/shlink-web-client/issues/1130) Fix importing servers in Firefox for Android when the CSV file contains spaces.
+* [#1133](https://github.com/shlinkio/shlink-web-client/issues/1133) Fix Shlink versions alignment in server error pages.
+
+
+## [4.1.0] - 2024-03-17
+### Added
+* [#1079](https://github.com/shlinkio/shlink-web-client/issues/1079) Add support Shlink 4.0.0.
+* [shlink-web-component#271](https://github.com/shlinkio/shlink-web-component/issues/271) Add support for redirect rules when consuming Shlink 4.0.0.
+
+  Now, if the server supports it, there will be a new item for every short URL dropdown, which will take you to a page where it will be possible to edit that short URL's redirect rules.
+
+### Changed
+* [shlink-web-component#249](https://github.com/shlinkio/shlink-web-component/issues/249) Replace `react-datepicker` with native `input[type="date"]` and `input[type="datetime-local"]` elements.
+* Update dependencies.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [shlink-web-component#276](https://github.com/shlinkio/shlink-web-component/issues/276) Drop support for Shlink older than 3.3.0
+
+### Fixed
+* [#1084](https://github.com/shlinkio/shlink-web-client/issues/1084) Fix broken server dropdown menu when auto-connect is enabled.
+
+
+## [4.0.1] - 2024-02-01
+### Added
+* *Nothing*
+
+### Changed
+* [#821](https://github.com/shlinkio/shlink-web-client/issues/821) Update app gif from README.md
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#1046](https://github.com/shlinkio/shlink-web-client/issues/1046) Fix running docker image when server env vars are provided.
+
+
 ## [4.0.0] - 2024-01-29
 ### Added
 * [shlink-web-component #7](https://github.com/shlinkio/shlink-web-component/issues/7) Allow comparing visits for multiple short URLs, tags or domains.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:21.6-alpine as node
+FROM node:21.7-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
@@ -7,9 +7,16 @@ RUN cd /shlink-web-client && npm ci && npm run build
 FROM nginxinc/nginx-unprivileged:1.25-alpine
 ARG UID=101
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
+
 USER root
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
-USER $UID
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html
+
+# This is required by 30-shlink-servers-json.sh to be writable for UID
+RUN echo '[]' > /usr/share/nginx/html/servers.json \
+    && chown $UID:0 /usr/share/nginx/html/servers.json
+
+# Switch to non-privileged UID as the last step
+USER $UID

README.md

@@ -5,8 +5,10 @@
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
 [![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?logo=docker&style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 [![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
-[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=x&color=black)](https://twitter.com/shlinkio)
+
 [![Mastodon](https://img.shields.io/mastodon/follow/109329425426175098?color=%236364ff&domain=https%3A%2F%2Ffosstodon.org&label=follow&logo=mastodon&logoColor=white&style=flat-square)](https://fosstodon.org/@shlinkio)
+[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=x&color=black)](https://twitter.com/shlinkio)
+[![Bluesky](https://img.shields.io/badge/follow-shlinkio-0285FF.svg?style=flat-square&logo=bluesky&logoColor=white)](https://bsky.app/profile/shlinkio.bsky.social)
 [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)
 
 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
@@ -73,7 +75,7 @@ If you are using the shlink-web-client docker image, you can mount the `servers.
     
 Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
 
-    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
     
 If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.
 
@@ -84,7 +86,7 @@ If you want to pre-configure a single server, you can provide its config via env
     ```shell
     docker run \
         --name shlink-web-client \
-        -p 8000:80 \
+        -p 8000:8080 \
         -e SHLINK_SERVER_URL=https://s.test \
         -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
         shlinkio/shlink-web-client

package.json

@@ -24,29 +24,29 @@
     "test:verbose": "npm run test -- --verbose"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@json2csv/plainjs": "^7.0.5",
-    "@reduxjs/toolkit": "^2.1.0",
+    "@json2csv/plainjs": "^7.0.6",
+    "@reduxjs/toolkit": "^2.2.3",
     "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.4.2",
-    "@shlinkio/shlink-js-sdk": "^0.2.2",
-    "@shlinkio/shlink-web-component": "^0.5.0",
+    "@shlinkio/shlink-frontend-kit": "^0.5.1",
+    "@shlinkio/shlink-js-sdk": "^1.1.0",
+    "@shlinkio/shlink-web-component": "^0.6.2",
     "bootstrap": "5.2.3",
     "bottlejs": "^2.0.1",
     "clsx": "^2.1.0",
     "compare-versions": "^6.1.0",
     "csvtojson": "^2.0.10",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-external-link": "^2.2.0",
+    "react-external-link": "^2.3.1",
     "react-redux": "^9.1.0",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^6.22.3",
     "reactstrap": "^9.2.2",
     "redux-localstorage-simple": "^2.5.1",
     "uuid": "^9.0.1",
@@ -57,28 +57,30 @@
     "workbox-strategies": "^7.0.0"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~2.3.0",
+    "@shlinkio/eslint-config-js-coding-standard": "~2.4.1",
     "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@total-typescript/shoehorn": "^0.1.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@total-typescript/shoehorn": "^0.1.2",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.2.2",
-    "adm-zip": "^0.5.10",
-    "axe-core": "^4.8.3",
+    "@vitest/coverage-v8": "^1.5.0",
+    "adm-zip": "^0.5.12",
+    "axe-core": "^4.9.0",
     "chalk": "^5.3.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "history": "^5.3.0",
     "jsdom": "^24.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.75.0",
     "stylelint": "^15.11.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-pwa": "^0.17.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-pwa": "^0.19.8",
     "vitest": "^1.2.2"
   },
   "browserslist": [

src/common/ShlinkVersionsContainer.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
-import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
 import type { SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
 import { ShlinkVersions } from './ShlinkVersions';
 import './ShlinkVersionsContainer.scss';
 
@@ -9,19 +8,12 @@ export type ShlinkVersionsContainerProps = {
   selectedServer: SelectedServer;
 };
 
-const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/;
-
-export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
-  const { pathname } = useLocation();
-  const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
-
-  const classes = clsx('text-center', {
-    'shlink-versions-container--with-sidebar': withPadding,
-  });
-
-  return (
-    <div className={classes}>
-      <ShlinkVersions selectedServer={selectedServer} />
-    </div>
-  );
-};
+export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
+  <div
+    className={clsx('text-center', {
+      'shlink-versions-container--with-sidebar': isReachableServer(selectedServer),
+    })}
+  >
+    <ShlinkVersions selectedServer={selectedServer} />
+  </div>
+);

src/servers/ManageServersRowDropdown.tsx

@@ -37,7 +37,7 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
   const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;
 
   return (
-    <RowDropdownBtn minWidth={170}>
+    <RowDropdownBtn minWidth={isAutoConnect ? 210 : 170}>
       <DropdownItem tag={Link} to={serverUrl}>
         <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
       </DropdownItem>

src/servers/helpers/ImportServersBtn.tsx

@@ -87,7 +87,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
         You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
       </UncontrolledTooltip>
 
-      <input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />
+      <input type="file" accept=".csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />
 
       <DuplicatedServersModal
         isOpen={isModalOpen}

src/settings/ShortUrlCreationSettings.tsx

@@ -33,7 +33,8 @@ export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings,
           checked={shortUrlCreation.validateUrls ?? false}
           onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
         >
-          Request validation on long URLs when creating new short URLs.
+          Request validation on long URLs when creating new short URLs.{' '}
+          <b>This option is ignored by Shlink {'>='}4.0.0</b>
           <FormText>
             The initial state of the <b>Validate URL</b> checkbox will
             be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.

test/common/ShlinkVersionsContainer.test.tsx

@@ -1,30 +1,26 @@
 import { render } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
+import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 
 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (activeRoute: string = '') => {
-    const history = createMemoryHistory();
-    history.push(activeRoute);
-
-    return render(
-      <Router location={history.location} navigator={history}>
-        <ShlinkVersionsContainer selectedServer={fromPartial({})} />
-      </Router>,
-    );
-  };
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
+  const setUp = (selectedServer: SelectedServer = null) => render(
+    <ShlinkVersionsContainer selectedServer={selectedServer} />,
+  );
 
   it.each([
-    ['/something', 'text-center'],
-    ['/server/foo/edit', 'text-center'],
-    ['/server/foo/bar', 'text-center shlink-versions-container--with-sidebar'],
-  ])('renders proper col classes based on sidebar status', (sidebar, expectedClasses) => {
-    const { container } = setUp(sidebar);
+    [null],
+    [fromPartial<SelectedServer>({})],
+    [fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'v1.0.0' })],
+  ])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer)));
+
+  it.each([
+    [null, 'text-center'],
+    [fromPartial<SelectedServer>({}), 'text-center'],
+    [fromPartial<ReachableServer>({ version: '1.0.0' }), 'text-center shlink-versions-container--with-sidebar'],
+  ])('renders proper col classes based on sidebar status', (selectedServer, expectedClasses) => {
+    const { container } = setUp(selectedServer);
     expect(container.firstChild).toHaveAttribute('class', `${expectedClasses}`);
   });
 });

test/servers/ManageServersRowDropdown.test.tsx

@@ -67,4 +67,9 @@ describe('<ManageServersRowDropdown />', () => {
     expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
     expect(screen.queryByText('DeleteServerModal [CLOSED]')).not.toBeInTheDocument();
   });
+
+  it.each([[true], [false]])('renders expected size and icon', (autoConnect) => {
+    const { container } = setUp(autoConnect);
+    expect(container).toMatchSnapshot();
+  });
 });

test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

@@ -0,0 +1,287 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
+<div>
+  <div
+    class="dropdown"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Options"
+      class="dropdown-btn__toggle btn btn-primary btn-sm"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-ellipsis-vertical px-1"
+        data-icon="ellipsis-vertical"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 128 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <div
+      aria-hidden="true"
+      class="w-100 dropdown-menu dropdown-menu-end"
+      data-bs-popper="static"
+      role="menu"
+      style="min-width: 210px;"
+      tabindex="-1"
+    >
+      <a
+        class="dropdown-item"
+        href="/server/abc123"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-plug fa-fw "
+          data-icon="plug"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M96 0C78.3 0 64 14.3 64 32v96h64V32c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32v96h64V32c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32v32c0 77.4 55 142 128 156.8V480c0 17.7 14.3 32 32 32s32-14.3 32-32V412.8C297 398 352 333.4 352 256V224c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+            fill="currentColor"
+          />
+        </svg>
+         Connect
+      </a>
+      <a
+        class="dropdown-item"
+        href="/server/abc123/edit"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-pen-to-square fa-fw "
+          data-icon="pen-to-square"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"
+            fill="currentColor"
+          />
+        </svg>
+         Edit server
+      </a>
+      <button
+        class="dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-ban fa-fw "
+          data-icon="ban"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+            fill="currentColor"
+          />
+        </svg>
+         
+        Do not a
+        uto-connect
+      </button>
+      <hr
+        class="dropdown-divider"
+        tabindex="-1"
+      />
+      <button
+        class="dropdown-item--danger dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <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="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+            fill="currentColor"
+          />
+        </svg>
+         Remove server
+      </button>
+      <span>
+        DeleteServerModal 
+        [CLOSED]
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
+<div>
+  <div
+    class="dropdown"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Options"
+      class="dropdown-btn__toggle btn btn-primary btn-sm"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-ellipsis-vertical px-1"
+        data-icon="ellipsis-vertical"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 128 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <div
+      aria-hidden="true"
+      class="w-100 dropdown-menu dropdown-menu-end"
+      data-bs-popper="static"
+      role="menu"
+      style="min-width: 170px;"
+      tabindex="-1"
+    >
+      <a
+        class="dropdown-item"
+        href="/server/abc123"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-plug fa-fw "
+          data-icon="plug"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M96 0C78.3 0 64 14.3 64 32v96h64V32c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32v96h64V32c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32v32c0 77.4 55 142 128 156.8V480c0 17.7 14.3 32 32 32s32-14.3 32-32V412.8C297 398 352 333.4 352 256V224c17.7 0 32-14.3 32-32s-14.3-32-32-32H32z"
+            fill="currentColor"
+          />
+        </svg>
+         Connect
+      </a>
+      <a
+        class="dropdown-item"
+        href="/server/abc123/edit"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-pen-to-square fa-fw "
+          data-icon="pen-to-square"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"
+            fill="currentColor"
+          />
+        </svg>
+         Edit server
+      </a>
+      <button
+        class="dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle fa-fw "
+          data-icon="circle"
+          data-prefix="far"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+            fill="currentColor"
+          />
+        </svg>
+         
+        A
+        uto-connect
+      </button>
+      <hr
+        class="dropdown-divider"
+        tabindex="-1"
+      />
+      <button
+        class="dropdown-item--danger dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <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="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+            fill="currentColor"
+          />
+        </svg>
+         Remove server
+      </button>
+      <span>
+        DeleteServerModal 
+        [CLOSED]
+      </span>
+    </div>
+  </div>
+</div>
+`;