@backstage/plugin-user-settings 0.3.11 → 0.3.15

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @backstage/plugin-user-settings
 
+## 0.3.15
+
+### Patch Changes
+
+- 4ce51ab0f1: Internal refactor of the `react-use` imports to use `react-use/lib/*` instead.
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.1
+  - @backstage/core-components@0.8.3
+
+## 0.3.14
+
+### Patch Changes
+
+- 2a374057f5: Fix undefined identity bug in UserSettingsProfileCard caused by using deprecated methods of the IdentityApi
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/core-components@0.8.2
+
+## 0.3.13
+
+### Patch Changes
+
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+
+## 0.3.12
+
+### Patch Changes
+
+- 9a1c8e92eb: The theme switcher now renders the title of themes instead of their variant
+- Updated dependencies
+  - @backstage/core-components@0.7.6
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+
 ## 0.3.11
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
-import { IconComponent, ApiRef, SessionApi } from '@backstage/core-plugin-api';
+import { IconComponent, ApiRef, SessionApi, ProfileInfo } from '@backstage/core-plugin-api';
 
 declare const userSettingsPlugin: _backstage_core_plugin_api.BackstagePlugin<{
     settingsPage: _backstage_core_plugin_api.RouteRef<undefined>;
@@ -57,8 +57,9 @@ declare const UserSettingsPinToggle: () => JSX.Element;
 declare const UserSettingsFeatureFlags: () => JSX.Element;
 
 declare const useUserProfile: () => {
-    profile: _backstage_core_plugin_api.ProfileInfo;
+    profile: ProfileInfo;
     displayName: string;
+    loading: boolean;
 };
 
 export { DefaultProviderSettings, ProviderSettingsItem, SettingsPage as Router, Settings, UserSettingsAppearanceCard, UserSettingsAuthProviders, UserSettingsFeatureFlags, UserSettingsGeneral, UserSettingsMenu, UserSettingsPage, UserSettingsPinToggle, UserSettingsProfileCard, UserSettingsSignInAvatar, UserSettingsThemeToggle, userSettingsPlugin as plugin, useUserProfile, userSettingsPlugin };

package/dist/index.esm.js

@@ -1,13 +1,14 @@
-import { createRouteRef, createPlugin, createRoutableExtension, useRouteRef, useApi, SessionState, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, gitlabAuthApiRef, auth0AuthApiRef, oktaAuthApiRef, bitbucketAuthApiRef, atlassianAuthApiRef, oauth2ApiRef, configApiRef, featureFlagsApiRef, FeatureFlagState, identityApiRef, appThemeApiRef } from '@backstage/core-plugin-api';
+import { createRouteRef, createPlugin, createRoutableExtension, useRouteRef, useApi, SessionState, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, gitlabAuthApiRef, auth0AuthApiRef, oktaAuthApiRef, bitbucketAuthApiRef, atlassianAuthApiRef, oauth2ApiRef, configApiRef, featureFlagsApiRef, FeatureFlagState, identityApiRef, alertApiRef, appThemeApiRef } from '@backstage/core-plugin-api';
 import React, { useState, useEffect, useCallback, useContext, cloneElement } from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { SidebarItem, EmptyState, CodeSnippet, InfoCard, sidebarConfig, SidebarPinStateContext, Page, Header, TabbedLayout } from '@backstage/core-components';
 import { Typography, Button, ListItem, ListItemIcon, ListItemText, Tooltip, ListItemSecondaryAction, List, Switch, Grid, TextField, IconButton, makeStyles, Avatar, Menu, MenuItem } from '@material-ui/core';
 import Star from '@material-ui/icons/Star';
 import ClearIcon from '@material-ui/icons/Clear';
+import useAsync from 'react-use/lib/useAsync';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { useObservable } from 'react-use';
+import useObservable from 'react-use/lib/useObservable';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
@@ -55,7 +56,7 @@ const EmptyProviders = () => /* @__PURE__ */ React.createElement(EmptyState, {
     language: "yaml",
     showLineNumbers: true,
     highlightedNumbers: [3, 4, 5, 6, 7, 8],
-    customStyle: {background: "inherit", fontSize: "115%"}
+    customStyle: { background: "inherit", fontSize: "115%" }
   }), /* @__PURE__ */ React.createElement(Button, {
     variant: "contained",
     color: "primary",
@@ -90,7 +91,7 @@ const ProviderSettingsItem = ({
       arrow: true,
       title: description
     }, /* @__PURE__ */ React.createElement("span", null, description)),
-    secondaryTypographyProps: {noWrap: true, style: {width: "80%"}}
+    secondaryTypographyProps: { noWrap: true, style: { width: "80%" } }
   }), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(Tooltip, {
     placement: "top",
     arrow: true,
@@ -102,7 +103,7 @@ const ProviderSettingsItem = ({
   }, signedIn ? `Sign out` : `Sign in`))));
 };
 
