feat: default id for connector label

src/components/tooltip/ToolTip.res

@@ -614,7 +614,7 @@ let make = (
   ~descriptionComponent=React.null,
   ~tooltipPositioning: tooltipPositioning=#fixed,
   ~toolTipFor=?,
-  ~tooltipWidthClass="w-64",
+  ~tooltipWidthClass="w-fit",
   ~tooltipForWidthClass="",
   ~toolTipPosition: option<toolTipPosition>=?,
   ~customStyle="",

src/screens/HyperSwitch/Connectors/ConnectorAccountDetails.res

@@ -30,8 +30,9 @@ module BusinessProfileRender = {
     let hyperswitchMixPanel = HSMixPanel.useSendEvent()
     let {setDashboardPageState} = React.useContext(GlobalProvider.defaultContext)
     let businessProfiles = Recoil.useRecoilValueFromAtom(HyperswitchAtom.businessProfilesAtom)
-
     let arrayOfBusinessProfile = businessProfiles->MerchantAccountUtils.getArrayOfBusinessProfile
+    let defaultBusinessProfile = businessProfiles->MerchantAccountUtils.getValueFromBusinessProfile
+    let connectorLabelOnChange = ReactFinalForm.useField(`connector_label`).input.onChange
 
     let (showModalFromOtherScreen, setShowModalFromOtherScreen) = React.useState(_ => false)
 
@@ -64,6 +65,16 @@ module BusinessProfileRender = {
                 ...input,
                 onChange: {
                   ev => {
+                    let profileName = (
+                      arrayOfBusinessProfile
+                      ->Js.Array2.find((ele: HSwitchSettingTypes.profileEntity) =>
+                        ele.profile_id === ev->Identity.formReactEventToString
+                      )
+                      ->Belt.Option.getWithDefault(defaultBusinessProfile)
+                    ).profile_name
+                    connectorLabelOnChange(
+                      `${selectedConnector}_${profileName}`->Identity.stringToFormReactEvent,
+                    )
                     input.onChange(ev)
                     mixpanelEventWrapper(
                       ~url,
@@ -89,7 +100,7 @@ module BusinessProfileRender = {
       />
       <UIUtils.RenderIf condition={!isUpdateFlow}>
         <div className="text-gray-400 text-sm mt-3">
-          <span> {"Manage your list of business units"->React.string} </span>
+          <span> {"Manage your list of profiles."->React.string} </span>
           <span
             className={`ml-1 ${hereTextStyle}`}
             onClick={_ => {
@@ -272,12 +283,18 @@ let make = (
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let updatedInitialVal = React.useMemo1(() => {
+    let initialValuesToDict = initialValues->LogicUtils.getDictFromJsonObject
+    if !isUpdateFlow {
+      initialValuesToDict->Js.Dict.set(
+        "connector_label",
+        `${connector}_${activeBusinessProfile.profile_name}`->Js.Json.string,
+      )
+    }
     if (
       connector
       ->getConnectorNameTypeFromString
       ->checkIsDummyConnector(featureFlagDetails.testProcessors) && !isUpdateFlow
     ) {
-      let initialValuesToDict = initialValues->LogicUtils.getDictFromJsonObject
       let apiKeyDict = [("api_key", "test_key"->Js.Json.string)]->Js.Dict.fromArray
       initialValuesToDict->Js.Dict.set("connector_account_details", apiKeyDict->Js.Json.object_)
 

src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res

@@ -1,3 +1,5 @@
+external formEventToStr: ReactEvent.Form.t => string = "%identity"
+external strToFormEvent: Js.String.t => ReactEvent.Form.t = "%identity"
 let metaDataInputKeysToIgnore = ["google_pay", "apple_pay", "zen_apple_pay"]
 
 let getCurrencyOption: CurrencyUtils.currencyCode => SelectBox.dropdownOption = currencyType => {
@@ -56,6 +58,46 @@ let inputField = (
     (),
   )
 
+let inputFieldForConnectorLabel = (
+  ~name,
+  ~field,
+  ~label,
+  ~connector: ConnectorTypes.connectorName,
+  ~getPlaceholder,
+  ~checkRequiredFields,
+  ~disabled,
+) => {
+  FormRenderer.makeFieldInfo(
+    ~label,
+    ~isRequired=switch checkRequiredFields {
+    | Some(fun) => fun(connector, field)
+    | None => true
+    },
+    ~name,
+    ~description="This is an unique label you can generate and pass in order to identify this connector account on your Hyperswitch dashboard and reports. Eg: if your profile label is 'default', connector label can be 'stripe_default'",
+    ~toolTipPosition=Right,
+    ~customInput=(~input, ~placeholder as _) =>
+      InputFields.textInput(
+        ~input={
+          ...input,
+          value: input.value,
+          onChange: {
+            ev => {
+              input.onChange(ev)
+            }
+          },
+        },
+        ~isDisabled=disabled,
+        ~placeholder=switch getPlaceholder {
+        | Some(fun) => fun(connector, field, label)
+        | None => `Enter ${label->LogicUtils.snakeToTitle}`
+        },
+        (),
+      ),
+    (),
+  )
+}
+
 module ErrorValidation = {
   @react.component
   let make = (~fieldName, ~validate) => {
@@ -100,11 +142,11 @@ module RenderConnectorInputFields = {
     let keys =
       details->Js.Dict.keys->Js.Array2.filter(ele => !Js.Array2.includes(keysToIgnore, ele))
     keys
-    ->Array.mapWithIndex((field, index) => {
+    ->Array.map(field => {
       let label = details->getString(field, "")
       let formName = isLabelNested ? `${name}.${field}` : name
       <UIUtils.RenderIf condition={label->Js.String2.length > 0}>
-        <div key={index->string_of_int}>
+        <div key={label}>
           <FormRenderer.FieldRenderer
             labelClass="font-semibold !text-hyperswitch_black"
             field={switch (connector, field) {
@@ -138,6 +180,59 @@ module RenderConnectorInputFields = {
   }
 }
 
+module RenderConnectorLabel = {
+  open ConnectorTypes
+  @react.component
+  let make = (
+    ~connector: connectorName,
+    ~selectedConnector,
+    ~details,
+    ~name,
+    ~keysToIgnore: array<string>=[],
+    ~checkRequiredFields=?,
+    ~getPlaceholder=?,
+    ~isLabelNested=true,
+    ~disabled=false,
+  ) => {
+    open ConnectorUtils
+    open LogicUtils
+    let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
+    let keys =
+      details->Js.Dict.keys->Js.Array2.filter(ele => !Js.Array2.includes(keysToIgnore, ele))
+    keys
+    ->Array.map(field => {
+      let label = details->getString(field, "")
+      let formName = isLabelNested ? `${name}.${field}` : name
+      <UIUtils.RenderIf condition={label->Js.String2.length > 0}>
+        <div key={label}>
+          <FormRenderer.FieldRenderer
+            labelClass="font-semibold !text-hyperswitch_black"
+            field={inputFieldForConnectorLabel(
+              ~name=formName,
+              ~field,
+              ~label,
+              ~connector,
+              ~checkRequiredFields,
+              ~getPlaceholder,
+              ~disabled,
+            )}
+          />
+          <ErrorValidation
+            fieldName=formName
+            validate={validate(
+              ~selectedConnector,
+              ~dict=details,
+              ~fieldName=formName,
+              ~isLiveMode={featureFlagDetails.isLiveMode},
+            )}
+          />
+        </div>
+      </UIUtils.RenderIf>
+    })
+    ->React.array
+  }
+}
+
 module CurrencyAuthKey = {
   @react.component
   let make = (~dict, ~connector, ~selectedConnector: ConnectorTypes.integrationFields) => {
@@ -201,7 +296,7 @@ module ConnectorConfigurationFields = {
           selectedConnector
         />
       }}
-      <RenderConnectorInputFields
+      <RenderConnectorLabel
         details={connectorLabelDetailField}
         name={"connector_label"}
         keysToIgnore=metaDataInputKeysToIgnore

src/screens/HyperSwitch/Connectors/ConnectorTableUtils.res

@@ -185,7 +185,7 @@ let getHeading = colType => {
   | ProfileName =>
     Table.makeHeaderInfo(~key="profile_name", ~title="Profile Name", ~showSort=false, ())
   | ConnectorLabel =>
-    Table.makeHeaderInfo(~key="connector_label", ~title="Label", ~showSort=false, ())
+    Table.makeHeaderInfo(~key="connector_label", ~title="Connector Label", ~showSort=false, ())
   | PaymentMethods =>
     Table.makeHeaderInfo(~key="payment_methods", ~title="Payment Methods", ~showSort=false, ())
   }