Improve nesting click handler

coder · BrunoQuaresma · Jan 19, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
commit 5edc20447a8773132af89e7b7ca75a4c9ca65711
diff --git a/site/src/components/Resources/AppLink/AppLink.tsx b/site/src/components/Resources/AppLink/AppLink.tsx
@@ -121,40 +121,40 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
           pointerEvents: canClick ? undefined : "none",
           textDecoration: "none !important",
         }}
-        onClick={
-          canClick
-            ? async (event) => {
-                event.preventDefault();
-                // This is an external URI like "vscode://", so
-                // it needs to be opened with the browser protocol handler.
-                if (app.external && !app.url.startsWith("http")) {
-                  // If the protocol is external the browser does not
-                  // redirect the user from the page.
+        onClick={async (event) => {
+          if (!canClick) {
+            return;
+          }
 
-                  // This is a magic undocumented string that is replaced
-                  // with a brand-new session token from the backend.
-                  // This only exists for external URLs, and should only
-                  // be used internally, and is highly subject to break.
-                  const magicTokenString = "$SESSION_TOKEN";
-                  const hasMagicToken = href.indexOf(magicTokenString);
-                  let url = href;
-                  if (hasMagicToken !== -1) {
-                    setFetchingSessionToken(true);
-                    const key = await getApiKey();
-                    url = href.replaceAll(magicTokenString, key.key);
-                    setFetchingSessionToken(false);
-                  }
-                  window.location.href = url;
-                } else {
-                  window.open(
-                    href,
-                    Language.appTitle(appDisplayName, generateRandomString(12)),
-                    "width=900,height=600",
-                  );
-                }
-              }
-            : undefined
-        }
+          event.preventDefault();
+          // This is an external URI like "vscode://", so
+          // it needs to be opened with the browser protocol handler.
+          if (app.external && !app.url.startsWith("http")) {
+            // If the protocol is external the browser does not
+            // redirect the user from the page.
+
+            // This is a magic undocumented string that is replaced
+            // with a brand-new session token from the backend.
+            // This only exists for external URLs, and should only
+            // be used internally, and is highly subject to break.
+            const magicTokenString = "$SESSION_TOKEN";
+            const hasMagicToken = href.indexOf(magicTokenString);
+            let url = href;
+            if (hasMagicToken !== -1) {
+              setFetchingSessionToken(true);
+              const key = await getApiKey();
+              url = href.replaceAll(magicTokenString, key.key);
+              setFetchingSessionToken(false);
+            }
+            window.location.href = url;
+          } else {
+            window.open(
+              href,
+              Language.appTitle(appDisplayName, generateRandomString(12)),
+              "width=900,height=600",
+            );
+          }
+        }}
       >
         {appDisplayName}
       </Link>