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';