@backstage/plugin-user-settings 0.5.1 → 0.6.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/plugin-user-settings
 
+## 0.6.0-next.1
+
+### Patch Changes
+
+- c3fa90e184: Updated dependency `zen-observable` to `^0.10.0`.
+- Updated dependencies
+  - @backstage/core-app-api@1.2.1-next.1
+  - @backstage/core-components@0.12.1-next.1
+  - @backstage/core-plugin-api@1.1.1-next.1
+  - @backstage/types@1.0.2-next.1
+  - @backstage/errors@1.1.4-next.1
+  - @backstage/theme@0.2.16
+
+## 0.6.0-next.0
+
+### Minor Changes
+
+- 29bdda5442: Added the ability to fully customize settings page. Deprecated UserSettingsTab in favour of SettingsLayout.Route
+
+### Patch Changes
+
+- 3280711113: Updated dependency `msw` to `^0.49.0`.
+- 19356df560: Updated dependency `zen-observable` to `^0.9.0`.
+- Updated dependencies
+  - @backstage/core-components@0.12.1-next.0
+  - @backstage/core-app-api@1.2.1-next.0
+  - @backstage/core-plugin-api@1.1.1-next.0
+  - @backstage/types@1.0.2-next.0
+  - @backstage/errors@1.1.4-next.0
+  - @backstage/theme@0.2.16
+
 ## 0.5.1
 
 ### Patch Changes

package/README.md

@@ -16,7 +16,7 @@ for installation instructions.
 
 Add the item to the Sidebar:
 
-```ts
+```tsx
 import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 
 <SidebarPage>
@@ -28,7 +28,7 @@ import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
 
 Add the page to the App routing:
 
