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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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

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":";;;;;;;;;;;;;;;AAuCA,MAAM,eAA4B,EAAC;AAGtB,MAAA,oBAAA,GAAuB,CAAC,KAK/B,KAAA;AACJ,EAAA,MAAM,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,IAAA,EAAM,QAAW,GAAA,KAAA;AAEnD,EAAM,MAAA,GAAA,GAAM,OAAO,MAAM,CAAA;AACzB,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAsB,YAAY,CAAA;AAChE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAY,GAAA,KAAA;AAEhB,IAAA,MAAM,eAAe,GAClB,CAAA,aAAA,EACA,CAAA,SAAA,CAAU,CAAC,YAA+B,KAAA;AACzC,MAAI,IAAA,YAAA,KAAiB,aAAa,QAAU,EAAA;AAC1C,QAAA,UAAA,CAAW,YAAY,CAAA;AACvB,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA;AAEnB,MAAA,IAAI,CAAC,SAAW,EAAA;AACd,QACG,GAAA,CAAA,UAAA,CAAW,EAAE,QAAU,EAAA,IAAA,EAAM,CAC7B,CAAA,IAAA,CAAK,CAAC,eAA6C,KAAA;AAClD,UAAA,IAAI,CAAC,SAAW,EAAA;AACd,YAAI,IAAA,YAAA,KAAiB,aAAa,QAAU,EAAA;AAC1C,cAAA,WAAA,CAAY,IAAI,CAAA;AAAA;AAElB,YAAA,IAAI,eAAiB,EAAA;AACnB,cAAA,UAAA,CAAW,eAAe,CAAA;AAAA;AAC5B;AACF,SACD,CAAA;AAAA;AACL,KACD,CAAA;AAEH,IAAA,OAAO,MAAM;AACX,MAAY,SAAA,GAAA,IAAA;AACZ,MAAA,YAAA,CAAa,WAAY,EAAA;AAAA,KAC3B;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,CACR,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,KAAA;AAAA,QACT,SACE,kBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,OAAM,KAAK,EAAA,IAAA,EAAC,KAAO,EAAA,WAAA,EACpC,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EACR,QAAC,kBAAA,GAAA,CAAA,sBAAA,EAAA,EAAuB,MAAM,EAAI,EAAA,OAAA,EAAS,OAAQ,CAAA,OAAA,EAAS,CAC9D,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAE,IAAC,EAAA,SAAA,EAAS,IAC7B,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAE,IAAC,EAAA,SAAA,EAAS,IAAC,EAAA,SAAA,EAAU,QAAS,EAAA,OAAA,EAAS,CAClD,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAE,IACV,EAAA,QAAA,EAAA;AAAA,YAAA,OAAA,CAAQ,WACP,oBAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,OAAQ,EAAA,WAAA;AAAA,gBACR,KAAM,EAAA,aAAA;AAAA,gBACN,YAAY,EAAA,IAAA;AAAA,gBAEX,QAAQ,EAAA,OAAA,CAAA;AAAA;AAAA,aACX;AAAA,YAED,OAAA,CAAQ,yBACN,GAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,OAAQ,EAAA,KAAA,EAAM,eAC/B,EAAA,QAAA,EAAA,OAAA,CAAQ,KACX,EAAA,CAAA;AAAA,gCAED,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,KAAA,EAAM,iBAC/B,QACH,EAAA,WAAA,EAAA;AAAA,WAAA,EACF,GACF,CACF,EAAA;AAAA,SAAA,EACF,CACF,EAAA,CAAA;AAAA,QAEF,wBAAA,EAA0B,EAAE,MAAQ,EAAA,IAAA,EAAM,OAAO,EAAE,KAAA,EAAO,OAAQ;AAAA;AAAA,KACpE;AAAA,wBACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,KAAK,EAAA,IAAA;AAAA,QACL,KACE,EAAA,QAAA,GACI,CAAE,CAAA,oCAAA,EAAsC,EAAE,KAAA,EAAO,CAAA,GACjD,CAAE,CAAA,mCAAA,EAAqC,EAAE,KAAA,EAAO,CAAA;AAAA,QAGtD,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,UAAA;AAAA,YACR,KAAM,EAAA,SAAA;AAAA,YACN,SAAS,MAAM;AACb,cAAA,MAAM,SAAS,QAAW,GAAA,GAAA,CAAI,OAAQ,EAAA,GAAI,IAAI,MAAO,EAAA;AACrD,cAAA,MAAA,CAAO,KAAM,CAAA,CAAA,KAAA,KAAS,QAAS,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,aAC5C;AAAA,YAEC,QACG,EAAA,QAAA,GAAA,CAAA,CAAE,0CAA0C,CAAA,GAC5C,EAAE,yCAAyC;AAAA;AAAA;AACjD;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyFlags.esm.js","sources":["../../../src/components/FeatureFlags/EmptyFlags.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 = `import { createPlugin } from '@backstage/core-plugin-api';\n\nexport default createPlugin({\n  id: 'plugin-name',\n  featureFlags: [{ name: 'enable-example-feature' }],\n});\n`;\n\nexport const EmptyFlags = () => (\n  <EmptyState\n    missing=\"content\"\n    title=\"No Feature Flags\"\n    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.\"\n    action={\n      <>\n        <Typography variant=\"body1\">\n          An example for how to add a feature flag is highlighted below:\n        </Typography>\n        <CodeSnippet\n          text={EXAMPLE}\n          language=\"typescript\"\n          showLineNumbers\n          highlightedNumbers={[6]}\n          customStyle={{ background: 'inherit', fontSize: '115%' }}\n        />\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          href=\"https://backstage.io/docs/api/utility-apis\"\n        >\n          Read More\n        </Button>\n      </>\n    }\n  />\n);\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,OAAU,GAAA,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAQT,MAAM,aAAa,sBACxB,GAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACC,OAAQ,EAAA,SAAA;AAAA,IACR,KAAM,EAAA,kBAAA;AAAA,IACN,WAAY,EAAA,mLAAA;AAAA,IACZ,wBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAQ,QAE5B,EAAA,gEAAA,EAAA,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAM,EAAA,OAAA;AAAA,UACN,QAAS,EAAA,YAAA;AAAA,UACT,eAAe,EAAA,IAAA;AAAA,UACf,kBAAA,EAAoB,CAAC,CAAC,CAAA;AAAA,UACtB,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,4CAAA;AAAA,UACN,QAAA,EAAA;AAAA;AAAA;AAED,KACF,EAAA;AAAA;AAEJ;;;;"}
+{"version":3,"file":"EmptyFlags.esm.js","sources":["../../../src/components/FeatureFlags/EmptyFlags.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 = `import { createPlugin } from '@backstage/core-plugin-api';\n\nexport default createPlugin({\n  id: 'plugin-name',\n  featureFlags: [{ name: 'enable-example-feature' }],\n});\n`;\n\nexport const EmptyFlags = () => {\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  return (\n    <EmptyState\n      missing=\"content\"\n      title={t('featureFlags.emptyFlags.title')}\n      description={t('featureFlags.emptyFlags.description')}\n      action={\n        <>\n          <Typography variant=\"body1\">\n            {t('featureFlags.emptyFlags.action.title')}\n          </Typography>\n          <CodeSnippet\n            text={EXAMPLE}\n            language=\"typescript\"\n            showLineNumbers\n            highlightedNumbers={[6]}\n            customStyle={{ background: 'inherit', fontSize: '115%' }}\n          />\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            href=\"https://backstage.io/docs/api/utility-apis\"\n          >\n            {t('featureFlags.emptyFlags.action.readMoreButtonTitle')}\n          </Button>\n        </>\n      }\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,OAAU,GAAA,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAQT,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,SAAA;AAAA,MACR,KAAA,EAAO,EAAE,+BAA+B,CAAA;AAAA,MACxC,WAAA,EAAa,EAAE,qCAAqC,CAAA;AAAA,MACpD,wBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OACjB,EAAA,QAAA,EAAA,CAAA,CAAE,sCAAsC,CAC3C,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,OAAA;AAAA,YACN,QAAS,EAAA,YAAA;AAAA,YACT,eAAe,EAAA,IAAA;AAAA,YACf,kBAAA,EAAoB,CAAC,CAAC,CAAA;AAAA,YACtB,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,4CAAA;AAAA,YAEJ,YAAE,oDAAoD;AAAA;AAAA;AACzD,OACF,EAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -4,17 +4,32 @@ import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
-const getSecondaryText = (flag) => {
+const getSecondaryText = (flag, t) => {
   if (flag.description) {
     return flag.description;
   }
-  return flag.pluginId ? `Registered in ${flag.pluginId} plugin` : "Registered in the application";
+  return flag.pluginId ? t("featureFlags.flagItem.subtitle.registeredInPlugin", {
+    pluginId: flag.pluginId
+  }) : t("featureFlags.flagItem.subtitle.registeredInApplication");
+};
+const FlagItem = ({ flag, enabled, toggleHandler }) => {
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+  return /* @__PURE__ */ jsxs(ListItem, { divider: true, button: true, onClick: () => toggleHandler(flag.name), children: [
+    /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        placement: "top",
+        arrow: true,
+        title: enabled ? t("featureFlags.flagItem.title.disable") : t("featureFlags.flagItem.title.enable"),
+        children: /* @__PURE__ */ jsx(Switch, { color: "primary", checked: enabled, name: flag.name })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ListItemText, { primary: flag.name, secondary: getSecondaryText(flag, t) })
+  ] });
 };
-const FlagItem = ({ flag, enabled, toggleHandler }) => /* @__PURE__ */ jsxs(ListItem, { divider: true, button: true, onClick: () => toggleHandler(flag.name), children: [
-  /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Tooltip, { placement: "top", arrow: true, title: enabled ? "Disable" : "Enable", children: /* @__PURE__ */ jsx(Switch, { color: "primary", checked: enabled, name: flag.name }) }) }),
-  /* @__PURE__ */ jsx(ListItemText, { primary: flag.name, secondary: getSecondaryText(flag) })
-] });
 
 export { FlagItem };
 //# sourceMappingURL=FeatureFlagsItem.esm.js.map

