Added check for UserSettingsTab, so that the existing code doesn't break

Signed-off-by: Nikita Karpukhin <nikita.karpukhin@scout24.com>

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={<CostInsightsLabelDataflowInstructionsPage />}
     />
     <Route path="/settings" element={<UserSettingsPage />}>
-      <SettingsLayout>
-        <SettingsLayout.Route path="general" title="General">
-          <UserSettingsGeneral />
-        </SettingsLayout.Route>
-        <SettingsLayout.Route path="feature-flags" title="Feature Flags">
-          <UserSettingsFeatureFlags />
-        </SettingsLayout.Route>
-        <SettingsLayout.Route path="advanced" title="Advanced">
-          <AdvancedSettings />
-        </SettingsLayout.Route>
-      </SettingsLayout>
+      <UserSettingsTab path="/advanced" title="Advanced">
+        <AdvancedSettings />
+      </UserSettingsTab>
     </Route>
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />

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<UserSettingsTabProps>[];
   providerSettings?: JSX.Element;
 }) => {
-  const { providerSettings } = props;
+  const { providerSettings, tabs } = props;
 
   return (
     <SettingsLayout>
@@ -42,6 +44,11 @@ export const DefaultSettingsPage = (props: {
       <SettingsLayout.Route path="feature-flags" title="Feature Flags">
         <UserSettingsFeatureFlags />
       </SettingsLayout.Route>
+      {tabs?.map((child, i) => (
+        <SettingsLayout.Route key={i} {...child.props}>
+          {child}
+        </SettingsLayout.Route>
+      ))}
     </SettingsLayout>
   );
 };

plugins/user-settings/src/components/SettingsLayout/SettingsLayout.tsx

@@ -35,7 +35,7 @@ export type SubRoute = {
   tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;
 };
 
-const dataKey = 'plugin.explore.settingsLayoutRoute';
+const dataKey = 'plugin.user-settings.settingsLayoutRoute';
 
 const Route: (props: SubRoute) => null = () => null;
 attachComponentData(Route, dataKey, true);

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<UserSettingsTabProps>(),
+  );
+
+  return (
+    <>
+      {(tabs.length === 0 && outlet) || (
+        <DefaultSettingsPage tabs={tabs} providerSettings={providerSettings} />
+      )}
+    </>
+  );
+};

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 || <DefaultSettingsPage />}</>;
-};
+export { SettingsPage } from './SettingsPage';