Merge pull request #3876 from Infisical/ENG-2977

feat(secret-sync): Allow custom field label on 1pass sync

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/1PasswordSyncFields.tsx

@@ -4,7 +4,7 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { FilterableSelect, FormControl, Input, Tooltip } from "@app/components/v2";
 import {
   TOnePassVault,
   useOnePassConnectionListVaults
@@ -32,6 +32,7 @@ export const OnePassSyncFields = () => {
       <SecretSyncConnectionField
         onChange={() => {
           setValue("destinationConfig.vaultId", "");
+          setValue("destinationConfig.valueLabel", "");
         }}
       />
 
@@ -69,6 +70,22 @@ export const OnePassSyncFields = () => {
           </FormControl>
         )}
       />
+
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isOptional
+            label="Value Label"
+            tooltipText="It's the label of the 1Password item field which will hold your secret value. For example, if you were to sync Infisical secret 'foo: bar', the 1Password item equivalent would have an item title of 'foo', and a field on that item 'value: bar'. The field label 'value' is what gets changed by this option."
+          >
+            <Input value={value} onChange={onChange} placeholder="value" />
+          </FormControl>
+        )}
+        control={control}
+        name="destinationConfig.valueLabel"
+      />
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OnePassSyncReviewFields.tsx

@@ -6,7 +6,15 @@ import { SecretSync } from "@app/hooks/api/secretSyncs";
 
 export const OnePassSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OnePass }>();
-  const vaultId = watch("destinationConfig.vaultId");
+  const [vaultId, valueLabel] = watch([
+    "destinationConfig.vaultId",
+    "destinationConfig.valueLabel"
+  ]);
 
-  return <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>
+      <GenericFieldLabel label="Value Key">{valueLabel || "value"}</GenericFieldLabel>
+    </>
+  );
 };

frontend/src/components/secret-syncs/forms/schemas/1password-sync-destination-schema.ts

@@ -7,7 +7,8 @@ export const OnePassSyncDestinationSchema = BaseSecretSyncSchema().merge(
   z.object({
     destination: z.literal(SecretSync.OnePass),
     destinationConfig: z.object({
-      vaultId: z.string().trim().min(1, "Vault ID required")
+      vaultId: z.string().trim().min(1, "Vault ID required"),
+      valueLabel: z.string().trim().optional()
     })
   })
 );

frontend/src/hooks/api/secretSyncs/types/1password-sync.ts

@@ -6,6 +6,7 @@ export type TOnePassSync = TRootSecretSync & {
   destination: SecretSync.OnePass;
   destinationConfig: {
     vaultId: string;
+    valueLabel?: string;
   };
   connection: {
     app: AppConnection.OnePass;

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -164,7 +164,10 @@ export const MinimizedOrgSidebar = () => {
   const handleCopyToken = async () => {
     try {
       await window.navigator.clipboard.writeText(getAuthToken());
-      createNotification({ type: "success", text: "Copied current login session token to clipboard" });
+      createNotification({
+        type: "success",
+        text: "Copied current login session token to clipboard"
+      });
     } catch (error) {
       console.log(error);
       createNotification({ type: "error", text: "Failed to copy user token to clipboard" });

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/1PasswordSyncDestinationSection.tsx

@@ -7,8 +7,13 @@ type Props = {
 
 export const OnePassSyncDestinationSection = ({ secretSync }: Props) => {
   const {
-    destinationConfig: { vaultId }
+    destinationConfig: { vaultId, valueLabel }
   } = secretSync;
 
-  return <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>;
+  return (
+    <>
+      <GenericFieldLabel label="Vault ID">{vaultId}</GenericFieldLabel>
+      <GenericFieldLabel label="Value Key">{valueLabel || "value"}</GenericFieldLabel>
+    </>
+  );
 };