-```ts
+```tsx
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 
 const AppRoutes = () => (
@@ -46,7 +46,7 @@ By default, the plugin provides a list of configured authentication providers fe
 
 If you want to supply your own custom list of Authentication Providers, use the `providerSettings` prop:
 
-```ts
+```tsx
 const MyAuthProviders = () => (
   <ListItem>
     <ListItemText primary="example" />
@@ -71,20 +71,20 @@ const AppRoutes = () => (
 By default, the plugin renders 3 tabs of settings; GENERAL, AUTHENTICATION PROVIDERS, and FEATURE FLAGS.
 
 If you want to add more options for your users,
-just pass the extra tabs using `UserSettingsTab` components as children of the `UserSettingsPage` route.
+just pass the extra tabs using `SettingsLayout.Route` components as children of the `UserSettingsPage` route.
 The path is in this case a child of the settings path,
 in the example below it would be `/settings/advanced` so that you can easily link to it.
 
 ```tsx
 import {
+  SettingsLayout,
   UserSettingsPage,
-  UserSettingsTab,
 } from '@backstage/plugin-user-settings';
 
 <Route path="/settings" element={<UserSettingsPage />}>
-  <UserSettingsTab path="/advanced" title="Advanced">
+  <SettingsLayout.Route path="/advanced" title="Advanced">
     <AdvancedSettings />
-  </UserSettingsTab>
+  </SettingsLayout.Route>
 </Route>;
 ```
 
@@ -93,3 +93,40 @@ make sure you use a similar component structure as the other tabs.
 You can take a look at
 [the example extra tab](https://github.com/backstage/backstage/blob/master/packages/app/src/components/advancedSettings/AdvancedSettings.tsx)
 we have created in Backstage's demo app.
+
+To change the layout altogether, create a custom page in `packages/app/src/components/user-settings/SettingsPage.tsx`:
+
+```tsx
+import React from 'react';
+import {
+  SettingsLayout,
+  UserSettingsGeneral,
+} from '@backstage/plugin-user-settings';
+import { AdvancedSettings } from './advancedSettings';
+
+export const settingsPage = (
+  <SettingsLayout>
+    <SettingsLayout.Route path="general" title="General">
+      <UserSettingsGeneral />
+    </SettingsLayout.Route>
+    <SettingsLayout.Route path="advanced" title="Advanced">
+      <AdvancedSettings />
+    </SettingsLayout.Route>
+  </SettingsLayout>
+);
+```
+
+Now register the new settings page in `packages/app/src/App.tsx`:
+
+```diff
++ import {settingsPage} from './components/settings/settingsPage';
+
+const routes = (
+  <FlatRoutes>
+-    <Route path="/settings" element={<UserSettingsPage />} />
++    <Route path="/settings" element={<UserSettingsPage />}>
++      {settingsPage}
++    </Route>
+  </FlatRoutes>
+);
+```

package/dist/esm/index-24ed3bf4.esm.js

@@ -0,0 +1,23 @@
+export { Router as SettingsPage } from '../index.esm.js';
+import '@backstage/core-app-api';
+import '@backstage/errors';
+import 'zen-observable';
+import '@backstage/core-plugin-api';
+import 'react';
+import '@material-ui/icons/Settings';
+import '@backstage/core-components';
+import 'react-router';
+import '@material-ui/core';
+import '@material-ui/icons/Star';
+import '@material-ui/icons/Clear';
+import 'react-use/lib/useAsync';
+import '@material-ui/icons/MeetingRoom';
+import '@material-ui/icons/MoreVert';
+import 'react-use/lib/useObservable';
+import '@material-ui/icons/BrightnessAuto';
+import '@material-ui/lab/ToggleButton';
+import '@material-ui/lab/ToggleButtonGroup';
+import '@material-ui/core/Chip';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Typography';
+//# sourceMappingURL=index-24ed3bf4.esm.js.map

package/dist/esm/index-24ed3bf4.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-24ed3bf4.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -2,7 +2,8 @@
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { StorageApi, FetchApi, DiscoveryApi, ErrorApi, IdentityApi, StorageValueSnapshot, IconComponent, ApiRef, ProfileInfoApi, SessionApi, ProfileInfo } from '@backstage/core-plugin-api';
 import { JsonValue, Observable } from '@backstage/types';
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
+import { TabProps } from '@material-ui/core';
 
 /**
  * An implementation of the storage API, that uses the user-settings backend to
@@ -52,9 +53,7 @@ declare const Settings: (props: {
     icon?: IconComponent;
 }) => JSX.Element;
 
-/**
- * @public
- */
+/** @public */
 declare const SettingsPage: (props: {
     providerSettings?: JSX.Element;
 }) => JSX.Element;
@@ -119,9 +118,9 @@ declare const useUserProfile: () => {
     loading: false;
 };
 
-/** @public */
-declare const USER_SETTINGS_TAB_KEY = "user-settings.tab";
-/** @public */
+/** @public @deprecated Use SettingsLayout.Route approach instead */
+declare const USER_SETTINGS_TAB_KEY = "plugin.user-settings.settingsLayoutRoute";
+/** @public @deprecated Use SettingsLayoutRouteProps instead */
 declare type UserSettingsTabProps = PropsWithChildren<{
     /**
      * The path to the tab in the settings route
@@ -135,7 +134,31 @@ declare type UserSettingsTabProps = PropsWithChildren<{
  * Renders a tab inside the settings page
  * @param props - Component props
  * @public
+ * @deprecated Use SettingsLayout.Route instead
  */
 declare const UserSettingsTab: (props: UserSettingsTabProps) => JSX.Element;
 
-export { DefaultProviderSettings, ProviderSettingsItem, SettingsPage as Router, Settings, USER_SETTINGS_TAB_KEY, UserSettingsAppearanceCard, UserSettingsAuthProviders, UserSettingsFeatureFlags, UserSettingsGeneral, UserSettingsIdentityCard, UserSettingsMenu, UserSettingsPage, UserSettingsPinToggle, UserSettingsProfileCard, UserSettingsSignInAvatar, UserSettingsStorage, UserSettingsTab, UserSettingsTabProps, UserSettingsThemeToggle, userSettingsPlugin as plugin, useUserProfile, userSettingsPlugin };
+/** @public */
+declare type SettingsLayoutRouteProps = {
+    path: string;
+    title: string;
+    children: JSX.Element;
+    tabProps?: TabProps<React.ElementType, {
+        component?: React.ElementType;
+    }>;
+};
+/** @public */
+declare type SettingsLayoutProps = {
+    title?: string;
+    subtitle?: string;
+    children?: React.ReactNode;
+};
+/**
+ * @public
+ */
+declare const SettingsLayout: {
+    (props: SettingsLayoutProps): JSX.Element;
+    Route: (props: SettingsLayoutRouteProps) => null;
+};
+
+export { DefaultProviderSettings, ProviderSettingsItem, SettingsPage as Router, Settings, SettingsLayout, SettingsLayoutProps, SettingsLayoutRouteProps, USER_SETTINGS_TAB_KEY, UserSettingsAppearanceCard, UserSettingsAuthProviders, UserSettingsFeatureFlags, UserSettingsGeneral, UserSettingsIdentityCard, UserSettingsMenu, UserSettingsPage, UserSettingsPinToggle, UserSettingsProfileCard, UserSettingsSignInAvatar, UserSettingsStorage, UserSettingsTab, UserSettingsTabProps, UserSettingsThemeToggle, userSettingsPlugin as plugin, useUserProfile, userSettingsPlugin };