OD-17487 Removed dirty form check on navigation link follow. Removed …

…redundant props drilling code
ishgroup · Sep 5, 2022 · a54c099 · a54c099
1 parent 79a8a66
commit a54c099
Show file tree

Hide file tree

Showing 26 changed files with 110 additions and 13,264 deletions.
diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
diff --git a/client-html/src/js/common/components/layout/swipeable-sidebar/SwipeableSidebar.tsx b/client-html/src/js/common/components/layout/swipeable-sidebar/SwipeableSidebar.tsx
@@ -7,14 +7,14 @@
  */
 
 import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Dispatch } from "redux";
 import { connect } from "react-redux";
 import clsx from "clsx";
 import { createStyles, withStyles } from "@mui/styles";
 import { darken } from "@mui/material/styles";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
 import Divider from "@mui/material/Divider";
-import { useEffect, useMemo, useState } from "react";
 import { Backdrop } from "@mui/material";
 import Collapse from "@mui/material/Collapse";
 import Typography from "@mui/material/Typography";
@@ -24,9 +24,7 @@ import { State } from "../../../../reducers/state";
 import { getDashboardSearch } from "../../../../containers/dashboard/actions";
 import { openInternalLink } from "../../../utils/links";
 import { getEntityDisplayName } from "../../../utils/getEntityDisplayName";
-import {
- checkPermissions, getOnDemandScripts, getUserPreferences, showConfirm 
-} from "../../../actions";
+import { checkPermissions, getOnDemandScripts, getUserPreferences, showConfirm } from "../../../actions";
 import { setSwipeableDrawerSelection, toggleSwipeableDrawer } from "./actions";
 import UserSearch from "./components/UserSearch";
 import SearchResults from "./components/searchResults/SearchResults";
