@pagerduty/backstage-plugin 0.18.0 → 0.19.0

package/dist/components/PagerDutyPage/MappingsTable/TableSkeleton.esm.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Flex, Skeleton } from '@backstage/ui';
+
+function TableSkeleton() {
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "mappings-table-skeleton", style: { width: "100%" }, mt: "4", children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: "4",
+        style: {
+          padding: "1rem",
+          borderBottom: "1px solid var(--bui-border-neutral-default)",
+          backgroundColor: "var(--bui-bg-surface-0)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "15%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "15%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "20%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "20px", width: "10%" } })
+        ]
+      }
+    ),
+    [...Array(10)].map((_, index) => /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: "4",
+        style: {
+          padding: "1rem",
+          borderBottom: "1px solid var(--bui-border-neutral-subtle)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "15%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "15%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "20%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "12%" } }),
+          /* @__PURE__ */ jsx(Skeleton, { style: { height: "16px", width: "10%" } })
+        ]
+      },
+      index
+    ))
+  ] });
+}
+
+export { TableSkeleton };
+//# sourceMappingURL=TableSkeleton.esm.js.map

package/dist/components/PagerDutyPage/MappingsTable/TableSkeleton.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSkeleton.esm.js","sources":["../../../../src/components/PagerDutyPage/MappingsTable/TableSkeleton.tsx"],"sourcesContent":["import { Box, Flex, Skeleton } from '@backstage/ui';\n\nexport function TableSkeleton() {\n  return (\n    <Box data-testid=\"mappings-table-skeleton\" style={{ width: '100%' }} mt=\"4\">\n      <Flex\n        gap=\"4\"\n        style={{\n          padding: '1rem',\n          borderBottom: '1px solid var(--bui-border-neutral-default)',\n          backgroundColor: 'var(--bui-bg-surface-0)',\n        }}\n      >\n        <Skeleton style={{ height: '20px', width: '15%' }} />\n        <Skeleton style={{ height: '20px', width: '15%' }} />\n        <Skeleton style={{ height: '20px', width: '20%' }} />\n        <Skeleton style={{ height: '20px', width: '12%' }} />\n        <Skeleton style={{ height: '20px', width: '12%' }} />\n        <Skeleton style={{ height: '20px', width: '12%' }} />\n        <Skeleton style={{ height: '20px', width: '10%' }} />\n      </Flex>\n\n      {[...Array(10)].map((_, index) => (\n        <Flex\n          key={index}\n          gap=\"4\"\n          style={{\n            padding: '1rem',\n            borderBottom: '1px solid var(--bui-border-neutral-subtle)',\n          }}\n        >\n          <Skeleton style={{ height: '16px', width: '15%' }} />\n          <Skeleton style={{ height: '16px', width: '15%' }} />\n          <Skeleton style={{ height: '16px', width: '20%' }} />\n          <Skeleton style={{ height: '16px', width: '12%' }} />\n          <Skeleton style={{ height: '16px', width: '12%' }} />\n          <Skeleton style={{ height: '16px', width: '12%' }} />\n          <Skeleton style={{ height: '16px', width: '10%' }} />\n        </Flex>\n      ))}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,aAAA,GAAgB;AAC9B,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,aAAA,EAAY,yBAAA,EAA0B,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAO,EAAG,EAAA,EAAG,GAAA,EACtE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAI,GAAA;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc,6CAAA;AAAA,UACd,eAAA,EAAiB;AAAA,SACnB;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG;AAAA;AAAA;AAAA,KACrD;AAAA,IAEC,CAAC,GAAG,KAAA,CAAM,EAAE,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,KAAA,qBACtB,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QAEC,GAAA,EAAI,GAAA;AAAA,QACJ,KAAA,EAAO;AAAA,UACL,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc;AAAA,SAChB;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG,CAAA;AAAA,0BACnD,GAAA,CAAC,YAAS,KAAA,EAAO,EAAE,QAAQ,MAAA,EAAQ,KAAA,EAAO,OAAM,EAAG;AAAA;AAAA,OAAA;AAAA,MAb9C;AAAA,KAeR;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/PagerDutyPage/MappingsTable/hooks/useConfirmMappings.esm.js

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useApi } from '@backstage/core-plugin-api';
+import { pagerDutyApiRef } from '../../../../api/client.esm.js';
+import { useAccountContext } from '../../AccountContext.esm.js';
+
+function useConfirmMappings({
+  autoMatchResults,
+  mappingEntities,
+  onSuccess,
+  onError
+}) {
+  const pagerDutyApi = useApi(pagerDutyApiRef);
+  const queryClient = useQueryClient();
+  const { selectedAccount } = useAccountContext();
+  const [isConfirming, setIsConfirming] = useState(false);
+  const confirmMappings = async () => {
+    try {
+      setIsConfirming(true);
+      const totalCount = Object.keys(autoMatchResults).length;
+      const mappingsToCreate = Object.entries(autoMatchResults).map(
+        ([entityName, matchData]) => {
+          const entity = mappingEntities?.find(
+            (e) => e.name === entityName
+          );
+          const entityRef = entity ? `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase() : `component:default/${entityName}`;
+          return {
+            serviceId: matchData.serviceId,
+            integrationKey: "",
+            entityRef,
+            account: selectedAccount || ""
+          };
+        }
+      );
+      const response = await pagerDutyApi.storeBulkServiceMappings(
+        mappingsToCreate
+      );
+      if (response.ok) {
+        const result = await response.json();
+        const successCount = result.successCount || 0;
+        const skippedCount = result.skippedCount || 0;
+        const errorCount = result.errorCount || 0;
+        const counts = {
+          created: successCount,
+          skipped: skippedCount,
+          errored: errorCount
+        };
+        onSuccess(successCount, totalCount, counts);
+        queryClient.invalidateQueries({
+          queryKey: ["pagerduty", "enhancedEntityMappings"]
+        });
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        onError(
+          errorData.error || "Failed to save mappings. Please try again."
+        );
+      }
+    } catch (error) {
+      onError(
+        `An error occurred while saving mappings: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+  return { confirmMappings, isConfirming };
+}
+
+export { useConfirmMappings };
+//# sourceMappingURL=useConfirmMappings.esm.js.map

package/dist/components/PagerDutyPage/MappingsTable/hooks/useConfirmMappings.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmMappings.esm.js","sources":["../../../../../src/components/PagerDutyPage/MappingsTable/hooks/useConfirmMappings.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../../../api';\nimport { AutoMatchResults } from '../MappingsTable';\nimport { MappingCounts } from '../MappingToast';\nimport { FormattedBackstageEntity } from '@pagerduty/backstage-plugin-common';\nimport { useAccountContext } from '../../AccountContext';\n\ninterface UseConfirmMappingsParams {\n  autoMatchResults: AutoMatchResults;\n  mappingEntities?: FormattedBackstageEntity[];\n  onSuccess: (\n    successCount: number,\n    totalCount: number,\n    counts: MappingCounts,\n  ) => void;\n  onError: (errorMessage: string) => void;\n}\n\nexport function useConfirmMappings({\n  autoMatchResults,\n  mappingEntities,\n  onSuccess,\n  onError,\n}: UseConfirmMappingsParams) {\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const queryClient = useQueryClient();\n  const { selectedAccount } = useAccountContext();\n  const [isConfirming, setIsConfirming] = useState(false);\n\n  const confirmMappings = async () => {\n    try {\n      setIsConfirming(true);\n      const totalCount = Object.keys(autoMatchResults).length;\n      const mappingsToCreate = Object.entries(autoMatchResults).map(\n        ([entityName, matchData]) => {\n          const entity = mappingEntities?.find(\n            (e: FormattedBackstageEntity) => e.name === entityName,\n          );\n\n          const entityRef = entity\n            ? `${entity.type}:${entity.namespace}/${entity.name}`.toLowerCase()\n            : `component:default/${entityName}`;\n\n          return {\n            serviceId: matchData.serviceId,\n            integrationKey: '',\n            entityRef: entityRef,\n            account: selectedAccount || '',\n          };\n        },\n      );\n\n      const response = await pagerDutyApi.storeBulkServiceMappings(\n        mappingsToCreate,\n      );\n\n      if (response.ok) {\n        const result = await response.json();\n        const successCount = result.successCount || 0;\n        const skippedCount = result.skippedCount || 0;\n        const errorCount = result.errorCount || 0;\n\n        const counts: MappingCounts = {\n          created: successCount,\n          skipped: skippedCount,\n          errored: errorCount,\n        };\n        onSuccess(successCount, totalCount, counts);\n        queryClient.invalidateQueries({\n          queryKey: ['pagerduty', 'enhancedEntityMappings'],\n        });\n      } else {\n        const errorData = await response.json().catch(() => ({}));\n        onError(\n          errorData.error || 'Failed to save mappings. Please try again.',\n        );\n      }\n    } catch (error) {\n      onError(\n        `An error occurred while saving mappings: ${\n          error instanceof Error ? error.message : 'Unknown error'\n        }`,\n      );\n    } finally {\n      setIsConfirming(false);\n    }\n  };\n\n  return { confirmMappings, isConfirming };\n}\n"],"names":[],"mappings":";;;;;;AAoBO,SAAS,kBAAA,CAAmB;AAAA,EACjC,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,YAAA,GAAe,OAAO,eAAe,CAAA;AAC3C,EAAA,MAAM,cAAc,cAAA,EAAe;AACnC,EAAA,MAAM,EAAE,eAAA,EAAgB,GAAI,iBAAA,EAAkB;AAC9C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,MAAM,kBAAkB,YAAY;AAClC,IAAA,IAAI;AACF,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,MAAM,UAAA,GAAa,MAAA,CAAO,IAAA,CAAK,gBAAgB,CAAA,CAAE,MAAA;AACjD,MAAA,MAAM,gBAAA,GAAmB,MAAA,CAAO,OAAA,CAAQ,gBAAgB,CAAA,CAAE,GAAA;AAAA,QACxD,CAAC,CAAC,UAAA,EAAY,SAAS,CAAA,KAAM;AAC3B,UAAA,MAAM,SAAS,eAAA,EAAiB,IAAA;AAAA,YAC9B,CAAC,CAAA,KAAgC,CAAA,CAAE,IAAA,KAAS;AAAA,WAC9C;AAEA,UAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,MAAA,CAAO,IAAI,CAAA,CAAA,EAAI,MAAA,CAAO,SAAS,CAAA,CAAA,EAAI,OAAO,IAAI,CAAA,CAAA,CAAG,WAAA,EAAY,GAChE,qBAAqB,UAAU,CAAA,CAAA;AAEnC,UAAA,OAAO;AAAA,YACL,WAAW,SAAA,CAAU,SAAA;AAAA,YACrB,cAAA,EAAgB,EAAA;AAAA,YAChB,SAAA;AAAA,YACA,SAAS,eAAA,IAAmB;AAAA,WAC9B;AAAA,QACF;AAAA,OACF;AAEA,MAAA,MAAM,QAAA,GAAW,MAAM,YAAA,CAAa,wBAAA;AAAA,QAClC;AAAA,OACF;AAEA,MAAA,IAAI,SAAS,EAAA,EAAI;AACf,QAAA,MAAM,MAAA,GAAS,MAAM,QAAA,CAAS,IAAA,EAAK;AACnC,QAAA,MAAM,YAAA,GAAe,OAAO,YAAA,IAAgB,CAAA;AAC5C,QAAA,MAAM,YAAA,GAAe,OAAO,YAAA,IAAgB,CAAA;AAC5C,QAAA,MAAM,UAAA,GAAa,OAAO,UAAA,IAAc,CAAA;AAExC,QAAA,MAAM,MAAA,GAAwB;AAAA,UAC5B,OAAA,EAAS,YAAA;AAAA,UACT,OAAA,EAAS,YAAA;AAAA,UACT,OAAA,EAAS;AAAA,SACX;AACA,QAAA,SAAA,CAAU,YAAA,EAAc,YAAY,MAAM,CAAA;AAC1C,QAAA,WAAA,CAAY,iBAAA,CAAkB;AAAA,UAC5B,QAAA,EAAU,CAAC,WAAA,EAAa,wBAAwB;AAAA,SACjD,CAAA;AAAA,MACH,CAAA,MAAO;AACL,QAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,GAAO,KAAA,CAAM,OAAO,EAAC,CAAE,CAAA;AACxD,QAAA,OAAA;AAAA,UACE,UAAU,KAAA,IAAS;AAAA,SACrB;AAAA,MACF;AAAA,IACF,SAAS,KAAA,EAAO;AACd,MAAA,OAAA;AAAA,QACE,CAAA,yCAAA,EACE,KAAA,YAAiB,KAAA,GAAQ,KAAA,CAAM,UAAU,eAC3C,CAAA;AAAA,OACF;AAAA,IACF,CAAA,SAAE;AACA,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO,EAAE,iBAAiB,YAAA,EAAa;AACzC;;;;"}

package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js

@@ -1,49 +1,72 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { useApi } from '@backstage/core-plugin-api';
-import { pagerDutyApiRef } from '../../api/client.esm.js';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import { MappingTable } from './MappingTable.esm.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MappingsTable from './MappingsTable/MappingsTable.esm.js';
+import { Card, CardBody, Flex, Text, Select } from '@backstage/ui';
+import { AccountProvider, useAccountContext } from './AccountContext.esm.js';
+import { makeStyles } from '@material-ui/core';
 
+const useStyles = makeStyles((theme) => ({
+  accountCard: {
+    marginBottom: "16px",
+    width: "fit-content",
+    borderRadius: "8px"
+  },
+  accountCardBody: {
+    padding: "16px 20px !important"
+  },
+  accountLabel: {
+    fontSize: "15px",
+    fontWeight: 600,
+    color: theme.palette.text.primary,
+    marginBottom: "8px"
+  },
+  requiredIndicator: {
+    display: "inline-block",
+    color: "#dc3545",
+    fontWeight: 700,
+    marginLeft: "2px"
+  },
+  accountSelect: {
+    minWidth: "200px"
+  },
+  mainCard: {
+    borderRadius: "8px"
+  },
+  helpText: {
+    fontSize: "13px",
+    color: theme.palette.text.secondary,
+    fontStyle: "italic",
+    marginTop: "6px"
+  }
+}));
+const ServiceMappingContent = () => {
+  const { selectedAccount, setSelectedAccount, accounts } = useAccountContext();
+  const classes = useStyles();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    accounts.length > 0 && /* @__PURE__ */ jsx(Card, { className: classes.accountCard, children: /* @__PURE__ */ jsx(CardBody, { className: classes.accountCardBody, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsxs(Text, { className: classes.accountLabel, children: [
+        "Please Select an Account:",
+        /* @__PURE__ */ jsx("div", { className: classes.requiredIndicator, children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          selectionMode: "single",
+          size: "small",
+          value: selectedAccount,
+          onChange: (value) => setSelectedAccount(value?.toString() || ""),
+          placeholder: "Select account",
+          options: accounts,
+          className: classes.accountSelect
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Card, { className: classes.mainCard, children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(MappingsTable, {}, selectedAccount) }) })
+  ] });
+};
 const ServiceMappingComponent = () => {
-  const [entityMappings, setEntityMappings] = useState([]);
-  const [catalogEntities, setCatalogEntities] = useState([]);
-  const pagerDutyApi = useApi(pagerDutyApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  useEffect(() => {
-    function fetchMappings() {
-      pagerDutyApi.getEntityMappings().then((result) => {
-        setEntityMappings(result.mappings);
-      });
-    }
-    function fetchCatalogEntities() {
-      catalogApi.getEntities({
-        filter: { kind: "Component" }
-      }).then((result) => {
-        const entities = [];
-        result.items.forEach((entity) => {
-          const annotations = {
-            "pagerduty.com/integration-key": entity.metadata?.annotations?.["pagerduty.com/integration-key"] ?? "",
-            "pagerduty.com/service-id": entity.metadata?.annotations?.["pagerduty.com/service-id"] ?? ""
-          };
-          entities.push({
-            name: entity.metadata?.name,
-            id: entity.metadata?.uid ?? "",
-            namespace: entity.metadata?.namespace ?? "",
-            type: entity.kind ?? "",
-            system: entity.spec?.system ? JSON.stringify(entity.spec?.system) : "",
-            owner: entity.spec?.owner ? JSON.stringify(entity.spec?.owner) : "",
-            lifecycle: entity.spec?.lifecycle ? JSON.stringify(entity.spec?.lifecycle) : "",
-            annotations
-          });
-        });
-        setCatalogEntities(entities);
-      });
-    }
-    fetchMappings();
-    fetchCatalogEntities();
-  }, [catalogApi, pagerDutyApi]);
-  return /* @__PURE__ */ jsx(MappingTable, { mappings: entityMappings, catalogEntities });
+  const queryClient = new QueryClient();
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(AccountProvider, { children: /* @__PURE__ */ jsx(ServiceMappingContent, {}) }) });
 };
 
 export { ServiceMappingComponent };

package/dist/components/PagerDutyPage/ServiceMappingComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceMappingComponent.esm.js","sources":["../../../src/components/PagerDutyPage/ServiceMappingComponent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { PagerDutyEntityMapping } from '@pagerduty/backstage-plugin-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { MappingTable } from './MappingTable';\nimport { BackstageEntity, Annotations } from '../types';\n\nexport const ServiceMappingComponent = () => {\n  const [entityMappings, setEntityMappings] = useState<\n    PagerDutyEntityMapping[]\n  >([]);\n  const [catalogEntities, setCatalogEntities] = useState<BackstageEntity[]>([]);\n\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const catalogApi = useApi(catalogApiRef);\n\n  // call fetchMappings() and fetchCatalogEntities() on useEffect hook\n  useEffect(() => {\n    function fetchMappings() {\n      pagerDutyApi.getEntityMappings().then(result => {\n        setEntityMappings(result.mappings);\n      });\n    }\n\n    function fetchCatalogEntities() {\n      catalogApi\n        .getEntities({\n          filter: { kind: 'Component' },\n        })\n        .then(result => {\n          const entities: BackstageEntity[] = [];\n          result.items.forEach(entity => {\n            const annotations: Annotations = {\n              'pagerduty.com/integration-key':\n                entity.metadata?.annotations?.[\n                  'pagerduty.com/integration-key'\n                ] ?? '',\n              'pagerduty.com/service-id':\n                entity.metadata?.annotations?.['pagerduty.com/service-id'] ??\n                '',\n            };\n\n            entities.push({\n              name: entity.metadata?.name,\n              id: entity.metadata?.uid ?? '',\n              namespace: entity.metadata?.namespace ?? '',\n              type: entity.kind ?? '',\n              system: entity.spec?.system\n                ? JSON.stringify(entity.spec?.system)\n                : '',\n              owner: entity.spec?.owner\n                ? JSON.stringify(entity.spec?.owner)\n                : '',\n              lifecycle: entity.spec?.lifecycle\n                ? JSON.stringify(entity.spec?.lifecycle)\n                : '',\n              annotations: annotations,\n            });\n          });\n\n          setCatalogEntities(entities);\n        });\n    }\n\n    fetchMappings();\n    fetchCatalogEntities();\n  }, [catalogApi, pagerDutyApi]);\n\n  return (\n    <MappingTable mappings={entityMappings} catalogEntities={catalogEntities} />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA,CAE1C,EAAE,CAAA;AACJ,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAA4B,EAAE,CAAA;AAE5E,EAAA,MAAM,YAAA,GAAe,OAAO,eAAe,CAAA;AAC3C,EAAA,MAAM,UAAA,GAAa,OAAO,aAAa,CAAA;AAGvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAS,aAAA,GAAgB;AACvB,MAAA,YAAA,CAAa,iBAAA,EAAkB,CAAE,IAAA,CAAK,CAAA,MAAA,KAAU;AAC9C,QAAA,iBAAA,CAAkB,OAAO,QAAQ,CAAA;AAAA,MACnC,CAAC,CAAA;AAAA,IACH;AAEA,IAAA,SAAS,oBAAA,GAAuB;AAC9B,MAAA,UAAA,CACG,WAAA,CAAY;AAAA,QACX,MAAA,EAAQ,EAAE,IAAA,EAAM,WAAA;AAAY,OAC7B,CAAA,CACA,IAAA,CAAK,CAAA,MAAA,KAAU;AACd,QAAA,MAAM,WAA8B,EAAC;AACrC,QAAA,MAAA,CAAO,KAAA,CAAM,QAAQ,CAAA,MAAA,KAAU;AAC7B,UAAA,MAAM,WAAA,GAA2B;AAAA,YAC/B,+BAAA,EACE,MAAA,CAAO,QAAA,EAAU,WAAA,GACf,+BACF,CAAA,IAAK,EAAA;AAAA,YACP,0BAAA,EACE,MAAA,CAAO,QAAA,EAAU,WAAA,GAAc,0BAA0B,CAAA,IACzD;AAAA,WACJ;AAEA,UAAA,QAAA,CAAS,IAAA,CAAK;AAAA,YACZ,IAAA,EAAM,OAAO,QAAA,EAAU,IAAA;AAAA,YACvB,EAAA,EAAI,MAAA,CAAO,QAAA,EAAU,GAAA,IAAO,EAAA;AAAA,YAC5B,SAAA,EAAW,MAAA,CAAO,QAAA,EAAU,SAAA,IAAa,EAAA;AAAA,YACzC,IAAA,EAAM,OAAO,IAAA,IAAQ,EAAA;AAAA,YACrB,MAAA,EAAQ,OAAO,IAAA,EAAM,MAAA,GACjB,KAAK,SAAA,CAAU,MAAA,CAAO,IAAA,EAAM,MAAM,CAAA,GAClC,EAAA;AAAA,YACJ,KAAA,EAAO,OAAO,IAAA,EAAM,KAAA,GAChB,KAAK,SAAA,CAAU,MAAA,CAAO,IAAA,EAAM,KAAK,CAAA,GACjC,EAAA;AAAA,YACJ,SAAA,EAAW,OAAO,IAAA,EAAM,SAAA,GACpB,KAAK,SAAA,CAAU,MAAA,CAAO,IAAA,EAAM,SAAS,CAAA,GACrC,EAAA;AAAA,YACJ;AAAA,WACD,CAAA;AAAA,QACH,CAAC,CAAA;AAED,QAAA,kBAAA,CAAmB,QAAQ,CAAA;AAAA,MAC7B,CAAC,CAAA;AAAA,IACL;AAEA,IAAA,aAAA,EAAc;AACd,IAAA,oBAAA,EAAqB;AAAA,EACvB,CAAA,EAAG,CAAC,UAAA,EAAY,YAAY,CAAC,CAAA;AAE7B,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EAAa,QAAA,EAAU,cAAA,EAAgB,eAAA,EAAkC,CAAA;AAE9E;;;;"}
+{"version":3,"file":"ServiceMappingComponent.esm.js","sources":["../../../src/components/PagerDutyPage/ServiceMappingComponent.tsx"],"sourcesContent":["import { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport MappingsTable from './MappingsTable/MappingsTable';\nimport { Card, CardBody, Select, Flex, Text } from '@backstage/ui';\nimport { AccountProvider, useAccountContext } from './AccountContext';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  accountCard: {\n    marginBottom: '16px',\n    width: 'fit-content',\n    borderRadius: '8px',\n  },\n  accountCardBody: {\n    padding: '16px 20px !important',\n  },\n  accountLabel: {\n    fontSize: '15px',\n    fontWeight: 600,\n    color: theme.palette.text.primary,\n    marginBottom: '8px',\n  },\n  requiredIndicator: {\n    display: 'inline-block',\n    color: '#dc3545',\n    fontWeight: 700,\n    marginLeft: '2px',\n  },\n  accountSelect: {\n    minWidth: '200px',\n  },\n  mainCard: {\n    borderRadius: '8px',\n  },\n  helpText: {\n    fontSize: '13px',\n    color: theme.palette.text.secondary,\n    fontStyle: 'italic',\n    marginTop: '6px',\n  },\n}));\n\nconst ServiceMappingContent = () => {\n  const { selectedAccount, setSelectedAccount, accounts } = useAccountContext();\n  const classes = useStyles();\n\n  return (\n    <>\n      {accounts.length > 0 && (\n        <Card className={classes.accountCard}>\n          <CardBody className={classes.accountCardBody}>\n            <Flex direction=\"column\" gap=\"2\">\n              <Text className={classes.accountLabel}>\n                Please Select an Account:\n                <div className={classes.requiredIndicator}>*</div>\n              </Text>\n              <Select\n                selectionMode=\"single\"\n                size=\"small\"\n                value={selectedAccount}\n                onChange={value => setSelectedAccount(value?.toString() || '')}\n                placeholder=\"Select account\"\n                options={accounts}\n                className={classes.accountSelect}\n              />\n            </Flex>\n          </CardBody>\n        </Card>\n      )}\n      <Card className={classes.mainCard}>\n        <CardBody>\n          <MappingsTable key={selectedAccount} />\n        </CardBody>\n      </Card>\n    </>\n  );\n};\n\nexport const ServiceMappingComponent = () => {\n  const queryClient = new QueryClient();\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AccountProvider>\n        <ServiceMappingContent />\n      </AccountProvider>\n    </QueryClientProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PagerDutyPage/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { makeStyles, Typography, createStyles } from '@material-ui/core';
-import { Grid, Card, RadioGroup, Radio } from '@backstage/ui';
+import { makeStyles, CardContent, Typography, createStyles } from '@material-ui/core';
+import { Card, Flex, Text, RadioGroup, Radio } from '@backstage/ui';
 import { Page, Header, Content, TabbedLayout } from '@backstage/core-components';
 import { ServiceMappingComponent } from './ServiceMappingComponent.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
@@ -10,7 +10,7 @@ import { NotFoundError } from '@backstage/errors';
 
 const SERVICE_DEPENDENCY_SYNC_STRATEGY = "settings::service-dependency-sync-strategy";
 const useStyles = makeStyles(
-  () => createStyles({
+  (theme) => createStyles({
     cardStyles: {
       padding: "15px",
       marginTop: "16px"
@@ -20,11 +20,26 @@ const useStyles = makeStyles(
     },
     linkStyles: {
       color: "cadetblue"
+    },
+    descriptionCard: {
+      marginBottom: "24px",
+      borderRadius: "8px"
+    },
+    descriptionText: {
+      fontSize: "16px",
+      color: theme.palette.text.primary,
+      lineHeight: 1.5,
+      marginBottom: "4px"
+    },
+    warningText: {
+      fontSize: "16px",
+      color: theme.palette.text.primary,
+      lineHeight: 1.5
     }
   })
 );
 const PagerDutyPage = () => {
-  const { cardStyles, textContainerStyles, linkStyles } = useStyles();
+  const { cardStyles, textContainerStyles, linkStyles, descriptionCard, descriptionText, warningText } = useStyles();
   const pagerDutyApi = useApi(pagerDutyApiRef);
   const [
     selectedServiceDependencyStrategy,
@@ -56,15 +71,15 @@ const PagerDutyPage = () => {
   return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
     /* @__PURE__ */ jsx(Header, { title: "PagerDuty", subtitle: "Advanced configurations" }),
     /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(TabbedLayout, { children: [
-      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/service-mapping", title: "Service Mapping", children: /* @__PURE__ */ jsxs(Grid.Root, { gap: "3", columns: "1", children: [
-        /* @__PURE__ */ jsxs(Grid.Item, { children: [
-          /* @__PURE__ */ jsx(Typography, { children: "Easily map your existing PagerDuty services to entities in Backstage without the need to add anotations to all your projects." }),
-          /* @__PURE__ */ jsxs(Typography, { children: [
-            /* @__PURE__ */ jsx("b", { children: "Warning: " }),
-            "Only 1:1 mapping is allowed at this time."
+      /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/service-mapping", title: "Service Mapping", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Card, { className: descriptionCard, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+          /* @__PURE__ */ jsx(Text, { className: descriptionText, children: "Easily map your existing PagerDuty services to entities in Backstage without the need to add anotations to all your projects." }),
+          /* @__PURE__ */ jsxs(Text, { className: warningText, children: [
+            /* @__PURE__ */ jsx("strong", { children: "Warning:" }),
+            " Only 1:1 mapping is allowed at this time."
           ] })
-        ] }),
-        /* @__PURE__ */ jsx(Grid.Item, { children: /* @__PURE__ */ jsx(ServiceMappingComponent, {}) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(ServiceMappingComponent, {})
       ] }) }),
       /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/settings", title: "Configuration", children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h4", children: "Plugin configuration" }),

package/dist/components/PagerDutyPage/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/PagerDutyPage/index.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { createStyles, makeStyles, Typography } from '@material-ui/core';\nimport { Card, Grid, RadioGroup, Radio } from '@backstage/ui';\nimport {\n  Header,\n  Page,\n  Content,\n  TabbedLayout,\n} from '@backstage/core-components';\nimport { ServiceMappingComponent } from './ServiceMappingComponent';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { NotFoundError } from '@backstage/errors';\nimport { BackstageTheme } from '@backstage/theme';\n\nenum StoreSettings {\n  backstage = 'backstage',\n  pagerduty = 'pagerduty',\n  both = 'both',\n  disabled = 'disabled',\n}\n\nconst SERVICE_DEPENDENCY_SYNC_STRATEGY =\n  'settings::service-dependency-sync-strategy';\n\nconst useStyles = makeStyles<BackstageTheme>(() =>\n  createStyles({\n    cardStyles: {\n      padding: '15px',\n      marginTop: '16px',\n    },\n    textContainerStyles: {\n      marginTop: '16px',\n    },\n    linkStyles: {\n      color: 'cadetblue',\n    },\n  }),\n);\n\n/** @public */\nexport const PagerDutyPage = () => {\n  const { cardStyles, textContainerStyles, linkStyles } = useStyles();\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const [\n    selectedServiceDependencyStrategy,\n    setSelectedServiceDependencyStrategy,\n  ] = useState('disabled');\n\n  useEffect(() => {\n    function fetchSetting() {\n      pagerDutyApi\n        .getSetting(SERVICE_DEPENDENCY_SYNC_STRATEGY)\n        .then(result => {\n          if (result !== undefined) {\n            setSelectedServiceDependencyStrategy(result.value);\n          }\n        })\n        .catch(error => {\n          if (error instanceof NotFoundError) {\n            // If the setting is not found, set the default value to \"disabled\"\n            setSelectedServiceDependencyStrategy('disabled');\n          }\n        });\n    }\n\n    fetchSetting();\n  }, [pagerDutyApi]);\n\n  const handleChange = (value: StoreSettings) => {\n    setSelectedServiceDependencyStrategy(value);\n    pagerDutyApi.storeSettings([\n      {\n        id: SERVICE_DEPENDENCY_SYNC_STRATEGY,\n        value,\n      },\n    ]);\n  };\n\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"PagerDuty\" subtitle=\"Advanced configurations\" />\n      <Content>\n        <TabbedLayout>\n          <TabbedLayout.Route path=\"/service-mapping\" title=\"Service Mapping\">\n            <Grid.Root gap=\"3\" columns=\"1\">\n              <Grid.Item>\n                <Typography>\n                  Easily map your existing PagerDuty services to entities in\n                  Backstage without the need to add anotations to all your\n                  projects.\n                </Typography>\n                <Typography>\n                  <b>Warning: </b>Only 1:1 mapping is allowed at this time.\n                </Typography>\n              </Grid.Item>\n              <Grid.Item>\n                <ServiceMappingComponent />\n              </Grid.Item>\n            </Grid.Root>\n          </TabbedLayout.Route>\n          <TabbedLayout.Route path=\"/settings\" title=\"Configuration\">\n            <>\n              <Typography variant=\"h4\">Plugin configuration</Typography>\n              <Typography>\n                Configure your PagerDuty plugin configuration here\n              </Typography>\n\n              <Card\n                title=\"Service dependency synchronization preferences\"\n                className={cardStyles}\n              >\n                <Typography variant=\"h6\">\n                  Service dependency synchronization strategy\n                </Typography>\n                <RadioGroup\n                  label=\"Select the main source of truth for your service dependencies\"\n                  value={selectedServiceDependencyStrategy}\n                  onChange={value => handleChange(value as StoreSettings)}\n                >\n                  <Radio value={StoreSettings.backstage}>Backstage</Radio>\n                  <Radio value={StoreSettings.pagerduty}>PagerDuty</Radio>\n                  <Radio value={StoreSettings.both}>Both</Radio>\n                  <Radio value={StoreSettings.disabled}>Disabled</Radio>\n                </RadioGroup>\n\n                <div className={textContainerStyles}>\n                  <Typography>\n                    <b>Warning: </b>Changing this setting will affect how your\n                    service dependencies are synchronized and may cause data\n                    loss. Check the{' '}\n                    <a\n                      className={linkStyles}\n                      href=\"https://pagerduty.github.io/backstage-plugin-docs/index.html\"\n                    >\n                      documentation\n                    </a>{' '}\n                    for more information.\n                  </Typography>\n                </div>\n              </Card>\n            </>\n          </TabbedLayout.Route>\n        </TabbedLayout>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/PagerDutyPage/index.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  CardContent,\n  createStyles,\n  makeStyles,\n  Typography,\n} from '@material-ui/core';\nimport { Card, RadioGroup, Radio, Flex, Text } from '@backstage/ui';\nimport {\n  Header,\n  Page,\n  Content,\n  TabbedLayout,\n} from '@backstage/core-components';\nimport { ServiceMappingComponent } from './ServiceMappingComponent';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { pagerDutyApiRef } from '../../api';\nimport { NotFoundError } from '@backstage/errors';\nimport { BackstageTheme } from '@backstage/theme';\n\nenum StoreSettings {\n  backstage = 'backstage',\n  pagerduty = 'pagerduty',\n  both = 'both',\n  disabled = 'disabled',\n}\n\nconst SERVICE_DEPENDENCY_SYNC_STRATEGY =\n  'settings::service-dependency-sync-strategy';\n\nconst useStyles = makeStyles<BackstageTheme>(theme =>\n  createStyles({\n    cardStyles: {\n      padding: '15px',\n      marginTop: '16px',\n    },\n    textContainerStyles: {\n      marginTop: '16px',\n    },\n    linkStyles: {\n      color: 'cadetblue',\n    },\n    descriptionCard: {\n      marginBottom: '24px',\n      borderRadius: '8px',\n    },\n    descriptionText: {\n      fontSize: '16px',\n      color: theme.palette.text.primary,\n      lineHeight: 1.5,\n      marginBottom: '4px',\n    },\n    warningText: {\n      fontSize: '16px',\n      color: theme.palette.text.primary,\n      lineHeight: 1.5,\n    },\n  }),\n);\n\n/** @public */\nexport const PagerDutyPage = () => {\n  const { cardStyles, textContainerStyles, linkStyles, descriptionCard, descriptionText, warningText } = useStyles();\n  const pagerDutyApi = useApi(pagerDutyApiRef);\n  const [\n    selectedServiceDependencyStrategy,\n    setSelectedServiceDependencyStrategy,\n  ] = useState('disabled');\n\n  useEffect(() => {\n    function fetchSetting() {\n      pagerDutyApi\n        .getSetting(SERVICE_DEPENDENCY_SYNC_STRATEGY)\n        .then(result => {\n          if (result !== undefined) {\n            setSelectedServiceDependencyStrategy(result.value);\n          }\n        })\n        .catch(error => {\n          if (error instanceof NotFoundError) {\n            // If the setting is not found, set the default value to \"disabled\"\n            setSelectedServiceDependencyStrategy('disabled');\n          }\n        });\n    }\n\n    fetchSetting();\n  }, [pagerDutyApi]);\n\n  const handleChange = (value: StoreSettings) => {\n    setSelectedServiceDependencyStrategy(value);\n    pagerDutyApi.storeSettings([\n      {\n        id: SERVICE_DEPENDENCY_SYNC_STRATEGY,\n        value,\n      },\n    ]);\n  };\n\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"PagerDuty\" subtitle=\"Advanced configurations\" />\n      <Content>\n        <TabbedLayout>\n          <TabbedLayout.Route path=\"/service-mapping\" title=\"Service Mapping\">\n            <>\n              <Card className={descriptionCard}>\n                <CardContent>\n                  <Flex direction=\"column\">\n                    <Text className={descriptionText}>\n                      Easily map your existing PagerDuty services to entities in\n                      Backstage without the need to add anotations to all your\n                      projects.\n                    </Text>\n                    <Text className={warningText}>\n                      <strong>Warning:</strong> Only 1:1 mapping is allowed at this time.\n                    </Text>\n                  </Flex>\n                </CardContent>\n              </Card>\n\n              <ServiceMappingComponent />\n            </>\n          </TabbedLayout.Route>\n          <TabbedLayout.Route path=\"/settings\" title=\"Configuration\">\n            <>\n              <Typography variant=\"h4\">Plugin configuration</Typography>\n              <Typography>\n                Configure your PagerDuty plugin configuration here\n              </Typography>\n\n              <Card\n                title=\"Service dependency synchronization preferences\"\n                className={cardStyles}\n              >\n                <Typography variant=\"h6\">\n                  Service dependency synchronization strategy\n                </Typography>\n                <RadioGroup\n                  label=\"Select the main source of truth for your service dependencies\"\n                  value={selectedServiceDependencyStrategy}\n                  onChange={value => handleChange(value as StoreSettings)}\n                >\n                  <Radio value={StoreSettings.backstage}>Backstage</Radio>\n                  <Radio value={StoreSettings.pagerduty}>PagerDuty</Radio>\n                  <Radio value={StoreSettings.both}>Both</Radio>\n                  <Radio value={StoreSettings.disabled}>Disabled</Radio>\n                </RadioGroup>\n\n                <div className={textContainerStyles}>\n                  <Typography>\n                    <b>Warning: </b>Changing this setting will affect how your\n                    service dependencies are synchronized and may cause data\n                    loss. Check the{' '}\n                    <a\n                      className={linkStyles}\n                      href=\"https://pagerduty.github.io/backstage-plugin-docs/index.html\"\n                    >\n                      documentation\n                    </a>{' '}\n                    for more information.\n                  </Typography>\n                </div>\n              </Card>\n            </>\n          </TabbedLayout.Route>\n        </TabbedLayout>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TriggerButton/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { makeStyles, Button } from '@material-ui/core';
-import { usePagerdutyEntity } from '../../hooks/index.esm.js';
+import { usePagerdutyEntity } from '../../hooks/usePagerDutyEntity.esm.js';
 import { TriggerDialog } from '../TriggerDialog/TriggerDialog.esm.js';
 
 const useStyles = makeStyles((theme) => ({

package/dist/components/TriggerButton/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/TriggerButton/index.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\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useCallback, ReactNode, useState } from 'react';\nimport { makeStyles, Button } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { usePagerdutyEntity } from '../../hooks';\nimport { TriggerDialog } from '../TriggerDialog';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  buttonStyle: {\n    backgroundColor: theme.palette.error.main,\n    color: theme.palette.error.contrastText,\n    '&:hover': {\n      backgroundColor: theme.palette.error.dark,\n    },\n  },\n}));\n\n/** @public */\nexport function TriggerButton(props: { children?: ReactNode }) {\n  const { buttonStyle } = useStyles();\n  const { integrationKey, name } = usePagerdutyEntity();\n  const [dialogShown, setDialogShown] = useState<boolean>(false);\n\n  const showDialog = useCallback(() => {\n    setDialogShown(true);\n  }, [setDialogShown]);\n  const hideDialog = useCallback(() => {\n    setDialogShown(false);\n  }, [setDialogShown]);\n\n  const disabled = !integrationKey;\n  return (\n    <>\n      <Button\n        onClick={showDialog}\n        variant=\"contained\"\n        className={disabled ? '' : buttonStyle}\n        disabled={disabled}\n      >\n        {integrationKey\n          ? props.children ?? 'Create new incident'\n          : 'Missing integration key'}\n      </Button>\n      {integrationKey && (\n        <TriggerDialog\n          showDialog={dialogShown}\n          handleDialog={hideDialog}\n          integrationKey={integrationKey}\n          serviceName={name}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,SAAA,GAAY,WAA2B,CAAA,KAAA,MAAU;AAAA,EACrD,WAAA,EAAa;AAAA,IACX,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,IAAA;AAAA,IACrC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,YAAA;AAAA,IAC3B,SAAA,EAAW;AAAA,MACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM;AAAA;AACvC;AAEJ,CAAA,CAAE,CAAA;AAGK,SAAS,cAAc,KAAA,EAAiC;AAC7D,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,SAAA,EAAU;AAClC,EAAA,MAAM,EAAE,cAAA,EAAgB,IAAA,EAAK,GAAI,kBAAA,EAAmB;AACpD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AACnB,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAW,CAAC,cAAA;AAClB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,UAAA;AAAA,QACT,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAW,WAAW,EAAA,GAAK,WAAA;AAAA,QAC3B,QAAA;AAAA,QAEC,QAAA,EAAA,cAAA,GACG,KAAA,CAAM,QAAA,IAAY,qBAAA,GAClB;AAAA;AAAA,KACN;AAAA,IACC,cAAA,oBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,WAAA;AAAA,QACZ,YAAA,EAAc,UAAA;AAAA,QACd,cAAA;AAAA,QACA,WAAA,EAAa;AAAA;AAAA;AACf,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/TriggerButton/index.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\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { useCallback, ReactNode, useState } from 'react';\nimport { makeStyles, Button } from '@material-ui/core';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { usePagerdutyEntity } from '../../hooks/usePagerDutyEntity';\nimport { TriggerDialog } from '../TriggerDialog';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  buttonStyle: {\n    backgroundColor: theme.palette.error.main,\n    color: theme.palette.error.contrastText,\n    '&:hover': {\n      backgroundColor: theme.palette.error.dark,\n    },\n  },\n}));\n\n/** @public */\nexport function TriggerButton(props: { children?: ReactNode }) {\n  const { buttonStyle } = useStyles();\n  const { integrationKey, name } = usePagerdutyEntity();\n  const [dialogShown, setDialogShown] = useState<boolean>(false);\n\n  const showDialog = useCallback(() => {\n    setDialogShown(true);\n  }, [setDialogShown]);\n  const hideDialog = useCallback(() => {\n    setDialogShown(false);\n  }, [setDialogShown]);\n\n  const disabled = !integrationKey;\n  return (\n    <>\n      <Button\n        onClick={showDialog}\n        variant=\"contained\"\n        className={disabled ? '' : buttonStyle}\n        disabled={disabled}\n      >\n        {integrationKey\n          ? props.children ?? 'Create new incident'\n          : 'Missing integration key'}\n      </Button>\n      {integrationKey && (\n        <TriggerDialog\n          showDialog={dialogShown}\n          handleDialog={hideDialog}\n          integrationKey={integrationKey}\n          serviceName={name}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,SAAA,GAAY,WAA2B,CAAA,KAAA,MAAU;AAAA,EACrD,WAAA,EAAa;AAAA,IACX,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,IAAA;AAAA,IACrC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,YAAA;AAAA,IAC3B,SAAA,EAAW;AAAA,MACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM;AAAA;AACvC;AAEJ,CAAA,CAAE,CAAA;AAGK,SAAS,cAAc,KAAA,EAAiC;AAC7D,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,SAAA,EAAU;AAClC,EAAA,MAAM,EAAE,cAAA,EAAgB,IAAA,EAAK,GAAI,kBAAA,EAAmB;AACpD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAE7D,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,IAAI,CAAA;AAAA,EACrB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AACnB,EAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,IAAA,cAAA,CAAe,KAAK,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAA,MAAM,WAAW,CAAC,cAAA;AAClB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,UAAA;AAAA,QACT,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAW,WAAW,EAAA,GAAK,WAAA;AAAA,QAC3B,QAAA;AAAA,QAEC,QAAA,EAAA,cAAA,GACG,KAAA,CAAM,QAAA,IAAY,qBAAA,GAClB;AAAA;AAAA,KACN;AAAA,IACC,cAAA,oBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAY,WAAA;AAAA,QACZ,YAAA,EAAc,UAAA;AAAA,QACd,cAAA;AAAA,QACA,WAAA,EAAa;AAAA;AAAA;AACf,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/hooks/useDebounce.esm.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay = 500) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return debounced;
+}
+
+export { useDebounce as default };
+//# sourceMappingURL=useDebounce.esm.js.map

package/dist/hooks/useDebounce.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.esm.js","sources":["../../src/hooks/useDebounce.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nexport default function useDebounce<T>(value: T, delay: number = 500) {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const handler = setTimeout(() => setDebounced(value), delay);\n    return () => clearTimeout(handler);\n  }, [value, delay]);\n  return debounced;\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,WAAA,CAAe,KAAA,EAAU,KAAA,GAAgB,GAAA,EAAK;AACpE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,UAAA,CAAW,MAAM,YAAA,CAAa,KAAK,GAAG,KAAK,CAAA;AAC3D,IAAA,OAAO,MAAM,aAAa,OAAO,CAAA;AAAA,EACnC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AACjB,EAAA,OAAO,SAAA;AACT;;;;"}

package/dist/hooks/{index.esm.js → usePagerDutyEntity.esm.js}

@@ -7,4 +7,4 @@ function usePagerdutyEntity() {
 }
 
 export { usePagerdutyEntity };
-//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=usePagerDutyEntity.esm.js.map

package/dist/hooks/usePagerDutyEntity.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagerDutyEntity.esm.js","sources":["../../src/hooks/usePagerDutyEntity.ts"],"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 { useEntity } from '@backstage/plugin-catalog-react';\nimport { PagerDutyEntity } from '../types';\nimport { getPagerDutyEntity } from '../components/pagerDutyEntity';\n\nexport function usePagerdutyEntity(): PagerDutyEntity {\n  const { entity } = useEntity();\n\n  return getPagerDutyEntity(entity);\n}\n"],"names":[],"mappings":";;;AAoBO,SAAS,kBAAA,GAAsC;AACpD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,OAAO,mBAAmB,MAAM,CAAA;AAClC;;;;"}