Merge branch 'main' into ENG-3506-LDAP

2026-10-21 01:16:49 +00:00 · 2025-09-02 20:05:48 -04:00
parent 1f840da949 a4ff6340f8
commit 642b56fbda
118 changed files with 3921 additions and 635 deletions
@@ -1,7 +1,9 @@
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";

+import { OrgPermissionCan } from "@app/components/permissions";
 import {
  Button,
  FormControl,
@@ -9,9 +11,16 @@ import {
  ModalClose,
  SecretInput,
  Select,
-  SelectItem
+  SelectItem,
+  Tooltip
 } from "@app/components/v2";
+import { useSubscription } from "@app/context";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { HCVaultConnectionMethod, THCVaultConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";

@@ -66,7 +75,8 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
    resolver: zodResolver(formSchema),
    defaultValues: appConnection ?? {
      app: AppConnection.HCVault,
-      method: HCVaultConnectionMethod.AppRole
+      method: HCVaultConnectionMethod.AppRole,
+      gatewayId: null
    }
  });

@@ -79,6 +89,9 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {

  const selectedMethod = watch("method");

+  const { subscription } = useSubscription();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
@@ -115,6 +128,54 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
            </FormControl>
          )}
        />
+        {subscription.gateway && (
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <Select
+                        isDisabled={!isAllowed}
+                        value={value as string}
+                        onValueChange={onChange}
+                        className="w-full border border-mineshaft-500"
+                        dropdownContainerClassName="max-w-none"
+                        isLoading={isGatewaysLoading}
+                        placeholder="Default: Internet Gateway"
+                        position="popper"
+                      >
+                        <SelectItem
+                          value={null as unknown as string}
+                          onClick={() => onChange(undefined)}
+                        >
+                          Internet Gateway
+                        </SelectItem>
+                        {gateways?.map((el) => (
+                          <SelectItem value={el.id} key={el.id}>
+                            {el.name}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+        )}
        <Controller
          name="credentials.instanceUrl"
          control={control}
@@ -4,9 +4,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
-import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import {
+  OrgPermissionAuditLogsActions,
+  OrgPermissionSubjects,
+  ProjectPermissionAuditLogsActions,
+  ProjectPermissionSub,
+  useSubscription
+} from "@app/context";
 import { Timezone } from "@app/helpers/datetime";
-import { withPermission } from "@app/hoc";
+import { withPermission, withProjectPermission } from "@app/hoc";
 import { Workspace } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";

@@ -28,153 +34,173 @@ type Props = {
  project?: Workspace;
 };

-export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true, pageView = false, project }: Props) => {
-    const { subscription } = useSubscription();
+const LogsSectionComponent = ({
+  presets,
+  refetchInterval,
+  showFilters = true,
+  pageView = false,
+  project
+}: Props) => {
+  const { subscription } = useSubscription();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
+  const [logFilter, setLogFilter] = useState<TAuditLogFilterFormData>({
+    eventType: presets?.eventType || [],
+    actor: presets?.actorId,
+    eventMetadata: presets?.eventMetadata
+  });
+  const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);

-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
-    const [logFilter, setLogFilter] = useState<TAuditLogFilterFormData>({
-      eventType: presets?.eventType || [],
-      actor: presets?.actorId,
-      eventMetadata: presets?.eventMetadata
-    });
-    const [timezone, setTimezone] = useState<Timezone>(Timezone.Local);
+  const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>(
+    presets?.endDate || presets?.startDate
+      ? {
+          type: AuditLogDateFilterType.Absolute,
+          startDate: presets?.startDate || new Date(Number(new Date()) - ms("1h")),
+          endDate: presets?.endDate || new Date()
+        }
+      : {
+          startDate: new Date(Number(new Date()) - ms("1h")),
+          endDate: new Date(),
+          type: AuditLogDateFilterType.Relative,
+          relativeModeValue: "1h"
+        }
+  );

-    const [dateFilter, setDateFilter] = useState<TAuditLogDateFilterFormData>(
-      presets?.endDate || presets?.startDate
-        ? {
-            type: AuditLogDateFilterType.Absolute,
-            startDate: presets?.startDate || new Date(Number(new Date()) - ms("1h")),
-            endDate: presets?.endDate || new Date()
-          }
-        : {
-            startDate: new Date(Number(new Date()) - ms("1h")),
-            endDate: new Date(),
-            type: AuditLogDateFilterType.Relative,
-            relativeModeValue: "1h"
-          }
-    );
-
-    useEffect(() => {
-      if (subscription && !subscription.auditLogs) {
-        handlePopUpOpen("upgradePlan");
-      }
-    }, [subscription]);
-
-    if (pageView)
-      return (
-        <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
-            <div>
-              <div className="flex items-center gap-1 whitespace-nowrap">
-                <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
-                <a
-                  href="https://infisical.com/docs/documentation/platform/audit-logs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <div className="ml-1 mt-[0.1rem] 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>
-            </div>
-            <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-              {showFilters && (
-                <LogsDateFilter
-                  filter={dateFilter}
-                  setFilter={setDateFilter}
-                  timezone={timezone}
-                  setTimezone={setTimezone}
-                />
-              )}
-              {showFilters && (
-                <LogsFilter
-                  project={project}
-                  presets={presets}
-                  setFilter={setLogFilter}
-                  filter={logFilter}
-                />
-              )}
-            </div>
-          </div>
-          <div className="space-y-2">
-            <LogsTable
-              refetchInterval={refetchInterval}
-              filter={{
-                secretPath: logFilter.secretPath || undefined,
-                secretKey: logFilter.secretKey || undefined,
-                eventMetadata: logFilter?.eventMetadata,
-                projectId: project?.id || logFilter?.project?.id,
-                actorType: presets?.actorType,
-                limit: 15,
-                eventType: logFilter?.eventType,
-                userAgentType: logFilter?.userAgentType,
-                startDate: dateFilter?.startDate,
-                endDate: dateFilter?.endDate,
-                environment: logFilter?.environment?.slug,
-                actor: logFilter?.actor
-              }}
-              timezone={timezone}
-            />
-            <UpgradePlanModal
-              isOpen={popUp.upgradePlan.isOpen}
-              onOpenChange={(isOpen) => {
-                handlePopUpToggle("upgradePlan", isOpen);
-              }}
-              text="You can use audit logs if you switch to a paid Infisical plan."
-            />
-          </div>
-        </div>
-      );
+  useEffect(() => {
+    if (subscription && !subscription.auditLogs) {
+      handlePopUpOpen("upgradePlan");
+    }
+  }, [subscription]);

+  if (pageView)
    return (
-      <div className="space-y-2">
-        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-          {showFilters && (
-            <LogsDateFilter
-              filter={dateFilter}
-              setFilter={setDateFilter}
-              timezone={timezone}
-              setTimezone={setTimezone}
-            />
-          )}
-          {showFilters && (
-            <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
-          )}
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
+          <div>
+            <div className="flex items-center gap-1 whitespace-nowrap">
+              <p className="text-xl font-semibold text-mineshaft-100">Audit History</p>
+              <a
+                href="https://infisical.com/docs/documentation/platform/audit-logs"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="ml-1 mt-[0.1rem] 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>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+            {showFilters && (
+              <LogsDateFilter
+                filter={dateFilter}
+                setFilter={setDateFilter}
+                timezone={timezone}
+                setTimezone={setTimezone}
+              />
+            )}
+            {showFilters && (
+              <LogsFilter
+                project={project}
+                presets={presets}
+                setFilter={setLogFilter}
+                filter={logFilter}
+              />
+            )}
+          </div>
+        </div>
+        <div className="space-y-2">
+          <LogsTable
+            refetchInterval={refetchInterval}
+            filter={{
+              secretPath: logFilter.secretPath || undefined,
+              secretKey: logFilter.secretKey || undefined,
+              eventMetadata: logFilter?.eventMetadata,
+              projectId: project?.id || logFilter?.project?.id,
+              actorType: presets?.actorType,
+              limit: 15,
+              eventType: logFilter?.eventType,
+              userAgentType: logFilter?.userAgentType,
+              startDate: dateFilter?.startDate,
+              endDate: dateFilter?.endDate,
+              environment: logFilter?.environment?.slug,
+              actor: logFilter?.actor
+            }}
+            timezone={timezone}
+          />
+          <UpgradePlanModal
+            isOpen={popUp.upgradePlan.isOpen}
+            onOpenChange={(isOpen) => {
+              handlePopUpToggle("upgradePlan", isOpen);
+            }}
+            text="You can use audit logs if you switch to a paid Infisical plan."
+          />
        </div>
-        <LogsTable
-          refetchInterval={refetchInterval}
-          filter={{
-            secretPath: logFilter.secretPath || undefined,
-            secretKey: logFilter.secretKey || undefined,
-            eventMetadata: logFilter?.eventMetadata,
-            projectId: logFilter?.project?.id,
-            actorType: presets?.actorType,
-            limit: 15,
-            eventType: logFilter?.eventType,
-            userAgentType: logFilter?.userAgentType,
-            startDate: dateFilter?.startDate,
-            endDate: dateFilter?.endDate,
-            environment: logFilter?.environment?.slug,
-            actor: logFilter?.actor
-          }}
-          timezone={timezone}
-        />
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => {
-            handlePopUpToggle("upgradePlan", isOpen);
-          }}
-          text="You can use audit logs if you switch to a paid Infisical plan."
-        />
      </div>
    );
