feat: renamed old frontend and fixed some minor bugs

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,7 @@
-import { ParsedUrlQuery } from "querystring";
-
 import { useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
 import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { useOrganization, useWorkspace } from "@app/context";
@@ -61,7 +58,10 @@ export default function NavHeader({
   const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false);
   const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false);
 
-  const router = useRouter();
+  const routerEnvSlug = useParams({
+    strict: false,
+    select: (el) => el.envSlug
+  });
 
   const secretPathSegments = secretPath.split("/").filter(Boolean);
 
@@ -71,13 +71,10 @@ export default function NavHeader({
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link
-        passHref
-        legacyBehavior
-        href={`/org/${currentOrg?.id}/${ProjectType.SecretManager}/overview`}
+        to="/organization/secret-manager/overview"
+        className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary"
       >
-        <a className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
-          {currentOrg?.name}
-        </a>
+        {currentOrg?.name}
       </Link>
       {isProjectRelated && (
         <>
@@ -96,14 +93,11 @@ export default function NavHeader({
       <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
       {pageName === "Secrets" ? (
         <Link
-          passHref
-          legacyBehavior
-          href={{
-            pathname: `/${ProjectType.SecretManager}/[id]/secrets/overview`,
-            query: { id: router.query.id }
-          }}
+          to={`/${ProjectType.SecretManager}/$projectId/overview` as const}
+          params={{ projectId: currentWorkspace.id }}
+          className="text-sm font-semibold text-primary/80 hover:text-primary"
         >
-          <a className="text-sm font-semibold text-primary/80 hover:text-primary">{pageName}</a>
+          {pageName}
         </Link>
       ) : (
         <div className="text-sm text-gray-400">{pageName}</div>
@@ -131,29 +125,21 @@ export default function NavHeader({
           </div>
         </>
       )}
-      {isFolderMode && Boolean(secretPathSegments.length) && (
+      {isFolderMode && routerEnvSlug && Boolean(secretPathSegments.length) && (
         <div className="flex items-center space-x-3">
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
           <Link
-            passHref
-            legacyBehavior
-            href={{
-              pathname: `/${ProjectType.SecretManager}/[id]/secrets/[env]`,
-              query: { id: router.query.id, env: router.query.env }
-            }}
+            to={`/${ProjectType.SecretManager}/$projectId/secrets/$envSlug` as const}
+            params={{ projectId: currentWorkspace.id, envSlug: routerEnvSlug }}
+            className="text-sm font-semibold text-primary/80 hover:text-primary"
           >
-            <a className="text-sm font-semibold text-primary/80 hover:text-primary">
-              {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
-            </a>
+            {userAvailableEnvs?.find(({ slug }) => slug === currentEnv)?.name}
           </Link>
         </div>
       )}
       {isFolderMode &&
         secretPathSegments?.map((folderName, index) => {
-          const query: ParsedUrlQuery & { secretPath: string } = {
-            ...router.query,
-            secretPath: `/${secretPathSegments.slice(0, index + 1).join("/")}`
-          };
+          const newSecretPath = `/${secretPathSegments.slice(0, index + 1).join("/")}`;
 
           return (
             <div
@@ -184,7 +170,7 @@ export default function NavHeader({
                       onClick={() => {
                         if (isCopied) return;
 
-                        navigator.clipboard.writeText(query.secretPath);
+                        navigator.clipboard.writeText(newSecretPath);
 
                         createNotification({
                           text: "Copied secret path to clipboard",
@@ -205,21 +191,18 @@ export default function NavHeader({
                 </div>
               ) : (
                 <Link
-                  passHref
-                  legacyBehavior
-                  href={{
-                    pathname: `/${ProjectType.SecretManager}/[id]/secrets/[env]`,
-                    query
+                  to={`/${ProjectType.SecretManager}/$projectId/secrets/$envSlug` as const}
+                  params={{
+                    projectId: currentWorkspace.id,
+                    envSlug: routerEnvSlug || ""
                   }}
+                  search={(query) => ({ ...query, secretPath: newSecretPath })}
+                  className={twMerge(
+                    "text-sm font-semibold transition-all hover:text-primary",
+                    isHoveringCopyButton ? "text-primary" : "text-primary/80"
+                  )}
                 >
-                  <a
-                    className={twMerge(
-                      "text-sm font-semibold transition-all hover:text-primary",
-                      isHoveringCopyButton ? "text-primary" : "text-primary/80"
-                    )}
-                  >
-                    {folderName}
-                  </a>
+                  {folderName}
                 </Link>
               )}
             </div>

frontend/src/components/navigation/NavHeaderSecrets.tsx

@@ -1,99 +0,0 @@
-import { useRouter } from "next/router";
-import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useOrganization, useWorkspace } from "@app/context";
-
-import { Select, SelectItem, Tooltip } from "../v2";
-
-/**
- * This is the component at the top of almost every page.
- * It shows how to navigate to a certain page.
- * It future these links should also be clickable and hoverable
- * @param {object} obj
- * @param {string} obj.pageName - Name of the page
- * @param {boolean} obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
- * @param {boolean} obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
- * @param {string} obj.currentEnv - current environment inside a project
- * @param {string} obj.userAvailableEnvs - environments that are available to a user in this project (used for the dropdown)
- * @param {string} obj.onEnvChange - the action that happens when an env is changed
- * @returns
- */
-export default function NavHeaderSecrets({
-  pageName,
-  isProjectRelated,
-  isOrganizationRelated,
-  isSnapshot,
-  currentEnv,
-  userAvailableEnvs,
-  onEnvChange
-}: {
-  pageName: string;
-  isProjectRelated?: boolean;
-  isOrganizationRelated?: boolean;
-  isSnapshot: boolean;
-  currentEnv?: string;
-  userAvailableEnvs?: any[];
-  onEnvChange?: (slug: string) => void;
-}): JSX.Element {
-  const { currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrganization();
-  const router = useRouter();
-
-  return (
-    <div
-      className={`${!isSnapshot && "absolute"} ml-6 flex cursor-default flex-row items-center pt-6`}
-    >
-      <div className="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
-        {currentOrg?.name?.charAt(0)}
-      </div>
-      <div className="text-md font-medium text-bunker-300">{currentOrg?.name}</div>
-      {isProjectRelated && (
-        <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-          <div className="text-md font-medium text-bunker-300">{currentWorkspace?.name}</div>
-        </>
-      )}
-      {isOrganizationRelated && (
-        <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-          <div className="text-md font-medium text-bunker-300">Organization Settings</div>
-        </>
-      )}
-      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
-      {pageName === "Secrets" ? (
-        <a
-          className="text-md font-medium text-primary/80 hover:text-primary"
-          href={`${router.asPath.split("?")[0]}`}
-        >
-          {pageName}
-        </a>
-      ) : (
-        <div className="text-md text-gray-400">{pageName}</div>
-      )}
-      {currentEnv && (
-        <>
-          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
-          <div className="rounded-md pl-3 hover:bg-bunker-100/10">
-            <Tooltip content="Select environment">
-              <Select
-                value={userAvailableEnvs?.filter((uae) => uae.name === currentEnv)[0]?.slug}
-                onValueChange={(value) => {
-                  if (value && onEnvChange) onEnvChange(value);
-                }}
-                className="text-md bg-transparent pl-0 font-medium text-primary/80 hover:text-primary"
-                dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
-              >
-                {userAvailableEnvs?.map(({ name, slug }) => (
-                  <SelectItem value={slug} key={slug}>
-                    {name}
-                  </SelectItem>
-                ))}
-              </Select>
-            </Tooltip>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

frontend/src/components/navigation/RegionSelect.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from "next/router";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useLocation } from "@tanstack/react-router";
 
 import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
 import { isInfisicalCloud } from "@app/helpers/platform";
@@ -73,10 +73,10 @@ const regions = [
 ];
 
 export const RegionSelect = () => {
-  const router = useRouter();
+  const location = useLocation();
 
   const handleRegionSelect = (value: Region) => {
-    router.push(`https://${value}.infisical.com/${router.pathname}`);
+    window.location.assign(`https://${value}.infisical.com/${location.pathname}`);
   };
 
   const shouldDisplay =
@@ -116,7 +116,7 @@ export const RegionSelect = () => {
           title="Infisical Cloud data regions"
           subTitle="Select the closest region to you and your team. Contact Infisical if you need to migrate regions."
         >
-          {regions.map(({ value, label, location, flag }) => (
+          {regions.map(({ value, label, location: regionLocation, flag }) => (
             <div className="mb-6" key={value}>
               <p className="font-medium">
                 <span className="mr-2 inline-block w-4">{flag}</span>
@@ -133,7 +133,7 @@ export const RegionSelect = () => {
                 </li>
                 <li>
                   <FontAwesomeIcon size="xs" className="mr-0.5 text-green" icon={faCheck} /> Hosted
-                  in {location}
+                  in {regionLocation}
                 </li>
               </ul>
             </div>