improvements: ui improvements & add users to org from project member invite modal

frontend/public/locales/en/translations.json

@@ -222,10 +222,10 @@
       "org-members-description": "Manage members of your organization. These users could afterwards be formed into projects.",
       "search-members": "Search members...",
       "add-dialog": {
-        "add-member-to-project": "Add a member to your project",
+        "add-member-to-project": "Add users to your project",
         "already-all-invited": "All the users in your organization are already invited.",
         "add-user-org-first": "Add more users to the organization first.",
-        "user-will-email": "The user will receive an email with the instructions.",
+        "user-will-email": "Users will receive an email with instructions to gain access.",
         "looking-add": "<0>If you are looking to add users to your org,</0><1>click here</1>",
         "add-user-to-org": "Add Users to Organization"
       }

frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx

@@ -18,7 +18,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
 
   if (!secretSync) return null;
 
-  const { id: syncId, name, destination } = secretSync;
+  const { id: syncId, name, destination, projectId } = secretSync;
 
   const handleDeleteSecretSync = async () => {
     const destinationName = SECRET_SYNC_MAP[destination].name;
@@ -27,7 +27,8 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
       await deleteSync.mutateAsync({
         syncId,
         destination,
-        removeSecrets
+        removeSecrets,
+        projectId
       });
 
       createNotification({

frontend/src/components/secret-syncs/SecretSyncImportSecretsModal.tsx

@@ -37,7 +37,7 @@ const FormSchema = z.object({
 type TFormData = z.infer<typeof FormSchema>;
 
 const Content = ({ secretSync, onComplete }: ContentProps) => {
-  const { id: syncId, destination } = secretSync;
+  const { id: syncId, destination, projectId } = secretSync;
   const destinationName = SECRET_SYNC_MAP[destination].name;
 
   const {
@@ -53,7 +53,8 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
       await triggerImportSecrets.mutateAsync({
         syncId,
         destination,
-        importBehavior
+        importBehavior,
+        projectId
       });
 
       createNotification({

frontend/src/components/secret-syncs/SecretSyncRemoveSecretsModal.tsx

@@ -15,7 +15,7 @@ type ContentProps = {
 };
 
 const Content = ({ secretSync, onComplete }: ContentProps) => {
-  const { id: syncId, destination } = secretSync;
+  const { id: syncId, destination, projectId } = secretSync;
   const destinationName = SECRET_SYNC_MAP[destination].name;
 
   const triggerSyncImport = useTriggerSecretSyncRemoveSecrets();
@@ -24,7 +24,8 @@ const Content = ({ secretSync, onComplete }: ContentProps) => {
     try {
       await triggerSyncImport.mutateAsync({
         syncId,
-        destination
+        destination,
+        projectId
       });
 
       createNotification({

frontend/src/components/secret-syncs/forms/EditSecretSyncForm.tsx

@@ -41,7 +41,8 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
         syncId: secretSync.id,
         ...formData,
         environment: environment?.slug,
-        connectionId: connection.id
+        connectionId: connection.id,
+        projectId: secretSync.projectId
       });
 
       createNotification({

frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx

@@ -71,12 +71,8 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
           {canCreateConnection ? (
             <>
               You do not have access to any {appName} Connections. Create one from the{" "}
-              <Link
+              <Link to="/organization/app-connections" className="underline">
-                to="/organization/settings"
+                App Connections
-                className="underline"
-                search={{ selectedTab: "app-connections" }}
-              >
-                Organization Settings
               </Link>{" "}
               page.
             </>

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -1,15 +1,17 @@
 import { ReactNode } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   title: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
+  className?: string;
 };
 
-export const PageHeader = ({ title, description, children }: Props) => (
+export const PageHeader = ({ title, description, children, className }: Props) => (
-  <div className="mb-4">
+  <div className={twMerge("mb-4", className)}>
     <div className="flex w-full justify-between">
-      <div>
+      <div className="w-full">
         <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
       </div>
       <div>{children}</div>

frontend/src/hooks/api/secretSyncs/mutations.tsx

@@ -23,7 +23,8 @@ export const useCreateSecretSync = () => {
 
       return data.secretSync;
     },
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() })
+    onSuccess: (_, { projectId }) =>
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) })
   });
 };
 
@@ -38,8 +39,8 @@ export const useUpdateSecretSync = () => {
 
       return data.secretSync;
     },
-    onSuccess: (_, { syncId, destination }) => {
+    onSuccess: (_, { syncId, destination, projectId }) => {
-      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() });
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) });
       queryClient.invalidateQueries({ queryKey: secretSyncKeys.byId(destination, syncId) });
     }
   });
@@ -55,8 +56,8 @@ export const useDeleteSecretSync = () => {
 
       return data;
     },
-    onSuccess: (_, { syncId, destination }) => {
+    onSuccess: (_, { syncId, destination, projectId }) => {
-      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() });
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) });
       queryClient.invalidateQueries({ queryKey: secretSyncKeys.byId(destination, syncId) });
     }
   });
@@ -72,8 +73,8 @@ export const useTriggerSecretSyncSyncSecrets = () => {
 
       return data;
     },
