user-settings

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
2022-08-19 12:10:03 +02:00
parent cd819fc015
commit d467b7e332
19 changed files with 120 additions and 143 deletions
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import Star from '@material-ui/icons/Star';
 import React from 'react';
 import { ProviderSettingsItem } from './ProviderSettingsItem';
@@ -27,75 +28,77 @@ import {
  oneloginAuthApiRef,
 } from '@backstage/core-plugin-api';

-type Props = {
+/** @public */
+export const DefaultProviderSettings = (props: {
  configuredProviders: string[];
+}) => {
+  const { configuredProviders } = props;
+  return (
+    <>
+      {configuredProviders.includes('google') && (
+        <ProviderSettingsItem
+          title="Google"
+          description="Provides authentication towards Google APIs and identities"
+          apiRef={googleAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('microsoft') && (
+        <ProviderSettingsItem
+          title="Microsoft"
+          description="Provides authentication towards Microsoft APIs and identities"
+          apiRef={microsoftAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('github') && (
+        <ProviderSettingsItem
+          title="GitHub"
+          description="Provides authentication towards GitHub APIs"
+          apiRef={githubAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('gitlab') && (
+        <ProviderSettingsItem
+          title="GitLab"
+          description="Provides authentication towards GitLab APIs"
+          apiRef={gitlabAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('okta') && (
+        <ProviderSettingsItem
+          title="Okta"
+          description="Provides authentication towards Okta APIs"
+          apiRef={oktaAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('bitbucket') && (
+        <ProviderSettingsItem
+          title="Bitbucket"
+          description="Provides authentication towards Bitbucket APIs"
+          apiRef={bitbucketAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('onelogin') && (
+        <ProviderSettingsItem
+          title="OneLogin"
+          description="Provides authentication towards OneLogin APIs"
+          apiRef={oneloginAuthApiRef}
+          icon={Star}
+        />
+      )}
+      {configuredProviders.includes('atlassian') && (
+        <ProviderSettingsItem
+          title="Atlassian"
+          description="Provides authentication towards Atlassian APIs"
+          apiRef={atlassianAuthApiRef}
+          icon={Star}
+        />
+      )}
+    </>
+  );
 };
-
-export const DefaultProviderSettings = ({ configuredProviders }: Props) => (
-  <>
-    {configuredProviders.includes('google') && (
-      <ProviderSettingsItem
-        title="Google"
-        description="Provides authentication towards Google APIs and identities"
-        apiRef={googleAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('microsoft') && (
-      <ProviderSettingsItem
-        title="Microsoft"
-        description="Provides authentication towards Microsoft APIs and identities"
-        apiRef={microsoftAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('github') && (
-      <ProviderSettingsItem
-        title="GitHub"
-        description="Provides authentication towards GitHub APIs"
-        apiRef={githubAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('gitlab') && (
-      <ProviderSettingsItem
-        title="GitLab"
-        description="Provides authentication towards GitLab APIs"
-        apiRef={gitlabAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('okta') && (
-      <ProviderSettingsItem
-        title="Okta"
-        description="Provides authentication towards Okta APIs"
-        apiRef={oktaAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('bitbucket') && (
-      <ProviderSettingsItem
-        title="Bitbucket"
-        description="Provides authentication towards Bitbucket APIs"
-        apiRef={bitbucketAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('onelogin') && (
-      <ProviderSettingsItem
-        title="OneLogin"
-        description="Provides authentication towards OneLogin APIs"
-        apiRef={oneloginAuthApiRef}
-        icon={Star}
-      />
-    )}
-    {configuredProviders.includes('atlassian') && (
-      <ProviderSettingsItem
-        title="Atlassian"
-        description="Provides authentication towards Atlassian APIs"
-        apiRef={atlassianAuthApiRef}
-        icon={Star}
-      />
-    )}
-  </>
-);
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import React, { useEffect, useState } from 'react';
 import {
  Button,
@@ -30,19 +31,15 @@ import {
  SessionState,
 } from '@backstage/core-plugin-api';

-type Props = {
+/** @public */
+export const ProviderSettingsItem = (props: {
  title: string;
  description: string;
  icon: IconComponent;
  apiRef: ApiRef<SessionApi>;
-};
+}) => {
+  const { title, description, icon: Icon, apiRef } = props;

-export const ProviderSettingsItem = ({
-  title,
-  description,
-  icon: Icon,
-  apiRef,
-}: Props) => {
  const api = useApi(apiRef);
  const [signedIn, setSignedIn] = useState(false);

@@ -18,15 +18,14 @@ import React from 'react';
 import { List } from '@material-ui/core';
 import { EmptyProviders } from './EmptyProviders';
 import { DefaultProviderSettings } from './DefaultProviderSettings';
-
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';

-type Props = {
+/** @public */
+export const UserSettingsAuthProviders = (props: {
  providerSettings?: JSX.Element;
-};
-
-export const UserSettingsAuthProviders = ({ providerSettings }: Props) => {
+}) => {
+  const { providerSettings } = props;
  const configApi = useApi(configApiRef);
  const providersConfig = configApi.getOptionalConfig('auth.providers');
  const configuredProviders = providersConfig?.keys() || [];
@@ -24,7 +24,6 @@ import {
 } from '@material-ui/core';
 import { EmptyFlags } from './EmptyFlags';
 import { FlagItem } from './FeatureFlagsItem';
-
 import {
  featureFlagsApiRef,
  FeatureFlagState,
@@ -33,6 +32,7 @@ import {
 import { InfoCard } from '@backstage/core-components';
 import ClearIcon from '@material-ui/icons/Clear';

+/** @public */
 export const UserSettingsFeatureFlags = () => {
  const featureFlagsApi = useApi(featureFlagsApiRef);
  const featureFlags = featureFlagsApi.getRegisteredFlags();
@@ -13,12 +13,14 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import { InfoCard, useSidebarPinState } from '@backstage/core-components';
 import { List } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';

+/** @public */
 export const UserSettingsAppearanceCard = () => {
  const { isMobile } = useSidebarPinState();

@@ -13,12 +13,14 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 import { UserSettingsIdentityCard } from './UserSettingsIdentityCard';

+/** @public */
 export const UserSettingsGeneral = () => {
  return (
    <Grid container direction="row" spacing={3}>
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import { InfoCard } from '@backstage/core-components';
 import React from 'react';
 import { useUserProfile } from '../useUserProfileInfo';
@@ -20,6 +21,7 @@ import Chip from '@material-ui/core/Chip';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';

+/** @public */
 export const UserSettingsIdentityCard = () => {
  const { backstageIdentity } = useUserProfile();

@@ -20,6 +20,7 @@ import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';

+/** @public */
 export const UserSettingsMenu = () => {
  const identityApi = useApi(identityApiRef);
  const [open, setOpen] = React.useState(false);
@@ -24,6 +24,7 @@ import {
 } from '@material-ui/core';
 import { useSidebarPinState } from '@backstage/core-components';

+/** @public */
 export const UserSettingsPinToggle = () => {
  const { isPinned, toggleSidebarPinState } = useSidebarPinState();

@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import { Grid, Typography } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
@@ -20,6 +21,7 @@ import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from '../useUserProfileInfo';
 import { InfoCard } from '@backstage/core-components';

+/** @public */
 export const UserSettingsProfileCard = () => {
  const { profile, displayName } = useUserProfile();

@@ -29,9 +29,10 @@ const useStyles = makeStyles<BackstageTheme, { size: number }>(theme => ({
  },
 }));

-type Props = { size?: number };
+/** @public */
+export const UserSettingsSignInAvatar = (props: { size?: number }) => {
+  const { size } = props;

-export const UserSettingsSignInAvatar = ({ size }: Props) => {
  const { iconSize } = sidebarConfig;
  const classes = useStyles(size ? { size } : { size: iconSize });
  const { profile } = useUserProfile();
@@ -97,6 +97,7 @@ const TooltipToggleButton = ({
  </Tooltip>
 );

+/** @public */
 export const UserSettingsThemeToggle = () => {
  const classes = useStyles();
  const appThemeApi = useApi(appThemeApiRef);
@@ -20,11 +20,8 @@ import { settingsRouteRef } from '../plugin';
 import { SidebarItem } from '@backstage/core-components';
 import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';

-type SettingsProps = {
-  icon?: IconComponent;
-};
-
-export const Settings = (props: SettingsProps) => {
+/** @public */
+export const Settings = (props: { icon?: IconComponent }) => {
  const routePath = useRouteRef(settingsRouteRef);
  const Icon = props.icon ? props.icon : SettingsIcon;
  return <SidebarItem text="Settings" to={routePath()} icon={Icon} />;
@@ -13,4 +13,5 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 export * from './UserSettingsTab';
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 export { Settings } from './Settings';
 export { SettingsPage as Router } from './SettingsPage';
 export * from './AuthProviders';
@@ -23,6 +23,7 @@ import {
 import { useEffect } from 'react';
 import useAsync from 'react-use/lib/useAsync';

+/** @public */
 export const useUserProfile = () => {
  const identityApi = useApi(identityApiRef);
  const alertApi = useApi(alertApiRef);
@@ -24,6 +24,7 @@ export const settingsRouteRef = createRouteRef({
  id: 'user-settings',
 });

+/** @public */
 export const userSettingsPlugin = createPlugin({
  id: 'user-settings',
  routes: {
@@ -31,6 +32,7 @@ export const userSettingsPlugin = createPlugin({
  },
 });

+/** @public */
 export const UserSettingsPage = userSettingsPlugin.provide(
  createRoutableExtension({
    name: 'UserSettingsPage',