@backstage/plugin-user-settings 0.7.11-next.2 → 0.7.11

package/dist/index.esm.js

@@ -1,26 +1,28 @@
 import { WebStorage } from '@backstage/core-app-api';
 import { ResponseError } from '@backstage/errors';
 import ObservableImpl from 'zen-observable';
-import { createRouteRef, createPlugin, createRoutableExtension, useRouteRef, useApi, errorApiRef, SessionState, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, gitlabAuthApiRef, oktaAuthApiRef, bitbucketAuthApiRef, oneloginAuthApiRef, atlassianAuthApiRef, bitbucketServerAuthApiRef, configApiRef, featureFlagsApiRef, FeatureFlagState, identityApiRef, alertApiRef, appThemeApiRef, attachComponentData, useElementFilter } from '@backstage/core-plugin-api';
-import React, { useState, useEffect, useCallback, cloneElement } from 'react';
+import { createRouteRef, createPlugin, createRoutableExtension, useRouteRef, attachComponentData } from '@backstage/core-plugin-api';
+import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
-import { SidebarItem, EmptyState, CodeSnippet, sidebarConfig, InfoCard, useSidebarPinState, Page, Header, RoutedTabs } from '@backstage/core-components';
-import { useOutlet } from 'react-router-dom';
-import { Typography, Button, makeStyles, Avatar, ListItem, ListItemIcon, ListItemText, Tooltip, Grid, ListItemSecondaryAction, List, Switch, TextField, IconButton, 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/lib/useObservable';
-import AutoIcon from '@material-ui/icons/BrightnessAuto';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import { useTranslationRef, appLanguageApiRef } from '@backstage/core-plugin-api/alpha';
-import { u as userSettingsTranslationRef } from './esm/translation-d20c444b.esm.js';
-import { EntityRefLinks } from '@backstage/plugin-catalog-react';
-import Grid$1 from '@material-ui/core/Grid';
-import Typography$1 from '@material-ui/core/Typography';
+import { SidebarItem } from '@backstage/core-components';
+import { L as LAYOUT_ROUTE_DATA_KEY, S as SettingsLayout } from './esm/SettingsPage-f863b932.esm.js';
+export { D as DefaultProviderSettings, P as ProviderSettingsItem, a as Router, S as SettingsLayout, f as UserSettingsAppearanceCard, U as UserSettingsAuthProviders, k as UserSettingsFeatureFlags, b as UserSettingsGeneral, i as UserSettingsIdentityCard, j as UserSettingsLanguageToggle, d as UserSettingsMenu, h as UserSettingsPinToggle, c as UserSettingsProfileCard, e as UserSettingsSignInAvatar, g as UserSettingsThemeToggle, u as useUserProfile } from './esm/SettingsPage-f863b932.esm.js';
+import 'react-router-dom';
+import '@material-ui/core';
+import '@material-ui/icons/Star';
+import '@material-ui/icons/Clear';
+import 'react-use/lib/useAsync';
+import '@material-ui/icons/MeetingRoom';
+import '@material-ui/icons/MoreVert';
+import 'react-use/lib/useObservable';
+import '@material-ui/icons/BrightnessAuto';
+import '@material-ui/lab/ToggleButton';
+import '@material-ui/lab/ToggleButtonGroup';
+import '@backstage/core-plugin-api/alpha';
+import './esm/translation-d20c444b.esm.js';
+import '@backstage/plugin-catalog-react';
+import '@material-ui/core/Grid';
+import '@material-ui/core/Typography';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -182,7 +184,7 @@ const userSettingsPlugin = createPlugin({
 const UserSettingsPage = userSettingsPlugin.provide(
   createRoutableExtension({
     name: "UserSettingsPage",
-    component: () => import('./esm/index-355b96f0.esm.js').then((m) => m.SettingsPage),
+    component: () => import('./esm/index-ca302ff8.esm.js').then((m) => m.SettingsPage),
     mountPoint: settingsRouteRef
   })
 );
@@ -193,743 +195,9 @@ const Settings = (props) => {
   return /* @__PURE__ */ React.createElement(SidebarItem, { text: "Settings", to: routePath(), icon: Icon });
 };
 
-const EXAMPLE$1 = `auth:
-  providers:
-    google:
-      development:
-        clientId: \${AUTH_GOOGLE_CLIENT_ID}
-        clientSecret: \${AUTH_GOOGLE_CLIENT_SECRET}
-`;
-const EmptyProviders = () => /* @__PURE__ */ React.createElement(
-  EmptyState,
-  {
-    missing: "content",
-    title: "No Authentication Providers",
-    description: "You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.",
-    action: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "Open ", /* @__PURE__ */ React.createElement("code", null, "app-config.yaml"), " and make the changes as highlighted below:"), /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: EXAMPLE$1,
-        language: "yaml",
-        showLineNumbers: true,
-        highlightedNumbers: [3, 4, 5, 6, 7, 8],
-        customStyle: { background: "inherit", fontSize: "115%" }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        href: "https://backstage.io/docs/auth/add-auth-provider"
-      },
-      "Read More"
-    ))
-  }
-);
-
-const useStyles$3 = makeStyles((theme) => ({
-  avatar: {
-    width: ({ size }) => size,
-    height: ({ size }) => size,
-    fontSize: ({ size }) => size * 0.7,
-    border: `1px solid ${theme.palette.textSubtle}`
-  }
-}));
-const ProviderSettingsAvatar = ({ size, picture }) => {
-  const { iconSize } = sidebarConfig;
-  const classes = useStyles$3(size ? { size } : { size: iconSize });
-  return /* @__PURE__ */ React.createElement(Avatar, { src: picture, className: classes.avatar });
-};
-
-const emptyProfile = {};
-const ProviderSettingsItem = (props) => {
-  const { title, description, icon: Icon, apiRef } = props;
-  const api = useApi(apiRef);
-  const errorApi = useApi(errorApiRef);
-  const [signedIn, setSignedIn] = useState(false);
-  const [profile, setProfile] = useState(emptyProfile);
-  useEffect(() => {
-    let didCancel = false;
-    const subscription = api.sessionState$().subscribe((sessionState) => {
-      if (sessionState !== SessionState.SignedIn) {
-        setProfile(emptyProfile);
-        setSignedIn(false);
-      }
-      if (!didCancel) {
-        api.getProfile({ optional: true }).then((profileResponse) => {
-          if (!didCancel) {
-            if (sessionState === SessionState.SignedIn) {
-              setSignedIn(true);
-            }
-            if (profileResponse) {
-              setProfile(profileResponse);
-            }
-          }
-        });
-      }
-    });
-    return () => {
-      didCancel = true;
-      subscription.unsubscribe();
-    };
-  }, [api]);
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Icon, null)), /* @__PURE__ */ React.createElement(
-    ListItemText,
-    {
-      primary: title,
-      secondary: /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title: description }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 6 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(ProviderSettingsAvatar, { size: 48, picture: profile.picture })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: true, container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, container: true, direction: "column", spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          variant: "subtitle1",
-          color: "textPrimary",
-          gutterBottom: true
-        },
-        profile.displayName
-      ), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, profile.email), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, description)))))),
-      secondaryTypographyProps: { noWrap: true, style: { width: "80%" } }
-    }
-  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      placement: "top",
-      arrow: true,
-      title: signedIn ? `Sign out from ${title}` : `Sign in to ${title}`
-    },
-    /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "outlined",
-        color: "primary",
-        onClick: () => {
-          const action = signedIn ? api.signOut() : api.signIn();
-          action.catch((error) => errorApi.post(error));
-        }
-      },
-      signedIn ? `Sign out` : `Sign in`
-    )
-  )));
-};
-
-const DefaultProviderSettings = (props) => {
-  const { configuredProviders } = props;
-  return /* @__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,
-      icon: Star
-    }
-  ), configuredProviders.includes("microsoft") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "Microsoft",
-      description: "Provides authentication towards Microsoft APIs and identities",
-      apiRef: microsoftAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("github") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "GitHub",
-      description: "Provides authentication towards GitHub APIs",
-      apiRef: githubAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("gitlab") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "GitLab",
-      description: "Provides authentication towards GitLab APIs",
-      apiRef: gitlabAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("okta") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "Okta",
-      description: "Provides authentication towards Okta APIs",
-      apiRef: oktaAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("bitbucket") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "Bitbucket",
-      description: "Provides authentication towards Bitbucket APIs",
-      apiRef: bitbucketAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("onelogin") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "OneLogin",
-      description: "Provides authentication towards OneLogin APIs",
-      apiRef: oneloginAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("atlassian") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "Atlassian",
-      description: "Provides authentication towards Atlassian APIs",
-      apiRef: atlassianAuthApiRef,
-      icon: Star
-    }
-  ), configuredProviders.includes("bitbucketServer") && /* @__PURE__ */ React.createElement(
-    ProviderSettingsItem,
-    {
-      title: "Bitbucket Server",
-      description: "Provides authentication towards Bitbucket Server APIs",
-      apiRef: bitbucketServerAuthApiRef,
-      icon: Star
-    }
-  ));
-};
-
-const UserSettingsAuthProviders = (props) => {
-  const { providerSettings } = props;
-  const configApi = useApi(configApiRef);
-  const providersConfig = configApi.getOptionalConfig("auth.providers");
-  const configuredProviders = (providersConfig == null ? void 0 : providersConfig.keys()) || [];
-  const providers = providerSettings != null ? providerSettings : /* @__PURE__ */ React.createElement(DefaultProviderSettings, { configuredProviders });
-  if (!providerSettings && !(configuredProviders == null ? void 0 : configuredProviders.length)) {
-    return /* @__PURE__ */ React.createElement(EmptyProviders, null);
-  }
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Available Providers" }, /* @__PURE__ */ React.createElement(List, { dense: true }, providers));
-};
-
-const EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';
-
-export default createPlugin({
-  id: 'plugin-name',
-  featureFlags: [{ name: 'enable-example-feature' }],
-});
-`;
-const EmptyFlags = () => /* @__PURE__ */ React.createElement(
-  EmptyState,
-  {
-    missing: "content",
-    title: "No Feature Flags",
-    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.",
-    action: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "An example for how to add a feature flag is highlighted below:"), /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: EXAMPLE,
-        language: "typescript",
-        showLineNumbers: true,
-        highlightedNumbers: [6],
-        customStyle: { background: "inherit", fontSize: "115%" }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        href: "https://backstage.io/docs/api/utility-apis"
-      },
-      "Read More"
-    ))
-  }
-);
-
-const getSecondaryText = (flag) => {
-  if (flag.description) {
-    return flag.description;
-  }
-  return flag.pluginId ? `Registered in ${flag.pluginId} plugin` : "Registered in the application";
-};
-const FlagItem = ({ flag, enabled, toggleHandler }) => /* @__PURE__ */ React.createElement(ListItem, { divider: true, button: true, onClick: () => toggleHandler(flag.name) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title: enabled ? "Disable" : "Enable" }, /* @__PURE__ */ React.createElement(Switch, { color: "primary", checked: enabled, name: flag.name }))), /* @__PURE__ */ React.createElement(ListItemText, { primary: flag.name, secondary: getSecondaryText(flag) }));
-
-const sortFlags = (flags, featureFlagsApi) => {
-  const activeFlags = flags.filter((flag) => featureFlagsApi.isActive(flag.name));
-  const idleFlags = flags.filter((flag) => !featureFlagsApi.isActive(flag.name));
-  return [...activeFlags, ...idleFlags];
-};
-const UserSettingsFeatureFlags = () => {
-  const featureFlagsApi = useApi(featureFlagsApiRef);
-  const inputRef = React.useRef();
-  const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();
-  const initialFeatureFlagsSorted = sortFlags(
-    initialFeatureFlags,
-    featureFlagsApi
-  );
-  const [featureFlags] = useState(initialFeatureFlagsSorted);
-  const initialFlagState = Object.fromEntries(
-    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)])
-  );
-  const [state, setState] = useState(initialFlagState);
-  const [filterInput, setFilterInput] = useState("");
-  const toggleFlag = useCallback(
-    (flagName) => {
-      const newState = featureFlagsApi.isActive(flagName) ? FeatureFlagState.None : FeatureFlagState.Active;
-      featureFlagsApi.save({
-        states: { [flagName]: newState },
-        merge: true
-      });
-      setState((prevState) => ({
-        ...prevState,
-        [flagName]: newState === FeatureFlagState.Active
-      }));
-    },
-    [featureFlagsApi]
-  );
-  if (!featureFlags.length) {
-    return /* @__PURE__ */ React.createElement(EmptyFlags, null);
-  }
-  const clearFilterInput = () => {
-    var _a;
-    setFilterInput("");
-    (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
-  };
-  const filteredFeatureFlags = featureFlags.filter((featureFlag) => {
-    const featureFlagName = featureFlag.name.toLocaleLowerCase("en-US");
-    return featureFlagName.includes(filterInput.toLocaleLowerCase("en-US"));
-  });
-  const Header = () => /* @__PURE__ */ React.createElement(Grid, { container: true, style: { justifyContent: "space-between" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, md: 8 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature Flags"), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "Please refresh the page when toggling feature flags")), featureFlags.length >= 10 && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, md: 4 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: "Filter",
-      style: { display: "flex", justifyContent: "flex-end" },
-      inputRef: (ref) => ref && ref.focus(),
-      InputProps: {
-        ...filterInput.length && {
-          endAdornment: /* @__PURE__ */ React.createElement(
-            IconButton,
-            {
-              "aria-label": "Clear filter",
-              onClick: clearFilterInput,
-              edge: "end"
-            },
-            /* @__PURE__ */ React.createElement(ClearIcon, null)
-          )
-        }
-      },
-      onChange: (e) => setFilterInput(e.target.value),
-      value: filterInput
-    }
-  )));
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: /* @__PURE__ */ React.createElement(Header, null) }, /* @__PURE__ */ React.createElement(List, { dense: true }, filteredFeatureFlags.map((featureFlag) => {
-    const enabled = Boolean(state[featureFlag.name]);
-    return /* @__PURE__ */ React.createElement(
-      FlagItem,
-      {
-        key: featureFlag.name,
-        flag: featureFlag,
-        enabled,
-        toggleHandler: toggleFlag
-      }
-    );
-  })));
-};
-
-const useUserProfile = () => {
-  var _a;
-  const identityApi = useApi(identityApiRef);
-  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,
-    backstageIdentity: value.identity,
-    displayName: (_a = value.profile.displayName) != null ? _a : value.identity.userEntityRef,
-    loading
-  };
-};
-
-const useStyles$2 = makeStyles((theme) => ({
-  avatar: {
-    width: ({ size }) => size,
-    height: ({ size }) => size,
-    fontSize: ({ size }) => size * 0.7,
-    border: `1px solid ${theme.palette.textSubtle}`
-  }
-}));
-const UserSettingsSignInAvatar = (props) => {
-  const { size } = props;
-  const { iconSize } = sidebarConfig;
-  const classes = useStyles$2(size ? { size } : { size: iconSize });
-  const { profile } = useUserProfile();
-  return /* @__PURE__ */ React.createElement(
-    Avatar,
-    {
-      src: profile.picture,
-      className: classes.avatar,
-      alt: "Profile picture"
-    }
-  );
-};
-
-const UserSettingsMenu = () => {
-  const errorApi = useApi(errorApiRef);
-  const identityApi = useApi(identityApiRef);
-  const [open, setOpen] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(
-    void 0
-  );
-  const handleOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setAnchorEl(void 0);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      "data-testid": "user-settings-menu",
-      "aria-label": "more",
-      onClick: handleOpen
-    },
-    /* @__PURE__ */ React.createElement(MoreVertIcon, null)
-  ), /* @__PURE__ */ React.createElement(Menu, { anchorEl, open, onClose: handleClose }, /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      "data-testid": "sign-out",
-      onClick: () => identityApi.signOut().catch((error) => errorApi.post(error))
-    },
-    /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(SignOutIcon, null)),
-    "Sign Out"
-  )));
-};
-
-const UserSettingsProfileCard = () => {
-  const { profile, displayName } = useUserProfile();
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Profile", variant: "gridItem" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 6 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(UserSettingsSignInAvatar, { size: 96 })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, sm: true, container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true, container: true, direction: "column", spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", gutterBottom: true }, displayName), profile.email && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, profile.email))), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(UserSettingsMenu, null)))));
-};
-
-const UserSettingsPinToggle = () => {
-  const { isPinned, toggleSidebarPinState } = useSidebarPinState();
-  return /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(
-    ListItemText,
-    {
-      primary: "Pin Sidebar",
-      secondary: "Prevent the sidebar from collapsing"
-    }
-  ), /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(
-    Tooltip,
-    {
-      placement: "top",
-      arrow: true,
-      title: `${isPinned ? "Unpin" : "Pin"} Sidebar`
-    },
-    /* @__PURE__ */ React.createElement(
-      Switch,
-      {
-        color: "primary",
-        checked: isPinned,
-        onChange: () => toggleSidebarPinState(),
-        name: "pin",
-        inputProps: { "aria-label": "Pin Sidebar Switch" }
-      }
-    )
-  )));
-};
-
-const ThemeIcon = ({ id, activeId, icon }) => icon ? cloneElement(icon, {
-  color: activeId === id ? "primary" : void 0
-}) : /* @__PURE__ */ React.createElement(AutoIcon, { color: activeId === id ? "primary" : void 0 });
-const useStyles$1 = makeStyles((theme) => ({
-  container: {
-    display: "flex",
-    flexWrap: "wrap",
-    width: "100%",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingBottom: 8,
-    paddingRight: 16
-  },
-  list: {
-    width: "initial",
-    [theme.breakpoints.down("xs")]: {
-      width: "100%",
-      padding: `0 0 12px`
-    }
-  },
-  listItemText: {
-    paddingRight: 0,
-    paddingLeft: 0
-  },
-  listItemSecondaryAction: {
-    position: "relative",
-    transform: "unset",
-    top: "auto",
-    right: "auto",
-    paddingLeft: 16,
-    [theme.breakpoints.down("xs")]: {
-      paddingLeft: 0
-    }
-  }
-}));
-const TooltipToggleButton$1 = ({
-  children,
-  title,
-  value,
-  ...props
-}) => /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title }, /* @__PURE__ */ React.createElement(ToggleButton, { value, ...props }, children));
-const UserSettingsThemeToggle = () => {
-  const classes = useStyles$1();
-  const appThemeApi = useApi(appThemeApiRef);
-  const activeThemeId = useObservable(
-    appThemeApi.activeThemeId$(),
-    appThemeApi.getActiveThemeId()
-  );
-  const themeIds = appThemeApi.getInstalledThemes();
-  const { t } = useTranslationRef(userSettingsTranslationRef);
-  const handleSetTheme = (_event, newThemeId) => {
-    if (themeIds.some((it) => it.id === newThemeId)) {
-      appThemeApi.setActiveThemeId(newThemeId);
-    } else {
-      appThemeApi.setActiveThemeId(void 0);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    ListItem,
-    {
-      className: classes.list,
-      classes: { container: classes.container }
-    },
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        className: classes.listItemText,
-        primary: t("theme"),
-        secondary: t("change_the_theme_mode")
-      }
-    ),
-    /* @__PURE__ */ React.createElement(ListItemSecondaryAction, { className: classes.listItemSecondaryAction }, /* @__PURE__ */ React.createElement(
-      ToggleButtonGroup,
-      {
-        exclusive: true,
-        size: "small",
-        value: activeThemeId != null ? activeThemeId : "auto",
-        onChange: handleSetTheme
-      },
-      themeIds.map((theme) => {
-        const themeId = theme.id;
-        const themeIcon = theme.icon;
-        const themeTitle = theme.title || (themeId === "light" || themeId === "dark" ? t(`theme_${themeId}`) : themeId);
-        return /* @__PURE__ */ React.createElement(
-          TooltipToggleButton$1,
-          {
-            key: themeId,
-            title: t("select_theme", { theme: themeTitle }),
-            value: themeId
-          },
-          /* @__PURE__ */ React.createElement(React.Fragment, null, themeTitle, "\xA0", /* @__PURE__ */ React.createElement(
-            ThemeIcon,
-            {
-              id: themeId,
-              icon: themeIcon,
-              activeId: activeThemeId
-            }
-          ))
-        );
-      }),
-      /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title: t("select_theme_auto") }, /* @__PURE__ */ React.createElement(ToggleButton, { value: "auto", selected: activeThemeId === void 0 }, t("theme_auto"), "\xA0", /* @__PURE__ */ React.createElement(
-        AutoIcon,
-        {
-          color: activeThemeId === void 0 ? "primary" : void 0
-        }
-      )))
-    ))
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    display: "flex",
-    flexWrap: "wrap",
-    width: "100%",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingBottom: 8,
-    paddingRight: 16
-  },
-  list: {
-    width: "initial",
-    [theme.breakpoints.down("xs")]: {
-      width: "100%",
-      padding: `0 0 12px`
-    }
-  },
-  listItemText: {
-    paddingRight: 0,
-    paddingLeft: 0
-  },
-  listItemSecondaryAction: {
-    position: "relative",
-    transform: "unset",
-    top: "auto",
-    right: "auto",
-    paddingLeft: 16,
-    [theme.breakpoints.down("xs")]: {
-      paddingLeft: 0
-    }
-  }
-}));
-const TooltipToggleButton = ({
-  children,
-  title,
-  value,
-  ...props
-}) => /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title }, /* @__PURE__ */ React.createElement(ToggleButton, { value, ...props }, children));
-const UserSettingsLanguageToggle = () => {
-  const classes = useStyles();
-  const languageApi = useApi(appLanguageApiRef);
-  const { t } = useTranslationRef(userSettingsTranslationRef);
-  const [languageObservable] = useState(() => languageApi.language$());
-  const { language: currentLanguage } = useObservable(
-    languageObservable,
-    languageApi.getLanguage()
-  );
-  const { languages } = languageApi.getAvailableLanguages();
-  if (languages.length <= 1) {
-    return null;
-  }
-  const handleSetLanguage = (_event, newLanguage) => {
-    languageApi.setLanguage(newLanguage);
-  };
-  return /* @__PURE__ */ React.createElement(
-    ListItem,
-    {
-      className: classes.list,
-      classes: { container: classes.container }
-    },
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        className: classes.listItemText,
-        primary: t("language"),
-        secondary: t("change_the_language")
-      }
-    ),
-    /* @__PURE__ */ React.createElement(ListItemSecondaryAction, { className: classes.listItemSecondaryAction }, /* @__PURE__ */ React.createElement(
-      ToggleButtonGroup,
-      {
-        exclusive: true,
-        size: "small",
-        value: currentLanguage,
-        onChange: handleSetLanguage
-      },
-      languages.map((language) => {
-        return /* @__PURE__ */ React.createElement(
-          TooltipToggleButton,
-          {
-            key: language,
-            title: t("select_lng", { language }),
-            value: language
-          },
-          /* @__PURE__ */ React.createElement(React.Fragment, null, language)
-        );
-      })
-    ))
-  );
-};
-
-const UserSettingsAppearanceCard = () => {
-  const { isMobile } = useSidebarPinState();
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Appearance", variant: "gridItem" }, /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(UserSettingsThemeToggle, null), /* @__PURE__ */ React.createElement(UserSettingsLanguageToggle, null), !isMobile && /* @__PURE__ */ React.createElement(UserSettingsPinToggle, null)));
-};
-
-const Contents = () => {
-  const { backstageIdentity } = useUserProfile();
-  if (!backstageIdentity) {
-    return /* @__PURE__ */ React.createElement(Typography$1, null, "No Backstage Identity");
-  }
-  return /* @__PURE__ */ React.createElement(Grid$1, { container: true, spacing: 1 }, /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle1", gutterBottom: true }, "User Entity:", " ", /* @__PURE__ */ React.createElement(
-    EntityRefLinks,
-    {
-      entityRefs: [backstageIdentity.userEntityRef],
-      getTitle: (ref) => ref
-    }
-  ))), /* @__PURE__ */ React.createElement(Grid$1, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "subtitle1" }, "Ownership Entities:", " ", /* @__PURE__ */ React.createElement(
-    EntityRefLinks,
-    {
-      entityRefs: backstageIdentity.ownershipEntityRefs,
-      getTitle: (ref) => ref
-    }
-  ))));
-};
-const UserSettingsIdentityCard = () => /* @__PURE__ */ React.createElement(InfoCard, { title: "Backstage Identity" }, /* @__PURE__ */ React.createElement(Contents, null));
-
-const UserSettingsGeneral = () => {
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsProfileCard, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsAppearanceCard, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsIdentityCard, null)));
-};
-
-const LAYOUT_DATA_KEY = "plugin.user-settings.settingsLayout";
-const LAYOUT_ROUTE_DATA_KEY = "plugin.user-settings.settingsLayoutRoute";
-const Route = () => null;
-attachComponentData(Route, LAYOUT_ROUTE_DATA_KEY, true);
-attachComponentData(Route, "core.gatherMountPoints", true);
-const SettingsLayout = (props) => {
-  const { title, children } = props;
-  const { isMobile } = useSidebarPinState();
-  const routes = useElementFilter(
-    children,
-    (elements) => elements.selectByComponentData({
-      key: LAYOUT_ROUTE_DATA_KEY,
-      withStrictError: "Child of SettingsLayout must be an SettingsLayout.Route"
-    }).getElements().map((child) => child.props)
-  );
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, !isMobile && /* @__PURE__ */ React.createElement(Header, { title: title != null ? title : "Settings" }), /* @__PURE__ */ React.createElement(RoutedTabs, { routes }));
-};
-attachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);
-SettingsLayout.Route = Route;
-
-const DefaultSettingsPage = (props) => {
-  const { providerSettings, tabs } = props;
-  return /* @__PURE__ */ React.createElement(SettingsLayout, null, /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: "general", title: "General" }, /* @__PURE__ */ React.createElement(UserSettingsGeneral, null)), /* @__PURE__ */ React.createElement(
-    SettingsLayout.Route,
-    {
-      path: "auth-providers",
-      title: "Authentication Providers"
-    },
-    /* @__PURE__ */ React.createElement(UserSettingsAuthProviders, { providerSettings })
-  ), /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: "feature-flags", title: "Feature Flags" }, /* @__PURE__ */ React.createElement(UserSettingsFeatureFlags, null)), tabs);
-};
-
-const SettingsPage = (props) => {
-  const { providerSettings } = props;
-  const outlet = useOutlet();
-  const layout = useElementFilter(
-    outlet,
-    (elements) => elements.selectByComponentData({
-      key: LAYOUT_DATA_KEY
-    }).getElements()
-  );
-  const tabs = useElementFilter(
-    outlet,
-    (elements) => elements.selectByComponentData({
-      key: LAYOUT_ROUTE_DATA_KEY
-    }).getElements()
-  );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, layout.length !== 0 && layout || /* @__PURE__ */ React.createElement(DefaultSettingsPage, { tabs, providerSettings }));
-};
-
 const USER_SETTINGS_TAB_KEY = LAYOUT_ROUTE_DATA_KEY;
 const UserSettingsTab = (props) => /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: props.path, title: props.title }, /* @__PURE__ */ React.createElement(React.Fragment, null, "props.children"));
 attachComponentData(UserSettingsTab, USER_SETTINGS_TAB_KEY, "UserSettingsTab");
 
-export { DefaultProviderSettings, ProviderSettingsItem, SettingsPage as Router, Settings, SettingsLayout, USER_SETTINGS_TAB_KEY, UserSettingsAppearanceCard, UserSettingsAuthProviders, UserSettingsFeatureFlags, UserSettingsGeneral, UserSettingsIdentityCard, UserSettingsLanguageToggle, UserSettingsMenu, UserSettingsPage, UserSettingsPinToggle, UserSettingsProfileCard, UserSettingsSignInAvatar, UserSettingsStorage, UserSettingsTab, UserSettingsThemeToggle, userSettingsPlugin as plugin, useUserProfile, userSettingsPlugin };
+export { Settings, USER_SETTINGS_TAB_KEY, UserSettingsPage, UserSettingsStorage, UserSettingsTab, userSettingsPlugin as plugin, userSettingsPlugin };
 //# sourceMappingURL=index.esm.js.map