diff --git a/frontend/src/metabase/admin/performance/components/PerformanceApp.styled.tsx b/frontend/src/metabase/admin/performance/components/PerformanceApp.styled.tsx index efdd696273af476d741408176802aaf04eb1ad84..0e72d8187b4fe9a5fc7d105944421e1b93caa39e 100644 --- a/frontend/src/metabase/admin/performance/components/PerformanceApp.styled.tsx +++ b/frontend/src/metabase/admin/performance/components/PerformanceApp.styled.tsx @@ -30,6 +30,5 @@ export const TabsPanel = styled(Tabs.Panel)<{ value: string }>` flex: 1; justify-content: stretch; padding: 1rem 2.5rem; - ${props => - props.value === PerformanceTabId.DataCachingSettings && `overflow: hidden;`} + ${props => props.value === PerformanceTabId.Databases && `overflow: hidden;`} `; diff --git a/frontend/src/metabase/admin/performance/components/PerformanceApp.tsx b/frontend/src/metabase/admin/performance/components/PerformanceApp.tsx index 87057106dc9632d3006b8b97a9a4f677e715ca25..ccaab07f227d755c608808d08dabe60f0458c190 100644 --- a/frontend/src/metabase/admin/performance/components/PerformanceApp.tsx +++ b/frontend/src/metabase/admin/performance/components/PerformanceApp.tsx @@ -1,7 +1,9 @@ import { useLayoutEffect, useRef, useState } from "react"; import type { Route } from "react-router"; +import { push } from "react-router-redux"; import { t } from "ttag"; +import { useDispatch } from "metabase/lib/redux"; import type { TabsValue } from "metabase/ui"; import { Flex, Tabs } from "metabase/ui"; @@ -15,10 +17,13 @@ const validTabIds = new Set(Object.values(PerformanceTabId).map(String)); const isValidTabId = (tab: TabsValue): tab is PerformanceTabId => !!tab && validTabIds.has(tab); -export const PerformanceApp = ({ route }: { route: Route }) => { - const [tabId, setTabId] = useState<PerformanceTabId>( - PerformanceTabId.DataCachingSettings, - ); +export const PerformanceApp = ({ + tabId = PerformanceTabId.Databases, + route, +}: { + tabId: PerformanceTabId; + route: Route; +}) => { const [tabsHeight, setTabsHeight] = useState<number>(300); const tabsRef = useRef<HTMLDivElement>(null); @@ -39,12 +44,20 @@ export const PerformanceApp = ({ route }: { route: Route }) => { }; }, [tabsRef, setTabsHeight]); + const dispatch = useDispatch(); + return ( <Tabs value={tabId} onTabChange={value => { if (isValidTabId(value)) { - setTabId(value); + dispatch( + push( + `/admin/performance/${ + value === PerformanceTabId.Databases ? "" : value + }`, + ), + ); } else { console.error("Invalid tab value", value); } @@ -56,22 +69,22 @@ export const PerformanceApp = ({ route }: { route: Route }) => { > <TabsList> <Tab - key={PerformanceTabId.DataCachingSettings} - value={PerformanceTabId.DataCachingSettings} + key={PerformanceTabId.Databases} + value={PerformanceTabId.Databases} > {t`Database caching settings`} </Tab> - <Tab key="ModelPersistence" value={PerformanceTabId.ModelPersistence}> + <Tab key={PerformanceTabId.Models} value={PerformanceTabId.Models}> {t`Model persistence`} </Tab> </TabsList> <TabsPanel key={tabId} value={tabId}> - {tabId === PerformanceTabId.DataCachingSettings && ( + {tabId === PerformanceTabId.Databases && ( <Flex style={{ flex: 1, overflow: "hidden" }} bg="bg-light" h="100%"> <StrategyEditorForDatabases route={route} /> </Flex> )} - {tabId === PerformanceTabId.ModelPersistence && ( + {tabId === PerformanceTabId.Models && ( <Flex style={{ flex: 1 }} bg="bg-light" h="100%"> <ModelPersistenceConfiguration /> </Flex> diff --git a/frontend/src/metabase/admin/performance/types.ts b/frontend/src/metabase/admin/performance/types.ts index 271e56145c4860043b92ef79e77db0b9f9aedfd9..2db5b4dabb96b35f67e96e8cc36ba104c1c29854 100644 --- a/frontend/src/metabase/admin/performance/types.ts +++ b/frontend/src/metabase/admin/performance/types.ts @@ -18,6 +18,6 @@ export type StrategyData = { }; export enum PerformanceTabId { - DataCachingSettings = "dataCachingSettings", - ModelPersistence = "modelPersistence", + Databases = "databases", + Models = "models", } diff --git a/frontend/src/metabase/admin/routes.jsx b/frontend/src/metabase/admin/routes.jsx index 50f32fe8bd586e5573c506cf58405b016922a73e..2cfb7476ac319481e6f00b2d9e5895051bdfd310 100644 --- a/frontend/src/metabase/admin/routes.jsx +++ b/frontend/src/metabase/admin/routes.jsx @@ -51,6 +51,7 @@ import { } from "metabase/plugins"; import { getSetting } from "metabase/selectors/settings"; +import { PerformanceTabId } from "./performance/types"; import RedirectToAllowedSettings from "./settings/containers/RedirectToAllowedSettings"; const UserCanAccessTools = connectedReduxRedirect({ @@ -162,6 +163,11 @@ const getRoutes = (store, CanAccessSettings, IsAdmin) => ( component={createAdminRouteGuard("performance")} > <IndexRoute title={t`Performance`} path="" component={PerformanceApp} /> + <Route + title={t`Model persistence`} + path={PerformanceTabId.Models} + component={() => <PerformanceApp tabId={PerformanceTabId.Models} />} + /> </Route> <Route path="tools"