@backstage/plugin-notifications 0.5.6-next.0 → 0.5.6-next.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @backstage/plugin-notifications
 
+## 0.5.6-next.2
+
+### Patch Changes
+
+- b00c160: Remove React import form notification and scaffolder plugin
+- Updated dependencies
+  - @backstage/core-components@0.17.3-next.0
+  - @backstage/frontend-plugin-api@0.10.3-next.1
+  - @backstage/core-compat-api@0.4.3-next.2
+  - @backstage/core-plugin-api@1.10.7
+  - @backstage/errors@1.2.7
+  - @backstage/theme@0.6.6
+  - @backstage/types@1.2.1
+  - @backstage/plugin-notifications-common@0.0.9-next.0
+  - @backstage/plugin-signals-react@0.0.13
+
+## 0.5.6-next.1
+
+### Patch Changes
+
+- 1fb5f06: Adds ability for user to turn on/off notifications for specific topics within an origin.
+- Updated dependencies
+  - @backstage/plugin-notifications-common@0.0.9-next.0
+  - @backstage/core-compat-api@0.4.3-next.1
+  - @backstage/core-components@0.17.2
+  - @backstage/core-plugin-api@1.10.7
+  - @backstage/errors@1.2.7
+  - @backstage/frontend-plugin-api@0.10.3-next.0
+  - @backstage/theme@0.6.6
+  - @backstage/types@1.2.1
+  - @backstage/plugin-signals-react@0.0.13
+
 ## 0.5.6-next.0
 
 ### Patch Changes

package/dist/components/UserNotificationSettingsCard/NoBorderTableCell.esm.js

@@ -0,0 +1,11 @@
+import { withStyles } from '@material-ui/core/styles';
+import MuiTableCell from '@material-ui/core/TableCell';
+
+const NoBorderTableCell = withStyles({
+  root: {
+    borderBottom: "none"
+  }
+})(MuiTableCell);
+
+export { NoBorderTableCell };
+//# sourceMappingURL=NoBorderTableCell.esm.js.map

package/dist/components/UserNotificationSettingsCard/NoBorderTableCell.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoBorderTableCell.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/NoBorderTableCell.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { withStyles } from '@material-ui/core/styles';\nimport MuiTableCell from '@material-ui/core/TableCell';\n\nexport const NoBorderTableCell = withStyles({\n  root: {\n    borderBottom: 'none',\n  },\n})(MuiTableCell);\n"],"names":[],"mappings":";;;AAmBO,MAAM,oBAAoB,UAAW,CAAA;AAAA,EAC1C,IAAM,EAAA;AAAA,IACJ,YAAc,EAAA;AAAA;AAElB,CAAC,EAAE,YAAY;;;;"}

package/dist/components/UserNotificationSettingsCard/OriginRow.esm.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isNotificationsEnabledFor } from '@backstage/plugin-notifications-common';
+import IconButton from '@material-ui/core/IconButton';
+import Switch from '@material-ui/core/Switch';
+import TableRow from '@material-ui/core/TableRow';
+import Tooltip from '@material-ui/core/Tooltip';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { NoBorderTableCell } from './NoBorderTableCell.esm.js';
+import { useNotificationFormat } from './UserNotificationSettingsCard.esm.js';
+
+const OriginRow = (props) => {
+  const { channel, origin, settings, handleChange, open, handleRowToggle } = props;
+  const { formatOriginName } = useNotificationFormat();
+  return /* @__PURE__ */ jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsx(NoBorderTableCell, { children: origin.topics && origin.topics.length > 0 && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: `Show Topics for the ${formatOriginName(origin.id)} origin`,
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "expand row",
+            size: "small",
+            onClick: () => handleRowToggle(origin.id),
+            children: open ? /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(NoBorderTableCell, { children: formatOriginName(origin.id) }),
+    /* @__PURE__ */ jsx(NoBorderTableCell, { children: "all" }),
+    settings.channels.map((ch) => /* @__PURE__ */ jsx(NoBorderTableCell, { align: "center", children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: `Enable or disable ${channel.id.toLocaleLowerCase(
+          "en-US"
+        )} notifications from ${formatOriginName(origin.id)}`,
+        children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: isNotificationsEnabledFor(
+              settings,
+              ch.id,
+              origin.id,
+              null
+            ),
+            onChange: (event) => {
+              handleChange(ch.id, origin.id, null, event.target.checked);
+            }
+          }
+        )
+      }
+    ) }, ch.id))
+  ] });
+};
+
+export { OriginRow };
+//# sourceMappingURL=OriginRow.esm.js.map