@@ -122,7 +120,6 @@ const styles = (theme: AppTheme) =>
 
 interface Props {
   form: string;
-  isFormDirty: boolean;
   resetEditView: any;
   showConfirm: ShowConfirmCaller;
   classes: any;
@@ -158,7 +155,6 @@ const sortItems = (a, b) => {
 const SwipeableSidebar: React.FC<Props> = props => {
   const {
     form,
-    isFormDirty,
     resetEditView,
     showConfirm,
     classes,
@@ -367,7 +363,7 @@ const SwipeableSidebar: React.FC<Props> = props => {
     };
   }, [controlResults, resultIndex]);
 
-  const checkSelectedResult = React.useCallback(
+  const checkSelectedResult = useCallback(
     (type, field, value) => {
       if (controlResults && resultIndex >= 0) {
         const selectedResult = controlResults[resultIndex];
@@ -378,19 +374,6 @@ const SwipeableSidebar: React.FC<Props> = props => {
     [controlResults, resultIndex]
   );
 
-  const showConfirmHandler = React.useCallback(onConfirm => {
-    if (isFormDirty && resetEditView) {
-      showConfirm(
-        {
-          onConfirm,
-          cancelButtonText: "DISCARD CHANGES"
-        }
-      );
-    } else {
-      onConfirm();
-    }
-  }, [isFormDirty, resetEditView]);
-
   const groupedSortedItems = useMemo<DashboardItem[]>(() => [
     ...navigation.features.map(f => ({
      category: f.key, url: f.link, name: f.title, id: null
@@ -446,7 +429,6 @@ const SwipeableSidebar: React.FC<Props> = props => {
                   classes={{ root: classes.searchResultsRoot }}
                   userSearch={userSearch}
                   checkSelectedResult={checkSelectedResult}
-                  showConfirm={showConfirmHandler}
                   setExecMenuOpened={setExecMenuOpened}
                   setScriptIdSelected={setScriptIdSelected}
                   groupedSortedItems={groupedSortedItems}
@@ -465,8 +447,6 @@ const SwipeableSidebar: React.FC<Props> = props => {
                 <Favorites
                   classes={{ topBar: classes.favoritesTopBar }}
                   groupedSortedItems={groupedSortedItems}
-                  showConfirm={showConfirmHandler}
-                  isFormDirty={isFormDirty}
                   setScriptIdSelected={setScriptIdSelected}
                   execMenuOpened={execMenuOpened}
                   setExecMenuOpened={setExecMenuOpened}
@@ -483,7 +463,7 @@ const SwipeableSidebar: React.FC<Props> = props => {
                   setExecMenuOpened={setExecMenuOpened}
                 />
                 <Divider variant="middle" className="mb-2" />
-                <SidebarLatestActivity showConfirm={showConfirmHandler} checkSelectedResult={checkSelectedResult} />
+                <SidebarLatestActivity checkSelectedResult={checkSelectedResult} />
               </div>
             </Collapse>
           </div>
@@ -504,7 +484,6 @@ const SwipeableSidebar: React.FC<Props> = props => {
             favorites={favorites}
             favoriteScripts={favoriteScripts}
             onClose={() => setSelected(null)}
-            showConfirm={showConfirmHandler}
             setScriptIdSelected={setScriptIdSelected}
             setExecMenuOpened={setExecMenuOpened}
           />
@@ -536,7 +515,6 @@ const mapsStateToProps = (state: State) => ({
   listEntity: state.list.records.entity,
   listSearchQuery: state.list.searchQuery,
   selected: state.swipeableDrawer.selected,
-  isFormDirty: state.swipeableDrawer.isDirty,
   resetEditView: state.swipeableDrawer.resetEditView,
   opened: state.swipeableDrawer.opened,
   variant: state.swipeableDrawer.variant,
@@ -557,4 +535,4 @@ const mapStateToDispatch = (dispatch: Dispatch<any>) => ({
   showConfirm: props => dispatch(showConfirm(props))
 });
 
-export default connect<any, any, any>(mapsStateToProps, mapStateToDispatch)(withStyles(styles, { withTheme: true })(SwipeableSidebar));
+export default connect<any, any, any>(mapsStateToProps, mapStateToDispatch)(withStyles(styles, { withTheme: true })(SwipeableSidebar));
diff --git a/client-html/src/js/common/components/layout/swipeable-sidebar/actions/index.ts b/client-html/src/js/common/components/layout/swipeable-sidebar/actions/index.ts
@@ -7,21 +7,14 @@ import { VARIANTS } from "../utils";
 
 export const TOGGLE_SWIPEABLE_DRAWER = "common/swipeableDrawer/toggle";
 
-export const SET_SWIPEABLE_DRAWER_DIRTY_FORM = "common/set/swipeableDrawer/dirty/form";
-
 export const SET_SWIPEABLE_DRAWER_SELECTION = "common/set/swipeableDrawer/selection";
 
 export const toggleSwipeableDrawer = (variant = VARIANTS.temporary) => ({
   type: TOGGLE_SWIPEABLE_DRAWER,
   payload: { variant }
 });
 
-export const setSwipeableDrawerDirtyForm = (isDirty?: boolean, resetEditView?: any) => ({
-  type: SET_SWIPEABLE_DRAWER_DIRTY_FORM,
-  payload: { isDirty, resetEditView }
-});
-
 export const setSwipeableDrawerSelection = (selected: number | string) => ({
   type: SET_SWIPEABLE_DRAWER_SELECTION,
   payload: { selected }
-});
+});
diff --git a/...ml/src/js/common/components/layout/swipeable-sidebar/components/SidebarLatestActivity.tsx b/...ml/src/js/common/components/layout/swipeable-sidebar/components/SidebarLatestActivity.tsx
@@ -24,7 +24,7 @@ const styles = (theme: AppTheme) => createStyles({
 });
 
 const SidebarLatestActivity: React.FC<any> = props => {
-  const { showConfirm, classes, checkSelectedResult } = props;
+  const { classes, checkSelectedResult } = props;
   const [activities, setActivities] = React.useState(JSON.parse(LSGetItem(DASHBOARD_ACTIVITY_STORAGE_NAME) || "null"));
 
   const updateActivity = React.useCallback(() => {
@@ -55,7 +55,6 @@ const SidebarLatestActivity: React.FC<any> = props => {
                 entityDisplayName={getEntityDisplayName(v.entity)}
                 entity={v.entity}
                 items={v.items}
-                showConfirm={showConfirm}
                 checkSelectedResult={checkSelectedResult}
               />
             </div>

diff --git a/...c/js/common/components/layout/swipeable-sidebar/components/searchResults/ListLinkItem.tsx b/...c/js/common/components/layout/swipeable-sidebar/components/searchResults/ListLinkItem.tsx
@@ -36,12 +36,12 @@ const styles = theme => createStyles({
 
 const ListLinkItem = props => {
   const {
-    showConfirm, classes, item, url, openLink, selected, id
+    classes, item, url, openLink, selected, id
   } = props;
 
   return (
     <ListItem
-      onClick={openLink ? () => openLink(item.id) : () => showConfirm(() => openInternalLink(getPrivisioningLink(url)))}
+      onClick={openLink ? () => openLink(item.id) : () => () => openInternalLink(getPrivisioningLink(url))}
       disableGutters
       className={classes.listItem}
       dense

diff --git a/.../js/common/components/layout/swipeable-sidebar/components/searchResults/SearchResults.tsx b/.../js/common/components/layout/swipeable-sidebar/components/searchResults/SearchResults.tsx
@@ -28,7 +28,6 @@ const styles = theme => createStyles({
 
 const SearchResults = props => {
   const {
-    showConfirm,
     classes,
     userSearch,
     scripts,
@@ -55,7 +54,6 @@ const SearchResults = props => {
                 name: getHighlightedPartLabel(c.title, userSearch)
               }}
               id={getResultId(i, c.title)}
-              showConfirm={showConfirm}
             />
           ))}
       {userSearch
@@ -92,7 +90,6 @@ const SearchResults = props => {
                 return { ...item, name };
               })}
               userSearch={userSearch}
-              showConfirm={showConfirm}
               setSelected={setSelected}
             />
           </div>

diff --git a/client-html/src/js/common/components/layout/swipeable-sidebar/reducers/index.ts b/client-html/src/js/common/components/layout/swipeable-sidebar/reducers/index.ts
@@ -5,12 +5,11 @@
 
 import { IAction } from "../../../../actions/IshAction";
 import { SwipeableDrawer } from "../../../../../model/common/drawer/SwipeableDrawerModel";
-import { SET_SWIPEABLE_DRAWER_DIRTY_FORM, SET_SWIPEABLE_DRAWER_SELECTION, TOGGLE_SWIPEABLE_DRAWER } from "../actions";
+import { SET_SWIPEABLE_DRAWER_SELECTION, TOGGLE_SWIPEABLE_DRAWER } from "../actions";
 
 const initial: SwipeableDrawer = {
   opened: false,
   variant: "temporary",
-  isDirty: false,
   selected: null,
   resetEditView: () => {}
 };
@@ -24,14 +23,6 @@ export const swipeableDrawerReducer = (state: SwipeableDrawer = initial, action:
         variant: action.payload.variant
       };
     }
-
-    case SET_SWIPEABLE_DRAWER_DIRTY_FORM: {
-      return {
-        ...state,
-        isDirty: action.payload.isDirty,
-        resetEditView: action.payload.resetEditView
-      };
-    }
 
     case SET_SWIPEABLE_DRAWER_SELECTION: {
       return {

diff --git a/client-html/src/js/common/components/list-view/ListView.tsx b/client-html/src/js/common/components/list-view/ListView.tsx
@@ -79,7 +79,6 @@ import {
   getTagsUpdatedByIds,
   setActiveFiltersBySearch
 } from "./utils/listFiltersUtils";
-import { setSwipeableDrawerDirtyForm } from "../layout/swipeable-sidebar/actions";
 import { LSGetItem } from "../../utils/storage";
 import { getCustomFieldTypes } from "../../../containers/entities/customFieldTypes/actions";
 import {
@@ -199,7 +198,6 @@ interface Props extends Partial<ListState> {
   searchQuery?: SearchQuery;
   setListEditRecordFetching?: any;
   search?: string;
-  onSwipeableDrawerDirtyForm?: (isDirty: boolean, resetEditView: any) => void;
   deleteDisabledCondition?: (props) => boolean;
   noListTags?: boolean;
   setEntity?: (entity: EntityName) => void;
@@ -1288,7 +1286,6 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => ({
   )),
   onSearch: search => dispatch(setSearch(search, ownProps.rootEntity)),
   setListEditRecordFetching: () => dispatch(setListEditRecordFetching()),
-  onSwipeableDrawerDirtyForm: (isDirty: boolean, resetEditView: any) => dispatch(setSwipeableDrawerDirtyForm(isDirty, resetEditView)),
   getListViewPreferences: () => dispatch(getUserPreferences([LISTVIEW_MAIN_CONTENT_WIDTH])),
   setListviewMainContentWidth: (value: string) => dispatch(setUserPreference({ key: LISTVIEW_MAIN_CONTENT_WIDTH, value })),
   submitForm: () => dispatch(submit(LIST_EDIT_VIEW_FORM_NAME)),

diff --git a/...ml/src/js/common/components/list-view/components/full-screen-edit-view/NestedEditView.tsx b/...ml/src/js/common/components/list-view/components/full-screen-edit-view/NestedEditView.tsx
@@ -11,6 +11,7 @@ import { onSubmitFail } from "../../../../utils/highlightFormClassErrors";
 import FullScreenEditView from "./FullScreenEditView";
 import { clearListNestedEditRecord, closeListNestedEditRecord, updateListNestedEditRecord } from "../../actions";
 import { ApiMethods } from "../../../../../model/common/apiHandlers";
+import { NESTED_EDIT_VIEW_FORM_NAME } from "../../../../../constants/Forms";
 
 class NestedEditView extends React.Component<any, any> {
   onClose = index => {
@@ -100,7 +101,7 @@ class NestedEditView extends React.Component<any, any> {
         nameCondition={nameCondition}
         key={index + r.record.id}
         rootEntity={r.entity}
-        form={`NestedEditViewForm[${index}]`}
+        form={`${NESTED_EDIT_VIEW_FORM_NAME}[${index}]`}
         fullScreenEditView={r.opened}
         toogleFullScreenEditView={() => this.onClose(index)}
         EditViewContent={

diff --git a/...html/src/js/common/components/list-view/components/side-bar/components/StubFilterItem.tsx b/...html/src/js/common/components/list-view/components/side-bar/components/StubFilterItem.tsx
@@ -13,8 +13,8 @@ import { Dispatch } from "redux";
 import { Filter } from "@api/model";
 import { createCustomFilter, setListSavingFilter } from "../../../actions";
 import { SavingFilterState } from "../../../../../../model/common/ListView";
-import { validateSingleMandatoryField, validateAqlFilterOrTagName } from "../../../../../utils/validation";
 import { SIMPLE_SEARCH_QUOTES_REGEX, SIMPLE_SEARCH_REGEX } from "../../../../../../constants/Config";
+import { validateAqlFilterOrTagName, validateSingleMandatoryField } from "../../../../../utils/validation";
 
 const styles = theme =>
   createStyles({
@@ -118,7 +118,7 @@ export class StubFilterItem extends React.PureComponent<any, any> {
 
     return (
       <div className={classes.root}>
-        <Checkbox disabled className={classes.checkbox} color={"secondary"} />
+        <Checkbox disabled className={classes.checkbox} color="secondary" />
         <TextField
           onChange={this.onFilterNameChange}
           helperText={errorText}
@@ -149,12 +149,10 @@ export class StubFilterItem extends React.PureComponent<any, any> {
 
 export const StubFilterItemBase = withStyles(styles)(StubFilterItem);
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => {
-  return {
+const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
     saveFilter: (filter: Filter, rootEntity: string) => dispatch(createCustomFilter(filter, rootEntity)),
     setSavingFilter: (savingFilter?: SavingFilterState) => dispatch(setListSavingFilter(savingFilter))
-  };
-};
+  });
 
 export default connect<any, any, any>(
   null,

diff --git a/client-html/src/js/common/components/list-view/epics/EpicGetListNestedEditRecord.ts b/client-html/src/js/common/components/list-view/epics/EpicGetListNestedEditRecord.ts
@@ -10,6 +10,7 @@ import { State } from "../../../../reducers/state";
 import { GET_LIST_NESTED_EDIT_RECORD, SET_LIST_NESTED_EDIT_RECORD } from "../actions";
 import { getEntityItemById } from "../../../../containers/entities/common/entityItemsService";
 import { EntityName } from "../../../../model/entities/common";
+import { NESTED_EDIT_VIEW_FORM_NAME } from "../../../../constants/Forms";
 
 const request: EpicUtils.Request<any, { entity: EntityName; id: number; index?: number; threeColumn?: boolean }> = {
   type: GET_LIST_NESTED_EDIT_RECORD,
@@ -20,7 +21,7 @@ const request: EpicUtils.Request<any, { entity: EntityName; id: number; index?:
     return getEntityItemById(entity, id);
   },
   processData: (record: any, state: State, { index, entity }) => (typeof index === "number"
-      ? [initialize(`NestedEditViewForm[${index}]`, record)]
+      ? [initialize(`${NESTED_EDIT_VIEW_FORM_NAME}[${index}]`, record)]
       : [
           {
             type: SET_LIST_NESTED_EDIT_RECORD,
@@ -30,7 +31,7 @@ const request: EpicUtils.Request<any, { entity: EntityName; id: number; index?:
               opened: true
             }
           },
-          initialize(`NestedEditViewForm[${state.list.nestedEditRecords.length || 0}]`, record)
+          initialize(`${NESTED_EDIT_VIEW_FORM_NAME}[${state.list.nestedEditRecords.length || 0}]`, record)
         ])
 };
 

diff --git a/client-html/src/js/common/components/list-view/epics/EpicUpdateListNestedRecord.ts b/client-html/src/js/common/components/list-view/epics/EpicUpdateListNestedRecord.ts
@@ -14,6 +14,7 @@ import {
   updateEntityItemByIdErrorHandler
 } from "../../../../containers/entities/common/entityItemsService";
 import { EntityName } from "../../../../model/entities/common";
+import { NESTED_EDIT_VIEW_FORM_NAME } from "../../../../constants/Forms";
 
 const request: EpicUtils.Request<
   any,
@@ -42,7 +43,7 @@ const request: EpicUtils.Request<
       }
     ],
   processError: (response, { entity, index, record }) =>
-    updateEntityItemByIdErrorHandler(response, entity, `NestedEditViewForm[${index}]`, record)
+    updateEntityItemByIdErrorHandler(response, entity, `${NESTED_EDIT_VIEW_FORM_NAME}[${index}]`, record)
 };
 
 export const EpicUpdateListNestedRecord: Epic<any, any> = EpicUtils.Create(request);
diff --git a/client-html/src/js/common/components/navigation/NavigationCategory.tsx b/client-html/src/js/common/components/navigation/NavigationCategory.tsx
@@ -17,7 +17,7 @@ import CatalogItem from "../layout/catalog/CatalogItem";
 import { useAppDispatch, useAppSelector } from "../../utils/hooks";
 import { DASHBOARD_FAVORITES_KEY, FAVORITE_SCRIPTS_KEY } from "../../../constants/Config";
 import { setUserPreference } from "../../actions";
-import { AnyArgFunction, BooleanArgFunction, NumberArgFunction } from "../../../model/common/CommonFunctions";
+import { BooleanArgFunction, NumberArgFunction } from "../../../model/common/CommonFunctions";
 import { openInternalLink } from "../../utils/links";
 import { getPrivisioningLink } from "../../../routes/routesMapping";
 
@@ -32,7 +32,6 @@ const useStyles = makeAppStyles(theme => ({
 }));
 
 interface Props {
-  showConfirm: AnyArgFunction,
   selected: string;
   onClose: any;
   favorites: string[];
@@ -74,7 +73,6 @@ const NavigationCategory = (
     onClose,
     favorites,
     favoriteScripts,
-    showConfirm,
     setScriptIdSelected,
     setExecMenuOpened
   }:Props
@@ -110,9 +108,7 @@ const NavigationCategory = (
     }
   };
 
-  const onOpen = (link: string) => {
-    showConfirm(() => openInternalLink(getPrivisioningLink(link)));
-  };
+  const onOpen = (link: string) => () => openInternalLink(getPrivisioningLink(link));
 
   return (
     <div className="flex-fill p-3 overflow-y-auto">