diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index a21fe2ce9d..0f60012759 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -80,10 +80,8 @@ import { TextSize, } from '@backstage/plugin-techdocs-module-addons-contrib'; import { - SettingsLayout, - UserSettingsFeatureFlags, - UserSettingsGeneral, UserSettingsPage, + UserSettingsTab, } from '@backstage/plugin-user-settings'; import { AdvancedSettings } from './components/advancedSettings'; import AlarmIcon from '@material-ui/icons/Alarm'; @@ -269,17 +267,9 @@ const routes = ( element={} /> }> - - - - - - - - - - - + + + } /> } /> diff --git a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx index 4b65a26e5e..6348845763 100644 --- a/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx +++ b/plugins/user-settings/src/components/DefaultSettingsPage/DefaultSettingsPage.tsx @@ -19,14 +19,16 @@ import { UserSettingsAuthProviders } from '../AuthProviders'; import { UserSettingsFeatureFlags } from '../FeatureFlags'; import { UserSettingsGeneral } from '../General'; import { SettingsLayout } from '../SettingsLayout'; +import { UserSettingsTabProps } from '../UserSettingsTab'; /** * @public */ export const DefaultSettingsPage = (props: { + tabs?: React.ReactElement[]; providerSettings?: JSX.Element; }) => { - const { providerSettings } = props; + const { providerSettings, tabs } = props; return ( @@ -42,6 +44,11 @@ export const DefaultSettingsPage = (props: { + {tabs?.map((child, i) => ( + + {child} + + ))} ); }; diff --git a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx index cba2b2bf1f..23394819d6 100644 --- a/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx +++ b/plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx @@ -35,7 +35,7 @@ export type SubRoute = { tabProps?: TabProps; }; -const dataKey = 'plugin.explore.settingsLayoutRoute'; +const dataKey = 'plugin.user-settings.settingsLayoutRoute'; const Route: (props: SubRoute) => null = () => null; attachComponentData(Route, dataKey, true); diff --git a/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx new file mode 100644 index 0000000000..3d1f93aaef --- /dev/null +++ b/plugins/user-settings/src/components/SettingsPage/SettingsPage.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2022 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { useOutlet } from 'react-router'; +import React from 'react'; +import { DefaultSettingsPage } from '../DefaultSettingsPage'; +import { useElementFilter } from '@backstage/core-plugin-api'; +import { + USER_SETTINGS_TAB_KEY, + UserSettingsTabProps, +} from '../UserSettingsTab'; + +export const SettingsPage = (props: { providerSettings?: JSX.Element }) => { + const { providerSettings } = props; + const outlet = useOutlet(); + const tabs = useElementFilter(outlet, elements => + elements + .selectByComponentData({ + key: USER_SETTINGS_TAB_KEY, + }) + .getElements(), + ); + + return ( + <> + {(tabs.length === 0 && outlet) || ( + + )} + + ); +}; diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage/index.ts similarity index 70% rename from plugins/user-settings/src/components/SettingsPage.tsx rename to plugins/user-settings/src/components/SettingsPage/index.ts index 3fa1057881..e957a1bf09 100644 --- a/plugins/user-settings/src/components/SettingsPage.tsx +++ b/plugins/user-settings/src/components/SettingsPage/index.ts @@ -13,12 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { useOutlet } from 'react-router'; -import React from 'react'; -import { DefaultSettingsPage } from './DefaultSettingsPage'; - -export const SettingsPage = () => { - const outlet = useOutlet(); - - return <>{outlet || }; -}; +export { SettingsPage } from './SettingsPage';