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

@@ -39,11 +39,15 @@ let inputField = (
   ~getPlaceholder,
   ~checkRequiredFields,
   ~disabled,
+  ~description="",
+  ~toolTipPosition: ToolTip.toolTipPosition=ToolTip.Right,
   (),
 ) =>
   FormRenderer.makeFieldInfo(
     ~label,
     ~name,
+    ~description,
+    ~toolTipPosition,
     ~customInput=InputFields.textInput(~isDisabled=disabled, ()),
     ~placeholder=switch getPlaceholder {
     | Some(fun) => fun(connector, field, label)
@@ -93,18 +97,19 @@ module RenderConnectorInputFields = {
     ~getPlaceholder=?,
     ~isLabelNested=true,
     ~disabled=false,
+    ~description="",
   ) => {
     let featureFlagDetails = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
     open ConnectorUtils
     open LogicUtils
     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) {
@@ -118,6 +123,7 @@ module RenderConnectorInputFields = {
                 ~checkRequiredFields,
                 ~getPlaceholder,
                 ~disabled,
+                ~description,
                 (),
               )
             }}
@@ -210,6 +216,7 @@ module ConnectorConfigurationFields = {
         selectedConnector
         isLabelNested=false
         disabled={isUpdateFlow ? true : false}
+        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'"
       />
       <RenderConnectorInputFields
         details={connectorMetaDataFields}

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, ())
   }