Merge branch 'main' into feat/multipleApprovalEnvs

2026-10-20 02:53:42 +00:00 · 2025-07-25 16:29:04 -03:00
parent 99e8bdef58 929822514e
commit 608979efa7
74 changed files with 2315 additions and 784 deletions
@@ -29,6 +29,7 @@ import {
 } from "@app/hooks/api/auditLogs/constants";
 import { EventType } from "@app/hooks/api/auditLogs/enums";
 import { UserAgentType } from "@app/hooks/api/auth/types";
+import { Workspace } from "@app/hooks/api/workspace/types";

 import { LogFilterItem } from "./LogFilterItem";
 import { auditLogFilterFormSchema, Presets, TAuditLogFilterFormData } from "./types";
@@ -43,6 +44,7 @@ type Props = {
  presets?: Presets;
  setFilter: (data: TAuditLogFilterFormData) => void;
  filter: TAuditLogFilterFormData;
+  project?: Workspace;
 };

 const getActiveFilterCount = (filter: TAuditLogFilterFormData) => {
@@ -69,7 +71,7 @@ const getActiveFilterCount = (filter: TAuditLogFilterFormData) => {
  return filterCount;
 };

-export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
+export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
  const { data: workspaces = [] } = useGetUserWorkspaces();
  const { currentOrg } = useOrganization();

@@ -90,7 +92,7 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
      values: filter
    });
  const selectedEventTypes = watch("eventType") as EventType[] | undefined;
-  const selectedProject = watch("project");
+  const selectedProject = project ?? watch("project");

  const showSecretsSection =
    selectedEventTypes?.some(
@@ -270,48 +272,50 @@ export const LogsFilter = ({ presets, setFilter, filter }: Props) => {
                  )}
                />
              </LogFilterItem>
