Merge pull request #1409 from jdi-testing/issue_1144

Issue 1144 Empty state for Locators List

.prettierrc

@@ -3,5 +3,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": false
-}
+  "singleQuote": false,
+  "endOfLine": "auto"
+}

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN",
   "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.13.535",
+  "version": "3.13.536",
   "icons": {
     "128": "icon128.png"
   },

package.json

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

src/features/locators/LocatorsPage.tsx

@@ -34,7 +34,8 @@ import {
 } from "./selectors/locatorsFiltered.selectors";
 import { useNotifications } from "../../common/components/notification/useNotifications";
 import { selectCurrentPageObject } from "../pageObjects/selectors/pageObjects.selectors";
-import { EmptyListInfo } from "../../common/components/emptyListInfo/EmptyListInfo";
+import { EmptyListModal } from "./text.constants";
+import { LocatorsEmptyListInfo } from "./components/LocatorsEmptyListInfo";
 
 const { confirm } = Modal;
 
@@ -56,6 +57,8 @@ export const LocatorsPage = () => {
   const breadcrumbsRef = useRef(null);
   const [locatorsSnapshot] = useState(useSelector(selectLocatorsByPageObject));
   const [filterSnapshot] = useState(useSelector(selectClassFilterByPO));
+  const [isEmptyListModalOpen, setIsEmptyListModalOpen] = useState(!Boolean(size(locators)));
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   // For changing locatorsList-content height depends on header height
   const containerHeight = useCalculateHeaderSize(breadcrumbsRef);
 
@@ -168,6 +171,8 @@ export const LocatorsPage = () => {
           <Filter />
         </Row>
         <LocatorListHeader
+          isEditModalOpen={isEditModalOpen}
+          setIsEditModalOpen={setIsEditModalOpen}
           render={(viewProps: LocatorTreeProps["viewProps"]) => (
             <div
               ref={containerRef}
@@ -179,10 +184,18 @@ export const LocatorsPage = () => {
               ) : showSpinner ? (
                 <LocatorTreeSpinner />
               ) : (
-                <EmptyListInfo>
-                  Select the elements you need on the web page coverage and add them to the PO via a double-click or
-                  through the context menu
-                </EmptyListInfo>
+                <>
+                  <Modal
+                    title={EmptyListModal.Title}
+                    open={isEmptyListModalOpen}
+                    onCancel={() => setIsEmptyListModalOpen(false)}
+                    onOk={pageBack}
+                    okText={EmptyListModal.OkButtonTitle}
+                  >
+                    {EmptyListModal.Contents}
+                  </Modal>
+                  <LocatorsEmptyListInfo setIsEditModalOpen={setIsEditModalOpen}></LocatorsEmptyListInfo>
+                </>
               )}
             </div>
           )}

src/features/locators/components/LocatorEditDialog.tsx

@@ -85,7 +85,7 @@ export const LocatorEditDialog: React.FC<Props> = ({
   const initialValues: FormValues = {
     type,
     name: name || "",
-    locator: locator.output ?? "",
+    locator: locator?.output ?? "",
     locatorType: defaultLocatorType,
     annotationType: defaultAnnotationType,
   };

src/features/locators/components/LocatorListHeader.tsx

@@ -22,10 +22,19 @@ import {
   selectActualActiveByPageObject,
 } from "../selectors/locatorsFiltered.selectors";
 
-export const LocatorListHeader = ({ render }: { render: (viewProps: LocatorTreeProps["viewProps"]) => ReactNode }) => {
+interface LocatorListHeaderProps {
+  render: (viewProps: LocatorTreeProps["viewProps"]) => ReactNode;
+  isEditModalOpen: boolean;
+  setIsEditModalOpen: (isOpen: boolean) => void;
+}
+
+export const LocatorListHeader = ({
+  render,
+  isEditModalOpen,
+  setIsEditModalOpen,
+}: LocatorListHeaderProps): JSX.Element => {
   const dispatch = useDispatch();
   const [expandAll, setExpandAll] = useState(ExpandState.Expanded);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isCreatingForm, setIsCreatingForm] = useState(false);
   const [searchString, setSearchString] = useState("");
 

src/features/locators/components/LocatorsEmptyListInfo.tsx

@@ -0,0 +1,25 @@
+import { EmptyListInfo } from "../../../common/components/emptyListInfo/EmptyListInfo";
+import React from "react";
+import { Button } from "antd";
+import { OnboardingPopup } from "../../onboarding/components/OnboardingPopup";
+
+interface LocatorsEmptyListInfoProps {
+  setIsEditModalOpen: (isOpen: boolean) => void;
+}
+
+export const LocatorsEmptyListInfo = ({ setIsEditModalOpen }: LocatorsEmptyListInfoProps): JSX.Element => (
+  <EmptyListInfo>
+    You can either create a{" "}
+    <Button type="link" onClick={() => setIsEditModalOpen(true)}>
+      Custom locator
+    </Button>{" "}
+    or refer to our{" "}
+    <OnboardingPopup>
+      <Button type="link" size="small">
+        Onboarding tutorial
+      </Button>
+      .
+    </OnboardingPopup>{" "}
+    to understand the JDN features
+  </EmptyListInfo>
+);

src/features/locators/text.constants.ts

@@ -0,0 +1,6 @@
+export const enum EmptyListModal {
+  Title = "Unable to Identify Elements",
+  Contents = "Unfortunately, we can't identify any elements. Please make sure that the correct library is " +
+    "selected and that general settings are properly configured.",
+  OkButtonTitle = "Open Settings",
+}