Merge pull request #2206 from GLEF1X/refactor/hashicorp-vault-integration

refactor(hashicorp-integration): make hashicorp vault integration easier to use

frontend/src/components/v2/Input/Input.tsx

@@ -99,6 +99,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <input
           {...props}
           required={isRequired}
+          aria-required={isRequired}
           ref={ref}
           readOnly={isReadOnly}
           disabled={isDisabled}

frontend/src/helpers/string.ts

@@ -3,3 +3,12 @@ export const removeTrailingSlash = (str: string) => {
 
   return str.endsWith("/") ? str.slice(0, -1) : str;
 };
+
+export const isValidPath = (val: string): boolean => {
+  if (val.length === 0) return false;
+  if (val === "/") return true;
+
+  // Check for valid characters and no consecutive slashes
+  const validPathRegex = /^[a-zA-Z0-9-_.:]+(?:\/[a-zA-Z0-9-_.:]+)*$/;
+  return validPathRegex.test(val);
+}

frontend/src/pages/integrations/hashicorp-vault/authorize.tsx

@@ -1,83 +1,69 @@
-import { 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 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { z } from "zod";
 
+import { createNotification } from "@app/components/notifications";
 import { useSaveIntegrationAccessToken } from "@app/hooks/api";
 
-import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import { Button, Card, CardBody, CardTitle, FormControl, Input } from "../../../components/v2";
+
+const formSchema = z.object({
+  vaultURL: z.string().url({ message: "Invalid Hashicorp Vault URL" }),
+  vaultNamespace: z.string().optional(),
+  vaultRoleID: z.string().uuid({ message: "Role ID has be a valid UUID" }),
+  vaultSecretID: z.string().uuid({ message: "Role ID has be a valid UUID" })
+});
+
+type TForm = z.infer<typeof formSchema>;
 
 export default function HashiCorpVaultAuthorizeIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useSaveIntegrationAccessToken();
 
-  const [vaultURL, setVaultURL] = useState("");
+  const {
-  const [vaultURLErrorText, setVaultURLErrorText] = useState("");
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      vaultURL: "",
+      vaultNamespace: "",
+      vaultRoleID: "",
+      vaultSecretID: ""
+    }
+  });
 