package/dist/components/UserNotificationSettingsCard/OriginRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OriginRow.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/OriginRow.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  ChannelSetting,\n  isNotificationsEnabledFor,\n  NotificationSettings,\n  OriginSetting,\n} from '@backstage/plugin-notifications-common';\nimport IconButton from '@material-ui/core/IconButton';\nimport Switch from '@material-ui/core/Switch';\nimport TableRow from '@material-ui/core/TableRow';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport { NoBorderTableCell } from './NoBorderTableCell';\nimport { useNotificationFormat } from './UserNotificationSettingsCard';\n\nexport const OriginRow = (props: {\n  channel: ChannelSetting;\n  origin: OriginSetting;\n  settings: NotificationSettings;\n  handleChange: (\n    channel: string,\n    origin: string,\n    topic: string | null,\n    enabled: boolean,\n  ) => void;\n  open: boolean;\n  handleRowToggle: (originId: string) => void;\n}) => {\n  const { channel, origin, settings, handleChange, open, handleRowToggle } =\n    props;\n  const { formatOriginName } = useNotificationFormat();\n  return (\n    <TableRow>\n      <NoBorderTableCell>\n        {origin.topics && origin.topics.length > 0 && (\n          <Tooltip\n            title={`Show Topics for the ${formatOriginName(origin.id)} origin`}\n          >\n            <IconButton\n              aria-label=\"expand row\"\n              size=\"small\"\n              onClick={() => handleRowToggle(origin.id)}\n            >\n              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n            </IconButton>\n          </Tooltip>\n        )}\n      </NoBorderTableCell>\n      <NoBorderTableCell>{formatOriginName(origin.id)}</NoBorderTableCell>\n      <NoBorderTableCell>all</NoBorderTableCell>\n      {settings.channels.map(ch => (\n        <NoBorderTableCell key={ch.id} align=\"center\">\n          <Tooltip\n            title={`Enable or disable ${channel.id.toLocaleLowerCase(\n              'en-US',\n            )} notifications from ${formatOriginName(origin.id)}`}\n          >\n            <Switch\n              checked={isNotificationsEnabledFor(\n                settings,\n                ch.id,\n                origin.id,\n                null,\n              )}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n                handleChange(ch.id, origin.id, null, event.target.checked);\n              }}\n            />\n          </Tooltip>\n        </NoBorderTableCell>\n      ))}\n    </TableRow>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA+Ba,MAAA,SAAA,GAAY,CAAC,KAYpB,KAAA;AACJ,EAAA,MAAM,EAAE,OAAS,EAAA,MAAA,EAAQ,UAAU,YAAc,EAAA,IAAA,EAAM,iBACrD,GAAA,KAAA;AACF,EAAM,MAAA,EAAE,gBAAiB,EAAA,GAAI,qBAAsB,EAAA;AACnD,EAAA,4BACG,QACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,qBACE,QAAO,EAAA,MAAA,CAAA,MAAA,IAAU,MAAO,CAAA,MAAA,CAAO,SAAS,CACvC,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAO,EAAA,CAAA,oBAAA,EAAuB,gBAAiB,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA,OAAA,CAAA;AAAA,QAEzD,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,YAAW,EAAA,YAAA;AAAA,YACX,IAAK,EAAA,OAAA;AAAA,YACL,OAAS,EAAA,MAAM,eAAgB,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,YAEvC,QAAO,EAAA,IAAA,mBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,CAAA,uBAAM,qBAAsB,EAAA,EAAA;AAAA;AAAA;AAC3D;AAAA,KAGN,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,iBAAA,EAAA,EAAmB,QAAiB,EAAA,gBAAA,CAAA,MAAA,CAAO,EAAE,CAAE,EAAA,CAAA;AAAA,oBAChD,GAAA,CAAC,qBAAkB,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,IACrB,SAAS,QAAS,CAAA,GAAA,CAAI,wBACpB,GAAA,CAAA,iBAAA,EAAA,EAA8B,OAAM,QACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAqB,kBAAA,EAAA,OAAA,CAAQ,EAAG,CAAA,iBAAA;AAAA,UACrC;AAAA,SACD,CAAA,oBAAA,EAAuB,gBAAiB,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA,CAAA;AAAA,QAEnD,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,yBAAA;AAAA,cACP,QAAA;AAAA,cACA,EAAG,CAAA,EAAA;AAAA,cACH,MAAO,CAAA,EAAA;AAAA,cACP;AAAA,aACF;AAAA,YACA,QAAA,EAAU,CAAC,KAA+C,KAAA;AACxD,cAAA,YAAA,CAAa,GAAG,EAAI,EAAA,MAAA,CAAO,IAAI,IAAM,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAC3D;AAAA;AACF;AAAA,KACF,EAAA,EAjBsB,EAAG,CAAA,EAkB3B,CACD;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/UserNotificationSettingsCard/TopicRow.esm.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isNotificationsEnabledFor } from '@backstage/plugin-notifications-common';
+import TableRow from '@material-ui/core/TableRow';
+import Tooltip from '@material-ui/core/Tooltip';
+import Switch from '@material-ui/core/Switch';
+import { withStyles } from '@material-ui/core/styles';
+import { NoBorderTableCell } from './NoBorderTableCell.esm.js';
+import { useNotificationFormat } from './UserNotificationSettingsCard.esm.js';
+
+const TopicTableRow = withStyles({
+  root: {
+    paddingLeft: "4px"
+  }
+})(TableRow);
+const TopicRow = (props) => {
+  const { topic, origin, settings, handleChange } = props;
+  const { formatOriginName, formatTopicName } = useNotificationFormat();
+  return /* @__PURE__ */ jsxs(TopicTableRow, { children: [
+    /* @__PURE__ */ jsx(NoBorderTableCell, {}),
+    /* @__PURE__ */ jsx(NoBorderTableCell, {}),
+    /* @__PURE__ */ jsx(NoBorderTableCell, { children: formatTopicName(topic.id) }),
+    settings.channels.map((ch) => /* @__PURE__ */ jsx(NoBorderTableCell, { align: "center", children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: `Enable or disable ${ch.id.toLocaleLowerCase(
+          "en-US"
+        )} notifications for the ${formatTopicName(
+          topic.id
+        )} topic from ${formatOriginName(origin.id)}`,
+        children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: isNotificationsEnabledFor(
+              settings,
+              ch.id,
+              origin.id,
+              topic.id
+            ),
+            onChange: (event) => {
+              handleChange(ch.id, origin.id, topic.id, event.target.checked);
+            }
+          }
+        )
+      }
+    ) }, `${ch.id}-${topic}`))
+  ] });
+};
+
+export { TopicRow };
+//# sourceMappingURL=TopicRow.esm.js.map

