enable adding extra setting tabs

Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>

packages/app/src/App.tsx

@@ -69,7 +69,7 @@ import {
   techdocsPlugin,
   TechDocsReaderPage,
 } from '@backstage/plugin-techdocs';
-import { UserSettingsPage } from '@backstage/plugin-user-settings';
+import { UserSettingsPage, SettingsTab } from '@backstage/plugin-user-settings';
 import AlarmIcon from '@material-ui/icons/Alarm';
 import React from 'react';
 import { hot } from 'react-hot-loader/root';
@@ -82,7 +82,7 @@ import { LowerCaseValuePickerFieldExtension } from './components/scaffolder/cust
 import { searchPage } from './components/search/SearchPage';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
-
+import { AdvancedSettings } from './components/advancedSettings';
 import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
@@ -127,6 +127,10 @@ const app = createApp({
 const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 
+const extraSettingTabs: SettingsTab[] = [
+  { title: 'Advanced', content: <AdvancedSettings /> },
+];
+
 const routes = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
@@ -215,7 +219,10 @@ const routes = (
       path="/cost-insights/labeling-jobs"
       element={<CostInsightsLabelDataflowInstructionsPage />}
     />
-    <Route path="/settings" element={<UserSettingsPage />} />
+    <Route
+      path="/settings"
+      element={<UserSettingsPage tabs={extraSettingTabs} />}
+    />
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
   </FlatRoutes>

packages/app/src/components/advancedSettings/AdvancedSettings.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 React from 'react';
+import { InfoCard } from '@backstage/core-components';
+import {
+  List,
+  Grid,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Switch,
+} from '@material-ui/core';
+import { useLocalStorage } from 'react-use';
+
+export function AdvancedSettings() {
+  const [value, setValue] = useLocalStorage<'on' | 'off'>(
+    'advanced-option',
+    'off',
+  );
+
+  const toggleValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(ev.currentTarget.checked ? 'on' : 'off');
+  };
+
+  return (
+    <Grid container direction="row" spacing={3}>
+      <Grid item xs={12} md={6}>
+        <InfoCard title="Advanced settings" variant="gridItem">
+          <List>
+            <ListItem>
+              <ListItemText
+                primary="Advanced user option"
+                secondary="An extra settings tab to further customize the experience"
+              />
+              <ListItemSecondaryAction>
+                <Switch
+                  color="primary"
+                  value={value}
+                  onChange={toggleValue}
+                  name="advanced"
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+          </List>
+        </InfoCard>
+      </Grid>
+    </Grid>
+  );
+}

packages/app/src/components/advancedSettings/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export * from './AdvancedSettings';