-    onSuccess: (_, { syncId, destination }) => {
+    onSuccess: (_, { syncId, destination, projectId }) => {
-      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() });
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) });
       queryClient.invalidateQueries({ queryKey: secretSyncKeys.byId(destination, syncId) });
     }
   });
@@ -93,8 +94,8 @@ export const useTriggerSecretSyncImportSecrets = () => {
 
       return data;
     },
-    onSuccess: (_, { syncId, destination }) => {
+    onSuccess: (_, { syncId, destination, projectId }) => {
-      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() });
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) });
       queryClient.invalidateQueries({ queryKey: secretSyncKeys.byId(destination, syncId) });
     }
   });
@@ -110,8 +111,8 @@ export const useTriggerSecretSyncRemoveSecrets = () => {
 
       return data;
     },
-    onSuccess: (_, { syncId, destination }) => {
+    onSuccess: (_, { syncId, destination, projectId }) => {
-      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list() });
+      queryClient.invalidateQueries({ queryKey: secretSyncKeys.list(projectId) });
       queryClient.invalidateQueries({ queryKey: secretSyncKeys.byId(destination, syncId) });
     }
   });

frontend/src/hooks/api/secretSyncs/queries.tsx

@@ -12,7 +12,7 @@ import {
 export const secretSyncKeys = {
   all: ["secret-sync"] as const,
   options: () => [...secretSyncKeys.all, "options"] as const,
-  list: () => [...secretSyncKeys.all, "list"] as const,
+  list: (projectId: string) => [...secretSyncKeys.all, "list", projectId] as const,
   byId: (destination: SecretSync, syncId: string) =>
     [...secretSyncKeys.all, destination, "by-id", syncId] as const
 };
@@ -46,6 +46,14 @@ export const useSecretSyncOption = (destination: SecretSync) => {
   return { syncOption, isPending };
 };
 
+export const fetchSecretSyncsByProjectId = async (projectId: string) => {
+  const { data } = await apiRequest.get<TListSecretSyncs>("/api/v1/secret-syncs", {
+    params: { projectId }
+  });
+
+  return data.secretSyncs;
+};
+
 export const useListSecretSyncs = (
   projectId: string,
   options?: Omit<
@@ -54,14 +62,8 @@ export const useListSecretSyncs = (
   >
 ) => {
   return useQuery({
-    queryKey: secretSyncKeys.list(),
+    queryKey: secretSyncKeys.list(projectId),
-    queryFn: async () => {
+    queryFn: () => fetchSecretSyncsByProjectId(projectId),
-      const { data } = await apiRequest.get<TListSecretSyncs>("/api/v1/secret-syncs", {
-        params: { projectId }
-      });
-
-      return data.secretSyncs;
-    },
     ...options
   });
 };

frontend/src/hooks/api/secretSyncs/types/index.ts

@@ -43,26 +43,31 @@ export type TUpdateSecretSyncDTO = Partial<
 > & {
   destination: SecretSync;
   syncId: string;
+  projectId: string;
 };
 
 export type TDeleteSecretSyncDTO = {
   destination: SecretSync;
   syncId: string;
   removeSecrets: boolean;
+  projectId: string;
 };
 
 export type TTriggerSecretSyncSyncSecretsDTO = {
   destination: SecretSync;
   syncId: string;
+  projectId: string;
 };
 
 export type TTriggerSecretSyncImportSecretsDTO = {
   destination: SecretSync;
   syncId: string;
   importBehavior: SecretSyncImportBehavior;
+  projectId: string;
 };
 
 export type TTriggerSecretSyncRemoveSecretsDTO = {
   destination: SecretSync;
   syncId: string;
+  projectId: string;
 };

frontend/src/hooks/api/workspace/queries.tsx

@@ -206,7 +206,7 @@ export const useGetWorkspaceAuthorizations = <TData = IntegrationAuth[],>(
     select
   });
 
-const fetchWorkspaceIntegrations = async (workspaceId: string) => {
+export const fetchWorkspaceIntegrations = async (workspaceId: string) => {
   const { data } = await apiRequest.get<{ integrations: TIntegration[] }>(
     `/api/v1/workspace/${workspaceId}/integrations`
   );

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -94,6 +94,13 @@ export const OrganizationLayout = () => {
                           </MenuItem>
                         )}
                       </Link>
+                      <Link to="/organization/app-connections">
+                        {({ isActive }) => (
+                          <MenuItem isSelected={isActive} icon="jigsaw-puzzle">
+                            App Connections
+                          </MenuItem>
+                        )}
+                      </Link>
                       <Link to="/organization/settings">
                         {({ isActive }) => (
                           <MenuItem isSelected={isActive} icon="toggle-settings">

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -10,6 +10,7 @@ import {
   faInfo,
   faInfoCircle,
   faMoneyBill,
+  faPlug,
   faSignOut,
   faUser,
   faUsers
@@ -100,6 +101,7 @@ export const MinimizedOrgSidebar = () => {
   const isMoreSelected = (
     [
       linkOptions({ to: "/organization/access-management" }).to,
+      linkOptions({ to: "/organization/app-connections" }).to,
       linkOptions({ to: "/organization/settings" }).to,
       linkOptions({ to: "/organization/audit-logs" }).to
     ] as string[]
@@ -311,10 +313,10 @@ export const MinimizedOrgSidebar = () => {
                   <div className="w-full">
                     <MenuIconButton
                       lottieIconMode="reverse"
-                      icon="three-ellipsis"
+                      icon="settings-cog"
                       isSelected={isMoreSelected}
                     >
-                      More
+                      Org Controls
                     </MenuIconButton>
                   </div>
                 </DropdownMenuTrigger>
@@ -325,6 +327,11 @@ export const MinimizedOrgSidebar = () => {
                       Access Control
                     </DropdownMenuItem>
                   </Link>
+                  <Link to="/organization/app-connections">
+                    <DropdownMenuItem icon={<FontAwesomeIcon icon={faPlug} />}>
+                      App Connections
+                    </DropdownMenuItem>
+                  </Link>
                   {(window.location.origin.includes("https://app.infisical.com") ||
                     window.location.origin.includes("https://eu.infisical.com") ||
                     window.location.origin.includes("https://gamma.infisical.com")) && (

frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx

@@ -0,0 +1,90 @@
+import { Helmet } from "react-helmet";
+import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, PageHeader } from "@app/components/v2";
+import {
+  OrgPermissionAppConnectionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import {
+  AddAppConnectionModal,
+  AppConnectionsTable
+} from "@app/pages/organization/AppConnections/AppConnectionsPage/components";
+
+export const AppConnectionsPage = withPermission(
+  () => {
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addConnection"] as const);
+
+    return (
+      <div className="bg-bunker-800">
+        <Helmet>
+          <title>Infisical | App Connections</title>
+          <link rel="icon" href="/infisical.ico" />
+          <meta property="og:image" content="/images/message.png" />
+        </Helmet>
+        <div className="flex w-full justify-center bg-bunker-800 text-white">
+          <div className="w-full max-w-7xl">
+            <PageHeader
+              className="w-full"
+              title={
+                <div className="flex w-full items-center">
+                  <span>App Connections</span>
+                  <a
+                    className="-mt-1.5"
+                    href="https://infisical.com/docs/integrations/app-connections/overview"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 text-sm font-normal text-yellow opacity-80 hover:opacity-100">
+                      <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                      <span>Docs</span>
+                      <FontAwesomeIcon
+                        icon={faArrowUpRightFromSquare}
+                        className="mb-[0.07rem] ml-1.5 text-[10px]"
+                      />
+                    </div>
+                  </a>
+                  <OrgPermissionCan
+                    I={OrgPermissionAppConnectionActions.Create}
+                    a={OrgPermissionSubjects.AppConnections}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        colorSchema="secondary"
+                        type="submit"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        onClick={() => {
+                          handlePopUpOpen("addConnection");
+                        }}
+                        isDisabled={!isAllowed}
+                        className="ml-auto"
+                      >
+                        Add Connection
+                      </Button>
+                    )}
+                  </OrgPermissionCan>
+                </div>
+              }
+              description="Create and configure connections with third-party apps for re-use across Infisical projects"
+            />
+            <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+              <AppConnectionsTable />
+              <AddAppConnectionModal
+                isOpen={popUp.addConnection.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("addConnection", isOpen)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  {
+    action: OrgPermissionAppConnectionActions.Read,
+    subject: OrgPermissionSubjects.AppConnections
+  }
+);

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx

@@ -159,7 +159,7 @@ export const AppConnectionsTable = () => {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search integrations..."
+          placeholder="Search connections..."
           className="flex-1"
         />
         <DropdownMenu>

frontend/src/pages/organization/AppConnections/AppConnectionsPage/route.tsx

@@ -0,0 +1,23 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { AppConnectionsPage } from "./AppConnectionsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/app-connections/"
+)({
+  component: AppConnectionsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "App Connections"
+      }
+    ]
+  })
+});

frontend/src/pages/organization/AppConnections/OauthCallbackPage/OauthCallbackPage.tsx

@@ -135,7 +135,7 @@ export const OAuthCallbackPage = () => {
         type: "error"
       });
       navigate({
-        to: returnUrl ?? "/organization/settings?selectedTab=app-connections"
+        to: returnUrl ?? "/organization/app-connections"
       });
     }
 
@@ -183,7 +183,7 @@ export const OAuthCallbackPage = () => {
         type: "error"
       });
       navigate({
-        to: returnUrl ?? "/organization/settings?selectedTab=app-connections"
+        to: returnUrl ?? "/organization/app-connections"
       });
     }
 
@@ -249,7 +249,7 @@ export const OAuthCallbackPage = () => {
         type: "error"
       });
       navigate({
-        to: returnUrl ?? "/organization/settings?selectedTab=app-connections"
+        to: returnUrl ?? "/organization/app-connections"
       });
     }
 
@@ -295,7 +295,7 @@ export const OAuthCallbackPage = () => {
       }
 
       await navigate({
-        to: data?.returnUrl ?? "/organization/settings?selectedTab=app-connections"
+        to: data?.returnUrl ?? "/organization/app-connections"
       });
     })();
   }, [isReady]);

frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/AppConnectionsTab.tsx

@@ -1,77 +0,0 @@
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button } from "@app/components/v2";
-import { OrgPermissionSubjects } from "@app/context";
-import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
-import { withPermission } from "@app/hoc";
-import { usePopUp } from "@app/hooks";
-
-import { AddAppConnectionModal, AppConnectionsTable } from "./components";
-
-export const AppConnectionsTab = withPermission(
-  () => {
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addConnection"] as const);
-
-    return (
-      <div>
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex items-center">
-            <div>
-              <div className="flex items-start gap-1">
-                <p className="text-xl font-semibold text-mineshaft-100">App Connections</p>
-                <a
-                  href="https://infisical.com/docs/integrations/app-connections/overview"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div className="ml-1 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                    <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                    <span>Docs</span>
-                    <FontAwesomeIcon
-                      icon={faArrowUpRightFromSquare}
-                      className="mb-[0.07rem] ml-1.5 text-[10px]"
-                    />
-                  </div>
-                </a>
-              </div>
-              <p className="text-sm text-bunker-300">
-                Create and configure connections with third-party apps for re-use across Infisical
-                projects
-              </p>
-            </div>
-            <OrgPermissionCan
-              I={OrgPermissionAppConnectionActions.Create}
-              a={OrgPermissionSubjects.AppConnections}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                  onClick={() => {
-                    handlePopUpOpen("addConnection");
-                  }}
-                  isDisabled={!isAllowed}
-                  className="ml-auto"
-                >
-                  Add Connection
-                </Button>
-              )}
-            </OrgPermissionCan>
-          </div>
-          <AppConnectionsTable />
-          <AddAppConnectionModal
-            isOpen={popUp.addConnection.isOpen}
-            onOpenChange={(isOpen) => handlePopUpToggle("addConnection", isOpen)}
-          />
-        </div>
-      </div>
-    );
-  },
-  {
-    action: OrgPermissionAppConnectionActions.Read,
-    subject: OrgPermissionSubjects.AppConnections
-  }
-);

frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/index.tsx

@@ -1 +0,0 @@
-export { AppConnectionsTab } from "./AppConnectionsTab";

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -4,7 +4,6 @@ import { useSearch } from "@tanstack/react-router";
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 
-import { AppConnectionsTab } from "../AppConnectionsTab";
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
 import { OrgAuthTab } from "../OrgAuthTab";
@@ -26,7 +25,6 @@ export const OrgTabGroup = () => {
       key: "workflow-integrations",
       component: OrgWorkflowIntegrationTab
     },
-    { name: "App Connections", key: "app-connections", component: AppConnectionsTab },
     { name: "Audit Log Streams", key: "tag-audit-log-streams", component: AuditLogStreamsTab },
     { name: "Import", key: "tab-import", component: ImportTab },
     { name: "Project Templates", key: "project-templates", component: ProjectTemplatesTab }

frontend/src/pages/project/AccessControlPage/components/MembersTab/components/AddMemberModal.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Link } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2";
+import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useAddUsersToOrg,
@@ -19,7 +19,15 @@ import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const addMemberFormSchema = z.object({
-  orgMemberships: z.array(z.object({ label: z.string().trim(), value: z.string().trim() })).min(1),
+  orgMemberships: z
+    .array(
+      z.object({
+        label: z.string().trim(),
+        value: z.string().trim(),
+        isNewInvitee: z.boolean().optional()
+      })
+    )
+    .min(1),
   projectRoleSlugs: z.array(z.object({ slug: z.string().trim(), name: z.string().trim() })).min(1)
 });
 
@@ -60,7 +68,12 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
     if (!currentWorkspace) return;
     if (!currentOrg?.id) return;
 
