@backstage/plugin-user-settings 0.8.21-next.2 → 0.8.22-next.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @backstage/plugin-user-settings
 
+## 0.8.22-next.0
+
+### Patch Changes
+
+- a7bfdb6: plugin-user-settingsgs support i18n
+- Updated dependencies
+  - @backstage/core-compat-api@0.4.2-next.0
+  - @backstage/plugin-catalog-react@1.18.0-next.0
+  - @backstage/catalog-model@1.7.3
+  - @backstage/core-app-api@1.16.1
+  - @backstage/core-components@0.17.1
+  - @backstage/core-plugin-api@1.10.6
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-plugin-api@0.10.1
+  - @backstage/theme@0.6.5
+  - @backstage/types@1.2.1
+  - @backstage/plugin-signals-react@0.0.12
+  - @backstage/plugin-user-settings-common@0.0.1
+
+## 0.8.21
+
+### Patch Changes
+
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.17.0
+  - @backstage/frontend-plugin-api@0.10.1
+  - @backstage/core-compat-api@0.4.1
+  - @backstage/core-components@0.17.1
+  - @backstage/core-plugin-api@1.10.6
+  - @backstage/core-app-api@1.16.1
+  - @backstage/theme@0.6.5
+  - @backstage/catalog-model@1.7.3
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/plugin-signals-react@0.0.12
+  - @backstage/plugin-user-settings-common@0.0.1
+
 ## 0.8.21-next.2
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -5,6 +5,18 @@ import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/al
 
 /** @alpha */
 declare const userSettingsTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"user-settings", {
+    readonly "featureFlags.title": "Feature Flags";
+    readonly "featureFlags.description": "Please refresh the page when toggling feature flags";
+    readonly "featureFlags.filterTitle": "Filter";
+    readonly "featureFlags.clearFilter": "Clear filter";
+    readonly "featureFlags.emptyFlags.title": "No Feature Flags";
+    readonly "featureFlags.emptyFlags.action.title": "An example for how to add a feature flag is highlighted below:";
+    readonly "featureFlags.emptyFlags.action.readMoreButtonTitle": "Read More";
+    readonly "featureFlags.emptyFlags.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.";
+    readonly "featureFlags.flagItem.title.disable": "Disable";
+    readonly "featureFlags.flagItem.title.enable": "Enable";
+    readonly "featureFlags.flagItem.subtitle.registeredInApplication": "Registered in the application";
+    readonly "featureFlags.flagItem.subtitle.registeredInPlugin": "Registered in {{pluginId}} plugin";
     readonly "languageToggle.select": "Select language {{language}}";
     readonly "languageToggle.title": "Language";
     readonly "languageToggle.description": "Change the language";
@@ -15,6 +27,32 @@ declare const userSettingsTranslationRef: _backstage_core_plugin_api_alpha.Trans
     readonly "themeToggle.names.dark": "Dark";
     readonly "themeToggle.names.light": "Light";
     readonly "themeToggle.selectAuto": "Select Auto Theme";
+    readonly "signOutMenu.title": "Sign Out";
+    readonly "signOutMenu.moreIconTitle": "more";
+    readonly "pinToggle.title": "Pin Sidebar";
+    readonly "pinToggle.description": "Prevent the sidebar from collapsing";
+    readonly "pinToggle.ariaLabelTitle": "Pin Sidebar Switch";
+    readonly "pinToggle.switchTitles.unpin": "Unpin Sidebar";
+    readonly "pinToggle.switchTitles.pin": "Pin Sidebar";
+    readonly "identityCard.title": "Backstage Identity";
+    readonly "identityCard.noIdentityTitle": "No Backstage Identity";
+    readonly "identityCard.userEntity": "User Entity";
+    readonly "identityCard.ownershipEntities": "Ownership Entities";
+    readonly "defaultProviderSettings.description": "Provides authentication towards {{provider}} APIs and identities";
+    readonly "emptyProviders.title": "No Authentication Providers";
+    readonly "emptyProviders.action.title": "Open app-config.yaml and make the changes as highlighted below:";
+    readonly "emptyProviders.action.readMoreButtonTitle": "Read More";
+    readonly "emptyProviders.description": "You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.";
+    readonly "providerSettingsItem.title.signIn": "Sign in to {{title}}";
+    readonly "providerSettingsItem.title.signOut": "Sign out from {{title}}";
+    readonly "providerSettingsItem.buttonTitle.signIn": "Sign in";
+    readonly "providerSettingsItem.buttonTitle.signOut": "Sign out";
+    readonly "authProviders.title": "Available Providers";
+    readonly "defaultSettingsPage.tabsTitle.featureFlags": "Feature Flags";
+    readonly "defaultSettingsPage.tabsTitle.authProviders": "Authentication Providers";
+    readonly "defaultSettingsPage.tabsTitle.general": "General";
+    readonly "settingsLayout.title": "Settings";
+    readonly sidebarTitle: "Settings";
 }>;
 
 /** @alpha */

package/dist/components/AuthProviders/DefaultProviderSettings.esm.js

