From 3192aa6981013d77c5d2e117a6661634b55280ff Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 17 Mar 2024 12:11:43 +0100
Subject: [PATCH 1/2] Fix broken server dropdown menu when auto-connect is
 enabled

---
 CHANGELOG.md                             | 4 ++--
 src/servers/ManageServersRowDropdown.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2b01b5c..1b88cfea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ 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).
 
-## [Unreleased]
+## [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.
@@ -22,7 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [shlink-web-component#276](https://github.com/shlinkio/shlink-web-component/issues/276) Drop support for Shlink older than 3.3.0
 
 ### Fixed
-* *Nothing*
+* [#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
diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx
index e9e1c9db..188f2780 100644
--- a/src/servers/ManageServersRowDropdown.tsx
+++ b/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>

From 36e2ba59c9dff9fa0c353b2bc8c02c6793e4c5d8 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 17 Mar 2024 12:21:45 +0100
Subject: [PATCH 2/2] Add test to cover server dropdown UI for auto-connect

---
 .../servers/ManageServersRowDropdown.test.tsx |   5 +
 .../ManageServersRowDropdown.test.tsx.snap    | 287 ++++++++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx
index 88f11ef8..1563e7c1 100644
--- a/test/servers/ManageServersRowDropdown.test.tsx
+++ b/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();
+  });
 });
diff --git a/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap b/test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap
new file mode 100644
index 00000000..c8b97ad4
--- /dev/null
+++ b/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>
+`;