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

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { UserSettingsAuthProviders } from '../AuthProviders/UserSettingsAuthProviders.esm.js';
 import '@material-ui/icons/Star';
+import 'react';
 import '@material-ui/core/Button';
 import '@material-ui/core/Grid';
 import '@material-ui/core/ListItem';
@@ -30,14 +31,19 @@ import { SettingsLayout } from '../SettingsLayout/SettingsLayout.esm.js';
 
 const DefaultSettingsPage = (props) => {
   const { providerSettings, tabs } = props;
-  return /* @__PURE__ */ React.createElement(SettingsLayout, null, /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: "general", title: "General" }, /* @__PURE__ */ React.createElement(UserSettingsGeneral, null)), /* @__PURE__ */ React.createElement(
-    SettingsLayout.Route,
-    {
-      path: "auth-providers",
-      title: "Authentication Providers"
-    },
-    /* @__PURE__ */ React.createElement(UserSettingsAuthProviders, { providerSettings })
-  ), /* @__PURE__ */ React.createElement(SettingsLayout.Route, { path: "feature-flags", title: "Feature Flags" }, /* @__PURE__ */ React.createElement(UserSettingsFeatureFlags, null)), tabs);
+  return /* @__PURE__ */ jsxs(SettingsLayout, { children: [
+    /* @__PURE__ */ jsx(SettingsLayout.Route, { path: "general", title: "General", children: /* @__PURE__ */ jsx(UserSettingsGeneral, {}) }),
+    /* @__PURE__ */ jsx(
+      SettingsLayout.Route,
+      {
+        path: "auth-providers",
+        title: "Authentication Providers",
+        children: /* @__PURE__ */ jsx(UserSettingsAuthProviders, { providerSettings })
+      }
+    ),
+    /* @__PURE__ */ jsx(SettingsLayout.Route, { path: "feature-flags", title: "Feature Flags", children: /* @__PURE__ */ jsx(UserSettingsFeatureFlags, {}) }),
+    tabs
+  ] });
 };
 
 export { DefaultSettingsPage };

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 React 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?: React.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,uBACG,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,cAAA,CAAe,KAAf,EAAA,EAAqB,IAAK,EAAA,SAAA,EAAU,KAAM,EAAA,SAAA,EAAA,kBACxC,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAoB,CACvB,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAe,CAAA,KAAA;AAAA,IAAf;AAAA,MACC,IAAK,EAAA,gBAAA;AAAA,MACL,KAAM,EAAA;AAAA,KAAA;AAAA,oBAEN,KAAA,CAAA,aAAA,CAAC,6BAA0B,gBAAoC,EAAA;AAAA,GAEjE,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,CAAA,KAAA,EAAf,EAAqB,IAAA,EAAK,eAAgB,EAAA,KAAA,EAAM,eAC/C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,IAAA,CAC5B,GACC,IACH,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';\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;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -10,30 +10,34 @@ export default createPlugin({
   featureFlags: [{ name: 'enable-example-feature' }],
 });
 `;
-const EmptyFlags = () => /* @__PURE__ */ React.createElement(
+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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1" }, "An example for how to add a feature flag is highlighted below:"), /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: EXAMPLE,
-        language: "typescript",
-        showLineNumbers: true,
-        highlightedNumbers: [6],
-        customStyle: { background: "inherit", fontSize: "115%" }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        href: "https://backstage.io/docs/api/utility-apis"
-      },
-      "Read More"
-    ))
+    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"
+        }
+      )
+    ] })
   }
 );
 

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 React from 'react';\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":";;;;;AAqBA,MAAM,OAAU,GAAA,CAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AAQT,MAAM,aAAa,sBACxB,KAAA,CAAA,aAAA;AAAA,EAAC,UAAA;AAAA,EAAA;AAAA,IACC,OAAQ,EAAA,SAAA;AAAA,IACR,KAAM,EAAA,kBAAA;AAAA,IACN,WAAY,EAAA,mLAAA;AAAA,IACZ,wBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,gEAE5B,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,OAAA;AAAA,QACN,QAAS,EAAA,YAAA;AAAA,QACT,eAAe,EAAA,IAAA;AAAA,QACf,kBAAA,EAAoB,CAAC,CAAC,CAAA;AAAA,QACtB,WAAa,EAAA,EAAE,UAAY,EAAA,SAAA,EAAW,UAAU,MAAO;AAAA;AAAA,KAEzD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,KAAM,EAAA,SAAA;AAAA,QACN,IAAK,EAAA;AAAA,OAAA;AAAA,MACN;AAAA,KAGH;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';\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;;;;"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -11,7 +11,10 @@ const getSecondaryText = (flag) => {
   }
   return flag.pluginId ? `Registered in ${flag.pluginId} plugin` : "Registered in the application";
 };
-const FlagItem = ({ flag, enabled, toggleHandler }) => /* @__PURE__ */ React.createElement(ListItem, { divider: true, button: true, onClick: () => toggleHandler(flag.name) }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", arrow: true, title: enabled ? "Disable" : "Enable" }, /* @__PURE__ */ React.createElement(Switch, { color: "primary", checked: enabled, name: flag.name }))), /* @__PURE__ */ React.createElement(ListItemText, { primary: flag.name, secondary: getSecondaryText(flag) }));
+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 React from 'react';\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":";;;;;;;AA8BA,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;AAEa,MAAA,QAAA,GAAW,CAAC,EAAE,IAAM,EAAA,OAAA,EAAS,eACxC,qBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,OAAA,EAAO,IAAC,EAAA,MAAA,EAAM,MAAC,OAAS,EAAA,MAAM,aAAc,CAAA,IAAA,CAAK,IAAI,CAAA,EAAA,sCAC5D,YACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,KAAM,EAAA,KAAA,EAAK,MAAC,KAAO,EAAA,OAAA,GAAU,SAAY,GAAA,QAAA,EAAA,kBACzD,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,OAAM,SAAU,EAAA,OAAA,EAAS,OAAS,EAAA,IAAA,EAAM,IAAK,CAAA,IAAA,EAAM,CAC7D,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,OAAS,EAAA,IAAA,CAAK,MAAM,SAAW,EAAA,gBAAA,CAAiB,IAAI,CAAA,EAAG,CACvE;;;;"}
+{"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;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback } from 'react';
 import List from '@material-ui/core/List';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
@@ -17,7 +18,7 @@ const sortFlags = (flags, featureFlagsApi) => {
 };
 const UserSettingsFeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
-  const inputRef = React.useRef();
+  const inputRef = useRef();
   const initialFeatureFlags = featureFlagsApi.getRegisteredFlags();
   const initialFeatureFlagsSorted = sortFlags(
     initialFeatureFlags,
@@ -44,7 +45,7 @@ const UserSettingsFeatureFlags = () => {
     [featureFlagsApi]
   );
   if (!featureFlags.length) {
-    return /* @__PURE__ */ React.createElement(EmptyFlags, null);
+    return /* @__PURE__ */ jsx(EmptyFlags, {});
   }
   const clearFilterInput = () => {
     setFilterInput("");
@@ -54,41 +55,47 @@ const UserSettingsFeatureFlags = () => {
     const featureFlagName = featureFlag.name.toLocaleLowerCase("en-US");
     return featureFlagName.includes(filterInput.toLocaleLowerCase("en-US"));
   });
-  const Header = () => /* @__PURE__ */ React.createElement(Grid, { container: true, style: { justifyContent: "space-between" } }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, md: 8 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, "Feature Flags"), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "Please refresh the page when toggling feature flags")), featureFlags.length >= 10 && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 6, md: 4 }, /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: "Filter",
-      style: { display: "flex", justifyContent: "flex-end" },
-      inputRef: (ref) => ref && ref.focus(),
-      InputProps: {
-        ...filterInput.length && {
-          endAdornment: /* @__PURE__ */ React.createElement(
-            IconButton,
-            {
-              "aria-label": "Clear filter",
-              onClick: clearFilterInput,
-              edge: "end"
-            },
-            /* @__PURE__ */ React.createElement(ClearIcon, null)
-          )
-        }
-      },
-      onChange: (e) => setFilterInput(e.target.value),
-      value: filterInput
-    }
-  )));
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: /* @__PURE__ */ React.createElement(Header, null) }, /* @__PURE__ */ React.createElement(List, { dense: true }, filteredFeatureFlags.map((featureFlag) => {
+  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" })
+    ] }),
+    featureFlags.length >= 10 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, md: 4, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        label: "Filter",
+        style: { display: "flex", justifyContent: "flex-end" },
+        inputRef: (ref) => ref && ref.focus(),
+        InputProps: {
+          ...filterInput.length && {
+            endAdornment: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                "aria-label": "Clear filter",
+                onClick: clearFilterInput,
+                edge: "end",
+                children: /* @__PURE__ */ jsx(ClearIcon, {})
+              }
+            )
+          }
+        },
+        onChange: (e) => setFilterInput(e.target.value),
+        value: filterInput
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsx(InfoCard, { title: /* @__PURE__ */ jsx(Header, {}), children: /* @__PURE__ */ jsx(List, { dense: true, children: filteredFeatureFlags.map((featureFlag) => {
     const enabled = Boolean(state[featureFlag.name]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       FlagItem,
       {
-        key: featureFlag.name,
         flag: featureFlag,
         enabled,
         toggleHandler: toggleFlag
-      }
+      },
+      featureFlag.name
     );
-  })));
+  }) }) });
 };
 
 export { UserSettingsFeatureFlags, sortFlags };

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 React, { 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 = React.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":";;;;;;;;;;;;AAkCa,MAAA,SAAA,GAAY,CACvB,KAAA,EACA,eACkB,KAAA;AAClB,EAAM,MAAA,WAAA,GAAc,MAAM,MAAO,CAAA,CAAA,IAAA,KAAQ,gBAAgB,QAAS,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAC5E,EAAM,MAAA,SAAA,GAAY,MAAM,MAAO,CAAA,CAAA,IAAA,KAAQ,CAAC,eAAgB,CAAA,QAAA,CAAS,IAAK,CAAA,IAAI,CAAC,CAAA;AAC3E,EAAA,OAAO,CAAC,GAAG,WAAa,EAAA,GAAG,SAAS,CAAA;AACtC;AAGO,MAAM,2BAA2B,MAAM;AAC5C,EAAM,MAAA,eAAA,GAAkB,OAAO,kBAAkB,CAAA;AACjD,EAAM,MAAA,QAAA,GAAW,MAAM,MAAoB,EAAA;AAE3C,EAAM,MAAA,mBAAA,GAAsB,gBAAgB,kBAAmB,EAAA;AAC/D,EAAA,MAAM,yBAA4B,GAAA,SAAA;AAAA,IAChC,mBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,CAAC,YAAY,CAAI,GAAA,QAAA,CAAS,yBAAyB,CAAA;AAEzD,EAAA,MAAM,mBAAmB,MAAO,CAAA,WAAA;AAAA,IAC9B,YAAa,CAAA,GAAA,CAAI,CAAC,EAAE,IAAK,EAAA,KAAM,CAAC,IAAA,EAAM,eAAgB,CAAA,QAAA,CAAS,IAAI,CAAC,CAAC;AAAA,GACvE;AAEA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAkC,gBAAgB,CAAA;AAC5E,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAiB,EAAE,CAAA;AAEzD,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,MAAM,WAAW,eAAgB,CAAA,QAAA,CAAS,QAAQ,CAC9C,GAAA,gBAAA,CAAiB,OACjB,gBAAiB,CAAA,MAAA;AAErB,MAAA,eAAA,CAAgB,IAAK,CAAA;AAAA,QACnB,MAAQ,EAAA,EAAE,CAAC,QAAQ,GAAG,QAAS,EAAA;AAAA,QAC/B,KAAO,EAAA;AAAA,OACR,CAAA;AAED,MAAA,QAAA,CAAS,CAAc,SAAA,MAAA;AAAA,QACrB,GAAG,SAAA;AAAA,QACH,CAAC,QAAQ,GAAG,QAAA,KAAa,gBAAiB,CAAA;AAAA,OAC1C,CAAA,CAAA;AAAA,KACJ;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EAAI,IAAA,CAAC,aAAa,MAAQ,EAAA;AACxB,IAAA,2CAAQ,UAAW,EAAA,IAAA,CAAA;AAAA;AAGrB,EAAA,MAAM,mBAAmB,MAAM;AAC7B,IAAA,cAAA,CAAe,EAAE,CAAA;AACjB,IAAA,QAAA,EAAU,SAAS,KAAM,EAAA;AAAA,GAC3B;AAEA,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,MAAA,CAAO,CAAe,WAAA,KAAA;AAC9D,IAAA,MAAM,eAAkB,GAAA,WAAA,CAAY,IAAK,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAClE,IAAA,OAAO,eAAgB,CAAA,QAAA,CAAS,WAAY,CAAA,iBAAA,CAAkB,OAAO,CAAC,CAAA;AAAA,GACvE,CAAA;AAED,EAAA,MAAM,SAAS,sBACb,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,OAAO,EAAE,cAAA,EAAgB,iBACvC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CAAG,EAAA,EAAA,EAAI,qBACnB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EAAK,eAAa,CACtC,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,WAAA,EAAA,EAAY,qDAEhC,CACF,CAAA,EACC,aAAa,MAAU,IAAA,EAAA,wCACrB,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,CAAA,EAAG,IAAI,CACpB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,gBAAgB,UAAW,EAAA;AAAA,MACrD,QAAU,EAAA,CAAA,GAAA,KAAO,GAAO,IAAA,GAAA,CAAI,KAAM,EAAA;AAAA,MAClC,UAAY,EAAA;AAAA,QACV,GAAI,YAAY,MAAU,IAAA;AAAA,UACxB,YACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAW,EAAA,cAAA;AAAA,cACX,OAAS,EAAA,gBAAA;AAAA,cACT,IAAK,EAAA;AAAA,aAAA;AAAA,gDAEJ,SAAU,EAAA,IAAA;AAAA;AACb;AAEJ,OACF;AAAA,MACA,QAAU,EAAA,CAAA,CAAA,KAAK,cAAe,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MAC5C,KAAO,EAAA;AAAA;AAAA,GAEX,CAEJ,CAAA;AAGF,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,IAAA,CAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,KAAK,EAAA,IAAA,EAAA,EACR,oBAAqB,CAAA,GAAA,CAAI,CAAe,WAAA,KAAA;AACvC,IAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,IAAI,CAAC,CAAA;AAE/C,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAK,WAAY,CAAA,IAAA;AAAA,QACjB,IAAM,EAAA,WAAA;AAAA,QACN,OAAA;AAAA,QACA,aAAe,EAAA;AAAA;AAAA,KACjB;AAAA,GAEH,CACH,CACF,CAAA;AAEJ;;;;"}
+{"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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"}

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

@@ -1,13 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useSidebarPinState, InfoCard } from '@backstage/core-components';
 import List from '@material-ui/core/List';
-import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle.esm.js';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle.esm.js';
 import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle.esm.js';
 
 const UserSettingsAppearanceCard = () => {
   const { isMobile } = useSidebarPinState();
-  return /* @__PURE__ */ React.createElement(InfoCard, { title: "Appearance", variant: "gridItem" }, /* @__PURE__ */ React.createElement(List, { dense: true }, /* @__PURE__ */ React.createElement(UserSettingsThemeToggle, null), /* @__PURE__ */ React.createElement(UserSettingsLanguageToggle, null), !isMobile && /* @__PURE__ */ React.createElement(UserSettingsPinToggle, null)));
+  return /* @__PURE__ */ jsx(InfoCard, { title: "Appearance", variant: "gridItem", children: /* @__PURE__ */ jsxs(List, { dense: true, children: [
+    /* @__PURE__ */ jsx(UserSettingsThemeToggle, {}),
+    /* @__PURE__ */ jsx(UserSettingsLanguageToggle, {}),
+    !isMobile && /* @__PURE__ */ jsx(UserSettingsPinToggle, {})
+  ] }) });
 };
 
 export { UserSettingsAppearanceCard };

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

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsAppearanceCard.esm.js","sources":["../../../src/components/General/UserSettingsAppearanceCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 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, useSidebarPinState } from '@backstage/core-components';\nimport List from '@material-ui/core/List';\nimport React from 'react';\nimport { UserSettingsPinToggle } from './UserSettingsPinToggle';\nimport { UserSettingsThemeToggle } from './UserSettingsThemeToggle';\nimport { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle';\n\n/** @public */\nexport const UserSettingsAppearanceCard = () => {\n  const { isMobile } = useSidebarPinState();\n\n  return (\n    <InfoCard title=\"Appearance\" variant=\"gridItem\">\n      <List dense>\n        <UserSettingsThemeToggle />\n        <UserSettingsLanguageToggle />\n        {!isMobile && <UserSettingsPinToggle />}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,6BAA6B,MAAM;AAC9C,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,YAAS,KAAM,EAAA,YAAA,EAAa,SAAQ,UACnC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,KAAK,EAAA,IAAA,EAAA,sCACR,uBAAwB,EAAA,IAAA,CAAA,sCACxB,0BAA2B,EAAA,IAAA,CAAA,EAC3B,CAAC,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,qBAAsB,EAAA,IAAA,CACvC,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsAppearanceCard.esm.js","sources":["../../../src/components/General/UserSettingsAppearanceCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 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, useSidebarPinState } from '@backstage/core-components';\nimport List from '@material-ui/core/List';\nimport { UserSettingsPinToggle } from './UserSettingsPinToggle';\nimport { UserSettingsThemeToggle } from './UserSettingsThemeToggle';\nimport { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle';\n\n/** @public */\nexport const UserSettingsAppearanceCard = () => {\n  const { isMobile } = useSidebarPinState();\n\n  return (\n    <InfoCard title=\"Appearance\" variant=\"gridItem\">\n      <List dense>\n        <UserSettingsThemeToggle />\n        <UserSettingsLanguageToggle />\n        {!isMobile && <UserSettingsPinToggle />}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,6BAA6B,MAAM;AAC9C,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EACE,uBAAA,GAAA,CAAC,YAAS,KAAM,EAAA,YAAA,EAAa,SAAQ,UACnC,EAAA,QAAA,kBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAK,IACT,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,uBAAwB,EAAA,EAAA,CAAA;AAAA,wBACxB,0BAA2B,EAAA,EAAA,CAAA;AAAA,IAC3B,CAAC,QAAY,oBAAA,GAAA,CAAC,qBAAsB,EAAA,EAAA;AAAA,GAAA,EACvC,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,11 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Grid from '@material-ui/core/Grid';
-import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard.esm.js';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard.esm.js';
 import { UserSettingsIdentityCard } from './UserSettingsIdentityCard.esm.js';
 
 const UserSettingsGeneral = () => {
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "row", spacing: 3 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsProfileCard, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsAppearanceCard, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 6 }, /* @__PURE__ */ React.createElement(UserSettingsIdentityCard, null)));
+  return /* @__PURE__ */ jsxs(Grid, { container: true, direction: "row", spacing: 3, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsx(UserSettingsProfileCard, {}) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsx(UserSettingsAppearanceCard, {}) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsx(UserSettingsIdentityCard, {}) })
+  ] });
 };
 
 export { UserSettingsGeneral };

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

@@ -1 +1 @@
-{"version":3,"file":"UserSettingsGeneral.esm.js","sources":["../../../src/components/General/UserSettingsGeneral.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 Grid from '@material-ui/core/Grid';\nimport React from 'react';\nimport { UserSettingsProfileCard } from './UserSettingsProfileCard';\nimport { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';\nimport { UserSettingsIdentityCard } from './UserSettingsIdentityCard';\n\n/** @public */\nexport const UserSettingsGeneral = () => {\n  return (\n    <Grid container direction=\"row\" spacing={3}>\n      <Grid item xs={12} md={6}>\n        <UserSettingsProfileCard />\n      </Grid>\n      <Grid item xs={12} md={6}>\n        <UserSettingsAppearanceCard />\n      </Grid>\n      <Grid item xs={12} md={6}>\n        <UserSettingsIdentityCard />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,sBAAsB,MAAM;AACvC,EAAA,2CACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,SAAU,EAAA,KAAA,EAAM,SAAS,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,qBACpB,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,IAAwB,CAC3B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,qBACpB,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,IAA2B,CAC9B,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,qBACpB,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA,IAAyB,CAC5B,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserSettingsGeneral.esm.js","sources":["../../../src/components/General/UserSettingsGeneral.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 Grid from '@material-ui/core/Grid';\nimport { UserSettingsProfileCard } from './UserSettingsProfileCard';\nimport { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';\nimport { UserSettingsIdentityCard } from './UserSettingsIdentityCard';\n\n/** @public */\nexport const UserSettingsGeneral = () => {\n  return (\n    <Grid container direction=\"row\" spacing={3}>\n      <Grid item xs={12} md={6}>\n        <UserSettingsProfileCard />\n      </Grid>\n      <Grid item xs={12} md={6}>\n        <UserSettingsAppearanceCard />\n      </Grid>\n      <Grid item xs={12} md={6}>\n        <UserSettingsIdentityCard />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,sBAAsB,MAAM;AACvC,EAAA,4BACG,IAAK,EAAA,EAAA,SAAA,EAAS,MAAC,SAAU,EAAA,KAAA,EAAM,SAAS,CACvC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EACrB,QAAC,kBAAA,GAAA,CAAA,uBAAA,EAAA,EAAwB,CAC3B,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EACrB,QAAC,kBAAA,GAAA,CAAA,0BAAA,EAAA,EAA2B,CAC9B,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EACrB,QAAC,kBAAA,GAAA,CAAA,wBAAA,EAAA,EAAyB,CAC5B,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,18 +1,29 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { InfoCard } from '@backstage/core-components';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
 import { useUserProfile } from '../useUserProfileInfo.esm.js';
 
 const Contents = () => {
   const { backstageIdentity } = useUserProfile();
   if (!backstageIdentity) {
-    return /* @__PURE__ */ React.createElement(Typography, null, "No Backstage Identity");
+    return /* @__PURE__ */ jsx(Typography, { children: "No Backstage Identity" });
   }
-  return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1", gutterBottom: true }, "User Entity:", " ", /* @__PURE__ */ React.createElement(EntityRefLinks, { entityRefs: [backstageIdentity.userEntityRef] }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, "Ownership Entities:", " ", /* @__PURE__ */ React.createElement(EntityRefLinks, { entityRefs: backstageIdentity.ownershipEntityRefs }))));
+  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:",
+      " ",
+      /* @__PURE__ */ jsx(EntityRefLinks, { entityRefs: [backstageIdentity.userEntityRef] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", children: [
+      "Ownership Entities:",
+      " ",
+      /* @__PURE__ */ jsx(EntityRefLinks, { entityRefs: backstageIdentity.ownershipEntityRefs })
+    ] }) })
+  ] });
 };
-const UserSettingsIdentityCard = () => /* @__PURE__ */ React.createElement(InfoCard, { title: "Backstage Identity" }, /* @__PURE__ */ React.createElement(Contents, null));
+const UserSettingsIdentityCard = () => /* @__PURE__ */ jsx(InfoCard, { title: "Backstage Identity", 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 React from 'react';\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":";;;;;;;AAuBA,MAAM,WAAW,MAAM;AACrB,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,cAAe,EAAA;AAE7C,EAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,kBAAW,uBAAqB,CAAA;AAAA;AAG1C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,SAAS,CACvB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,sBACZ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAQ,WAAY,EAAA,YAAA,EAAY,QAAC,cAC9B,EAAA,GAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,UAAY,EAAA,CAAC,kBAAkB,aAAa,CAAA,EAAG,CACjE,CACF,CAAA,sCACC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,WAAA,EAAA,EAAY,qBACV,EAAA,GAAA,kBACnB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,YAAY,iBAAkB,CAAA,mBAAA,EAAqB,CACrE,CACF,CACF,CAAA;AAEJ,CAAA;AAGa,MAAA,wBAAA,GAA2B,sBACrC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,OAAM,oBACd,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAS,CACZ;;;;"}
+{"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;;;;"}

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

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { appLanguageApiRef, useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -67,32 +68,34 @@ const UserSettingsLanguageToggle = () => {
       return language;
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     ListItem,
     {
       className: classes.list,
-      classes: { container: classes.container }
-    },
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        className: classes.listItemText,
-        primary: t("languageToggle.title"),
-        secondary: t("languageToggle.description")
-      }
-    ),
-    /* @__PURE__ */ React.createElement(ListItemSecondaryAction, { className: classes.listItemSecondaryAction }, /* @__PURE__ */ React.createElement(
-      Select,
-      {
-        label: "",
-        selected: currentLanguage,
-        items: languages.map((language) => ({
-          label: getLanguageDisplayName(language),
-          value: language
-        })),
-        onChange: (selectedItems) => handleSetLanguage(selectedItems)
-      }
-    ))
+      classes: { container: classes.container },
+      children: [
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            className: classes.listItemText,
+            primary: t("languageToggle.title"),
+            secondary: t("languageToggle.description")
+          }
+        ),
+        /* @__PURE__ */ jsx(ListItemSecondaryAction, { className: classes.listItemSecondaryAction, children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "",
+            selected: currentLanguage,
+            items: languages.map((language) => ({
+              label: getLanguageDisplayName(language),
+              value: language
+            })),
+            onChange: (selectedItems) => handleSetLanguage(selectedItems)
+          }
+        ) })
+      ]
+    }
   );
 };
 

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 React, { 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\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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"}