@@ -2,15 +2,20 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Star from '@material-ui/icons/Star';
 import { ProviderSettingsItem } from './ProviderSettingsItem.esm.js';
 import { googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, gitlabAuthApiRef, oktaAuthApiRef, bitbucketAuthApiRef, oneloginAuthApiRef, atlassianAuthApiRef, bitbucketServerAuthApiRef } from '@backstage/core-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 
 const DefaultProviderSettings = (props) => {
   const { configuredProviders } = props;
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     configuredProviders.includes("google") && /* @__PURE__ */ jsx(
       ProviderSettingsItem,
       {
         title: "Google",
-        description: "Provides authentication towards Google APIs and identities",
+        description: t("defaultProviderSettings.description", {
+          provider: "Google"
+        }),
         apiRef: googleAuthApiRef,
         icon: Star
       }
@@ -19,7 +24,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "Microsoft",
-        description: "Provides authentication towards Microsoft APIs and identities",
+        description: t("defaultProviderSettings.description", {
+          provider: "Microsoft"
+        }),
         apiRef: microsoftAuthApiRef,
         icon: Star
       }
@@ -28,7 +35,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "GitHub",
-        description: "Provides authentication towards GitHub APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "GitHub"
+        }),
         apiRef: githubAuthApiRef,
         icon: Star
       }
@@ -37,7 +46,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "GitLab",
-        description: "Provides authentication towards GitLab APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "GitLab"
+        }),
         apiRef: gitlabAuthApiRef,
         icon: Star
       }
@@ -46,7 +57,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "Okta",
-        description: "Provides authentication towards Okta APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "Okta"
+        }),
         apiRef: oktaAuthApiRef,
         icon: Star
       }
@@ -55,7 +68,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "Bitbucket",
-        description: "Provides authentication towards Bitbucket APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "Bitbucket"
+        }),
         apiRef: bitbucketAuthApiRef,
         icon: Star
       }
@@ -64,7 +79,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "OneLogin",
-        description: "Provides authentication towards OneLogin APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "OneLogin"
+        }),
         apiRef: oneloginAuthApiRef,
         icon: Star
       }
@@ -73,7 +90,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "Atlassian",
-        description: "Provides authentication towards Atlassian APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "Atlassian"
+        }),
         apiRef: atlassianAuthApiRef,
         icon: Star
       }
