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

package/dist/esm/SettingsPage-f863b932.esm.js

@@ -0,0 +1,756 @@
+import { useOutlet } from 'react-router-dom';
+import React, { useState, useEffect, useCallback, cloneElement } from 'react';
+import { Typography, Button, makeStyles, Avatar, ListItem, ListItemIcon, ListItemText, Tooltip, Grid, ListItemSecondaryAction, List, Switch, TextField, IconButton, Menu, MenuItem } from '@material-ui/core';
+import { EmptyState, CodeSnippet, sidebarConfig, InfoCard, useSidebarPinState, Page, Header, RoutedTabs } from '@backstage/core-components';
+import Star from '@material-ui/icons/Star';
+import { 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 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 './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';
+
+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 }));
+};
+
+export { DefaultProviderSettings as D, LAYOUT_ROUTE_DATA_KEY as L, ProviderSettingsItem as P, SettingsLayout as S, UserSettingsAuthProviders as U, SettingsPage as a, UserSettingsGeneral as b, UserSettingsProfileCard as c, UserSettingsMenu as d, UserSettingsSignInAvatar as e, UserSettingsAppearanceCard as f, UserSettingsThemeToggle as g, UserSettingsPinToggle as h, UserSettingsIdentityCard as i, UserSettingsLanguageToggle as j, UserSettingsFeatureFlags as k, useUserProfile as u };
+//# sourceMappingURL=SettingsPage-f863b932.esm.js.map