-  const [vaultNamespace, setVaultNamespace] = useState("");
+  const handleFormSubmit = async (formData: TForm) => {
-  const [vaultNamespaceErrorText, setVaultNamespaceErrorText] = useState("");
-
-  const [vaultRoleID, setVaultRoleID] = useState("");
-  const [vaultRoleIDErrorText, setVaultRoleIDErrorText] = useState("");
-
-  const [vaultSecretID, setVaultSecretID] = useState("");
-  const [vaultSecretIDErrorText, setVaultSecretIDErrorText] = useState("");
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleButtonClick = async () => {
     try {
-      if (vaultURL.length === 0) {
-        setVaultURLErrorText("Vault Cluster URL cannot be blank");
-      } else {
-        setVaultURLErrorText("");
-      }
-
-      if (vaultNamespace.length === 0) {
-        setVaultNamespaceErrorText("Vault Namespace cannot be blank");
-      } else {
-        setVaultNamespaceErrorText("");
-      }
-
-      if (vaultRoleID.length === 0) {
-        setVaultRoleIDErrorText("Vault Role ID cannot be blank");
-      } else {
-        setVaultRoleIDErrorText("");
-      }
-
-      if (vaultSecretID.length === 0) {
-        setVaultSecretIDErrorText("Vault Secret ID cannot be blank");
-      } else {
-        setVaultSecretIDErrorText("");
-      }
-      if (
-        vaultURL.length === 0 ||
-        vaultNamespace.length === 0 ||
-        vaultRoleID.length === 0 ||
-        vaultSecretID.length === 0
-      ) {
-        return;
-      }
-
-      setIsLoading(true);
-
       const integrationAuth = await mutateAsync({
         workspaceId: localStorage.getItem("projectData.id"),
         integration: "hashicorp-vault",
-        accessId: vaultRoleID,
+        accessId: formData.vaultRoleID,
-        accessToken: vaultSecretID,
+        accessToken: formData.vaultSecretID,
-        url: vaultURL,
+        url: formData.vaultURL,
-        namespace: vaultNamespace
+        namespace: formData.vaultNamespace
       });
-
-      setIsLoading(false);
-
       router.push(`/integrations/hashicorp-vault/create?integrationAuthId=${integrationAuth.id}`);
     } catch (err) {
       console.error(err);
+      let errorMessage: string = "Something went wrong!";
+      if (axios.isAxiosError(err)) {
+        const { message } = err?.response?.data as { message: string };
+        errorMessage = message;
+      }
+
+      createNotification({
+        text: errorMessage,
+        type: "error"
+      });
     }
   };
 
@@ -93,7 +79,7 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
           subTitle="After connecting to Vault, you will be prompted to set up an integration for a particular Infisical project and environment."
         >
           <div className="flex flex-row items-center">
-            <div className="inline flex items-center">
+            <div className="inline-flex items-center">
               <Image
                 src="/images/integrations/Vault.png"
                 height={30}
@@ -116,59 +102,84 @@ export default function HashiCorpVaultAuthorizeIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
+        <CardBody className="px-6 pb-6 pt-0">
+          <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
+            <Controller
+              control={control}
+              name="vaultURL"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault Cluster URL"
-          errorText={vaultURLErrorText}
+                  errorText={error?.message}
-          isError={vaultURLErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  isRequired
                 >
-          <Input placeholder="" value={vaultURL} onChange={(e) => setVaultURL(e.target.value)} />
+                  <Input autoCorrect="off" spellCheck={false} placeholder="" {...field} />
                 </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="vaultNamespace"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault Namespace"
-          errorText={vaultNamespaceErrorText}
+                  errorText={error?.message}
-          isError={vaultNamespaceErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  isRequired={false}
                 >
                   <Input
+                    autoCorrect="off"
+                    spellCheck={false}
                     placeholder="admin/education"
-            value={vaultNamespace}
+                    {...field}
-            onChange={(e) => setVaultNamespace(e.target.value)}
                   />
                 </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="vaultRoleID"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault RoleID"
-          errorText={vaultRoleIDErrorText}
+                  errorText={error?.message}
-          isError={vaultRoleIDErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  isRequired
                 >
                   <Input
-            placeholder=""
+                    autoCorrect="off"
-            value={vaultRoleID}
+                    spellCheck={false}
-            onChange={(e) => setVaultRoleID(e.target.value)}
+                    placeholder="aaaaaaa-bbbb-cccc-dddd-aaaaaaaaaaa"
+                    {...field}
                   />
                 </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="vaultSecretID"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault SecretID"
-          errorText={vaultSecretIDErrorText}
+                  errorText={error?.message}
-          isError={vaultSecretIDErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  isRequired
                 >
                   <Input
-            placeholder=""
+                    autoCorrect="off"
-            value={vaultSecretID}
+                    spellCheck={false}
-            onChange={(e) => setVaultSecretID(e.target.value)}
+                    placeholder="aaaaaaa-bbbb-cccc-dddd-aaaaaaaaaaa"
+                    {...field}
                   />
                 </FormControl>
-        <Button
+              )}
-          onClick={handleButtonClick}
+            />
-          colorSchema="primary"
+            <Button type="submit" isLoading={isSubmitting}>
-          variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-        >
               Connect to Vault
             </Button>
+          </form>
+        </CardBody>
       </Card>
     </div>
   );

frontend/src/pages/integrations/hashicorp-vault/create.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
@@ -10,13 +11,19 @@ import {
   faCircleInfo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
 import queryString from "query-string";
+import { z } from "zod";
 
+import { createNotification } from "@app/components/notifications";
+import { isValidPath } from "@app/helpers/string";
 import { useCreateIntegration } from "@app/hooks/api";
 
 import {
   Button,
   Card,
+  CardBody,
   CardTitle,
   FormControl,
   Input,
@@ -26,6 +33,29 @@ import {
 import { useGetIntegrationAuthById } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
+const generateFormSchema = (availableEnvironmentNames: string[]) => {
+  return z.object({
+    secretPath: z.string().min(1).refine((val) => isValidPath(val), {
+      message: "Vault secret path has to be a valid path"
+    }),
+    vaultEnginePath: z
+      .string()
+      .min(1)
+      .refine((val) => isValidPath(val), {
+        message: "Vault engine path has to be a valid path"
+      }),
+    vaultSecretPath: z
+      .string()
+      .min(1)
+      .refine((val) => isValidPath(val), {
+        message: "Vault secret path has to be a valid path"
+      }),
+    selectedSourceEnvironment: z.enum(availableEnvironmentNames as any as [string, ...string[]])
+  });
+};
+
+type TForm = z.infer<ReturnType<typeof generateFormSchema>>;
+
 export default function HashiCorpVaultCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
@@ -37,54 +67,48 @@ export default function HashiCorpVaultCreateIntegrationPage() {
     (integrationAuthId as string) ?? ""
   );
 
-  const [vaultEnginePath, setVaultEnginePath] = useState("");
+  const formSchema = useMemo(() => {
-  const [vaultEnginePathErrorText, setVaultEnginePathErrorText] = useState("");
+    return generateFormSchema(workspace?.environments.map((env) => env.slug) ?? []);
+  }, [workspace?.environments]);
 
-  const [vaultSecretPath, setVaultSecretPath] = useState("");
+  const {
-  const [vaultSecretPathErrorText, setVaultSecretPathErrorText] = useState("");
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      secretPath: "/",
+      vaultEnginePath: "",
+      vaultSecretPath: "",
+      selectedSourceEnvironment: ""
+    }
+  });
 
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const handleFormSubmit = async (formData: TForm) => {
-  const [secretPath, setSecretPath] = useState("/");
-  const [isLoading, setIsLoading] = useState(false);
-
-  const isValidVaultPath = (vaultPath: string) => {
-    return !(vaultPath.length === 0 || vaultPath.startsWith("/") || vaultPath.endsWith("/"));
-  };
-
-  const handleButtonClick = async () => {
     try {
       if (!integrationAuth?.id) return;
-
-      if (!isValidVaultPath(vaultEnginePath)) {
-        setVaultEnginePathErrorText("Vault KV Secrets Engine Path must be valid like kv");
-      } else {
-        setVaultEnginePathErrorText("");
-      }
-
-      if (!isValidVaultPath(vaultSecretPath)) {
-        setVaultSecretPathErrorText("Vault Secret(s) Path must be valid like machine/dev");
-      } else {
-        setVaultSecretPathErrorText("");
-      }
-
-      if (!isValidVaultPath || !isValidVaultPath(vaultSecretPath)) return;
-
-      setIsLoading(true);
-
       await mutateAsync({
         integrationAuthId: integrationAuth?.id,
         isActive: true,
-        app: vaultEnginePath,
+        app: formData.vaultEnginePath,
-        sourceEnvironment: selectedSourceEnvironment,
+        sourceEnvironment: formData.selectedSourceEnvironment,
-        path: vaultSecretPath,
+        path: formData.vaultSecretPath,
-        secretPath
+        secretPath: formData.secretPath
       });
-
-      setIsLoading(false);
-
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
       console.error(err);
+      let errorMessage: string = "Something went wrong!";
+      if (axios.isAxiosError(err)) {
+        const { message } = err?.response?.data as { message: string };
+        errorMessage = message;
+      }
+
+      createNotification({
+        text: errorMessage,
+        type: "error"
+      });
     }
   };
 
@@ -100,7 +124,7 @@ export default function HashiCorpVaultCreateIntegrationPage() {
           subTitle="Select which environment or folder in Infisical you want to sync to which path in HashiCorp Vault."
         >
           <div className="flex flex-row items-center">
-            <div className="inline flex items-center">
+            <div className="inline-flex items-center">
               <Image
                 src="/images/integrations/Vault.png"
                 height={30}
@@ -123,10 +147,17 @@ export default function HashiCorpVaultCreateIntegrationPage() {
             </Link>
           </div>
         </CardTitle>
-        <FormControl label="Project Environment" className="px-6">
+        <CardBody>
+          <form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
+            <Controller
+              control={control}
+              name="selectedSourceEnvironment"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl errorText={error?.message}
+                isError={Boolean(error)} isRequired label="Project Environment" >
                   <Select
-            value={selectedSourceEnvironment}
+                    value={field.value}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+                    onValueChange={field.onChange}
                     className="w-full border border-mineshaft-500"
                   >
                     {workspace?.environments.map((sourceEnvironment) => (
@@ -139,47 +170,60 @@ export default function HashiCorpVaultCreateIntegrationPage() {
                     ))}
                   </Select>
                 </FormControl>
-        <FormControl label="Secrets Path" className="px-6">
+              )}
-          <Input
-            value={secretPath}
-            onChange={(evt) => setSecretPath(evt.target.value)}
-            placeholder="Provide a path, default is /"
             />
+
+            <Controller
+              control={control}
+              name="secretPath"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl errorText={error?.message}
+                isError={Boolean(error)} isRequired label="Secrets Path" helperText="A path to your secrets in Infisical.">
+                  <Input {...field} autoCorrect="off" spellCheck={false} placeholder="/" />
                 </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="vaultEnginePath"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault KV Secrets Engine Path"
-          errorText={vaultEnginePathErrorText}
+                  errorText={error?.message}
-          isError={vaultEnginePathErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  helperText="A path where your KV Secrets Engine is enabled."
+                  isRequired
                 >
-          <Input
+                  <Input autoCorrect="off" spellCheck={false} {...field} placeholder="kv" />
-            placeholder="kv"
-            value={vaultEnginePath}
-            onChange={(e) => setVaultEnginePath(e.target.value)}
-          />
                 </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="vaultSecretPath"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
                   label="Vault Secret(s) Path"
-          errorText={vaultSecretPathErrorText}
+                  errorText={error?.message}
-          isError={vaultSecretPathErrorText !== "" ?? false}
+                  isError={Boolean(error)}
-          className="px-6"
+                  helperText="A path for storing secrets within the KV Secrets Engine."
+                  isRequired
                 >
-          <Input
+                  <Input autoCorrect="off" spellCheck={false} {...field} placeholder="machine/dev" />
-            placeholder="machine/dev"
-            value={vaultSecretPath}
-            onChange={(e) => setVaultSecretPath(e.target.value)}
-          />
                 </FormControl>
+              )}
+            />
+
             <Button
-          onClick={handleButtonClick}
+              type="submit"
-          colorSchema="primary"
+              isLoading={isSubmitting}
-          variant="outline_bg"
-          className="mb-6 mt-2 ml-auto mr-6 w-min"
-          isLoading={isLoading}
-          isDisabled={!(isValidVaultPath(vaultEnginePath) && isValidVaultPath(vaultSecretPath))}
             >
               Create Integration
             </Button>
+          </form>
+        </CardBody>
       </Card>
       <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">

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -219,7 +219,7 @@ export const IntegrationsSection = ({
                       }
                     >
                       <div className="flex items-center space-x-2 text-white">
-                        <div>Sync Status</div>
+                        <div>{integration.isSynced ? "Synced" : "Not synced"}</div>
                         {!integration.isSynced && <FontAwesomeIcon icon={faWarning} />}
                       </div>
                     </Tooltip>