From 6f0c5e0c05958adad2e859fd6753da83f221dc58 Mon Sep 17 00:00:00 2001
From: Will Norris <will@tailscale.com>
Date: Thu, 8 Feb 2024 10:09:26 -0800
Subject: [PATCH] client/web: use smart quotes in web UI frontend

add the curly-quotes eslint plugin (same that we use for the admin
panel), and fix existing straight quotes in the current web UI.

Updates #cleanup

Signed-off-by: Will Norris <will@tailscale.com>
---
 client/web/package.json                           | 3 +++
 client/web/src/components/exit-node-selector.tsx  | 2 +-
 client/web/src/components/login-toggle.tsx        | 4 ++--
 client/web/src/components/update-available.tsx    | 2 +-
 client/web/src/components/views/login-view.tsx    | 2 +-
 client/web/src/components/views/updating-view.tsx | 2 +-
 client/web/yarn.lock                              | 5 +++++
 7 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/web/package.json b/client/web/package.json
index 6f209317a..b2ff69d62 100644
--- a/client/web/package.json
+++ b/client/web/package.json
@@ -25,6 +25,7 @@
     "autoprefixer": "^10.4.15",
     "eslint": "^8.23.1",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-curly-quotes": "^1.0.4",
     "jsdom": "^23.0.1",
     "postcss": "^8.4.31",
     "prettier": "^2.5.1",
@@ -50,9 +51,11 @@
       "react-app"
     ],
     "plugins": [
+      "curly-quotes",
       "react-hooks"
     ],
     "rules": {
+      "curly-quotes/no-straight-quotes": "warn",
       "react-hooks/rules-of-hooks": "error",
       "react-hooks/exhaustive-deps": "error"
     },
diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
index 3edfc5d08..457f3bf58 100644
--- a/client/web/src/components/exit-node-selector.tsx
+++ b/client/web/src/components/exit-node-selector.tsx
@@ -180,7 +180,7 @@ export default function ExitNodeSelector({
       )}
       {pending && (
         <p className="text-white p-3">
-          Pending approval to run as exit node. This device won't be usable as
+          Pending approval to run as exit node. This device won’t be usable as
           an exit node until then.
         </p>
       )}
diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index 7a5032fe6..113912a0c 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -190,7 +190,7 @@ function LoginPopoverContent({
                     ) : (
                       // ACLs allow access, but user can't connect.
                       <>
-                        Cannot access this device's Tailscale IP. Make sure you
+                        Cannot access this device’s Tailscale IP. Make sure you
                         are connected to your tailnet, and that your policy file
                         allows access.
                       </>
@@ -209,7 +209,7 @@ function LoginPopoverContent({
                 // User can connect to Tailcale IP; sign in when ready.
                 <>
                   <p className="text-gray-500 text-xs">
-                    You can see most of this device's details. To make changes,
+                    You can see most of this device’s details. To make changes,
                     you need to sign in.
                   </p>
                   {isHTTPS && (
diff --git a/client/web/src/components/update-available.tsx b/client/web/src/components/update-available.tsx
index 975f7ce4d..763007de8 100644
--- a/client/web/src/components/update-available.tsx
+++ b/client/web/src/components/update-available.tsx
@@ -61,7 +61,7 @@ export function ChangelogText({ version }: { version?: string }) {
       <a href="https://tailscale.com/changelog/" className="link">
         release notes
       </a>{" "}
-      to find out what's new!
+      to find out what’s new!
     </>
   )
 }
diff --git a/client/web/src/components/views/login-view.tsx b/client/web/src/components/views/login-view.tsx
index 257412a04..67acdab9d 100644
--- a/client/web/src/components/views/login-view.tsx
+++ b/client/web/src/components/views/login-view.tsx
@@ -41,7 +41,7 @@ export default function LoginView({ data }: { data: NodeData }) {
         <>
           <div className="mb-6">
             <p className="text-gray-700">
-              Your device's key has expired. Reauthenticate this device by
+              Your device’s key has expired. Reauthenticate this device by
               logging in again, or{" "}
               <a
                 href="https://tailscale.com/kb/1028/key-expiry"
diff --git a/client/web/src/components/views/updating-view.tsx b/client/web/src/components/views/updating-view.tsx
index 63b9090c0..dad393cee 100644
--- a/client/web/src/components/views/updating-view.tsx
+++ b/client/web/src/components/views/updating-view.tsx
@@ -35,7 +35,7 @@ export function UpdatingView({
             <Spinner size="sm" className="text-gray-400" />
             <h1 className="text-2xl m-3">Update in progress</h1>
             <p className="text-gray-400">
-              The update shouldn't take more than a couple of minutes. Once it's
+              The update shouldn’t take more than a couple of minutes. Once it’s
               completed, you will be asked to log in again.
             </p>
           </>
diff --git a/client/web/yarn.lock b/client/web/yarn.lock
index 922a919f7..08194cc33 100644
--- a/client/web/yarn.lock
+++ b/client/web/yarn.lock
@@ -3049,6 +3049,11 @@ eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
+eslint-plugin-curly-quotes@^1.0.4:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-curly-quotes/-/eslint-plugin-curly-quotes-1.0.10.tgz#dd61a1d6bb48123d842e21f2086f146c6ab5b8b0"
+  integrity sha512-v2SryrqXE8EEMgc7VSOpyQVZP1dy3N4aS5ZpTor2aV7/ltXlcX6kxpb/Ls5MoHz8ICheVoTuTwqYnSKFgjQUow==
+
 eslint-plugin-flowtype@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912"