package/dist/components/FeatureFlags/FeatureFlagsItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureFlagsItem.esm.js","sources":["../../../src/components/FeatureFlags/FeatureFlagsItem.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 ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { FeatureFlag } from '@backstage/core-plugin-api';\n\ntype Props = {\n  flag: FeatureFlag;\n  enabled: boolean;\n  toggleHandler: Function;\n};\n\nconst getSecondaryText = (flag: FeatureFlag) => {\n  if (flag.description) {\n    return flag.description;\n  }\n  return flag.pluginId\n    ? `Registered in ${flag.pluginId} plugin`\n    : 'Registered in the application';\n};\n\nexport const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (\n  <ListItem divider button onClick={() => toggleHandler(flag.name)}>\n    <ListItemIcon>\n      <Tooltip placement=\"top\" arrow title={enabled ? 'Disable' : 'Enable'}>\n        <Switch color=\"primary\" checked={enabled} name={flag.name} />\n      </Tooltip>\n    </ListItemIcon>\n    <ListItemText primary={flag.name} secondary={getSecondaryText(flag)} />\n  </ListItem>\n);\n"],"names":[],"mappings":";;;;;;;AA6BA,MAAM,gBAAA,GAAmB,CAAC,IAAsB,KAAA;AAC9C,EAAA,IAAI,KAAK,WAAa,EAAA;AACpB,IAAA,OAAO,IAAK,CAAA,WAAA;AAAA;AAEd,EAAA,OAAO,IAAK,CAAA,QAAA,GACR,CAAiB,cAAA,EAAA,IAAA,CAAK,QAAQ,CAC9B,OAAA,CAAA,GAAA,+BAAA;AACN,CAAA;AAEO,MAAM,WAAW,CAAC,EAAE,MAAM,OAAS,EAAA,aAAA,uBACvC,IAAA,CAAA,QAAA,EAAA,EAAS,OAAO,EAAA,IAAA,EAAC,QAAM,IAAC,EAAA,OAAA,EAAS,MAAM,aAAc,CAAA,IAAA,CAAK,IAAI,CAC7D,EAAA,QAAA,EAAA;AAAA,kBAAC,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,OAAM,KAAK,EAAA,IAAA,EAAC,OAAO,OAAU,GAAA,SAAA,GAAY,UAC1D,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAO,OAAM,SAAU,EAAA,OAAA,EAAS,SAAS,IAAM,EAAA,IAAA,CAAK,IAAM,EAAA,CAAA,EAC7D,CACF,EAAA,CAAA;AAAA,kBACA,GAAA,CAAC,gBAAa,OAAS,EAAA,IAAA,CAAK,MAAM,SAAW,EAAA,gBAAA,CAAiB,IAAI,CAAG,EAAA;AAAA,CACvE,EAAA;;;;"}
+{"version":3,"file":"FeatureFlagsItem.esm.js","sources":["../../../src/components/FeatureFlags/FeatureFlagsItem.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 ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { FeatureFlag } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\nimport { TranslationFunction } from '@backstage/core-plugin-api/alpha';\n\ntype Props = {\n  flag: FeatureFlag;\n  enabled: boolean;\n  toggleHandler: Function;\n};\n\nconst getSecondaryText = (\n  flag: FeatureFlag,\n  t: TranslationFunction<typeof userSettingsTranslationRef.T>,\n) => {\n  if (flag.description) {\n    return flag.description;\n  }\n  return flag.pluginId\n    ? t('featureFlags.flagItem.subtitle.registeredInPlugin', {\n        pluginId: flag.pluginId,\n      })\n    : t('featureFlags.flagItem.subtitle.registeredInApplication');\n};\n\nexport const FlagItem = ({ flag, enabled, toggleHandler }: Props) => {\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  return (\n    <ListItem divider button onClick={() => toggleHandler(flag.name)}>\n      <ListItemIcon>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={\n            enabled\n              ? t('featureFlags.flagItem.title.disable')\n              : t('featureFlags.flagItem.title.enable')\n          }\n        >\n          <Switch color=\"primary\" checked={enabled} name={flag.name} />\n        </Tooltip>\n      </ListItemIcon>\n      <ListItemText primary={flag.name} secondary={getSecondaryText(flag, t)} />\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgCA,MAAM,gBAAA,GAAmB,CACvB,IAAA,EACA,CACG,KAAA;AACH,EAAA,IAAI,KAAK,WAAa,EAAA;AACpB,IAAA,OAAO,IAAK,CAAA,WAAA;AAAA;AAEd,EAAO,OAAA,IAAA,CAAK,QACR,GAAA,CAAA,CAAE,mDAAqD,EAAA;AAAA,IACrD,UAAU,IAAK,CAAA;AAAA,GAChB,CACD,GAAA,CAAA,CAAE,wDAAwD,CAAA;AAChE,CAAA;AAEO,MAAM,WAAW,CAAC,EAAE,IAAM,EAAA,OAAA,EAAS,eAA2B,KAAA;AACnE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EACE,uBAAA,IAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAO,IAAC,EAAA,MAAA,EAAM,IAAC,EAAA,OAAA,EAAS,MAAM,aAAA,CAAc,IAAK,CAAA,IAAI,CAC7D,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,YACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,KAAK,EAAA,IAAA;AAAA,QACL,OACE,OACI,GAAA,CAAA,CAAE,qCAAqC,CAAA,GACvC,EAAE,oCAAoC,CAAA;AAAA,QAG5C,QAAA,kBAAA,GAAA,CAAC,UAAO,KAAM,EAAA,SAAA,EAAU,SAAS,OAAS,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA;AAAA;AAAA,KAE/D,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,gBAAa,OAAS,EAAA,IAAA,CAAK,MAAM,SAAW,EAAA,gBAAA,CAAiB,IAAM,EAAA,CAAC,CAAG,EAAA;AAAA,GAC1E,EAAA,CAAA;AAEJ;;;;"}

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

@@ -10,6 +10,8 @@ import { FlagItem } from './FeatureFlagsItem.esm.js';
 import { useApi, featureFlagsApiRef, FeatureFlagState } from '@backstage/core-plugin-api';
 import { InfoCard } from '@backstage/core-components';
 import ClearIcon from '@material-ui/icons/Clear';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const sortFlags = (flags, featureFlagsApi) => {
   const activeFlags = flags.filter((flag) => featureFlagsApi.isActive(flag.name));
@@ -30,6 +32,7 @@ const UserSettingsFeatureFlags = () => {
   );
   const [state, setState] = useState(initialFlagState);
   const [filterInput, setFilterInput] = useState("");
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   const toggleFlag = useCallback(
     (flagName) => {
       const newState = featureFlagsApi.isActive(flagName) ? FeatureFlagState.None : FeatureFlagState.Active;
@@ -57,13 +60,13 @@ const UserSettingsFeatureFlags = () => {
   });
   const Header = () => /* @__PURE__ */ jsxs(Grid, { container: true, style: { justifyContent: "space-between" }, children: [
     /* @__PURE__ */ jsxs(Grid, { item: true, xs: 6, md: 8, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Feature Flags" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Please refresh the page when toggling feature flags" })
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("featureFlags.title") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: t("featureFlags.description") })
     ] }),
     featureFlags.length >= 10 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, md: 4, children: /* @__PURE__ */ jsx(
       TextField,
       {
-        label: "Filter",
+        label: t("featureFlags.filterTitle"),
         style: { display: "flex", justifyContent: "flex-end" },
         inputRef: (ref) => ref && ref.focus(),
         InputProps: {
@@ -71,7 +74,7 @@ const UserSettingsFeatureFlags = () => {
             endAdornment: /* @__PURE__ */ jsx(
               IconButton,
               {
-                "aria-label": "Clear filter",
+                "aria-label": t("featureFlags.clearFilter"),
                 onClick: clearFilterInput,
                 edge: "end",
                 children: /* @__PURE__ */ jsx(ClearIcon, {})

package/dist/components/FeatureFlags/UserSettingsFeatureFlags.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsFeatureFlags.esm.js","sources":["../../../src/components/FeatureFlags/UserSettingsFeatureFlags.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 { useRef, useCallback, useState } from 'react';\nimport List from '@material-ui/core/List';\nimport TextField from '@material-ui/core/TextField';\nimport IconButton from '@material-ui/core/IconButton';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { EmptyFlags } from './EmptyFlags';\nimport { FlagItem } from './FeatureFlagsItem';\nimport {\n  FeatureFlag,\n  FeatureFlagsApi,\n  featureFlagsApiRef,\n  FeatureFlagState,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\nimport ClearIcon from '@material-ui/icons/Clear';\n\nexport const sortFlags = (\n  flags: FeatureFlag[],\n  featureFlagsApi: FeatureFlagsApi,\n): FeatureFlag[] => {\n  const activeFlags = flags.filter(flag => featureFlagsApi.isActive(flag.name));\n  const idleFlags = flags.filter(flag => !featureFlagsApi.isActive(flag.name));\n  return [...activeFlags, ...idleFlags];\n};\n\n/** @public */\nexport const UserSettingsFeatureFlags = () => {\n  const featureFlagsApi = useApi(featureFlagsApiRef);\n  const inputRef = useRef<HTMLElement>();\n\n  const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();\n  const initialFeatureFlagsSorted = sortFlags(\n    initialFeatureFlags,\n    featureFlagsApi,\n  );\n  const [featureFlags] = useState(initialFeatureFlagsSorted);\n\n  const initialFlagState = Object.fromEntries(\n    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),\n  );\n\n  const [state, setState] = useState<Record<string, boolean>>(initialFlagState);\n  const [filterInput, setFilterInput] = useState<string>('');\n\n  const toggleFlag = useCallback(\n    (flagName: string) => {\n      const newState = featureFlagsApi.isActive(flagName)\n        ? FeatureFlagState.None\n        : FeatureFlagState.Active;\n\n      featureFlagsApi.save({\n        states: { [flagName]: newState },\n        merge: true,\n      });\n\n      setState(prevState => ({\n        ...prevState,\n        [flagName]: newState === FeatureFlagState.Active,\n      }));\n    },\n    [featureFlagsApi],\n  );\n\n  if (!featureFlags.length) {\n    return <EmptyFlags />;\n  }\n\n  const clearFilterInput = () => {\n    setFilterInput('');\n    inputRef?.current?.focus();\n  };\n\n  const filteredFeatureFlags = featureFlags.filter(featureFlag => {\n    const featureFlagName = featureFlag.name.toLocaleLowerCase('en-US');\n    return featureFlagName.includes(filterInput.toLocaleLowerCase('en-US'));\n  });\n\n  const Header = () => (\n    <Grid container style={{ justifyContent: 'space-between' }}>\n      <Grid item xs={6} md={8}>\n        <Typography variant=\"h5\">Feature Flags</Typography>\n        <Typography variant=\"subtitle1\">\n          Please refresh the page when toggling feature flags\n        </Typography>\n      </Grid>\n      {featureFlags.length >= 10 && (\n        <Grid item xs={6} md={4}>\n          <TextField\n            label=\"Filter\"\n            style={{ display: 'flex', justifyContent: 'flex-end' }}\n            inputRef={ref => ref && ref.focus()}\n            InputProps={{\n              ...(filterInput.length && {\n                endAdornment: (\n                  <IconButton\n                    aria-label=\"Clear filter\"\n                    onClick={clearFilterInput}\n                    edge=\"end\"\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                ),\n              }),\n            }}\n            onChange={e => setFilterInput(e.target.value)}\n            value={filterInput}\n          />\n        </Grid>\n      )}\n    </Grid>\n  );\n\n  return (\n    <InfoCard title={<Header />}>\n      <List dense>\n        {filteredFeatureFlags.map(featureFlag => {\n          const enabled = Boolean(state[featureFlag.name]);\n\n          return (\n            <FlagItem\n              key={featureFlag.name}\n              flag={featureFlag}\n              enabled={enabled}\n              toggleHandler={toggleFlag}\n            />\n          );\n        })}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserSettingsFeatureFlags.esm.js","sources":["../../../src/components/FeatureFlags/UserSettingsFeatureFlags.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 { useRef, useCallback, useState } from 'react';\nimport List from '@material-ui/core/List';\nimport TextField from '@material-ui/core/TextField';\nimport IconButton from '@material-ui/core/IconButton';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { EmptyFlags } from './EmptyFlags';\nimport { FlagItem } from './FeatureFlagsItem';\nimport {\n  FeatureFlag,\n  FeatureFlagsApi,\n  featureFlagsApiRef,\n  FeatureFlagState,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { InfoCard } from '@backstage/core-components';\nimport ClearIcon from '@material-ui/icons/Clear';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\nexport const sortFlags = (\n  flags: FeatureFlag[],\n  featureFlagsApi: FeatureFlagsApi,\n): FeatureFlag[] => {\n  const activeFlags = flags.filter(flag => featureFlagsApi.isActive(flag.name));\n  const idleFlags = flags.filter(flag => !featureFlagsApi.isActive(flag.name));\n  return [...activeFlags, ...idleFlags];\n};\n\n/** @public */\nexport const UserSettingsFeatureFlags = () => {\n  const featureFlagsApi = useApi(featureFlagsApiRef);\n  const inputRef = useRef<HTMLElement>();\n\n  const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();\n  const initialFeatureFlagsSorted = sortFlags(\n    initialFeatureFlags,\n    featureFlagsApi,\n  );\n  const [featureFlags] = useState(initialFeatureFlagsSorted);\n\n  const initialFlagState = Object.fromEntries(\n    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),\n  );\n\n  const [state, setState] = useState<Record<string, boolean>>(initialFlagState);\n  const [filterInput, setFilterInput] = useState<string>('');\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const toggleFlag = useCallback(\n    (flagName: string) => {\n      const newState = featureFlagsApi.isActive(flagName)\n        ? FeatureFlagState.None\n        : FeatureFlagState.Active;\n\n      featureFlagsApi.save({\n        states: { [flagName]: newState },\n        merge: true,\n      });\n\n      setState(prevState => ({\n        ...prevState,\n        [flagName]: newState === FeatureFlagState.Active,\n      }));\n    },\n    [featureFlagsApi],\n  );\n\n  if (!featureFlags.length) {\n    return <EmptyFlags />;\n  }\n\n  const clearFilterInput = () => {\n    setFilterInput('');\n    inputRef?.current?.focus();\n  };\n\n  const filteredFeatureFlags = featureFlags.filter(featureFlag => {\n    const featureFlagName = featureFlag.name.toLocaleLowerCase('en-US');\n    return featureFlagName.includes(filterInput.toLocaleLowerCase('en-US'));\n  });\n\n  const Header = () => (\n    <Grid container style={{ justifyContent: 'space-between' }}>\n      <Grid item xs={6} md={8}>\n        <Typography variant=\"h5\">{t('featureFlags.title')}</Typography>\n        <Typography variant=\"subtitle1\">\n          {t('featureFlags.description')}\n        </Typography>\n      </Grid>\n      {featureFlags.length >= 10 && (\n        <Grid item xs={6} md={4}>\n          <TextField\n            label={t('featureFlags.filterTitle')}\n            style={{ display: 'flex', justifyContent: 'flex-end' }}\n            inputRef={ref => ref && ref.focus()}\n            InputProps={{\n              ...(filterInput.length && {\n                endAdornment: (\n                  <IconButton\n                    aria-label={t('featureFlags.clearFilter')}\n                    onClick={clearFilterInput}\n                    edge=\"end\"\n                  >\n                    <ClearIcon />\n                  </IconButton>\n                ),\n              }),\n            }}\n            onChange={e => setFilterInput(e.target.value)}\n            value={filterInput}\n          />\n        </Grid>\n      )}\n    </Grid>\n  );\n\n  return (\n    <InfoCard title={<Header />}>\n      <List dense>\n        {filteredFeatureFlags.map(featureFlag => {\n          const enabled = Boolean(state[featureFlag.name]);\n\n          return (\n            <FlagItem\n              key={featureFlag.name}\n              flag={featureFlag}\n              enabled={enabled}\n              toggleHandler={toggleFlag}\n            />\n          );\n        })}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/General/UserSettingsIdentityCard.esm.js

@@ -4,26 +4,34 @@ import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { useUserProfile } from '../useUserProfileInfo.esm.js';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const Contents = () => {
   const { backstageIdentity } = useUserProfile();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   if (!backstageIdentity) {
-    return /* @__PURE__ */ jsx(Typography, { children: "No Backstage Identity" });
+    return /* @__PURE__ */ jsx(Typography, { children: t("identityCard.noIdentityTitle") });
   }
   return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
     /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", gutterBottom: true, children: [
-      "User Entity:",
+      t("identityCard.userEntity"),
+      ":",
       " ",
       /* @__PURE__ */ jsx(EntityRefLinks, { entityRefs: [backstageIdentity.userEntityRef] })
     ] }) }),
     /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
-      "Ownership Entities:",
+      t("identityCard.ownershipEntities"),
+      ":",
       " ",
       /* @__PURE__ */ jsx(EntityRefLinks, { entityRefs: backstageIdentity.ownershipEntityRefs })
     ] }) })
   ] });
 };