-              <LogFilterItem
-                label="Project"
-                onClear={() => {
-                  resetField("project");
-                  resetField("environment");
-                  setValue("secretPath", "");
-                  setValue("secretKey", "");
-                }}
-              >
-                <Controller
-                  control={control}
-                  name="project"
-                  render={({ field: { onChange, value }, fieldState: { error } }) => (
-                    <FormControl
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                      className="mb-0 w-full"
-                    >
-                      <FilterableSelect
-                        value={value}
-                        isClearable
-                        onChange={(e) => {
-                          if (e === null) {
-                            setValue("secretPath", "");
-                            setValue("secretKey", "");
-                          }
-                          resetField("environment");
-                          onChange(e);
-                        }}
-                        placeholder="All projects"
-                        options={workspacesInOrg.map(({ name, id, type }) => ({
-                          name,
-                          id,
-                          type
-                        }))}
-                        getOptionValue={(option) => option.id}
-                        getOptionLabel={(option) => option.name}
-                      />
-                    </FormControl>
-                  )}
-                />
-              </LogFilterItem>
+              {!project && (
+                <LogFilterItem
+                  label="Project"
+                  onClear={() => {
+                    resetField("project");
+                    resetField("environment");
+                    setValue("secretPath", "");
+                    setValue("secretKey", "");
+                  }}
+                >
+                  <Controller
+                    control={control}
+                    name="project"
+                    render={({ field: { onChange, value }, fieldState: { error } }) => (
+                      <FormControl
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        className="mb-0 w-full"
+                      >
+                        <FilterableSelect
+                          value={value}
+                          isClearable
+                          onChange={(e) => {
+                            if (e === null) {
+                              setValue("secretPath", "");
+                              setValue("secretKey", "");
+                            }
+                            resetField("environment");
+                            onChange(e);
+                          }}
+                          placeholder="All projects"
+                          options={workspacesInOrg.map(({ name, id, type }) => ({
+                            name,
+                            id,
+                            type
+                          }))}
+                          getOptionValue={(option) => option.id}
+                          getOptionLabel={(option) => option.name}
+                        />
+                      </FormControl>
+                    )}
+                  />
+                </LogFilterItem>
+              )}
              <AnimatePresence initial={false}>
                {showSecretsSection && (
                  <motion.div
@@ -7,6 +7,7 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
 import { Timezone } from "@app/helpers/datetime";
 import { withPermission } from "@app/hoc";
+import { Workspace } from "@app/hooks/api/workspace/types";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { LogsDateFilter } from "./LogsDateFilter";
@@ -24,10 +25,11 @@ type Props = {
  refetchInterval?: number;
  showFilters?: boolean;
  pageView?: boolean;
+  project?: Workspace;
 };

 export const LogsSection = withPermission(
-  ({ presets, refetchInterval, showFilters = true, pageView = false }: Props) => {
+  ({ presets, refetchInterval, showFilters = true, pageView = false, project }: Props) => {
    const { subscription } = useSubscription();

    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["upgradePlan"] as const);
@@ -83,7 +85,12 @@ export const LogsSection = withPermission(
                />
              )}
              {showFilters && (
-                <LogsFilter presets={presets} setFilter={setLogFilter} filter={logFilter} />
+                <LogsFilter
+                  project={project}
+                  presets={presets}
+                  setFilter={setLogFilter}
+                  filter={logFilter}
+                />
              )}
            </div>
          </div>
@@ -94,7 +101,7 @@ export const LogsSection = withPermission(
                secretPath: logFilter.secretPath || undefined,
                secretKey: logFilter.secretKey || undefined,
                eventMetadata: logFilter?.eventMetadata,
-                projectId: logFilter?.project?.id,
+                projectId: project?.id || logFilter?.project?.id,
                actorType: presets?.actorType,
                limit: 15,
                eventType: logFilter?.eventType,
@@ -119,7 +126,7 @@ export const LogsSection = withPermission(

    return (
      <div className="space-y-2">
-        <div className="flex w-full justify-end">
+        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
          {showFilters && (
            <LogsDateFilter
              filter={dateFilter}
@@ -52,7 +52,7 @@ export const ProjectsPage = () => {
        <title>{t("common.head-title", { title: t("settings.members.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      
+
      {!isLoading && !serverDetails?.redisConfigured && (
        <div className="mb-4 flex flex-col items-start justify-start text-3xl">
          <p className="mb-4 mr-4 font-semibold text-white">Announcements</p>
@@ -9,7 +9,7 @@ import { ProjectMembershipRole } from "@app/hooks/api/roles/types";

 import { SelectImportFromPlatformModal } from "./components/SelectImportFromPlatformModal";

-export const ImportTab = () => {
+export const ExternalMigrationsTab = () => {
  const { membership } = useOrgPermission();

  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["selectImportPlatform"] as const);
@@ -30,7 +30,7 @@ export const ImportTab = () => {
              <a
                target="_blank"
                rel="noopener noreferrer"
-                href="https://infisical.com/docs/documentation/guides/migrating-from-envkey"
+                href="https://infisical.com/docs/documentation/platform/external-migrations/overview"
              >
                <div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
@@ -45,25 +45,21 @@ export const EnvKeyPlatformModal = ({ onClose }: Props) => {
      return;
    }

-    try {
-      await importEnvKey({
-        file: data.file,
-        decryptionKey: data.encryptionKey
-      });
-      createNotification({
-        title: "Import started",
-        text: "Your data is being imported. You will receive an email when the import is complete or if the import fails. This may take up to 10 minutes.",
-        type: "info"
-      });
+    await importEnvKey({
+      file: data.file,
+      decryptionKey: data.encryptionKey
+    });
+    createNotification({
+      title: "Import started",
+      text: "Your data is being imported. You will receive an email when the import is complete or if the import fails. This may take up to 10 minutes.",
+      type: "info"
+    });

-      onClose();
-      reset();
+    onClose();
+    reset();

-      if (fileUploadRef.current) {
-        fileUploadRef.current.value = "";
-      }
-    } catch {
-      reset();
+    if (fileUploadRef.current) {
+      fileUploadRef.current.value = "";
    }
  };

@@ -1,11 +1,12 @@
 import { useState } from "react";
-import { faKey } from "@fortawesome/free-solid-svg-icons";
+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";

 import { EnvKeyPlatformModal } from "./EnvKeyPlatformModal";
+import { VaultPlatformModal } from "./VaultPlatformModal";

 type Props = {
  isOpen?: boolean;
@@ -22,6 +23,11 @@ const PLATFORM_LIST = [
    icon: faKey,
    platform: "env-key",
    title: "Env Key"
+  },
+  {
+    icon: faVault,
+    platform: "vault",
+    title: "Vault"
  }
 ] as const;

@@ -82,18 +88,32 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
              </div>
            </motion.div>
          )}
-          {wizardStep === WizardSteps.PlatformInputs &&
-            selectedPlatform?.platform === "env-key" && (
-              <motion.div
-                key="env-key-step"
-                transition={{ duration: 0.1 }}
-                initial={{ opacity: 0, translateX: 30 }}
-                animate={{ opacity: 1, translateX: 0 }}
-                exit={{ opacity: 0, translateX: -30 }}
-              >
-                <EnvKeyPlatformModal onClose={() => handleFormReset(false)} />
-              </motion.div>
-            )}
+          {wizardStep === WizardSteps.PlatformInputs && (
+            <>
+              {selectedPlatform?.platform === "env-key" && (
+                <motion.div
+                  key="env-key-step"
+                  transition={{ duration: 0.1 }}
+                  initial={{ opacity: 0, translateX: 30 }}
+                  animate={{ opacity: 1, translateX: 0 }}
+                  exit={{ opacity: 0, translateX: -30 }}
+                >
+                  <EnvKeyPlatformModal onClose={() => handleFormReset(false)} />
+                </motion.div>
+              )}
+              {selectedPlatform?.platform === "vault" && (
+                <motion.div
+                  key="vault-step"
+                  transition={{ duration: 0.1 }}
+                  initial={{ opacity: 0, translateX: 30 }}
+                  animate={{ opacity: 1, translateX: 0 }}
+                  exit={{ opacity: 0, translateX: -30 }}
+                >
+                  <VaultPlatformModal onClose={() => handleFormReset(false)} />
+                </motion.div>
+              )}
+            </>
+          )}
        </AnimatePresence>
      </ModalContent>
    </Modal>
@@ -0,0 +1,222 @@
+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 { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Tooltip } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { useImportVault } from "@app/hooks/api/migration/mutations";
+
+type Props = {
+  id?: string;
+  onClose: () => void;
+};
+
+enum VaultMappingType {
+  KeyVault = "key-vault",
+  Namespace = "namespace"
+}
+
+const MAPPING_TYPE_MENU_ITEMS = [
+  {
+    value: VaultMappingType.KeyVault,
+    label: "Key Vaults",
+    tooltip: (
+      <div>
+        When using key vaults for mapping, each key vault within Vault will be created in Infisical
+        as a project. Each secret path inside the key vault, will be created as an environment
+        inside the corresponding project. When using Key Vaults as the project mapping type, a
+        default environment called &quot;Production&quot; will be created for each project, which
+        will contain the secrets from the key vault.
+        <div className="mt-4 flex flex-col gap-1 text-sm">
+          <div>Key Vault → Project</div>
+          <div>Default Environment (Production)</div>
+          <div>Secret Path → Secret Folder</div>
+          <div>Secret data → Secrets</div>
+        </div>
+      </div>
+    )
+  },
+  {
+    value: VaultMappingType.Namespace,
+    label: "Namespaces",
+    tooltip: (
+      <div>
+        When using namespaces for mapping, each namespace within Vault will be created in Infisical
+        as a project. Each key vault (KV) inside the namespace, will be created as an environment
+        inside the corresponding project.
+        <div className="mt-4 flex flex-col gap-1 text-sm">
+          <div>Namespace → Project</div>
+          <div>Key Vault → Project Environment</div>
+          <div>Secret Path → Secret Folder</div>
+          <div>Secret data → Secrets</div>
+        </div>
+      </div>
+    )
+  }
+];
+
+export const VaultPlatformModal = ({ onClose }: Props) => {
+  const formSchema = z.object({
+    vaultUrl: z.string().min(1),
+    vaultNamespace: z.string().trim().optional(),
+    vaultAccessToken: z.string().min(1),
+    mappingType: z.nativeEnum(VaultMappingType).default(VaultMappingType.KeyVault)
+  });
+  type TFormData = z.infer<typeof formSchema>;
+
+  const { mutateAsync: importVault } = useImportVault();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isLoading, isDirty, isSubmitting, isValid, errors }
+  } = 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
+    });
+    createNotification({
+      title: "Import started",
+      text: "Your data is being imported. You will receive an email when the import is complete or if the import fails. This may take up to 10 minutes.",
+      type: "info"
+    });
+
+    onClose();
+    reset();
+  };
+
+  return (
+    <div>
+      <NoticeBannerV2 title="Vault KV Secret Engine Import" className="mb-4">
+        <p className="text-sm">
+          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.
+          </div>
+        </p>
+      </NoticeBannerV2>
+      <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+        <Controller
+          control={control}
+          name="vaultUrl"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Vault URL"
+              isRequired
+              errorText={error?.message}
+              isError={Boolean(error)}
+            >
+              <Input placeholder="" {...field} />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="vaultNamespace"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Vault Namespace"
+              errorText={error?.message}
+              isError={Boolean(error)}
+            >
+              <Input type="text" placeholder="" {...field} />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="vaultAccessToken"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Vault Access Token"
+              isRequired
+              errorText={error?.message}
+              isError={Boolean(error)}
+            >
+              <Input type="password" placeholder="" {...field} />
+            </FormControl>
+          )}
+        />
+        <Controller
+          control={control}
+          name="mappingType"
+          defaultValue={VaultMappingType.KeyVault}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Project Mapping"
+              isError={Boolean(error)}
+              isRequired
+              errorText={error?.message}
+              className="flex-1"
+            >
+              <div className="mt-2 grid h-full w-full grid-cols-2 gap-4">
+                {MAPPING_TYPE_MENU_ITEMS.map((el) => (
+                  <div
+                    key={el.value}
+                    className={twMerge(
+                      "flex w-full cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 p-4 opacity-75 transition-all",
+                      field.value === el.value
+                        ? "border-primary-700 border-opacity-70 bg-mineshaft-600 opacity-100"
+                        : "hover:border-primary-700 hover:bg-mineshaft-600"
+                    )}
+                    onClick={() => field.onChange(el.value)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        field.onChange(el.value);
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-1">
+                      <div className="text-center text-sm">{el.label}</div>
+                      {el.tooltip && (
+                        <div className="text-center text-sm">
+                          <Tooltip content={el.tooltip} className="max-w-96">
+                            <FontAwesomeIcon className="opacity-60" icon={faQuestionCircle} />
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </FormControl>
+          )}
+        />
+
+        <div className="mt-6 flex items-center space-x-4">
+          <Button
+            type="submit"
+            isLoading={isLoading}
+            isDisabled={!isDirty || isSubmitting || isLoading || !isValid}
+          >
+            Import data
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { ExternalMigrationsTab } from "./ExternalMigrationsTab";
@@ -1 +0,0 @@
-export { ImportTab } from "./ImportTab";
@@ -5,7 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";

 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
-import { ImportTab } from "../ImportTab";
+import { ExternalMigrationsTab } from "../ExternalMigrationsTab";
 import { KmipTab } from "../KmipTab/OrgKmipTab";
 import { OrgEncryptionTab } from "../OrgEncryptionTab";
 import { OrgGeneralTab } from "../OrgGeneralTab";
@@ -39,7 +39,11 @@ export const OrgTabGroup = () => {
      component: OrgWorkflowIntegrationTab
    },
    { name: "Audit Log Streams", key: "tag-audit-log-streams", component: AuditLogStreamsTab },
-    { name: "Import", key: "tab-import", component: ImportTab },
+    {
+      name: "External Migrations",
+      key: "tab-external-migrations",
+      component: ExternalMigrationsTab
+    },
    {
      name: "Project Templates",
      key: "project-templates",
@@ -0,0 +1,27 @@
+import { Helmet } from "react-helmet";
+
+import { PageHeader } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { LogsSection } from "@app/pages/organization/AuditLogsPage/components";
+
+export const AuditLogsPage = () => {
+  const { currentWorkspace } = useWorkspace();
+
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <Helmet>
+        <title>Project Audit Logs</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Helmet>
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader
+            title="Audit logs"
+            description="Audit logs for security and compliance teams to monitor information access."
+          />
+          <LogsSection pageView project={currentWorkspace} />
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AuditLogsPage } from "./AuditLogsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/cert-management/$projectId/_cert-manager-layout/audit-logs"
+)({
+  component: AuditLogsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Audit Logs"
+        }
+      ]
+    };
+  }
+});
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AuditLogsPage } from "./AuditLogsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/kms/$projectId/_kms-layout/audit-logs"
+)({
+  component: AuditLogsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Audit Logs"
+        }
+      ]
+    };
+  }
+});
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AuditLogsPage } from "./AuditLogsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/secret-management/$projectId/_secret-manager-layout/audit-logs"
+)({
+  component: AuditLogsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Audit Logs"
+        }
+      ]
+    };
+  }
+});
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AuditLogsPage } from "./AuditLogsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/secret-scanning/$projectId/_secret-scanning-layout/audit-logs"
+)({
+  component: AuditLogsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Audit Logs"
+        }
+      ]
+    };
+  }
+});
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { AuditLogsPage } from "./AuditLogsPage";
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/projects/ssh/$projectId/_ssh-layout/audit-logs"
+)({
+  component: AuditLogsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Audit Logs"
+        }
+      ]
+    };
+  }
+});
@@ -10,13 +10,12 @@ import {
  faArrowRight,
  faArrowRightToBracket,
  faArrowUp,
-  faFileImport,
+  faFilter,
  faFingerprint,
  faFolder,
  faFolderBlank,
  faFolderPlus,
  faKey,
-  faList,
  faPlus,
  faRotate
 } from "@fortawesome/free-solid-svg-icons";
