From 5df140cbd5275fba87bb3009c6a7322b1d5d0183 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Wed, 4 Sep 2024 08:37:25 +0400
Subject: [PATCH] feat(dynamic-secrets): ElasticSearch support

---
 frontend/src/hooks/api/dynamicSecret/types.ts |  29 +-
 .../CreateDynamicSecretForm.tsx               |  33 +-
 .../ElasticSearchInputForm.tsx                | 395 ++++++++++++++++++
 .../CreateDynamicSecretLease.tsx              |  18 +
 .../EditDynamicSecretElasticSearchForm.tsx    | 391 +++++++++++++++++
 .../EditDynamicSecretForm.tsx                 |  19 +
 6 files changed, 878 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
 create mode 100644 frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx

diff --git a/frontend/src/hooks/api/dynamicSecret/types.ts b/frontend/src/hooks/api/dynamicSecret/types.ts
index 7076ea929..db852c333 100644
--- a/frontend/src/hooks/api/dynamicSecret/types.ts
+++ b/frontend/src/hooks/api/dynamicSecret/types.ts
@@ -21,7 +21,8 @@ export enum DynamicSecretProviders {
   AwsIam = "aws-iam",
   Redis = "redis",
   AwsElastiCache = "aws-elasticache",
-  MongoAtlas = "mongo-db-atlas"
+  MongoAtlas = "mongo-db-atlas",
+  ElasticSearch = "elastic-search"
 }
 
 export enum SqlProviders {
@@ -97,9 +98,9 @@ export type TDynamicSecretProvider =
         creationStatement: string;
         revocationStatement: string;
         ca?: string | undefined;
-      }
+      };
     }
-|{
+  | {
       type: DynamicSecretProviders.MongoAtlas;
       inputs: {
         adminPublicKey: string;
@@ -115,6 +116,28 @@ export type TDynamicSecretProvider =
           type: string;
         }[];
       };
+    }
+  | {
+      type: DynamicSecretProviders.ElasticSearch;
+      inputs: {
+        host: string;
+        port: number;
+        creationStatement: string;
+        revocationStatement: string;
+        ca?: string | undefined;
+
+        auth:
+          | {
+              type: "user";
+              username: string;
+              password: string;
+            }
+          | {
+              type: "api-key";
+              apiKey: string;
+              apiKeyId: string;
+            };
+      };
     };
 
 export type TCreateDynamicSecretDTO = {
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
index 52b3170a2..71b25e63c 100644
--- a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { SiApachecassandra,SiMongodb } from "react-icons/si";
+import { DiRedis } from "react-icons/di";
+import { SiApachecassandra, SiElasticsearch, SiMongodb } from "react-icons/si";
 import { faAws } from "@fortawesome/free-brands-svg-icons";
 import { faDatabase } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,6 +12,7 @@ import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { AwsElastiCacheInputForm } from "./AwsElastiCacheInputForm";
 import { AwsIamInputForm } from "./AwsIamInputForm";
 import { CassandraInputForm } from "./CassandraInputForm";
+import { ElasticSearchInputForm } from "./ElasticSearchInputForm";
 import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
 import { RedisInputForm } from "./RedisInputForm";
 import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
@@ -40,12 +42,12 @@ const DYNAMIC_SECRET_LIST = [
     title: "Cassandra"
   },
   {
-    icon:  <FontAwesomeIcon icon={faDatabase} size="lg" />,
+    icon: <DiRedis size="2rem" />,
     provider: DynamicSecretProviders.Redis,
     title: "Redis"
   },
   {
-    icon:  <FontAwesomeIcon icon={faAws} size="lg" />,
+    icon: <FontAwesomeIcon icon={faAws} size="lg" />,
     provider: DynamicSecretProviders.AwsElastiCache,
     title: "AWS ElastiCache"
   },
@@ -58,6 +60,11 @@ const DYNAMIC_SECRET_LIST = [
     icon: <SiMongodb size="2rem" />,
     provider: DynamicSecretProviders.MongoAtlas,
     title: "Mongo Atlas"
+  },
+  {
+    icon: <SiElasticsearch size="2rem" />,
+    provider: DynamicSecretProviders.ElasticSearch,
+    title: "Elastic Search"
   }
 ];
 
