From d2a74cf547ddb3f66b3a4f97007037fb7ecce166 Mon Sep 17 00:00:00 2001
From: Garrett Delfosse <garrett@coder.com>
Date: Thu, 7 Mar 2024 10:43:25 -0500
Subject: [PATCH] fix: display tooltip when selection is disabled (#12439)

---
 .../modules/resources/PortForwardButton.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index e08ebcb3eb..b46f3d2431 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -14,6 +14,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
 import { type FormikContextType, useFormik } from "formik";
 import type { FC } from "react";
 import { useQuery, useMutation } from "react-query";
@@ -204,6 +205,23 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
   const canSharePortsPublic =
     canSharePorts && template.max_port_share_level === "public";
 
+  const publicMenuItem = (
+    <>
+      {canSharePortsPublic ? (
+        <MenuItem value="public">Public</MenuItem>
+      ) : (
+        <Tooltip title="This workspace template does not allow sharing ports with unauthenticated users.">
+          {/* Tooltips don't work directly on disabled MenuItem components so you must wrap in div. */}
+          <div>
+            <MenuItem value="public" disabled>
+              Public
+            </MenuItem>
+          </div>
+        </Tooltip>
+      )}
+    </>
+  );
+
   return (
     <>
       <div
@@ -429,12 +447,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
                           <MenuItem value="authenticated">
                             Authenticated
                           </MenuItem>
-                          <MenuItem
-                            value="public"
-                            disabled={!canSharePortsPublic}
-                          >
-                            Public
-                          </MenuItem>
+                          {publicMenuItem}
                         </Select>
                       </FormControl>
                       <Button
@@ -499,9 +512,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
                     label="Sharing Level"
                   >
                     <MenuItem value="authenticated">Authenticated</MenuItem>
-                    <MenuItem value="public" disabled={!canSharePortsPublic}>
-                      Public
-                    </MenuItem>
+                    {publicMenuItem}
                   </TextField>
                   <LoadingButton
                     variant="contained"