npm - @burdenoff/microfe-devportal - Versions diffs - 2026.728.2 → 2026.801.2 - Mend

@burdenoff/microfe-devportal 2026.728.2 → 2026.801.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/devportal/pages/WebhookDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WebhookDetailPage.js","names":[],"sources":["../../../src/devportal/pages/WebhookDetailPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n CheckCircle,\n Clock,\n ExternalLink,\n Loader2,\n Pause,\n Play,\n Send,\n Trash2,\n Webhook,\n XCircle,\n AlertCircle,\n} from \"lucide-react\";\nimport { format } from \"date-fns\";\nimport {\n CTAOverflowMenu,\n EmphasisPanel,\n NextSteps,\n} from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { ConfirmDialog, Alert } from \"../components/ConfirmDialog\";\nimport { DataTable, DetailList } from \"../components/DataTable\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { SecretDisplay } from \"../components/SecretDisplay\";\nimport { StatusBadge } from \"../components/StatusBadge\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\nimport {\n type GetWebhookDetailQuery,\n getErrorMessage,\n useDeleteWebhookMutation,\n useGetApplicationQuery,\n useGetWebhookDetailQuery,\n useTestWebhookMutation,\n useUpdateWebhookMutation,\n} from \"../hooks\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalPermission } from \"../hooks/usePermission\";\n\nconst formatTimestamp = (value?: string \| null) => {\n if (!value) return \"Never\";\n return format(new Date(value), \"MMM d, yyyy HH:mm:ss\");\n};\n\ntype WebhookDeliveryEntry =\n GetWebhookDetailQuery[\"webhookDeliveries\"][\"edges\"][number][\"node\"];\n\nexport const WebhookDetailPage: FC = () => {\n const { appId, webhookId } = useParams<{\n appId: string;\n webhookId: string;\n }>();\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const { allowed: canUpdate } = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_UPDATE,\n );\n const { allowed: canDelete } = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_DELETE,\n );\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const [showTestDialog, setShowTestDialog] = useState(false);\n const [testMessage, setTestMessage] = useState<string \| null>(null);\n const [testSuccess, setTestSuccess] = useState(false);\n\n const { data: appData } = useGetApplicationQuery({\n variables: { id: appId ?? \"\" },\n skip: !appId,\n fetchPolicy: \"cache-first\",\n });\n\n useEffect(() => {\n const name = appData?.application?.name;\n if (!appId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(appId, name);\n return () => reg?.unregister(appId);\n }, [appId, appData?.application?.name]);\n\n const { data, loading, error, refetch } = useGetWebhookDetailQuery({\n variables: {\n id: webhookId \|\| \"\",\n limit: 20,\n offset: 0,\n },\n skip: !webhookId,\n fetchPolicy: \"cache-and-network\",\n });\n const [updateWebhook, { loading: updateLoading }] =\n useUpdateWebhookMutation();\n const [deleteWebhook, { loading: deleteLoading }] =\n useDeleteWebhookMutation();\n const [testWebhook, { loading: testLoading }] = useTestWebhookMutation();\n\n const webhook = data?.webhook;\n\n useEffect(() => {\n const name = webhook?.name;\n if (!webhookId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(webhookId, name);\n return () => reg?.unregister(webhookId);\n }, [webhookId, webhook?.name]);\n\n const deliveries: WebhookDeliveryEntry[] =\n data?.webhookDeliveries?.edges?.map(\n (edge: GetWebhookDetailQuery[\"webhookDeliveries\"][\"edges\"][number]) =>\n edge.node,\n ) ?? [];\n const backAppId = appId \|\| webhook?.applicationId;\n const successRate = useMemo(() => {\n if (!webhook) return 0;\n const total = (webhook.successCount ?? 0) + (webhook.failureCount ?? 0);\n if (total === 0) return 100;\n return Math.round(((webhook.successCount ?? 0) / total) * 100);\n }, [webhook]);\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const handleToggleActive = async () => {\n if (!webhook) return;\n\n await updateWebhook({\n variables: {\n id: webhook.id,\n input: {\n isActive: !webhook.isActive,\n },\n },\n });\n\n await refetch();\n };\n\n const handleDelete = async () => {\n if (!webhook) return;\n void nativeImpact(\"medium\");\n\n try {\n await deleteWebhook({\n variables: {\n id: webhook.id,\n },\n });\n void nativeNotify(\"success\");\n handleNavigate(`/apps/${webhook.applicationId}/webhooks`);\n } catch {\n void nativeNotify(\"error\");\n }\n };\n\n const handleTest = async () => {\n if (!webhook) return;\n\n const result = await testWebhook({\n variables: {\n id: webhook.id,\n eventType: webhook.events[0] \|\| \"application.updated\",\n },\n });\n\n const response = result.data?.testWebhook;\n if (!response) {\n setTestSuccess(false);\n setTestMessage(\"Test request did not return a response.\");\n return;\n }\n\n setTestSuccess(response.success);\n setTestMessage(\n response.success\n ? `Test delivery succeeded with HTTP ${response.statusCode ?? 200}.`\n : response.error \|\| \"Webhook test failed.\",\n );\n\n await refetch();\n };\n\n if (loading && !webhook) {\n return (\n <PageLayout\n title={tr(\"devportal.webhook\", \"Webhook\")}\n description={tr(\n \"devportal.loadingWebhookDetails\",\n \"Loading webhook details\",\n )}\n backLink={backAppId ? `/apps/${backAppId}/webhooks` : \"/webhooks\"}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n >\n <div className=\"flex items-center justify-center py-16 text-text-secondary\">\n <Loader2 className=\"h-8 w-8 animate-spin\" />\n </div>\n </PageLayout>\n );\n }\n\n if (error \|\| !webhook) {\n return (\n <PageLayout\n title={tr(\"devportal.webhook\", \"Webhook\")}\n description={tr(\"devportal.webhookDetails\", \"Webhook details\")}\n backLink={backAppId ? `/apps/${backAppId}/webhooks` : \"/webhooks\"}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n >\n <EmptyState\n icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n title={tr(\"devportal.unableToLoadWebhook\", \"Unable to load webhook\")}\n description={\n error\n ? getErrorMessage(error)\n : tr(\"devportal.webhookNotFound\", \"Webhook not found\")\n }\n />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={webhook.name}\n description={\n webhook.description \|\| \"Webhook configuration and delivery history\"\n }\n purpose={tr(\n \"devportal.webhookDetailPurpose\",\n \"This endpoint receives the events you subscribed to, signed with your secret. Check the delivery history to confirm your server is responding with 2xx, send a test event, and pause it if your endpoint is down so deliveries are not lost to repeated failures.\",\n )}\n backLink={`/apps/${backAppId}/webhooks`}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n actions={\n <CTAOverflowMenu\n primary={{\n label: tr(\"devportal.test\", \"Test\"),\n icon: <Send size={16} />,\n onSelect: () => {\n setTestMessage(null);\n setShowTestDialog(true);\n },\n }}\n actions={[\n {\n label: webhook.isActive\n ? tr(\"devportal.pauseWebhook\", \"Pause\")\n : tr(\"devportal.resumeWebhook\", \"Resume\"),\n icon: webhook.isActive ? <Pause size={16} /> : <Play size={16} />,\n disabled: updateLoading \|\| !canUpdate,\n onSelect: () => void handleToggleActive(),\n },\n {\n label: tr(\"devportal.deleteWebhook\", \"Delete\"),\n icon: <Trash2 size={16} />,\n intent: \"destructive\",\n disabled: !canDelete,\n onSelect: () => setShowDeleteDialog(true),\n },\n ]}\n />\n }\n >\n <EmphasisPanel>\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.successRate\", \"Success Rate\")}\n value={`${successRate}%`}\n icon={<CheckCircle size={20} />}\n />\n <StatCard\n title={tr(\n \"devportal.successfulDeliveries\",\n \"Successful Deliveries\",\n )}\n value={(webhook.successCount ?? 0).toLocaleString()}\n icon={<CheckCircle size={20} />}\n />\n <StatCard\n title={tr(\"devportal.failedDeliveries\", \"Failed Deliveries\")}\n value={(webhook.failureCount ?? 0).toLocaleString()}\n icon={<XCircle size={20} />}\n />\n <StatCard\n title={tr(\"devportal.lastTriggered\", \"Last Triggered\")}\n value={\n webhook.lastTriggeredAt\n ? format(new Date(webhook.lastTriggeredAt), \"MMM d, HH:mm\")\n : tr(\"devportal.never\", \"Never\")\n }\n icon={<Clock size={20} />}\n />\n </StatCardGrid>\n </EmphasisPanel>\n\n {/* Guided next steps (dismissable) /}\n <NextSteps\n storageKey={`devportal-webhook-${webhook.id}`}\n steps={[\n {\n id: \"test\",\n label: tr(\"devportal.sendTestEvent\", \"Send a test event\"),\n description: tr(\n \"devportal.webhookStepTest\",\n \"Confirm your endpoint receives and verifies the payload\",\n ),\n icon: <Send size={16} />,\n onClick: () => {\n setTestMessage(null);\n setShowTestDialog(true);\n },\n },\n {\n id: \"toggle\",\n label: webhook.isActive\n ? tr(\"devportal.pauseWebhook\", \"Pause deliveries\")\n : tr(\"devportal.resumeWebhook\", \"Resume deliveries\"),\n description: tr(\n \"devportal.webhookStepToggle\",\n \"Pause while your endpoint is down to avoid lost retries\",\n ),\n icon: webhook.isActive ? <Pause size={16} /> : <Play size={16} />,\n onClick: () => void handleToggleActive(),\n },\n ]}\n />\n\n <PageSection title={tr(\"devportal.configuration\", \"Configuration\")}>\n <DetailList\n items={[\n {\n label: tr(\"devportal.status\", \"Status\"),\n value: <StatusBadge status={webhook.status} type=\"webhook\" />,\n },\n {\n label: tr(\"devportal.endpointUrl\", \"Endpoint URL\"),\n value: (\n <span className=\"flex flex-wrap items-center gap-2 font-mono text-sm\">\n <span className=\"break-all\">{webhook.url}</span>\n <a\n href={webhook.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary\"\n >\n <ExternalLink size={14} />\n </a>\n </span>\n ),\n },\n {\n label: tr(\"devportal.signingSecret\", \"Signing Secret\"),\n value: (\n <SecretDisplay value={webhook.secret \|\| \"*****\"} label=\"\" />\n ),\n },\n {\n label: tr(\"devportal.subscribedEvents\", \"Subscribed Events\"),\n value: (\n <div className=\"flex flex-wrap gap-1\">\n {webhook.events.map((eventName: string) => (\n <code\n key={eventName}\n className=\"rounded bg-bg-sunken px-1.5 py-0.5 text-xs\"\n >\n {eventName}\n </code>\n ))}\n </div>\n ),\n },\n {\n label: tr(\"devportal.retryPolicy\", \"Retry Policy\"),\n value: webhook.retryEnabled\n ? tr(\n \"devportal.retryPolicyEnabled\",\n `Up to ${webhook.maxRetries ?? 0} retries`,\n )\n : tr(\"devportal.retriesDisabled\", \"Retries disabled\"),\n },\n {\n label: tr(\"devportal.created\", \"Created\"),\n value: formatTimestamp(webhook.createdAt),\n },\n {\n label: tr(\"devportal.updated\", \"Updated\"),\n value: formatTimestamp(webhook.updatedAt),\n },\n ]}\n />\n </PageSection>\n\n <PageSection\n title={tr(\"devportal.recentDeliveries\", \"Recent Deliveries\")}\n >\n {deliveries.length > 0 ? (\n <DataTable\n data={deliveries}\n keyField=\"id\"\n columns={[\n {\n key: \"status\",\n header: tr(\"devportal.status\", \"Status\"),\n render: (delivery) => (\n <div className=\"flex items-center gap-2\">\n <StatusBadge status={delivery.status} type=\"delivery\" />\n </div>\n ),\n },\n {\n key: \"eventType\",\n header: tr(\"devportal.event\", \"Event\"),\n render: (delivery) => (\n <code className=\"text-xs\">{delivery.eventType}</code>\n ),\n },\n {\n key: \"responseStatus\",\n header: tr(\"devportal.response\", \"Response\"),\n render: (delivery) => delivery.responseStatus ?? \"-\",\n },\n {\n key: \"attemptNumber\",\n header: tr(\"devportal.attempts\", \"Attempts\"),\n render: (delivery) => delivery.attemptNumber,\n },\n {\n key: \"createdAt\",\n header: tr(\"devportal.created\", \"Created\"),\n render: (delivery) => formatTimestamp(delivery.createdAt),\n },\n ]}\n />\n ) : (\n <EmptyState\n illustration=\"empty-notifications\"\n icon={<Webhook size={24} />}\n title={tr(\"devportal.noDeliveriesYet\", \"No deliveries yet\")}\n description={tr(\n \"devportal.noDeliveriesYetDescription\",\n \"Deliveries will appear here after the first matching event is sent to this endpoint.\",\n )}\n />\n )}\n </PageSection>\n\n <ConfirmDialog\n open={showDeleteDialog}\n onOpenChange={setShowDeleteDialog}\n onConfirm={() => void handleDelete()}\n loading={deleteLoading}\n title={tr(\"devportal.deleteWebhookTitle\", \"Delete webhook\")}\n description={tr(\n \"devportal.deleteWebhookDescription\",\n \"Deleting this webhook stops all future deliveries for this endpoint.\",\n )}\n confirmLabel={tr(\"devportal.deleteWebhookConfirm\", \"Delete webhook\")}\n variant=\"danger\"\n />\n\n <ConfirmDialog\n open={showTestDialog}\n onOpenChange={(open) => {\n setShowTestDialog(open);\n if (!open) {\n setTestMessage(null);\n }\n }}\n onConfirm={() => void handleTest()}\n loading={testLoading}\n title={tr(\"devportal.sendTestDelivery\", \"Send test delivery\")}\n description={tr(\n \"devportal.sendTestDeliveryDescription\",\n \"A signed test event will be sent to the configured endpoint through the public gateway.\",\n )}\n confirmLabel={tr(\"devportal.sendTestEvent\", \"Send test event\")}\n >\n {testMessage && (\n <Alert variant={testSuccess ? \"success\" : \"error\"}>\n {testMessage}\n </Alert>\n )}\n </ConfirmDialog>\n </PageLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4CA,IAAM,KAAmB,MAClB,IACE,EAAO,IAAI,KAAK,EAAM,EAAE,uBAAuB,GADnC,SAOR,UAA8B;CACzC,IAAM,EAAE,UAAO,iBAAc,IAGzB,EACE,EAAE,aAAU,gBAAa,GAAc,EACvC,EAAE,SAAM,IAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAE9B,EAAE,SAAS,MAAc,EAC7B,EAAsB,eACvB,EACK,EAAE,SAAS,MAAc,EAC7B,EAAsB,eACvB,EACK,CAAC,GAAkB,KAAuB,EAAS,GAAM,EACzD,CAAC,IAAgB,KAAqB,EAAS,GAAM,EACrD,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,IAAa,KAAkB,EAAS,GAAM,EAE/C,EAAE,MAAM,MAAY,EAAuB;EAC/C,WAAW,EAAE,IAAI,KAAS,IAAI;EAC9B,MAAM,CAAC;EACP,aAAa;EACd,CAAC;AAEF,SAAgB;EACd,IAAM,IAAO,GAAS,aAAa;AACnC,MAAI,CAAC,KAAS,CAAC,EAAM;EACrB,IAAM,IACJ,OAMA;AAEF,SADA,GAAK,SAAS,GAAO,EAAK,QACb,GAAK,WAAW,EAAM;IAClC,CAAC,GAAO,GAAS,aAAa,KAAK,CAAC;CAEvC,IAAM,EAAE,SAAM,aAAS,UAAO,eAAY,EAAyB;EACjE,WAAW;GACT,IAAI,KAAa;GACjB,OAAO;GACP,QAAQ;GACT;EACD,MAAM,CAAC;EACP,aAAa;EACd,CAAC,EACI,CAAC,IAAe,EAAE,SAAS,OAC/B,GAA0B,EACtB,CAAC,IAAe,EAAE,SAAS,QAC/B,GAA0B,EACtB,CAAC,IAAa,EAAE,SAAS,QAAiB,IAAwB,EAElE,IAAU,GAAM;AAEtB,SAAgB;EACd,IAAM,IAAO,GAAS;AACtB,MAAI,CAAC,KAAa,CAAC,EAAM;EACzB,IAAM,IACJ,OAMA;AAEF,SADA,GAAK,SAAS,GAAW,EAAK,QACjB,GAAK,WAAW,EAAU;IACtC,CAAC,GAAW,GAAS,KAAK,CAAC;CAE9B,IAAM,IACJ,GAAM,mBAAmB,OAAO,KAC7B,MACC,EAAK,KACR,IAAI,EAAE,EACH,IAAY,KAAS,GAAS,eAC9B,KAAc,QAAc;AAChC,MAAI,CAAC,EAAS,QAAO;EACrB,IAAM,KAAS,EAAQ,gBAAgB,MAAM,EAAQ,gBAAgB;AAErE,SADI,MAAU,IAAU,MACjB,KAAK,OAAQ,EAAQ,gBAAgB,KAAK,IAAS,IAAI;IAC7D,CAAC,EAAQ,CAAC,EAEP,MAAkB,MAAiB;AACvC,MAAW,GAAG,IAAW,IAAO;IAG5B,IAAqB,YAAY;AAChC,QAEL,MAAM,GAAc,EAClB,WAAW;GACT,IAAI,EAAQ;GACZ,OAAO,EACL,UAAU,CAAC,EAAQ,UACpB;GACF,EACF,CAAC,EAEF,MAAM,GAAS;IAGX,KAAe,YAAY;AAC1B,SACA;MAAa,SAAS;AAE3B,OAAI;AAOF,IANA,MAAM,GAAc,EAClB,WAAW,EACT,IAAI,EAAQ,IACb,EACF,CAAC,EACG,EAAa,UAAU,EAC5B,GAAe,SAAS,EAAQ,cAAc,WAAW;WACnD;AACD,MAAa,QAAQ;;;IAIxB,KAAa,YAAY;AAC7B,MAAI,CAAC,EAAS;EASd,IAAM,KAPS,MAAM,GAAY,EAC/B,WAAW;GACT,IAAI,EAAQ;GACZ,WAAW,EAAQ,OAAO,MAAM;GACjC,EACF,CAAC,EAEsB,MAAM;AAC9B,MAAI,CAAC,GAAU;AAEb,GADA,EAAe,GAAM,EACrB,EAAe,0CAA0C;AACzD;;AAUF,EAPA,EAAe,EAAS,QAAQ,EAChC,EACE,EAAS,UACL,qCAAqC,EAAS,cAAc,IAAI,KAChE,EAAS,SAAS,uBACvB,EAED,MAAM,GAAS;;AA0CjB,QAvCI,MAAW,CAAC,IAEZ,kBAAC,GAAD;EACE,OAAO,EAAG,qBAAqB,UAAU;EACzC,aAAa,EACX,mCACA,0BACD;EACD,UAAU,IAAY,SAAS,EAAU,aAAa;EACtD,WAAW,EAAG,4BAA4B,mBAAmB;YAE7D,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,IAAD,EAAS,WAAU,wBAAyB,CAAA;GACxC,CAAA;EACK,CAAA,GAIb,KAAS,CAAC,IAEV,kBAAC,GAAD;EACE,OAAO,EAAG,qBAAqB,UAAU;EACzC,aAAa,EAAG,4BAA4B,kBAAkB;EAC9D,UAAU,IAAY,SAAS,EAAU,aAAa;EACtD,WAAW,EAAG,4BAA4B,mBAAmB;YAE7D,kBAAC,GAAD;GACE,MAAM,kBAAC,IAAD;IAAa,MAAM;IAAI,WAAU;IAA2B,CAAA;GAClE,OAAO,EAAG,iCAAiC,yBAAyB;GACpE,aACE,IACI,EAAgB,EAAM,GACtB,EAAG,6BAA6B,oBAAoB;GAE1D,CAAA;EACS,CAAA,GAKf,kBAAC,GAAD;EACE,OAAO,EAAQ;EACf,aACE,EAAQ,eAAe;EAEzB,SAAS,EACP,kCACA,oQACD;EACD,UAAU,SAAS,EAAU;EAC7B,WAAW,EAAG,4BAA4B,mBAAmB;EAC7D,SACE,kBAAC,GAAD;GACE,SAAS;IACP,OAAO,EAAG,kBAAkB,OAAO;IACnC,MAAM,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;IACxB,gBAAgB;AAEd,KADA,EAAe,KAAK,EACpB,EAAkB,GAAK;;IAE1B;GACD,SAAS,CACP;IACE,OAAO,EAAQ,WACX,EAAG,0BAA0B,QAAQ,GACrC,EAAG,2BAA2B,SAAS;IAC3C,MAAM,EAAQ,WAAW,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA,GAAG,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;IACjE,UAAU,KAAiB,CAAC;IAC5B,gBAAgB,KAAK,GAAoB;IAC1C,EACD;IACE,OAAO,EAAG,2BAA2B,SAAS;IAC9C,MAAM,kBAAC,IAAD,EAAQ,MAAM,IAAM,CAAA;IAC1B,QAAQ;IACR,UAAU,CAAC;IACX,gBAAgB,EAAoB,GAAK;IAC1C,CACF;GACD,CAAA;YAtCN;GAyCE,kBAAC,GAAD,EAAA,UACE,kBAAC,IAAD;IAAc,SAAS;cAAvB;KACE,kBAAC,GAAD;MACE,OAAO,EAAG,yBAAyB,eAAe;MAClD,OAAO,GAAG,GAAY;MACtB,MAAM,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA;MAC/B,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EACL,kCACA,wBACD;MACD,QAAQ,EAAQ,gBAAgB,GAAG,gBAAgB;MACnD,MAAM,kBAAC,GAAD,EAAa,MAAM,IAAM,CAAA;MAC/B,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EAAG,8BAA8B,oBAAoB;MAC5D,QAAQ,EAAQ,gBAAgB,GAAG,gBAAgB;MACnD,MAAM,kBAAC,IAAD,EAAS,MAAM,IAAM,CAAA;MAC3B,CAAA;KACF,kBAAC,GAAD;MACE,OAAO,EAAG,2BAA2B,iBAAiB;MACtD,OACE,EAAQ,kBACJ,EAAO,IAAI,KAAK,EAAQ,gBAAgB,EAAE,eAAe,GACzD,EAAG,mBAAmB,QAAQ;MAEpC,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;MACzB,CAAA;KACW;OACD,CAAA;GAGhB,kBAAC,GAAD;IACE,YAAY,qBAAqB,EAAQ;IACzC,OAAO,CACL;KACE,IAAI;KACJ,OAAO,EAAG,2BAA2B,oBAAoB;KACzD,aAAa,EACX,6BACA,0DACD;KACD,MAAM,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KACxB,eAAe;AAEb,MADA,EAAe,KAAK,EACpB,EAAkB,GAAK;;KAE1B,EACD;KACE,IAAI;KACJ,OAAO,EAAQ,WACX,EAAG,0BAA0B,mBAAmB,GAChD,EAAG,2BAA2B,oBAAoB;KACtD,aAAa,EACX,+BACA,0DACD;KACD,MAAM,EAAQ,WAAW,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA,GAAG,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;KACjE,eAAe,KAAK,GAAoB;KACzC,CACF;IACD,CAAA;GAEF,kBAAC,GAAD;IAAa,OAAO,EAAG,2BAA2B,gBAAgB;cAChE,kBAAC,IAAD,EACE,OAAO;KACL;MACE,OAAO,EAAG,oBAAoB,SAAS;MACvC,OAAO,kBAAC,GAAD;OAAa,QAAQ,EAAQ;OAAQ,MAAK;OAAY,CAAA;MAC9D;KACD;MACE,OAAO,EAAG,yBAAyB,eAAe;MAClD,OACE,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAa,EAAQ;QAAW,CAAA,EAChD,kBAAC,KAAD;QACE,MAAM,EAAQ;QACd,QAAO;QACP,KAAI;QACJ,WAAU;kBAEV,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA;QACxB,CAAA,CACC;;MAEV;KACD;MACE,OAAO,EAAG,2BAA2B,iBAAiB;MACtD,OACE,kBAAC,IAAD;OAAe,OAAO,EAAQ,UAAU;OAAU,OAAM;OAAK,CAAA;MAEhE;KACD;MACE,OAAO,EAAG,8BAA8B,oBAAoB;MAC5D,OACE,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAQ,OAAO,KAAK,MACnB,kBAAC,QAAD;QAEE,WAAU;kBAET;QACI,EAJA,EAIA,CACP;OACE,CAAA;MAET;KACD;MACE,OAAO,EAAG,yBAAyB,eAAe;MAClD,OAAO,EAAQ,eACX,EACE,gCACA,SAAS,EAAQ,cAAc,EAAE,UAClC,GACD,EAAG,6BAA6B,mBAAmB;MACxD;KACD;MACE,OAAO,EAAG,qBAAqB,UAAU;MACzC,OAAO,EAAgB,EAAQ,UAAU;MAC1C;KACD;MACE,OAAO,EAAG,qBAAqB,UAAU;MACzC,OAAO,EAAgB,EAAQ,UAAU;MAC1C;KACF,EACD,CAAA;IACU,CAAA;GAEd,kBAAC,GAAD;IACE,OAAO,EAAG,8BAA8B,oBAAoB;cAE3D,EAAW,SAAS,IACnB,kBAAC,IAAD;KACE,MAAM;KACN,UAAS;KACT,SAAS;MACP;OACE,KAAK;OACL,QAAQ,EAAG,oBAAoB,SAAS;OACxC,SAAS,MACP,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAa,QAAQ,EAAS;SAAQ,MAAK;SAAa,CAAA;QACpD,CAAA;OAET;MACD;OACE,KAAK;OACL,QAAQ,EAAG,mBAAmB,QAAQ;OACtC,SAAS,MACP,kBAAC,QAAD;QAAM,WAAU;kBAAW,EAAS;QAAiB,CAAA;OAExD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,sBAAsB,WAAW;OAC5C,SAAS,MAAa,EAAS,kBAAkB;OAClD;MACD;OACE,KAAK;OACL,QAAQ,EAAG,sBAAsB,WAAW;OAC5C,SAAS,MAAa,EAAS;OAChC;MACD;OACE,KAAK;OACL,QAAQ,EAAG,qBAAqB,UAAU;OAC1C,SAAS,MAAa,EAAgB,EAAS,UAAU;OAC1D;MACF;KACD,CAAA,GAEF,kBAAC,GAAD;KACE,cAAa;KACb,MAAM,kBAAC,IAAD,EAAS,MAAM,IAAM,CAAA;KAC3B,OAAO,EAAG,6BAA6B,oBAAoB;KAC3D,aAAa,EACX,wCACA,uFACD;KACD,CAAA;IAEQ,CAAA;GAEd,kBAAC,GAAD;IACE,MAAM;IACN,cAAc;IACd,iBAAiB,KAAK,IAAc;IACpC,SAAS;IACT,OAAO,EAAG,gCAAgC,iBAAiB;IAC3D,aAAa,EACX,sCACA,uEACD;IACD,cAAc,EAAG,kCAAkC,iBAAiB;IACpE,SAAQ;IACR,CAAA;GAEF,kBAAC,GAAD;IACE,MAAM;IACN,eAAe,MAAS;AAEtB,KADA,EAAkB,EAAK,EAClB,KACH,EAAe,KAAK;;IAGxB,iBAAiB,KAAK,IAAY;IAClC,SAAS;IACT,OAAO,EAAG,8BAA8B,qBAAqB;IAC7D,aAAa,EACX,yCACA,0FACD;IACD,cAAc,EAAG,2BAA2B,kBAAkB;cAE7D,KACC,kBAAC,IAAD;KAAO,SAAS,KAAc,YAAY;eACvC;KACK,CAAA;IAEI,CAAA;GACL"}
1	+ {"version":3,"file":"WebhookDetailPage.js","names":[],"sources":["../../../src/devportal/pages/WebhookDetailPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n CheckCircle,\n Clock,\n ExternalLink,\n Loader2,\n Pause,\n Play,\n Send,\n Trash2,\n Webhook,\n XCircle,\n AlertCircle,\n} from \"lucide-react\";\nimport { format } from \"date-fns\";\nimport {\n CTAOverflowMenu,\n EmphasisPanel,\n NextSteps,\n} from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport { StatCard, StatCardGrid } from \"../components/StatCard\";\nimport { ConfirmDialog, Alert } from \"../components/ConfirmDialog\";\nimport { DataTable, DetailList } from \"../components/DataTable\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { SecretDisplay } from \"../components/SecretDisplay\";\nimport { StatusBadge } from \"../components/StatusBadge\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\nimport {\n type GetWebhookDetailQuery,\n getErrorMessage,\n useDeleteWebhookMutation,\n useGetApplicationQuery,\n useGetWebhookDetailQuery,\n useTestWebhookMutation,\n useUpdateWebhookMutation,\n} from \"../hooks\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalPermission } from \"../hooks/usePermission\";\n\nconst formatTimestamp = (value?: string \| null) => {\n if (!value) return \"Never\";\n return format(new Date(value), \"MMM d, yyyy HH:mm:ss\");\n};\n\ntype WebhookDeliveryEntry =\n GetWebhookDetailQuery[\"webhookDeliveries\"][\"edges\"][number][\"node\"];\n\nexport const WebhookDetailPage: FC = () => {\n const { appId, webhookId } = useParams<{\n appId: string;\n webhookId: string;\n }>();\n const { navigate, basePath } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const { allowed: canUpdate } = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_UPDATE,\n );\n const { allowed: canDelete } = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_DELETE,\n );\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const [showTestDialog, setShowTestDialog] = useState(false);\n const [testMessage, setTestMessage] = useState<string \| null>(null);\n const [testSuccess, setTestSuccess] = useState(false);\n\n const { data: appData } = useGetApplicationQuery({\n variables: { id: appId ?? \"\" },\n skip: !appId,\n fetchPolicy: \"cache-first\",\n });\n\n useEffect(() => {\n const name = appData?.application?.name;\n if (!appId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(appId, name);\n return () => reg?.unregister(appId);\n }, [appId, appData?.application?.name]);\n\n const { data, loading, error, refetch } = useGetWebhookDetailQuery({\n variables: {\n id: webhookId \|\| \"\",\n limit: 20,\n offset: 0,\n },\n skip: !webhookId,\n fetchPolicy: \"cache-and-network\",\n });\n const [updateWebhook, { loading: updateLoading }] =\n useUpdateWebhookMutation();\n const [deleteWebhook, { loading: deleteLoading }] =\n useDeleteWebhookMutation();\n const [testWebhook, { loading: testLoading }] = useTestWebhookMutation();\n\n const webhook = data?.webhook;\n\n useEffect(() => {\n const name = webhook?.name;\n if (!webhookId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(webhookId, name);\n return () => reg?.unregister(webhookId);\n }, [webhookId, webhook?.name]);\n\n const deliveries: WebhookDeliveryEntry[] =\n data?.webhookDeliveries?.edges?.map(\n (edge: GetWebhookDetailQuery[\"webhookDeliveries\"][\"edges\"][number]) =>\n edge.node,\n ) ?? [];\n const backAppId = appId \|\| webhook?.applicationId;\n const successRate = useMemo(() => {\n if (!webhook) return 0;\n const total = (webhook.successCount ?? 0) + (webhook.failureCount ?? 0);\n if (total === 0) return 100;\n return Math.round(((webhook.successCount ?? 0) / total) * 100);\n }, [webhook]);\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n const handleToggleActive = async () => {\n if (!webhook) return;\n\n await updateWebhook({\n variables: {\n id: webhook.id,\n input: {\n isActive: !webhook.isActive,\n },\n },\n });\n\n await refetch();\n };\n\n const handleDelete = async () => {\n if (!webhook) return;\n void nativeImpact(\"medium\");\n\n try {\n await deleteWebhook({\n variables: {\n id: webhook.id,\n },\n });\n void nativeNotify(\"success\");\n handleNavigate(`/apps/${webhook.applicationId}/webhooks`);\n } catch {\n void nativeNotify(\"error\");\n }\n };\n\n const handleTest = async () => {\n if (!webhook) return;\n\n const result = await testWebhook({\n variables: {\n id: webhook.id,\n eventType: webhook.events[0] \|\| \"application.updated\",\n },\n });\n\n const response = result.data?.testWebhook;\n if (!response) {\n setTestSuccess(false);\n setTestMessage(\"Test request did not return a response.\");\n return;\n }\n\n setTestSuccess(response.success);\n setTestMessage(\n response.success\n ? `Test delivery succeeded with HTTP ${response.statusCode ?? 200}.`\n : response.error \|\| \"Webhook test failed.\",\n );\n\n await refetch();\n };\n\n if (loading && !webhook) {\n return (\n <PageLayout\n title={tr(\"devportal.webhook\", \"Webhook\")}\n description={tr(\n \"devportal.loadingWebhookDetails\",\n \"Loading webhook details\",\n )}\n backLink={backAppId ? `/apps/${backAppId}/webhooks` : \"/webhooks\"}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n >\n <div className=\"flex items-center justify-center py-16 text-text-secondary\">\n <Loader2 className=\"h-8 w-8 animate-spin\" />\n </div>\n </PageLayout>\n );\n }\n\n if (error \|\| !webhook) {\n return (\n <PageLayout\n title={tr(\"devportal.webhook\", \"Webhook\")}\n description={tr(\"devportal.webhookDetails\", \"Webhook details\")}\n backLink={backAppId ? `/apps/${backAppId}/webhooks` : \"/webhooks\"}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n >\n <EmptyState\n icon={<AlertCircle size={32} className=\"text-status-error-text\" />}\n title={tr(\"devportal.unableToLoadWebhook\", \"Unable to load webhook\")}\n description={\n error\n ? getErrorMessage(error)\n : tr(\"devportal.webhookNotFound\", \"Webhook not found\")\n }\n />\n </PageLayout>\n );\n }\n\n return (\n <PageLayout\n title={webhook.name}\n description={\n webhook.description \|\| \"Webhook configuration and delivery history\"\n }\n purpose={tr(\n \"devportal.webhookDetailPurpose\",\n \"This endpoint receives the events you subscribed to, signed with your secret. Check the delivery history to confirm your server is responding with 2xx, send a test event, and pause it if your endpoint is down so deliveries are not lost to repeated failures.\",\n )}\n backLink={`/apps/${backAppId}/webhooks`}\n backLabel={tr(\"devportal.backToWebhooks\", \"Back to Webhooks\")}\n actions={\n <CTAOverflowMenu\n primary={{\n label: tr(\"devportal.test\", \"Test\"),\n icon: <Send size={16} />,\n onSelect: () => {\n setTestMessage(null);\n setShowTestDialog(true);\n },\n }}\n actions={[\n {\n label: webhook.isActive\n ? tr(\"devportal.pauseWebhook\", \"Pause\")\n : tr(\"devportal.resumeWebhook\", \"Resume\"),\n icon: webhook.isActive ? <Pause size={16} /> : <Play size={16} />,\n disabled: updateLoading \|\| !canUpdate,\n onSelect: () => void handleToggleActive(),\n },\n {\n label: tr(\"devportal.deleteWebhook\", \"Delete\"),\n icon: <Trash2 size={16} />,\n intent: \"destructive\",\n disabled: !canDelete,\n onSelect: () => setShowDeleteDialog(true),\n },\n ]}\n />\n }\n >\n <EmphasisPanel>\n <StatCardGrid columns={4}>\n <StatCard\n title={tr(\"devportal.successRate\", \"Success Rate\")}\n value={`${successRate}%`}\n icon={<CheckCircle size={20} />}\n />\n <StatCard\n title={tr(\n \"devportal.successfulDeliveries\",\n \"Successful Deliveries\",\n )}\n value={(webhook.successCount ?? 0).toLocaleString()}\n icon={<CheckCircle size={20} />}\n />\n <StatCard\n title={tr(\"devportal.failedDeliveries\", \"Failed Deliveries\")}\n value={(webhook.failureCount ?? 0).toLocaleString()}\n icon={<XCircle size={20} />}\n />\n <StatCard\n title={tr(\"devportal.lastTriggered\", \"Last Triggered\")}\n value={\n webhook.lastTriggeredAt\n ? format(new Date(webhook.lastTriggeredAt), \"MMM d, HH:mm\")\n : tr(\"devportal.never\", \"Never\")\n }\n icon={<Clock size={20} />}\n />\n </StatCardGrid>\n </EmphasisPanel>\n\n {/* Guided next steps (dismissable) /}\n <NextSteps\n storageKey={`devportal-webhook-${webhook.id}`}\n steps={[\n {\n id: \"test\",\n label: tr(\"devportal.sendTestEvent\", \"Send a test event\"),\n description: tr(\n \"devportal.webhookStepTest\",\n \"Confirm your endpoint receives and verifies the payload\",\n ),\n icon: <Send size={16} />,\n onClick: () => {\n setTestMessage(null);\n setShowTestDialog(true);\n },\n },\n {\n id: \"toggle\",\n label: webhook.isActive\n ? tr(\"devportal.pauseWebhook\", \"Pause deliveries\")\n : tr(\"devportal.resumeWebhook\", \"Resume deliveries\"),\n description: tr(\n \"devportal.webhookStepToggle\",\n \"Pause while your endpoint is down to avoid lost retries\",\n ),\n icon: webhook.isActive ? <Pause size={16} /> : <Play size={16} />,\n onClick: () => void handleToggleActive(),\n },\n ]}\n />\n\n <PageSection title={tr(\"devportal.configuration\", \"Configuration\")}>\n <DetailList\n items={[\n {\n label: tr(\"devportal.status\", \"Status\"),\n value: <StatusBadge status={webhook.status} type=\"webhook\" />,\n },\n {\n label: tr(\"devportal.endpointUrl\", \"Endpoint URL\"),\n value: (\n <span className=\"flex flex-wrap items-center gap-2 font-mono text-sm\">\n <span className=\"break-all\">{webhook.url}</span>\n <a\n href={webhook.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-primary\"\n >\n <ExternalLink size={14} />\n </a>\n </span>\n ),\n },\n {\n label: tr(\"devportal.signingSecret\", \"Signing Secret\"),\n value: (\n <SecretDisplay value={webhook.secret \|\| \"*****\"} label=\"\" />\n ),\n },\n {\n label: tr(\"devportal.subscribedEvents\", \"Subscribed Events\"),\n value: (\n <div className=\"flex flex-wrap gap-1\">\n {webhook.events.map((eventName: string) => (\n <code\n key={eventName}\n className=\"rounded bg-bg-sunken px-1.5 py-0.5 text-xs\"\n >\n {eventName}\n </code>\n ))}\n </div>\n ),\n },\n {\n label: tr(\"devportal.retryPolicy\", \"Retry Policy\"),\n value: webhook.retryEnabled\n ? tr(\n \"devportal.retryPolicyEnabled\",\n `Up to ${webhook.maxRetries ?? 0} retries`,\n )\n : tr(\"devportal.retriesDisabled\", \"Retries disabled\"),\n },\n {\n label: tr(\"devportal.created\", \"Created\"),\n value: formatTimestamp(webhook.createdAt),\n },\n {\n label: tr(\"devportal.updated\", \"Updated\"),\n value: formatTimestamp(webhook.updatedAt),\n },\n ]}\n />\n </PageSection>\n\n <PageSection\n title={tr(\"devportal.recentDeliveries\", \"Recent Deliveries\")}\n >\n {deliveries.length > 0 ? (\n <DataTable\n data={deliveries}\n keyField=\"id\"\n columns={[\n {\n key: \"status\",\n header: tr(\"devportal.status\", \"Status\"),\n render: (delivery) => (\n <div className=\"flex items-center gap-2\">\n <StatusBadge status={delivery.status} type=\"delivery\" />\n </div>\n ),\n },\n {\n key: \"eventType\",\n header: tr(\"devportal.event\", \"Event\"),\n render: (delivery) => (\n <code className=\"text-xs\">{delivery.eventType}</code>\n ),\n },\n {\n key: \"responseStatus\",\n header: tr(\"devportal.response\", \"Response\"),\n render: (delivery) => delivery.responseStatus ?? \"-\",\n },\n {\n key: \"attemptNumber\",\n header: tr(\"devportal.attempts\", \"Attempts\"),\n render: (delivery) => delivery.attemptNumber,\n },\n {\n key: \"createdAt\",\n header: tr(\"devportal.created\", \"Created\"),\n render: (delivery) => formatTimestamp(delivery.createdAt),\n },\n ]}\n />\n ) : (\n <EmptyState\n illustration=\"empty-notifications\"\n icon={<Webhook size={24} />}\n title={tr(\"devportal.noDeliveriesYet\", \"No deliveries yet\")}\n description={tr(\n \"devportal.noDeliveriesYetDescription\",\n \"Deliveries will appear here after the first matching event is sent to this endpoint.\",\n )}\n />\n )}\n </PageSection>\n\n <ConfirmDialog\n open={showDeleteDialog}\n onOpenChange={setShowDeleteDialog}\n onConfirm={() => void handleDelete()}\n loading={deleteLoading}\n title={tr(\"devportal.deleteWebhookTitle\", \"Delete webhook\")}\n description={tr(\n \"devportal.deleteWebhookDescription\",\n \"Deleting this webhook stops all future deliveries for this endpoint.\",\n )}\n confirmLabel={tr(\"devportal.deleteWebhookConfirm\", \"Delete webhook\")}\n variant=\"danger\"\n />\n\n <ConfirmDialog\n open={showTestDialog}\n onOpenChange={(open) => {\n setShowTestDialog(open);\n if (!open) {\n setTestMessage(null);\n }\n }}\n onConfirm={() => void handleTest()}\n loading={testLoading}\n title={tr(\"devportal.sendTestDelivery\", \"Send test delivery\")}\n description={tr(\n \"devportal.sendTestDeliveryDescription\",\n \"A signed test event will be sent to the configured endpoint through the public gateway.\",\n )}\n confirmLabel={tr(\"devportal.sendTestEvent\", \"Send test event\")}\n >\n {testMessage && (\n <Alert variant={testSuccess ? \"success\" : \"error\"}>\n {testMessage}\n </Alert>\n )}\n </ConfirmDialog>\n </PageLayout>\n );\n};\n"],"mappings":"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"}

