feature: secret sync base + aws parameter store & github

frontend/src/components/secret-syncs/forms/SecretSyncSourceFields.tsx

@@ -0,0 +1,55 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FilterableSelect, FormControl } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { useWorkspace } from "@app/context";
+
+import { TSecretSyncForm } from "./schemas";
+
+export const SecretSyncSourceFields = () => {
+  const { control, watch } = useFormContext<TSecretSyncForm>();
+
+  const { currentWorkspace } = useWorkspace();
+
+  const selectedEnvironment = watch("environment");
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Specify the environment and path where you would like to sync secrets from.
+      </p>
+
+      <Controller
+        defaultValue={currentWorkspace.environments[0]}
+        control={control}
+        name="environment"
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl label="Environment" isError={Boolean(error)} errorText={error?.message}>
+            <FilterableSelect
+              value={value}
+              onChange={onChange}
+              options={currentWorkspace.environments}
+              placeholder="Select environment..."
+              getOptionLabel={(option) => option?.name}
+              getOptionValue={(option) => option?.id}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        defaultValue="/"
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl isError={Boolean(error)} errorText={error?.message} label="Secret Path">
+            <SecretPathInput
+              environment={selectedEnvironment?.slug}
+              value={value}
+              onChange={onChange}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="secretPath"
+      />
+    </>
+  );
+};