@@ -82,7 +101,9 @@ const DefaultProviderSettings = (props) => {
       ProviderSettingsItem,
       {
         title: "Bitbucket Server",
-        description: "Provides authentication towards Bitbucket Server APIs",
+        description: t("defaultProviderSettings.description", {
+          provider: "Bitbucket Server"
+        }),
         apiRef: bitbucketServerAuthApiRef,
         icon: Star
       }

package/dist/components/AuthProviders/DefaultProviderSettings.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultProviderSettings.esm.js","sources":["../../../src/components/AuthProviders/DefaultProviderSettings.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Star from '@material-ui/icons/Star';\nimport { ProviderSettingsItem } from './ProviderSettingsItem';\nimport {\n  githubAuthApiRef,\n  gitlabAuthApiRef,\n  googleAuthApiRef,\n  oktaAuthApiRef,\n  microsoftAuthApiRef,\n  bitbucketAuthApiRef,\n  bitbucketServerAuthApiRef,\n  atlassianAuthApiRef,\n  oneloginAuthApiRef,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport const DefaultProviderSettings = (props: {\n  configuredProviders: string[];\n}) => {\n  const { configuredProviders } = props;\n  return (\n    <>\n      {configuredProviders.includes('google') && (\n        <ProviderSettingsItem\n          title=\"Google\"\n          description=\"Provides authentication towards Google APIs and identities\"\n          apiRef={googleAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('microsoft') && (\n        <ProviderSettingsItem\n          title=\"Microsoft\"\n          description=\"Provides authentication towards Microsoft APIs and identities\"\n          apiRef={microsoftAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('github') && (\n        <ProviderSettingsItem\n          title=\"GitHub\"\n          description=\"Provides authentication towards GitHub APIs\"\n          apiRef={githubAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('gitlab') && (\n        <ProviderSettingsItem\n          title=\"GitLab\"\n          description=\"Provides authentication towards GitLab APIs\"\n          apiRef={gitlabAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('okta') && (\n        <ProviderSettingsItem\n          title=\"Okta\"\n          description=\"Provides authentication towards Okta APIs\"\n          apiRef={oktaAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('bitbucket') && (\n        <ProviderSettingsItem\n          title=\"Bitbucket\"\n          description=\"Provides authentication towards Bitbucket APIs\"\n          apiRef={bitbucketAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('onelogin') && (\n        <ProviderSettingsItem\n          title=\"OneLogin\"\n          description=\"Provides authentication towards OneLogin APIs\"\n          apiRef={oneloginAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('atlassian') && (\n        <ProviderSettingsItem\n          title=\"Atlassian\"\n          description=\"Provides authentication towards Atlassian APIs\"\n          apiRef={atlassianAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('bitbucketServer') && (\n        <ProviderSettingsItem\n          title=\"Bitbucket Server\"\n          description=\"Provides authentication towards Bitbucket Server APIs\"\n          apiRef={bitbucketServerAuthApiRef}\n          icon={Star}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AA+Ba,MAAA,uBAAA,GAA0B,CAAC,KAElC,KAAA;AACJ,EAAM,MAAA,EAAE,qBAAwB,GAAA,KAAA;AAChC,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAoB,mBAAA,CAAA,QAAA,CAAS,QAAQ,CACpC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,QAAA;AAAA,QACN,WAAY,EAAA,4DAAA;AAAA,QACZ,MAAQ,EAAA,gBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,WAAW,CACvC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,WAAY,EAAA,+DAAA;AAAA,QACZ,MAAQ,EAAA,mBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,QAAQ,CACpC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,QAAA;AAAA,QACN,WAAY,EAAA,6CAAA;AAAA,QACZ,MAAQ,EAAA,gBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,QAAQ,CACpC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,QAAA;AAAA,QACN,WAAY,EAAA,6CAAA;AAAA,QACZ,MAAQ,EAAA,gBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,MAAM,CAClC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,MAAA;AAAA,QACN,WAAY,EAAA,2CAAA;AAAA,QACZ,MAAQ,EAAA,cAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,WAAW,CACvC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,WAAY,EAAA,gDAAA;AAAA,QACZ,MAAQ,EAAA,mBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,UAAU,CACtC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,UAAA;AAAA,QACN,WAAY,EAAA,+CAAA;AAAA,QACZ,MAAQ,EAAA,kBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,WAAW,CACvC,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,WAAA;AAAA,QACN,WAAY,EAAA,gDAAA;AAAA,QACZ,MAAQ,EAAA,mBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA,KACR;AAAA,IAED,mBAAA,CAAoB,QAAS,CAAA,iBAAiB,CAC7C,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,kBAAA;AAAA,QACN,WAAY,EAAA,uDAAA;AAAA,QACZ,MAAQ,EAAA,yBAAA;AAAA,QACR,IAAM,EAAA;AAAA;AAAA;AACR,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultProviderSettings.esm.js","sources":["../../../src/components/AuthProviders/DefaultProviderSettings.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Star from '@material-ui/icons/Star';\nimport { ProviderSettingsItem } from './ProviderSettingsItem';\nimport {\n  githubAuthApiRef,\n  gitlabAuthApiRef,\n  googleAuthApiRef,\n  oktaAuthApiRef,\n  microsoftAuthApiRef,\n  bitbucketAuthApiRef,\n  bitbucketServerAuthApiRef,\n  atlassianAuthApiRef,\n  oneloginAuthApiRef,\n} from '@backstage/core-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @public */\nexport const DefaultProviderSettings = (props: {\n  configuredProviders: string[];\n}) => {\n  const { configuredProviders } = props;\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n  return (\n    <>\n      {configuredProviders.includes('google') && (\n        <ProviderSettingsItem\n          title=\"Google\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Google',\n          })}\n          apiRef={googleAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('microsoft') && (\n        <ProviderSettingsItem\n          title=\"Microsoft\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Microsoft',\n          })}\n          apiRef={microsoftAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('github') && (\n        <ProviderSettingsItem\n          title=\"GitHub\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'GitHub',\n          })}\n          apiRef={githubAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('gitlab') && (\n        <ProviderSettingsItem\n          title=\"GitLab\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'GitLab',\n          })}\n          apiRef={gitlabAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('okta') && (\n        <ProviderSettingsItem\n          title=\"Okta\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Okta',\n          })}\n          apiRef={oktaAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('bitbucket') && (\n        <ProviderSettingsItem\n          title=\"Bitbucket\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Bitbucket',\n          })}\n          apiRef={bitbucketAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('onelogin') && (\n        <ProviderSettingsItem\n          title=\"OneLogin\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'OneLogin',\n          })}\n          apiRef={oneloginAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('atlassian') && (\n        <ProviderSettingsItem\n          title=\"Atlassian\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Atlassian',\n          })}\n          apiRef={atlassianAuthApiRef}\n          icon={Star}\n        />\n      )}\n      {configuredProviders.includes('bitbucketServer') && (\n        <ProviderSettingsItem\n          title=\"Bitbucket Server\"\n          description={t('defaultProviderSettings.description', {\n            provider: 'Bitbucket Server',\n          })}\n          apiRef={bitbucketServerAuthApiRef}\n          icon={Star}\n        />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AuthProviders/EmptyProviders.esm.js

@@ -2,6 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import { EmptyState, CodeSnippet } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const EXAMPLE = `auth:
   providers:
@@ -10,40 +12,39 @@ const EXAMPLE = `auth:
         clientId: \${AUTH_GOOGLE_CLIENT_ID}
         clientSecret: \${AUTH_GOOGLE_CLIENT_SECRET}
 `;
-const EmptyProviders = () => /* @__PURE__ */ jsx(
-  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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
-        "Open ",
-        /* @__PURE__ */ jsx("code", { children: "app-config.yaml" }),
-        " and make the changes as highlighted below:"
-      ] }),
-      /* @__PURE__ */ jsx(
-        CodeSnippet,
-        {
-          text: EXAMPLE,
-          language: "yaml",
-          showLineNumbers: true,
-          highlightedNumbers: [3, 4, 5, 6, 7, 8],
-          customStyle: { background: "inherit", fontSize: "115%" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "contained",
-          color: "primary",
-          href: "https://backstage.io/docs/auth/add-auth-provider",
-          children: "Read More"
-        }
-      )
-    ] })
-  }
-);
+const EmptyProviders = () => {
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      missing: "content",
+      title: t("emptyProviders.title"),
+      description: t("emptyProviders.description"),
+      action: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("emptyProviders.action.title") }),
+        /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            text: EXAMPLE,
+            language: "yaml",
+            showLineNumbers: true,
+            highlightedNumbers: [3, 4, 5, 6, 7, 8],
+            customStyle: { background: "inherit", fontSize: "115%" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            href: "https://backstage.io/docs/auth/add-auth-provider",
+            children: t("emptyProviders.action.readMoreButtonTitle")
+          }
+        )
+      ] })
+    }
+  );
+};
 
 export { EmptyProviders };
 //# sourceMappingURL=EmptyProviders.esm.js.map

package/dist/components/AuthProviders/EmptyProviders.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyProviders.esm.js","sources":["../../../src/components/AuthProviders/EmptyProviders.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\n\nconst EXAMPLE = `auth:\n  providers:\n    google:\n      development:\n        clientId: \\${AUTH_GOOGLE_CLIENT_ID}\n        clientSecret: \\${AUTH_GOOGLE_CLIENT_SECRET}\n`;\n\nexport const EmptyProviders = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Authentication Providers\"\n    description=\"You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          Open <code>app-config.yaml</code> and make the changes as highlighted\n          below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"yaml\"\n          showLineNumbers\n          highlightedNumbers={[3, 4, 5, 6, 7, 8]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/auth/add-auth-provider\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,OAAU,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAQT,MAAM,iBAAiB,sBAC5B,GAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACC,OAAQ,EAAA,SAAA;AAAA,IACR,KAAM,EAAA,6BAAA;AAAA,IACN,WAAY,EAAA,qHAAA;AAAA,IACZ,wBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OAAQ,EAAA,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACrB,GAAA,CAAC,UAAK,QAAe,EAAA,iBAAA,EAAA,CAAA;AAAA,QAAO;AAAA,OAEnC,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAM,EAAA,OAAA;AAAA,UACN,QAAS,EAAA,MAAA;AAAA,UACT,eAAe,EAAA,IAAA;AAAA,UACf,oBAAoB,CAAC,CAAA,EAAG,GAAG,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,UACrC,WAAa,EAAA,EAAE,UAAY,EAAA,SAAA,EAAW,UAAU,MAAO;AAAA;AAAA,OACzD;AAAA,sBACA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,KAAM,EAAA,SAAA;AAAA,UACN,IAAK,EAAA,kDAAA;AAAA,UACN,QAAA,EAAA;AAAA;AAAA;AAED,KACF,EAAA;AAAA;AAEJ;;;;"}
+{"version":3,"file":"EmptyProviders.esm.js","sources":["../../../src/components/AuthProviders/EmptyProviders.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\nimport { CodeSnippet, EmptyState } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\nconst EXAMPLE = `auth:\n  providers:\n    google:\n      development:\n        clientId: \\${AUTH_GOOGLE_CLIENT_ID}\n        clientSecret: \\${AUTH_GOOGLE_CLIENT_SECRET}\n`;\n\nexport const EmptyProviders = () => {\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n  return (\n    <EmptyState\n      missing=\"content\"\n      title={t('emptyProviders.title')}\n      description={t('emptyProviders.description')}\n      action={\n        <>\n          <Typography variant=\"body1\">\n            {t('emptyProviders.action.title')}\n          </Typography>\n          <CodeSnippet\n            text={EXAMPLE}\n            language=\"yaml\"\n            showLineNumbers\n            highlightedNumbers={[3, 4, 5, 6, 7, 8]}\n            customStyle={{ background: 'inherit', fontSize: '115%' }}\n          />\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            href=\"https://backstage.io/docs/auth/add-auth-provider\"\n          >\n            {t('emptyProviders.action.readMoreButtonTitle')}\n          </Button>\n        </>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,OAAU,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAQT,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,SAAA;AAAA,MACR,KAAA,EAAO,EAAE,sBAAsB,CAAA;AAAA,MAC/B,WAAA,EAAa,EAAE,4BAA4B,CAAA;AAAA,MAC3C,wBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAClC,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,OAAA;AAAA,YACN,QAAS,EAAA,MAAA;AAAA,YACT,eAAe,EAAA,IAAA;AAAA,YACf,oBAAoB,CAAC,CAAA,EAAG,GAAG,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,YACrC,WAAa,EAAA,EAAE,UAAY,EAAA,SAAA,EAAW,UAAU,MAAO;AAAA;AAAA,SACzD;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,WAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,IAAK,EAAA,kDAAA;AAAA,YAEJ,YAAE,2CAA2C;AAAA;AAAA;AAChD,OACF,EAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/AuthProviders/ProviderSettingsItem.esm.js

@@ -10,6 +10,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import { useApi, errorApiRef, SessionState } from '@backstage/core-plugin-api';
 import { ProviderSettingsAvatar } from './ProviderSettingsAvatar.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const emptyProfile = {};
 const ProviderSettingsItem = (props) => {
@@ -18,6 +20,7 @@ const ProviderSettingsItem = (props) => {
   const errorApi = useApi(errorApiRef);
   const [signedIn, setSignedIn] = useState(false);
   const [profile, setProfile] = useState(emptyProfile);
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   useEffect(() => {
     let didCancel = false;
     const subscription = api.sessionState$().subscribe((sessionState) => {
@@ -73,7 +76,7 @@ const ProviderSettingsItem = (props) => {
       {
         placement: "top",
         arrow: true,
-        title: signedIn ? `Sign out from ${title}` : `Sign in to ${title}`,
+        title: signedIn ? t("providerSettingsItem.title.signOut", { title }) : t("providerSettingsItem.title.signIn", { title }),
         children: /* @__PURE__ */ jsx(
           Button,
           {
@@ -83,7 +86,7 @@ const ProviderSettingsItem = (props) => {
               const action = signedIn ? api.signOut() : api.signIn();
               action.catch((error) => errorApi.post(error));
             },
-            children: signedIn ? `Sign out` : `Sign in`
+            children: signedIn ? t("providerSettingsItem.buttonTitle.signOut") : t("providerSettingsItem.buttonTitle.signIn")
           }
         )
       }

package/dist/components/AuthProviders/ProviderSettingsItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderSettingsItem.esm.js","sources":["../../../src/components/AuthProviders/ProviderSettingsItem.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useState } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  ApiRef,\n  SessionApi,\n  SessionState,\n  ProfileInfoApi,\n  ProfileInfo,\n  useApi,\n  errorApiRef,\n  IconComponent,\n} from '@backstage/core-plugin-api';\nimport { ProviderSettingsAvatar } from './ProviderSettingsAvatar';\n\nconst emptyProfile: ProfileInfo = {};\n\n/** @public */\nexport const ProviderSettingsItem = (props: {\n  title: string;\n  description: string;\n  icon: IconComponent;\n  apiRef: ApiRef<ProfileInfoApi & SessionApi>;\n}) => {\n  const { title, description, icon: Icon, apiRef } = props;\n\n  const api = useApi(apiRef);\n  const errorApi = useApi(errorApiRef);\n  const [signedIn, setSignedIn] = useState(false);\n  const [profile, setProfile] = useState<ProfileInfo>(emptyProfile);\n\n  useEffect(() => {\n    let didCancel = false;\n\n    const subscription = api\n      .sessionState$()\n      .subscribe((sessionState: SessionState) => {\n        if (sessionState !== SessionState.SignedIn) {\n          setProfile(emptyProfile);\n          setSignedIn(false);\n        }\n        if (!didCancel) {\n          api\n            .getProfile({ optional: true })\n            .then((profileResponse: ProfileInfo | undefined) => {\n              if (!didCancel) {\n                if (sessionState === SessionState.SignedIn) {\n                  setSignedIn(true);\n                }\n                if (profileResponse) {\n                  setProfile(profileResponse);\n                }\n              }\n            });\n        }\n      });\n\n    return () => {\n      didCancel = true;\n      subscription.unsubscribe();\n    };\n  }, [api]);\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Icon />\n      </ListItemIcon>\n      <ListItemText\n        primary={title}\n        secondary={\n          <Tooltip placement=\"top\" arrow title={description}>\n            <Grid container spacing={6}>\n              <Grid item>\n                <ProviderSettingsAvatar size={48} picture={profile.picture} />\n              </Grid>\n              <Grid item xs={12} sm container>\n                <Grid item xs container direction=\"column\" spacing={2}>\n                  <Grid item xs>\n                    {profile.displayName && (\n                      <Typography\n                        variant=\"subtitle1\"\n                        color=\"textPrimary\"\n                        gutterBottom\n                      >\n                        {profile.displayName}\n                      </Typography>\n                    )}\n                    {profile.email && (\n                      <Typography variant=\"body2\" color=\"textSecondary\">\n                        {profile.email}\n                      </Typography>\n                    )}\n                    <Typography variant=\"body2\" color=\"textSecondary\">\n                      {description}\n                    </Typography>\n                  </Grid>\n                </Grid>\n              </Grid>\n            </Grid>\n          </Tooltip>\n        }\n        secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}\n        >\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => {\n              const action = signedIn ? api.signOut() : api.signIn();\n              action.catch(error => errorApi.post(error));\n            }}\n          >\n            {signedIn ? `Sign out` : `Sign in`}\n          </Button>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProviderSettingsItem.esm.js","sources":["../../../src/components/AuthProviders/ProviderSettingsItem.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useState } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  ApiRef,\n  SessionApi,\n  SessionState,\n  ProfileInfoApi,\n  ProfileInfo,\n  useApi,\n  errorApiRef,\n  IconComponent,\n} from '@backstage/core-plugin-api';\nimport { ProviderSettingsAvatar } from './ProviderSettingsAvatar';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\nconst emptyProfile: ProfileInfo = {};\n\n/** @public */\nexport const ProviderSettingsItem = (props: {\n  title: string;\n  description: string;\n  icon: IconComponent;\n  apiRef: ApiRef<ProfileInfoApi & SessionApi>;\n}) => {\n  const { title, description, icon: Icon, apiRef } = props;\n\n  const api = useApi(apiRef);\n  const errorApi = useApi(errorApiRef);\n  const [signedIn, setSignedIn] = useState(false);\n  const [profile, setProfile] = useState<ProfileInfo>(emptyProfile);\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  useEffect(() => {\n    let didCancel = false;\n\n    const subscription = api\n      .sessionState$()\n      .subscribe((sessionState: SessionState) => {\n        if (sessionState !== SessionState.SignedIn) {\n          setProfile(emptyProfile);\n          setSignedIn(false);\n        }\n        if (!didCancel) {\n          api\n            .getProfile({ optional: true })\n            .then((profileResponse: ProfileInfo | undefined) => {\n              if (!didCancel) {\n                if (sessionState === SessionState.SignedIn) {\n                  setSignedIn(true);\n                }\n                if (profileResponse) {\n                  setProfile(profileResponse);\n                }\n              }\n            });\n        }\n      });\n\n    return () => {\n      didCancel = true;\n      subscription.unsubscribe();\n    };\n  }, [api]);\n\n  return (\n    <ListItem>\n      <ListItemIcon>\n        <Icon />\n      </ListItemIcon>\n      <ListItemText\n        primary={title}\n        secondary={\n          <Tooltip placement=\"top\" arrow title={description}>\n            <Grid container spacing={6}>\n              <Grid item>\n                <ProviderSettingsAvatar size={48} picture={profile.picture} />\n              </Grid>\n              <Grid item xs={12} sm container>\n                <Grid item xs container direction=\"column\" spacing={2}>\n                  <Grid item xs>\n                    {profile.displayName && (\n                      <Typography\n                        variant=\"subtitle1\"\n                        color=\"textPrimary\"\n                        gutterBottom\n                      >\n                        {profile.displayName}\n                      </Typography>\n                    )}\n                    {profile.email && (\n                      <Typography variant=\"body2\" color=\"textSecondary\">\n                        {profile.email}\n                      </Typography>\n                    )}\n                    <Typography variant=\"body2\" color=\"textSecondary\">\n                      {description}\n                    </Typography>\n                  </Grid>\n                </Grid>\n              </Grid>\n            </Grid>\n          </Tooltip>\n        }\n        secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={\n            signedIn\n              ? t('providerSettingsItem.title.signOut', { title })\n              : t('providerSettingsItem.title.signIn', { title })\n          }\n        >\n          <Button\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => {\n              const action = signedIn ? api.signOut() : api.signIn();\n              action.catch(error => errorApi.post(error));\n            }}\n          >\n            {signedIn\n              ? t('providerSettingsItem.buttonTitle.signOut')\n              : t('providerSettingsItem.buttonTitle.signIn')}\n          </Button>\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AuthProviders/UserSettingsAuthProviders.esm.js

@@ -4,6 +4,8 @@ import { EmptyProviders } from './EmptyProviders.esm.js';
 import { DefaultProviderSettings } from './DefaultProviderSettings.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 
 const UserSettingsAuthProviders = (props) => {
   const { providerSettings } = props;
@@ -11,10 +13,11 @@ const UserSettingsAuthProviders = (props) => {
   const providersConfig = configApi.getOptionalConfig("auth.providers");
   const configuredProviders = providersConfig?.keys() || [];
   const providers = providerSettings ?? /* @__PURE__ */ jsx(DefaultProviderSettings, { configuredProviders });
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   if (!providerSettings && !configuredProviders?.length) {
     return /* @__PURE__ */ jsx(EmptyProviders, {});
   }
-  return /* @__PURE__ */ jsx(InfoCard, { title: "Available Providers", children: /* @__PURE__ */ jsx(List, { dense: true, children: providers }) });
+  return /* @__PURE__ */ jsx(InfoCard, { title: t("authProviders.title"), children: /* @__PURE__ */ jsx(List, { dense: true, children: providers }) });
 };
 
 export { UserSettingsAuthProviders };

package/dist/components/AuthProviders/UserSettingsAuthProviders.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsAuthProviders.esm.js","sources":["../../../src/components/AuthProviders/UserSettingsAuthProviders.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport List from '@material-ui/core/List';\nimport { EmptyProviders } from './EmptyProviders';\nimport { DefaultProviderSettings } from './DefaultProviderSettings';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsAuthProviders = (props: {\n  providerSettings?: JSX.Element;\n}) => {\n  const { providerSettings } = props;\n  const configApi = useApi(configApiRef);\n  const providersConfig = configApi.getOptionalConfig('auth.providers');\n  const configuredProviders = providersConfig?.keys() || [];\n  const providers = providerSettings ?? (\n    <DefaultProviderSettings configuredProviders={configuredProviders} />\n  );\n\n  if (!providerSettings && !configuredProviders?.length) {\n    return <EmptyProviders />;\n  }\n\n  return (\n    <InfoCard title=\"Available Providers\">\n      <List dense>{providers}</List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBa,MAAA,yBAAA,GAA4B,CAAC,KAEpC,KAAA;AACJ,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAM,MAAA,eAAA,GAAkB,SAAU,CAAA,iBAAA,CAAkB,gBAAgB,CAAA;AACpE,EAAA,MAAM,mBAAsB,GAAA,eAAA,EAAiB,IAAK,EAAA,IAAK,EAAC;AACxD,EAAA,MAAM,SAAY,GAAA,gBAAA,oBACf,GAAA,CAAA,uBAAA,EAAA,EAAwB,mBAA0C,EAAA,CAAA;AAGrE,EAAA,IAAI,CAAC,gBAAA,IAAoB,CAAC,mBAAA,EAAqB,MAAQ,EAAA;AACrD,IAAA,2BAAQ,cAAe,EAAA,EAAA,CAAA;AAAA;AAGzB,EACE,uBAAA,GAAA,CAAC,YAAS,KAAM,EAAA,qBAAA,EACd,8BAAC,IAAK,EAAA,EAAA,KAAA,EAAK,IAAE,EAAA,QAAA,EAAA,SAAA,EAAU,CACzB,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsAuthProviders.esm.js","sources":["../../../src/components/AuthProviders/UserSettingsAuthProviders.tsx"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport List from '@material-ui/core/List';\nimport { EmptyProviders } from './EmptyProviders';\nimport { DefaultProviderSettings } from './DefaultProviderSettings';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\nimport { userSettingsTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @public */\nexport const UserSettingsAuthProviders = (props: {\n  providerSettings?: JSX.Element;\n}) => {\n  const { providerSettings } = props;\n  const configApi = useApi(configApiRef);\n  const providersConfig = configApi.getOptionalConfig('auth.providers');\n  const configuredProviders = providersConfig?.keys() || [];\n  const providers = providerSettings ?? (\n    <DefaultProviderSettings configuredProviders={configuredProviders} />\n  );\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  if (!providerSettings && !configuredProviders?.length) {\n    return <EmptyProviders />;\n  }\n\n  return (\n    <InfoCard title={t('authProviders.title')}>\n      <List dense>{providers}</List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBa,MAAA,yBAAA,GAA4B,CAAC,KAEpC,KAAA;AACJ,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAM,MAAA,eAAA,GAAkB,SAAU,CAAA,iBAAA,CAAkB,gBAAgB,CAAA;AACpE,EAAA,MAAM,mBAAsB,GAAA,eAAA,EAAiB,IAAK,EAAA,IAAK,EAAC;AACxD,EAAA,MAAM,SAAY,GAAA,gBAAA,oBACf,GAAA,CAAA,uBAAA,EAAA,EAAwB,mBAA0C,EAAA,CAAA;AAErE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,IAAI,CAAC,gBAAA,IAAoB,CAAC,mBAAA,EAAqB,MAAQ,EAAA;AACrD,IAAA,2BAAQ,cAAe,EAAA,EAAA,CAAA;AAAA;AAGzB,EACE,uBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,qBAAqB,CACtC,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAK,IAAE,EAAA,QAAA,EAAA,SAAA,EAAU,CACzB,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/DefaultSettingsPage/DefaultSettingsPage.esm.js

@@ -12,6 +12,8 @@ import '@material-ui/core/Tooltip';
 import '@material-ui/core/Typography';
 import '@backstage/core-plugin-api';
 import '../AuthProviders/ProviderSettingsAvatar.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 import { UserSettingsFeatureFlags } from '../FeatureFlags/UserSettingsFeatureFlags.esm.js';
 import { UserSettingsGeneral } from '../General/UserSettingsGeneral.esm.js';
 import '../General/UserSettingsSignInAvatar.esm.js';
@@ -31,17 +33,32 @@ import { SettingsLayout } from '../SettingsLayout/SettingsLayout.esm.js';
 
 const DefaultSettingsPage = (props) => {
   const { providerSettings, tabs } = props;
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   return /* @__PURE__ */ jsxs(SettingsLayout, { children: [
-    /* @__PURE__ */ jsx(SettingsLayout.Route, { path: "general", title: "General", children: /* @__PURE__ */ jsx(UserSettingsGeneral, {}) }),
+    /* @__PURE__ */ jsx(
+      SettingsLayout.Route,
+      {
+        path: "general",
+        title: t("defaultSettingsPage.tabsTitle.general"),
+        children: /* @__PURE__ */ jsx(UserSettingsGeneral, {})
+      }
+    ),
     /* @__PURE__ */ jsx(
       SettingsLayout.Route,
       {
         path: "auth-providers",
-        title: "Authentication Providers",
+        title: t("defaultSettingsPage.tabsTitle.authProviders"),
         children: /* @__PURE__ */ jsx(UserSettingsAuthProviders, { providerSettings })
       }
     ),
-    /* @__PURE__ */ jsx(SettingsLayout.Route, { path: "feature-flags", title: "Feature Flags", children: /* @__PURE__ */ jsx(UserSettingsFeatureFlags, {}) }),
+    /* @__PURE__ */ jsx(
+      SettingsLayout.Route,
+      {
+        path: "feature-flags",
+        title: t("defaultSettingsPage.tabsTitle.featureFlags"),
+        children: /* @__PURE__ */ jsx(UserSettingsFeatureFlags, {})
+      }
+    ),
     tabs
   ] });
 };

package/dist/components/DefaultSettingsPage/DefaultSettingsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSettingsPage.esm.js","sources":["../../../src/components/DefaultSettingsPage/DefaultSettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactElement } from 'react';\nimport { UserSettingsAuthProviders } from '../AuthProviders';\nimport { UserSettingsFeatureFlags } from '../FeatureFlags';\nimport { UserSettingsGeneral } from '../General';\nimport { SettingsLayout, SettingsLayoutRouteProps } from '../SettingsLayout';\n\n/**\n * @public\n */\nexport const DefaultSettingsPage = (props: {\n  tabs?: ReactElement<SettingsLayoutRouteProps>[];\n  providerSettings?: JSX.Element;\n}) => {\n  const { providerSettings, tabs } = props;\n\n  return (\n    <SettingsLayout>\n      <SettingsLayout.Route path=\"general\" title=\"General\">\n        <UserSettingsGeneral />\n      </SettingsLayout.Route>\n      <SettingsLayout.Route\n        path=\"auth-providers\"\n        title=\"Authentication Providers\"\n      >\n        <UserSettingsAuthProviders providerSettings={providerSettings} />\n      </SettingsLayout.Route>\n      <SettingsLayout.Route path=\"feature-flags\" title=\"Feature Flags\">\n        <UserSettingsFeatureFlags />\n      </SettingsLayout.Route>\n      {tabs}\n    </SettingsLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBa,MAAA,mBAAA,GAAsB,CAAC,KAG9B,KAAA;AACJ,EAAM,MAAA,EAAE,gBAAkB,EAAA,IAAA,EAAS,GAAA,KAAA;AAEnC,EAAA,4BACG,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,CAAe,OAAf,EAAqB,IAAA,EAAK,WAAU,KAAM,EAAA,SAAA,EACzC,QAAC,kBAAA,GAAA,CAAA,mBAAA,EAAA,EAAoB,CACvB,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,cAAe,CAAA,KAAA;AAAA,MAAf;AAAA,QACC,IAAK,EAAA,gBAAA;AAAA,QACL,KAAM,EAAA,0BAAA;AAAA,QAEN,QAAA,kBAAA,GAAA,CAAC,6BAA0B,gBAAoC,EAAA;AAAA;AAAA,KACjE;AAAA,oBACA,GAAA,CAAC,cAAe,CAAA,KAAA,EAAf,EAAqB,IAAA,EAAK,iBAAgB,KAAM,EAAA,eAAA,EAC/C,QAAC,kBAAA,GAAA,CAAA,wBAAA,EAAA,EAAyB,CAC5B,EAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultSettingsPage.esm.js","sources":["../../../src/components/DefaultSettingsPage/DefaultSettingsPage.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactElement } from 'react';\nimport { UserSettingsAuthProviders } from '../AuthProviders';\nimport { UserSettingsFeatureFlags } from '../FeatureFlags';\nimport { UserSettingsGeneral } from '../General';\nimport { SettingsLayout, SettingsLayoutRouteProps } from '../SettingsLayout';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const DefaultSettingsPage = (props: {\n  tabs?: ReactElement<SettingsLayoutRouteProps>[];\n  providerSettings?: JSX.Element;\n}) => {\n  const { providerSettings, tabs } = props;\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  return (\n    <SettingsLayout>\n      <SettingsLayout.Route\n        path=\"general\"\n        title={t('defaultSettingsPage.tabsTitle.general')}\n      >\n        <UserSettingsGeneral />\n      </SettingsLayout.Route>\n      <SettingsLayout.Route\n        path=\"auth-providers\"\n        title={t('defaultSettingsPage.tabsTitle.authProviders')}\n      >\n        <UserSettingsAuthProviders providerSettings={providerSettings} />\n      </SettingsLayout.Route>\n      <SettingsLayout.Route\n        path=\"feature-flags\"\n        title={t('defaultSettingsPage.tabsTitle.featureFlags')}\n      >\n        <UserSettingsFeatureFlags />\n      </SettingsLayout.Route>\n      {tabs}\n    </SettingsLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ba,MAAA,mBAAA,GAAsB,CAAC,KAG9B,KAAA;AACJ,EAAM,MAAA,EAAE,gBAAkB,EAAA,IAAA,EAAS,GAAA,KAAA;AACnC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,4BACG,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,cAAe,CAAA,KAAA;AAAA,MAAf;AAAA,QACC,IAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,EAAE,uCAAuC,CAAA;AAAA,QAEhD,8BAAC,mBAAoB,EAAA,EAAA;AAAA;AAAA,KACvB;AAAA,oBACA,GAAA;AAAA,MAAC,cAAe,CAAA,KAAA;AAAA,MAAf;AAAA,QACC,IAAK,EAAA,gBAAA;AAAA,QACL,KAAA,EAAO,EAAE,6CAA6C,CAAA;AAAA,QAEtD,QAAA,kBAAA,GAAA,CAAC,6BAA0B,gBAAoC,EAAA;AAAA;AAAA,KACjE;AAAA,oBACA,GAAA;AAAA,MAAC,cAAe,CAAA,KAAA;AAAA,MAAf;AAAA,QACC,IAAK,EAAA,eAAA;AAAA,QACL,KAAA,EAAO,EAAE,4CAA4C,CAAA;AAAA,QAErD,8BAAC,wBAAyB,EAAA,EAAA;AAAA;AAAA,KAC5B;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/FeatureFlags/EmptyFlags.esm.js

@@ -2,6 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import { EmptyState, CodeSnippet } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const EXAMPLE = `import { createPlugin } from '@backstage/core-plugin-api';
 
@@ -10,36 +12,39 @@ export default createPlugin({
   featureFlags: [{ name: 'enable-example-feature' }],
 });
 `;
-const EmptyFlags = () => /* @__PURE__ */ jsx(
-  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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body1", children: "An example for how to add a feature flag is highlighted below:" }),
-      /* @__PURE__ */ jsx(
-        CodeSnippet,
-        {
-          text: EXAMPLE,
-          language: "typescript",
-          showLineNumbers: true,
-          highlightedNumbers: [6],
-          customStyle: { background: "inherit", fontSize: "115%" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "contained",
-          color: "primary",
-          href: "https://backstage.io/docs/api/utility-apis",
-          children: "Read More"
-        }
-      )
-    ] })
-  }
-);
+const EmptyFlags = () => {
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      missing: "content",
+      title: t("featureFlags.emptyFlags.title"),
+      description: t("featureFlags.emptyFlags.description"),
+      action: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("featureFlags.emptyFlags.action.title") }),
+        /* @__PURE__ */ jsx(
+          CodeSnippet,
+          {
+            text: EXAMPLE,
+            language: "typescript",
+            showLineNumbers: true,
+            highlightedNumbers: [6],
+            customStyle: { background: "inherit", fontSize: "115%" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            color: "primary",
+            href: "https://backstage.io/docs/api/utility-apis",
+            children: t("featureFlags.emptyFlags.action.readMoreButtonTitle")
+          }
+        )
+      ] })
+    }
+  );
+};
 
 export { EmptyFlags };
 //# sourceMappingURL=EmptyFlags.esm.js.map