package/dist/devportal/pages/WebhooksPage.js CHANGED Viewed

@@ -15,7 +15,7 @@ import { DEVPORTAL_PERMISSIONS as te } from "../constants/permissions.js";
 import { useEffect as f, useState as p } from "react";
 import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { AlertCircle as h, AlertTriangle as g, AppWindow as _, CheckCircle as v, Loader2 as y, PauseCircle as b, Plus as x, Search as S, Webhook as C, XCircle as w } from "lucide-react";
-import { useParams as T } from "react-router-dom";
+import { useParams as T } from "react-router";
 import { jsx as E, jsxs as D } from "react/jsx-runtime";
 import { EmphasisPanel as O, GlassCard as k } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/WebhooksPage.tsx

package/dist/devportal/pages/WebhooksPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WebhooksPage.js","names":[],"sources":["../../../src/devportal/pages/WebhooksPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n Plus,\n Search,\n Webhook,\n CheckCircle,\n XCircle,\n PauseCircle,\n AlertTriangle,\n Loader2,\n AlertCircle,\n AppWindow,\n} from \"lucide-react\";\nimport { useParams } from \"react-router-dom\";\nimport { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { StatusBadge } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { PermissionGuard } from \"../components\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type {\n Application,\n Webhook as WebhookType,\n WebhookStatus,\n} from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport {\n useGetApplicationsQuery,\n useGetApplicationQuery,\n useGetWebhooksQuery,\n getErrorMessage,\n useDevportalPermission,\n type ApplicationFieldsFragment,\n type DevportalWebhookFieldsFragment,\n} from \"../hooks\";\n\n/*\n Map GraphQL webhook to local Webhook type\n /\nfunction mapWebhook(webhook: DevportalWebhookFieldsFragment): WebhookType {\n return {\n id: webhook.id,\n applicationId: webhook.applicationId,\n name: webhook.name,\n description: webhook.description ?? undefined,\n url: webhook.url,\n secret: undefined,\n events: webhook.events ?? [],\n isActive: webhook.isActive,\n status: webhook.status as WebhookStatus,\n maxRetries: webhook.maxRetries ?? 3,\n retryDelay: webhook.retryDelay ?? 60,\n retryEnabled: webhook.retryEnabled ?? true,\n lastTriggeredAt: webhook.lastTriggeredAt ?? undefined,\n lastSuccessAt: webhook.lastSuccessAt ?? undefined,\n lastFailureAt: webhook.lastFailureAt ?? undefined,\n lastFailureReason: webhook.lastFailureReason ?? undefined,\n failureCount: webhook.failureCount ?? 0,\n successCount: webhook.successCount ?? 0,\n createdAt: webhook.createdAt,\n updatedAt: webhook.updatedAt,\n };\n}\n\n/\n Webhooks listing page\n \n Displays webhooks for a specific application.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n /\nexport const WebhooksPage: FC = () => {\n const { appId } = useParams<{ appId: string }>();\n const { navigate, basePath, activeOrgId } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const createPerm = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n );\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [statusFilter, setStatusFilter] = useState<WebhookStatus \| \"\">(\"\");\n\n // Fetch app name for breadcrumb when viewing webhooks for a specific app\n const { data: singleAppData } = useGetApplicationQuery({\n variables: { id: appId ?? \"\" },\n skip: !appId,\n fetchPolicy: \"cache-first\",\n });\n\n useEffect(() => {\n const name = singleAppData?.application?.name;\n if (!appId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(appId, name);\n return () => reg?.unregister(appId);\n }, [appId, singleAppData?.application?.name]);\n\n const {\n data: appsData,\n loading: appsLoading,\n error: appsError,\n refetch: refetchApps,\n } = useGetApplicationsQuery({\n variables: { limit: 100 },\n skip: !!appId,\n fetchPolicy: \"cache-and-network\",\n });\n\n // Fetch webhooks from GraphQL API (only if we have an applicationId)\n const { data, loading, error, refetch } = useGetWebhooksQuery({\n variables: {\n applicationId: appId \|\| \"\",\n },\n skip: !appId,\n fetchPolicy: \"cache-and-network\",\n });\n\n const webhooks = data?.webhooks?.map(mapWebhook) ?? [];\n const allApplications: Application[] =\n appsData?.applications?.edges?.map(\n (edge: { node: ApplicationFieldsFragment }) => edge.node as Application,\n ) ?? [];\n // Scope app picker to active org\n const applications = activeOrgId\n ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n : allApplications;\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n // Filter webhooks\n const filteredWebhooks = webhooks.filter((webhook: WebhookType) => {\n const matchesSearch =\n !searchQuery \|\|\n webhook.name.toLowerCase().includes(searchQuery.toLowerCase()) \|\|\n webhook.url.toLowerCase().includes(searchQuery.toLowerCase());\n const matchesStatus = !statusFilter \|\| webhook.status === statusFilter;\n return matchesSearch && matchesStatus;\n });\n\n const getStatusIcon = (status: WebhookStatus) => {\n switch (status) {\n case \"ACTIVE\":\n return <CheckCircle size={16} className=\"text-status-success-text\" />;\n case \"PAUSED\":\n return <PauseCircle size={16} className=\"text-status-warning-text\" />;\n case \"FAILED\":\n return <XCircle size={16} className=\"text-status-error-text\" />;\n case \"DISABLED\":\n return <AlertTriangle size={16} className=\"text-text-tertiary\" />;\n default:\n return null;\n }\n };\n\n const calculateSuccessRate = (webhook: WebhookType): number => {\n const total = webhook.successCount + webhook.failureCount;\n if (total === 0) return 100;\n return Math.round((webhook.successCount / total) 100);\n };\n\n // If no applicationId, show prompt to select an application\n if (!appId) {\n const filteredApplications = applications.filter((application) => {\n if (!searchQuery) return true;\n\n const normalizedQuery = searchQuery.toLowerCase();\n return (\n application.name.toLowerCase().includes(normalizedQuery) \|\|\n (application.slug ?? \"\").toLowerCase().includes(normalizedQuery)\n );\n });\n\n return (\n <PermissionGuard authOnly>\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApps\",\n \"Manage webhooks for your applications\",\n )}\n purpose={tr(\n \"devportal.webhooksPickerPurpose\",\n \"Webhooks push real-time events (installs, payments, app updates) to a URL you host, so your backend can react without polling. Pick an application to view, add, or test the webhook endpoints it delivers to.\",\n )}\n >\n <div className=\"space-y-4\">\n <p className=\"text-sm text-text-secondary\">\n {tr(\n \"devportal.webhooksSelectAppHint\",\n \"Select an application below to view and manage its webhooks.\",\n )}\n </p>\n <div className=\"max-w-md\">\n <div className=\"relative\">\n <Search\n size={16}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n placeholder=\"Search applications...\"\n value={searchQuery}\n onChange={(event) => setSearchQuery(event.target.value)}\n className=\"w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n </div>\n </div>\n\n {appsLoading ? (\n <div className=\"flex items-center justify-center py-12 text-text-secondary\">\n <Loader2 className=\"h-8 w-8 animate-spin\" />\n </div>\n ) : appsError ? (\n <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n <h3 className=\"mt-2 font-medium text-status-error-text\">\n Failed to load applications\n </h3>\n <p className=\"mt-1 text-sm text-text-secondary\">\n {getErrorMessage(appsError)}\n </p>\n <button\n onClick={() => refetchApps()}\n className=\"mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n Try Again\n </button>\n </div>\n ) : filteredApplications.length > 0 ? (\n <div className=\"space-y-2\">\n {filteredApplications.map((application) => (\n <AppListItem\n key={application.id}\n app={application}\n onClick={() =>\n handleNavigate(`/apps/${application.id}/webhooks`)\n }\n />\n ))}\n </div>\n ) : (\n <EmptyState\n illustration={searchQuery ? \"empty-search\" : \"empty-data\"}\n icon={<AppWindow size={32} />}\n title=\"No applications available\"\n description={\n searchQuery\n ? \"No applications matched your search.\"\n : \"Create an application before configuring webhooks.\"\n }\n action={\n <button\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n <Plus size={16} />\n Create Application\n </button>\n }\n />\n )}\n </div>\n </PageLayout>\n </PermissionGuard>\n );\n }\n\n // Loading state\n if (loading && !data) {\n return (\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n >\n <div className=\"flex items-center justify-center py-12\">\n <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n <span className=\"ml-2 text-text-secondary\">\n {tr(\"devportal.loadingWebhooks\", \"Loading webhooks...\")}\n </span>\n </div>\n </PageLayout>\n );\n }\n\n // Error state\n if (error) {\n return (\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n >\n <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n <h3 className=\"mt-2 font-medium text-status-error-text\">\n {tr(\"devportal.failedToLoadWebhooks\", \"Failed to load webhooks\")}\n </h3>\n <p className=\"mt-1 text-sm text-text-secondary\">\n {getErrorMessage(error)}\n </p>\n <button\n onClick={() => refetch()}\n className=\"mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n {tr(\"devportal.tryAgain\", \"Try Again\")}\n </button>\n </div>\n </PageLayout>\n );\n }\n\n const columns = [\n {\n key: \"name\",\n header: \"Webhook\",\n render: (webhook: WebhookType) => (\n <div className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-10 w-10 items-center justify-center rounded-lg\",\n webhook.status === \"ACTIVE\"\n ? \"bg-status-success-bg-subtle text-status-success-text\"\n : webhook.status === \"FAILED\"\n ? \"bg-status-error-bg-subtle text-status-error-text\"\n : webhook.status === \"PAUSED\"\n ? \"bg-status-warning-bg-subtle text-status-warning-text\"\n : \"bg-bg-sunken text-text-tertiary\",\n )}\n >\n <Webhook size={20} />\n </div>\n <div>\n <p className=\"font-medium\">{webhook.name}</p>\n <p className=\"text-xs text-text-secondary truncate max-w-xs\">\n {webhook.url}\n </p>\n </div>\n </div>\n ),\n },\n {\n key: \"events\",\n header: \"Events\",\n render: (webhook: WebhookType) => (\n <div className=\"flex flex-wrap gap-1\">\n {webhook.events.slice(0, 2).map((event) => (\n <span\n key={event}\n className=\"inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs\"\n >\n {event.split(\".\")[0]}\n </span>\n ))}\n {webhook.events.length > 2 && (\n <span className=\"text-xs text-text-secondary\">\n +{webhook.events.length - 2} more\n </span>\n )}\n </div>\n ),\n },\n {\n key: \"status\",\n header: \"Status\",\n render: (webhook: WebhookType) => (\n <div className=\"flex items-center gap-2\">\n {getStatusIcon(webhook.status)}\n <StatusBadge status={webhook.status} type=\"webhook\" />\n </div>\n ),\n },\n {\n key: \"successRate\",\n header: \"Success Rate\",\n render: (webhook: WebhookType) => {\n const rate = calculateSuccessRate(webhook);\n return (\n <div className=\"w-24\">\n <div className=\"flex items-center justify-between text-xs mb-1\">\n <span\n className={cn(\n rate >= 95\n ? \"text-status-success-text\"\n : rate >= 80\n ? \"text-status-warning-text\"\n : \"text-status-error-text\",\n )}\n >\n {rate}%\n </span>\n </div>\n <div className=\"h-1.5 rounded-full bg-bg-sunken\">\n <div\n className={cn(\n \"h-full rounded-full transition-all\",\n rate >= 95\n ? \"bg-status-success-bg-subtle\"\n : rate >= 80\n ? \"bg-status-warning-bg-subtle\"\n : \"bg-status-error-bg-subtle\",\n )}\n style={{ width: `${rate}%` }}\n />\n </div>\n </div>\n );\n },\n },\n {\n key: \"deliveries\",\n header: \"Deliveries\",\n render: (webhook: WebhookType) => (\n <div className=\"text-sm\">\n <span className=\"text-status-success-text\">\n {webhook.successCount.toLocaleString()}\n </span>\n <span className=\"text-text-secondary\"> / </span>\n <span className=\"text-status-error-text\">\n {webhook.failureCount.toLocaleString()}\n </span>\n </div>\n ),\n },\n {\n key: \"lastTriggered\",\n header: \"Last Triggered\",\n render: (webhook: WebhookType) => (\n <span className=\"text-sm text-text-secondary\">\n {webhook.lastTriggeredAt\n ? formatRelativeTime(webhook.lastTriggeredAt)\n : \"Never\"}\n </span>\n ),\n },\n ];\n\n // Stats calculation\n const stats = {\n total: webhooks.length,\n active: webhooks.filter((w: WebhookType) => w.status === \"ACTIVE\").length,\n failed: webhooks.filter((w: WebhookType) => w.status === \"FAILED\").length,\n paused: webhooks.filter((w: WebhookType) => w.status === \"PAUSED\").length,\n };\n\n return (\n <PermissionGuard authOnly>\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n purpose={tr(\n \"devportal.webhooksAppPurpose\",\n \"These webhooks deliver this application's events to your endpoints. Add a URL, choose which events to subscribe to, and send a test delivery to confirm your server receives and verifies the signed payload.\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n actions={\n <button\n onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n disabled={!createPerm.allowed}\n aria-disabled={!createPerm.allowed}\n title={\n !createPerm.allowed\n ? tr(\n \"devportal.common.noPermission\",\n \"You do not have permission to perform this action\",\n )\n : undefined\n }\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n <Plus size={16} aria-hidden=\"true\" />\n {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n </button>\n }\n >\n {/* Filters /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex flex-1 items-center gap-4\">\n {/ Search /}\n <div className=\"relative flex-1 max-w-md\">\n <Search\n size={16}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n placeholder=\"Search by name or URL...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n </div>\n\n {/ Status Filter /}\n <select\n value={statusFilter}\n onChange={(e) =>\n setStatusFilter(e.target.value as WebhookStatus \| \"\")\n }\n className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n >\n <option value=\"\">All Status</option>\n <option value=\"ACTIVE\">Active</option>\n <option value=\"PAUSED\">Paused</option>\n <option value=\"FAILED\">Failed</option>\n <option value=\"DISABLED\">Disabled</option>\n </select>\n </div>\n </div>\n\n {/ Summary Stats — primary emphasis zone /}\n <EmphasisPanel>\n <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-text-secondary\">\n <Webhook size={16} />\n <span className=\"text-sm\">Total Webhooks</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.total}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-success-text\">\n <CheckCircle size={16} />\n <span className=\"text-sm\">Active</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.active}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-warning-text\">\n <PauseCircle size={16} />\n <span className=\"text-sm\">Paused</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.paused}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-error-text\">\n <XCircle size={16} />\n <span className=\"text-sm\">Failed</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.failed}\n </p>\n </GlassCard>\n </div>\n </EmphasisPanel>\n\n {/ Results count /}\n <p className=\"text-sm text-text-secondary\">\n {filteredWebhooks.length} webhook\n {filteredWebhooks.length !== 1 ? \"s\" : \"\"} found\n </p>\n\n {/ Webhooks Table */}\n {filteredWebhooks.length > 0 ? (\n <DataTable\n data={filteredWebhooks}\n columns={columns}\n keyField=\"id\"\n onRowClick={(webhook) =>\n handleNavigate(`/apps/${appId}/webhooks/${webhook.id}`)\n }\n />\n ) : (\n <EmptyState\n illustration=\"empty-notifications\"\n title={tr(\"devportal.noWebhooksFound\", \"No webhooks found\")}\n description={\n searchQuery \|\| statusFilter\n ? tr(\n \"devportal.tryAdjustingFilters\",\n \"Try adjusting your filters\",\n )\n : tr(\n \"devportal.createFirstWebhook\",\n \"Create your first webhook to receive real-time event notifications\",\n )\n }\n action={\n !searchQuery && !statusFilter ? (\n <button\n onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n <Plus size={16} />\n {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n </button>\n ) : undefined\n }\n />\n )}\n </PageLayout>\n </PermissionGuard>\n );\n};\n\nfunction formatRelativeTime(dateString: string): string {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n const diffHours = Math.floor(diffMins / 60);\n const diffDays = Math.floor(diffHours / 24);\n\n if (diffMins < 1) return \"Just now\";\n if (diffMins < 60) return `${diffMins}m ago`;\n if (diffHours < 24) return `${diffHours}h ago`;\n if (diffDays < 7) return `${diffDays}d ago`;\n return date.toLocaleDateString();\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"WebhooksPage.js","names":[],"sources":["../../../src/devportal/pages/WebhooksPage.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useState, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport {\n Plus,\n Search,\n Webhook,\n CheckCircle,\n XCircle,\n PauseCircle,\n AlertTriangle,\n Loader2,\n AlertCircle,\n AppWindow,\n} from \"lucide-react\";\nimport { useParams } from \"react-router\";\nimport { EmphasisPanel, GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../components/PageLayout\";\nimport { DataTable } from \"../components/DataTable\";\nimport { StatusBadge } from \"../components/StatusBadge\";\nimport { EmptyState } from \"../components/EmptyState\";\nimport { AppListItem } from \"../components/AppCard\";\nimport { PermissionGuard } from \"../components\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport type {\n Application,\n Webhook as WebhookType,\n WebhookStatus,\n} from \"../types\";\nimport { cn } from \"../utils/cn\";\nimport {\n useGetApplicationsQuery,\n useGetApplicationQuery,\n useGetWebhooksQuery,\n getErrorMessage,\n useDevportalPermission,\n type ApplicationFieldsFragment,\n type DevportalWebhookFieldsFragment,\n} from \"../hooks\";\n\n/*\n Map GraphQL webhook to local Webhook type\n /\nfunction mapWebhook(webhook: DevportalWebhookFieldsFragment): WebhookType {\n return {\n id: webhook.id,\n applicationId: webhook.applicationId,\n name: webhook.name,\n description: webhook.description ?? undefined,\n url: webhook.url,\n secret: undefined,\n events: webhook.events ?? [],\n isActive: webhook.isActive,\n status: webhook.status as WebhookStatus,\n maxRetries: webhook.maxRetries ?? 3,\n retryDelay: webhook.retryDelay ?? 60,\n retryEnabled: webhook.retryEnabled ?? true,\n lastTriggeredAt: webhook.lastTriggeredAt ?? undefined,\n lastSuccessAt: webhook.lastSuccessAt ?? undefined,\n lastFailureAt: webhook.lastFailureAt ?? undefined,\n lastFailureReason: webhook.lastFailureReason ?? undefined,\n failureCount: webhook.failureCount ?? 0,\n successCount: webhook.successCount ?? 0,\n createdAt: webhook.createdAt,\n updatedAt: webhook.updatedAt,\n };\n}\n\n/\n Webhooks listing page\n \n Displays webhooks for a specific application.\n * Uses GraphQL to fetch real data from the DevPortal backend.\n /\nexport const WebhooksPage: FC = () => {\n const { appId } = useParams<{ appId: string }>();\n const { navigate, basePath, activeOrgId } = useDevportal();\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n const createPerm = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n );\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [statusFilter, setStatusFilter] = useState<WebhookStatus \| \"\">(\"\");\n\n // Fetch app name for breadcrumb when viewing webhooks for a specific app\n const { data: singleAppData } = useGetApplicationQuery({\n variables: { id: appId ?? \"\" },\n skip: !appId,\n fetchPolicy: \"cache-first\",\n });\n\n useEffect(() => {\n const name = singleAppData?.application?.name;\n if (!appId \|\| !name) return;\n const reg = (\n window as unknown as {\n __breadcrumbRegistry?: {\n register: (id: string, name: string) => void;\n unregister: (id: string) => void;\n };\n }\n ).__breadcrumbRegistry;\n reg?.register(appId, name);\n return () => reg?.unregister(appId);\n }, [appId, singleAppData?.application?.name]);\n\n const {\n data: appsData,\n loading: appsLoading,\n error: appsError,\n refetch: refetchApps,\n } = useGetApplicationsQuery({\n variables: { limit: 100 },\n skip: !!appId,\n fetchPolicy: \"cache-and-network\",\n });\n\n // Fetch webhooks from GraphQL API (only if we have an applicationId)\n const { data, loading, error, refetch } = useGetWebhooksQuery({\n variables: {\n applicationId: appId \|\| \"\",\n },\n skip: !appId,\n fetchPolicy: \"cache-and-network\",\n });\n\n const webhooks = data?.webhooks?.map(mapWebhook) ?? [];\n const allApplications: Application[] =\n appsData?.applications?.edges?.map(\n (edge: { node: ApplicationFieldsFragment }) => edge.node as Application,\n ) ?? [];\n // Scope app picker to active org\n const applications = activeOrgId\n ? allApplications.filter((a) => a.developerOrganizationId === activeOrgId)\n : allApplications;\n\n const handleNavigate = (path: string) => {\n navigate?.(`${basePath}${path}`);\n };\n\n // Filter webhooks\n const filteredWebhooks = webhooks.filter((webhook: WebhookType) => {\n const matchesSearch =\n !searchQuery \|\|\n webhook.name.toLowerCase().includes(searchQuery.toLowerCase()) \|\|\n webhook.url.toLowerCase().includes(searchQuery.toLowerCase());\n const matchesStatus = !statusFilter \|\| webhook.status === statusFilter;\n return matchesSearch && matchesStatus;\n });\n\n const getStatusIcon = (status: WebhookStatus) => {\n switch (status) {\n case \"ACTIVE\":\n return <CheckCircle size={16} className=\"text-status-success-text\" />;\n case \"PAUSED\":\n return <PauseCircle size={16} className=\"text-status-warning-text\" />;\n case \"FAILED\":\n return <XCircle size={16} className=\"text-status-error-text\" />;\n case \"DISABLED\":\n return <AlertTriangle size={16} className=\"text-text-tertiary\" />;\n default:\n return null;\n }\n };\n\n const calculateSuccessRate = (webhook: WebhookType): number => {\n const total = webhook.successCount + webhook.failureCount;\n if (total === 0) return 100;\n return Math.round((webhook.successCount / total) 100);\n };\n\n // If no applicationId, show prompt to select an application\n if (!appId) {\n const filteredApplications = applications.filter((application) => {\n if (!searchQuery) return true;\n\n const normalizedQuery = searchQuery.toLowerCase();\n return (\n application.name.toLowerCase().includes(normalizedQuery) \|\|\n (application.slug ?? \"\").toLowerCase().includes(normalizedQuery)\n );\n });\n\n return (\n <PermissionGuard authOnly>\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApps\",\n \"Manage webhooks for your applications\",\n )}\n purpose={tr(\n \"devportal.webhooksPickerPurpose\",\n \"Webhooks push real-time events (installs, payments, app updates) to a URL you host, so your backend can react without polling. Pick an application to view, add, or test the webhook endpoints it delivers to.\",\n )}\n >\n <div className=\"space-y-4\">\n <p className=\"text-sm text-text-secondary\">\n {tr(\n \"devportal.webhooksSelectAppHint\",\n \"Select an application below to view and manage its webhooks.\",\n )}\n </p>\n <div className=\"max-w-md\">\n <div className=\"relative\">\n <Search\n size={16}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n placeholder=\"Search applications...\"\n value={searchQuery}\n onChange={(event) => setSearchQuery(event.target.value)}\n className=\"w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n </div>\n </div>\n\n {appsLoading ? (\n <div className=\"flex items-center justify-center py-12 text-text-secondary\">\n <Loader2 className=\"h-8 w-8 animate-spin\" />\n </div>\n ) : appsError ? (\n <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n <h3 className=\"mt-2 font-medium text-status-error-text\">\n Failed to load applications\n </h3>\n <p className=\"mt-1 text-sm text-text-secondary\">\n {getErrorMessage(appsError)}\n </p>\n <button\n onClick={() => refetchApps()}\n className=\"mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n Try Again\n </button>\n </div>\n ) : filteredApplications.length > 0 ? (\n <div className=\"space-y-2\">\n {filteredApplications.map((application) => (\n <AppListItem\n key={application.id}\n app={application}\n onClick={() =>\n handleNavigate(`/apps/${application.id}/webhooks`)\n }\n />\n ))}\n </div>\n ) : (\n <EmptyState\n illustration={searchQuery ? \"empty-search\" : \"empty-data\"}\n icon={<AppWindow size={32} />}\n title=\"No applications available\"\n description={\n searchQuery\n ? \"No applications matched your search.\"\n : \"Create an application before configuring webhooks.\"\n }\n action={\n <button\n onClick={() => handleNavigate(\"/apps/new\")}\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n <Plus size={16} />\n Create Application\n </button>\n }\n />\n )}\n </div>\n </PageLayout>\n </PermissionGuard>\n );\n }\n\n // Loading state\n if (loading && !data) {\n return (\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n >\n <div className=\"flex items-center justify-center py-12\">\n <Loader2 className=\"h-8 w-8 animate-spin text-text-secondary\" />\n <span className=\"ml-2 text-text-secondary\">\n {tr(\"devportal.loadingWebhooks\", \"Loading webhooks...\")}\n </span>\n </div>\n </PageLayout>\n );\n }\n\n // Error state\n if (error) {\n return (\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n >\n <div className=\"rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center\">\n <AlertCircle className=\"mx-auto h-8 w-8 text-status-error-text\" />\n <h3 className=\"mt-2 font-medium text-status-error-text\">\n {tr(\"devportal.failedToLoadWebhooks\", \"Failed to load webhooks\")}\n </h3>\n <p className=\"mt-1 text-sm text-text-secondary\">\n {getErrorMessage(error)}\n </p>\n <button\n onClick={() => refetch()}\n className=\"mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n {tr(\"devportal.tryAgain\", \"Try Again\")}\n </button>\n </div>\n </PageLayout>\n );\n }\n\n const columns = [\n {\n key: \"name\",\n header: \"Webhook\",\n render: (webhook: WebhookType) => (\n <div className=\"flex items-center gap-3\">\n <div\n className={cn(\n \"flex h-10 w-10 items-center justify-center rounded-lg\",\n webhook.status === \"ACTIVE\"\n ? \"bg-status-success-bg-subtle text-status-success-text\"\n : webhook.status === \"FAILED\"\n ? \"bg-status-error-bg-subtle text-status-error-text\"\n : webhook.status === \"PAUSED\"\n ? \"bg-status-warning-bg-subtle text-status-warning-text\"\n : \"bg-bg-sunken text-text-tertiary\",\n )}\n >\n <Webhook size={20} />\n </div>\n <div>\n <p className=\"font-medium\">{webhook.name}</p>\n <p className=\"text-xs text-text-secondary truncate max-w-xs\">\n {webhook.url}\n </p>\n </div>\n </div>\n ),\n },\n {\n key: \"events\",\n header: \"Events\",\n render: (webhook: WebhookType) => (\n <div className=\"flex flex-wrap gap-1\">\n {webhook.events.slice(0, 2).map((event) => (\n <span\n key={event}\n className=\"inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs\"\n >\n {event.split(\".\")[0]}\n </span>\n ))}\n {webhook.events.length > 2 && (\n <span className=\"text-xs text-text-secondary\">\n +{webhook.events.length - 2} more\n </span>\n )}\n </div>\n ),\n },\n {\n key: \"status\",\n header: \"Status\",\n render: (webhook: WebhookType) => (\n <div className=\"flex items-center gap-2\">\n {getStatusIcon(webhook.status)}\n <StatusBadge status={webhook.status} type=\"webhook\" />\n </div>\n ),\n },\n {\n key: \"successRate\",\n header: \"Success Rate\",\n render: (webhook: WebhookType) => {\n const rate = calculateSuccessRate(webhook);\n return (\n <div className=\"w-24\">\n <div className=\"flex items-center justify-between text-xs mb-1\">\n <span\n className={cn(\n rate >= 95\n ? \"text-status-success-text\"\n : rate >= 80\n ? \"text-status-warning-text\"\n : \"text-status-error-text\",\n )}\n >\n {rate}%\n </span>\n </div>\n <div className=\"h-1.5 rounded-full bg-bg-sunken\">\n <div\n className={cn(\n \"h-full rounded-full transition-all\",\n rate >= 95\n ? \"bg-status-success-bg-subtle\"\n : rate >= 80\n ? \"bg-status-warning-bg-subtle\"\n : \"bg-status-error-bg-subtle\",\n )}\n style={{ width: `${rate}%` }}\n />\n </div>\n </div>\n );\n },\n },\n {\n key: \"deliveries\",\n header: \"Deliveries\",\n render: (webhook: WebhookType) => (\n <div className=\"text-sm\">\n <span className=\"text-status-success-text\">\n {webhook.successCount.toLocaleString()}\n </span>\n <span className=\"text-text-secondary\"> / </span>\n <span className=\"text-status-error-text\">\n {webhook.failureCount.toLocaleString()}\n </span>\n </div>\n ),\n },\n {\n key: \"lastTriggered\",\n header: \"Last Triggered\",\n render: (webhook: WebhookType) => (\n <span className=\"text-sm text-text-secondary\">\n {webhook.lastTriggeredAt\n ? formatRelativeTime(webhook.lastTriggeredAt)\n : \"Never\"}\n </span>\n ),\n },\n ];\n\n // Stats calculation\n const stats = {\n total: webhooks.length,\n active: webhooks.filter((w: WebhookType) => w.status === \"ACTIVE\").length,\n failed: webhooks.filter((w: WebhookType) => w.status === \"FAILED\").length,\n paused: webhooks.filter((w: WebhookType) => w.status === \"PAUSED\").length,\n };\n\n return (\n <PermissionGuard authOnly>\n <PageLayout\n title={tr(\"devportal.webhooks\", \"Webhooks\")}\n description={tr(\n \"devportal.manageWebhooksApp\",\n \"Manage webhooks for this application\",\n )}\n purpose={tr(\n \"devportal.webhooksAppPurpose\",\n \"These webhooks deliver this application's events to your endpoints. Add a URL, choose which events to subscribe to, and send a test delivery to confirm your server receives and verifies the signed payload.\",\n )}\n backLink={`/apps/${appId}`}\n backLabel={tr(\"devportal.backToApplication\", \"Back to Application\")}\n actions={\n <button\n onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n disabled={!createPerm.allowed}\n aria-disabled={!createPerm.allowed}\n title={\n !createPerm.allowed\n ? tr(\n \"devportal.common.noPermission\",\n \"You do not have permission to perform this action\",\n )\n : undefined\n }\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n <Plus size={16} aria-hidden=\"true\" />\n {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n </button>\n }\n >\n {/* Filters /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex flex-1 items-center gap-4\">\n {/ Search /}\n <div className=\"relative flex-1 max-w-md\">\n <Search\n size={16}\n className=\"absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n />\n <input\n type=\"text\"\n placeholder=\"Search by name or URL...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n </div>\n\n {/ Status Filter /}\n <select\n value={statusFilter}\n onChange={(e) =>\n setStatusFilter(e.target.value as WebhookStatus \| \"\")\n }\n className=\"rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary\"\n >\n <option value=\"\">All Status</option>\n <option value=\"ACTIVE\">Active</option>\n <option value=\"PAUSED\">Paused</option>\n <option value=\"FAILED\">Failed</option>\n <option value=\"DISABLED\">Disabled</option>\n </select>\n </div>\n </div>\n\n {/ Summary Stats — primary emphasis zone /}\n <EmphasisPanel>\n <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-4\">\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-text-secondary\">\n <Webhook size={16} />\n <span className=\"text-sm\">Total Webhooks</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.total}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-success-text\">\n <CheckCircle size={16} />\n <span className=\"text-sm\">Active</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.active}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-warning-text\">\n <PauseCircle size={16} />\n <span className=\"text-sm\">Paused</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.paused}\n </p>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"p-4\">\n <div className=\"flex items-center gap-2 text-status-error-text\">\n <XCircle size={16} />\n <span className=\"text-sm\">Failed</span>\n </div>\n <p className=\"mt-1 text-2xl font-semibold tabular-nums\">\n {stats.failed}\n </p>\n </GlassCard>\n </div>\n </EmphasisPanel>\n\n {/ Results count /}\n <p className=\"text-sm text-text-secondary\">\n {filteredWebhooks.length} webhook\n {filteredWebhooks.length !== 1 ? \"s\" : \"\"} found\n </p>\n\n {/ Webhooks Table */}\n {filteredWebhooks.length > 0 ? (\n <DataTable\n data={filteredWebhooks}\n columns={columns}\n keyField=\"id\"\n onRowClick={(webhook) =>\n handleNavigate(`/apps/${appId}/webhooks/${webhook.id}`)\n }\n />\n ) : (\n <EmptyState\n illustration=\"empty-notifications\"\n title={tr(\"devportal.noWebhooksFound\", \"No webhooks found\")}\n description={\n searchQuery \|\| statusFilter\n ? tr(\n \"devportal.tryAdjustingFilters\",\n \"Try adjusting your filters\",\n )\n : tr(\n \"devportal.createFirstWebhook\",\n \"Create your first webhook to receive real-time event notifications\",\n )\n }\n action={\n !searchQuery && !statusFilter ? (\n <button\n onClick={() => handleNavigate(`/apps/${appId}/webhooks/new`)}\n className=\"inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n >\n <Plus size={16} />\n {tr(\"devportal.createWebhook\", \"Create Webhook\")}\n </button>\n ) : undefined\n }\n />\n )}\n </PageLayout>\n </PermissionGuard>\n );\n};\n\nfunction formatRelativeTime(dateString: string): string {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n const diffHours = Math.floor(diffMins / 60);\n const diffDays = Math.floor(diffHours / 24);\n\n if (diffMins < 1) return \"Just now\";\n if (diffMins < 60) return `${diffMins}m ago`;\n if (diffHours < 24) return `${diffHours}h ago`;\n if (diffDays < 7) return `${diffDays}d ago`;\n return date.toLocaleDateString();\n}\n"],"mappings":"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"}

