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

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/UserSettingsLanguageToggle.esm.js

@@ -42,6 +42,7 @@ const useStyles = makeStyles((theme) => ({
     }
   }
 }));
+const capitalize = (s) => s.charAt(0).toLocaleUpperCase("en-US") + s.slice(1);
 const UserSettingsLanguageToggle = () => {
   const classes = useStyles();
   const languageApi = useApi(appLanguageApiRef);
@@ -63,7 +64,8 @@ const UserSettingsLanguageToggle = () => {
       const names = new Intl.DisplayNames([language], {
         type: "language"
       });
-      return names.of(language) || language;
+      const languageDisplayName = names.of(language);
+      return languageDisplayName ? capitalize(languageDisplayName) : language;
     } catch (err) {
       return language;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsLanguageToggle.esm.js","sources":["../../../src/components/General/UserSettingsLanguageToggle.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 { useState } from 'react';\nimport {\n  useTranslationRef,\n  appLanguageApiRef,\n} from '@backstage/core-plugin-api/alpha';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { userSettingsTranslationRef } from '../../translation';\nimport { useApi } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport { Select } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingBottom: 8,\n    paddingRight: 16,\n  },\n  list: {\n    width: 'initial',\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    paddingRight: 0,\n    paddingLeft: 0,\n  },\n  listItemSecondaryAction: {\n    position: 'relative',\n    transform: 'unset',\n    top: 'auto',\n    right: 'auto',\n    paddingLeft: 16,\n    [theme.breakpoints.down('xs')]: {\n      paddingLeft: 0,\n    },\n  },\n}));\n\n/** @public */\nexport const UserSettingsLanguageToggle = () => {\n  const classes = useStyles();\n  const languageApi = useApi(appLanguageApiRef);\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const [languageObservable] = useState(() => languageApi.language$());\n  const { language: currentLanguage } = useObservable(\n    languageObservable,\n    languageApi.getLanguage(),\n  );\n\n  const { languages } = languageApi.getAvailableLanguages();\n\n  if (languages.length <= 1) {\n    return null;\n  }\n\n  const handleSetLanguage = (newLanguage: string | undefined) => {\n    languageApi.setLanguage(newLanguage);\n  };\n\n  const getLanguageDisplayName = (language: string) => {\n    try {\n      const names = new Intl.DisplayNames([language], {\n        type: 'language',\n      });\n      return names.of(language) || language;\n    } catch (err) {\n      return language;\n    }\n  };\n\n  return (\n    <ListItem\n      className={classes.list}\n      classes={{ container: classes.container }}\n    >\n      <ListItemText\n        className={classes.listItemText}\n        primary={t('languageToggle.title')}\n        secondary={t('languageToggle.description')}\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <Select\n          label=\"\"\n          selected={currentLanguage}\n          items={languages.map(language => ({\n            label: getLanguageDisplayName(language),\n            value: language,\n          }))}\n          onChange={selectedItems => handleSetLanguage(selectedItems as string)}\n        />\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserSettingsLanguageToggle.esm.js","sources":["../../../src/components/General/UserSettingsLanguageToggle.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 { useState } from 'react';\nimport {\n  useTranslationRef,\n  appLanguageApiRef,\n} from '@backstage/core-plugin-api/alpha';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { userSettingsTranslationRef } from '../../translation';\nimport { useApi } from '@backstage/core-plugin-api';\nimport useObservable from 'react-use/esm/useObservable';\nimport { Select } from '@backstage/core-components';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingBottom: 8,\n    paddingRight: 16,\n  },\n  list: {\n    width: 'initial',\n    [theme.breakpoints.down('xs')]: {\n      width: '100%',\n      padding: `0 0 12px`,\n    },\n  },\n  listItemText: {\n    paddingRight: 0,\n    paddingLeft: 0,\n  },\n  listItemSecondaryAction: {\n    position: 'relative',\n    transform: 'unset',\n    top: 'auto',\n    right: 'auto',\n    paddingLeft: 16,\n    [theme.breakpoints.down('xs')]: {\n      paddingLeft: 0,\n    },\n  },\n}));\n\nconst capitalize = (s: string) =>\n  s.charAt(0).toLocaleUpperCase('en-US') + s.slice(1);\n\n/** @public */\nexport const UserSettingsLanguageToggle = () => {\n  const classes = useStyles();\n  const languageApi = useApi(appLanguageApiRef);\n  const { t } = useTranslationRef(userSettingsTranslationRef);\n\n  const [languageObservable] = useState(() => languageApi.language$());\n  const { language: currentLanguage } = useObservable(\n    languageObservable,\n    languageApi.getLanguage(),\n  );\n\n  const { languages } = languageApi.getAvailableLanguages();\n\n  if (languages.length <= 1) {\n    return null;\n  }\n\n  const handleSetLanguage = (newLanguage: string | undefined) => {\n    languageApi.setLanguage(newLanguage);\n  };\n\n  const getLanguageDisplayName = (language: string) => {\n    try {\n      const names = new Intl.DisplayNames([language], {\n        type: 'language',\n      });\n      const languageDisplayName = names.of(language);\n      return languageDisplayName ? capitalize(languageDisplayName) : language;\n    } catch (err) {\n      return language;\n    }\n  };\n\n  return (\n    <ListItem\n      className={classes.list}\n      classes={{ container: classes.container }}\n    >\n      <ListItemText\n        className={classes.listItemText}\n        primary={t('languageToggle.title')}\n        secondary={t('languageToggle.description')}\n      />\n      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>\n        <Select\n          label=\"\"\n          selected={currentLanguage}\n          items={languages.map(language => ({\n            label: getLanguageDisplayName(language),\n            value: language,\n          }))}\n          onChange={selectedItems => handleSetLanguage(selectedItems as string)}\n        />\n      </ListItemSecondaryAction>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

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;;;;"}