-const UserSettingsIdentityCard = () => /* @__PURE__ */ jsx(InfoCard, { title: "Backstage Identity", children: /* @__PURE__ */ jsx(Contents, {}) });
+const UserSettingsIdentityCard = () => {
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+  return /* @__PURE__ */ jsx(InfoCard, { title: t("identityCard.title"), children: /* @__PURE__ */ jsx(Contents, {}) });
+};
 
 export { UserSettingsIdentityCard };
 //# sourceMappingURL=UserSettingsIdentityCard.esm.js.map

package/dist/components/General/UserSettingsIdentityCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsIdentityCard.esm.js","sources":["../../../src/components/General/UserSettingsIdentityCard.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 { InfoCard } from '@backstage/core-components';\nimport { EntityRefLinks } from '@backstage/plugin-catalog-react';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { useUserProfile } from '../useUserProfileInfo';\n\nconst Contents = () => {\n  const { backstageIdentity } = useUserProfile();\n\n  if (!backstageIdentity) {\n    return <Typography>No Backstage Identity</Typography>;\n  }\n\n  return (\n    <Grid container spacing={1}>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle1\" gutterBottom>\n          User Entity:{' '}\n          <EntityRefLinks entityRefs={[backstageIdentity.userEntityRef]} />\n        </Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle1\">\n          Ownership Entities:{' '}\n          <EntityRefLinks entityRefs={backstageIdentity.ownershipEntityRefs} />\n        </Typography>\n      </Grid>\n    </Grid>\n  );\n};\n\n/** @public */\nexport const UserSettingsIdentityCard = () => (\n  <InfoCard title=\"Backstage Identity\">\n    <Contents />\n  </InfoCard>\n);\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,WAAW,MAAM;AACrB,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,cAAe,EAAA;AAE7C,EAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,IAAO,uBAAA,GAAA,CAAC,cAAW,QAAqB,EAAA,uBAAA,EAAA,CAAA;AAAA;AAG1C,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EACb,+BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,YAAA,EAAY,IAAC,EAAA,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MAC9B,GAAA;AAAA,0BACZ,cAAe,EAAA,EAAA,UAAA,EAAY,CAAC,iBAAA,CAAkB,aAAa,CAAG,EAAA;AAAA,KAAA,EACjE,CACF,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,MAAA,qBAAA;AAAA,MACV,GAAA;AAAA,sBACnB,GAAA,CAAA,cAAA,EAAA,EAAe,UAAY,EAAA,iBAAA,CAAkB,mBAAqB,EAAA;AAAA,KAAA,EACrE,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ,CAAA;AAGa,MAAA,wBAAA,GAA2B,sBACrC,GAAA,CAAA,QAAA,EAAA,EAAS,OAAM,oBACd,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA;;;;"}
+{"version":3,"file":"UserSettingsIdentityCard.esm.js","sources":["../../../src/components/General/UserSettingsIdentityCard.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 { InfoCard } from '@backstage/core-components';\nimport { EntityRefLinks } from '@backstage/plugin-catalog-react';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { useUserProfile } from '../useUserProfileInfo';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\nconst Contents = () => {\n  const { backstageIdentity } = useUserProfile();\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  if (!backstageIdentity) {\n    return <Typography>{t('identityCard.noIdentityTitle')}</Typography>;\n  }\n\n  return (\n    <Grid container spacing={1}>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle1\" gutterBottom>\n          {t('identityCard.userEntity')}:{' '}\n          <EntityRefLinks entityRefs={[backstageIdentity.userEntityRef]} />\n        </Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle1\">\n          {t('identityCard.ownershipEntities')}:{' '}\n          <EntityRefLinks entityRefs={backstageIdentity.ownershipEntityRefs} />\n        </Typography>\n      </Grid>\n    </Grid>\n  );\n};\n\n/** @public */\nexport const UserSettingsIdentityCard = () => {\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  return (\n    <InfoCard title={t('identityCard.title')}>\n      <Contents />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwBA,MAAM,WAAW,MAAM;AACrB,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,cAAe,EAAA;AAC7C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,IAAA,uBAAQ,GAAA,CAAA,UAAA,EAAA,EAAY,QAAE,EAAA,CAAA,CAAA,8BAA8B,CAAE,EAAA,CAAA;AAAA;AAGxD,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EACb,+BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAY,EAAA,YAAA,EAAY,IACzC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAA,CAAE,yBAAyB,CAAA;AAAA,MAAE,GAAA;AAAA,MAAE,GAAA;AAAA,0BAC/B,cAAe,EAAA,EAAA,UAAA,EAAY,CAAC,iBAAA,CAAkB,aAAa,CAAG,EAAA;AAAA,KAAA,EACjE,CACF,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EACb,EAAA,QAAA,kBAAA,IAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WACjB,EAAA,QAAA,EAAA;AAAA,MAAA,CAAA,CAAE,gCAAgC,CAAA;AAAA,MAAE,GAAA;AAAA,MAAE,GAAA;AAAA,sBACtC,GAAA,CAAA,cAAA,EAAA,EAAe,UAAY,EAAA,iBAAA,CAAkB,mBAAqB,EAAA;AAAA,KAAA,EACrE,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ,CAAA;AAGO,MAAM,2BAA2B,MAAM;AAC5C,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EACE,uBAAA,GAAA,CAAC,YAAS,KAAO,EAAA,CAAA,CAAE,oBAAoB,CACrC,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAS,CACZ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/General/UserSettingsMenu.esm.js

@@ -7,12 +7,15 @@ import MenuItem from '@material-ui/core/MenuItem';
 import SignOutIcon from '@material-ui/icons/MeetingRoom';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useApi, errorApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const UserSettingsMenu = () => {
   const errorApi = useApi(errorApiRef);
   const identityApi = useApi(identityApiRef);
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState(void 0);
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   const handleOpen = (event) => {
     setAnchorEl(event.currentTarget);
     setOpen(true);
@@ -26,7 +29,7 @@ const UserSettingsMenu = () => {
       IconButton,
       {
         "data-testid": "user-settings-menu",
-        "aria-label": "more",
+        "aria-label": t("signOutMenu.moreIconTitle"),
         onClick: handleOpen,
         children: /* @__PURE__ */ jsx(MoreVertIcon, {})
       }
@@ -38,7 +41,7 @@ const UserSettingsMenu = () => {
         onClick: () => identityApi.signOut().catch((error) => errorApi.post(error)),
         children: [
           /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(SignOutIcon, {}) }),
-          "Sign Out"
+          t("signOutMenu.title")
         ]
       }
     ) })

package/dist/components/General/UserSettingsMenu.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsMenu.esm.js","sources":["../../../src/components/General/UserSettingsMenu.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 { MouseEvent, useState } from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport {\n  identityApiRef,\n  errorApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport const UserSettingsMenu = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = useState(false);\n  const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>(undefined);\n\n  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label=\"more\"\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem\n          data-testid=\"sign-out\"\n          onClick={() =>\n            identityApi.signOut().catch(error => errorApi.post(error))\n          }\n        >\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          Sign Out\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA8BO,MAAM,mBAAmB,MAAM;AACpC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAkC,KAAS,CAAA,CAAA;AAE3E,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAC3D,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAC/B,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,oBAAA;AAAA,QACZ,YAAW,EAAA,MAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QAET,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,KAChB;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,QAAoB,EAAA,IAAA,EAAY,SAAS,WAC7C,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,UAAA;AAAA,QACZ,OAAA,EAAS,MACP,WAAA,CAAY,OAAQ,EAAA,CAAE,MAAM,CAAS,KAAA,KAAA,QAAA,CAAS,IAAK,CAAA,KAAK,CAAC,CAAA;AAAA,QAG3D,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,CACf,EAAA,CAAA;AAAA,UAAe;AAAA;AAAA;AAAA,KAGnB,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsMenu.esm.js","sources":["../../../src/components/General/UserSettingsMenu.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 { MouseEvent, useState } from 'react';\nimport IconButton from '@material-ui/core/IconButton';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport SignOutIcon from '@material-ui/icons/MeetingRoom';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport {\n  identityApiRef,\n  errorApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\n/** @public */\nexport const UserSettingsMenu = () => {\n  const errorApi = useApi(errorApiRef);\n  const identityApi = useApi(identityApiRef);\n  const [open, setOpen] = useState(false);\n  const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>(undefined);\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    setOpen(true);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(undefined);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <IconButton\n        data-testid=\"user-settings-menu\"\n        aria-label={t('signOutMenu.moreIconTitle')}\n        onClick={handleOpen}\n      >\n        <MoreVertIcon />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>\n        <MenuItem\n          data-testid=\"sign-out\"\n          onClick={() =>\n            identityApi.signOut().catch(error => errorApi.post(error))\n          }\n        >\n          <ListItemIcon>\n            <SignOutIcon />\n          </ListItemIcon>\n          {t('signOutMenu.title')}\n        </MenuItem>\n      </Menu>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCO,MAAM,mBAAmB,MAAM;AACpC,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAkC,KAAS,CAAA,CAAA;AAC3E,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAC3D,IAAA,WAAA,CAAY,MAAM,aAAa,CAAA;AAC/B,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,KAAS,CAAA,CAAA;AACrB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,GACf;AAEA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,oBAAA;AAAA,QACZ,YAAA,EAAY,EAAE,2BAA2B,CAAA;AAAA,QACzC,OAAS,EAAA,UAAA;AAAA,QAET,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,KAChB;AAAA,oBACC,GAAA,CAAA,IAAA,EAAA,EAAK,QAAoB,EAAA,IAAA,EAAY,SAAS,WAC7C,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,UAAA;AAAA,QACZ,OAAA,EAAS,MACP,WAAA,CAAY,OAAQ,EAAA,CAAE,MAAM,CAAS,KAAA,KAAA,QAAA,CAAS,IAAK,CAAA,KAAK,CAAC,CAAA;AAAA,QAG3D,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,YAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,CACf,EAAA,CAAA;AAAA,UACC,EAAE,mBAAmB;AAAA;AAAA;AAAA,KAE1B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/General/UserSettingsPinToggle.esm.js

@@ -5,15 +5,18 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSidebarPinState } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const UserSettingsPinToggle = () => {
   const { isPinned, toggleSidebarPinState } = useSidebarPinState();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   return /* @__PURE__ */ jsxs(ListItem, { children: [
     /* @__PURE__ */ jsx(
       ListItemText,
       {
-        primary: "Pin Sidebar",
-        secondary: "Prevent the sidebar from collapsing"
+        primary: t("pinToggle.title"),
+        secondary: t("pinToggle.description")
       }
     ),
     /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(
@@ -21,7 +24,7 @@ const UserSettingsPinToggle = () => {
       {
         placement: "top",
         arrow: true,
-        title: `${isPinned ? "Unpin" : "Pin"} Sidebar`,
+        title: isPinned ? t("pinToggle.switchTitles.unpin") : t("pinToggle.switchTitles.pin"),
         children: /* @__PURE__ */ jsx(
           Switch,
           {
@@ -29,7 +32,7 @@ const UserSettingsPinToggle = () => {
             checked: isPinned,
             onChange: () => toggleSidebarPinState(),
             name: "pin",
-            inputProps: { "aria-label": "Pin Sidebar Switch" }
+            inputProps: { "aria-label": t("pinToggle.ariaLabelTitle") }
           }
         )
       }

package/dist/components/General/UserSettingsPinToggle.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsPinToggle.esm.js","sources":["../../../src/components/General/UserSettingsPinToggle.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 ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useSidebarPinState } from '@backstage/core-components';\n\n/** @public */\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useSidebarPinState();\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary=\"Pin Sidebar\"\n        secondary=\"Prevent the sidebar from collapsing\"\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': 'Pin Sidebar Switch' }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,EAAE,QAAA,EAAU,qBAAsB,EAAA,GAAI,kBAAmB,EAAA;AAE/D,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,aAAA;AAAA,QACR,SAAU,EAAA;AAAA;AAAA,KACZ;AAAA,wBACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,KAAK,EAAA,IAAA;AAAA,QACL,KAAO,EAAA,CAAA,EAAG,QAAW,GAAA,OAAA,GAAU,KAAK,CAAA,QAAA,CAAA;AAAA,QAEpC,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,SAAA;AAAA,YACN,OAAS,EAAA,QAAA;AAAA,YACT,QAAA,EAAU,MAAM,qBAAsB,EAAA;AAAA,YACtC,IAAK,EAAA,KAAA;AAAA,YACL,UAAA,EAAY,EAAE,YAAA,EAAc,oBAAqB;AAAA;AAAA;AACnD;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsPinToggle.esm.js","sources":["../../../src/components/General/UserSettingsPinToggle.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 ListItem from '@material-ui/core/ListItem';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Switch from '@material-ui/core/Switch';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { useSidebarPinState } from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\n/** @public */\nexport const UserSettingsPinToggle = () => {\n  const { isPinned, toggleSidebarPinState } = useSidebarPinState();\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  return (\n    <ListItem>\n      <ListItemText\n        primary={t('pinToggle.title')}\n        secondary={t('pinToggle.description')}\n      />\n      <ListItemSecondaryAction>\n        <Tooltip\n          placement=\"top\"\n          arrow\n          title={\n            isPinned\n              ? t('pinToggle.switchTitles.unpin')\n              : t('pinToggle.switchTitles.pin')\n          }\n        >\n          <Switch\n            color=\"primary\"\n            checked={isPinned}\n            onChange={() => toggleSidebarPinState()}\n            name=\"pin\"\n            inputProps={{ 'aria-label': t('pinToggle.ariaLabelTitle') }}\n          />\n        </Tooltip>\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA0BO,MAAM,wBAAwB,MAAM;AACzC,EAAA,MAAM,EAAE,QAAA,EAAU,qBAAsB,EAAA,GAAI,kBAAmB,EAAA;AAC/D,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,EAAE,iBAAiB,CAAA;AAAA,QAC5B,SAAA,EAAW,EAAE,uBAAuB;AAAA;AAAA,KACtC;AAAA,wBACC,uBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,KAAK,EAAA,IAAA;AAAA,QACL,OACE,QACI,GAAA,CAAA,CAAE,8BAA8B,CAAA,GAChC,EAAE,4BAA4B,CAAA;AAAA,QAGpC,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,SAAA;AAAA,YACN,OAAS,EAAA,QAAA;AAAA,YACT,QAAA,EAAU,MAAM,qBAAsB,EAAA;AAAA,YACtC,IAAK,EAAA,KAAA;AAAA,YACL,UAAY,EAAA,EAAE,YAAc,EAAA,CAAA,CAAE,0BAA0B,CAAE;AAAA;AAAA;AAC5D;AAAA,KAEJ,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Settings.esm.js

@@ -3,11 +3,14 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from '../plugin.esm.js';
 import { SidebarItem } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../translation.esm.js';
 
 const Settings = (props) => {
   const routePath = useRouteRef(settingsRouteRef);
   const Icon = props.icon ? props.icon : SettingsIcon;
-  return /* @__PURE__ */ jsx(SidebarItem, { text: "Settings", to: routePath(), icon: Icon });
+  const { t } = useTranslationRef(userSettingsTranslationRef);
+  return /* @__PURE__ */ jsx(SidebarItem, { text: t("sidebarTitle"), to: routePath(), icon: Icon });
 };
 
 export { Settings };

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

@@ -1 +1 @@
-{"version":3,"file":"Settings.esm.js","sources":["../../src/components/Settings.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 SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\n\n/** @public */\nexport const Settings = (props: { icon?: IconComponent }) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  return <SidebarItem text=\"Settings\" to={routePath()} icon={Icon} />;\n};\n"],"names":[],"mappings":";;;;;;AAsBa,MAAA,QAAA,GAAW,CAAC,KAAoC,KAAA;AAC3D,EAAM,MAAA,SAAA,GAAY,YAAY,gBAAgB,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,YAAA;AACvC,EAAO,uBAAA,GAAA,CAAC,eAAY,IAAK,EAAA,UAAA,EAAW,IAAI,SAAU,EAAA,EAAG,MAAM,IAAM,EAAA,CAAA;AACnE;;;;"}
+{"version":3,"file":"Settings.esm.js","sources":["../../src/components/Settings.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 SettingsIcon from '@material-ui/icons/Settings';\nimport { settingsRouteRef } from '../plugin';\nimport { SidebarItem } from '@backstage/core-components';\nimport { useRouteRef, IconComponent } from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../translation';\n\n/** @public */\nexport const Settings = (props: { icon?: IconComponent }) => {\n  const routePath = useRouteRef(settingsRouteRef);\n  const Icon = props.icon ? props.icon : SettingsIcon;\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n  return <SidebarItem text={t('sidebarTitle')} to={routePath()} icon={Icon} />;\n};\n"],"names":[],"mappings":";;;;;;;;AAwBa,MAAA,QAAA,GAAW,CAAC,KAAoC,KAAA;AAC3D,EAAM,MAAA,SAAA,GAAY,YAAY,gBAAgB,CAAA;AAC9C,EAAA,MAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,KAAA,CAAM,IAAO,GAAA,YAAA;AACvC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAC1D,EAAO,uBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,IAAA,EAAM,CAAE,CAAA,cAAc,GAAG,EAAI,EAAA,SAAA,EAAa,EAAA,IAAA,EAAM,IAAM,EAAA,CAAA;AAC5E;;;;"}

package/dist/components/SettingsLayout/SettingsLayout.esm.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useSidebarPinState, Page, Header, RoutedTabs } from '@backstage/core-components';
 import { attachComponentData, useElementFilter } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation.esm.js';
 
 const LAYOUT_DATA_KEY = "plugin.user-settings.settingsLayout";
 const LAYOUT_ROUTE_DATA_KEY = "plugin.user-settings.settingsLayoutRoute";
@@ -10,6 +12,7 @@ attachComponentData(Route, "core.gatherMountPoints", true);
 const SettingsLayout = (props) => {
   const { title, children } = props;
   const { isMobile } = useSidebarPinState();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
   const routes = useElementFilter(
     children,
     (elements) => elements.selectByComponentData({
@@ -18,7 +21,7 @@ const SettingsLayout = (props) => {
     }).getElements().map((child) => child.props)
   );
   return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
-    !isMobile && /* @__PURE__ */ jsx(Header, { title: title ?? "Settings" }),
+    !isMobile && /* @__PURE__ */ jsx(Header, { title: title ?? t("settingsLayout.title") }),
     /* @__PURE__ */ jsx(RoutedTabs, { routes })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsLayout.esm.js","sources":["../../../src/components/SettingsLayout/SettingsLayout.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 { ElementType, ReactNode } from 'react';\nimport { TabProps } from '@material-ui/core/Tab';\nimport {\n  Header,\n  Page,\n  RoutedTabs,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\n\n/** @public */\nexport type SettingsLayoutRouteProps = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<ElementType, { component?: ElementType }>;\n};\n\nexport const LAYOUT_DATA_KEY = 'plugin.user-settings.settingsLayout';\nexport const LAYOUT_ROUTE_DATA_KEY = 'plugin.user-settings.settingsLayoutRoute';\n\nconst Route: (props: SettingsLayoutRouteProps) => null = () => null;\nattachComponentData(Route, LAYOUT_ROUTE_DATA_KEY, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type SettingsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: ReactNode;\n};\n\n/**\n * @public\n */\nexport const SettingsLayout = (props: SettingsLayoutProps) => {\n  const { title, children } = props;\n  const { isMobile } = useSidebarPinState();\n\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n        withStrictError:\n          'Child of SettingsLayout must be an SettingsLayout.Route',\n      })\n      .getElements<SettingsLayoutRouteProps>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      {!isMobile && <Header title={title ?? 'Settings'} />}\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nattachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);\n\nSettingsLayout.Route = Route;\n"],"names":[],"mappings":";;;;AAqCO,MAAM,eAAkB,GAAA;AACxB,MAAM,qBAAwB,GAAA;AAErC,MAAM,QAAmD,MAAM,IAAA;AAC/D,mBAAoB,CAAA,KAAA,EAAO,uBAAuB,IAAI,CAAA;AAGtD,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AAY5C,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,qBAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK;AAAA,GAC7B;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACX,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,QAAY,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,SAAS,UAAY,EAAA,CAAA;AAAA,oBAClD,GAAA,CAAC,cAAW,MAAgB,EAAA;AAAA,GAC9B,EAAA,CAAA;AAEJ;AAEA,mBAAoB,CAAA,cAAA,EAAgB,iBAAiB,IAAI,CAAA;AAEzD,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}
+{"version":3,"file":"SettingsLayout.esm.js","sources":["../../../src/components/SettingsLayout/SettingsLayout.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 { ElementType, ReactNode } from 'react';\nimport { TabProps } from '@material-ui/core/Tab';\nimport {\n  Header,\n  Page,\n  RoutedTabs,\n  useSidebarPinState,\n} from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { userSettingsTranslationRef } from '../../translation';\n\n/** @public */\nexport type SettingsLayoutRouteProps = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<ElementType, { component?: ElementType }>;\n};\n\nexport const LAYOUT_DATA_KEY = 'plugin.user-settings.settingsLayout';\nexport const LAYOUT_ROUTE_DATA_KEY = 'plugin.user-settings.settingsLayoutRoute';\n\nconst Route: (props: SettingsLayoutRouteProps) => null = () => null;\nattachComponentData(Route, LAYOUT_ROUTE_DATA_KEY, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type SettingsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: ReactNode;\n};\n\n/**\n * @public\n */\nexport const SettingsLayout = (props: SettingsLayoutProps) => {\n  const { title, children } = props;\n  const { isMobile } = useSidebarPinState();\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: LAYOUT_ROUTE_DATA_KEY,\n        withStrictError:\n          'Child of SettingsLayout must be an SettingsLayout.Route',\n      })\n      .getElements<SettingsLayoutRouteProps>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      {!isMobile && <Header title={title ?? t('settingsLayout.title')} />}\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nattachComponentData(SettingsLayout, LAYOUT_DATA_KEY, true);\n\nSettingsLayout.Route = Route;\n"],"names":[],"mappings":";;;;;;AAuCO,MAAM,eAAkB,GAAA;AACxB,MAAM,qBAAwB,GAAA;AAErC,MAAM,QAAmD,MAAM,IAAA;AAC/D,mBAAoB,CAAA,KAAA,EAAO,uBAAuB,IAAI,CAAA;AAGtD,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA;AAY5C,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AACxC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,0BAA0B,CAAA;AAE1D,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,qBAAA;AAAA,MACL,eACE,EAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK;AAAA,GAC7B;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACX,EAAA,QAAA,EAAA;AAAA,IAAA,CAAC,4BAAa,GAAA,CAAA,MAAA,EAAA,EAAO,OAAO,KAAS,IAAA,CAAA,CAAE,sBAAsB,CAAG,EAAA,CAAA;AAAA,oBACjE,GAAA,CAAC,cAAW,MAAgB,EAAA;AAAA,GAC9B,EAAA,CAAA;AAEJ;AAEA,mBAAoB,CAAA,cAAA,EAAgB,iBAAiB,IAAI,CAAA;AAEzD,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}

package/dist/translation.esm.js

@@ -18,7 +18,85 @@ const userSettingsTranslationRef = createTranslationRef({
         dark: "Dark",
         auto: "Auto"
       }
-    }
+    },
+    signOutMenu: {
+      title: "Sign Out",
+      moreIconTitle: "more"
+    },
+    pinToggle: {
+      title: "Pin Sidebar",
+      description: "Prevent the sidebar from collapsing",
+      switchTitles: {
+        unpin: "Unpin Sidebar",
+        pin: "Pin Sidebar"
+      },
+      ariaLabelTitle: "Pin Sidebar Switch"
+    },
+    identityCard: {
+      title: "Backstage Identity",
+      noIdentityTitle: "No Backstage Identity",
+      userEntity: "User Entity",
+      ownershipEntities: "Ownership Entities"
+    },
+    defaultProviderSettings: {
+      description: "Provides authentication towards {{provider}} APIs and identities"
+    },
+    emptyProviders: {
+      title: "No Authentication Providers",
+      description: "You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.",
+      action: {
+        title: "Open app-config.yaml and make the changes as highlighted below:",
+        readMoreButtonTitle: "Read More"
+      }
+    },
+    providerSettingsItem: {
+      title: {
+        signIn: "Sign in to {{title}}",
+        signOut: "Sign out from {{title}}"
+      },
+      buttonTitle: {
+        signIn: "Sign in",
+        signOut: "Sign out"
+      }
+    },
+    authProviders: {
+      title: "Available Providers"
+    },
+    defaultSettingsPage: {
+      tabsTitle: {
+        general: "General",
+        authProviders: "Authentication Providers",
+        featureFlags: "Feature Flags"
+      }
+    },
+    featureFlags: {
+      title: "Feature Flags",
+      description: "Please refresh the page when toggling feature flags",
+      emptyFlags: {
+        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: {
+          title: "An example for how to add a feature flag is highlighted below:",
+          readMoreButtonTitle: "Read More"
+        }
+      },
+      filterTitle: "Filter",
+      clearFilter: "Clear filter",
+      flagItem: {
+        title: {
+          disable: "Disable",
+          enable: "Enable"
+        },
+        subtitle: {
+          registeredInApplication: "Registered in the application",
+          registeredInPlugin: "Registered in {{pluginId}} plugin"
+        }
+      }
+    },
+    settingsLayout: {
+      title: "Settings"
+    },
+    sidebarTitle: "Settings"
   }
 });
 

package/dist/translation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const userSettingsTranslationRef = createTranslationRef({\n  id: 'user-settings',\n  messages: {\n    languageToggle: {\n      title: 'Language',\n      description: 'Change the language',\n      select: 'Select language {{language}}',\n    },\n    themeToggle: {\n      title: 'Theme',\n      description: 'Change the theme mode',\n      select: 'Select theme {{theme}}',\n      selectAuto: 'Select Auto Theme',\n      names: {\n        light: 'Light',\n        dark: 'Dark',\n        auto: 'Auto',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAmBO,MAAM,6BAA6B,oBAAqB,CAAA;AAAA,EAC7D,EAAI,EAAA,eAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA;AAAA,MACd,KAAO,EAAA,UAAA;AAAA,MACP,WAAa,EAAA,qBAAA;AAAA,MACb,MAAQ,EAAA;AAAA,KACV;AAAA,IACA,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,OAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,MACb,MAAQ,EAAA,wBAAA;AAAA,MACR,UAAY,EAAA,mBAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,OAAA;AAAA,QACP,IAAM,EAAA,MAAA;AAAA,QACN,IAAM,EAAA;AAAA;AACR;AACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2023 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 { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/** @alpha */\nexport const userSettingsTranslationRef = createTranslationRef({\n  id: 'user-settings',\n  messages: {\n    languageToggle: {\n      title: 'Language',\n      description: 'Change the language',\n      select: 'Select language {{language}}',\n    },\n    themeToggle: {\n      title: 'Theme',\n      description: 'Change the theme mode',\n      select: 'Select theme {{theme}}',\n      selectAuto: 'Select Auto Theme',\n      names: {\n        light: 'Light',\n        dark: 'Dark',\n        auto: 'Auto',\n      },\n    },\n    signOutMenu: {\n      title: 'Sign Out',\n      moreIconTitle: 'more',\n    },\n    pinToggle: {\n      title: 'Pin Sidebar',\n      description: 'Prevent the sidebar from collapsing',\n      switchTitles: {\n        unpin: 'Unpin Sidebar',\n        pin: 'Pin Sidebar',\n      },\n      ariaLabelTitle: 'Pin Sidebar Switch',\n    },\n    identityCard: {\n      title: 'Backstage Identity',\n      noIdentityTitle: 'No Backstage Identity',\n      userEntity: 'User Entity',\n      ownershipEntities: 'Ownership Entities',\n    },\n    defaultProviderSettings: {\n      description:\n        'Provides authentication towards {{provider}} APIs and identities',\n    },\n    emptyProviders: {\n      title: 'No Authentication Providers',\n      description:\n        'You can add Authentication Providers to Backstage which allows you to use these providers to authenticate yourself.',\n      action: {\n        title:\n          'Open app-config.yaml and make the changes as highlighted below:',\n        readMoreButtonTitle: 'Read More',\n      },\n    },\n    providerSettingsItem: {\n      title: {\n        signIn: 'Sign in to {{title}}',\n        signOut: 'Sign out from {{title}}',\n      },\n      buttonTitle: {\n        signIn: 'Sign in',\n        signOut: 'Sign out',\n      },\n    },\n    authProviders: {\n      title: 'Available Providers',\n    },\n    defaultSettingsPage: {\n      tabsTitle: {\n        general: 'General',\n        authProviders: 'Authentication Providers',\n        featureFlags: 'Feature Flags',\n      },\n    },\n    featureFlags: {\n      title: 'Feature Flags',\n      description: 'Please refresh the page when toggling feature flags',\n      emptyFlags: {\n        title: 'No Feature Flags',\n        description:\n          '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.',\n        action: {\n          title:\n            'An example for how to add a feature flag is highlighted below:',\n          readMoreButtonTitle: 'Read More',\n        },\n      },\n      filterTitle: 'Filter',\n      clearFilter: 'Clear filter',\n      flagItem: {\n        title: {\n          disable: 'Disable',\n          enable: 'Enable',\n        },\n        subtitle: {\n          registeredInApplication: 'Registered in the application',\n          registeredInPlugin: 'Registered in {{pluginId}} plugin',\n        },\n      },\n    },\n    settingsLayout: {\n      title: 'Settings',\n    },\n    sidebarTitle: 'Settings',\n  },\n});\n"],"names":[],"mappings":";;AAmBO,MAAM,6BAA6B,oBAAqB,CAAA;AAAA,EAC7D,EAAI,EAAA,eAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA;AAAA,MACd,KAAO,EAAA,UAAA;AAAA,MACP,WAAa,EAAA,qBAAA;AAAA,MACb,MAAQ,EAAA;AAAA,KACV;AAAA,IACA,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,OAAA;AAAA,MACP,WAAa,EAAA,uBAAA;AAAA,MACb,MAAQ,EAAA,wBAAA;AAAA,MACR,UAAY,EAAA,mBAAA;AAAA,MACZ,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,OAAA;AAAA,QACP,IAAM,EAAA,MAAA;AAAA,QACN,IAAM,EAAA;AAAA;AACR,KACF;AAAA,IACA,WAAa,EAAA;AAAA,MACX,KAAO,EAAA,UAAA;AAAA,MACP,aAAe,EAAA;AAAA,KACjB;AAAA,IACA,SAAW,EAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,WAAa,EAAA,qCAAA;AAAA,MACb,YAAc,EAAA;AAAA,QACZ,KAAO,EAAA,eAAA;AAAA,QACP,GAAK,EAAA;AAAA,OACP;AAAA,MACA,cAAgB,EAAA;AAAA,KAClB;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,KAAO,EAAA,oBAAA;AAAA,MACP,eAAiB,EAAA,uBAAA;AAAA,MACjB,UAAY,EAAA,aAAA;AAAA,MACZ,iBAAmB,EAAA;AAAA,KACrB;AAAA,IACA,uBAAyB,EAAA;AAAA,MACvB,WACE,EAAA;AAAA,KACJ;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,KAAO,EAAA,6BAAA;AAAA,MACP,WACE,EAAA,qHAAA;AAAA,MACF,MAAQ,EAAA;AAAA,QACN,KACE,EAAA,iEAAA;AAAA,QACF,mBAAqB,EAAA;AAAA;AACvB,KACF;AAAA,IACA,oBAAsB,EAAA;AAAA,MACpB,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA,sBAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,SAAA;AAAA,QACR,OAAS,EAAA;AAAA;AACX,KACF;AAAA,IACA,aAAe,EAAA;AAAA,MACb,KAAO,EAAA;AAAA,KACT;AAAA,IACA,mBAAqB,EAAA;AAAA,MACnB,SAAW,EAAA;AAAA,QACT,OAAS,EAAA,SAAA;AAAA,QACT,aAAe,EAAA,0BAAA;AAAA,QACf,YAAc,EAAA;AAAA;AAChB,KACF;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,KAAO,EAAA,eAAA;AAAA,MACP,WAAa,EAAA,qDAAA;AAAA,MACb,UAAY,EAAA;AAAA,QACV,KAAO,EAAA,kBAAA;AAAA,QACP,WACE,EAAA,mLAAA;AAAA,QACF,MAAQ,EAAA;AAAA,UACN,KACE,EAAA,gEAAA;AAAA,UACF,mBAAqB,EAAA;AAAA;AACvB,OACF;AAAA,MACA,WAAa,EAAA,QAAA;AAAA,MACb,WAAa,EAAA,cAAA;AAAA,MACb,QAAU,EAAA;AAAA,QACR,KAAO,EAAA;AAAA,UACL,OAAS,EAAA,SAAA;AAAA,UACT,MAAQ,EAAA;AAAA,SACV;AAAA,QACA,QAAU,EAAA;AAAA,UACR,uBAAyB,EAAA,+BAAA;AAAA,UACzB,kBAAoB,EAAA;AAAA;AACtB;AACF,KACF;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,KAAO,EAAA;AAAA,KACT;AAAA,IACA,YAAc,EAAA;AAAA;AAElB,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-user-settings",
-  "version": "0.8.21",
+  "version": "0.8.22-next.0",
   "description": "A Backstage plugin that provides a settings page",
   "backstage": {
     "role": "frontend-plugin",
@@ -67,18 +67,18 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^1.7.3",
-    "@backstage/core-app-api": "^1.16.1",
-    "@backstage/core-compat-api": "^0.4.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/plugin-catalog-react": "^1.17.0",
-    "@backstage/plugin-signals-react": "^0.0.12",
-    "@backstage/plugin-user-settings-common": "^0.0.1",
-    "@backstage/theme": "^0.6.5",
-    "@backstage/types": "^1.2.1",
+    "@backstage/catalog-model": "1.7.3",
+    "@backstage/core-app-api": "1.16.1",
+    "@backstage/core-compat-api": "0.4.2-next.0",
+    "@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/plugin-catalog-react": "1.18.0-next.0",
+    "@backstage/plugin-signals-react": "0.0.12",
+    "@backstage/plugin-user-settings-common": "0.0.1",
+    "@backstage/theme": "0.6.5",
+    "@backstage/types": "1.2.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -86,10 +86,10 @@
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.32.0",
-    "@backstage/dev-utils": "^1.1.9",
-    "@backstage/plugin-catalog": "^1.29.0",
-    "@backstage/test-utils": "^1.7.7",
+    "@backstage/cli": "0.32.1-next.0",
+    "@backstage/dev-utils": "1.1.10-next.0",
+    "@backstage/plugin-catalog": "1.29.1-next.0",
+    "@backstage/test-utils": "1.7.7",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",