fix(OperationsList): fix for 'unexpected error' after aborting an ope…

…ration [YTFRONT-4013]

packages/ui/src/ui/pages/operations/OperationDetail/OperationDetail.tsx

@@ -96,9 +96,8 @@ class OperationDetail extends React.Component<ReduxProps & RouteProps> {
     };
 
     renderAction = (action: ReduxProps['actions'][0]) => {
-        const {promptAction, operation, getOperation} = this.props;
+        const {promptAction, operation} = this.props;
 
-        const updateOperation = () => getOperation(operation.$value);
         const message = action.message || (
             <span>
                 Are you sure you want to <strong>{action.name}</strong> the operation?
@@ -109,7 +108,8 @@ class OperationDetail extends React.Component<ReduxProps & RouteProps> {
                 ...action,
                 operation,
                 currentOption,
-                updateOperation,
+            }).then(() => {
+                return this.props.getOperation(operation.$value);
             });
 
         return (

packages/ui/src/ui/pages/operations/OperationsList/OperationsList.js

@@ -8,7 +8,7 @@ import Error from '../../../components/Error/Error';
 
 import OperationsListTable from './OperationsListTable/OperationsListTable';
 import OperationsListToolbar from './OperationsListToolbar/OperationsListToolbar';
-import {updateOperations} from '../../../store/actions/operations/list';
+import {updateOperationsByParams} from '../../../store/actions/operations/list';
 import {useMemoizedIfEqual, useUpdater} from '../../../hooks/use-updater';
 import {useAppRumMeasureStart} from '../../../rum/rum-app-measures';
 import {RumMeasureTypes} from '../../../rum/rum-measure-types';
@@ -28,7 +28,7 @@ function OperationListUpdater({timeRange}) {
     const params = useMemoizedIfEqual(cluster, parameters);
 
     const updateFn = React.useCallback(() => {
-        dispatch(updateOperations(...params));
+        dispatch(updateOperationsByParams(...params));
     }, [dispatch, params]);
 
     useUpdater(updateFn, {onlyOnce: isBigTimeRange(timeRange)});
@@ -63,7 +63,6 @@ class OperationsList extends Component {
             from: PropTypes.string,
             to: PropTypes.string,
         }).isRequired,
-        updateOperations: PropTypes.func.isRequired,
         // from props
         inDashboard: PropTypes.bool,
     };
@@ -119,11 +118,7 @@ function mapStateToProps({operations}) {
     };
 }
 