@@ -96,7 +95,12 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
 import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
-import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
+import {
+  SecretType,
+  SecretV3RawSanitized,
+  TSecretFolder,
+  WorkspaceEnv
+} from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import {
  useDynamicSecretOverview,
@@ -135,7 +139,6 @@ enum RowType {
  Folder = "folder",
  DynamicSecret = "dynamic",
  Secret = "secret",
-  Import = "import",
  SecretRotation = "rotation"
 }

@@ -144,11 +147,10 @@ type Filter = {
 };

 const DEFAULT_FILTER_STATE = {
-  [RowType.Folder]: true,
-  [RowType.DynamicSecret]: true,
-  [RowType.Secret]: true,
-  [RowType.Import]: true,
-  [RowType.SecretRotation]: true
+  [RowType.Folder]: false,
+  [RowType.DynamicSecret]: false,
+  [RowType.Secret]: false,
+  [RowType.SecretRotation]: false
 };

 const DEFAULT_COLLAPSED_HEADER_HEIGHT = 120;
@@ -265,11 +267,8 @@ export const OverviewPage = () => {
    )
  );

-  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
-
-  useEffect(() => {
-    setVisibleEnvs(userAvailableEnvs);
-  }, [userAvailableEnvs]);
+  const [filteredEnvs, setFilteredEnvs] = useState<WorkspaceEnv[]>([]);
+  const visibleEnvs = filteredEnvs.length ? filteredEnvs : userAvailableEnvs;

  const {
    secretImports,
@@ -282,6 +281,7 @@ export const OverviewPage = () => {
    environments: (userAvailableEnvs || []).map(({ slug }) => slug)
  });

