fix(Tablet): clear tablet data on unmount (#425)

Author: artemmufazalov

src/containers/Tablet/Tablet.tsx

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import {Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {backend} from '../../store';
-import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
+import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducers/tablet';
 import {setHeader} from '../../store/reducers/header';
 import routes, {createHref} from '../../routes';
 
@@ -49,6 +49,13 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
+    // NOTE: should be reviewed when migrating to React 18
+    useEffect(() => {
+        return () => {
+            dispatch(clearTabletData());
+        };
+    }, [dispatch]);
+
     useEffect(() => {
         if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
             dispatch(getTabletDescribe(tablet.TenantId));

src/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -12,7 +12,7 @@ import {b} from '../Tablet';
 
 interface TabletInfoProps {
     tablet: TTabletStateInfo;
-    tenantPath: string;
+    tenantPath?: string;
 }
 
 export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
@@ -30,7 +30,7 @@ export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
     const hasHiveId = HiveId && HiveId !== '0';
     const hasUptime = State === ETabletState.Active;
 
-    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath}];
+    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath || '-'}];
 
     if (hasHiveId) {
         tabletInfo.push({

src/store/reducers/tablet.ts

@@ -16,9 +16,11 @@ import {prepareNodesMap} from '../../utils/nodes';
 export const FETCH_TABLET = createRequestActionTypes('TABLET', 'FETCH_TABLET');
 export const FETCH_TABLET_DESCRIBE = createRequestActionTypes('TABLET', 'FETCH_TABLET_DESCRIBE');
 
+const CLEAR_TABLET_DATA = 'tablet/CLEAR_TABLET_DATA';
+
 const initialState = {
     loading: false,
-    tenantPath: '-',
+    tenantPath: undefined,
 };
 
 const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, action) => {
@@ -57,6 +59,15 @@ const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, acti
                 error: undefined,
             };
         }
+        case CLEAR_TABLET_DATA: {
+            return {
+                ...state,
+                id: undefined,
+                tenantPath: undefined,
+                data: undefined,
+                history: undefined,
+            };
+        }
         default:
             return state;
     }
@@ -122,4 +133,10 @@ export const getTabletDescribe = (tenantId: TDomainKey = {}) => {
     });
 };
 
+export const clearTabletData = () => {
+    return {
+        type: CLEAR_TABLET_DATA,
+    } as const;
+};
+
 export default tablet;

src/types/store/tablet.ts

@@ -1,8 +1,8 @@
+import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
 import type {ETabletState, TTabletStateInfo} from '../api/tablet';
 
-import {FETCH_TABLET, FETCH_TABLET_DESCRIBE} from '../../store/reducers/tablet';
-import {ApiRequestAction} from '../../store/utils';
+import {FETCH_TABLET, FETCH_TABLET_DESCRIBE, clearTabletData} from '../../store/reducers/tablet';
 
 export interface ITabletPreparedHistoryItem {
     nodeId: string;
@@ -16,7 +16,7 @@ export interface ITabletPreparedHistoryItem {
 
 export interface ITabletState {
     loading: boolean;
-    tenantPath: string;
+    tenantPath?: string;
     error?: IResponseError;
     id?: string;
     history?: ITabletPreparedHistoryItem[];
@@ -44,7 +44,10 @@ type ITabletDescribeApiRequestAction = ApiRequestAction<
     IResponseError
 >;
 
-export type ITabletAction = ITabletApiRequestAction | ITabletDescribeApiRequestAction;
+export type ITabletAction =
+    | ITabletApiRequestAction
+    | ITabletDescribeApiRequestAction
+    | ReturnType<typeof clearTabletData>;
 
 export interface ITabletRootStateSlice {
     tablet: ITabletState;