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

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 }