@@ -94,7 +101,7 @@ export const CreateDynamicSecretForm = ({
               exit={{ opacity: 0, translateX: -30 }}
             >
               <div className="mb-4 text-mineshaft-300">Select a service to connect to:</div>
-              <div className="flex items-center space-x-4">
+              <div className="flex flex-wrap items-center gap-4">
                 {DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
                   <div
                     key={`dynamic-secret-provider-${provider}`}
@@ -227,6 +234,24 @@ export const CreateDynamicSecretForm = ({
                 />
               </motion.div>
             )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.ElasticSearch && (
+              <motion.div
+                key="dynamic-elastic-search-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <ElasticSearchInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environment={environment}
+                />
+              </motion.div>
+            )}
         </AnimatePresence>
       </ModalContent>
     </Modal>
diff --git a/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
new file mode 100644
index 000000000..c0be1a548
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/components/ActionBar/CreateDynamicSecretForm/ElasticSearchInputForm.tsx
@@ -0,0 +1,395 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const authMethods = [
+  {
+    label: "Username/Password",
+    value: "user"
+  },
+  {
+    label: "API Key",
+    value: "api-key"
+  }
+] as const;
+
+const formSchema = z.object({
+  provider: z.object({
+    host: z.string().trim().min(1),
+    port: z.coerce.number(),
+
+    // two auth types "user, apikey"
+    auth: z.discriminatedUnion("type", [
+      z.object({
+        type: z.literal("user"),
+        username: z.string().trim(),
+        password: z.string().trim()
+      }),
+      z.object({
+        type: z.literal("api-key"),
+        apiKey: z.string().trim(),
+        apiKeyId: z.string().trim()
+      })
+    ]),
+
+    creationStatement: z.string().trim(),
+    revocationStatement: z.string().trim(),
+    ca: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const ElasticSearchInputForm = ({
+  onCompleted,
+  onCancel,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        auth: {
+          type: "user"
+        },
+        port: 443,
+
+        creationStatement: `{
+  "username": "{{username}}",
+  "password": "{{password}}",
+  "roles": ["superuser"],
+  "metadata": {}
+}`,
+        revocationStatement: `{
+  "username": "{{username}}"
+}`
+      }
+    }
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+
+  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+    // wait till previous request is finished
+    if (createDynamicSecret.isLoading) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.ElasticSearch, inputs: provider },
+        maxTTL,
+        name,
+        path: secretPath,
+        defaultTTL,
+        projectSlug,
+        environmentSlug: environment
+      });
+      onCompleted();
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  const selectedAuthType = watch("provider.auth.type");
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="name"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="provider.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="flex w-full items-center gap-2">
+                <Controller
+                  control={control}
+                  name="provider.auth.type"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Authentication Method"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="w-full"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        className="w-full"
+                        onValueChange={(e) => {
+                          const authFields = [
+                            "provider.auth.username",
+                            "provider.auth.password",
+                            "provider.auth.apiKey",
+                            "provider.auth.apiKeyId"
+                          ] as const;
+
+                          authFields.forEach((f) => {
+                            setValue(f, "");
+                          });
+
+                          field.onChange(e);
+                        }}
+                      >
+                        {authMethods.map((authType) => (
+                          <SelectItem value={authType.value} key={`auth-method-${authType.value}`}>
+                            {authType.label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={
+                    selectedAuthType === "user"
+                      ? "provider.auth.username"
+                      : "provider.auth.apiKeyId"
+                  }
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Username" : "API Key ID"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={
+                    selectedAuthType === "user" ? "provider.auth.password" : "provider.auth.apiKey"
+                  }
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Password" : "API Key"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA (SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify ElasticSearch Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="provider.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username, password and expiration are dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="provider.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
index 800cf7747..9b3d069c2 100644
--- a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/CreateDynamicSecretLease.tsx
@@ -139,6 +139,24 @@ const renderOutputForm = (provider: DynamicSecretProviders, data: unknown) => {
     );
   }
 
+  if (provider === DynamicSecretProviders.ElasticSearch) {
+    const { DB_USERNAME, DB_PASSWORD } = data as {
+      DB_USERNAME: string;
+      DB_PASSWORD: string;
+    };
+
+    return (
+      <div>
+        <OutputDisplay label="Username" value={DB_USERNAME} />
+        <OutputDisplay
+          label="Password"
+          value={DB_PASSWORD}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+      </div>
+    );
+  }
+
   return null;
 };
 
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
new file mode 100644
index 000000000..d4d980243
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
@@ -0,0 +1,391 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  FormControl,
+  Input,
+  SecretInput,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const authMethods = [
+  {
+    label: "Username/Password",
+    value: "user"
+  },
+  {
+    label: "API Key",
+    value: "api-key"
+  }
+] as const;
+
+const formSchema = z.object({
+  inputs: z.object({
+    host: z.string().trim().min(1),
+    port: z.coerce.number(),
+
+    // two auth types "user, apikey"
+    auth: z.discriminatedUnion("type", [
+      z.object({
+        type: z.literal("user"),
+        username: z.string().trim(),
+        password: z.string().trim()
+      }),
+      z.object({
+        type: z.literal("api-key"),
+        apiKey: z.string().trim(),
+        apiKeyId: z.string().trim()
+      })
+    ]),
+
+    creationStatement: z.string().trim(),
+    revocationStatement: z.string().trim(),
+    ca: z.string().optional()
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    // a day
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      // a day
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  newName: z
+    .string()
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .optional()
+});
+type TForm = z.infer<typeof formSchema>;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  environment: string;
+  projectSlug: string;
+};
+
+export const EditDynamicSecretElasticSearchForm = ({
+  onClose,
+  dynamicSecret,
+  secretPath,
+  environment,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    setValue,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      newName: dynamicSecret.name,
+      inputs: {
+        ...(dynamicSecret.inputs as TForm["inputs"])
+      }
+    }
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+
+  const handleUpdateDynamicSecret = async ({ inputs, maxTTL, defaultTTL, newName }: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isLoading) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          maxTTL: maxTTL || undefined,
+          defaultTTL,
+          inputs,
+          newName: newName === dynamicSecret.name ? undefined : newName
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  const selectedAuthType = watch("inputs.auth.type");
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="newName"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <Controller
+                  control={control}
+                  name="inputs.host"
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Host"
+                      className="flex-grow"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="inputs.port"
+                  defaultValue={443}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Port"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="flex w-full items-center gap-2">
+                <Controller
+                  control={control}
+                  name="inputs.auth.type"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Authentication Method"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="w-full"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        className="w-full"
+                        onValueChange={(e) => {
+                          const authFields = [
+                            "inputs.auth.username",
+                            "inputs.auth.password",
+                            "inputs.auth.apiKey",
+                            "inputs.auth.apiKeyId"
+                          ] as const;
+
+                          authFields.forEach((f) => {
+                            setValue(f, "");
+                          });
+
+                          field.onChange(e);
+                        }}
+                      >
+                        {authMethods.map((authType) => (
+                          <SelectItem value={authType.value} key={`auth-method-${authType.value}`}>
+                            {authType.label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={
+                    selectedAuthType === "user" ? "inputs.auth.username" : "inputs.auth.apiKeyId"
+                  }
+                  defaultValue=""
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Username" : "API Key ID"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} autoComplete="off" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={selectedAuthType === "user" ? "inputs.auth.password" : "inputs.auth.apiKey"}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label={selectedAuthType === "user" ? "Password" : "API Key"}
+                      className="w-full"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="inputs.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isOptional
+                      label="CA (SSL)"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <SecretInput
+                        {...field}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                      />
+                    </FormControl>
+                  )}
+                />
+                <Accordion type="single" collapsible className="mb-2 w-full bg-mineshaft-700">
+                  <AccordionItem value="advance-statements">
+                    <AccordionTrigger>Modify ElasticSearch Statements</AccordionTrigger>
+                    <AccordionContent>
+                      <Controller
+                        control={control}
+                        name="inputs.creationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Creation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username, password and expiration are dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                      <Controller
+                        control={control}
+                        name="inputs.revocationStatement"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Revocation Statement"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            helperText="username is dynamically provisioned"
+                          >
+                            <TextArea
+                              {...field}
+                              reSize="none"
+                              rows={3}
+                              className="border-mineshaft-600 bg-mineshaft-900 text-sm"
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    </AccordionContent>
+                  </AccordionItem>
+                </Accordion>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx
index 344d8183d..f0a4fd957 100644
--- a/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx
@@ -7,6 +7,7 @@ import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
 import { EditDynamicSecretAwsElastiCacheProviderForm } from "./EditDynamicSecretAwsElastiCacheProviderForm";
 import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
 import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
+import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
 import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
 import { EditDynamicSecretRedisProviderForm } from "./EditDynamicSecretRedisProviderForm";
 import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
@@ -146,6 +147,24 @@ export const EditDynamicSecretForm = ({
           />
         </motion.div>
       )}
+
+      {dynamicSecretDetails?.type === DynamicSecretProviders.ElasticSearch && (
+        <motion.div
+          key="elastic-search-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretElasticSearchForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
     </AnimatePresence>
   );
 };