npm - @backstage/plugin-user-settings - Versions diffs - 0.3.12 → 0.3.13 - Mend

@backstage/plugin-user-settings 0.3.12 → 0.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,14 @@
 # @backstage/plugin-user-settings
+## 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

package/dist/index.esm.js CHANGED Viewed

@@ -55,7 +55,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 +90,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 +102,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 +149,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 +186,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 +194,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 +214,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 +242,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 +255,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 && {
@@ -290,21 +290,21 @@ const useUserProfile = () => {
   const userId = identityApi.getUserId();
   const profile = identityApi.getProfile();
   const displayName = (_a = profile.displayName) != null ? _a : userId;
-  return {profile, displayName};
+  return { profile, displayName };
 };
 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 +338,7 @@ const UserSettingsMenu = () => {
 };
 const UserSettingsProfileCard = () => {
-  const {profile, displayName} = useUserProfile();
+  const { profile, displayName } = useUserProfile();
   return /* @__PURE__ */ React.createElement(InfoCard, {
     title: "Profile",
     variant: "gridItem"
@@ -375,7 +375,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 +388,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
@@ -504,7 +504,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 CHANGED Viewed

	@@ -1 +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.title} \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 \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":";;;;;;;;;;;;;;MAsBa,mBAAmB,eAAe;AAAA,EAC7C,IAAI;AAAA;MAGO,qBAAqB,aAAa;AAAA,EAC7C,IAAI;AAAA,EACJ,QAAQ;AAAA,IACN,cAAc;AAAA;AAAA;MAIL,mBAAmB,mBAAmB,QACjD,wBAAwB;AAAA,EACtB,MAAM;AAAA,EACN,WAAW,MACF,+DAA6B,KAAK,OAAK,EAAE;AAAA,EAClD,YAAY;AAAA;;MCZH,WAAW,CAAC,UAAyB;AAChD,QAAM,YAAY,YAAY;AAC9B,QAAM,OAAO,MAAM,OAAO,MAAM,OAAO;AACvC,6CAAQ,aAAD;AAAA,IAAa,MAAK;AAAA,IAAW,IAAI;AAAA,IAAa,MAAM;AAAA;AAAA;;ACT7D,MAAMA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;MAQH,iBAAiB,0CAC3B,YAAD;AAAA,EACE,SAAQ;AAAA,EACR,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,sGAEK,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAQ,6CACpB,QAAD,MAAM,oBAAsB,oFAGlC,aAAD;AAAA,IACE,MAAMA;AAAA,IACN,UAAS;AAAA,IACT,iBAAe;AAAA,IACf,oBAAoB,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG;AAAA,IACpC,aAAa,CAAE,YAAY,WAAW,UAAU;AAAA,0CAEjD,QAAD;AAAA,IACE,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,KACN;AAAA;;MCXI,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,MACW;AACX,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,UAAU,eAAe,SAAS;AAEzC,YAAU,MAAM;AACd,QAAI,YAAY;AAEhB,UAAM,eAAe,IAClB,gBACA,UAAU,CAAC,iBAA+B;AACzC,UAAI,CAAC,WAAW;AACd,oBAAY,iBAAiB,aAAa;AAAA;AAAA;AAIhD,WAAO,MAAM;AACX,kBAAY;AACZ,mBAAa;AAAA;AAAA,KAEd,CAAC;AAEJ,6CACG,UAAD,0CACG,cAAD,0CACG,MAAD,4CAED,cAAD;AAAA,IACE,SAAS;AAAA,IACT,+CACG,SAAD;AAAA,MAAS,WAAU;AAAA,MAAM,OAAK;AAAA,MAAC,OAAO;AAAA,2CACnC,QAAD,MAAO;AAAA,IAGX,0BAA0B,CAAE,QAAQ,MAAM,OAAO,CAAE,OAAO;AAAA,0CAE3D,yBAAD,0CACG,SAAD;AAAA,IACE,WAAU;AAAA,IACV,OAAK;AAAA,IACL,OAAO,WAAW,iBAAiB,UAAU,cAAc;AAAA,yCAE1D,QAAD;AAAA,IACE,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,SAAS,MAAO,WAAW,IAAI,YAAY,IAAI;AAAA,KAE9C,WAAW,aAAa;AAAA;;MCxDxB,0BAA0B,CAAC,CAAE,mFAErC,oBAAoB,SAAS,iDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,oDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,iDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,iDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,gDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,+CAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,oDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,oDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,IAGT,oBAAoB,SAAS,iDAC3B,sBAAD;AAAA,EACE,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA;;MC7ED,4BAA4B,CAAC,CAAE,sBAA8B;AACxE,QAAM,YAAY,OAAO;AACzB,QAAM,kBAAkB,UAAU,kBAAkB;AACpD,QAAM,sBAAsB,oDAAiB,WAAU;AACvD,QAAM,YAAY,kFACf,yBAAD;AAAA,IAAyB;AAAA;AAG3B,MAAI,CAAC,oBAAoB,6DAAsB,SAAQ;AACrD,+CAAQ,gBAAD;AAAA;AAGT,6CACG,UAAD;AAAA,IAAU,OAAM;AAAA,yCACb,MAAD;AAAA,IAAM,OAAK;AAAA,KAAE;AAAA;;ACtBnB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;MAUH,aAAa,0CACvB,YAAD;AAAA,EACE,SAAQ;AAAA,EACR,OAAM;AAAA,EACN,aAAY;AAAA,EACZ,sGAEK,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAQ,uGAG3B,aAAD;AAAA,IACE,MAAM;AAAA,IACN,UAAS;AAAA,IACT,iBAAe;AAAA,IACf,oBAAoB,CAAC;AAAA,IACrB,aAAa,CAAE,YAAY,WAAW,UAAU;AAAA,0CAEjD,QAAD;AAAA,IACE,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,MAAK;AAAA,KACN;AAAA;;MCnBI,WAAW,CAAC,CAAE,MAAM,SAAS,uDACvC,UAAD;AAAA,EAAU,SAAO;AAAA,EAAC,QAAM;AAAA,EAAC,SAAS,MAAM,cAAc,KAAK;AAAA,uCACxD,cAAD,0CACG,SAAD;AAAA,EAAS,WAAU;AAAA,EAAM,OAAK;AAAA,EAAC,OAAO,UAAU,YAAY;AAAA,uCACzD,QAAD;AAAA,EAAQ,OAAM;AAAA,EAAU,SAAS;AAAA,EAAS,MAAM,KAAK;AAAA,0CAGxD,cAAD;AAAA,EACE,SAAS,KAAK;AAAA,EACd,WAAW,iBAAiB,KAAK;AAAA;;MCN1B,2BAA2B,MAAM;AAC5C,QAAM,kBAAkB,OAAO;AAC/B,QAAM,eAAe,gBAAgB;AAErC,QAAM,mBAAmB,OAAO,YAC9B,aAAa,IAAI,CAAC,CAAE,UAAW,CAAC,MAAM,gBAAgB,SAAS;AAGjE,QAAM,CAAC,OAAO,YAAY,SAAkC;AAC5D,QAAM,CAAC,aAAa,kBAAkB,SAAiB;AACvD,QAAM,WAAW,MAAM;AAEvB,QAAM,aAAa,YACjB,CAAC,aAAqB;AACpB,UAAM,WAAW,gBAAgB,SAAS,YACtC,iBAAiB,OACjB,iBAAiB;AAErB,oBAAgB,KAAK;AAAA,MACnB,QAAQ,EAAG,WAAW;AAAA,MACtB,OAAO;AAAA;AAGT,aAAS;AAAc,SAClB;AAAA,OACF,WAAW,aAAa,iBAAiB;AAAA;AAAA,KAG9C,CAAC;AAGH,MAAI,CAAC,aAAa,QAAQ;AACxB,+CAAQ,YAAD;AAAA;AAGT,QAAM,mBAAmB,MAAM;AAtEjC;AAuEI,mBAAe;AACf,+CAAU,YAAV,mBAAmB;AAAA;AAGrB,MAAI,uBAAuB,MAAM,KAAK;AAEtC,QAAM,mBAAmB,YACtB,MAAM,MACN,IAAI,UAAQ,KAAK,OAAO,kBAAkB;AAE7C,mBAAiB,QACf,UACG,uBAAuB,qBAAqB,OAAO,iBAClD,YAAY,KAAK,kBAAkB,SAAS,SAAS;AAI3D,QAAM,SAAS,0CACZ,MAAD;AAAA,IAAM,WAAS;AAAA,IAAC,OAAO,CAAE,gBAAgB;AAAA,yCACtC,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAG,IAAI;AAAA,yCACnB,YAAD;AAAA,IAAY,SAAQ;AAAA,KAAK,mBAE1B,aAAa,UAAU,0CACrB,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAG,IAAI;AAAA,yCACnB,WAAD;AAAA,IACE,OAAM;AAAA,IACN,OAAO,CAAE,SAAS,QAAQ,gBAAgB;AAAA,IAC1C,UAAU,SAAO,OAAO,IAAI;AAAA,IAC5B,YAAY;AAAA,SACN,YAAY,UAAU;AAAA,QACxB,kDACG,YAAD;AAAA,UACE,cAAW;AAAA,UACX,SAAS;AAAA,UACT,MAAK;AAAA,+CAEJ,WAAD;AAAA;AAAA;AAAA,IAKR,UAAU,OAAK,eAAe,EAAE,OAAO;AAAA,IACvC,OAAO;AAAA;AAOjB,6CACG,UAAD;AAAA,IAAU,2CAAQ,QAAD;AAAA,yCACd,MAAD;AAAA,IAAM,OAAK;AAAA,KACR,qBAAqB,IAAI,iBAAe;AACvC,UAAM,UAAU,QAAQ,MAAM,YAAY;AAE1C,+CACG,UAAD;AAAA,MACE,KAAK,YAAY;AAAA,MACjB,MAAM;AAAA,MACN;AAAA,MACA,eAAe;AAAA;AAAA;AAAA;;MCjHhB,iBAAiB,MAAM;AAlBpC;AAmBE,QAAM,cAAc,OAAO;AAC3B,QAAM,SAAS,YAAY;AAC3B,QAAM,UAAU,YAAY;AAC5B,QAAM,cAAc,cAAQ,gBAAR,YAAuB;AAE3C,SAAO,CAAE,SAAS;AAAA;;ACFpB,MAAMC,cAAY,WAA6C;AAAU,EACvE,QAAQ;AAAA,IACN,OAAO,CAAC,CAAE,UAAW;AAAA,IACrB,QAAQ,CAAC,CAAE,UAAW;AAAA,IACtB,UAAU,CAAC,CAAE,UAAW,OAAO;AAAA,IAC/B,QAAQ,aAAa,MAAM,QAAQ;AAAA;AAAA;MAM1B,2BAA2B,CAAC,CAAE,UAAkB;AAC3D,QAAM,CAAE,YAAa;AACrB,QAAM,UAAUA,YAAU,OAAO,CAAE,QAAS,CAAE,MAAM;AACpD,QAAM,CAAE,WAAY;AAEpB,6CAAQ,QAAD;AAAA,IAAQ,KAAK,QAAQ;AAAA,IAAS,WAAW,QAAQ;AAAA;AAAA;;MChB7C,mBAAmB,MAAM;AACpC,QAAM,cAAc,OAAO;AAC3B,QAAM,CAAC,MAAM,WAAW,MAAM,SAAS;AACvC,QAAM,CAAC,UAAU,eAAe,MAAM,SACpC;AAGF,QAAM,aAAa,CAAC,UAA+C;AACjE,gBAAY,MAAM;AAClB,YAAQ;AAAA;AAGV,QAAM,cAAc,MAAM;AACxB,gBAAY;AACZ,YAAQ;AAAA;AAGV,uGAEK,YAAD;AAAA,IACE,eAAY;AAAA,IACZ,cAAW;AAAA,IACX,SAAS;AAAA,yCAER,cAAD,4CAED,MAAD;AAAA,IAAM;AAAA,IAAoB;AAAA,IAAY,SAAS;AAAA,yCAC5C,UAAD;AAAA,IAAU,eAAY;AAAA,IAAW,SAAS,MAAM,YAAY;AAAA,yCACzD,cAAD,0CACG,aAAD,QACa;AAAA;;MC9BZ,0BAA0B,MAAM;AAC3C,QAAM,CAAE,SAAS,eAAgB;AAEjC,6CACG,UAAD;AAAA,IAAU,OAAM;AAAA,IAAU,SAAQ;AAAA,yCAC/B,MAAD;AAAA,IAAM,WAAS;AAAA,IAAC,SAAS;AAAA,yCACtB,MAAD;AAAA,IAAM,MAAI;AAAA,yCACP,0BAAD;AAAA,IAA0B,MAAM;AAAA,2CAEjC,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAI,IAAE;AAAA,IAAC,WAAS;AAAA,yCAC5B,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAE;AAAA,IAAC,WAAS;AAAA,IAAC,WAAU;AAAA,IAAS,SAAS;AAAA,yCACjD,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAE;AAAA,yCACV,YAAD;AAAA,IAAY,SAAQ;AAAA,IAAY,cAAY;AAAA,KACzC,kDAEF,YAAD;AAAA,IAAY,SAAQ;AAAA,IAAQ,OAAM;AAAA,KAC/B,QAAQ,8CAId,MAAD;AAAA,IAAM,MAAI;AAAA,yCACP,kBAAD;AAAA;;MCjBC,wBAAwB,MAAM;AACzC,QAAM,CAAE,UAAU,yBAA0B,WAC1C;AAGF,6CACG,UAAD,0CACG,cAAD;AAAA,IACE,SAAQ;AAAA,IACR,WAAU;AAAA,0CAEX,yBAAD,0CACG,SAAD;AAAA,IACE,WAAU;AAAA,IACV,OAAK;AAAA,IACL,OAAO,GAAG,WAAW,UAAU;AAAA,yCAE9B,QAAD;AAAA,IACE,OAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU,MAAM;AAAA,IAChB,MAAK;AAAA,IACL,YAAY,CAAE,cAAc;AAAA;AAAA;;ACZxC,MAAM,YAAY,CAAC,CAAE,IAAI,UAAU,UACjC,OACE,aAAa,MAAM;AAAA,EACjB,OAAO,aAAa,KAAK,YAAY;AAAA,yCAGtC,UAAD;AAAA,EAAU,OAAO,aAAa,KAAK,YAAY;AAAA;AASnD,MAAM,YAAY,WAAW;AAAU,EACrC,MAAM;AAAA,KACH,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,SAAS;AAAA;AAAA;AAAA,EAGb,cAAc;AAAA,KACX,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,cAAc;AAAA,MACd,aAAa;AAAA;AAAA;AAAA,EAGjB,yBAAyB;AAAA,KACtB,MAAM,YAAY,KAAK,QAAQ;AAAA,MAC9B,OAAO;AAAA,MACP,KAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAOjB,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,0CAEF,SAAD;AAAA,EAAS,WAAU;AAAA,EAAM,OAAK;AAAA,EAAC;AAAA,uCAC5B,cAAD;AAAA,EAAc;AAAA,KAAkB;AAAA,GAC7B;MAKM,0BAA0B,MAAM;AAC3C,QAAM,UAAU;AAChB,QAAM,cAAc,OAAO;AAC3B,QAAM,UAAU,cACd,YAAY,kBACZ,YAAY;AAGd,QAAM,WAAW,YAAY;AAE7B,QAAM,iBAAiB,CACrB,QACA,eACG;AACH,QAAI,SAAS,KAAK,OAAK,EAAE,OAAO,aAAa;AAC3C,kBAAY,iBAAiB;AAAA,WACxB;AACL,kBAAY,iBAAiB;AAAA;AAAA;AAIjC,6CACG,UAAD;AAAA,IAAU,WAAW,QAAQ;AAAA,yCAC1B,cAAD;AAAA,IACE,WAAW,QAAQ;AAAA,IACnB,SAAQ;AAAA,IACR,WAAU;AAAA,0CAEX,yBAAD;AAAA,IAAyB,WAAW,QAAQ;AAAA,yCACzC,mBAAD;AAAA,IACE,WAAS;AAAA,IACT,MAAK;AAAA,IACL,OAAO,4BAAW;AAAA,IAClB,UAAU;AAAA,KAET,SAAS,IAAI,WAAS;AA5HjC;AA6HY,UAAM,YAAY,eAAS,KAAK,OAAK,EAAE,OAAO,MAAM,QAAlC,mBAAuC;AACzD,+CACG,qBAAD;AAAA,MACE,KAAK,MAAM;AAAA,MACX,OAAO,UAAU,MAAM;AAAA,MACvB,OAAO,MAAM;AAAA,iEAGV,MAAM,OAAM,4CACZ,WAAD;AAAA,MACE,IAAI,MAAM;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,0CAMnB,SAAD;AAAA,IAAS,WAAU;AAAA,IAAM,OAAK;AAAA,IAAC,OAAM;AAAA,yCAClC,cAAD;AAAA,IAAc,OAAM;AAAA,IAAO,UAAU,YAAY;AAAA,KAAW,gDAEzD,UAAD;AAAA,IAAU,OAAO,YAAY,SAAY,YAAY;AAAA;AAAA;;MC7HtD,6BAA6B,0CACvC,UAAD;AAAA,EAAU,OAAM;AAAA,EAAa,SAAQ;AAAA,uCAClC,MAAD;AAAA,EAAM,OAAK;AAAA,uCACR,yBAAD,2CACC,uBAAD;;MCLO,sBAAsB,MAAM;AACvC,6CACG,MAAD;AAAA,IAAM,WAAS;AAAA,IAAC,WAAU;AAAA,IAAM,SAAS;AAAA,yCACtC,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAI,IAAI;AAAA,yCACpB,yBAAD,4CAED,MAAD;AAAA,IAAM,MAAI;AAAA,IAAC,IAAI;AAAA,IAAI,IAAI;AAAA,yCACpB,4BAAD;AAAA;;MCDK,eAAe,CAAC,CAAE,sBAA8B;AAC3D,6CACG,MAAD;AAAA,IAAM,SAAQ;AAAA,yCACX,QAAD;AAAA,IAAQ,OAAM;AAAA,0CAEb,cAAD,0CACG,aAAa,OAAd;AAAA,IAAoB,MAAK;AAAA,IAAU,OAAM;AAAA,yCACtC,qBAAD,4CAED,aAAa,OAAd;AAAA,IACE,MAAK;AAAA,IACL,OAAM;AAAA,yCAEL,2BAAD;AAAA,IAA2B;AAAA,2CAE5B,aAAa,OAAd;AAAA,IAAoB,MAAK;AAAA,IAAgB,OAAM;AAAA,yCAC5C,0BAAD;AAAA;;;;;;;;;"}
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.title} \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 \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 CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-user-settings",
   "description": "A Backstage plugin that provides a settings page",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "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.6",
-    "@backstage/core-plugin-api": "^0.2.2",
+    "@backstage/core-components": "^0.8.0",
+    "@backstage/core-plugin-api": "^0.3.0",
     "@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.10.0",
-    "@backstage/core-app-api": "^0.1.24",
-    "@backstage/dev-utils": "^0.2.13",
-    "@backstage/test-utils": "^0.1.23",
+    "@backstage/cli": "^0.10.1",
+    "@backstage/core-app-api": "^0.2.0",
+    "@backstage/dev-utils": "^0.2.14",
+    "@backstage/test-utils": "^0.1.24",
     "@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": "a05e7081b805006e3f0b2960a08a7753357f532f"
+  "gitHead": "562be0b43016294e27af3ad024191bb86b13b1c1"
 }