Web:Client:Fix non unique ids.

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js

@@ -131,6 +131,7 @@ const Webhooks = (props) => {
           onClose={closeCreateModal}
           header={t("CreateWebhook")}
           onSubmit={onCreateWebhook}
+          additionalId="create-webhook"
         />
         <WebhookDialog
           visible={isSettingsOpened}
@@ -139,6 +140,7 @@ const Webhooks = (props) => {
           isSettingsModal={true}
           webhook={currentWebhook}
           onSubmit={handleWebhookUpdate}
+          additionalId="settings-webhook"
         />
         <DeleteWebhookDialog
           visible={isDeleteOpened}

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js

@@ -53,6 +53,7 @@ const SecretKeyInput = (props) => {
     setIsResetVisible,
     webhooksGuideUrl,
     passwordInputKey,
+    additionalId,
   } = props;
 
   const [isHintVisible, setIsHintVisible] = useState(false);
@@ -141,7 +142,7 @@ const SecretKeyInput = (props) => {
         )}
         <div hidden={isResetVisible}>
           <PasswordInput
-            id="secret-key-input"
+            id={additionalId + "-secret-key-input"}
             onChange={handleOnChange}
             inputValue={value}
             inputName={name}

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookDialog.js

@@ -38,8 +38,15 @@ function validateUrl(url) {
 }
 
 const WebhookDialog = (props) => {
-  const { visible, onClose, header, isSettingsModal, onSubmit, webhook } =
-    props;
+  const {
+    visible,
+    onClose,
+    header,
+    isSettingsModal,
+    onSubmit,
+    webhook,
+    additionalId,
+  } = props;
 
   const [isResetVisible, setIsResetVisible] = useState(isSettingsModal);
 
@@ -144,7 +151,7 @@ const WebhookDialog = (props) => {
         <StyledWebhookForm onSubmit={onFormSubmit}>
           {!isSettingsModal && <Hint>{t("WebhookCreationHint")}</Hint>}
           <LabledInput
-            id="webhook-name-input"
+            id={additionalId + "-name-input"}
             label={t("WebhookName")}
             placeholder={t("EnterWebhookName")}
             name="name"
@@ -155,7 +162,7 @@ const WebhookDialog = (props) => {
             required
           />
           <LabledInput
-            id="payload-url-input"
+            id={additionalId + "-payload-url-input"}
             label={t("PayloadUrl")}
             placeholder={t("EnterUrl")}
             name="uri"
@@ -174,6 +181,7 @@ const WebhookDialog = (props) => {
             setIsPasswordValid={setIsPasswordValid}
             setIsResetVisible={setIsResetVisible}
             passwordInputKey={passwordInputKey}
+            additionalId={additionalId}
           />
 
           <button type="submit" ref={submitButtonRef} hidden></button>