package/dist/components/UserNotificationSettingsCard/TopicRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopicRow.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/TopicRow.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {\n  isNotificationsEnabledFor,\n  NotificationSettings,\n  OriginSetting,\n  TopicSetting,\n} from '@backstage/plugin-notifications-common';\nimport TableRow from '@material-ui/core/TableRow';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Switch from '@material-ui/core/Switch';\nimport { withStyles } from '@material-ui/core/styles';\nimport { NoBorderTableCell } from './NoBorderTableCell';\nimport { useNotificationFormat } from './UserNotificationSettingsCard';\n\nconst TopicTableRow = withStyles({\n  root: {\n    paddingLeft: '4px',\n  },\n})(TableRow);\n\nexport const TopicRow = (props: {\n  topic: TopicSetting;\n  origin: OriginSetting;\n  settings: NotificationSettings;\n  handleChange: (\n    channel: string,\n    origin: string,\n    topic: string | null,\n    enabled: boolean,\n  ) => void;\n}) => {\n  const { topic, origin, settings, handleChange } = props;\n  const { formatOriginName, formatTopicName } = useNotificationFormat();\n  return (\n    <TopicTableRow>\n      <NoBorderTableCell />\n      <NoBorderTableCell />\n      <NoBorderTableCell>{formatTopicName(topic.id)}</NoBorderTableCell>\n      {settings.channels.map(ch => (\n        <NoBorderTableCell key={`${ch.id}-${topic}`} align=\"center\">\n          <Tooltip\n            title={`Enable or disable ${ch.id.toLocaleLowerCase(\n              'en-US',\n            )} notifications for the ${formatTopicName(\n              topic.id,\n            )} topic from ${formatOriginName(origin.id)}`}\n          >\n            <Switch\n              checked={isNotificationsEnabledFor(\n                settings,\n                ch.id,\n                origin.id,\n                topic.id,\n              )}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n                handleChange(ch.id, origin.id, topic.id, event.target.checked);\n              }}\n            />\n          </Tooltip>\n        </NoBorderTableCell>\n      ))}\n    </TopicTableRow>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6BA,MAAM,gBAAgB,UAAW,CAAA;AAAA,EAC/B,IAAM,EAAA;AAAA,IACJ,WAAa,EAAA;AAAA;AAEjB,CAAC,EAAE,QAAQ,CAAA;AAEE,MAAA,QAAA,GAAW,CAAC,KAUnB,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,MAAQ,EAAA,QAAA,EAAU,cAAiB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,gBAAA,EAAkB,eAAgB,EAAA,GAAI,qBAAsB,EAAA;AACpE,EAAA,4BACG,aACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,wBAClB,iBAAkB,EAAA,EAAA,CAAA;AAAA,oBAClB,GAAA,CAAA,iBAAA,EAAA,EAAmB,QAAgB,EAAA,eAAA,CAAA,KAAA,CAAM,EAAE,CAAE,EAAA,CAAA;AAAA,IAC7C,SAAS,QAAS,CAAA,GAAA,CAAI,wBACpB,GAAA,CAAA,iBAAA,EAAA,EAA4C,OAAM,QACjD,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAqB,kBAAA,EAAA,EAAA,CAAG,EAAG,CAAA,iBAAA;AAAA,UAChC;AAAA,SACD,CAA0B,uBAAA,EAAA,eAAA;AAAA,UACzB,KAAM,CAAA;AAAA,SACP,CAAA,YAAA,EAAe,gBAAiB,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA,CAAA;AAAA,QAE3C,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAS,EAAA,yBAAA;AAAA,cACP,QAAA;AAAA,cACA,EAAG,CAAA,EAAA;AAAA,cACH,MAAO,CAAA,EAAA;AAAA,cACP,KAAM,CAAA;AAAA,aACR;AAAA,YACA,QAAA,EAAU,CAAC,KAA+C,KAAA;AACxD,cAAa,YAAA,CAAA,EAAA,CAAG,IAAI,MAAO,CAAA,EAAA,EAAI,MAAM,EAAI,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAC/D;AAAA;AACF;AAAA,SAlBoB,CAAG,EAAA,EAAA,CAAG,EAAE,CAAI,CAAA,EAAA,KAAK,EAoBzC,CACD;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/UserNotificationSettingsCard/UserNotificationSettingsCard.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { createContext, useState, useEffect, useContext } from 'react';
 import { InfoCard, Progress, ErrorPanel } from '@backstage/core-components';
 import { useNotificationsApi } from '../../hooks/useNotificationsApi.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
@@ -8,7 +8,44 @@ import '@backstage/errors';
 import '../../routes.esm.js';
 import '../../hooks/useTitleCounter.esm.js';
 import { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel.esm.js';
+import { capitalize } from 'lodash';
 
+const NotificationFormatContext = createContext(
+  void 0
+);
+const useNotificationFormat = () => {
+  const context = useContext(NotificationFormatContext);
+  if (!context)
+    throw new Error(
+      "useNotificationFormat must be used within a NotificationFormatProvider"
+    );
+  return context;
+};
+const NotificationFormatProvider = ({
+  children,
+  originMap,
+  topicMap
+}) => {
+  const formatName = (id, nameMap) => {
+    if (nameMap && id in nameMap) {
+      return nameMap[id];
+    }
+    return capitalize(id.replaceAll(/[-_:]/g, " "));
+  };
+  const formatOriginName = (originId) => {
+    return formatName(originId, originMap);
+  };
+  const formatTopicName = (topicId) => {
+    return formatName(topicId, topicMap);
+  };
+  return /* @__PURE__ */ jsx(
+    NotificationFormatContext.Provider,
+    {
+      value: { formatOriginName, formatTopicName },
+      children
+    }
+  );
+};
 const UserNotificationSettingsCard = (props) => {
   const [settings, setNotificationSettings] = useState(void 0);
   const client = useApi(notificationsApiRef);
@@ -27,15 +64,21 @@ const UserNotificationSettingsCard = (props) => {
     loading && /* @__PURE__ */ jsx(Progress, {}),
     error && /* @__PURE__ */ jsx(ErrorPanel, { title: "Failed to load settings", error }),
     settings && /* @__PURE__ */ jsx(
-      UserNotificationSettingsPanel,
+      NotificationFormatProvider,
       {
-        settings,
-        onChange: onUpdate,
-        originNames: props.originNames
+        originMap: props.originNames,
+        topicMap: props.topicNames,
+        children: /* @__PURE__ */ jsx(
+          UserNotificationSettingsPanel,
+          {
+            settings,
+            onChange: onUpdate
+          }
+        )
       }
     )
   ] });
 };
 
-export { UserNotificationSettingsCard };
+export { NotificationFormatProvider, UserNotificationSettingsCard, useNotificationFormat };
 //# sourceMappingURL=UserNotificationSettingsCard.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UserNotificationSettingsCard.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx"],"sourcesContent":["/*\n * Copyright 2024 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, useEffect } from 'react';\nimport { ErrorPanel, InfoCard, Progress } from '@backstage/core-components';\nimport { useNotificationsApi } from '../../hooks';\nimport { NotificationSettings } from '@backstage/plugin-notifications-common';\nimport { notificationsApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel';\n\n/** @public */\nexport const UserNotificationSettingsCard = (props: {\n  originNames?: Record<string, string>;\n}) => {\n  const [settings, setNotificationSettings] = useState<\n    NotificationSettings | undefined\n  >(undefined);\n\n  const client = useApi(notificationsApiRef);\n  const { error, value, loading } = useNotificationsApi(api => {\n    return api.getNotificationSettings();\n  });\n\n  useEffect(() => {\n    if (!loading && !error) {\n      setNotificationSettings(value);\n    }\n  }, [loading, value, error]);\n\n  const onUpdate = (newSettings: NotificationSettings) => {\n    client\n      .updateNotificationSettings(newSettings)\n      .then(updatedSettings => setNotificationSettings(updatedSettings));\n  };\n\n  return (\n    <InfoCard title=\"Notification settings\" variant=\"gridItem\">\n      {loading && <Progress />}\n      {error && <ErrorPanel title=\"Failed to load settings\" error={error} />}\n      {settings && (\n        <UserNotificationSettingsPanel\n          settings={settings}\n          onChange={onUpdate}\n          originNames={props.originNames}\n        />\n      )}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAyBa,MAAA,4BAAA,GAA+B,CAAC,KAEvC,KAAA;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,uBAAuB,CAAA,GAAI,SAE1C,KAAS,CAAA,CAAA;AAEX,EAAM,MAAA,MAAA,GAAS,OAAO,mBAAmB,CAAA;AACzC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,OAAQ,EAAA,GAAI,oBAAoB,CAAO,GAAA,KAAA;AAC3D,IAAA,OAAO,IAAI,uBAAwB,EAAA;AAAA,GACpC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,KAAO,EAAA;AACtB,MAAA,uBAAA,CAAwB,KAAK,CAAA;AAAA;AAC/B,GACC,EAAA,CAAC,OAAS,EAAA,KAAA,EAAO,KAAK,CAAC,CAAA;AAE1B,EAAM,MAAA,QAAA,GAAW,CAAC,WAAsC,KAAA;AACtD,IAAA,MAAA,CACG,2BAA2B,WAAW,CAAA,CACtC,KAAK,CAAmB,eAAA,KAAA,uBAAA,CAAwB,eAAe,CAAC,CAAA;AAAA,GACrE;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,uBAAA,EAAwB,SAAQ,UAC7C,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA,wBAAY,QAAS,EAAA,EAAA,CAAA;AAAA,IACrB,KAAS,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,2BAA0B,KAAc,EAAA,CAAA;AAAA,IACnE,QACC,oBAAA,GAAA;AAAA,MAAC,6BAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,QAAU,EAAA,QAAA;AAAA,QACV,aAAa,KAAM,CAAA;AAAA;AAAA;AACrB,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserNotificationSettingsCard.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { createContext, useState, useContext, useEffect } from 'react';\nimport { ErrorPanel, InfoCard, Progress } from '@backstage/core-components';\nimport { useNotificationsApi } from '../../hooks';\nimport { NotificationSettings } from '@backstage/plugin-notifications-common';\nimport { notificationsApiRef } from '../../api';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel';\nimport { capitalize } from 'lodash';\n\ntype FormatContextType = {\n  formatOriginName: (id: string) => string;\n  formatTopicName: (id: string) => string;\n};\n\nconst NotificationFormatContext = createContext<FormatContextType | undefined>(\n  undefined,\n);\n\nexport const useNotificationFormat = () => {\n  const context = useContext(NotificationFormatContext);\n  if (!context)\n    throw new Error(\n      'useNotificationFormat must be used within a NotificationFormatProvider',\n    );\n  return context;\n};\n\ntype Props = {\n  children: React.ReactNode;\n  originMap: Record<string, string> | undefined;\n  topicMap: Record<string, string> | undefined;\n};\n\nexport const NotificationFormatProvider = ({\n  children,\n  originMap,\n  topicMap,\n}: Props) => {\n  const formatName = (\n    id: string,\n    nameMap: Record<string, string> | undefined,\n  ) => {\n    if (nameMap && id in nameMap) {\n      return nameMap[id];\n    }\n    return capitalize(id.replaceAll(/[-_:]/g, ' '));\n  };\n\n  const formatOriginName = (originId: string) => {\n    return formatName(originId, originMap);\n  };\n\n  const formatTopicName = (topicId: string) => {\n    return formatName(topicId, topicMap);\n  };\n  return (\n    <NotificationFormatContext.Provider\n      value={{ formatOriginName, formatTopicName }}\n    >\n      {children}\n    </NotificationFormatContext.Provider>\n  );\n};\n\n/** @public */\nexport const UserNotificationSettingsCard = (props: {\n  originNames?: Record<string, string>;\n  topicNames?: Record<string, string>;\n}) => {\n  const [settings, setNotificationSettings] = useState<\n    NotificationSettings | undefined\n  >(undefined);\n\n  const client = useApi(notificationsApiRef);\n  const { error, value, loading } = useNotificationsApi(api => {\n    return api.getNotificationSettings();\n  });\n\n  useEffect(() => {\n    if (!loading && !error) {\n      setNotificationSettings(value);\n    }\n  }, [loading, value, error]);\n\n  const onUpdate = (newSettings: NotificationSettings) => {\n    client\n      .updateNotificationSettings(newSettings)\n      .then(updatedSettings => setNotificationSettings(updatedSettings));\n  };\n\n  return (\n    <InfoCard title=\"Notification settings\" variant=\"gridItem\">\n      {loading && <Progress />}\n      {error && <ErrorPanel title=\"Failed to load settings\" error={error} />}\n      {settings && (\n        <NotificationFormatProvider\n          originMap={props.originNames}\n          topicMap={props.topicNames}\n        >\n          <UserNotificationSettingsPanel\n            settings={settings}\n            onChange={onUpdate}\n          />\n        </NotificationFormatProvider>\n      )}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BA,MAAM,yBAA4B,GAAA,aAAA;AAAA,EAChC,KAAA;AACF,CAAA;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAU,WAAW,yBAAyB,CAAA;AACpD,EAAA,IAAI,CAAC,OAAA;AACH,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AACF,EAAO,OAAA,OAAA;AACT;AAQO,MAAM,6BAA6B,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAM,MAAA,UAAA,GAAa,CACjB,EAAA,EACA,OACG,KAAA;AACH,IAAI,IAAA,OAAA,IAAW,MAAM,OAAS,EAAA;AAC5B,MAAA,OAAO,QAAQ,EAAE,CAAA;AAAA;AAEnB,IAAA,OAAO,UAAW,CAAA,EAAA,CAAG,UAAW,CAAA,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,GAChD;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAqB,KAAA;AAC7C,IAAO,OAAA,UAAA,CAAW,UAAU,SAAS,CAAA;AAAA,GACvC;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,OAAoB,KAAA;AAC3C,IAAO,OAAA,UAAA,CAAW,SAAS,QAAQ,CAAA;AAAA,GACrC;AACA,EACE,uBAAA,GAAA;AAAA,IAAC,yBAA0B,CAAA,QAAA;AAAA,IAA1B;AAAA,MACC,KAAA,EAAO,EAAE,gBAAA,EAAkB,eAAgB,EAAA;AAAA,MAE1C;AAAA;AAAA,GACH;AAEJ;AAGa,MAAA,4BAAA,GAA+B,CAAC,KAGvC,KAAA;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,uBAAuB,CAAA,GAAI,SAE1C,KAAS,CAAA,CAAA;AAEX,EAAM,MAAA,MAAA,GAAS,OAAO,mBAAmB,CAAA;AACzC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,OAAQ,EAAA,GAAI,oBAAoB,CAAO,GAAA,KAAA;AAC3D,IAAA,OAAO,IAAI,uBAAwB,EAAA;AAAA,GACpC,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,KAAO,EAAA;AACtB,MAAA,uBAAA,CAAwB,KAAK,CAAA;AAAA;AAC/B,GACC,EAAA,CAAC,OAAS,EAAA,KAAA,EAAO,KAAK,CAAC,CAAA;AAE1B,EAAM,MAAA,QAAA,GAAW,CAAC,WAAsC,KAAA;AACtD,IAAA,MAAA,CACG,2BAA2B,WAAW,CAAA,CACtC,KAAK,CAAmB,eAAA,KAAA,uBAAA,CAAwB,eAAe,CAAC,CAAA;AAAA,GACrE;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA,EAAS,KAAM,EAAA,uBAAA,EAAwB,SAAQ,UAC7C,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA,wBAAY,QAAS,EAAA,EAAA,CAAA;AAAA,IACrB,KAAS,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAM,2BAA0B,KAAc,EAAA,CAAA;AAAA,IACnE,QACC,oBAAA,GAAA;AAAA,MAAC,0BAAA;AAAA,MAAA;AAAA,QACC,WAAW,KAAM,CAAA,WAAA;AAAA,QACjB,UAAU,KAAM,CAAA,UAAA;AAAA,QAEhB,QAAA,kBAAA,GAAA;AAAA,UAAC,6BAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AACF,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { isNotificationsEnabledFor } from '@backstage/plugin-notifications-common';
+import { useState } from 'react';
 import Table from '@material-ui/core/Table';
 import MuiTableCell from '@material-ui/core/TableCell';
 import { withStyles } from '@material-ui/core/styles';
@@ -7,9 +7,8 @@ import TableHead from '@material-ui/core/TableHead';
 import Typography from '@material-ui/core/Typography';
 import TableBody from '@material-ui/core/TableBody';
 import TableRow from '@material-ui/core/TableRow';
-import Switch from '@material-ui/core/Switch';
-import { capitalize } from 'lodash';
-import Tooltip from '@material-ui/core/Tooltip';
+import { TopicRow } from './TopicRow.esm.js';
+import { OriginRow } from './OriginRow.esm.js';
 
 const TableCell = withStyles({
   root: {
@@ -18,14 +17,19 @@ const TableCell = withStyles({
 })(MuiTableCell);
 const UserNotificationSettingsPanel = (props) => {
   const { settings, onChange } = props;
-  const allOrigins = [
-    ...new Set(
-      settings.channels.flatMap(
-        (channel) => channel.origins.map((origin) => origin.id)
-      )
-    )
-  ];
-  const handleChange = (channelId, originId, enabled) => {
+  const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+  const handleRowToggle = (originId) => {
+    setExpandedRows((prevState) => {
+      const newExpandedRows = new Set(prevState);
+      if (newExpandedRows.has(originId)) {
+        newExpandedRows.delete(originId);
+      } else {
+        newExpandedRows.add(originId);
+      }
+      return newExpandedRows;
+    });
+  };
+  const handleChange = (channelId, originId, topicId, enabled) => {
     const updatedSettings = {
       channels: settings.channels.map((channel) => {
         if (channel.id !== channelId) {
@@ -37,9 +41,26 @@ const UserNotificationSettingsPanel = (props) => {
             if (origin.id !== originId) {
               return origin;
             }
+            if (topicId === null) {
+              return {
+                ...origin,
+                enabled,
+                topics: origin.topics?.map((topic) => {
+                  return { ...topic, enabled };
+                }) ?? []
+              };
+            }
             return {
               ...origin,
-              enabled
+              topics: origin.topics?.map((topic) => {
+                if (topic.id === topicId) {
+                  return {
+                    ...topic,
+                    enabled: origin.enabled ? enabled : origin.enabled
+                  };
+                }
+                return topic;
+              }) ?? []
             };
           })
         };
@@ -47,46 +68,42 @@ const UserNotificationSettingsPanel = (props) => {
     };
     onChange(updatedSettings);
   };
-  const formatOriginName = (originId) => {
-    if (props.originNames && originId in props.originNames) {
-      return props.originNames[originId];
-    }
-    return capitalize(originId.replaceAll(/[_:]/g, " "));
-  };
-  if (settings.channels.length === 0 || allOrigins.length === 0) {
+  if (settings.channels.length === 0) {
     return /* @__PURE__ */ jsx(Typography, { variant: "body1", children: "No notification settings available, check back later" });
   }
   return /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, {}),
       /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Origin" }) }),
-      settings.channels.map((channel) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: channel.id }) }))
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Topic" }) }),
+      settings.channels.map((channel) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", align: "center", children: channel.id }) }, channel.id))
     ] }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: allOrigins.map((origin) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(TableCell, { children: formatOriginName(origin) }),
-      settings.channels.map((channel) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          title: `Enable or disable ${channel.id.toLocaleLowerCase(
-            "en-US"
-          )} notifications from ${formatOriginName(
-            origin
-          ).toLocaleLowerCase("en-US")}`,
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: isNotificationsEnabledFor(
-                settings,
-                channel.id,
-                origin
-              ),
-              onChange: (event) => {
-                handleChange(channel.id, origin, event.target.checked);
-              }
-            }
-          )
-        }
-      ) }))
-    ] })) })
+    /* @__PURE__ */ jsx(TableBody, { children: settings.channels.map(
+      (channel) => channel.origins.flatMap((origin) => [
+        /* @__PURE__ */ jsx(
+          OriginRow,
+          {
+            channel,
+            origin,
+            settings,
+            open: expandedRows.has(origin.id),
+            handleChange,
+            handleRowToggle
+          },
+          origin.id
+        ),
+        ...expandedRows.has(origin.id) ? origin.topics?.map((topic) => /* @__PURE__ */ jsx(
+          TopicRow,
+          {
+            topic,
+            origin,
+            settings,
+            handleChange
+          },
+          `${origin.id}-${topic.id}`
+        )) || [] : []
+      ])
+    ) })
   ] });
 };
 