package/dist/devportal/providers/DevportalProvider.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { createContext as e, useContext as t, useMemo as n, useState as r } from "react";
-import { BrowserRouter as i } from "react-router-dom";
+import { BrowserRouter as i } from "react-router";
 import { MutationCache as a, QueryClient as o, QueryClientProvider as s } from "@tanstack/react-query";
 import { PermissionProvider as c } from "@burdenoff/fe-libs/shared/providers/shell";
 import { jsx as l } from "react/jsx-runtime";

package/dist/devportal/providers/DevportalProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevportalProvider.js","names":[],"sources":["../../../src/devportal/providers/DevportalProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useMemo, useState } from \"react\";\nimport { BrowserRouter } from \"react-router~~-dom~~\";\nimport {\n MutationCache,\n QueryClient,\n QueryClientProvider,\n} from \"@tanstack/react-query\";\nimport { PermissionProvider } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { DevportalRootProps } from \"../types\";\n\nconst ORG_STORAGE_KEY = \"devportal_active_org_v1\";\n\n/*\n Context value for Developer Portal microfrontend.\n * Extends root props with org-scoping state shared across all devportal pages.\n /\ntype DevportalContextValue = DevportalRootProps & {\n activeOrgId: string \| null;\n setActiveOrgId: (id: string \| null) => void;\n};\n\nconst DevportalContext = createContext<DevportalContextValue \| null>(null);\n\n/\n Hook to access Developer Portal context\n /\nexport const useDevportal = () => {\n const context = useContext(DevportalContext);\n if (!context) {\n throw new Error(\"useDevportal must be used within DevportalProvider\");\n }\n return context;\n};\n\n/\n Provider component for Developer Portal microfrontend\n * Sets up routing, context, and React Query client\n /\nexport const DevportalProvider: FC<PropsWithChildren<DevportalRootProps>> = ({\n children,\n basePath,\n navigate,\n currentUser,\n tenantId,\n workspaceId,\n apiGatewayUrl,\n workspacesGatewayUrl,\n authToken,\n workspaceToken,\n getWorkspaceToken,\n registerNavItems,\n registerFooterItems,\n onApplicationSelect,\n onOrganizationSelect,\n}) => {\n const [activeOrgId, setActiveOrgIdState] = useState<string \| null>(() => {\n try {\n return localStorage.getItem(ORG_STORAGE_KEY) ?? null;\n } catch {\n return null;\n }\n });\n\n const setActiveOrgId = (id: string \| null) => {\n setActiveOrgIdState(id);\n try {\n if (id) {\n localStorage.setItem(ORG_STORAGE_KEY, id);\n } else {\n localStorage.removeItem(ORG_STORAGE_KEY);\n }\n } catch {\n // ignore storage errors\n }\n };\n\n const contextValue: DevportalContextValue = {\n basePath,\n navigate,\n currentUser,\n tenantId,\n workspaceId,\n apiGatewayUrl,\n workspacesGatewayUrl,\n authToken,\n workspaceToken,\n getWorkspaceToken,\n registerNavItems,\n registerFooterItems,\n onApplicationSelect,\n onOrganizationSelect,\n activeOrgId,\n setActiveOrgId,\n };\n\n // Create QueryClient instance (memoized to avoid recreation on re-renders)\n const queryClient = useMemo(() => {\n const client = new QueryClient({\n mutationCache: new MutationCache({\n onSuccess: () => {\n void client.invalidateQueries();\n },\n }),\n defaultOptions: {\n queries: {\n retry: 1,\n refetchOnWindowFocus: false,\n staleTime: 5 60 * 1000, // 5 minutes\n },\n },\n });\n return client;\n }, []);\n\n // PermissionProvider requires the shell's AuthProvider — only mount it in integrated mode.\n // In standalone/dev mode (MemoryRouter path), there's no AuthProvider, so we skip it\n // and pages will use a fallback that allows access (dev-only behaviour).\n const isIntegrated = !!basePath;\n\n // Wrap content with QueryClientProvider\n const content = (\n <QueryClientProvider client={queryClient}>\n <DevportalContext.Provider value={contextValue}>\n {isIntegrated ? (\n <PermissionProvider scopeId={tenantId ?? null} gateway=\"global\">\n {children}\n </PermissionProvider>\n ) : (\n children\n )}\n </DevportalContext.Provider>\n </QueryClientProvider>\n );\n\n // When integrated into a shell (basePath provided), the shell already has a router\n // so we don't create another one. When standalone (no basePath), use BrowserRouter.\n if (isIntegrated) {\n return content;\n }\n\n // Standalone mode: create BrowserRouter for independent operation\n return <BrowserRouter>{content}</BrowserRouter>;\n};\n"],"mappings":";;;;;;AAWA,IAAM,IAAkB,2BAWlB,IAAmB,EAA4C,KAAK,EAK7D,UAAqB;CAChC,IAAM,IAAU,EAAW,EAAiB;AAC5C,KAAI,CAAC,EACH,OAAU,MAAM,qDAAqD;AAEvE,QAAO;GAOI,KAAgE,EAC3E,aACA,aACA,aACA,gBACA,aACA,gBACA,kBACA,yBACA,cACA,mBACA,sBACA,qBACA,wBACA,wBACA,8BACI;CACJ,IAAM,CAAC,GAAa,KAAuB,QAA8B;AACvE,MAAI;AACF,UAAO,aAAa,QAAQ,EAAgB,IAAI;UAC1C;AACN,UAAO;;GAET,EAeI,IAAsC;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBA7BsB,MAAsB;AAC5C,KAAoB,EAAG;AACvB,OAAI;AACF,IAAI,IACF,aAAa,QAAQ,GAAiB,EAAG,GAEzC,aAAa,WAAW,EAAgB;WAEpC;;EAsBT,EAGK,IAAc,QAAc;EAChC,IAAM,IAAS,IAAI,EAAY;GAC7B,eAAe,IAAI,EAAc,EAC/B,iBAAiB;AACV,MAAO,mBAAmB;MAElC,CAAC;GACF,gBAAgB,EACd,SAAS;IACP,OAAO;IACP,sBAAsB;IACtB,WAAW,MAAS;IACrB,EACF;GACF,CAAC;AACF,SAAO;IACN,EAAE,CAAC,EAKA,IAAe,CAAC,CAAC,GAGjB,IACJ,kBAAC,GAAD;EAAqB,QAAQ;YAC3B,kBAAC,EAAiB,UAAlB;GAA2B,OAAO;aAC/B,IACC,kBAAC,GAAD;IAAoB,SAAS,KAAY;IAAM,SAAQ;IACpD;IACkB,CAAA,GAErB;GAEwB,CAAA;EACR,CAAA;AAUxB,QALI,IACK,IAIF,kBAAC,GAAD,EAAA,UAAgB,GAAwB,CAAA"}
1	+ {"version":3,"file":"DevportalProvider.js","names":[],"sources":["../../../src/devportal/providers/DevportalProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { createContext, useContext, useMemo, useState } from \"react\";\nimport { BrowserRouter } from \"react-router\";\nimport {\n MutationCache,\n QueryClient,\n QueryClientProvider,\n} from \"@tanstack/react-query\";\nimport { PermissionProvider } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { DevportalRootProps } from \"../types\";\n\nconst ORG_STORAGE_KEY = \"devportal_active_org_v1\";\n\n/*\n Context value for Developer Portal microfrontend.\n * Extends root props with org-scoping state shared across all devportal pages.\n /\ntype DevportalContextValue = DevportalRootProps & {\n activeOrgId: string \| null;\n setActiveOrgId: (id: string \| null) => void;\n};\n\nconst DevportalContext = createContext<DevportalContextValue \| null>(null);\n\n/\n Hook to access Developer Portal context\n /\nexport const useDevportal = () => {\n const context = useContext(DevportalContext);\n if (!context) {\n throw new Error(\"useDevportal must be used within DevportalProvider\");\n }\n return context;\n};\n\n/\n Provider component for Developer Portal microfrontend\n * Sets up routing, context, and React Query client\n /\nexport const DevportalProvider: FC<PropsWithChildren<DevportalRootProps>> = ({\n children,\n basePath,\n navigate,\n currentUser,\n tenantId,\n workspaceId,\n apiGatewayUrl,\n workspacesGatewayUrl,\n authToken,\n workspaceToken,\n getWorkspaceToken,\n registerNavItems,\n registerFooterItems,\n onApplicationSelect,\n onOrganizationSelect,\n}) => {\n const [activeOrgId, setActiveOrgIdState] = useState<string \| null>(() => {\n try {\n return localStorage.getItem(ORG_STORAGE_KEY) ?? null;\n } catch {\n return null;\n }\n });\n\n const setActiveOrgId = (id: string \| null) => {\n setActiveOrgIdState(id);\n try {\n if (id) {\n localStorage.setItem(ORG_STORAGE_KEY, id);\n } else {\n localStorage.removeItem(ORG_STORAGE_KEY);\n }\n } catch {\n // ignore storage errors\n }\n };\n\n const contextValue: DevportalContextValue = {\n basePath,\n navigate,\n currentUser,\n tenantId,\n workspaceId,\n apiGatewayUrl,\n workspacesGatewayUrl,\n authToken,\n workspaceToken,\n getWorkspaceToken,\n registerNavItems,\n registerFooterItems,\n onApplicationSelect,\n onOrganizationSelect,\n activeOrgId,\n setActiveOrgId,\n };\n\n // Create QueryClient instance (memoized to avoid recreation on re-renders)\n const queryClient = useMemo(() => {\n const client = new QueryClient({\n mutationCache: new MutationCache({\n onSuccess: () => {\n void client.invalidateQueries();\n },\n }),\n defaultOptions: {\n queries: {\n retry: 1,\n refetchOnWindowFocus: false,\n staleTime: 5 60 * 1000, // 5 minutes\n },\n },\n });\n return client;\n }, []);\n\n // PermissionProvider requires the shell's AuthProvider — only mount it in integrated mode.\n // In standalone/dev mode (MemoryRouter path), there's no AuthProvider, so we skip it\n // and pages will use a fallback that allows access (dev-only behaviour).\n const isIntegrated = !!basePath;\n\n // Wrap content with QueryClientProvider\n const content = (\n <QueryClientProvider client={queryClient}>\n <DevportalContext.Provider value={contextValue}>\n {isIntegrated ? (\n <PermissionProvider scopeId={tenantId ?? null} gateway=\"global\">\n {children}\n </PermissionProvider>\n ) : (\n children\n )}\n </DevportalContext.Provider>\n </QueryClientProvider>\n );\n\n // When integrated into a shell (basePath provided), the shell already has a router\n // so we don't create another one. When standalone (no basePath), use BrowserRouter.\n if (isIntegrated) {\n return content;\n }\n\n // Standalone mode: create BrowserRouter for independent operation\n return <BrowserRouter>{content}</BrowserRouter>;\n};\n"],"mappings":";;;;;;AAWA,IAAM,IAAkB,2BAWlB,IAAmB,EAA4C,KAAK,EAK7D,UAAqB;CAChC,IAAM,IAAU,EAAW,EAAiB;AAC5C,KAAI,CAAC,EACH,OAAU,MAAM,qDAAqD;AAEvE,QAAO;GAOI,KAAgE,EAC3E,aACA,aACA,aACA,gBACA,aACA,gBACA,kBACA,yBACA,cACA,mBACA,sBACA,qBACA,wBACA,wBACA,8BACI;CACJ,IAAM,CAAC,GAAa,KAAuB,QAA8B;AACvE,MAAI;AACF,UAAO,aAAa,QAAQ,EAAgB,IAAI;UAC1C;AACN,UAAO;;GAET,EAeI,IAAsC;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBA7BsB,MAAsB;AAC5C,KAAoB,EAAG;AACvB,OAAI;AACF,IAAI,IACF,aAAa,QAAQ,GAAiB,EAAG,GAEzC,aAAa,WAAW,EAAgB;WAEpC;;EAsBT,EAGK,IAAc,QAAc;EAChC,IAAM,IAAS,IAAI,EAAY;GAC7B,eAAe,IAAI,EAAc,EAC/B,iBAAiB;AACV,MAAO,mBAAmB;MAElC,CAAC;GACF,gBAAgB,EACd,SAAS;IACP,OAAO;IACP,sBAAsB;IACtB,WAAW,MAAS;IACrB,EACF;GACF,CAAC;AACF,SAAO;IACN,EAAE,CAAC,EAKA,IAAe,CAAC,CAAC,GAGjB,IACJ,kBAAC,GAAD;EAAqB,QAAQ;YAC3B,kBAAC,EAAiB,UAAlB;GAA2B,OAAO;aAC/B,IACC,kBAAC,GAAD;IAAoB,SAAS,KAAY;IAAM,SAAQ;IACpD;IACkB,CAAA,GAErB;GAEwB,CAAA;EACR,CAAA;AAUxB,QALI,IACK,IAIF,kBAAC,GAAD,EAAA,UAAgB,GAAwB,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-devportal",
-  "version": "2026.728.2",
+  "version": "2026.801.2",
   "description": "Burdenoff Developer Portal Microfrontend - Complete developer operations interface",
   "type": "module",
   "files": [
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.11",
-    "@burdenoff/fe-libs": "2026.720.3",
+    "@burdenoff/fe-libs": "2026.801.1",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -52,7 +52,7 @@
     "lucide-react": "^0.468.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.3",
+    "react-router": "^8.3.0",
     "recharts": "^2.15.3",
     "tailwind-merge": "^3.4.0",
     "zustand": "^5.0.3"