Merge pull request #3688 from Infisical/daniel/super-admin-view-orgs

feat(instance-management): organizations overview and control

frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { AuthenticationPageForm } from "./components";
+
+export const AuthenticationPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Authentication"
+            description="Manage authentication settings for your Infisical instance."
+          />
+          <AuthenticationPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/AuthenticationPage/components/AuthenticationPageForm.tsx

@@ -20,7 +20,7 @@ const formSchema = z.object({
 
 type TAuthForm = z.infer<typeof formSchema>;
 
-export const AuthPanel = () => {
+export const AuthenticationPageForm = () => {
   const { config } = useServerConfig();
   const { enabledLoginMethods } = config;
   const { mutateAsync: updateServerConfig } = useUpdateServerConfig();

frontend/src/pages/admin/AuthenticationPage/components/index.ts

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

frontend/src/pages/admin/AuthenticationPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { AuthenticationPage } from "./AuthenticationPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/authentication"
+)({
+  component: AuthenticationPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Authentication",
+          link: linkOptions({
+            to: "/admin/authentication"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/CachingPage/CachingPage.tsx

@@ -0,0 +1,24 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { CachingPageForm } from "./components";
+
+export const CachingPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title="Caching" description="Manage caching for your Infisical instance." />
+          <CachingPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/CachingPage/components/CachingPageForm.tsx

@@ -10,7 +10,7 @@ import { useInvalidateCache } from "@app/hooks/api";
 import { useGetInvalidatingCacheStatus } from "@app/hooks/api/admin/queries";
 import { CacheType } from "@app/hooks/api/admin/types";
 
-export const CachingPanel = () => {
+export const CachingPageForm = () => {
   const { mutateAsync: invalidateCache } = useInvalidateCache();
   const { user } = useUser();
 

frontend/src/pages/admin/CachingPage/components/index.ts

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

frontend/src/pages/admin/CachingPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { CachingPage } from "./CachingPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/caching"
+)({
+  component: CachingPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Caching",
+          link: linkOptions({
+            to: "/admin/caching"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { EncryptionPageForm } from "./components";
+
+export const EncryptionPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Encryption"
+            description="Manage encryption settings for your Infisical instance."
+          />
+          <EncryptionPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/EncryptionPage/components/EncryptionPageForm.tsx

@@ -8,11 +8,11 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Select, SelectItem } from "@app/components/v2";
 import { useSubscription } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useUpdateServerEncryptionStrategy } from "@app/hooks/api";
 import {
-  RootKeyEncryptionStrategy,
-  TGetServerRootKmsEncryptionDetails
-} from "@app/hooks/api/admin/types";
+  useGetServerRootKmsEncryptionDetails,
+  useUpdateServerEncryptionStrategy
+} from "@app/hooks/api";
+import { RootKeyEncryptionStrategy } from "@app/hooks/api/admin/types";
 
 const formSchema = z.object({
   encryptionStrategy: z.nativeEnum(RootKeyEncryptionStrategy)
@@ -25,11 +25,9 @@ const strategies: Record<RootKeyEncryptionStrategy, string> = {
 
 type TForm = z.infer<typeof formSchema>;
 
-type Props = {
-  rootKmsDetails?: TGetServerRootKmsEncryptionDetails;
-};
+export const EncryptionPageForm = () => {
+  const { data: rootKmsDetails } = useGetServerRootKmsEncryptionDetails();
 
-export const EncryptionPanel = ({ rootKmsDetails }: Props) => {
   const { mutateAsync: updateEncryptionStrategy } = useUpdateServerEncryptionStrategy();
   const { subscription } = useSubscription();
 

frontend/src/pages/admin/EncryptionPage/components/index.ts

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

frontend/src/pages/admin/EncryptionPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { EncryptionPage } from "./EncryptionPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/encryption"
+)({
+  component: EncryptionPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Encryption",
+          link: linkOptions({
+            to: "/admin/encryption"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/GeneralPage/GeneralPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { GeneralPageForm } from "./components";
+
+export const GeneralPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="General"
+            description="Manage general settings for your Infisical instance."
+          />
+          <GeneralPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/GeneralPage/components/GeneralPageForm.tsx

@@ -0,0 +1,309 @@
+import { Controller, useForm } from "react-hook-form";
+import { faAt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Select,
+  SelectClear,
+  SelectItem,
+  Switch,
+  TextArea
+} from "@app/components/v2";
+import { useServerConfig } from "@app/context";
+import { useGetOrganizations, useUpdateServerConfig } from "@app/hooks/api";
+
+enum SignUpModes {
+  Disabled = "disabled",
+  Anyone = "anyone"
+}
+
+const formSchema = z.object({
+  signUpMode: z.nativeEnum(SignUpModes),
+  allowedSignUpDomain: z.string().optional().nullable(),
+  trustSamlEmails: z.boolean(),
+  trustLdapEmails: z.boolean(),
+  trustOidcEmails: z.boolean(),
+  defaultAuthOrgId: z.string(),
+  authConsentContent: z.string().optional().default(""),
+  pageFrameContent: z.string().optional().default("")
+});
+
+type TDashboardForm = z.infer<typeof formSchema>;
+
+export const GeneralPageForm = () => {
+  const data = useServerConfig();
+  const { config } = data;
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TDashboardForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      // eslint-disable-next-line
+      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
+      allowedSignUpDomain: config.allowedSignUpDomain,
+      trustSamlEmails: config.trustSamlEmails,
+      trustLdapEmails: config.trustLdapEmails,
+      trustOidcEmails: config.trustOidcEmails,
+      defaultAuthOrgId: config.defaultAuthOrgId ?? "",
+      authConsentContent: config.authConsentContent ?? "",
+      pageFrameContent: config.pageFrameContent ?? ""
+    }
+  });
+
+  const signUpMode = watch("signUpMode");
+  const defaultAuthOrgId = watch("defaultAuthOrgId");
+
+  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
+
+  const organizations = useGetOrganizations();
+
+  const onFormSubmit = async (formData: TDashboardForm) => {
+    try {
+      const {
+        allowedSignUpDomain,
+        trustSamlEmails,
+        trustLdapEmails,
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
+      } = formData;
+
+      await updateServerConfig({
+        defaultAuthOrgId: defaultAuthOrgId || null,
+        allowSignUp: signUpMode !== SignUpModes.Disabled,
+        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
+        trustSamlEmails,
+        trustLdapEmails,
+        trustOidcEmails,
+        authConsentContent,
+        pageFrameContent
+      });
+      createNotification({
+        text: "Successfully changed sign up setting.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to update sign up setting."
+      });
+    }
+  };
+
+  return (
+    <form
+      className="space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Allow user signups</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select if you want users to be able to signup freely into your Infisical instance.
+        </div>
+        <Controller
+          control={control}
+          name="signUpMode"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                className="w-full bg-mineshaft-700"
+                dropdownContainerClassName="bg-mineshaft-800"
+                defaultValue={field.value}
+                onValueChange={(e) => onChange(e)}
+                {...field}
+              >
+                <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
+                <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
+              </Select>
+            </FormControl>
+          )}
+        />
+      </div>
+      {signUpMode === "anyone" && (
+        <div className="flex flex-col justify-start">
+          <div className="mb-4 text-xl font-semibold text-mineshaft-100">
+            Restrict signup by email domain(s)
+          </div>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedSignUpDomain"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Leave blank to allow any email domains"
+                className="w-72"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input
+                  {...field}
+                  value={field.value || ""}
+                  placeholder="gmail.com, aws.com, redhat.com"
+                  leftIcon={<FontAwesomeIcon icon={faAt} />}
+                />
+              </FormControl>
+            )}
+          />
+        </div>
+      )}
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Default organization</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select the default organization you want to set for SAML/LDAP/OIDC/Github logins. When
+          selected, user logins will be automatically scoped to the selected organization.
+        </div>
+        <Controller
+          control={control}
+          name="defaultAuthOrgId"
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl className="max-w-sm" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                placeholder="Allow all organizations"
+                className="w-full bg-mineshaft-700"
+                dropdownContainerClassName="bg-mineshaft-800"
+                defaultValue={field.value ?? " "}
+                onValueChange={(e) => onChange(e)}
+                {...field}
+              >
+                <SelectClear
+                  selectValue={defaultAuthOrgId}
+                  onClear={() => {
+                    onChange("");
+                  }}
+                >
+                  Allow all organizations
+                </SelectClear>
+                {organizations.data?.map((org) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    {org.name}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+      </div>
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Trust emails</div>
+        <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
+          Select if you want Infisical to trust external emails from SAML/LDAP/OIDC identity
+          providers. If set to false, then Infisical will prompt SAML/LDAP/OIDC provisioned users to
+          verify their email upon their first login.
+        </div>
+        <Controller
+          control={control}
+          name="trustSamlEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-saml-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust SAML emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+        <Controller
+          control={control}
+          name="trustLdapEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-ldap-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust LDAP emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+        <Controller
+          control={control}
+          name="trustOidcEmails"
+          render={({ field, fieldState: { error } }) => {
+            return (
+              <FormControl isError={Boolean(error)} errorText={error?.message}>
+                <Switch
+                  id="trust-oidc-emails"
+                  onCheckedChange={(value) => field.onChange(value)}
+                  isChecked={field.value}
+                >
+                  <p className="w-full">Trust OIDC emails</p>
+                </Switch>
+              </FormControl>
+            );
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col justify-start">
+        <div className="mb-2 text-xl font-semibold text-mineshaft-100">Notices</div>
+        <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
+          Configure system-wide notification banners and security messages. These settings control
+          the text displayed to users during authentication and throughout their session
+        </div>
+        <Controller
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Auth Consent Content"
+              tooltipText="Formatting supported: HTML, Markdown, Plain text"
+            >
+              <TextArea
+                placeholder="**Auth Consent Message**"
+                {...field}
+                rows={3}
+                className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="authConsentContent"
+        />
+        <Controller
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Page Frame Content"
+              tooltipText="Formatting supported: HTML, Markdown, Plain text"
+            >
+              <TextArea
+                placeholder='<div style="background-color: red">TOP SECRET</div>'
+                {...field}
+                rows={3}
+                className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="pageFrameContent"
+        />
+      </div>
+      <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting || !isDirty}>
+        Save
+      </Button>
+    </form>
+  );
+};

frontend/src/pages/admin/GeneralPage/components/index.ts

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

frontend/src/pages/admin/GeneralPage/route.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { GeneralPage } from "./GeneralPage";
+
+export const Route = createFileRoute("/_authenticate/_inject-org-details/admin/_admin-layout/")({
+  component: GeneralPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "General",
+          link: linkOptions({
+            to: "/admin"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { IntegrationsPageForm } from "./components";
+
+export const IntegrationsPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Integrations"
+            description="Manage integrations for your Infisical instance."
+          />
+          <IntegrationsPageForm />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/IntegrationsPage/components/IntegrationsPageForm.tsx

@@ -3,7 +3,7 @@ import { useGetAdminIntegrationsConfig } from "@app/hooks/api";
 import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
 import { SlackIntegrationForm } from "./SlackIntegrationForm";
 
-export const IntegrationPanel = () => {
+export const IntegrationsPageForm = () => {
   const { data: adminIntegrationsConfig } = useGetAdminIntegrationsConfig();
 
   return (

frontend/src/pages/admin/IntegrationsPage/components/index.ts

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

frontend/src/pages/admin/IntegrationsPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { IntegrationsPage } from "./IntegrationsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/integrations"
+)({
+  component: IntegrationsPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/admin/integrations"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/MachineIdentitiesResourcesPage/MachineIdentitiesResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { MachineIdentitiesTable } from "./components";
+
+export const MachineIdentitiesResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Machine Identities"
+            description="Manage all machine identities within your Infisical instance."
+          />
+          <MachineIdentitiesTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/MachineIdentitiesResourcesPage/components/MachineIdentitiesTable.tsx

@@ -120,7 +120,7 @@ const IdentityPanelTable = ({
           <Button
             className="mt-4 py-3 text-sm"
             isFullWidth
-            variant="star"
+            variant="outline_bg"
             isLoading={isFetchingNextPage}
             isDisabled={isFetchingNextPage || !hasNextPage}
             onClick={() => fetchNextPage()}
@@ -133,7 +133,7 @@ const IdentityPanelTable = ({
   );
 };
 
-export const IdentityPanel = () => {
+export const MachineIdentitiesTable = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeServerAdmin"
   ] as const);
@@ -161,9 +161,6 @@ export const IdentityPanel = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4">
-        <p className="text-xl font-semibold text-mineshaft-100">Identities</p>
-      </div>
       <IdentityPanelTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.removeServerAdmin.isOpen}

frontend/src/pages/admin/MachineIdentitiesResourcesPage/components/index.tsx

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

frontend/src/pages/admin/MachineIdentitiesResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { MachineIdentitiesResourcesPage } from "./MachineIdentitiesResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/machine-identities"
+)({
+  component: MachineIdentitiesResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Machine Identities",
+          link: linkOptions({
+            to: "/admin/resources/machine-identities"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/OrganizationResourcesPage/OrganizationResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { OrganizationsTable } from "./components";
+
+export const OrganizationResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Organizations"
+            description="Manage all organizations within your Infisical instance."
+          />
+          <OrganizationsTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/OrganizationResourcesPage/components/OrganizationsTable.tsx

@@ -0,0 +1,396 @@
+import { useState } from "react";
+import {
+  faBuilding,
+  faCircleQuestion,
+  faEllipsis,
+  faMagnifyingGlass
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Badge,
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { useDebounce, usePopUp } from "@app/hooks";
+import {
+  useAdminDeleteOrganization,
+  useAdminDeleteOrganizationMembership,
+  useAdminDeleteUser,
+  useAdminGetOrganizations
+} from "@app/hooks/api";
+import { OrganizationWithProjects } from "@app/hooks/api/admin/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const ViewMembersModalContent = ({
+  popUp,
+  handlePopUpOpen
+}: {
+  popUp: UsePopUpState<["viewMembers"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>,
+    data?: {
+      username?: string;
+      membershipId?: string;
+      userId?: string;
+      orgName?: string;
+      orgId?: string;
+      organization?: OrganizationWithProjects;
+    }
+  ) => void;
+}) => {
+  const organization = popUp.viewMembers?.data?.organization as OrganizationWithProjects;
+
+  return (
+    <div className="space-y-2">
+      {organization?.members?.map((member) => (
+        <div className="flex items-center justify-between gap-2 rounded-md bg-mineshaft-700 px-4 py-2">
+          <div>
+            <div className="flex items-center gap-2">
+              <p className="text-xs text-mineshaft-100">
+                <div>
+                  {member.user.firstName ? (
+                    <div>
+                      {member.user.firstName} {member.user.lastName}
+                    </div>
+                  ) : (
+                    <p className="text-mineshaft-400">Not set</p>
+                  )}
+                </div>
+                <div className="flex gap-2 opacity-80">
+                  <div>{member.user.username || member.user.email}</div>
+                  <Badge variant="primary">
+                    <div className="flex items-center gap-1">
+                      <span className="capitalize">{member.role.replace("-", " ")}</span>
+                      {Boolean(member.roleId) && (
+                        <Tooltip content="This member has a custom role assigned.">
+                          <FontAwesomeIcon icon={faCircleQuestion} className="text-xs" />
+                        </Tooltip>
+                      )}
+                    </div>
+                  </Badge>
+                </div>
+              </p>
+            </div>
+          </div>
+          <div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <FontAwesomeIcon
+                  icon={faEllipsis}
+                  className="cursor-pointer text-sm text-mineshaft-400 transition-all hover:text-primary-500"
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="p-1">
+                <DropdownMenuItem
+                  onClick={() =>
+                    handlePopUpOpen("deleteOrganizationMembership", {
+                      membershipId: member.membershipId,
+                      orgId: organization.id,
+                      username: member.user.username,
+                      orgName: organization.name
+                    })
+                  }
+                >
+                  Remove From Organization
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handlePopUpOpen("deleteUser", { userId: member.user.id })}
+                >
+                  Delete User
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ViewMembersModal = ({
+  isOpen,
+  onOpenChange,
+  popUp,
+  handlePopUpOpen
+}: {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  popUp: UsePopUpState<["viewMembers", "deleteOrganizationMembership", "deleteUser"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteOrganizationMembership", "deleteUser"]>
+  ) => void;
+}) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+        }}
+        title="Organization Members"
+        subTitle="View the members of the organization."
+      >
+        <ViewMembersModalContent popUp={popUp} handlePopUpOpen={handlePopUpOpen} />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const OrganizationsPanelTable = ({
+  popUp,
+  handlePopUpOpen,
+  handlePopUpToggle
+}: {
+  popUp: UsePopUpState<
+    ["deleteOrganization", "viewMembers", "deleteOrganizationMembership", "deleteUser"]
+  >;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["deleteOrganization", "viewMembers", "deleteOrganizationMembership", "deleteUser"]
+    >,
+    data?: {
+      orgName?: string;
+      orgId?: string;
+      message?: string;
+      organization?: OrganizationWithProjects;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["deleteOrganization", "viewMembers"]>,
+    isOpen?: boolean
+  ) => void;
+}) => {
+  const [searchOrganizationsFilter, setSearchOrganizationsFilter] = useState("");
+  const [debouncedSearchTerm] = useDebounce(searchOrganizationsFilter, 500);
+
+  const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useAdminGetOrganizations({
+      limit: 20,
+      searchTerm: debouncedSearchTerm
+    });
+
+  const isEmpty = !isPending && !data?.pages?.[0].length;
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={searchOrganizationsFilter}
+          onChange={(e) => setSearchOrganizationsFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search organizations..."
+          className="flex-1"
+        />
+      </div>
+      <div className="mt-4">
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th className="w-5/12">Name</Th>
+                <Th className="w-5/12">Members</Th>
+                <Th className="w-5/12">Projects</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={4} innerKey="organizations" />}
+              {!isPending &&
+                data?.pages?.map((orgs) =>
+                  orgs.map((org) => {
+                    return (
+                      <Tr key={`org-${org.id}`} className="w-full">
+                        <Td className="w-5/12">
+                          {org.name ? (
+                            org.name
+                          ) : (
+                            <span className="text-mineshaft-400">Not set</span>
+                          )}
+                        </Td>
+                        <Td className="w-5/12">
+                          {org.members.length} {org.members.length === 1 ? "member" : "members"}
+                          <Button
+                            variant="outline_bg"
+                            size="xs"
+                            className="ml-2"
+                            onClick={() => handlePopUpOpen("viewMembers", { organization: org })}
+                          >
+                            View Members
+                          </Button>
+                        </Td>
+                        <Td className="w-5/12">
+                          {org.projects.length} {org.projects.length === 1 ? "project" : "projects"}
+                        </Td>
+                        <Td>
+                          <div className="flex justify-end">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild className="rounded-lg">
+                                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                                  <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                                </div>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="start" className="p-1">
+                                <DropdownMenuItem
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("deleteOrganization", {
+                                      orgId: org.id,
+                                      orgName: org.name
+                                    });
+                                  }}
+                                >
+                                  Delete Organization
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </Td>
+                      </Tr>
+                    );
+                  })
+                )}
+            </TBody>
+          </Table>
+          {!isPending && isEmpty && <EmptyState title="No organizations found" icon={faBuilding} />}
+        </TableContainer>
+        {!isEmpty && (
+          <Button
+            className="mt-4 py-3 text-sm"
+            isFullWidth
+            variant="outline_bg"
+            isLoading={isFetchingNextPage}
+            isDisabled={isFetchingNextPage || !hasNextPage}
+            onClick={() => fetchNextPage()}
+          >
+            {hasNextPage ? "Load More" : "End of list"}
+          </Button>
+        )}
+      </div>
+      <ViewMembersModal
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        isOpen={popUp.viewMembers.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("viewMembers", isOpen)}
+      />
+    </>
+  );
+};
+
+export const OrganizationsTable = () => {
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "deleteOrganization",
+    "deleteOrganizationMembership",
+    "deleteUser",
+    "viewMembers"
+  ] as const);
+
+  const { mutateAsync: deleteOrganization } = useAdminDeleteOrganization();
+  const { mutateAsync: deleteOrganizationMembership } = useAdminDeleteOrganizationMembership();
+  const { mutateAsync: deleteUser } = useAdminDeleteUser();
+
+  const handleDeleteOrganization = async () => {
+    const { orgId } = popUp?.deleteOrganization?.data as { orgId: string };
+
+    await deleteOrganization(orgId);
+    createNotification({
+      type: "success",
+      text: "Successfully deleted organization"
+    });
+
+    handlePopUpClose("deleteOrganization");
+  };
+
+  const handleDeleteOrganizationMembership = async () => {
+    const { orgId, membershipId } = popUp?.deleteOrganizationMembership?.data as {
+      orgId: string;
+      membershipId: string;
+    };
+
+    if (!orgId || !membershipId) {
+      return;
+    }
+
+    await deleteOrganizationMembership({ organizationId: orgId, membershipId });
+    createNotification({
+      type: "success",
+      text: "Successfully removed user from organization"
+    });
+
+    handlePopUpClose("viewMembers");
+    handlePopUpClose("deleteOrganizationMembership");
+  };
+
+  const handleDeleteUser = async () => {
+    const { userId } = popUp?.deleteUser?.data as { userId: string };
+
+    if (!userId) {
+      return;
+    }
+
+    await deleteUser(userId);
+    createNotification({
+      type: "success",
+      text: "Successfully deleted user"
+    });
+
+    handlePopUpClose("viewMembers");
+    handlePopUpClose("deleteUser");
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <OrganizationsPanelTable
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteOrganization.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to delete organization ${
+          (popUp?.deleteOrganization?.data as { orgName: string })?.orgName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrganization", isOpen)}
+        onDeleteApproved={handleDeleteOrganization}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteOrganizationMembership.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to remove ${
+          (popUp?.deleteOrganizationMembership?.data as { username: string })?.username || ""
+        } from organization ${
+          (popUp?.deleteOrganizationMembership?.data as { orgName: string })?.orgName || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrganizationMembership", isOpen)}
+        onDeleteApproved={handleDeleteOrganizationMembership}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteUser.isOpen}
+        deleteKey="delete"
+        title={`Are you sure you want to delete user ${
+          (popUp?.deleteUser?.data as { username: string })?.username || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteUser", isOpen)}
+        onDeleteApproved={handleDeleteUser}
+      />
+    </div>
+  );
+};

frontend/src/pages/admin/OrganizationResourcesPage/components/index.tsx

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

frontend/src/pages/admin/OrganizationResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { OrganizationResourcesPage } from "./OrganizationResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/organizations"
+)({
+  component: OrganizationResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "Organizations",
+          link: linkOptions({
+            to: "/admin/resources/organizations"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -1,424 +0,0 @@
-import { Helmet } from "react-helmet";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { faAt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  ContentLoader,
-  FormControl,
-  Input,
-  Select,
-  SelectClear,
-  SelectItem,
-  Switch,
-  Tab,
-  TabList,
-  TabPanel,
-  Tabs,
-  TextArea
-} from "@app/components/v2";
-import { useServerConfig, useUser } from "@app/context";
-import {
-  useGetOrganizations,
-  useGetServerRootKmsEncryptionDetails,
-  useUpdateServerConfig
-} from "@app/hooks/api";
-import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
-
-import { AuthPanel } from "./components/AuthPanel";
-import { CachingPanel } from "./components/CachingPanel";
-import { EncryptionPanel } from "./components/EncryptionPanel";
-import { IntegrationPanel } from "./components/IntegrationPanel";
-import { UserPanel } from "./components/UserPanel";
-
-enum TabSections {
-  Settings = "settings",
-  Encryption = "encryption",
-  Auth = "auth",
-  Integrations = "integrations",
-  Users = "users",
-  Identities = "identities",
-  Kmip = "kmip",
-  Caching = "caching"
-}
-
-enum SignUpModes {
-  Disabled = "disabled",
-  Anyone = "anyone"
-}
-
-const formSchema = z.object({
-  signUpMode: z.nativeEnum(SignUpModes),
-  allowedSignUpDomain: z.string().optional().nullable(),
-  trustSamlEmails: z.boolean(),
-  trustLdapEmails: z.boolean(),
-  trustOidcEmails: z.boolean(),
-  defaultAuthOrgId: z.string(),
-  authConsentContent: z.string().optional().default(""),
-  pageFrameContent: z.string().optional().default("")
-});
-
-type TDashboardForm = z.infer<typeof formSchema>;
-
-export const OverviewPage = () => {
-  const { t } = useTranslation();
-  const data = useServerConfig();
-  const { data: serverRootKmsDetails } = useGetServerRootKmsEncryptionDetails();
-  const { config } = data;
-
-  const {
-    control,
-    handleSubmit,
-    watch,
-    formState: { isSubmitting, isDirty }
-  } = useForm<TDashboardForm>({
-    resolver: zodResolver(formSchema),
-    values: {
-      // eslint-disable-next-line
-      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
-      allowedSignUpDomain: config.allowedSignUpDomain,
-      trustSamlEmails: config.trustSamlEmails,
-      trustLdapEmails: config.trustLdapEmails,
-      trustOidcEmails: config.trustOidcEmails,
-      defaultAuthOrgId: config.defaultAuthOrgId ?? "",
-      authConsentContent: config.authConsentContent ?? "",
-      pageFrameContent: config.pageFrameContent ?? ""
-    }
-  });
-
-  const signUpMode = watch("signUpMode");
-  const defaultAuthOrgId = watch("defaultAuthOrgId");
-
-  const { user } = useUser();
-  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
-
-  const organizations = useGetOrganizations();
-
-  const isNotAllowed = !user?.superAdmin;
-  const onFormSubmit = async (formData: TDashboardForm) => {
-    try {
-      const {
-        allowedSignUpDomain,
-        trustSamlEmails,
-        trustLdapEmails,
-        trustOidcEmails,
-        authConsentContent,
-        pageFrameContent
-      } = formData;
-
-      await updateServerConfig({
-        defaultAuthOrgId: defaultAuthOrgId || null,
-        allowSignUp: signUpMode !== SignUpModes.Disabled,
-        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null,
-        trustSamlEmails,
-        trustLdapEmails,
-        trustOidcEmails,
-        authConsentContent,
-        pageFrameContent
-      });
-      createNotification({
-        text: "Successfully changed sign up setting.",
-        type: "success"
-      });
-    } catch (e) {
-      console.error(e);
-      createNotification({
-        type: "error",
-        text: "Failed to update sign up setting."
-      });
-    }
-  };
-
-  return (
-    <>
-      <Helmet>
-        <title>{t("common.head-title", { title: t("admin.dashboard") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("admin.dashboard.og-title") ?? ""} />
-        <meta name="og:description" content={t("admin.dashboard.og-description") ?? ""} />
-      </Helmet>
-      <div className="h-full">
-        <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
-          <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
-            <div className="mb-8 flex flex-col items-start justify-between text-xl">
-              <h1 className="text-3xl font-semibold">Server Admin Console</h1>
-              <p className="text-base text-bunker-300">
-                Manage your instance level configurations.
-              </p>
-            </div>
-          </div>
-          {isNotAllowed ? (
-            <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
-          ) : (
-            <div>
-              <Tabs defaultValue={TabSections.Settings}>
-                <TabList>
-                  <div className="flex w-full flex-row border-b border-mineshaft-600">
-                    <Tab value={TabSections.Settings}>General</Tab>
-                    <Tab value={TabSections.Encryption}>Encryption</Tab>
-                    <Tab value={TabSections.Auth}>Authentication</Tab>
-                    <Tab value={TabSections.Integrations}>Integrations</Tab>
-                    <Tab value={TabSections.Users}>User Identities</Tab>
-                    <Tab value={TabSections.Identities}>Machine Identities</Tab>
-                    <Tab value={TabSections.Caching}>Caching</Tab>
-                  </div>
-                </TabList>
-                <TabPanel value={TabSections.Settings}>
-                  <form
-                    className="mb-6 space-y-8 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-                    onSubmit={handleSubmit(onFormSubmit)}
-                  >
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Allow user signups
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select if you want users to be able to signup freely into your Infisical
-                        instance.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="signUpMode"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                          <FormControl
-                            className="max-w-sm"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                          >
-                            <Select
-                              className="w-full bg-mineshaft-700"
-                              dropdownContainerClassName="bg-mineshaft-800"
-                              defaultValue={field.value}
-                              onValueChange={(e) => onChange(e)}
-                              {...field}
-                            >
-                              <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
-                              <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
-                            </Select>
-                          </FormControl>
-                        )}
-                      />
-                    </div>
-                    {signUpMode === "anyone" && (
-                      <div className="flex flex-col justify-start">
-                        <div className="mb-4 text-xl font-semibold text-mineshaft-100">
-                          Restrict signup by email domain(s)
-                        </div>
-                        <Controller
-                          control={control}
-                          defaultValue=""
-                          name="allowedSignUpDomain"
-                          render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                              label="Leave blank to allow any email domains"
-                              className="w-72"
-                              isError={Boolean(error)}
-                              errorText={error?.message}
-                            >
-                              <Input
-                                {...field}
-                                value={field.value || ""}
-                                placeholder="gmail.com, aws.com, redhat.com"
-                                leftIcon={<FontAwesomeIcon icon={faAt} />}
-                              />
-                            </FormControl>
-                          )}
-                        />
-                      </div>
-                    )}
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Default organization
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select the default organization you want to set for SAML/LDAP/OIDC/Github
-                        logins. When selected, user logins will be automatically scoped to the
-                        selected organization.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="defaultAuthOrgId"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                          <FormControl
-                            className="max-w-sm"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                          >
-                            <Select
-                              placeholder="Allow all organizations"
-                              className="w-full bg-mineshaft-700"
-                              dropdownContainerClassName="bg-mineshaft-800"
-                              defaultValue={field.value ?? " "}
-                              onValueChange={(e) => onChange(e)}
-                              {...field}
-                            >
-                              <SelectClear
-                                selectValue={defaultAuthOrgId}
-                                onClear={() => {
-                                  onChange("");
-                                }}
-                              >
-                                Allow all organizations
-                              </SelectClear>
-                              {organizations.data?.map((org) => (
-                                <SelectItem key={org.id} value={org.id}>
-                                  {org.name}
-                                </SelectItem>
-                              ))}
-                            </Select>
-                          </FormControl>
-                        )}
-                      />
-                    </div>
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">
-                        Trust emails
-                      </div>
-                      <div className="mb-4 max-w-sm text-sm text-mineshaft-400">
-                        Select if you want Infisical to trust external emails from SAML/LDAP/OIDC
-                        identity providers. If set to false, then Infisical will prompt
-                        SAML/LDAP/OIDC provisioned users to verify their email upon their first
-                        login.
-                      </div>
-                      <Controller
-                        control={control}
-                        name="trustSamlEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-saml-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust SAML emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                      <Controller
-                        control={control}
-                        name="trustLdapEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-ldap-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust LDAP emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                      <Controller
-                        control={control}
-                        name="trustOidcEmails"
-                        render={({ field, fieldState: { error } }) => {
-                          return (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                              <Switch
-                                id="trust-oidc-emails"
-                                onCheckedChange={(value) => field.onChange(value)}
-                                isChecked={field.value}
-                              >
-                                <p className="w-full">Trust OIDC emails</p>
-                              </Switch>
-                            </FormControl>
-                          );
-                        }}
-                      />
-                    </div>
-
-                    <div className="flex flex-col justify-start">
-                      <div className="mb-2 text-xl font-semibold text-mineshaft-100">Notices</div>
-                      <div className="mb-4 max-w-lg text-sm text-mineshaft-400">
-                        Configure system-wide notification banners and security messages. These
-                        settings control the text displayed to users during authentication and
-                        throughout their session
-                      </div>
-                      <Controller
-                        render={({ field, fieldState: { error } }) => (
-                          <FormControl
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            label="Auth Consent Content"
-                            tooltipText="Formatting supported: HTML, Markdown, Plain text"
-                          >
-                            <TextArea
-                              placeholder="**Auth Consent Message**"
-                              {...field}
-                              rows={3}
-                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
-                            />
-                          </FormControl>
-                        )}
-                        control={control}
-                        name="authConsentContent"
-                      />
-                      <Controller
-                        render={({ field, fieldState: { error } }) => (
-                          <FormControl
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                            label="Page Frame Content"
-                            tooltipText="Formatting supported: HTML, Markdown, Plain text"
-                          >
-                            <TextArea
-                              placeholder='<div style="background-color: red">TOP SECRET</div>'
-                              {...field}
-                              rows={3}
-                              className="thin-scrollbar h-48 max-w-lg !resize-none bg-mineshaft-800"
-                            />
-                          </FormControl>
-                        )}
-                        control={control}
-                        name="pageFrameContent"
-                      />
-                    </div>
-                    <Button
-                      type="submit"
-                      isLoading={isSubmitting}
-                      isDisabled={isSubmitting || !isDirty}
-                    >
-                      Save
-                    </Button>
-                  </form>
-                </TabPanel>
-                <TabPanel value={TabSections.Encryption}>
-                  <EncryptionPanel rootKmsDetails={serverRootKmsDetails} />
-                </TabPanel>
-                <TabPanel value={TabSections.Auth}>
-                  <AuthPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Integrations}>
-                  <IntegrationPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Users}>
-                  <UserPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Identities}>
-                  <IdentityPanel />
-                </TabPanel>
-                <TabPanel value={TabSections.Caching}>
-                  <CachingPanel />
-                </TabPanel>
-              </Tabs>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/pages/admin/OverviewPage/route.tsx

@@ -1,7 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-import { OverviewPage } from "./OverviewPage";
-
-export const Route = createFileRoute("/_authenticate/_inject-org-details/admin/_admin-layout/")({
-  component: OverviewPage
-});

frontend/src/pages/admin/UserIdentitiesResourcesPage/UserIdentitiesResourcesPage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+
+import { UserIdentitiesTable } from "./components";
+
+export const UserIdentitiesResourcesPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Helmet>
+        <title>{t("common.head-title", { title: "Admin" })}</title>
+      </Helmet>
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="User Identities"
+            description="Manage all user identities within your Infisical instance."
+          />
+          <UserIdentitiesTable />
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/admin/UserIdentitiesResourcesPage/components/UserIdentitiesTable.tsx

@@ -213,7 +213,7 @@ const UserPanelTable = ({
           <Button
             className="mt-4 py-3 text-sm"
             isFullWidth
-            variant="star"
+            variant="outline_bg"
             isLoading={isFetchingNextPage}
             isDisabled={isFetchingNextPage || !hasNextPage}
             onClick={() => fetchNextPage()}
@@ -226,7 +226,7 @@ const UserPanelTable = ({
   );
 };
 
-export const UserPanel = () => {
+export const UserIdentitiesTable = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "removeUser",
     "upgradePlan",
@@ -297,9 +297,6 @@ export const UserPanel = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4">
-        <p className="text-xl font-semibold text-mineshaft-100">Users</p>
-      </div>
       <UserPanelTable handlePopUpOpen={handlePopUpOpen} />
       <DeleteActionModal
         isOpen={popUp.removeUser.isOpen}

frontend/src/pages/admin/UserIdentitiesResourcesPage/components/index.tsx

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

frontend/src/pages/admin/UserIdentitiesResourcesPage/route.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
+
+import { UserIdentitiesResourcesPage } from "./UserIdentitiesResourcesPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/admin/_admin-layout/resources/user-identities"
+)({
+  component: UserIdentitiesResourcesPage,
+  beforeLoad: async () => {
+    return {
+      breadcrumbs: [
+        {
+          label: "Admin",
+          link: linkOptions({ to: "/admin" })
+        },
+        {
+          label: "User Identities",
+          link: linkOptions({
+            to: "/admin/resources/user-identities"
+          })
+        }
+      ]
+    };
+  }
+});

frontend/src/pages/kms/OverviewPage/OverviewPage.tsx

@@ -18,7 +18,7 @@ export const OverviewPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
-            title="OverviewPage"
+            title="Overview Page"
             description="Manage keys and perform cryptographic operations."
           />
           <ProjectPermissionCan