feat(Tenant): save initial tab preference

Author: ariser

src/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,3 +1,4 @@
+import {connect} from 'react-redux';
 import {Link} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
@@ -11,16 +12,18 @@ import Diagnostics from '../Diagnostics/Diagnostics';
 
 import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
 import routes, {createHref} from '../../../routes';
+import {setSettingValue} from '../../../store/reducers/settings';
+import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
 
 import './ObjectGeneral.scss';
 
 const b = cn('object-general');
 
-interface ObjectGeneralProps {
+type ObjectGeneralProps = {
     type: string;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
-}
+} & typeof mapDispatchToProps;
 
 function ObjectGeneral(props: ObjectGeneralProps) {
     const location = useLocation();
@@ -63,6 +66,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
                         );
                     }}
                     allowNotSelected
+                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
                 />
             </div>
         );
@@ -101,4 +105,8 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     return renderContent();
 }
 
-export default ObjectGeneral;
+const mapDispatchToProps = {
+    setSettingValue,
+};
+
+export default connect(null, mapDispatchToProps)(ObjectGeneral);

src/containers/Tenants/Tenants.js

@@ -17,9 +17,9 @@ import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants';
-import {changeFilter} from '../../store/reducers/settings';
+import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
@@ -119,6 +119,7 @@ class Tenants extends React.Component {
             filter,
             handleSearchQuery,
             additionalTenantsInfo = {},
+            savedTenantInitialTab,
         } = this.props;
 
         const filteredTenantsBySearch = tenants.filter(
@@ -129,6 +130,9 @@ class Tenants extends React.Component {
         );
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
+        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
+        const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
+
         const columns = [
             {
                 name: 'Name',
@@ -150,8 +154,8 @@ class Tenants extends React.Component {
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
                                     backend: tenantBackend,
-                                    [TenantTabsGroups.info]: TENANT_INFO_TABS[0].id,
-                                    [TenantTabsGroups.general]: TENANT_GENERAL_TABS[0].id,
+                                    [TenantTabsGroups.info]: initialTenantInfoTab,
+                                    [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
@@ -347,6 +351,7 @@ const mapStateToProps = (state) => {
         loading,
         error,
         filter: state.settings.problemFilter,
+        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_TAB_KEY),
     };
 };
 

src/store/reducers/settings.js

@@ -1,4 +1,4 @@
-import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY} from '../../utils/constants';
+import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
 
@@ -13,6 +13,9 @@ const theme = window.web_version
 const savedQueries = window.web_version
     ? userSettings[SAVED_QUERIES_KEY]
     : getValueFromLS(SAVED_QUERIES_KEY, '[]');
+const savedTenantGeneralTab = window.web_version
+    ? userSettings[TENANT_INITIAL_TAB_KEY]
+    : getValueFromLS(TENANT_INITIAL_TAB_KEY);
 
 export const initialState = {
     problemFilter: ALL,
@@ -21,6 +24,7 @@ export const initialState = {
         ...userSettings,
         theme,
         [SAVED_QUERIES_KEY]: savedQueries,
+        [TENANT_INITIAL_TAB_KEY]: savedTenantGeneralTab,
     },
     systemSettings,
 };

src/utils/constants.js

@@ -137,3 +137,5 @@ export const DEFAULT_TABLE_SETTINGS = {
     dynamicRender: true,
     highlightRows: true,
 };
+
+export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';