Merge branch 'master' into issue_1408

src/app/components/OnboardingButton.tsx

@@ -1,19 +1,16 @@
 import { Button, Tooltip } from "antd";
 import { BookOpen } from "phosphor-react";
-import React from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../store/store";
-import { BackendStatus } from "../types/mainSlice.types";
+import React, { useContext } from "react";
 import { useOnBoardingRef } from "../../features/onboarding/utils/useOnboardingRef";
 import { OnbrdStep } from "../../features/onboarding/types/constants";
 import { OnboardingPopup } from "../../features/onboarding/components/OnboardingPopup";
 import { componentsTexts } from "../utils/constants";
+import { OnboardingContext } from "../../features/onboarding/OnboardingProvider";
 
 export const OnboardingButton = () => {
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
 
-  const isOnboardingAvailable =
-    useSelector<RootState>((_state) => _state.main.backendAvailable) === BackendStatus.Accessed;
+  const { isOnboardingAvailable } = useContext(OnboardingContext);
 
   const onbrdRef = useOnBoardingRef(OnbrdStep.Onboarding);
 

src/app/components/ReportProblem.tsx

@@ -3,7 +3,7 @@ import TextArea from "antd/lib/input/TextArea";
 import { UploadChangeParam } from "antd/lib/upload";
 import { RcFile, UploadFileStatus } from "antd/lib/upload/interface";
 import { UploadSimple, Warning } from "phosphor-react";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { selectCurrentPage } from "../main.selectors";
 import { PageType } from "../types/mainSlice.types";
@@ -20,6 +20,7 @@ import {
 import { selectCurrentPageObject } from "../../features/pageObjects/selectors/pageObjects.selectors";
 import { useOnBoardingRef } from "../../features/onboarding/utils/useOnboardingRef";
 import { OnbrdStep } from "../../features/onboarding/types/constants";
+import { OnboardingContext } from "../../features/onboarding/OnboardingProvider";
 
 const { info } = Modal;
 
@@ -61,6 +62,8 @@ export const ReportProblem = () => {
     if (files) files.scrollTop = files.scrollHeight;
   }, [fileList]);
 
+  const { isOpen: isOnboardingOpen } = useContext(OnboardingContext);
+
   const showExceptionConfirm = () =>
     info({
       title: "Problem report",
@@ -176,6 +179,7 @@ export const ReportProblem = () => {
     <div className="jdn__reportProblem">
       <Tooltip title="Report a problem" placement="bottomRight" align={{ offset: [12, 0] }}>
         <Button
+          disabled={isOnboardingOpen}
           ref={reportRef}
           onClick={showModal}
           type="link"

src/app/components/StatusBar.tsx

@@ -79,9 +79,9 @@ export const StatusBar = () => {
           />
         </Tooltip>
         <ReportProblem />
-        <span ref={connectionRef} className="jdn_header-connection">
+        <div ref={connectionRef} className="jdn_header-connection">
           {renderServerIndicator()}
-        </span>
+        </div>
       </Space>
     </React.Fragment>
   );

src/common/components/notification/useNotifications.tsx

@@ -56,7 +56,6 @@ export const useNotifications = (container?: HTMLElement | null) => {
     notification[type]({
       message: _message,
       description,
-      duration: 500,
       getContainer: () => container || document.body,
       placement: "bottom",
       bottom,

src/features/locators/locators.slice.ts

@@ -23,6 +23,7 @@ import {
   LocatorCalculationPriority,
   JDNHash,
   LocatorValue,
+  LocatorValidationWarnings,
 } from "./types/locator.types";
 import { checkLocatorsValidityReducer } from "./reducers/checkLocatorValidity.thunk";
 import { LocatorType } from "../../common/types/common";
@@ -73,6 +74,8 @@ const locatorsSlice = createSlice({
         newValue.locator.xPath = locator;
       }
 
+      if (rest.message === LocatorValidationWarnings.NotFound) newValue.jdnHash = "";
+
       locatorsAdapter.upsertOne(state, newValue);
     },
     changeIdentificationStatus(state, { payload }: PayloadAction<IdentificationStatus>) {

src/features/locators/styles/xpath.less

@@ -26,6 +26,7 @@
 
     &_checkbox_wrapper {
       margin-right: 12px;
+      max-height: 22px;
     }
 
     &_buttons {

src/features/onboarding/OnboardingProvider.tsx

@@ -29,12 +29,14 @@ export const OnboardingProvider: FC<Props> = ({ children }) => {
   const isBackendAvailable = useSelector((state: RootState) => state.main.backendAvailable) === BackendStatus.Accessed;
   const isDefaultState = useSelector<RootState>(selectIsDefaultState);
   const isSessionUnique = useSelector((state: RootState) => state.main.isSessionUnique);
+  const isOnboardingAvailable = isBackendAvailable && !isOnbrdOpen;
 
   const dispatch = useDispatch();
 
   useEffect(() => {
     if (!_isOnboardingPassed && isBackendAvailable && isSessionUnique) {
       setIsModalOpen(true);
+      setLocalStorage(LocalStorageKey.IsOnboardingPassed, true);
     } else {
       setIsModalOpen(false);
     }
@@ -47,7 +49,6 @@ export const OnboardingProvider: FC<Props> = ({ children }) => {
 
   const closeOnboarding = () => {
     setIsOnbrdOpen(false);
-    setLocalStorage(LocalStorageKey.IsOnboardingPassed, true);
   };
   const addRef = (
     name: OnbrdStep,
@@ -131,6 +132,7 @@ export const OnboardingProvider: FC<Props> = ({ children }) => {
       value={{
         defaultStep,
         isOpen: isOnbrdOpen,
+        isOnboardingAvailable,
         tourSteps,
         isCustomLocatorFlow,
         addRef,
@@ -147,6 +149,7 @@ export const OnboardingProvider: FC<Props> = ({ children }) => {
         onCancel={() => setIsModalOpen(false)}
         onOk={handleConfirmModal}
         okText={OnboardingProviderTexts.ModalOkButtonText}
+        cancelText={OnboardingProviderTexts.ModalCancelButtonText}
       >
         {OnboardingProviderTexts.ModalText}
       </Modal>

src/features/onboarding/components/OnboardingPopup.tsx

@@ -4,7 +4,6 @@ import { Popconfirm } from "antd";
 import { RootState } from "../../../app/store/store";
 import { selectIsDefaultState } from "../../../app/main.selectors";
 import { OnboardingContext } from "../OnboardingProvider";
-import { BackendStatus } from "../../../app/types/mainSlice.types";
 import { OnboardingPopupText, OnboardingPopupButtons } from "../types/constants";
 
 interface Props {
@@ -14,14 +13,14 @@ interface Props {
 export const OnboardingPopup: FC<Props> = ({ children }) => {
   const { openOnboarding } = useContext(OnboardingContext);
   const isDefaultState = useSelector<RootState>(selectIsDefaultState);
-  const isOnboardingAvailable =
-    useSelector<RootState>((_state) => _state.main.backendAvailable) === BackendStatus.Accessed;
+  const { isOnboardingAvailable } = useContext(OnboardingContext);
 
   return (
     <Popconfirm
       overlayClassName="jdn__header-onboarding-button"
       placement="bottomRight"
       align={{ offset: [18, 0] }}
+      icon={false}
       disabled={!isOnboardingAvailable}
       title={isDefaultState ? OnboardingPopupText.Default : OnboardingPopupText.InProgress}
       onConfirm={openOnboarding}

src/features/onboarding/types/constants.ts

@@ -29,4 +29,5 @@ export enum OnboardingProviderTexts {
   ModalTitle = "Welcome to Onboarding Tutorial!",
   ModalText = "Discover all the features and possibilities of the extension with the onboarding tutorial.",
   ModalOkButtonText = "Start",
+  ModalCancelButtonText = "Skip",
 }

src/features/onboarding/types/context.types.ts

@@ -8,6 +8,7 @@ export interface OnboardingContext {
   defaultStep?: number;
   isCustomLocatorFlow: boolean;
   isOpen: boolean;
+  isOnboardingAvailable: boolean;
   tourSteps: TourProps["steps"];
   addRef: (
     name: OnbrdStep,

src/features/onboarding/utils/tourSteps.tsx

@@ -102,7 +102,7 @@ const saveLocators = (refs: Record<OnbrdStep, StepRef>) => ({
   description: "Save your selections.",
   target: refs[OnbrdStep.SaveLocators]?.target?.current,
   nextButtonProps: {
-    children: "Save PO",
+    children: "Save Page Object",
     onClick: refs[OnbrdStep.SaveLocators]?.onClickNext,
   },
 });

src/features/pageObjects/components/PageObjMenu.tsx

@@ -91,6 +91,7 @@ export const PageObjMenu: React.FC<Props> = ({ id, name, url, locators, elements
     <div onClick={(e) => e.stopPropagation()}>
       <OnbrdTooltip>
         <Dropdown
+          disabled={isOnboardingOpen}
           align={{ offset: [15, 0] }}
           trigger={["click"]}
           menu={getMenuItems(id, locators, elements, name, url)}

src/pageServices/contentScripts/selectable.js

@@ -38,11 +38,13 @@ export const selectable = () => {
         });
       } else query = `[id='${payload.jdnHash}']`;
 
-      this.foreach(document.querySelectorAll(query), (element) => {
-        if (element.classList.contains(opt.selectedClass)) {
-          element.classList.remove(opt.selectedClass);
-        }
-      });
+      if (query.length) {
+        this.foreach(document.querySelectorAll(query), (element) => {
+          if (element.classList.contains(opt.selectedClass)) {
+            element.classList.remove(opt.selectedClass);
+          }
+        });
+      }
     };
 
     Selectables.prototype.setSelect = function (payload) {