user-settings

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/user-settings/api-report.md

@@ -14,84 +14,56 @@ import { PropsWithChildren } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SessionApi } from '@backstage/core-plugin-api';
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "DefaultProviderSettings" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export const DefaultProviderSettings: ({
-  configuredProviders,
-}: Props_2) => JSX.Element;
+export const DefaultProviderSettings: (props: {
+  configuredProviders: string[];
+}) => JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "ProviderSettingsItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export const ProviderSettingsItem: ({
-  title,
-  description,
-  icon: Icon,
-  apiRef,
-}: Props_3) => JSX.Element;
+export const ProviderSettingsItem: (props: {
+  title: string;
+  description: string;
+  icon: IconComponent;
+  apiRef: ApiRef<SessionApi>;
+}) => JSX.Element;
 
 // @public (undocumented)
 export const Router: (props: { providerSettings?: JSX.Element }) => JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "SettingsProps" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "Settings" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export const Settings: (props: SettingsProps) => JSX.Element;
+export const Settings: (props: { icon?: IconComponent }) => JSX.Element;
 
 // @public (undocumented)
 export const USER_SETTINGS_TAB_KEY = 'user-settings.tab';
 
-// Warning: (ae-missing-release-tag) "UserSettingsAppearanceCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsAppearanceCard: () => JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "UserSettingsAuthProviders" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export const UserSettingsAuthProviders: ({
-  providerSettings,
-}: Props) => JSX.Element;
+export const UserSettingsAuthProviders: (props: {
+  providerSettings?: JSX.Element;
+}) => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsFeatureFlags" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsFeatureFlags: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsGeneral" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsGeneral: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsIdentityCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsIdentityCard: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsMenu" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsMenu: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsPage: (props: {
   providerSettings?: JSX.Element | undefined;
 }) => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "UserSettingsPinToggle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsPinToggle: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "userSettingsPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 const userSettingsPlugin: BackstagePlugin<
   {
@@ -103,16 +75,13 @@ const userSettingsPlugin: BackstagePlugin<
 export { userSettingsPlugin as plugin };
 export { userSettingsPlugin };
 
-// Warning: (ae-missing-release-tag) "UserSettingsProfileCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsProfileCard: () => JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "UserSettingsSignInAvatar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
-export const UserSettingsSignInAvatar: ({ size }: Props_4) => JSX.Element;
+export const UserSettingsSignInAvatar: (props: {
+  size?: number;
+}) => JSX.Element;
 
 // @public
 export const UserSettingsTab: (props: UserSettingsTabProps) => JSX.Element;
@@ -123,13 +92,9 @@ export type UserSettingsTabProps = PropsWithChildren<{
   title: string;
 }>;
 
-// Warning: (ae-missing-release-tag) "UserSettingsThemeToggle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const UserSettingsThemeToggle: () => JSX.Element;
 
-// Warning: (ae-missing-release-tag) "useUserProfile" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public (undocumented)
 export const useUserProfile: () =>
   | {

plugins/user-settings/src/components/AuthProviders/DefaultProviderSettings.tsx

@@ -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}
-      />
-    )}
-  </>
-);

plugins/user-settings/src/components/AuthProviders/ProviderSettingsItem.tsx

@@ -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);
 

plugins/user-settings/src/components/AuthProviders/UserSettingsAuthProviders.tsx

@@ -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() || [];

plugins/user-settings/src/components/FeatureFlags/UserSettingsFeatureFlags.tsx

@@ -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();

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -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();
 

plugins/user-settings/src/components/General/UserSettingsGeneral.tsx

@@ -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}>

plugins/user-settings/src/components/General/UserSettingsIdentityCard.tsx

@@ -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();
 

plugins/user-settings/src/components/General/UserSettingsMenu.tsx

@@ -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);

plugins/user-settings/src/components/General/UserSettingsPinToggle.tsx

@@ -24,6 +24,7 @@ import {
 } from '@material-ui/core';
 import { useSidebarPinState } from '@backstage/core-components';
 
+/** @public */
 export const UserSettingsPinToggle = () => {
   const { isPinned, toggleSidebarPinState } = useSidebarPinState();
 

plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx

@@ -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();
 

plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx

@@ -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();

plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx

@@ -97,6 +97,7 @@ const TooltipToggleButton = ({
   </Tooltip>
 );
 
+/** @public */
 export const UserSettingsThemeToggle = () => {
   const classes = useStyles();
   const appThemeApi = useApi(appThemeApiRef);

plugins/user-settings/src/components/Settings.tsx

@@ -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} />;

plugins/user-settings/src/components/UserSettingsTab/index.ts

@@ -13,4 +13,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export * from './UserSettingsTab';

plugins/user-settings/src/components/index.ts

@@ -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';

plugins/user-settings/src/components/useUserProfileInfo.ts

@@ -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);

plugins/user-settings/src/plugin.ts

@@ -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',