+  const isFilteredByResources = Object.values(filter).some(Boolean);
  const { isPending: isOverviewLoading, data: overview } = useGetProjectSecretsOverview(
    {
      projectId: workspaceId,
@@ -289,11 +289,11 @@ export const OverviewPage = () => {
      secretPath,
      orderDirection,
      orderBy,
-      includeFolders: filter.folder,
-      includeDynamicSecrets: filter.dynamic,
-      includeSecrets: filter.secret,
-      includeImports: filter.import,
-      includeSecretRotations: filter.rotation,
+      includeFolders: isFilteredByResources ? filter.folder : true,
+      includeDynamicSecrets: isFilteredByResources ? filter.dynamic : true,
+      includeSecrets: isFilteredByResources ? filter.secret : true,
+      includeImports: true,
+      includeSecretRotations: isFilteredByResources ? filter.rotation : true,
      search: debouncedSearchFilter,
      limit,
      offset
@@ -529,10 +529,10 @@ export const OverviewPage = () => {
  };

  const handleEnvSelect = (envId: string) => {
-    if (visibleEnvs.map((env) => env.id).includes(envId)) {
-      setVisibleEnvs(visibleEnvs.filter((env) => env.id !== envId));
+    if (filteredEnvs.map((env) => env.id).includes(envId)) {
+      setFilteredEnvs(filteredEnvs.filter((env) => env.id !== envId));
    } else {
-      setVisibleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
+      setFilteredEnvs(filteredEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
    }
  };

@@ -792,11 +792,11 @@ export const OverviewPage = () => {
    envNames: string[],
    envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
  ): ProjectSecretsImportedBy[] => {
-    const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
+    const environments = envs.filter((env) => envNames.includes(env.environment));

-    if (filteredEnvs.length === 0) return [];
+    if (environments.length === 0) return [];

-    const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
+    const allImportedBy = environments.flatMap((env) => env.importedBy);
    const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};

    allImportedBy.forEach((item) => {
@@ -902,9 +902,7 @@ export const OverviewPage = () => {

  const isTableEmpty = totalCount === 0;

-  const isTableFiltered =
-    Boolean(Object.values(filter).filter((enabled) => !enabled).length) ||
-    userAvailableEnvs.length !== visibleEnvs.length;
+  const isTableFiltered = isFilteredByResources || filteredEnvs.length > 0;

  if (!isProjectV3)
    return (
@@ -969,26 +967,42 @@ export const OverviewPage = () => {
        <div className="mt-4 flex items-center justify-between">
          <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
          <div className="flex flex-row items-center justify-center space-x-2">
+            {isTableFiltered && (
+              <Button
+                variant="plain"
+                colorSchema="secondary"
+                onClick={() => {
+                  setFilteredEnvs([]);
+                  setFilter(DEFAULT_FILTER_STATE);
+                }}
+              >
+                Clear Filters
+              </Button>
+            )}
            {userAvailableEnvs.length > 0 && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
-                  <IconButton
-                    ariaLabel="Environments"
-                    variant="plain"
+                  <Button
                    size="sm"
+                    variant="outline_bg"
                    className={twMerge(
-                      "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
-                      isTableFiltered && "border-primary/50 text-primary"
+                      "flex h-[2.5rem]",
+                      isTableFiltered && "border-primary/40 bg-primary/10"
                    )}
+                    leftIcon={
+                      <FontAwesomeIcon
+                        icon={faFilter}
+                        className={isTableFiltered ? "text-primary/80" : undefined}
+                      />
+                    }
                  >
-                    <Tooltip content="Choose visible environments" className="mb-2">
-                      <FontAwesomeIcon icon={faList} />
-                    </Tooltip>
-                  </IconButton>
+                    Filters
+                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  className="thin-scrollbar max-h-[70vh] overflow-y-auto"
                  align="end"
+                  sideOffset={2}
                >
                  {/* <DropdownMenuItem className="px-1.5" asChild>
                    <Button
@@ -1002,20 +1016,8 @@ export const OverviewPage = () => {
                      Create an environment
                    </Button>
                  </DropdownMenuItem> */}
-                  <DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
-                  <DropdownMenuItem
-                    onClick={(e) => {
-                      e.preventDefault();
-                      handleToggleRowType(RowType.Import);
-                    }}
-                    icon={filter[RowType.Import] && <FontAwesomeIcon icon={faCheckCircle} />}
-                    iconPos="right"
-                  >
-                    <div className="flex items-center gap-2">
-                      <FontAwesomeIcon icon={faFileImport} className="text-green-700" />
-                      <span>Imports</span>
-                    </div>
-                  </DropdownMenuItem>
+                  <DropdownMenuLabel>Filter by Resource</DropdownMenuLabel>
+
                  <DropdownMenuItem
                    onClick={(e) => {
                      e.preventDefault();
@@ -1070,11 +1072,11 @@ export const OverviewPage = () => {
                      <span>Secrets</span>
                    </div>
                  </DropdownMenuItem>
-                  <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
+                  <DropdownMenuLabel>Filter by Environment</DropdownMenuLabel>
                  {userAvailableEnvs.map((availableEnv) => {
                    const { id: envId, name } = availableEnv;

-                    const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                    const isEnvSelected = filteredEnvs.map((env) => env.id).includes(envId);
                    return (
                      <DropdownMenuItem
                        onClick={(e) => {
@@ -1082,7 +1084,6 @@ export const OverviewPage = () => {
                          handleEnvSelect(envId);
                        }}
                        key={envId}
-                        disabled={visibleEnvs?.length === 1}
                        icon={isEnvSelected && <FontAwesomeIcon icon={faCheckCircle} />}
                        iconPos="right"
                      >
@@ -1405,13 +1406,6 @@ export const OverviewPage = () => {
                    className="bg-mineshaft-700"
                  />
                )}
-                {userAvailableEnvs.length > 0 && visibleEnvs.length === 0 && (
-                  <Tr>
-                    <Td colSpan={visibleEnvs.length + 1}>
-                      <EmptyState title="You have no visible environments" iconSize="3x" />
-                    </Td>
-                  </Tr>
-                )}
                {userAvailableEnvs.length === 0 && (
                  <Tr>
                    <Td colSpan={visibleEnvs.length + 1}>
@@ -1444,8 +1438,8 @@ export const OverviewPage = () => {
                    <Td colSpan={visibleEnvs.length + 1}>
                      <EmptyState
                        title={
-                          debouncedSearchFilter
-                            ? "No secret found for your search, add one now"
+                          isTableFiltered || debouncedSearchFilter
+                            ? "No secrets found for your search, add one now"
                            : "Let's add some secrets"
                        }
                        icon={faFolderBlank}
@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { subject } from "@casl/ability";
@@ -53,6 +53,7 @@ import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { useCreateCommit } from "@app/hooks/api/secrets/mutations";
 import { SecretV3RawSanitized } from "@app/hooks/api/types";
 import { usePathAccessPolicies } from "@app/hooks/usePathAccessPolicies";
+import { useResizableColWidth } from "@app/hooks/useResizableColWidth";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { RequestAccessModal } from "@app/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal";
 import { SecretRotationListView } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView";
@@ -104,6 +105,8 @@ const Page = () => {
  const { permission } = useProjectPermission();
  const { mutateAsync: createCommit } = useCreateCommit();

+  const tableRef = useRef<HTMLDivElement>(null);
+
  const [isVisible, setIsVisible] = useState(false);
  const { isBatchMode, pendingChanges } = useBatchMode();
  const { loadPendingChanges, setExistingKeys } = useBatchModeActions();
@@ -212,11 +215,11 @@ const Page = () => {
    searchFilter: (routerQueryParams.search as string) || "",
    // these should always be on by default for the UI, they will be disabled for the query below based off permissions
    include: {
-      [RowType.Folder]: true,
-      [RowType.Import]: true,
-      [RowType.DynamicSecret]: true,
-      [RowType.Secret]: true,
-      [RowType.SecretRotation]: true
+      [RowType.Folder]: false,
+      [RowType.Import]: false,
+      [RowType.DynamicSecret]: false,
+      [RowType.Secret]: false,
+      [RowType.SecretRotation]: false
    }
  };

@@ -242,6 +245,7 @@ const Page = () => {
    }
  }, [currentWorkspace, environment]);

+  const isResourceTypeFiltered = Object.values(filter.include).some(Boolean);
  const {
    data,
    isPending: isDetailsLoading,
@@ -255,12 +259,14 @@ const Page = () => {
    orderBy,
    search: debouncedSearchFilter,
    orderDirection,
-    includeImports: canReadSecretImports && filter.include.import,
-    includeFolders: filter.include.folder,
+    includeImports: canReadSecretImports && (isResourceTypeFiltered ? filter.include.import : true),
+    includeFolders: isResourceTypeFiltered ? filter.include.folder : true,
    viewSecretValue: canReadSecretValue,
-    includeDynamicSecrets: canReadDynamicSecret && filter.include.dynamic,
-    includeSecrets: canReadSecret && filter.include.secret,
-    includeSecretRotations: canReadSecretRotations && filter.include.rotation,
+    includeDynamicSecrets:
+      canReadDynamicSecret && (isResourceTypeFiltered ? filter.include.dynamic : true),
+    includeSecrets: canReadSecret && (isResourceTypeFiltered ? filter.include.secret : true),
+    includeSecretRotations:
+      canReadSecretRotations && (isResourceTypeFiltered ? filter.include.rotation : true),
    tags: filter.tags
  });

@@ -480,6 +486,14 @@ const Page = () => {
    handlePopUpClose("snapshots");
  }, []);

+  const { handleMouseDown, isResizing, colWidth } = useResizableColWidth({
+    initialWidth: 320,
+    minWidth: 100,
+    maxWidth: tableRef.current
+      ? tableRef.current.clientWidth - 148 // ensure value column can't collapse completely
+      : 800
+  });
+
  useEffect(() => {
    // restore filters for path if set
    const restore = filterHistory.get(secretPath);
@@ -769,8 +783,22 @@ const Page = () => {
            isPITEnabled={isPITEnabled}
            hasPathPolicies={hasPathPolicies}
            onRequestAccess={(params) => handlePopUpOpen("requestAccess", params)}
+            onClearFilters={() =>
+              setFilter((prev) => ({
+                ...prev,
+                tags: {},
+                include: {
+                  secret: false,
+                  import: false,
+                  dynamic: false,
+                  rotation: false,
+                  folder: false
+                }
+              }))
+            }
          />
          <div
+            ref={tableRef}
            className={twMerge(
              "thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
              isNotEmpty && "rounded-b-none"
@@ -804,20 +832,34 @@ const Page = () => {
                      />
                    </div>
                  </Tooltip>
-                  <div
-                    className="flex w-80 flex-shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
-                    role="button"
-                    tabIndex={0}
-                    onClick={handleSortToggle}
-                    onKeyDown={(evt) => {
-                      if (evt.key === "Enter") handleSortToggle();
-                    }}
-                  >
-                    Key
-                    <FontAwesomeIcon
-                      icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
-                      className="ml-2"
+                  <div className="relative">
+                    <div
+                      tabIndex={-1}
+                      role="button"
+                      className={`absolute -right-[0.05rem] z-40 h-full w-0.5 cursor-ew-resize hover:bg-blue-400/20 ${
+                        isResizing ? "bg-blue-400/75" : "bg-transparent"
+                      }`}
+                      onMouseDown={handleMouseDown}
                    />
+                    <div className="pointer-events-none absolute -right-[0.04rem] top-2 z-30">
+                      <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
+                    </div>
+                    <div
+                      className="flex flex-shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
+                      style={{ width: colWidth }}
+                      role="button"
+                      tabIndex={0}
+                      onClick={handleSortToggle}
+                      onKeyDown={(evt) => {
+                        if (evt.key === "Enter") handleSortToggle();
+                      }}
+                    >
+                      Key
+                      <FontAwesomeIcon
+                        icon={orderDirection === OrderByDirection.ASC ? faArrowDown : faArrowUp}
+                        className="ml-2"
+                      />
+                    </div>
                  </div>
                  <div className="flex-grow px-4 py-2">Value</div>
                </div>
@@ -911,6 +953,7 @@ const Page = () => {
              )}
              {canReadSecret && Boolean(mergedSecrets?.length) && (
                <SecretListView
+                  colWidth={colWidth}
                  secrets={mergedSecrets}
                  tags={tags}
                  isVisible={isVisible}
@@ -136,6 +136,7 @@ type Props = {
  isPITEnabled: boolean;
  onRequestAccess: (actions: ProjectPermissionActions[]) => void;
  hasPathPolicies: boolean;
+  onClearFilters: () => void;
 };

 export const ActionBar = ({
@@ -159,7 +160,8 @@ export const ActionBar = ({
  isPITEnabled = false,
  usedBySecretSyncs,
  onRequestAccess,
-  hasPathPolicies
+  hasPathPolicies,
+  onClearFilters
 }: Props) => {
  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
    "addFolder",
@@ -661,6 +663,9 @@ export const ActionBar = ({
    }
  };

+  const isTableFiltered =
+    Object.values(filter.tags).some(Boolean) || Object.values(filter.include).some(Boolean);
+
  return (
    <>
      <div className="mt-4 flex items-center space-x-2">
@@ -676,18 +681,22 @@ export const ActionBar = ({
        <div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
-              <IconButton
+              <Button
+                size="sm"
                variant="outline_bg"
-                ariaLabel="Download"
                className={twMerge(
-                  "transition-all",
-                  (Object.keys(filter.tags).length ||
-                    Object.values(filter.include).filter((include) => !include).length) &&
-                    "border-primary/50 text-primary"
+                  "flex h-[2.5rem]",
+                  isTableFiltered && "border-primary/40 bg-primary/10"
                )}
+                leftIcon={
+                  <FontAwesomeIcon
+                    icon={faFilter}
+                    className={isTableFiltered ? "text-primary/80" : undefined}
+                  />
+                }
              >
-                <FontAwesomeIcon icon={faFilter} />
-              </IconButton>
+                Filters
+              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="p-0">
              <DropdownMenuGroup>Filter By</DropdownMenuGroup>
@@ -762,51 +771,62 @@ export const ActionBar = ({
                  <span>Secrets</span>
                </div>
              </DropdownMenuItem>
-              <DropdownSubMenu>
-                <DropdownSubMenuTrigger
-                  iconPos="right"
-                  icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
-                >
-                  Tags
-                </DropdownSubMenuTrigger>
-                <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
-                  <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
-                    Apply Tags to Filter Secrets
-                  </DropdownMenuLabel>
-                  {tags.map(({ id, slug, color }) => (
-                    <DropdownMenuItem
-                      onClick={(evt) => {
-                        evt.preventDefault();
-                        onToggleTagFilter(slug);
-                      }}
-                      key={id}
-                      icon={filter?.tags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
-                      iconPos="right"
-                    >
-                      <div className="flex items-center">
-                        <div
-                          className="mr-2 h-2 w-2 rounded-full"
-                          style={{ background: color || "#bec2c8" }}
-                        />
-                        {slug}
-                      </div>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownSubMenuContent>
-              </DropdownSubMenu>
+              {Boolean(tags.length) && (
+                <DropdownSubMenu>
+                  <DropdownSubMenuTrigger
+                    iconPos="right"
+                    icon={<FontAwesomeIcon icon={faChevronRight} size="sm" />}
+                  >
+                    Tags
+                  </DropdownSubMenuTrigger>
+                  <DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
+                    <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
+                      Apply Tags to Filter Secrets
+                    </DropdownMenuLabel>
+                    {tags.map(({ id, slug, color }) => (
+                      <DropdownMenuItem
+                        onClick={(evt) => {
+                          evt.preventDefault();
+                          onToggleTagFilter(slug);
+                        }}
+                        key={id}
+                        icon={filter?.tags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
+                        iconPos="right"
+                      >
+                        <div className="flex items-center">
+                          <div
+                            className="mr-2 h-2 w-2 rounded-full"
+                            style={{ background: color || "#bec2c8" }}
+                          />
+                          {slug}
+                        </div>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownSubMenuContent>
+                </DropdownSubMenu>
+              )}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
+        {isTableFiltered && (
+          <Button variant="plain" colorSchema="secondary" onClick={onClearFilters}>
+            Clear Filters
+          </Button>
+        )}
+        <div className="flex-grow" />
        <div>
          {isProtectedBranch && (
            <Tooltip content={`Protected by policy ${protectedBranchPolicyName}`}>
-              <IconButton variant="outline_bg" ariaLabel="protected">
+              <IconButton
+                variant="outline_bg"
+                className="border-primary/40 bg-primary/10"
+                ariaLabel="protected"
+              >
                <FontAwesomeIcon icon={faLock} className="text-primary" />
              </IconButton>
            </Tooltip>
          )}
        </div>
-        <div className="flex-grow" />
        <div>
          <IconButton variant="outline_bg" ariaLabel="Download" onClick={handleSecretDownload}>
            <FontAwesomeIcon icon={faDownload} />
@@ -235,7 +235,7 @@ export const FolderListView = ({
            )}
          </div>
          {isPending ? (
-            <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
+            <div className="flex w-16 items-center justify-between border-l border-mineshaft-600 px-3 py-3">
              <IconButton
                ariaLabel="edit-folder"
                variant="plain"
@@ -90,6 +90,7 @@ type Props = {
  }[];
  isPending?: boolean;
  pendingAction?: PendingAction;
+  colWidth: number;
 };

 export const SecretItem = memo(
@@ -108,7 +109,8 @@ export const SecretItem = memo(
    handleSecretShare,
    importedBy,
    isPending,
-    pendingAction
+    pendingAction,
+    colWidth
  }: Props) => {
    const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
      "editSecret"
@@ -383,7 +385,10 @@ export const SecretItem = memo(
                </>
              )}
            </div>
-            <div className="flex h-11 w-80 flex-shrink-0 items-center px-4 py-2">
+            <div
+              className="flex h-11 flex-shrink-0 items-center px-4 py-2"
+              style={{ width: colWidth }}
+            >
              <Controller
                name="key"
                control={control}
@@ -51,6 +51,7 @@ type Props = {
      isImported: boolean;
    }[];
  }[];
+  colWidth: number;
 };

 export const SecretListView = ({
@@ -62,7 +63,8 @@ export const SecretListView = ({
  isVisible,
  isProtectedBranch = false,
  usedBySecretSyncs,
-  importedBy
+  importedBy,
+  colWidth
 }: Props) => {
  const queryClient = useQueryClient();
  const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -554,6 +556,7 @@ export const SecretListView = ({
      ))}
      {secrets.map((secret) => (
        <SecretItem
+          colWidth={colWidth}
          environment={environment}
          secretPath={secretPath}
          tags={wsTags}
				`@@ -0,0 +1 @@`
				`export { ExternalMigrationsTab } from "./ExternalMigrationsTab";`