-  },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.AuditLogs }
-);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-2 lg:justify-end">
+        {showFilters && (
+          <LogsDateFilter
+            filter={dateFilter}
+            setFilter={setDateFilter}
+            timezone={timezone}
+            setTimezone={setTimezone}
+          />
+        )}
+        {showFilters && (
+          <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
+        )}
+      </div>
+      <LogsTable
+        refetchInterval={refetchInterval}
+        filter={{
+          secretPath: logFilter.secretPath || undefined,
+          secretKey: logFilter.secretKey || undefined,
+          eventMetadata: logFilter?.eventMetadata,
+          projectId: project?.id || logFilter?.project?.id,
+          actorType: presets?.actorType,
+          limit: 15,
+          eventType: logFilter?.eventType,
+          userAgentType: logFilter?.userAgentType,
+          startDate: dateFilter?.startDate,
+          endDate: dateFilter?.endDate,
+          environment: logFilter?.environment?.slug,
+          actor: logFilter?.actor
+        }}
+        timezone={timezone}
+      />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => {
+          handlePopUpToggle("upgradePlan", isOpen);
+        }}
+        text="You can use audit logs if you switch to a paid Infisical plan."
+      />
+    </div>
+  );
+};
+
+export const LogsSection = (props: Props) => {
+  const { project } = props;
+
+  if (project) {
+    const ProjectLogsSectionWithPermission = withProjectPermission(LogsSectionComponent, {
+      action: ProjectPermissionAuditLogsActions.Read,
+      subject: ProjectPermissionSub.AuditLogs
+    });
+    return <ProjectLogsSectionWithPermission {...props} />;
+  }
+
+  const OrgLogsSectionWithPermission = withPermission(LogsSectionComponent, {
+    action: OrgPermissionAuditLogsActions.Read,
+    subject: OrgPermissionSubjects.AuditLogs
+  });
+  return <OrgLogsSectionWithPermission {...props} />;
+};
@@ -48,7 +48,7 @@ import {
  useRequestProjectAccess,
  useSearchProjects
 } from "@app/hooks/api";
