fix: support email link template pre-fill (#3979)

* fix: support email link template pre-fill

* fix: remove support dropdown from personal settings

* fix: update support template

---------

Co-authored-by: sidwebworks <xodeveloper@gmail.com>

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -54,33 +54,55 @@ const getPlan = (subscription: SubscriptionPlan) => {
   return "Free";
 };
 
+const getFormattedSupportEmailLink = (variables: { org_id: string; domain: string }) => {
+  const email = "support@infisical.com";
+
+  const body = `Hello Infisical Support Team,
+
+Issue Details:
+[What you did]
+[What you expected to happen]
+[What actually happened]
+[Any error request IDs]
+[Any supporting screenshots or video recording of the issue/request at hand]
+
+Account Info:
+- Organization ID: ${variables.org_id}
+- Domain: ${variables.domain}
+
+Thank you,
+[Your Name]`;
+
+  return `mailto:${email}?body=${encodeURIComponent(body)}`;
+};
+
 export const INFISICAL_SUPPORT_OPTIONS = [
   [
     <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
     "Support Forum",
-    "https://infisical.com/slack"
+    () => "https://infisical.com/slack"
   ],
   [
     <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
     "Read Docs",
-    "https://infisical.com/docs/documentation/getting-started/introduction"
+    () => "https://infisical.com/docs/documentation/getting-started/introduction"
   ],
   [
     <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
     "GitHub Issues",
-    "https://github.com/Infisical/infisical/issues"
+    () => "https://github.com/Infisical/infisical/issues"
   ],
   [
     <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
     "Email Support",
-    "mailto:support@infisical.com"
+    getFormattedSupportEmailLink
   ],
   [
     <FontAwesomeIcon key={5} className="pr-4 text-sm" icon={faUsers} />,
     "Instance Admins",
-    "server-admins"
+    () => "server-admins"
   ]
-];
+] as const;
 
 export const Navbar = () => {
   const { user } = useUser();
@@ -258,7 +280,15 @@ export const Navbar = () => {
           </div>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" side="bottom" className="mt-3 p-1">
-          {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => {
+          {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, getUrl]) => {
+            const url =
+              text === "Email Support"
+                ? getUrl({
+                    org_id: currentOrg.id,
+                    domain: window.location.origin
+                  })
+                : getUrl();
+
             if (url === "server-admins" && isInfisicalCloud()) {
               return null;
             }

frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx

@@ -1,19 +1,11 @@
 import { useTranslation } from "react-i18next";
-import { faArrowLeft, faInfo, faMobile, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet } from "@tanstack/react-router";
 
 import { WishForm } from "@app/components/features/WishForm";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from "@app/components/v2";
-import { envConfig } from "@app/config/env";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
-import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/NavBar/Navbar";
 
 export const PersonalSettingsLayout = () => {
   const { t } = useTranslation();
@@ -36,37 +28,6 @@ export const PersonalSettingsLayout = () => {
               <div className="relative mt-10 flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400">
                 {(window.location.origin.includes("https://app.infisical.com") ||
                   window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
-                      <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
-                      Help & Support
-                    </div>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="p-1">
-                    {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
-                      <DropdownMenuItem key={url as string}>
-                        <a
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          href={String(url)}
-                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                        >
-                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                            {icon}
-                            <div className="text-sm">{text}</div>
-                          </div>
-                        </a>
-                      </DropdownMenuItem>
-                    ))}
-                    {envConfig.PLATFORM_VERSION && (
-                      <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
-                        <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
-                        Version: {envConfig.PLATFORM_VERSION}
-                      </div>
-                    )}
-                  </DropdownMenuContent>
-                </DropdownMenu>
               </div>
               )
             </nav>