-    const selectedMembers = orgMemberships.map((orgMembership) =>
+    const existingMembers = orgMemberships.filter((membership) => !membership.isNewInvitee);
+    const newInvitees = orgMemberships
+      .filter((membership) => membership.isNewInvitee)
+      .map((membership) => membership.value);
+
+    const selectedMembers = existingMembers.map((orgMembership) =>
       orgUsers?.find((orgUser) => orgUser.id === orgMembership.value)
     );
 
@@ -76,11 +89,11 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
         const inviteeEmails = selectedMembers
           .map((member) => member?.user.username as string)
           .filter(Boolean);
-        if (inviteeEmails.length) {
+        if (inviteeEmails.length || newInvitees.length) {
           await addMembersToProject({
-            inviteeEmails,
+            inviteeEmails: [...inviteeEmails, ...newInvitees],
             organizationId: orgId,
-            organizationRoleSlug: ProjectMembershipRole.Member, // ? This doesn't apply in this case, because we know the users being added are already part of the organization
+            organizationRoleSlug: ProjectMembershipRole.Member, // only applies to new invites
             projects: [
               {
                 slug: currentWorkspace.slug,
@@ -125,6 +138,8 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
   const selectedOrgMemberships = watch("orgMemberships");
   const selectedRoleSlugs = watch("projectRoleSlugs");
 
+  const { append } = useFieldArray<TAddMemberForm>({ control, name: "orgMemberships" });
+
   return (
     <Modal
       isOpen={popUp?.addMember?.isOpen}
@@ -135,87 +150,112 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
         title={t("section.members.add-dialog.add-member-to-project") as string}
         subTitle={t("section.members.add-dialog.user-will-email")}
       >
-        {filteredOrgUsers.length ? (
+        <form onSubmit={handleSubmit(onAddMembers)}>
-          <form onSubmit={handleSubmit(onAddMembers)}>
+          <div className="flex w-full flex-col items-start gap-2">
-            <div className="flex w-full flex-col items-start gap-2">
+            <Controller
-              <Controller
+              control={control}
-                control={control}
+              name="orgMemberships"
-                name="orgMemberships"
+              render={({ field }) => (
-                render={({ field }) => (
+                <FormControl
-                  <FormControl
+                  className="w-full"
-                    className="w-full"
+                  isError={!!errors.orgMemberships?.length}
-                    isError={!!errors.orgMemberships?.length}
+                  errorText={errors.orgMemberships?.[0]?.message}
-                    errorText={errors.orgMemberships?.[0]?.message}
+                  label="Invite users to project"
-                    label="Invite users to project"
+                  helperText="You can invite new users to your organzation by typing out their email address"
-                  >
+                >
-                    <FilterableSelect
+                  <CreatableSelect
-                      className="w-full"
+                    noOptionsMessage={() => (
-                      placeholder="Add one or more users..."
+                      <>
-                      isMulti
+                        <p>
-                      name="members"
+                          {!filteredOrgUsers.length && (
-                      options={filteredOrgUsers}
+                            <p>All organization members are already assigned to this project.</p>
-                      value={field.value}
+                          )}
-                      onChange={field.onChange}
+                        </p>
-                    />
+                        <p>Add new users to your organization by typing out their email address.</p>
-                  </FormControl>
+                      </>
-                )}
+                    )}
-              />
+                    onCreateOption={(inputValue) =>
+                      append({ label: inputValue, value: inputValue, isNewInvitee: true })
+                    }
+                    formatCreateLabel={(inputValue) => `Invite "${inputValue}"`}
+                    isValidNewOption={(input) =>
+                      Boolean(input) &&
+                      z.string().email().safeParse(input).success &&
+                      !orgUsers
+                        ?.flatMap(({ user }) => {
+                          const emails: string[] = [];
 
-              <Controller
+                          if (user.email) {
-                control={control}
+                            emails.push(user.email);
-                name="projectRoleSlugs"
+                          }
-                render={({ field: { onChange, value }, fieldState: { error } }) => (
+
-                  <FormControl
+                          if (user.username) {
+                            emails.push(user.username);
+                          }
+
+                          return emails;
+                        })
+                        .includes(input)
+                    }
                     className="w-full"
-                    label="Select roles"
+                    placeholder="Add one or more users..."
-                    tooltipText="Select the roles that you wish to assign to the users"
+                    isMulti
-                    errorText={error?.message}
+                    name="members"
-                    isError={Boolean(error)}
+                    options={filteredOrgUsers}
-                  >
+                    value={field.value}
-                    <FilterableSelect
+                    onChange={field.onChange}
-                      options={roles}
+                  />
-                      placeholder="Select roles..."
+                </FormControl>
-                      value={value}
+              )}
-                      onChange={onChange}
+            />
-                      isMulti
+
-                      getOptionValue={(option) => option.slug}
+            <Controller
-                      getOptionLabel={(option) => option.name}
+              control={control}
-                    />
+              name="projectRoleSlugs"
-                  </FormControl>
+              render={({ field: { onChange, value }, fieldState: { error } }) => (
-                )}
+                <FormControl
-              />
+                  className="w-full"
-            </div>
+                  label="Select roles"
-            <div className="mt-8 flex items-center">
+                  tooltipText="Select the roles that you wish to assign to the users"
-              <Button
+                  errorText={error?.message}
-                className="mr-4"
+                  isError={Boolean(error)}
-                size="sm"
+                >
-                type="submit"
+                  <FilterableSelect
-                isLoading={isSubmitting}
+                    options={roles}
-                isDisabled={
+                    placeholder="Select roles..."
-                  isSubmitting ||
+                    value={value}
-                  selectedOrgMemberships.length === 0 ||
+                    onChange={onChange}
-                  selectedRoleSlugs.length === 0
+                    isMulti
-                }
+                    getOptionValue={(option) => option.slug}
-              >
+                    getOptionLabel={(option) => option.name}
-                Add Members
+                  />
-              </Button>
+                </FormControl>
-              <Button
+              )}
-                colorSchema="secondary"
+            />
-                variant="plain"
-                onClick={() => handlePopUpToggle("addMember", false)}
-              >
-                Cancel
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <div className="flex flex-col space-y-4">
-            <div>All the users in your organization are already invited.</div>
-            <Link to={"/organization/access-management" as const}>
-              <Button variant="outline_bg">Add users to organization</Button>
-            </Link>
           </div>
-        )}
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={
+                isSubmitting ||
+                selectedOrgMemberships.length === 0 ||
+                selectedRoleSlugs.length === 0
+              }
+            >
+              Add Members
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("addMember", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
       </ModalContent>
     </Modal>
   );

frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { IntegrationDetailsByIDPage } from "./IntegrationsDetailsByIDPage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx

@@ -29,7 +29,7 @@ export const IntegrationsListPage = () => {
   const updateSelectedTab = (tab: string) => {
     navigate({
       to: ROUTE_PATHS.SecretManager.IntegrationsListPage.path,
-      search: (prev) => ({ ...prev, selectedTab: tab }),
+      search: (prev) => ({ ...prev, selectedTab: tab as IntegrationsListPageTabs }),
       params: {
         projectId: currentWorkspace.id
       }

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx

@@ -227,7 +227,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
       await updateSync.mutateAsync({
         syncId: secretSync.id,
         destination: secretSync.destination,
-        isAutoSyncEnabled
+        isAutoSyncEnabled,
+        projectId: secretSync.projectId
       });
 
       createNotification({
@@ -248,7 +249,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
     try {
       await triggerSync.mutateAsync({
         syncId: secretSync.id,
-        destination: secretSync.destination
+        destination: secretSync.destination,
+        projectId: secretSync.projectId
       });
 
       createNotification({

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -1,15 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { workspaceKeys } from "@app/hooks/api";
+import { fetchSecretSyncsByProjectId, secretSyncKeys } from "@app/hooks/api/secretSyncs";
+import { fetchWorkspaceIntegrations } from "@app/hooks/api/workspace/queries";
 import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 import { IntegrationsListPage } from "./IntegrationsListPage";
 
 const IntegrationsListPageQuerySchema = z.object({
-  selectedTab: z
+  selectedTab: z.nativeEnum(IntegrationsListPageTabs).optional()
-    .nativeEnum(IntegrationsListPageTabs)
-    .catch(IntegrationsListPageTabs.NativeIntegrations)
 });
 
 export const Route = createFileRoute(
@@ -17,7 +18,47 @@ export const Route = createFileRoute(
 )({
   component: IntegrationsListPage,
   validateSearch: zodValidator(IntegrationsListPageQuerySchema),
-  beforeLoad: ({ context }) => {
+  beforeLoad: async ({ context, search, params: { projectId } }) => {
+    if (!search.selectedTab) {
+      const secretSyncs = await context.queryClient.ensureQueryData({
+        queryKey: secretSyncKeys.list(projectId),
+        queryFn: () => fetchSecretSyncsByProjectId(projectId)
+      });
+
+      if (secretSyncs.length) {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
+        });
+      }
+
+      const integrations = await context.queryClient.ensureQueryData({
+        queryKey: workspaceKeys.getWorkspaceIntegrations(projectId),
+        queryFn: () => fetchWorkspaceIntegrations(projectId)
+      });
+
+      if (integrations.length) {
+        throw redirect({
+          to: "/secret-manager/$projectId/integrations",
+          params: {
+            projectId
+          },
+          search: { selectedTab: IntegrationsListPageTabs.NativeIntegrations }
+        });
+      }
+
+      throw redirect({
+        to: "/secret-manager/$projectId/integrations",
+        params: {
+          projectId
+        },
+        search: { selectedTab: IntegrationsListPageTabs.SecretSyncs }
+      });
+    }
+
     return {
       breadcrumbs: [
         ...context.breadcrumbs,

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx

@@ -92,7 +92,8 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
       await updateSync.mutateAsync({
         syncId: secretSync.id,
         destination: secretSync.destination,
-        isAutoSyncEnabled
+        isAutoSyncEnabled,
+        projectId: secretSync.projectId
       });
 
       createNotification({
@@ -111,7 +112,8 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
     try {
       await triggerSyncSecrets.mutateAsync({
         syncId: secretSync.id,
-        destination: secretSync.destination
+        destination: secretSync.destination,
+        projectId: secretSync.projectId
       });
 
       createNotification({

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { SecretSyncDetailsByIDPage } from "./SecretSyncDetailsByIDPage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.SecretSyncs
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AWSParameterStoreAuthorizeIntegrationPage } from "./AwsParameterStoreAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/AwsParamterStoreConfigurePage.tsx

@@ -30,6 +30,7 @@ import { useWorkspace } from "@app/context";
 import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthById } from "@app/hooks/api/integrationAuth";
 import { useGetIntegrationAuthAwsKmsKeys } from "@app/hooks/api/integrationAuth/queries";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum TabSections {
   Connection = "connection",
@@ -158,6 +159,9 @@ export const AWSParameterStoreConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AWSParameterStoreConfigurePage } from "./AwsParamterStoreConfigurePage";
 
 const AwsParameterStoreConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AWSSecretManagerAuthorizePage } from "./AwsSecretManagerAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/AwsSecretManagerConfigurePage.tsx

@@ -38,6 +38,7 @@ import {
   IntegrationMappingBehavior,
   IntegrationMetadataSyncMode
 } from "@app/hooks/api/integrations/types";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum TabSections {
   Connection = "connection",
@@ -206,6 +207,9 @@ export const AwsSecretManagerConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AwsSecretManagerConfigurePage } from "./AwsSecretManagerConfigurePage";
 
 const AwsSecretManagerConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/AzureAppConfigurationConfigurePage.tsx

@@ -26,6 +26,7 @@ import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthById } from "@app/hooks/api/integrationAuth";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
 import { useGetWorkspaceById } from "@app/hooks/api/workspace";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 const schema = z.object({
   baseUrl: z
@@ -133,6 +134,9 @@ export const AzureAppConfigurationConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureAppConfigurationConfigurePage } from "./AzureAppConfigurationConfigurePage";
 
 const AzureAppConfigurationPageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationOauthCallbackPage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureAppConfigurationOauthCallbackPage } from "./AzureAppConfigurationOauthCallbackPage";
 
 export const AzureAppConfigurationOauthCallbackPageQueryParamsSchema = z.object({
@@ -22,7 +24,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureDevopsAuthorizePage } from "./AzureDevopsAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/AzureDevopsConfigurePage.tsx

@@ -21,6 +21,7 @@ import {
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "@app/hooks/api/workspace";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const AzureDevopsConfigurePage = () => {
   const navigate = useNavigate();
@@ -82,6 +83,9 @@ export const AzureDevopsConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureDevopsConfigurePage } from "./AzureDevopsConfigurePage";
 
 const AzureDevopsConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/route.tsx

@@ -1,6 +1,8 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import z from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureKeyVaultAuthorizePage } from "./AzureKeyVaultAuthorizePage";
 
 const PageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/AzureKeyVaultConfigurePage.tsx

@@ -16,6 +16,7 @@ import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthById } from "@app/hooks/api/integrationAuth";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
 import { useGetWorkspaceById } from "@app/hooks/api/workspace";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 const initialSyncBehaviors = [
   {
@@ -90,6 +91,9 @@ export const AzureKeyVaultConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureKeyVaultConfigurePage } from "./AzureKeyVaultConfigurePage";
 
 const AzureKeyVaultConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/AzureKeyVaultOauthCallbackPage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { AzureKeyVaultOauthCallbackPage } from "./AzureKeyVaultOauthCallback";
 
 export const AzureKeyVaultOauthCallbackQueryParamsSchema = z.object({
@@ -22,7 +24,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/BitbucketConfigurePage.tsx

@@ -23,6 +23,7 @@ import {
   useGetIntegrationAuthBitBucketWorkspaces
 } from "@app/hooks/api";
 import { useGetIntegrationAuthBitBucketEnvironments } from "@app/hooks/api/integrationAuth/queries";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum BitbucketScope {
   Repo = "repo",
@@ -131,6 +132,9 @@ export const BitbucketConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { BitbucketConfigurePage } from "./BitbucketConfigurePage";
 
 const BitbucketConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/BitbucketOauthCallbackPage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { BitbucketOauthCallbackPage } from "./BitbucketOauthCallbackPage";
 
 export const BitbucketOauthCallbackQueryParamsSchema = z.object({
@@ -22,7 +24,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { ChecklyAuthorizePage } from "./ChecklyAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/ChecklyConfigurePage.tsx

@@ -27,6 +27,7 @@ import {
   useGetIntegrationAuthChecklyGroups
 } from "@app/hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "@app/hooks/api/workspace";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum TabSections {
   Connection = "connection",
@@ -115,6 +116,9 @@ export const ChecklyConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { ChecklyConfigurePage } from "./ChecklyConfigurePage";
 
 const ChecklyConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CircleCIAuthorizePage } from "./CircleCIAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx

@@ -21,6 +21,7 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { useWorkspace } from "@app/context";
 import { useCreateIntegration, useGetIntegrationAuthCircleCIOrganizations } from "@app/hooks/api";
 import { CircleCiScope } from "@app/hooks/api/integrationAuth/types";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 const formSchema = z.discriminatedUnion("scope", [
   z.object({
@@ -105,6 +106,9 @@ export const CircleCIConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CircleCIConfigurePage } from "./CircleCIConfigurePage";
 
 const CircleCIConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/Cloud66AuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { Cloud66AuthorizePage } from "./Cloud66AuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/Cloud66ConfigurePage.tsx

@@ -17,6 +17,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const Cloud66ConfigurePage = () => {
   const navigate = useNavigate();
@@ -77,6 +78,9 @@ export const Cloud66ConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { Cloud66ConfigurePage } from "./Cloud66ConfigurePage";
 
 const Cloud66ConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CloudflarePagesAuthorizePage } from "./CloudflarePagesAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/CloudflarePagesConfigurePage.tsx

@@ -20,6 +20,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 const cloudflareEnvironments = [
   { name: "Production", slug: "production" },
@@ -96,6 +97,9 @@ export const CloudflarePagesConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CloudflarePagesConfigurePage } from "./CloudflarePagesConfigurePage";
 
 const CloudflarePagesConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CloudflareWorkersAuthorizePage } from "./CloudflareWorkersAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/CloudflareWorkersConfigurePage.tsx

@@ -12,6 +12,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const CloudflareWorkersConfigurePage = () => {
   const navigate = useNavigate();
@@ -69,6 +70,9 @@ export const CloudflareWorkersConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CloudflareWorkersConfigurePage } from "./CloudflareWorkersConfigurePage";
 
 const CloudflareWorkersConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CodefreshAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CodefreshAuthorizePage } from "./CodefreshAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/CodefreshConfigurePage.tsx

@@ -17,6 +17,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const CodefreshConfigurePage = () => {
   const navigate = useNavigate();
@@ -73,6 +74,9 @@ export const CodefreshConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { CodefreshConfigurePage } from "./CodefreshConfigurePage";
 
 const CodefreshConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { DatabricksAuthorizePage } from "./DatabricksAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/DatabricksConfigurePage.tsx

@@ -26,6 +26,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const DatabricksConfigurePage = () => {
   const navigate = useNavigate();
@@ -89,6 +90,9 @@ export const DatabricksConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { DatabricksConfigurePage } from "./DatabricksConfigurePage";
 
 const DatabricksConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { DigitalOceanAppPlatformAuthorizePage } from "./DigitalOceanAppPlatformAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/DigitalOceanAppPlatformConfigurePage.tsx

@@ -17,6 +17,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const DigitalOceanAppPlatformConfigurePage = () => {
   const navigate = useNavigate();
@@ -74,6 +75,9 @@ export const DigitalOceanAppPlatformConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { DigitalOceanAppPlatformConfigurePage } from "./DigitalOceanAppPlatformConfigurePage";
 
 const DigitalOceanAppPlatformConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { FlyioAuthorizePage } from "./FlyioAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/FlyioConfigurePage.tsx

@@ -27,6 +27,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 export const FlyioConfigurePage = () => {
   const navigate = useNavigate();
@@ -88,6 +89,9 @@ export const FlyioConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { FlyioConfigurePage } from "./FlyioConfigurePage";
 
 const FlyioConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GcpSecretManagerAuthorizePage } from "./GcpSecretManagerAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/GcpSecretManagerConfigurePage.tsx

@@ -33,6 +33,7 @@ import {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthById
 } from "@app/hooks/api/integrationAuth";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum TabSections {
   Connection = "connection",
@@ -153,6 +154,9 @@ export const GcpSecretManagerConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GcpSecretManagerConfigurePage } from "./GcpSecretManagerConfigurePage";
 
 const GcpConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GcpSecretManagerOauthCallbackPage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GcpSecretManagerOauthCallbackPage } from "./GcpSecretManagerOauthCallbackPage";
 
 export const GcpSecretManagerOAuthCallbackPageQueryParamsSchema = z.object({
@@ -22,7 +24,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GithubAuthorizePage } from "./GithubAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GithubConfigurePage/GithubConfigurePage.tsx

@@ -45,6 +45,7 @@ import {
   useGetIntegrationAuthGithubEnvs,
   useGetIntegrationAuthGithubOrgs
 } from "@app/hooks/api";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 enum TabSections {
   Connection = "connection",
@@ -269,6 +270,9 @@ export const GithubConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {

frontend/src/pages/secret-manager/integrations/GithubConfigurePage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GithubConfigurePage } from "./GithubConfigurePage";
 
 const GithubConfigurePageQueryParamsSchema = z.object({
@@ -21,7 +23,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx

@@ -2,6 +2,8 @@ import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GithubOauthCallbackPage } from "./GithubOauthCallbackPage";
 
 export const GithubOAuthCallbackPageQueryParamsSchema = z.object({
@@ -23,7 +25,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
+import { IntegrationsListPageTabs } from "@app/types/integrations";
+
 import { GitlabAuthorizePage } from "./GitlabAuthorizePage";
 
 export const Route = createFileRoute(
@@ -14,7 +16,10 @@ export const Route = createFileRoute(
           label: "Integrations",
           link: linkOptions({
             to: "/secret-manager/$projectId/integrations",
-            params
+            params,
+            search: {
+              selectedTab: IntegrationsListPageTabs.NativeIntegrations
+            }
           })
         },
         {

frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/GitlabConfigurePage.tsx

@@ -35,6 +35,7 @@ import {
   useGetIntegrationAuthTeams
 } from "@app/hooks/api/integrationAuth";
 import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";
+import { IntegrationsListPageTabs } from "@app/types/integrations";
 
 const gitLabEntities = [
   { name: "Individual", value: "individual" },
@@ -177,6 +178,9 @@ export const GitlabConfigurePage = () => {
         to: "/secret-manager/$projectId/integrations",
         params: {
           projectId: currentWorkspace.id
+        },
+        search: {
+          selectedTab: IntegrationsListPageTabs.NativeIntegrations
         }
       });
     } catch (err) {