Merge pull request #1725 from jdi-testing/issue_1701-fix-locators-edi…

…ting

Issue 1701: fix locators editing

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.25",
+  "version": "3.15.26",
   "icons": {
     "128": "icon128.png"
   },

package.json

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

src/features/locators/components/LocatorEditDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, Select } from 'antd';
+import { Form, Input, Select, Space } from 'antd';
 import Icon from '@ant-design/icons';
 import WarningFilled from '../assets/warning-filled.svg';
 import { FieldData } from 'rc-field-form/lib/interface';
@@ -356,9 +356,15 @@ export const LocatorEditDialog: React.FC<Props> = ({
       >
         <Select
           onChange={handleLocatorDropdownOnChange}
-          options={locatorTypeOptions}
           popupClassName="custom-divider-for-dropdown"
           virtual={false}
+          options={locatorTypeOptions}
+          optionRender={(option) => (
+            <Space>
+              {option.data.label}
+              <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>{option.data.desc}</span>
+            </Space>
+          )}
         />
       </Form.Item>
       <Form.Item

src/features/locators/utils/createLocatorTypeOptions.tsx

@@ -14,6 +14,7 @@ import { evaluateLocator } from './utils';
 interface IOptionsWithLabel {
   label: React.JSX.Element;
   value: string;
+  desc: string;
   disabled?: boolean;
 }
 
@@ -33,11 +34,7 @@ const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLa
       );
     }
 
-    return (
-      <>
-        {locatorType} <span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>{`"${attribute}"`}</span>
-      </>
-    );
+    return <>{locatorType}</>;
   };
 
   return Object.keys(attributes).map((key) => {
@@ -46,6 +43,7 @@ const generateOptionsWithLabel = (attributes: ElementAttributes): IOptionsWithLa
     const option: IOptionsWithLabel = {
       label: generateLabel(locatorType, attributes[key as keyof ElementAttributes] as string),
       value: locatorType,
+      desc: attributes[key as keyof ElementAttributes] as string,
     };
 
     if (attributes[key as keyof ElementAttributes] === null) {