Merge pull request #1419 from Infisical/integration-update-heroku

Integration update heroku
2026-10-14 00:29:34 +00:00 · 2024-03-09 19:15:00 -08:00
parent 0cb6d052e0 89e109e404
commit f1b7653a52
35 changed files with 2027 additions and 289 deletions
@@ -0,0 +1,40 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { twMerge } from "tailwind-merge";
+
+export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
+
+// Note this component is not customizable (Heroku integration and potentially other pages depend on it)
+export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
+  <RadioGroupPrimitive.Root 
+    className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
+    defaultValue="App"
+    aria-label="View density"
+    {...props}
+  >  
+    <div className="flex items-center">
+      <RadioGroupPrimitive.Item
+        className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        value="App"
+        id="r1"
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
+      </RadioGroupPrimitive.Item>
+      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
+        App
+      </label>
+    </div>
+    <div className="flex items-center">
+      <RadioGroupPrimitive.Item
+        className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
+        value="Pipeline"
+        id="r2"
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
+      </RadioGroupPrimitive.Item>
+      <label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
+        Pipeline
+      </label>
+    </div>
+  </RadioGroupPrimitive.Root>
+);
@@ -0,0 +1,2 @@
+export type { RadioGroupProps } from "./RadioGroup";
+export { RadioGroup } from "./RadioGroup";
@@ -8,6 +8,7 @@ import {
  BitBucketWorkspace,
  ChecklyGroup,
  Environment,
+  HerokuPipelineCoupling,
  IntegrationAuth,
  NorthflankSecretGroup,
  Org,
@@ -63,6 +64,8 @@ const integrationAuthKeys = {
    environmentId: string;
    scope: "job" | "application" | "container";
  }) => [{ integrationAuthId, environmentId, scope }, "integrationAuthQoveryScopes"] as const,
