Merge pull request #1710 from jdi-testing/issue_1484-update-the-creat…

…e-modal-window

Issue 1484: update the create custom element modal window

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN — Page Object Generator",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.15.22",
+  "version": "3.15.23",
   "icons": {
     "128": "icon128.png"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.15.22",
+  "version": "3.15.23",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

src/features/locators/components/LocatorEditDialog.tsx

@@ -131,11 +131,11 @@ export const LocatorEditDialog: React.FC<Props> = ({
     setIsEditedName(true);
   };
 
+  const isLocatorFieldTouched = form.isFieldTouched('locator');
+
   const handleCreateCustomLocator = async () => {
-    const isLocatorFieldTouched = form.isFieldTouched('locator');
     // in case if user didn't touch locator field to avoid forceUpdate
     const locatorMessage = isLocatorFieldTouched ? validationMessage : LocatorValidationWarnings.NotFound;
-
     const fieldsValue = await form.validateFields();
 
     const formData = {
@@ -213,7 +213,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
   };
 
   const renderValidationWarning = () =>
-    isCreatingForm ? (
+    isCreatingForm && (!isLocatorFieldTouched || validationMessage === LocatorValidationWarnings.EmptyValue) ? (
       <div className="jdn__locatorEdit-warning">
         <Icon component={WarningFilled} className="ant-alert-icon" />
         <Footnote>If you leave this field empty, the locator will be invalid</Footnote>
@@ -308,7 +308,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
         isOkButtonDisabled: isOkButtonDisabled,
       }}
       modalProps={{
-        title: isCreatingForm ? 'Create custom locator' : 'Edit locator',
+        title: isCreatingForm ? 'Create' : 'Edit locator',
         open: isModalOpen,
         onOk: isCreatingForm ? handleCreateCustomLocator : handleEditLocator,
         enableOverlay: isModalOpen,
@@ -317,6 +317,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
           disabled: isOkButtonDisabled,
         },
         width: 580,
+        okText: isCreatingForm ? 'Add to the list' : 'OK',
       }}
       formProps={{
         form,