-const mapDispatchToProps = {
-    updateOperations,
-};
-
-const OperationsListConnected = connect(mapStateToProps, mapDispatchToProps)(OperationsList);
+const OperationsListConnected = connect(mapStateToProps)(OperationsList);
 
 function OperationsListWithRum() {
     const isFinalStatus = useSelector(getOperationsListIsFinalState);

packages/ui/src/ui/pages/operations/OperationsList/OperationsListTable/OperationsListTable.js

@@ -18,7 +18,10 @@ import Link from '../../../../components/Link/Link';
 import Icon from '../../../../components/Icon/Icon';
 import {Tooltip} from '../../../../components/Tooltip/Tooltip';
 
-import {showEditPoolsWeightsModal, updateOperations} from '../../../../store/actions/operations';
+import {
+    showEditPoolsWeightsModal,
+    updateOperationsList,
+} from '../../../../store/actions/operations';
 import {performAction} from '../../../../utils/operations/detail';
 import {prepareActions} from '../../../../utils/operations/details-ts';
 import {promptAction} from '../../../../store/actions/actions';
@@ -104,7 +107,7 @@ class OperationsListTable extends Component {
 
         showEditPoolsWeightsModal: PropTypes.func.isRequired,
         promptAction: PropTypes.func.isRequired,
-        updateOperations: PropTypes.func.isRequired,
+        updateOperationsList: PropTypes.func.isRequired,
         // from react-router
         match: PropTypes.shape({
             url: PropTypes.string.isRequired,
@@ -233,7 +236,7 @@ class OperationsListTable extends Component {
     };
 
     renderActions = (operation) => {
-        const {promptAction, updateOperations: updateOperation} = this.props;
+        const {promptAction} = this.props;
 
         const actions = prepareActions(operation);
 
@@ -253,7 +256,8 @@ class OperationsListTable extends Component {
                             ...action,
                             operation,
                             currentOption,
-                            updateOperation,
+                        }).then(() => {
+                            this.props.updateOperationsList();
                         });
 
                     return (
@@ -374,7 +378,7 @@ function mapStateToProps({operations, global}) {
 const mapDispatchToProps = {
     showEditPoolsWeightsModal,
     promptAction,
-    updateOperations,
+    updateOperationsList,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(OperationsListTable));

packages/ui/src/ui/store/actions/operations/index.js

@@ -2,15 +2,13 @@ import yt from '@ytsaurus/javascript-wrapper/lib/yt';
 import _ from 'lodash';
 
 import {getOperation} from '../../../store/actions/operations/detail';
-import {updateOperations} from '../../../store/actions/operations/list';
+import {updateOperationsList} from '../../../store/actions/operations/list';
 import {
     HIDE_EDIT_WEIGHT_POOL_MODAL,
     SET_PULLS_AND_WEIGHTS,
     SHOW_EDIT_WEIGHT_POOL_MODAL,
 } from '../../../constants/operations';
 import {Page} from '../../../constants';
-import {getCluster} from '../../../store/selectors/global';
-import {getListRequestParameters} from './utils';
 
 export * from '../../../store/actions/operations/list';
 
@@ -42,7 +40,7 @@ export function setPoolsAndWeights(operation, pools, weights) {
         {},
     );
 
-    return (dispatch, getState) => {
+    return (dispatch) => {
         dispatch({
             type: SET_PULLS_AND_WEIGHTS.REQUEST,
         });
@@ -73,10 +71,7 @@ export function setPoolsAndWeights(operation, pools, weights) {
             })
             .then(() => {
                 if (inOperationsList) {
-                    const state = getState();
-                    const cluster = getCluster(state);
-                    const parameters = getListRequestParameters(state);
-                    dispatch(updateOperations(cluster, parameters));
+                    dispatch(updateOperationsList());
                 } else {
                     dispatch(getOperation(operationId));
                 }

packages/ui/src/ui/store/actions/operations/list.js

@@ -25,11 +25,16 @@ import {
 } from '../../../constants/operations';
 import {ListOperationSelector} from '../../../pages/operations/selectors';
 import {removeSetting, setSetting} from '../../../store/actions/settings';
-import {getDefaultFromTime, getDefaultToTime} from '../../../store/actions/operations/utils';
+import {
+    getDefaultFromTime,
+    getDefaultToTime,
+    getListRequestParameters,
+} from '../../../store/actions/operations/utils';
 import CancelHelper from '../../../utils/cancel-helper';
 import {NAMESPACES} from '../../../../shared/constants/settings';
 import {RumWrapper, YTApiId, ytApiV3Id} from '../../../rum/rum-wrap-api';
 import {RumMeasureTypes} from '../../../rum/rum-measure-types';
+import {getCluster} from '../../../store/selectors/global';
 
 const cancellableRequests = new CancelHelper();
 
@@ -75,7 +80,17 @@ export function updatePager(incomplete) {
     };
 }
 
-export function updateOperations(cluster, parameters) {
+export function updateOperationsList() {
+    return (dispatch, getState) => {
+        const state = getState();
+        const cluster = getCluster(state);
+        const parameters = getListRequestParameters(state);
+
+        return dispatch(updateOperationsByParams(cluster, parameters));
+    };
+}
+
+export function updateOperationsByParams(cluster, parameters) {
     return (dispatch) => {
         dispatch({
             type: UPDATE_OPERATIONS_REQUEST,

packages/ui/src/ui/utils/operations/detail.js

@@ -20,7 +20,7 @@ export function checkUserTransaction(operationAttributes) {
     );
 }
 
-export function performAction({updateOperation, operation, currentOption, options = [], name}) {
+export function performAction({operation, currentOption, options = [], name}) {
     const option = _.find(options, (option) => option.value === currentOption);
     let parameters = {operation_id: operation.$value};
     if (option?.data?.parameters) {
@@ -31,7 +31,7 @@ export function performAction({updateOperation, operation, currentOption, option
         operation_detail_action: name,
     });
 
-    return yt.v3[name + 'Operation'](parameters).then(updateOperation);
+    return yt.v3[name + 'Operation'](parameters);
 }
 
 export function getDetailsTabsShowSettings(operation) {