issue 1651: progress bar error state

src/features/locators/reducers/identifyElements.thunk.ts

@@ -12,7 +12,7 @@ import { getLocalStorage, LocalStorageKey } from '../../../common/utils/localSto
 import { selectAutoGeneratingLocatorTypes, selectPageObjById } from '../../pageObjects/selectors/pageObjects.selectors';
 import { RootState } from '../../../app/store/store';
 import { runLocatorsGeneration } from './runLocatorsGeneration.thunk';
-import { finishProgressBar } from '../../pageObjects/progressBar.slice';
+import { finishProgressBar, setProgressError } from '../../pageObjects/progressBar.slice';
 import { delay } from '../utils/delay';
 import { fetchPageDocument } from '../../../services/pageDocument/fetchPageDocument.thunk';
 import { createDocumentForRobula } from '../../../services/pageDocument/pageDocument.slice';
@@ -45,38 +45,37 @@ export const identifyElements = createAsyncThunk('locators/identifyElements', as
       throw new Error(error);
     }
 
-    if (data) {
-      const locators = data
-        .filter((el: PredictedEntity) => el.is_shown)
-        .map((el: PredictedEntity) => {
-          return {
-            ...el,
-            element_id: `${el.element_id}_${pageObj}`,
-            jdnHash: el.element_id,
-            pageObj: pageObj,
-          };
-        });
-
-      await thunkAPI.dispatch(fetchPageDocument()).unwrap();
-      thunkAPI.dispatch(createDocumentForRobula(data));
-
-      thunkAPI.dispatch(finishProgressBar());
-      /* progress-bar finish animation delay: */
-      await delay(2000);
-
-      if (pageData) {
-        thunkAPI.dispatch(setPageData({ id: pageObj, pageData }));
-      }
-
-      await thunkAPI.dispatch(createLocators({ predictedElements: locators, library }));
+    if (!data) {
+      throw new Error('No data received from server');
+    }
 
-      return thunkAPI.fulfillWithValue(locators);
+    const locators = data
+      .filter((el: PredictedEntity) => el.is_shown)
+      .map((el: PredictedEntity) => {
+        return {
+          ...el,
+          element_id: `${el.element_id}_${pageObj}`,
+          jdnHash: el.element_id,
+          pageObj: pageObj,
+        };
+      });
+
+    await thunkAPI.dispatch(fetchPageDocument()).unwrap();
+    thunkAPI.dispatch(createDocumentForRobula(data));
+
+    thunkAPI.dispatch(finishProgressBar());
+    /* progress-bar finish animation delay: */
+    await delay(2000);
+
+    if (pageData) {
+      thunkAPI.dispatch(setPageData({ id: pageObj, pageData }));
     }
 
-    throw new Error('Something went wrong');
+    thunkAPI.dispatch(createLocators({ predictedElements: locators, library }));
+
+    return thunkAPI.fulfillWithValue(locators);
   } catch (error) {
-    // can use params in the function so that when the progress bar is finished there will be information about errors
-    thunkAPI.dispatch(finishProgressBar(error.message));
+    thunkAPI.dispatch(setProgressError(error.message));
     return thunkAPI.rejectWithValue(null);
   }
 });

src/features/pageObjects/progressBar.slice.ts

@@ -40,10 +40,13 @@ const progressBarSlice = createSlice({
       state.startTime = 0;
       state.error = '';
     },
-    finishProgressBar(state, action: PayloadAction<string | undefined>) {
+    finishProgressBar(state) {
       state.stage = 3;
       state.progress = 100;
-      state.error = action.payload || '';
+    },
+    setProgressError(state, action: PayloadAction<string>) {
+      state.error = action.payload;
+      state.progress = 100;
     },
     setStartTime(state, action: PayloadAction<number>) {
       state.startTime = action.payload;
@@ -59,6 +62,7 @@ export const {
   increaseStage,
   finishProgressBar,
   setStartTime,
+  setProgressError,
 } = progressBarSlice.actions;
 
 export default progressBarSlice.reducer;

src/features/pageObjects/reducers/updateProgressBar.thunk.ts

@@ -16,7 +16,7 @@ export const updateProgress = createAsyncThunk('progressBar/updateProgress', asy
 
   while (true) {
     const state = (getState() as RootState).progressBar;
-    if (state.stage === totalStages && state.progress === 100) {
+    if (state.stage === totalStages || state.progress === 100) {
       break;
     }
 

src/features/pageObjects/styles/progressBar.less

@@ -3,11 +3,10 @@
     margin: 8px 16px 0;
 
     .progress-bar {
-      width: calc(100% - 8px);
-      transition: width linear 100ms;
+      width: calc(100% - 36px);
 
       &.finished {
-        width: calc(100% + 5px);
+        width: 100%;
       }
     }
 

src/pageServices/pageDataHandlers.ts

@@ -3,7 +3,7 @@ import connector, { sendMessage } from './connector';
 import { HttpEndpoint, request } from '../services/backend';
 import { createOverlay } from './contentScripts/createOverlay';
 import { getFullDocumentWithStyles } from '../common/utils/getFullDocumentWithStyles';
-import { PredictedEntity } from '../features/locators/types/locator.types';
+import { ILocator, PredictedEntity } from '../features/locators/types/locator.types';
 import { getLibrarySelectors } from '../services/rules/createSelector';
 import { VueRules } from '../services/rules/Vue.rules';
 // /* global chrome */
@@ -21,7 +21,7 @@ export const removeOverlay = () => {
     chrome.storage.sync.set({ overlayID });
 
     connector.attachContentScript(() => {
-      chrome.storage.sync.get(['overlayID'], ({ id }) => {
+      chrome.storage.sync.get(['overlayID'], ({ overlayID: id }) => {
         const overlay = document.getElementById(id);
         if (overlay) overlay.remove();
       });
@@ -60,7 +60,7 @@ export const predictElements = (endpoint: HttpEndpoint): PredictElementsType =>
     );
 };
 
-export const setParents = async (elements: any) => {
+export const setParents = async (elements: ILocator[]) => {
   return sendMessage.assignParents(elements).then((response) => response);
 };