+  getIntegrationAuthHerokuPipelines: ({ integrationAuthId }: { integrationAuthId: string; }) => 
+  [{ integrationAuthId}, "integrationAuthHerokuPipelines"] as const,
  getIntegrationAuthRailwayEnvironments: ({
    integrationAuthId,
    appId
@@ -289,6 +292,20 @@ const fetchIntegrationAuthQoveryScopes = async ({
  return undefined;
 };

+const fetchIntegrationAuthHerokuPipelines = async ({ integrationAuthId }: { 
+  integrationAuthId: string; 
+}) => {
+  const {
+    data: { pipelines }
+  } = await apiRequest.get<{ pipelines: HerokuPipelineCoupling[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/heroku/pipelines`
+  );
+
+  console.log(99999, pipelines)
+
+  return pipelines;
+};
+
 const fetchIntegrationAuthRailwayEnvironments = async ({
  integrationAuthId,
  appId
@@ -540,6 +557,23 @@ export const useGetIntegrationAuthQoveryScopes = ({
  });
 };

+export const useGetIntegrationAuthHerokuPipelines = ({
+  integrationAuthId
+}: {
+  integrationAuthId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthHerokuPipelines({
+      integrationAuthId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthHerokuPipelines({
+        integrationAuthId
+      }),
+    enabled: true
+  });
+};
+
 export const useGetIntegrationAuthRailwayEnvironments = ({
  integrationAuthId,
  appId
@@ -17,6 +17,17 @@ export type App = {
  secretGroups?: string[];
 };

+export type Pipeline = {
+  pipelineId: string;
+  name: string;
+};
+
+export type HerokuPipelineCoupling = {
+  app: { appId: string };
+  stage: string;
+  pipeline: { pipelineId: string; name: string };
+};
+
 export type Team = {
  name: string;
  teamId: string;
@@ -61,6 +61,7 @@ export const useCreateIntegration = () => {
      metadata?: {
        secretPrefix?: string;
        secretSuffix?: string;
+        initialSyncBehavior?: string;
      }
    }) => {
      const { data: { integration } } = await apiRequest.post("/api/v1/integration", {
@@ -33,9 +33,16 @@ export type TIntegration = {
  __v: number;
  metadata?: {
    secretSuffix?: string;
+    syncBehavior?: IntegrationSyncBehavior;
    scope: string;
    org: string;
    project: string;
    environment: string;
  };
 };
+
+export enum IntegrationSyncBehavior {
+  OVERWRITE_TARGET = "overwrite-target",
+  PREFER_TARGET = "prefer-target",
+  PREFER_SOURCE = "prefer-source"
+}
@@ -1,8 +1,25 @@
 import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import { 
+  faArrowUpRightFromSquare, 
+  faBookOpen, 
+  faBugs, 
+  // faCircleInfo 
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
 import queryString from "query-string";
+// import { useGetIntegrationAuthHerokuPipelines } from "@app/hooks/api/integrationAuth/queries";
+// import { App, Pipeline } from "@app/hooks/api/integrationAuth/types";
+import * as yup from "yup";

+// import { RadioGroup } from "@app/components/v2/RadioGroup";
 import { useCreateIntegration } from "@app/hooks/api";
+import { IntegrationSyncBehavior } from "@app/hooks/api/integrations/types";

 import {
  Button,
@@ -17,54 +34,172 @@ import {
  useGetIntegrationAuthApps,
  useGetIntegrationAuthById
 } from "../../../hooks/api/integrationAuth";
-import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import { 
+  // useCreateWsEnvironment, 
+  useGetWorkspaceById 
+} from "../../../hooks/api/workspace";
+
+const initialSyncBehaviors = [
+  { label: "No Import - Overwrite all values in Heroku", value: IntegrationSyncBehavior.OVERWRITE_TARGET },
+  { label: "Import - Prefer values from Heroku", value: IntegrationSyncBehavior.PREFER_TARGET },
+  { label: "Import - Prefer values from Infisical", value: IntegrationSyncBehavior.PREFER_SOURCE }
+];
+
+const schema = yup.object({
+  selectedSourceEnvironment: yup.string().required("Source environment is required"),
+  secretPath: yup.string().required("Secret path is required"),
+  targetApp: yup.string().required("Heroku app is required"),
+  initialSyncBehavior: yup
+    .string()
+    .oneOf(initialSyncBehaviors.map((b) => b.value), "Invalid initial sync behavior")
+    .required("Initial sync behavior is required")
+});
+
+type FormData = yup.InferType<typeof schema>;

 export default function HerokuCreateIntegrationPage() {
  const router = useRouter();
+  
+  const { control, handleSubmit, setValue, watch } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      secretPath: "/",
+      initialSyncBehavior: IntegrationSyncBehavior.PREFER_SOURCE
+    }
+  });
+
+  const selectedSourceEnvironment = watch("selectedSourceEnvironment");
+
+
  const { mutateAsync } = useCreateIntegration();
+  // const { mutateAsync: mutateAsyncEnv } = useCreateWsEnvironment();

  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);

  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
-  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+  const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading  } = useGetIntegrationAuthApps({
    integrationAuthId: (integrationAuthId as string) ?? ""
  });

-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [targetApp, setTargetApp] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-
+  // const { data: integrationAuthPipelineCouplings } = useGetIntegrationAuthHerokuPipelines({
+  //   integrationAuthId: (integrationAuthId as string) ?? ""
+  // });
+  
+  // const [uniquePipelines, setUniquePipelines] = useState<Pipeline[]>();
+  // const [selectedPipeline, setSelectedPipeline] = useState("");
+  // const [selectedPipelineApps, setSelectedPipelineApps] = useState<App[]>();
+  // const [integrationType, setIntegrationType] = useState("App");
+  
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (workspace) {
-      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setValue("selectedSourceEnvironment", workspace.environments[0].slug);
    }
  }, [workspace]);

+  // useEffect(() => {
+  //   if (integrationAuthPipelineCouplings) {
+  //       const uniquePipelinesConst = Array.from(
+  //         new Set(
+  //           integrationAuthPipelineCouplings
+  //             .map(({ pipeline: { pipelineId, name } }) => ({
+  //               name,
+  //               pipelineId
+  //             }))
+  //             .map((obj) => JSON.stringify(obj))
+  //         )).map((str) => JSON.parse(str)) as { pipelineId: string; name: string }[]
+          
+  //         [... (new Set())]
+  //       setUniquePipelines(uniquePipelinesConst);
+  //       if (uniquePipelinesConst) {
+  //         if (uniquePipelinesConst!.length > 0) {
+  //           setSelectedPipeline(uniquePipelinesConst![0].name);
+  //         } else {
+  //           setSelectedPipeline("none");
+  //         }
+  //       }
+  //   }
+  // }, [integrationAuthPipelineCouplings]);
+
+  // useEffect(() => {
+  //   if (integrationAuthPipelineCouplings) {
+  //     setSelectedPipelineApps(integrationAuthApps?.filter(app => integrationAuthPipelineCouplings
+  //       .filter((pipelineCoupling) => pipelineCoupling.pipeline.name === selectedPipeline)
+  //       .map(coupling => coupling.app.appId).includes(String(app.appId))))
+  //   }
+  // }, [selectedPipeline]);
+
  useEffect(() => {
    if (integrationAuthApps) {
      if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
+        setValue("targetApp", integrationAuthApps[0].name);
      } else {
-        setTargetApp("none");
+        setValue("targetApp", "none");
      }
    }
  }, [integrationAuthApps]);

-  const handleButtonClick = async () => {
-    try {
-      setIsLoading(true);
+  // const handleButtonClick = async () => {
+  //   try {
+  //     setIsLoading(true);

+  //     if (!integrationAuth?.id) return;
+
+  //     if (integrationType === "App") {
+  //       await mutateAsync({
+  //         integrationAuthId: integrationAuth?.id,
+  //         isActive: true,
+  //         app: targetApp,
+  //         sourceEnvironment: selectedSourceEnvironment,
+  //         secretPath
+  //       });
+  //     } else if (integrationType === "Pipeline") {
+  //       selectedPipelineApps?.map(async (app, index) => {
+  //         setTimeout(async () => {
+  //           await mutateAsyncEnv({
+  //             workspaceId: String(localStorage.getItem("projectData.id")),
+  //             name: app.name,
+  //             slug: app.name.toLowerCase().replaceAll(" ", "-")
+  //           });
+  //           await mutateAsync({
+  //             integrationAuthId: integrationAuth?.id,
+  //             isActive: true,
+  //             app: app.name,
+  //             sourceEnvironment: app.name.toLowerCase().replaceAll(" ", "-"),
+  //             secretPath
+  //           })
+  //         }, 1000*index)
+  //       })
+  //     }
+
+  //     setIsLoading(false);
+  //     router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+  //   } catch (err) {
+  //     console.error(err);
+  //   }
+  // };
+
+  const onFormSubmit = async ({
+    secretPath,
+    targetApp,
+    initialSyncBehavior,
+  }: FormData) => {
+    try {
      if (!integrationAuth?.id) return;

+      setIsLoading(true);
+
      await mutateAsync({
        integrationAuthId: integrationAuth?.id,
        isActive: true,
        app: targetApp,
        sourceEnvironment: selectedSourceEnvironment,
-        secretPath
+        secretPath,
+        metadata: {
+          initialSyncBehavior
+        }
      });

      setIsLoading(false);
@@ -72,75 +207,203 @@ export default function HerokuCreateIntegrationPage() {
    } catch (err) {
      console.error(err);
    }
-  };
+  }

  return integrationAuth &&
    workspace &&
    selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetApp ? (
-    <div className="flex h-full w-full items-center justify-center">
-      <Card className="max-w-md rounded-md p-8">
-        <CardTitle className="text-center">Heroku Integration</CardTitle>
-        <FormControl label="Project Environment" className="mt-4">
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className="w-full border border-mineshaft-500"
-          >
-            {workspace?.environments.map((sourceEnvironment) => (
-              <SelectItem
-                value={sourceEnvironment.slug}
-                key={`source-environment-${sourceEnvironment.slug}`}
+    integrationAuthApps ? (
+    <div className="flex flex-col h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Heroku Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="max-w-lg rounded-md border border-mineshaft-600 p-0">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="Select which environment or folder in Infisical you want to sync to Heroku's environment variables."
+        >
+          <div className="flex flex-row items-center">
+            <div className="flex items-center">
+              <Image
+                src="/images/integrations/Heroku.png"
+                height={30}
+                width={30}
+                alt="Heroku logo"
+              />
+            </div>
+            <span className="ml-2">Heroku Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cloud/heroku" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default 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" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                  />
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="px-6">
+          <Controller
+            control={control}
+            name="selectedSourceEnvironment"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Project Environment"
+                errorText={error?.message}
+                isError={Boolean(error)}
              >
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl label="Secrets Path">
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {workspace?.environments.map((sourceEnvironment) => (
+                    <SelectItem
+                      value={sourceEnvironment.slug}
+                      key={`source-environment-${sourceEnvironment.slug}`}
+                    >
+                      {sourceEnvironment.name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
          />
-        </FormControl>
-        <FormControl label="Heroku App" className="mt-4">
-          <Select
-            value={targetApp}
-            onValueChange={(val) => setTargetApp(val)}
-            className="w-full border border-mineshaft-500"
+          <Controller
+            control={control}
+            defaultValue=""
+            name="secretPath"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Secrets Path"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="/" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="targetApp"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  label="Heroku App"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    {...field}
+                    onValueChange={(e) => {
+                      if (e === "") return;
+                      onChange(e);
+                    }}
+                    className="w-full"
+                  >
+                    {integrationAuthApps.length > 0 ? (
+                      integrationAuthApps.map((integrationAuthApp) => (
+                        <SelectItem
+                          value={String(integrationAuthApp.name as string)}
+                          key={`target-app-${String(integrationAuthApp.appId)}`}
+                        >
+                          {integrationAuthApp.name}
+                        </SelectItem>
+                      ))
+                    ) : (
+                      <SelectItem value="none" key="target-app-none">
+                        No apps found
+                      </SelectItem>
+                    )}
+                  </Select>
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name="initialSyncBehavior"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Initial Sync Behavior"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select {...field} onValueChange={(e) => onChange(e)} className="w-full">
+                  {initialSyncBehaviors.map((b) => {
+                    return (
+                      <SelectItem value={b.value} key={`sync-behavior-${b.value}`}>
+                        {b.label}
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Button
+            colorSchema="primary"
+            variant="outline_bg"
+            className="mb-6 mt-2 ml-auto"
+            size="sm"
+            type="submit"
+            isLoading={isLoading}
            isDisabled={integrationAuthApps.length === 0}
          >
-            {integrationAuthApps.length > 0 ? (
-              integrationAuthApps.map((integrationAuthApp) => (
-                <SelectItem
-                  value={integrationAuthApp.name}
-                  key={`target-app-${integrationAuthApp.name}`}
-                >
-                  {integrationAuthApp.name}
-                </SelectItem>
-              ))
-            ) : (
-              <SelectItem value="none" key="target-app-none">
-                No apps found
-              </SelectItem>
-            )}
-          </Select>
-        </FormControl>
-        <Button
-          onClick={handleButtonClick}
-          color="mineshaft"
-          className="mt-4"
-          isLoading={isLoading}
-          isDisabled={integrationAuthApps.length === 0}
-        >
-          Create Integration
-        </Button>
+            Create Integration
+          </Button>
+        </form>
      </Card>
+      {/* {integrationType === "App" && <>
+      <div className="mt-6 w-full max-w-md border-t border-mineshaft-800" />
+      <div className="mt-6 flex w-full max-w-lg flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4">
+        <div className="flex flex-row items-center">
+          <FontAwesomeIcon icon={faCircleInfo} className="text-xl text-mineshaft-200" />{" "}
+          <span className="text-md ml-3 text-mineshaft-100">Pro Tips</span>
+        </div>
+        <span className="mt-4 text-sm text-mineshaft-300">
+          After creating an integration, your secrets will start syncing immediately. This might
+          cause an unexpected override of current secrets in Heroku with secrets from Infisical.
+        </span>
+      </div></>} */}
    </div>
  ) : (
-    <div />
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Set Up Vercel Integration</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      {isIntegrationAuthAppsLoading ? (
+        <img
+          src="/images/loading/loading.gif"
+          height={70}
+          width={120}
+          alt="infisical loading indicator"
+        />
+      ) : (
+        <div className="flex h-max max-w-md flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 text-center text-mineshaft-200">
+          <FontAwesomeIcon icon={faBugs} className="inlineli my-2 text-6xl" />
+          <p>
+            Something went wrong. Please contact{" "}
+            <a
+              className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="mailto:[email protected]"
+            >
+              support@infisical.com
+            </a>{" "}
+            if the issue persists.
+          </p>
+        </div>
+      )}
+    </div>
  );
 }

@@ -62,7 +62,7 @@ export const IntegrationsSection = ({
              <Link href={`/project/${workspaceId}/settings`} passHref>
                <a className="underline underline-offset-2">project settings </a>
              </Link>
-              to re-enable it .
+              to re-enable it.
            </AlertDescription>
          </Alert>
        </div>
@@ -80,7 +80,7 @@ export const IntegrationsSection = ({
        <div className="flex flex-col space-y-4 p-6 pt-0">
          {integrations?.map((integration) => (
            <div
-              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3 pb-0"
              key={`integration-${integration?.id.toString()}`}
            >
              <div className="flex">
@@ -291,7 +291,7 @@ export const SecretDetailSidebar = ({
                      )}
                    </ProjectPermissionCan>
                    <DropdownMenuContent align="end" className="z-[100]">
-                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                      {tags.map((tag) => {
                        const { id: tagId, name, color } = tag;

@@ -325,7 +325,7 @@ export const SecretItem = memo(
                      )}
                    </ProjectPermissionCan>
                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                      {tags.map((tag) => {
                        const { id: tagId, name, color } = tag;

@@ -2,12 +2,14 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
 import { subject } from "@casl/ability";
 import {
  faAngleDown,
  faArrowDown,
  faArrowUp,
  faFolderBlank,
+  faList,
  faFolderPlus,
  faMagnifyingGlass,
  faPlus
@@ -21,6 +23,8 @@ import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
  DropdownMenuTrigger,
  EmptyState,
  IconButton,
@@ -104,6 +108,7 @@ export const SecretOverviewPage = () => {
  }, [isWorkspaceLoading, workspaceId, router.isReady]);

  const userAvailableEnvs = currentWorkspace?.environments || [];
+  const [visibleEnvs, setVisisbleEnvs] = useState(userAvailableEnvs);

  const {
    data: secrets,
@@ -201,6 +206,14 @@ export const SecretOverviewPage = () => {
    }
  };

+  const handleEnvSelect = (envId: string) => {
+    if (visibleEnvs.map(env => env.id).includes(envId)) {
+      setVisisbleEnvs(visibleEnvs.filter(env => env.id !== envId))
+    } else {
+      setVisisbleEnvs(visibleEnvs.concat(userAvailableEnvs.filter(env => env.id === envId)))
+    }
+  };
+
  const handleSecretUpdate = async (env: string, key: string, value: string, secretId?: string) => {
    try {
      await updateSecretV3({
@@ -277,7 +290,7 @@ export const SecretOverviewPage = () => {
      }
    }
    const query: Record<string, string> = { ...router.query, env: slug };
-    const envIndex = userAvailableEnvs.findIndex((el) => slug === el.slug);
+    const envIndex = visibleEnvs.findIndex((el) => slug === el.slug);
    if (envIndex !== -1) {
      router.push({
        pathname: "/project/[id]/secrets/[env]",
@@ -377,6 +390,52 @@ export const SecretOverviewPage = () => {
          <div className="flex items-center justify-between">
            <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
            <div className="flex flex-row items-center justify-center space-x-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <IconButton
+                    ariaLabel="Environments"
+                    variant="plain"
+                    size="sm"
+                    className="flex justify-center items-center overflow-hidden p-0 w-11 bg-mineshaft-800 hover:bg-primary/10 hover:border-primary/60 border border-mineshaft-600 mr-2"
+                  >
+                    <Tooltip content="Choose visible environments" className="mb-2">
+                      <FontAwesomeIcon icon={faList} />
+                    </Tooltip>
+                  </IconButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
+                  {userAvailableEnvs.map((avaiableEnv) => {
+                    const { id: envId, name } = avaiableEnv;
+
+                    const isEnvSelected = visibleEnvs.map(env => env.id).includes(envId);
+                    return (
+                      <DropdownMenuItem
+                        onClick={() => handleEnvSelect(envId)}
+                        key={envId}
+                        icon={isEnvSelected && <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />}
+                        iconPos="left"
+                      >
+                        <div className="flex items-center">
+                          {name}
+                        </div>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                  {/* <DropdownMenuItem className="px-1.5" asChild>
+                    <Button
+                      size="xs"
+                      className="w-full"
+                      colorSchema="primary"
+                      variant="outline_bg"
+                      leftIcon={<FontAwesomeIcon icon={faHockeyPuck} />}
+                      // onClick={onCreateTag}
+                    >
+                      Create an environment
+                    </Button>
+                  </DropdownMenuItem> */}
+                </DropdownMenuContent>
+              </DropdownMenu>
              <div className="w-80">
                <Input
                  className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -463,7 +522,7 @@ export const SecretOverviewPage = () => {
                      </IconButton>
                    </div>
                  </Th>
-                  {userAvailableEnvs?.map(({ name, slug }, index) => {
+                  {visibleEnvs?.map(({ name, slug }, index) => {
                    const envSecKeyCount = getEnvSecretKeyCount(slug);
                    const missingKeyCount = secKeys.length - envSecKeyCount;
                    return (
@@ -498,7 +557,7 @@ export const SecretOverviewPage = () => {
              <TBody>
                {canViewOverviewPage && isTableLoading && (
                  <TableSkeleton
-                    columns={userAvailableEnvs.length + 1}
+                    columns={visibleEnvs.length + 1}
                    innerKey="secret-overview-loading"
                    rows={5}
                    className="bg-mineshaft-700"
@@ -506,12 +565,12 @@ export const SecretOverviewPage = () => {
                )}
                {isTableEmpty && !isTableLoading && (
                  <Tr>
-                    <Td colSpan={userAvailableEnvs.length + 1}>
+                    <Td colSpan={visibleEnvs.length + 1}>
                      <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
                        <Link
                          href={{
                            pathname: "/project/[id]/secrets/[env]",
-                            query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
+                            query: { id: workspaceId, env: visibleEnvs?.[0]?.slug }
                          }}
                        >
                          <Button
@@ -520,7 +579,7 @@ export const SecretOverviewPage = () => {
                            colorSchema="primary"
                            size="md"
                          >
-                            Go to {userAvailableEnvs?.[0]?.name}
+                            Go to {visibleEnvs?.[0]?.name}
                          </Button>
                        </Link>
                      </EmptyState>
@@ -532,13 +591,13 @@ export const SecretOverviewPage = () => {
                    <SecretOverviewFolderRow
                      folderName={folderName}
                      isFolderPresentInEnv={isFolderPresentInEnv}
-                      environments={userAvailableEnvs}
+                      environments={visibleEnvs}
                      key={`overview-${folderName}-${index + 1}`}
                      onClick={handleFolderClick}
                    />
                  ))}
                {!isTableLoading &&
-                  (userAvailableEnvs?.length > 0 ? (
+                  (visibleEnvs?.length > 0 ? (
                    filteredSecretNames.map((key, index) => (
                      <SecretOverviewTableRow
                        secretPath={secretPath}
@@ -546,7 +605,7 @@ export const SecretOverviewPage = () => {
                        onSecretDelete={handleSecretDelete}
                        onSecretUpdate={handleSecretUpdate}
                        key={`overview-${key}-${index + 1}`}
-                        environments={userAvailableEnvs}
+                        environments={visibleEnvs}
                        secretKey={key}
                        getSecretByKey={getSecretByKey}
                        expandableColWidth={expandableTableWidth}
@@ -564,7 +623,7 @@ export const SecretOverviewPage = () => {
                      style={{ height: "45px" }}
                    />
                  </Td>
-                  {userAvailableEnvs.map(({ name, slug }) => (
+                  {visibleEnvs?.map(({ name, slug }) => (
                    <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
                      <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
                        <Button