package/dist/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserNotificationSettingsPanel.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { ChangeEvent } from 'react';\nimport {\n  isNotificationsEnabledFor,\n  NotificationSettings,\n} from '@backstage/plugin-notifications-common';\nimport Table from '@material-ui/core/Table';\nimport MuiTableCell from '@material-ui/core/TableCell';\nimport { withStyles } from '@material-ui/core/styles';\nimport TableHead from '@material-ui/core/TableHead';\nimport Typography from '@material-ui/core/Typography';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableRow from '@material-ui/core/TableRow';\nimport Switch from '@material-ui/core/Switch';\nimport { capitalize } from 'lodash';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst TableCell = withStyles({\n  root: {\n    borderBottom: 'none',\n  },\n})(MuiTableCell);\n\nexport const UserNotificationSettingsPanel = (props: {\n  settings: NotificationSettings;\n  onChange: (settings: NotificationSettings) => void;\n  originNames?: Record<string, string>;\n}) => {\n  const { settings, onChange } = props;\n  const allOrigins = [\n    ...new Set(\n      settings.channels.flatMap(channel =>\n        channel.origins.map(origin => origin.id),\n      ),\n    ),\n  ];\n\n  const handleChange = (\n    channelId: string,\n    originId: string,\n    enabled: boolean,\n  ) => {\n    const updatedSettings = {\n      channels: settings.channels.map(channel => {\n        if (channel.id !== channelId) {\n          return channel;\n        }\n        return {\n          ...channel,\n          origins: channel.origins.map(origin => {\n            if (origin.id !== originId) {\n              return origin;\n            }\n            return {\n              ...origin,\n              enabled,\n            };\n          }),\n        };\n      }),\n    };\n    onChange(updatedSettings);\n  };\n\n  const formatOriginName = (originId: string) => {\n    if (props.originNames && originId in props.originNames) {\n      return props.originNames[originId];\n    }\n    return capitalize(originId.replaceAll(/[_:]/g, ' '));\n  };\n\n  if (settings.channels.length === 0 || allOrigins.length === 0) {\n    return (\n      <Typography variant=\"body1\">\n        No notification settings available, check back later\n      </Typography>\n    );\n  }\n\n  return (\n    <Table>\n      <TableHead>\n        <TableRow>\n          <TableCell>\n            <Typography variant=\"subtitle1\">Origin</Typography>\n          </TableCell>\n          {settings.channels.map(channel => (\n            <TableCell>\n              <Typography variant=\"subtitle1\">{channel.id}</Typography>\n            </TableCell>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {allOrigins.map(origin => (\n          <TableRow>\n            <TableCell>{formatOriginName(origin)}</TableCell>\n            {settings.channels.map(channel => (\n              <TableCell>\n                <Tooltip\n                  title={`Enable or disable ${channel.id.toLocaleLowerCase(\n                    'en-US',\n                  )} notifications from ${formatOriginName(\n                    origin,\n                  ).toLocaleLowerCase('en-US')}`}\n                >\n                  <Switch\n                    checked={isNotificationsEnabledFor(\n                      settings,\n                      channel.id,\n                      origin,\n                    )}\n                    onChange={(event: ChangeEvent<HTMLInputElement>) => {\n                      handleChange(channel.id, origin, event.target.checked);\n                    }}\n                  />\n                </Tooltip>\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UserNotificationSettingsPanel.esm.js","sources":["../../../src/components/UserNotificationSettingsCard/UserNotificationSettingsPanel.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 { NotificationSettings } from '@backstage/plugin-notifications-common';\nimport Table from '@material-ui/core/Table';\nimport MuiTableCell from '@material-ui/core/TableCell';\nimport { withStyles } from '@material-ui/core/styles';\nimport TableHead from '@material-ui/core/TableHead';\nimport Typography from '@material-ui/core/Typography';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableRow from '@material-ui/core/TableRow';\nimport { TopicRow } from './TopicRow';\nimport { OriginRow } from './OriginRow';\n\nconst TableCell = withStyles({\n  root: {\n    borderBottom: 'none',\n  },\n})(MuiTableCell);\n\nexport const UserNotificationSettingsPanel = (props: {\n  settings: NotificationSettings;\n  onChange: (settings: NotificationSettings) => void;\n  originNames?: Record<string, string>;\n  topicNames?: Record<string, string>;\n}) => {\n  const { settings, onChange } = props;\n  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());\n\n  const handleRowToggle = (originId: string) => {\n    setExpandedRows(prevState => {\n      const newExpandedRows = new Set(prevState);\n      if (newExpandedRows.has(originId)) {\n        newExpandedRows.delete(originId);\n      } else {\n        newExpandedRows.add(originId);\n      }\n      return newExpandedRows;\n    });\n  };\n  const handleChange = (\n    channelId: string,\n    originId: string,\n    topicId: string | null,\n    enabled: boolean,\n  ) => {\n    const updatedSettings = {\n      channels: settings.channels.map(channel => {\n        if (channel.id !== channelId) {\n          return channel;\n        }\n        return {\n          ...channel,\n          origins: channel.origins.map(origin => {\n            if (origin.id !== originId) {\n              return origin;\n            }\n\n            if (topicId === null) {\n              return {\n                ...origin,\n                enabled,\n                topics:\n                  origin.topics?.map(topic => {\n                    return { ...topic, enabled };\n                  }) ?? [],\n              };\n            }\n\n            return {\n              ...origin,\n              topics:\n                origin.topics?.map(topic => {\n                  if (topic.id === topicId) {\n                    return {\n                      ...topic,\n                      enabled: origin.enabled ? enabled : origin.enabled,\n                    };\n                  }\n                  return topic;\n                }) ?? [],\n            };\n          }),\n        };\n      }),\n    };\n    onChange(updatedSettings);\n  };\n\n  if (settings.channels.length === 0) {\n    return (\n      <Typography variant=\"body1\">\n        No notification settings available, check back later\n      </Typography>\n    );\n  }\n\n  return (\n    <Table>\n      <TableHead>\n        <TableRow>\n          <TableCell />\n          <TableCell>\n            <Typography variant=\"subtitle1\">Origin</Typography>\n          </TableCell>\n          <TableCell>\n            <Typography variant=\"subtitle1\">Topic</Typography>\n          </TableCell>\n          {settings.channels.map(channel => (\n            <TableCell key={channel.id}>\n              <Typography variant=\"subtitle1\" align=\"center\">\n                {channel.id}\n              </Typography>\n            </TableCell>\n          ))}\n        </TableRow>\n      </TableHead>\n      <TableBody>\n        {settings.channels.map(channel =>\n          channel.origins.flatMap(origin => [\n            <OriginRow\n              key={origin.id}\n              channel={channel}\n              origin={origin}\n              settings={settings}\n              open={expandedRows.has(origin.id)}\n              handleChange={handleChange}\n              handleRowToggle={handleRowToggle}\n            />,\n            ...(expandedRows.has(origin.id)\n              ? origin.topics?.map(topic => (\n                  <TopicRow\n                    key={`${origin.id}-${topic.id}`}\n                    topic={topic}\n                    origin={origin}\n                    settings={settings}\n                    handleChange={handleChange}\n                  />\n                )) || []\n              : []),\n          ]),\n        )}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -148,6 +148,7 @@ declare const NotificationsTable: ({ title, markAsReadOnLinkOpen, isLoading, not
 /** @public */
 declare const UserNotificationSettingsCard: (props: {
     originNames?: Record<string, string>;
+    topicNames?: Record<string, string>;
 }) => react_jsx_runtime.JSX.Element;
 
 export { type GetNotificationsCommonOptions, type GetNotificationsOptions, type GetNotificationsResponse, type GetTopicsOptions, type GetTopicsResponse, type NotificationsApi, NotificationsClient, NotificationsPage, type NotificationsPageProps, NotificationsSidebarItem, NotificationsTable, type NotificationsTableProps, type UpdateNotificationsOptions, UserNotificationSettingsCard, notificationsApiRef, notificationsPlugin, useNotificationsApi };

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-notifications";
-var version = "0.5.6-next.0";
+var version = "0.5.6-next.2";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "notifications",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-notifications",
-  "version": "0.5.6-next.0",
+  "version": "0.5.6-next.2",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "notifications",
@@ -63,12 +63,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-compat-api": "0.4.3-next.0",
-    "@backstage/core-components": "0.17.2",
+    "@backstage/core-compat-api": "0.4.3-next.2",
+    "@backstage/core-components": "0.17.3-next.0",
     "@backstage/core-plugin-api": "1.10.7",
     "@backstage/errors": "1.2.7",
-    "@backstage/frontend-plugin-api": "0.10.3-next.0",
-    "@backstage/plugin-notifications-common": "0.0.8",
+    "@backstage/frontend-plugin-api": "0.10.3-next.1",
+    "@backstage/plugin-notifications-common": "0.0.9-next.0",
     "@backstage/plugin-signals-react": "0.0.13",
     "@backstage/theme": "0.6.6",
     "@backstage/types": "1.2.1",
@@ -82,10 +82,10 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.32.1",
+    "@backstage/cli": "0.33.0-next.1",
     "@backstage/core-app-api": "1.17.0",
-    "@backstage/dev-utils": "1.1.11-next.0",
-    "@backstage/plugin-signals": "0.0.20-next.0",
+    "@backstage/dev-utils": "1.1.11-next.2",
+    "@backstage/plugin-signals": "0.0.20-next.1",
     "@backstage/test-utils": "1.7.8",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",