-const DefaultProviderSettings = ({configuredProviders}) => /* @__PURE__ */ React.createElement(React.Fragment, null, configuredProviders.includes("google") && /* @__PURE__ */ React.createElement(ProviderSettingsItem, {
+const DefaultProviderSettings = ({ configuredProviders }) => /* @__PURE__ */ React.createElement(React.Fragment, null, configuredProviders.includes("google") && /* @__PURE__ */ React.createElement(ProviderSettingsItem, {
   title: "Google",
   description: "Provides authentication towards Google APIs and identities",
   apiRef: googleAuthApiRef,
@@ -149,7 +150,7 @@ const DefaultProviderSettings = ({configuredProviders}) => /* @__PURE__ */ React
   icon: Star
 }));
 
-const UserSettingsAuthProviders = ({providerSettings}) => {
+const UserSettingsAuthProviders = ({ providerSettings }) => {
   const configApi = useApi(configApiRef);
   const providersConfig = configApi.getOptionalConfig("auth.providers");
   const configuredProviders = (providersConfig == null ? void 0 : providersConfig.keys()) || [];
@@ -186,7 +187,7 @@ const EmptyFlags = () => /* @__PURE__ */ React.createElement(EmptyState, {
     language: "typescript",
     showLineNumbers: true,
     highlightedNumbers: [6],
-    customStyle: {background: "inherit", fontSize: "115%"}
+    customStyle: { background: "inherit", fontSize: "115%" }
   }), /* @__PURE__ */ React.createElement(Button, {
     variant: "contained",
     color: "primary",
@@ -194,7 +195,7 @@ const EmptyFlags = () => /* @__PURE__ */ React.createElement(EmptyState, {
   }, "Read More"))
 });
 
-const FlagItem = ({flag, enabled, toggleHandler}) => /* @__PURE__ */ React.createElement(ListItem, {
+const FlagItem = ({ flag, enabled, toggleHandler }) => /* @__PURE__ */ React.createElement(ListItem, {
   divider: true,
   button: true,
   onClick: () => toggleHandler(flag.name)
@@ -214,14 +215,14 @@ const FlagItem = ({flag, enabled, toggleHandler}) => /* @__PURE__ */ React.creat
 const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
   const featureFlags = featureFlagsApi.getRegisteredFlags();
-  const initialFlagState = Object.fromEntries(featureFlags.map(({name}) => [name, featureFlagsApi.isActive(name)]));
+  const initialFlagState = Object.fromEntries(featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]));
   const [state, setState] = useState(initialFlagState);
   const [filterInput, setFilterInput] = useState("");
   const inputRef = React.useRef();
   const toggleFlag = useCallback((flagName) => {
     const newState = featureFlagsApi.isActive(flagName) ? FeatureFlagState.None : FeatureFlagState.Active;
     featureFlagsApi.save({
-      states: {[flagName]: newState},
+      states: { [flagName]: newState },
       merge: true
     });
     setState((prevState) => ({
@@ -242,7 +243,7 @@ const UserSettingsFeatureFlags = () => {
   filterInputParts.forEach((part) => filteredFeatureFlags = filteredFeatureFlags.filter((featureFlag) => featureFlag.name.toLocaleLowerCase("en-US").includes(part)));
   const Header = () => /* @__PURE__ */ React.createElement(Grid, {
     container: true,
-    style: {justifyContent: "space-between"}
+    style: { justifyContent: "space-between" }
   }, /* @__PURE__ */ React.createElement(Grid, {
     item: true,
     xs: 6,
@@ -255,7 +256,7 @@ const UserSettingsFeatureFlags = () => {
     md: 4
   }, /* @__PURE__ */ React.createElement(TextField, {
     label: "Filter",
-    style: {display: "flex", justifyContent: "flex-end"},
+    style: { display: "flex", justifyContent: "flex-end" },
     inputRef: (ref) => ref && ref.focus(),
     InputProps: {
       ...filterInput.length && {
@@ -287,24 +288,47 @@ const UserSettingsFeatureFlags = () => {
 const useUserProfile = () => {
   var _a;
   const identityApi = useApi(identityApiRef);
-  const userId = identityApi.getUserId();
-  const profile = identityApi.getProfile();
-  const displayName = (_a = profile.displayName) != null ? _a : userId;
-  return {profile, displayName};
+  const alertApi = useApi(alertApiRef);
+  const { value, loading, error } = useAsync(async () => {
+    return {
+      profile: await identityApi.getProfileInfo(),
+      identity: await identityApi.getBackstageIdentity()
+    };
+  }, []);
+  useEffect(() => {
+    if (error) {
+      alertApi.post({
+        message: `Failed to load user identity: ${error}`,
+        severity: "error"
+      });
+    }
+  }, [error, alertApi]);
+  if (loading || error) {
+    return {
+      profile: {},
+      displayName: "",
+      loading
+    };
+  }
+  return {
+    profile: value.profile,
+    displayName: (_a = value.profile.displayName) != null ? _a : value.identity.userEntityRef,
+    loading
+  };
 };
 
 const useStyles$1 = makeStyles((theme) => ({
   avatar: {
-    width: ({size}) => size,
-    height: ({size}) => size,
-    fontSize: ({size}) => size * 0.7,
+    width: ({ size }) => size,
+    height: ({ size }) => size,
+    fontSize: ({ size }) => size * 0.7,
     border: `1px solid ${theme.palette.textSubtle}`
   }
 }));
-const UserSettingsSignInAvatar = ({size}) => {
-  const {iconSize} = sidebarConfig;
-  const classes = useStyles$1(size ? {size} : {size: iconSize});
-  const {profile} = useUserProfile();
+const UserSettingsSignInAvatar = ({ size }) => {
+  const { iconSize } = sidebarConfig;
+  const classes = useStyles$1(size ? { size } : { size: iconSize });
+  const { profile } = useUserProfile();
   return /* @__PURE__ */ React.createElement(Avatar, {
     src: profile.picture,
     className: classes.avatar
@@ -338,7 +362,7 @@ const UserSettingsMenu = () => {
 };
 
 const UserSettingsProfileCard = () => {
-  const {profile, displayName} = useUserProfile();
+  const { profile, displayName } = useUserProfile();
   return /* @__PURE__ */ React.createElement(InfoCard, {
     title: "Profile",
     variant: "gridItem"
@@ -375,7 +399,7 @@ const UserSettingsProfileCard = () => {
 };
 
 const UserSettingsPinToggle = () => {
-  const {isPinned, toggleSidebarPinState} = useContext(SidebarPinStateContext);
+  const { isPinned, toggleSidebarPinState } = useContext(SidebarPinStateContext);
   return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemText, {
     primary: "Pin Sidebar",
     secondary: "Prevent the sidebar from collapsing"
@@ -388,11 +412,11 @@ const UserSettingsPinToggle = () => {
     checked: isPinned,
     onChange: () => toggleSidebarPinState(),
     name: "pin",
-    inputProps: {"aria-label": "Pin Sidebar Switch"}
+    inputProps: { "aria-label": "Pin Sidebar Switch" }
   }))));
 };
 
-const ThemeIcon = ({id, activeId, icon}) => icon ? cloneElement(icon, {
+const ThemeIcon = ({ id, activeId, icon }) => icon ? cloneElement(icon, {
   color: activeId === id ? "primary" : void 0
 }) : /* @__PURE__ */ React.createElement(AutoIcon, {
   color: activeId === id ? "primary" : void 0
@@ -464,7 +488,7 @@ const UserSettingsThemeToggle = () => {
       key: theme.id,
       title: `Select ${theme.title}`,
       value: theme.id
-    }, /* @__PURE__ */ React.createElement(React.Fragment, null, theme.variant, "\xA0", /* @__PURE__ */ React.createElement(ThemeIcon, {
+    }, /* @__PURE__ */ React.createElement(React.Fragment, null, theme.title, "\xA0", /* @__PURE__ */ React.createElement(ThemeIcon, {
       id: theme.id,
       icon: themeIcon,
       activeId: themeId
@@ -504,7 +528,7 @@ const UserSettingsGeneral = () => {
   }, /* @__PURE__ */ React.createElement(UserSettingsAppearanceCard, null)));
 };
 
-const SettingsPage = ({providerSettings}) => {
+const SettingsPage = ({ providerSettings }) => {
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/plugin.ts","../src/components/Settings.tsx","../src/components/AuthProviders/EmptyProviders.tsx","../src/components/AuthProviders/ProviderSettingsItem.tsx","../src/components/AuthProviders/DefaultProviderSettings.tsx","../src/components/AuthProviders/UserSettingsAuthProviders.tsx","../src/components/FeatureFlags/EmptyFlags.tsx","../src/components/FeatureFlags/FeatureFlagsItem.tsx","../src/components/FeatureFlags/UserSettingsFeatureFlags.tsx","../src/components/useUserProfileInfo.ts","../src/components/General/UserSettingsSignInAvatar.tsx","../src/components/General/UserSettingsMenu.tsx","../src/components/General/UserSettingsProfileCard.tsx","../src/components/General/UserSettingsPinToggle.tsx","../src/components/General/UserSettingsThemeToggle.tsx","../src/components/General/UserSettingsAppearanceCard.tsx","../src/components/General/UserSettingsGeneral.tsx","../src/components/SettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createPlugin,\n  createRoutableExtension,\n  createRouteRef,\n} from '@backstage/core-plugin-api';\n\nexport const settingsRouteRef = createRouteRef({\n  id: 'user-settings',\n});\n\nexport const userSettingsPlugin = createPlugin({\n  id: 'user-settings',\n  routes: {\n    settingsPage: settingsRouteRef,\n  },\n});\n\nexport const UserSettingsPage = userSettingsPlugin.provide(\n  createRoutableExtension({\n    name: 'UserSettingsPage',\n    component: () =>\n      import('./components/SettingsPage').then(m => m.SettingsPage),\n    mountPoint: settingsRouteRef,\n  }),\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\n\ntype SettingsProps = {\n  icon?: IconComponent;\n};\n\nexport const Settings = (props: SettingsProps) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  return <SidebarItem text=\"Settings\" to={routePath()} icon={Icon} />;\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Button, Typography } from '@material-ui/core';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\n\nconst EXAMPLE = `auth:\n  providers:\n    google:\n      development:\n        clientId: \\${AUTH_GOOGLE_CLIENT_ID}\n        clientSecret: \\${AUTH_GOOGLE_CLIENT_SECRET}\n`;\n\nexport const EmptyProviders = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Authentication Providers\"\n    description=\"You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          Open <code>app-config.yaml</code> and make the changes as highlighted\n          below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"yaml\"\n          showLineNumbers\n          highlightedNumbers={[3, 4, 5, 6, 7, 8]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/auth/add-auth-provider\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect, useState } from 'react';\nimport {\n  Button,\n  ListItem,\n  ListItemIcon,\n  ListItemSecondaryAction,\n  ListItemText,\n  Tooltip,\n} from '@material-ui/core';\nimport {\n  ApiRef,\n  SessionApi,\n  useApi,\n  IconComponent,\n  SessionState,\n} from '@backstage/core-plugin-api';\n\ntype Props = {\n  title: string;\n  description: string;\n  icon: IconComponent;\n  apiRef: ApiRef<SessionApi>;\n};\n\nexport const ProviderSettingsItem = ({\n  title,\n  description,\n  icon: Icon,\n  apiRef,\n}: Props) => {\n  const api = useApi(apiRef);\n  const [signedIn, setSignedIn] = useState(false);\n\n  useEffect(() => {\n    let didCancel = false;\n\n    const subscription = api\n      .sessionState$()\n      .subscribe((sessionState: SessionState) => {\n        if (!didCancel) {\n          setSignedIn(sessionState === SessionState.SignedIn);\n        }\n      });\n\n    return () => {\n      didCancel = true;\n      subscription.unsubscribe();\n    };\n  }, [api]);\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Icon />\n      </ListItemIcon>\n      <ListItemText\n        primary={title}\n        secondary={\n          <Tooltip placement=\"top\" arrow title={description}>\n            <span>{description}</span>\n          </Tooltip>\n        }\n        secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}\n        >\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => (signedIn ? api.signOut() : api.signIn())}\n          >\n            {signedIn ? `Sign out` : `Sign in`}\n          </Button>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Star from '@material-ui/icons/Star';\nimport React from 'react';\nimport { ProviderSettingsItem } from './ProviderSettingsItem';\nimport {\n  auth0AuthApiRef,\n  githubAuthApiRef,\n  gitlabAuthApiRef,\n  googleAuthApiRef,\n  oauth2ApiRef,\n  oktaAuthApiRef,\n  microsoftAuthApiRef,\n  bitbucketAuthApiRef,\n  atlassianAuthApiRef,\n} from '@backstage/core-plugin-api';\n\ntype Props = {\n  configuredProviders: string[];\n};\n\nexport const DefaultProviderSettings = ({ configuredProviders }: Props) => (\n  <>\n    {configuredProviders.includes('google') && (\n      <ProviderSettingsItem\n        title=\"Google\"\n        description=\"Provides authentication towards Google APIs and identities\"\n        apiRef={googleAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('microsoft') && (\n      <ProviderSettingsItem\n        title=\"Microsoft\"\n        description=\"Provides authentication towards Microsoft APIs and identities\"\n        apiRef={microsoftAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('github') && (\n      <ProviderSettingsItem\n        title=\"GitHub\"\n        description=\"Provides authentication towards GitHub APIs\"\n        apiRef={githubAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('gitlab') && (\n      <ProviderSettingsItem\n        title=\"GitLab\"\n        description=\"Provides authentication towards GitLab APIs\"\n        apiRef={gitlabAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('auth0') && (\n      <ProviderSettingsItem\n        title=\"Auth0\"\n        description=\"Provides authentication towards Auth0 APIs\"\n        apiRef={auth0AuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('okta') && (\n      <ProviderSettingsItem\n        title=\"Okta\"\n        description=\"Provides authentication towards Okta APIs\"\n        apiRef={oktaAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('bitbucket') && (\n      <ProviderSettingsItem\n        title=\"Bitbucket\"\n        description=\"Provides authentication towards Bitbucket APIs\"\n        apiRef={bitbucketAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('atlassian') && (\n      <ProviderSettingsItem\n        title=\"Atlassian\"\n        description=\"Provides authentication towards Atlassian APIs\"\n        apiRef={atlassianAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('oauth2') && (\n      <ProviderSettingsItem\n        title=\"YourOrg\"\n        description=\"Example of how to use oauth2 custom provider\"\n        apiRef={oauth2ApiRef}\n        icon={Star}\n      />\n    )}\n  </>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { List } from '@material-ui/core';\nimport { EmptyProviders } from './EmptyProviders';\nimport { DefaultProviderSettings } from './DefaultProviderSettings';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\n\ntype Props = {\n  providerSettings?: JSX.Element;\n};\n\nexport const UserSettingsAuthProviders = ({ providerSettings }: Props) => {\n  const configApi = useApi(configApiRef);\n  const providersConfig = configApi.getOptionalConfig('auth.providers');\n  const configuredProviders = providersConfig?.keys() || [];\n  const providers = providerSettings ?? (\n    <DefaultProviderSettings configuredProviders={configuredProviders} />\n  );\n\n  if (!providerSettings && !configuredProviders?.length) {\n    return <EmptyProviders />;\n  }\n\n  return (\n    <InfoCard title=\"Available Providers\">\n      <List dense>{providers}</List>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Button, Typography } from '@material-ui/core';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\n\nconst EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';\n\nexport default createPlugin({\n  id: 'plugin-name',\n  register({ router, featureFlags }) {\n    featureFlags.register('enable-example-feature');\n  },\n});\n`;\n\nexport const EmptyFlags = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Feature Flags\"\n    description=\"Feature Flags make it possible for plugins to register features in Backstage for users to opt into. You can use this to split out logic in your code for manual A/B testing, etc.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          An example for how to add a feature flag is highlighted below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"typescript\"\n          showLineNumbers\n          highlightedNumbers={[6]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/api/utility-apis\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  ListItem,\n  ListItemText,\n  ListItemIcon,\n  Switch,\n  Tooltip,\n} from '@material-ui/core';\nimport { FeatureFlag } from '@backstage/core-plugin-api';\n\ntype Props = {\n  flag: FeatureFlag;\n  enabled: boolean;\n  toggleHandler: Function;\n};\n\nexport const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (\n  <ListItem divider button onClick={() => toggleHandler(flag.name)}>\n    <ListItemIcon>\n      <Tooltip placement=\"top\" arrow title={enabled ? 'Disable' : 'Enable'}>\n        <Switch color=\"primary\" checked={enabled} name={flag.name} />\n      </Tooltip>\n    </ListItemIcon>\n    <ListItemText\n      primary={flag.name}\n      secondary={`Registered in ${flag.pluginId} plugin`}\n    />\n  </ListItem>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useState } from 'react';\nimport {\n  List,\n  TextField,\n  IconButton,\n  Grid,\n  Typography,\n} from '@material-ui/core';\nimport { EmptyFlags } from './EmptyFlags';\nimport { FlagItem } from './FeatureFlagsItem';\n\nimport {\n  featureFlagsApiRef,\n  FeatureFlagState,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\nimport ClearIcon from '@material-ui/icons/Clear';\n\nexport const UserSettingsFeatureFlags = () => {\n  const featureFlagsApi = useApi(featureFlagsApiRef);\n  const featureFlags = featureFlagsApi.getRegisteredFlags();\n\n  const initialFlagState = Object.fromEntries(\n    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),\n  );\n\n  const [state, setState] = useState<Record<string, boolean>>(initialFlagState);\n  const [filterInput, setFilterInput] = useState<string>('');\n  const inputRef = React.useRef<HTMLElement>();\n\n  const toggleFlag = useCallback(\n    (flagName: string) => {\n      const newState = featureFlagsApi.isActive(flagName)\n        ? FeatureFlagState.None\n        : FeatureFlagState.Active;\n\n      featureFlagsApi.save({\n        states: { [flagName]: newState },\n        merge: true,\n      });\n\n      setState(prevState => ({\n        ...prevState,\n        [flagName]: newState === FeatureFlagState.Active,\n      }));\n    },\n    [featureFlagsApi],\n  );\n\n  if (!featureFlags.length) {\n    return <EmptyFlags />;\n  }\n\n  const clearFilterInput = () => {\n    setFilterInput('');\n    inputRef?.current?.focus();\n  };\n\n  let filteredFeatureFlags = Array.from(featureFlags);\n\n  const filterInputParts = filterInput\n    .split(/\\s/)\n    .map(part => part.trim().toLocaleLowerCase('en-US'));\n\n  filterInputParts.forEach(\n    part =>\n      (filteredFeatureFlags = filteredFeatureFlags.filter(featureFlag =>\n        featureFlag.name.toLocaleLowerCase('en-US').includes(part),\n      )),\n  );\n\n  const Header = () => (\n    <Grid container style={{ justifyContent: 'space-between' }}>\n      <Grid item xs={6} md={8}>\n        <Typography variant=\"h5\">Feature Flags</Typography>\n      </Grid>\n      {featureFlags.length >= 10 && (\n        <Grid item xs={6} md={4}>\n          <TextField\n            label=\"Filter\"\n            style={{ display: 'flex', justifyContent: 'flex-end' }}\n            inputRef={ref => ref && ref.focus()}\n            InputProps={{\n              ...(filterInput.length && {\n                endAdornment: (\n                  <IconButton\n                    aria-label=\"Clear filter\"\n                    onClick={clearFilterInput}\n                    edge=\"end\"\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                ),\n              }),\n            }}\n            onChange={e => setFilterInput(e.target.value)}\n            value={filterInput}\n          />\n        </Grid>\n      )}\n    </Grid>\n  );\n\n  return (\n    <InfoCard title={<Header />}>\n      <List dense>\n        {filteredFeatureFlags.map(featureFlag => {\n          const enabled = Boolean(state[featureFlag.name]);\n\n          return (\n            <FlagItem\n              key={featureFlag.name}\n              flag={featureFlag}\n              enabled={enabled}\n              toggleHandler={toggleFlag}\n            />\n          );\n        })}\n      </List>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useApi, identityApiRef } from '@backstage/core-plugin-api';\n\nexport const useUserProfile = () => {\n  const identityApi = useApi(identityApiRef);\n  const userId = identityApi.getUserId();\n  const profile = identityApi.getProfile();\n  const displayName = profile.displayName ?? userId;\n\n  return { profile, displayName };\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles, Avatar } from '@material-ui/core';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { sidebarConfig } from '@backstage/core-components';\n\nconst useStyles = makeStyles<BackstageTheme, { size: number }>(theme => ({\n  avatar: {\n    width: ({ size }) => size,\n    height: ({ size }) => size,\n    fontSize: ({ size }) => size * 0.7,\n    border: `1px solid ${theme.palette.textSubtle}`,\n  },\n}));\n\ntype Props = { size?: number };\n\nexport const UserSettingsSignInAvatar = ({ size }: Props) => {\n  const { iconSize } = sidebarConfig;\n  const classes = useStyles(size ? { size } : { size: iconSize });\n  const { profile } = useUserProfile();\n\n  return <Avatar src={profile.picture} className={classes.avatar} />;\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const UserSettingsMenu = () => {\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = React.useState(false);\n  const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(\n    undefined,\n  );\n\n  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label=\"more\"\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem data-testid=\"sign-out\" onClick={() => identityApi.signOut()}>\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          Sign Out\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Grid, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';\nimport { UserSettingsMenu } from './UserSettingsMenu';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { InfoCard } from '@backstage/core-components';\n\nexport const UserSettingsProfileCard = () => {\n  const { profile, displayName } = useUserProfile();\n\n  return (\n    <InfoCard title=\"Profile\" variant=\"gridItem\">\n      <Grid container spacing={6}>\n        <Grid item>\n          <UserSettingsSignInAvatar size={96} />\n        </Grid>\n        <Grid item xs={12} sm container>\n          <Grid item xs container direction=\"column\" spacing={2}>\n            <Grid item xs>\n              <Typography variant=\"subtitle1\" gutterBottom>\n                {displayName}\n              </Typography>\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                {profile.email}\n              </Typography>\n            </Grid>\n          </Grid>\n          <Grid item>\n            <UserSettingsMenu />\n          </Grid>\n        </Grid>\n      </Grid>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useContext } from 'react';\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n  Switch,\n  Tooltip,\n} from '@material-ui/core';\nimport { SidebarPinStateContext } from '@backstage/core-components';\n\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useContext(\n    SidebarPinStateContext,\n  );\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary=\"Pin Sidebar\"\n        secondary=\"Prevent the sidebar from collapsing\"\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': 'Pin Sidebar Switch' }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { cloneElement } from 'react';\nimport { useObservable } from 'react-use';\nimport AutoIcon from '@material-ui/icons/BrightnessAuto';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';\nimport {\n  ListItem,\n  ListItemText,\n  ListItemSecondaryAction,\n  Tooltip,\n  makeStyles,\n} from '@material-ui/core';\nimport { appThemeApiRef, useApi } from '@backstage/core-plugin-api';\n\ntype ThemeIconProps = {\n  id: string;\n  activeId: string | undefined;\n  icon: JSX.Element | undefined;\n};\n\nconst ThemeIcon = ({ id, activeId, icon }: ThemeIconProps) =>\n  icon ? (\n    cloneElement(icon, {\n      color: activeId === id ? 'primary' : undefined,\n    })\n  ) : (\n    <AutoIcon color={activeId === id ? 'primary' : undefined} />\n  );\n\ntype TooltipToggleButtonProps = {\n  children: JSX.Element;\n  title: string;\n  value: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  list: {\n    [theme.breakpoints.down('xs')]: {\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    [theme.breakpoints.down('xs')]: {\n      paddingRight: 0,\n      paddingLeft: 0,\n    },\n  },\n  listItemSecondaryAction: {\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      top: 'auto',\n      right: 'auto',\n      position: 'relative',\n      transform: 'unset',\n    },\n  },\n}));\n\n// ToggleButtonGroup uses React.children.map instead of context\n// so wrapping with Tooltip breaks ToggleButton functionality.\nconst TooltipToggleButton = ({\n  children,\n  title,\n  value,\n  ...props\n}: TooltipToggleButtonProps) => (\n  <Tooltip placement=\"top\" arrow title={title}>\n    <ToggleButton value={value} {...props}>\n      {children}\n    </ToggleButton>\n  </Tooltip>\n);\n\nexport const UserSettingsThemeToggle = () => {\n  const classes = useStyles();\n  const appThemeApi = useApi(appThemeApiRef);\n  const themeId = useObservable(\n    appThemeApi.activeThemeId$(),\n    appThemeApi.getActiveThemeId(),\n  );\n\n  const themeIds = appThemeApi.getInstalledThemes();\n\n  const handleSetTheme = (\n    _event: React.MouseEvent<HTMLElement>,\n    newThemeId: string | undefined,\n  ) => {\n    if (themeIds.some(t => t.id === newThemeId)) {\n      appThemeApi.setActiveThemeId(newThemeId);\n    } else {\n      appThemeApi.setActiveThemeId(undefined);\n    }\n  };\n\n  return (\n    <ListItem className={classes.list}>\n      <ListItemText\n        className={classes.listItemText}\n        primary=\"Theme\"\n        secondary=\"Change the theme mode\"\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <ToggleButtonGroup\n          exclusive\n          size=\"small\"\n          value={themeId ?? 'auto'}\n          onChange={handleSetTheme}\n        >\n          {themeIds.map(theme => {\n            const themeIcon = themeIds.find(t => t.id === theme.id)?.icon;\n            return (\n              <TooltipToggleButton\n                key={theme.id}\n                title={`Select ${theme.title}`}\n                value={theme.id}\n              >\n                <>\n                  {theme.variant}&nbsp;\n                  <ThemeIcon\n                    id={theme.id}\n                    icon={themeIcon}\n                    activeId={themeId}\n                  />\n                </>\n              </TooltipToggleButton>\n            );\n          })}\n          <Tooltip placement=\"top\" arrow title=\"Select auto theme\">\n            <ToggleButton value=\"auto\" selected={themeId === undefined}>\n              Auto&nbsp;\n              <AutoIcon color={themeId === undefined ? 'primary' : undefined} />\n            </ToggleButton>\n          </Tooltip>\n        </ToggleButtonGroup>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { List } from '@material-ui/core';\nimport { InfoCard } from '@backstage/core-components';\nimport { UserSettingsPinToggle } from './UserSettingsPinToggle';\nimport { UserSettingsThemeToggle } from './UserSettingsThemeToggle';\n\nexport const UserSettingsAppearanceCard = () => (\n  <InfoCard title=\"Appearance\" variant=\"gridItem\">\n    <List dense>\n      <UserSettingsThemeToggle />\n      <UserSettingsPinToggle />\n    </List>\n  </InfoCard>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Grid } from '@material-ui/core';\nimport React from 'react';\nimport { UserSettingsProfileCard } from './UserSettingsProfileCard';\nimport { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';\n\nexport const UserSettingsGeneral = () => {\n  return (\n    <Grid container direction=\"row\" spacing={3}>\n      <Grid item sm={12} md={6}>\n        <UserSettingsProfileCard />\n      </Grid>\n      <Grid item sm={12} md={6}>\n        <UserSettingsAppearanceCard />\n      </Grid>\n    </Grid>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { UserSettingsAuthProviders } from './AuthProviders';\nimport { UserSettingsFeatureFlags } from './FeatureFlags';\nimport { UserSettingsGeneral } from './General';\nimport { Header, Page, TabbedLayout } from '@backstage/core-components';\n\ntype Props = {\n  providerSettings?: JSX.Element;\n};\n\nexport const SettingsPage = ({ providerSettings }: Props) => {\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"Settings\" />\n\n      <TabbedLayout>\n        <TabbedLayout.Route path=\"general\" title=\"General\">\n          <UserSettingsGeneral />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route\n          path=\"auth-providers\"\n          title=\"Authentication Providers\"\n        >\n          <UserSettingsAuthProviders providerSettings={providerSettings} />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"feature-flags\" title=\"Feature Flags\">\n          <UserSettingsFeatureFlags />\n        </TabbedLayout.Route>\n      </TabbedLayout>\n    </Page>\n  );\n};\n"],"names":["EXAMPLE","useStyles"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/plugin.ts","../src/components/Settings.tsx","../src/components/AuthProviders/EmptyProviders.tsx","../src/components/AuthProviders/ProviderSettingsItem.tsx","../src/components/AuthProviders/DefaultProviderSettings.tsx","../src/components/AuthProviders/UserSettingsAuthProviders.tsx","../src/components/FeatureFlags/EmptyFlags.tsx","../src/components/FeatureFlags/FeatureFlagsItem.tsx","../src/components/FeatureFlags/UserSettingsFeatureFlags.tsx","../src/components/useUserProfileInfo.ts","../src/components/General/UserSettingsSignInAvatar.tsx","../src/components/General/UserSettingsMenu.tsx","../src/components/General/UserSettingsProfileCard.tsx","../src/components/General/UserSettingsPinToggle.tsx","../src/components/General/UserSettingsThemeToggle.tsx","../src/components/General/UserSettingsAppearanceCard.tsx","../src/components/General/UserSettingsGeneral.tsx","../src/components/SettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createPlugin,\n  createRoutableExtension,\n  createRouteRef,\n} from '@backstage/core-plugin-api';\n\nexport const settingsRouteRef = createRouteRef({\n  id: 'user-settings',\n});\n\nexport const userSettingsPlugin = createPlugin({\n  id: 'user-settings',\n  routes: {\n    settingsPage: settingsRouteRef,\n  },\n});\n\nexport const UserSettingsPage = userSettingsPlugin.provide(\n  createRoutableExtension({\n    name: 'UserSettingsPage',\n    component: () =>\n      import('./components/SettingsPage').then(m => m.SettingsPage),\n    mountPoint: settingsRouteRef,\n  }),\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\n\ntype SettingsProps = {\n  icon?: IconComponent;\n};\n\nexport const Settings = (props: SettingsProps) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  return <SidebarItem text=\"Settings\" to={routePath()} icon={Icon} />;\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Button, Typography } from '@material-ui/core';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\n\nconst EXAMPLE = `auth:\n  providers:\n    google:\n      development:\n        clientId: \\${AUTH_GOOGLE_CLIENT_ID}\n        clientSecret: \\${AUTH_GOOGLE_CLIENT_SECRET}\n`;\n\nexport const EmptyProviders = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Authentication Providers\"\n    description=\"You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          Open <code>app-config.yaml</code> and make the changes as highlighted\n          below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"yaml\"\n          showLineNumbers\n          highlightedNumbers={[3, 4, 5, 6, 7, 8]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/auth/add-auth-provider\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useEffect, useState } from 'react';\nimport {\n  Button,\n  ListItem,\n  ListItemIcon,\n  ListItemSecondaryAction,\n  ListItemText,\n  Tooltip,\n} from '@material-ui/core';\nimport {\n  ApiRef,\n  SessionApi,\n  useApi,\n  IconComponent,\n  SessionState,\n} from '@backstage/core-plugin-api';\n\ntype Props = {\n  title: string;\n  description: string;\n  icon: IconComponent;\n  apiRef: ApiRef<SessionApi>;\n};\n\nexport const ProviderSettingsItem = ({\n  title,\n  description,\n  icon: Icon,\n  apiRef,\n}: Props) => {\n  const api = useApi(apiRef);\n  const [signedIn, setSignedIn] = useState(false);\n\n  useEffect(() => {\n    let didCancel = false;\n\n    const subscription = api\n      .sessionState$()\n      .subscribe((sessionState: SessionState) => {\n        if (!didCancel) {\n          setSignedIn(sessionState === SessionState.SignedIn);\n        }\n      });\n\n    return () => {\n      didCancel = true;\n      subscription.unsubscribe();\n    };\n  }, [api]);\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Icon />\n      </ListItemIcon>\n      <ListItemText\n        primary={title}\n        secondary={\n          <Tooltip placement=\"top\" arrow title={description}>\n            <span>{description}</span>\n          </Tooltip>\n        }\n        secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}\n        >\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => (signedIn ? api.signOut() : api.signIn())}\n          >\n            {signedIn ? `Sign out` : `Sign in`}\n          </Button>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Star from '@material-ui/icons/Star';\nimport React from 'react';\nimport { ProviderSettingsItem } from './ProviderSettingsItem';\nimport {\n  auth0AuthApiRef,\n  githubAuthApiRef,\n  gitlabAuthApiRef,\n  googleAuthApiRef,\n  oauth2ApiRef,\n  oktaAuthApiRef,\n  microsoftAuthApiRef,\n  bitbucketAuthApiRef,\n  atlassianAuthApiRef,\n} from '@backstage/core-plugin-api';\n\ntype Props = {\n  configuredProviders: string[];\n};\n\nexport const DefaultProviderSettings = ({ configuredProviders }: Props) => (\n  <>\n    {configuredProviders.includes('google') && (\n      <ProviderSettingsItem\n        title=\"Google\"\n        description=\"Provides authentication towards Google APIs and identities\"\n        apiRef={googleAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('microsoft') && (\n      <ProviderSettingsItem\n        title=\"Microsoft\"\n        description=\"Provides authentication towards Microsoft APIs and identities\"\n        apiRef={microsoftAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('github') && (\n      <ProviderSettingsItem\n        title=\"GitHub\"\n        description=\"Provides authentication towards GitHub APIs\"\n        apiRef={githubAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('gitlab') && (\n      <ProviderSettingsItem\n        title=\"GitLab\"\n        description=\"Provides authentication towards GitLab APIs\"\n        apiRef={gitlabAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('auth0') && (\n      <ProviderSettingsItem\n        title=\"Auth0\"\n        description=\"Provides authentication towards Auth0 APIs\"\n        apiRef={auth0AuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('okta') && (\n      <ProviderSettingsItem\n        title=\"Okta\"\n        description=\"Provides authentication towards Okta APIs\"\n        apiRef={oktaAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('bitbucket') && (\n      <ProviderSettingsItem\n        title=\"Bitbucket\"\n        description=\"Provides authentication towards Bitbucket APIs\"\n        apiRef={bitbucketAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('atlassian') && (\n      <ProviderSettingsItem\n        title=\"Atlassian\"\n        description=\"Provides authentication towards Atlassian APIs\"\n        apiRef={atlassianAuthApiRef}\n        icon={Star}\n      />\n    )}\n    {configuredProviders.includes('oauth2') && (\n      <ProviderSettingsItem\n        title=\"YourOrg\"\n        description=\"Example of how to use oauth2 custom provider\"\n        apiRef={oauth2ApiRef}\n        icon={Star}\n      />\n    )}\n  </>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { List } from '@material-ui/core';\nimport { EmptyProviders } from './EmptyProviders';\nimport { DefaultProviderSettings } from './DefaultProviderSettings';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\n\ntype Props = {\n  providerSettings?: JSX.Element;\n};\n\nexport const UserSettingsAuthProviders = ({ providerSettings }: Props) => {\n  const configApi = useApi(configApiRef);\n  const providersConfig = configApi.getOptionalConfig('auth.providers');\n  const configuredProviders = providersConfig?.keys() || [];\n  const providers = providerSettings ?? (\n    <DefaultProviderSettings configuredProviders={configuredProviders} />\n  );\n\n  if (!providerSettings && !configuredProviders?.length) {\n    return <EmptyProviders />;\n  }\n\n  return (\n    <InfoCard title=\"Available Providers\">\n      <List dense>{providers}</List>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Button, Typography } from '@material-ui/core';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\n\nconst EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';\n\nexport default createPlugin({\n  id: 'plugin-name',\n  register({ router, featureFlags }) {\n    featureFlags.register('enable-example-feature');\n  },\n});\n`;\n\nexport const EmptyFlags = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Feature Flags\"\n    description=\"Feature Flags make it possible for plugins to register features in Backstage for users to opt into. You can use this to split out logic in your code for manual A/B testing, etc.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          An example for how to add a feature flag is highlighted below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"typescript\"\n          showLineNumbers\n          highlightedNumbers={[6]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/api/utility-apis\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport {\n  ListItem,\n  ListItemText,\n  ListItemIcon,\n  Switch,\n  Tooltip,\n} from '@material-ui/core';\nimport { FeatureFlag } from '@backstage/core-plugin-api';\n\ntype Props = {\n  flag: FeatureFlag;\n  enabled: boolean;\n  toggleHandler: Function;\n};\n\nexport const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (\n  <ListItem divider button onClick={() => toggleHandler(flag.name)}>\n    <ListItemIcon>\n      <Tooltip placement=\"top\" arrow title={enabled ? 'Disable' : 'Enable'}>\n        <Switch color=\"primary\" checked={enabled} name={flag.name} />\n      </Tooltip>\n    </ListItemIcon>\n    <ListItemText\n      primary={flag.name}\n      secondary={`Registered in ${flag.pluginId} plugin`}\n    />\n  </ListItem>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useState } from 'react';\nimport {\n  List,\n  TextField,\n  IconButton,\n  Grid,\n  Typography,\n} from '@material-ui/core';\nimport { EmptyFlags } from './EmptyFlags';\nimport { FlagItem } from './FeatureFlagsItem';\n\nimport {\n  featureFlagsApiRef,\n  FeatureFlagState,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\nimport ClearIcon from '@material-ui/icons/Clear';\n\nexport const UserSettingsFeatureFlags = () => {\n  const featureFlagsApi = useApi(featureFlagsApiRef);\n  const featureFlags = featureFlagsApi.getRegisteredFlags();\n\n  const initialFlagState = Object.fromEntries(\n    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),\n  );\n\n  const [state, setState] = useState<Record<string, boolean>>(initialFlagState);\n  const [filterInput, setFilterInput] = useState<string>('');\n  const inputRef = React.useRef<HTMLElement>();\n\n  const toggleFlag = useCallback(\n    (flagName: string) => {\n      const newState = featureFlagsApi.isActive(flagName)\n        ? FeatureFlagState.None\n        : FeatureFlagState.Active;\n\n      featureFlagsApi.save({\n        states: { [flagName]: newState },\n        merge: true,\n      });\n\n      setState(prevState => ({\n        ...prevState,\n        [flagName]: newState === FeatureFlagState.Active,\n      }));\n    },\n    [featureFlagsApi],\n  );\n\n  if (!featureFlags.length) {\n    return <EmptyFlags />;\n  }\n\n  const clearFilterInput = () => {\n    setFilterInput('');\n    inputRef?.current?.focus();\n  };\n\n  let filteredFeatureFlags = Array.from(featureFlags);\n\n  const filterInputParts = filterInput\n    .split(/\\s/)\n    .map(part => part.trim().toLocaleLowerCase('en-US'));\n\n  filterInputParts.forEach(\n    part =>\n      (filteredFeatureFlags = filteredFeatureFlags.filter(featureFlag =>\n        featureFlag.name.toLocaleLowerCase('en-US').includes(part),\n      )),\n  );\n\n  const Header = () => (\n    <Grid container style={{ justifyContent: 'space-between' }}>\n      <Grid item xs={6} md={8}>\n        <Typography variant=\"h5\">Feature Flags</Typography>\n      </Grid>\n      {featureFlags.length >= 10 && (\n        <Grid item xs={6} md={4}>\n          <TextField\n            label=\"Filter\"\n            style={{ display: 'flex', justifyContent: 'flex-end' }}\n            inputRef={ref => ref && ref.focus()}\n            InputProps={{\n              ...(filterInput.length && {\n                endAdornment: (\n                  <IconButton\n                    aria-label=\"Clear filter\"\n                    onClick={clearFilterInput}\n                    edge=\"end\"\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                ),\n              }),\n            }}\n            onChange={e => setFilterInput(e.target.value)}\n            value={filterInput}\n          />\n        </Grid>\n      )}\n    </Grid>\n  );\n\n  return (\n    <InfoCard title={<Header />}>\n      <List dense>\n        {filteredFeatureFlags.map(featureFlag => {\n          const enabled = Boolean(state[featureFlag.name]);\n\n          return (\n            <FlagItem\n              key={featureFlag.name}\n              flag={featureFlag}\n              enabled={enabled}\n              toggleHandler={toggleFlag}\n            />\n          );\n        })}\n      </List>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  alertApiRef,\n  identityApiRef,\n  ProfileInfo,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useEffect } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\n\nexport const useUserProfile = () => {\n  const identityApi = useApi(identityApiRef);\n  const alertApi = useApi(alertApiRef);\n\n  const { value, loading, error } = useAsync(async () => {\n    return {\n      profile: await identityApi.getProfileInfo(),\n      identity: await identityApi.getBackstageIdentity(),\n    };\n  }, []);\n\n  useEffect(() => {\n    if (error) {\n      alertApi.post({\n        message: `Failed to load user identity: ${error}`,\n        severity: 'error',\n      });\n    }\n  }, [error, alertApi]);\n\n  if (loading || error) {\n    return {\n      profile: {} as ProfileInfo,\n      displayName: '',\n      loading,\n    };\n  }\n\n  return {\n    profile: value!.profile,\n    displayName: value!.profile.displayName ?? value!.identity.userEntityRef,\n    loading,\n  };\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { BackstageTheme } from '@backstage/theme';\nimport { makeStyles, Avatar } from '@material-ui/core';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { sidebarConfig } from '@backstage/core-components';\n\nconst useStyles = makeStyles<BackstageTheme, { size: number }>(theme => ({\n  avatar: {\n    width: ({ size }) => size,\n    height: ({ size }) => size,\n    fontSize: ({ size }) => size * 0.7,\n    border: `1px solid ${theme.palette.textSubtle}`,\n  },\n}));\n\ntype Props = { size?: number };\n\nexport const UserSettingsSignInAvatar = ({ size }: Props) => {\n  const { iconSize } = sidebarConfig;\n  const classes = useStyles(size ? { size } : { size: iconSize });\n  const { profile } = useUserProfile();\n\n  return <Avatar src={profile.picture} className={classes.avatar} />;\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { IconButton, ListItemIcon, Menu, MenuItem } from '@material-ui/core';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const UserSettingsMenu = () => {\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = React.useState(false);\n  const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(\n    undefined,\n  );\n\n  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label=\"more\"\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem data-testid=\"sign-out\" onClick={() => identityApi.signOut()}>\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          Sign Out\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Grid, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';\nimport { UserSettingsMenu } from './UserSettingsMenu';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { InfoCard } from '@backstage/core-components';\n\nexport const UserSettingsProfileCard = () => {\n  const { profile, displayName } = useUserProfile();\n\n  return (\n    <InfoCard title=\"Profile\" variant=\"gridItem\">\n      <Grid container spacing={6}>\n        <Grid item>\n          <UserSettingsSignInAvatar size={96} />\n        </Grid>\n        <Grid item xs={12} sm container>\n          <Grid item xs container direction=\"column\" spacing={2}>\n            <Grid item xs>\n              <Typography variant=\"subtitle1\" gutterBottom>\n                {displayName}\n              </Typography>\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                {profile.email}\n              </Typography>\n            </Grid>\n          </Grid>\n          <Grid item>\n            <UserSettingsMenu />\n          </Grid>\n        </Grid>\n      </Grid>\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useContext } from 'react';\nimport {\n  ListItem,\n  ListItemSecondaryAction,\n  ListItemText,\n  Switch,\n  Tooltip,\n} from '@material-ui/core';\nimport { SidebarPinStateContext } from '@backstage/core-components';\n\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useContext(\n    SidebarPinStateContext,\n  );\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary=\"Pin Sidebar\"\n        secondary=\"Prevent the sidebar from collapsing\"\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': 'Pin Sidebar Switch' }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { cloneElement } from 'react';\nimport useObservable from 'react-use/lib/useObservable';\nimport AutoIcon from '@material-ui/icons/BrightnessAuto';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';\nimport {\n  ListItem,\n  ListItemText,\n  ListItemSecondaryAction,\n  Tooltip,\n  makeStyles,\n} from '@material-ui/core';\nimport { appThemeApiRef, useApi } from '@backstage/core-plugin-api';\n\ntype ThemeIconProps = {\n  id: string;\n  activeId: string | undefined;\n  icon: JSX.Element | undefined;\n};\n\nconst ThemeIcon = ({ id, activeId, icon }: ThemeIconProps) =>\n  icon ? (\n    cloneElement(icon, {\n      color: activeId === id ? 'primary' : undefined,\n    })\n  ) : (\n    <AutoIcon color={activeId === id ? 'primary' : undefined} />\n  );\n\ntype TooltipToggleButtonProps = {\n  children: JSX.Element;\n  title: string;\n  value: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  list: {\n    [theme.breakpoints.down('xs')]: {\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    [theme.breakpoints.down('xs')]: {\n      paddingRight: 0,\n      paddingLeft: 0,\n    },\n  },\n  listItemSecondaryAction: {\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      top: 'auto',\n      right: 'auto',\n      position: 'relative',\n      transform: 'unset',\n    },\n  },\n}));\n\n// ToggleButtonGroup uses React.children.map instead of context\n// so wrapping with Tooltip breaks ToggleButton functionality.\nconst TooltipToggleButton = ({\n  children,\n  title,\n  value,\n  ...props\n}: TooltipToggleButtonProps) => (\n  <Tooltip placement=\"top\" arrow title={title}>\n    <ToggleButton value={value} {...props}>\n      {children}\n    </ToggleButton>\n  </Tooltip>\n);\n\nexport const UserSettingsThemeToggle = () => {\n  const classes = useStyles();\n  const appThemeApi = useApi(appThemeApiRef);\n  const themeId = useObservable(\n    appThemeApi.activeThemeId$(),\n    appThemeApi.getActiveThemeId(),\n  );\n\n  const themeIds = appThemeApi.getInstalledThemes();\n\n  const handleSetTheme = (\n    _event: React.MouseEvent<HTMLElement>,\n    newThemeId: string | undefined,\n  ) => {\n    if (themeIds.some(t => t.id === newThemeId)) {\n      appThemeApi.setActiveThemeId(newThemeId);\n    } else {\n      appThemeApi.setActiveThemeId(undefined);\n    }\n  };\n\n  return (\n    <ListItem className={classes.list}>\n      <ListItemText\n        className={classes.listItemText}\n        primary=\"Theme\"\n        secondary=\"Change the theme mode\"\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <ToggleButtonGroup\n          exclusive\n          size=\"small\"\n          value={themeId ?? 'auto'}\n          onChange={handleSetTheme}\n        >\n          {themeIds.map(theme => {\n            const themeIcon = themeIds.find(t => t.id === theme.id)?.icon;\n            return (\n              <TooltipToggleButton\n                key={theme.id}\n                title={`Select ${theme.title}`}\n                value={theme.id}\n              >\n                <>\n                  {theme.title}&nbsp;\n                  <ThemeIcon\n                    id={theme.id}\n                    icon={themeIcon}\n                    activeId={themeId}\n                  />\n                </>\n              </TooltipToggleButton>\n            );\n          })}\n          <Tooltip placement=\"top\" arrow title=\"Select auto theme\">\n            <ToggleButton value=\"auto\" selected={themeId === undefined}>\n              Auto&nbsp;\n              <AutoIcon color={themeId === undefined ? 'primary' : undefined} />\n            </ToggleButton>\n          </Tooltip>\n        </ToggleButtonGroup>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { List } from '@material-ui/core';\nimport { InfoCard } from '@backstage/core-components';\nimport { UserSettingsPinToggle } from './UserSettingsPinToggle';\nimport { UserSettingsThemeToggle } from './UserSettingsThemeToggle';\n\nexport const UserSettingsAppearanceCard = () => (\n  <InfoCard title=\"Appearance\" variant=\"gridItem\">\n    <List dense>\n      <UserSettingsThemeToggle />\n      <UserSettingsPinToggle />\n    </List>\n  </InfoCard>\n);\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { Grid } from '@material-ui/core';\nimport React from 'react';\nimport { UserSettingsProfileCard } from './UserSettingsProfileCard';\nimport { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';\n\nexport const UserSettingsGeneral = () => {\n  return (\n    <Grid container direction=\"row\" spacing={3}>\n      <Grid item sm={12} md={6}>\n        <UserSettingsProfileCard />\n      </Grid>\n      <Grid item sm={12} md={6}>\n        <UserSettingsAppearanceCard />\n      </Grid>\n    </Grid>\n  );\n};\n","/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { UserSettingsAuthProviders } from './AuthProviders';\nimport { UserSettingsFeatureFlags } from './FeatureFlags';\nimport { UserSettingsGeneral } from './General';\nimport { Header, Page, TabbedLayout } from '@backstage/core-components';\n\ntype Props = {\n  providerSettings?: JSX.Element;\n};\n\nexport const SettingsPage = ({ providerSettings }: Props) => {\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"Settings\" />\n\n      <TabbedLayout>\n        <TabbedLayout.Route path=\"general\" title=\"General\">\n          <UserSettingsGeneral />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route\n          path=\"auth-providers\"\n          title=\"Authentication Providers\"\n        >\n          <UserSettingsAuthProviders providerSettings={providerSettings} />\n        </TabbedLayout.Route>\n        <TabbedLayout.Route path=\"feature-flags\" title=\"Feature Flags\">\n          <UserSettingsFeatureFlags />\n        </TabbedLayout.Route>\n      </TabbedLayout>\n    </Page>\n  );\n};\n"],"names":["EXAMPLE","useStyles"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-user-settings",
   "description": "A Backstage plugin that provides a settings page",
-  "version": "0.3.11",
+  "version": "0.3.15",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -31,22 +31,23 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.7.4",
-    "@backstage/core-plugin-api": "^0.2.0",
-    "@backstage/theme": "^0.2.13",
+    "@backstage/core-components": "^0.8.3",
+    "@backstage/core-plugin-api": "^0.4.1",
+    "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "react-router": "6.0.0-beta.0",
     "react-use": "^17.2.4"
   },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0"
+  },
   "devDependencies": {
-    "@backstage/cli": "^0.9.0",
-    "@backstage/core-app-api": "^0.1.21",
-    "@backstage/dev-utils": "^0.2.13",
-    "@backstage/test-utils": "^0.1.22",
+    "@backstage/cli": "^0.10.5",
+    "@backstage/core-app-api": "^0.3.1",
+    "@backstage/dev-utils": "^0.2.16",
+    "@backstage/test-utils": "^0.2.1",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",
@@ -77,5 +78,5 @@
       }
     }
   },
-  "gitHead": "ddfdcd2b44dc9848cf550cea5346d5f9916a36d9"
+  "gitHead": "ffdb98aa2973366d48ff1774a7f892bc0c926e7e"
 }