-import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace, WorkspaceEnv } from "@app/hooks/api/workspace/types";
 import {
  ProjectListToggle,
  ProjectListView
@@ -152,13 +152,17 @@ export const AllProjectView = ({
    type: projectTypeFilter
  });

-  const handleAccessProject = async (type: ProjectType, projectId: string) => {
+  const handleAccessProject = async (
+    type: ProjectType,
+    projectId: string,
+    environments: WorkspaceEnv[]
+  ) => {
    try {
      await orgAdminAccessProject.mutateAsync({
        projectId
      });
      await navigate({
-        to: getProjectHomePage(type),
+        to: getProjectHomePage(type, environments),
        params: {
          projectId
        }
@@ -315,7 +319,7 @@ export const AllProjectView = ({
              onKeyDown={(evt) => {
                if (evt.key === "Enter" && workspace.isMember) {
                  navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                    params: {
                      projectId: workspace.id
                    }
@@ -325,7 +329,7 @@ export const AllProjectView = ({
              onClick={() => {
                if (workspace.isMember) {
                  navigate({
-                    to: getProjectHomePage(workspace.type),
+                    to: getProjectHomePage(workspace.type, workspace.environments),
                    params: {
                      projectId: workspace.id
                    }
@@ -371,7 +375,7 @@ export const AllProjectView = ({
                        onClick={(e) => {
                          e.stopPropagation();
                          e.preventDefault();
-                          handleAccessProject(workspace.type, workspace.id);
+                          handleAccessProject(workspace.type, workspace.id, workspace.environments);
                        }}
                        disabled={
                          orgAdminAccessProject.variables?.projectId === workspace.id &&
@@ -193,7 +193,7 @@ export const MyProjectView = ({
    <div
      onClick={() => {
        navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
          params: {
            projectId: workspace.id
          }
@@ -247,7 +247,7 @@ export const MyProjectView = ({
    <div
      onClick={() => {
        navigate({
-          to: getProjectHomePage(workspace.type),
+          to: getProjectHomePage(workspace.type, workspace.environments),
          params: {
            projectId: workspace.id
          }
@@ -5,6 +5,7 @@ import { OrgPermissionSubjects } from "@app/context";
 import {
  OrgGatewayPermissionActions,
  OrgPermissionAppConnectionActions,
+  OrgPermissionAuditLogsActions,
  OrgPermissionBillingActions,
  OrgPermissionGroupActions,
  OrgPermissionIdentityActions,
@@ -23,6 +24,12 @@ const generalPermissionSchema = z
  })
  .optional();

+const auditLogsPermissionSchema = z
+  .object({
+    [OrgPermissionAuditLogsActions.Read]: z.boolean().optional()
+  })
+  .optional();
+
 const billingPermissionSchema = z
  .object({
    [OrgPermissionBillingActions.Read]: z.boolean().optional(),
@@ -121,7 +128,7 @@ export const formSchema = z.object({
        })
        .optional(),

-      "audit-logs": generalPermissionSchema,
+      "audit-logs": auditLogsPermissionSchema,
      member: generalPermissionSchema,
      groups: groupPermissionSchema,
      role: generalPermissionSchema,
@@ -0,0 +1,145 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { OrgPermissionAuditLogsActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  Custom = "custom"
+}
+
+const PERMISSION_ACTIONS = [
+  {
+    action: OrgPermissionAuditLogsActions.Read,
+    label: "Read"
+  }
+] as const;
+
+export const OrgPermissionAuditLogsRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.audit-logs"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+      default:
+        setValue(
+          "permissions.audit-logs",
+          {
+            [OrgPermissionAuditLogsActions.Read]: false
+          },
+          { shouldDirty: true }
+        );
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td className="w-4">
+          <FontAwesomeIcon className="w-4" icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td className="w-full select-none">Audit Logs</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="h-8 w-40 bg-mineshaft-700"
+            dropdownContainerClassName="border text-left border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+            position="popper"
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td colSpan={3} className="border-mineshaft-500 bg-mineshaft-900 p-8">
+            <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.audit-logs.${action}`}
+                    key={`permissions.audit-logs.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={Boolean(field.value)}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.audit-logs.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};
@@ -71,6 +71,7 @@ type Props = {
    | "gateway"
    | "secret-share"
    | "billing"
+    | "audit-logs"
    | "machine-identity-auth-template"
  >;
  setValue: UseFormSetValue<TFormSchema>;
@@ -16,6 +16,7 @@ import {
  TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgPermissionAuditLogsRow } from "./OrgPermissionAuditLogsRow";
 import { OrgPermissionBillingRow } from "./OrgPermissionBillingRow";
 import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
@@ -39,10 +40,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
    title: "Incident Contacts",
    formName: "incident-contact"
  },
-  {
-    title: "Audit Logs",
-    formName: "audit-logs"
-  },
  {
    title: "Organization Profile",
    formName: "settings"
@@ -166,6 +163,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                  />
                );
              })}
+              <OrgPermissionAuditLogsRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
              <OrgPermissionIdentityRow
                control={control}
                setValue={setValue}
@@ -1,6 +1,4 @@
 import { useState } from "react";
-import { faKey, faVault } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AnimatePresence, motion } from "framer-motion";

 import { Modal, ModalContent } from "@app/components/v2";
@@ -20,14 +18,16 @@ enum WizardSteps {

 const PLATFORM_LIST = [
  {
-    icon: faKey,
+    image: "/images/integrations/EnvKey.png",
    platform: "env-key",
-    title: "Env Key"
+    title: "EnvKey",
+    size: 34
  },
  {
-    icon: faVault,
+    image: "/images/integrations/Vault.png",
    platform: "vault",
-    title: "Vault"
+    title: "HCP Vault",
+    size: 40
  }
 ] as const;

@@ -67,7 +67,7 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
                {PLATFORM_LIST.map((platform, idx) => (
                  <div
                    key={`platform-${idx + 1}`}
-                    className="flex h-28 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
+                    className="flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded border border-mineshaft-500 bg-mineshaft-700 p-6 py-5 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
                    role="button"
                    tabIndex={0}
                    onClick={() => {
@@ -81,7 +81,11 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
                      }
                    }}
                  >
-                    <FontAwesomeIcon icon={platform.icon} size="lg" />
+                    <img
+                      src={platform.image}
+                      alt={`${platform.title} logo`}
+                      style={{ width: platform.size }}
+                    />
                    <div className="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
                  </div>
                ))}
@@ -2,12 +2,19 @@ import { Controller, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Tooltip } from "@app/components/v2";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, Select, SelectItem, Tooltip } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys } from "@app/hooks/api";
 import { useImportVault } from "@app/hooks/api/migration/mutations";

 type Props = {
@@ -62,36 +69,32 @@ const MAPPING_TYPE_MENU_ITEMS = [
 export const VaultPlatformModal = ({ onClose }: Props) => {
  const formSchema = z.object({
    vaultUrl: z.string().min(1),
+    gatewayId: z.string().optional(),
    vaultNamespace: z.string().trim().optional(),
    vaultAccessToken: z.string().min(1),
    mappingType: z.nativeEnum(VaultMappingType).default(VaultMappingType.KeyVault)
  });
  type TFormData = z.infer<typeof formSchema>;

+  const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());
  const { mutateAsync: importVault } = useImportVault();

  const {
    control,
    handleSubmit,
    reset,
-    formState: { isLoading, isDirty, isSubmitting, isValid, errors }
+    formState: { isLoading, isDirty, isSubmitting, isValid }
  } = useForm<TFormData>({
    resolver: zodResolver(formSchema)
  });

-  console.log({
-    isSubmitting,
-    isLoading,
-    isValid,
-    errors
-  });
-
  const onSubmit = async (data: TFormData) => {
    await importVault({
      vaultAccessToken: data.vaultAccessToken,
      vaultNamespace: data.vaultNamespace,
      vaultUrl: data.vaultUrl,
-      mappingType: data.mappingType
+      mappingType: data.mappingType,
+      ...(data.gatewayId && { gatewayId: data.gatewayId })
    });
    createNotification({
      title: "Import started",
@@ -110,11 +113,70 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
          The Vault migration currently supports importing static secrets from Vault
          Dedicated/Self-Hosted.
          <div className="mt-2 text-xs opacity-80">
-            Currently only KV Secret Engine V2 is supported for Vault migrations.
+            Currently only KV Secret Engine is supported for Vault migrations.
          </div>
        </p>
      </NoticeBannerV2>
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+        <div className="w-full flex-1">
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                    isOptional
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <div>
+                        <Select
+                          isDisabled={!isAllowed}
+                          value={value as string}
+                          onValueChange={(v) => {
+                            if (v !== "") {
+                              onChange(v);
+                            }
+                          }}
+                          className="w-full border border-mineshaft-500"
+                          dropdownContainerClassName="max-w-none"
+                          isLoading={isGatewayLoading}
+                          placeholder="Default: Internet Gateway"
+                          position="popper"
+                        >
+                          <SelectItem
+                            value={undefined as unknown as string}
+                            onClick={() => {
+                              onChange(undefined);
+                            }}
+                          >
+                            Internet Gateway
+                          </SelectItem>
+                          {gateways?.map((el) => (
+                            <SelectItem value={el.id} key={el.id}>
+                              {el.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </div>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+
        <Controller
          control={control}
          name="vaultUrl"
@@ -51,7 +51,7 @@ export const GithubOrgSyncConfigModal = ({
    formState: { isSubmitting }
  } = useForm<FormData>({
    resolver: zodResolver(schema),
-    values: data ? { githubOrgName: data.githubOrgName } : undefined
+    values: data ? { githubOrgName: data.githubOrgName, githubOrgAccessToken: "" } : undefined
  });

  const onFormSubmit = async ({ githubOrgName, githubOrgAccessToken }: FormData) => {
@@ -123,21 +123,21 @@ export const GithubOrgSyncConfigModal = ({
            </FormControl>
          )}
        />
-        {/* <Controller
+        <Controller
          control={control}
          name="githubOrgAccessToken"
          render={({ field, fieldState: { error } }) => (
            <FormControl
-              label="GitHub Org Scoped Access Token"
+              label="GitHub Access Token"
              isError={Boolean(error)}
              isOptional
              errorText={error?.message}
-              helperText="A GitHub access token is required only for private organizations. It will not be visible after saving."
+              helperText="Required for manual sync operations. The token must have 'read:org' permissions."
            >
-              <Input {...field} placeholder="example" />
+              <Input {...field} type="password" placeholder="ghp_xxxxxxxxxxxx" />
            </FormControl>
          )}
-        /> */}
+        />
        <div className="flex gap-8 pt-4">
          <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
            {isUpdate ? "Update" : "Configure"}
@@ -1,10 +1,15 @@
 import { useQuery } from "@tanstack/react-query";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, Modal, ModalContent, Skeleton, Spinner, Switch } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
-import { githubOrgSyncConfigQueryKeys, useUpdateGithubSyncOrgConfig } from "@app/hooks/api";
+import {
+  githubOrgSyncConfigQueryKeys,
+  useSyncAllGithubTeams,
+  useUpdateGithubSyncOrgConfig
+} from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { GithubOrgSyncConfigModal } from "./GithubOrgSyncConfigModal";
@@ -24,10 +29,73 @@ export const OrgGithubSyncSection = () => {
  });

  const updateGithubSyncOrgConfig = useUpdateGithubSyncOrgConfig();
+  const syncAllTeamsMutation = useSyncAllGithubTeams();

  const isPending = subscription.githubOrgSync && githubOrgSyncConfig.isPending;
  const data = !isPending && !githubOrgSyncConfig?.isError ? githubOrgSyncConfig?.data : undefined;

+  const handleBulkSync = async () => {
+    try {
+      const result = await syncAllTeamsMutation.mutateAsync();
+      let message = "Successfully synced teams";
+
+      const details = [];
+      if (result.createdTeams.length > 0) {
+        details.push(
+          `${result.createdTeams.length} new team${result.createdTeams.length === 1 ? "" : "s"} created`
+        );
+      }
+      if (result.updatedTeams.length > 0) {
+        details.push(
+          `${result.updatedTeams.length} team${result.updatedTeams.length === 1 ? "" : "s"} updated`
+        );
+      }
+      if (result.removedMemberships > 0) {
+        details.push(
+          `${result.removedMemberships} membership${result.removedMemberships === 1 ? "" : "s"} removed`
+        );
+      }
+
+      if (details.length > 0) {
+        message += `. ${details.join(", ")}`;
+      }
+
+      createNotification({
+        text: message,
+        type: "success"
+      });
+
+      if (result.errors && result.errors.length > 0) {
+        createNotification({
+          text: `Sync completed with ${result.errors.length} warnings. Check the console for details.`,
+          type: "warning"
+        });
+        console.warn("Sync errors:", result.errors);
+      }
+    } catch (error) {
+      const errorMessage =
+        (error as any)?.response?.data?.message || (error as Error)?.message || "Unknown error";
+
+      if (
+        errorMessage.includes("token") &&
+        (errorMessage.includes("required") ||
+          errorMessage.includes("invalid") ||
+          errorMessage.includes("expired") ||
+          errorMessage.includes("set a token first"))
+      ) {
+        createNotification({
+          text: "Please set a GitHub access token in the configuration modal to continue with the sync",
+          type: "error"
+        });
+      } else {
+        createNotification({
+          text: `Failed to sync GitHub teams: ${errorMessage}`,
+          type: "error"
+        });
+      }
+    }
+  };
+
  return (
    <div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
      <p className="text-xl font-semibold text-gray-200">
@@ -86,6 +154,33 @@ export const OrgGithubSyncSection = () => {
          </p>
        </div>
      )}
+      {data && data.isActive && (
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Sync Now</h2>
+            <OrgPermissionCan
+              I={OrgPermissionActions.Edit}
+              a={OrgPermissionSubjects.GithubOrgSyncManual}
+            >
+              {(isAllowed) => (
+                <Button
+                  onClick={() => handleBulkSync()}
+                  colorSchema="primary"
+                  variant="outline_bg"
+                  isDisabled={!isAllowed || syncAllTeamsMutation.isPending}
+                  isLoading={syncAllTeamsMutation.isPending}
+                >
+                  Sync Now
+                </Button>
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            Manually sync GitHub teams for all organization members. This will update team
+            memberships for users who have previously logged in with GitHub.
+          </p>
+        </div>
+      )}
      <Modal
        isOpen={popUp?.githubOrgSyncConfig?.isOpen}
        onOpenChange={(isOpen) => {