@burdenoff/microfe-devportal 2026.715.1 → 2026.715.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.
@@ -1 +1 @@
1
- {"version":3,"file":"CreateWebhookPage.js","names":[],"sources":["../../../src/devportal/pages/CreateWebhookPage.tsx"],"sourcesContent":["import type { FC, FormEvent } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { Loader2, Webhook } from \"lucide-react\";\nimport { ShowMore } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n InputField,\n TextareaField,\n CheckboxField,\n} from \"../components/FormField\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { WEBHOOK_EVENTS } from \"../types\";\nimport {\n type GetApplicationsQuery,\n getErrorMessage,\n useCreateWebhookMutation,\n useGetApplicationQuery,\n useGetApplicationsQuery,\n useDevportalPermission,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\nconst eventCategories = {\n Application: WEBHOOK_EVENTS.filter((event) =>\n event.startsWith(\"application.\"),\n ),\n Installation: WEBHOOK_EVENTS.filter((event) =>\n event.startsWith(\"installation.\"),\n ),\n User: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"user.\")),\n Workspace: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"workspace.\")),\n Project: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"project.\")),\n Task: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"task.\")),\n Comment: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"comment.\")),\n File: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"file.\")),\n Member: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"member.\")),\n};\n\ninterface CreateWebhookFormState {\n applicationId: string;\n name: string;\n description: string;\n url: string;\n events: string[];\n retryEnabled: boolean;\n maxRetries: number;\n}\n\ntype ApplicationOption =\n GetApplicationsQuery[\"applications\"][\"edges\"][number][\"node\"];\n\nexport const CreateWebhookPage: FC = () => {\n const { appId } = useParams<{ appId: string }>();\n const { navigate, basePath } = useDevportal();\n const [formData, setFormData] = useState<CreateWebhookFormState>({\n applicationId: appId || \"\",\n name: \"\",\n description: \"\",\n url: \"\",\n events: [],\n retryEnabled: true,\n maxRetries: 3,\n });\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [submitError, setSubmitError] = useState<string | null>(null);\n\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 } = useGetApplicationsQuery({\n variables: { limit: 100 },\n skip: !!appId,\n fetchPolicy: \"cache-and-network\",\n });\n const [createWebhook, { loading: isSubmitting }] = useCreateWebhookMutation();\n const bus = useDevportalEventBus();\n const tr = useTr();\n const createPerm = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n );\n\n const applications = useMemo(\n () =>\n appsData?.applications?.edges\n ?.map(\n (edge: GetApplicationsQuery[\"applications\"][\"edges\"][number]) =>\n edge.node,\n )\n .map((application: ApplicationOption) => ({\n id: application.id,\n name: application.name,\n slug: application.slug,\n })) ?? [],\n [appsData?.applications?.edges],\n );\n\n const selectedApplication = applications.find(\n (application: { id: string; name: string; slug: string }) =>\n application.id === formData.applicationId,\n );\n\n const handleChange = <K extends keyof CreateWebhookFormState>(\n key: K,\n value: CreateWebhookFormState[K],\n ) => {\n setFormData((previous) => ({\n ...previous,\n [key]: value,\n }));\n setErrors((previous) => {\n if (!previous[key as string]) return previous;\n const nextErrors = { ...previous };\n delete nextErrors[key as string];\n return nextErrors;\n });\n };\n\n const toggleEvent = (event: string) => {\n setFormData((previous) => ({\n ...previous,\n events: previous.events.includes(event)\n ? previous.events.filter((value) => value !== event)\n : [...previous.events, event],\n }));\n };\n\n const toggleCategory = (events: readonly string[]) => {\n const allSelected = events.every((event) =>\n formData.events.includes(event),\n );\n\n setFormData((previous) => ({\n ...previous,\n events: allSelected\n ? previous.events.filter((event) => !events.includes(event))\n : [...new Set([...previous.events, ...events])],\n }));\n };\n\n const validate = (): boolean => {\n const nextErrors: Record<string, string> = {};\n\n if (!formData.applicationId) {\n nextErrors.applicationId = tr(\n \"devportal.createWebhook.errors.appRequired\",\n \"Select an application\",\n );\n }\n if (!formData.name.trim()) {\n nextErrors.name = tr(\n \"devportal.createWebhook.errors.nameRequired\",\n \"Name is required\",\n );\n }\n if (!formData.url.trim()) {\n nextErrors.url = tr(\n \"devportal.createWebhook.errors.urlRequired\",\n \"Endpoint URL is required\",\n );\n } else if (!/^https:\\/\\//i.test(formData.url)) {\n nextErrors.url = tr(\n \"devportal.createWebhook.errors.urlHttps\",\n \"Endpoint URL must use HTTPS\",\n );\n }\n if (formData.events.length === 0) {\n nextErrors.events = tr(\n \"devportal.createWebhook.errors.eventsRequired\",\n \"Select at least one event\",\n );\n }\n if (\n formData.retryEnabled &&\n (formData.maxRetries < 1 || formData.maxRetries > 10)\n ) {\n nextErrors.maxRetries = tr(\n \"devportal.createWebhook.errors.retriesRange\",\n \"Retry count must be between 1 and 10\",\n );\n }\n\n setErrors(nextErrors);\n return Object.keys(nextErrors).length === 0;\n };\n\n const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmitError(null);\n\n if (!validate()) return;\n\n try {\n const result = await createWebhook({\n variables: {\n applicationId: formData.applicationId,\n input: {\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n url: formData.url.trim(),\n events: formData.events,\n retryEnabled: formData.retryEnabled,\n maxRetries: formData.retryEnabled ? formData.maxRetries : 0,\n },\n },\n });\n\n const createResult = result.data?.createWebhook;\n const createdWebhook = createResult?.webhook;\n if (!createdWebhook?.id) {\n throw new Error(\n tr(\n \"devportal.createWebhook.errors.noId\",\n \"Webhook creation did not return an identifier\",\n ),\n );\n }\n\n bus.emit(\"devportal.webhook.created\", {\n webhookId: createdWebhook.id,\n applicationId: formData.applicationId,\n secret: createResult?.secret,\n });\n\n navigate?.(\n `${basePath}/apps/${formData.applicationId}/webhooks/${createdWebhook.id}`,\n );\n } catch (error) {\n setSubmitError(\n error instanceof Error\n ? error.message\n : tr(\n \"devportal.createWebhook.errors.createFailed\",\n \"Failed to create webhook\",\n ),\n );\n }\n };\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE}>\n <PageLayout\n title={tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n description={tr(\n \"devportal.createWebhook.description\",\n \"Set up a real webhook endpoint to receive platform events through the public gateway\",\n )}\n purpose={tr(\n \"devportal.createWebhook.purpose\",\n \"Point a webhook at a URL you host so the platform pushes events (installs, payments, app updates) to your backend in real time. Choose which events to subscribe to; you will get a signing secret to verify that deliveries genuinely came from us.\",\n )}\n backLink={\n formData.applicationId\n ? `/apps/${formData.applicationId}/webhooks`\n : \"/webhooks\"\n }\n backLabel={tr(\"devportal.createWebhook.back\", \"Back to Webhooks\")}\n >\n <form onSubmit={handleSubmit} className=\"space-y-6\">\n <Alert variant=\"info\">\n {tr(\n \"devportal.createWebhook.info\",\n \"Webhook deliveries are signed and sent through the public global gateway. Use an HTTPS endpoint that accepts POST requests and returns a 2xx response for successful deliveries.\",\n )}\n </Alert>\n\n {submitError && <Alert variant=\"error\">{submitError}</Alert>}\n {appsError && !appId && (\n <Alert variant=\"error\">{getErrorMessage(appsError)}</Alert>\n )}\n\n <PageSection\n title={tr(\"devportal.createWebhook.basicInfo\", \"Basic Information\")}\n >\n <div className=\"space-y-4 rounded-card border border-border-seam bg-bg-surface p-4\">\n {!appId && (\n <label className=\"grid gap-2 text-sm font-medium\">\n <span>\n {tr(\"devportal.createWebhook.application\", \"Application\")}\n </span>\n <select\n value={formData.applicationId}\n onChange={(changeEvent) =>\n handleChange(\"applicationId\", changeEvent.target.value)\n }\n disabled={appsLoading}\n aria-label={tr(\n \"devportal.createWebhook.application\",\n \"Application\",\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=\"\">\n {tr(\n \"devportal.createWebhook.errors.appRequired\",\n \"Select an application\",\n )}\n </option>\n {applications.map(\n (application: { id: string; name: string }) => (\n <option key={application.id} value={application.id}>\n {application.name}\n </option>\n ),\n )}\n </select>\n {errors.applicationId && (\n <span className=\"text-sm text-status-error-text\">\n {errors.applicationId}\n </span>\n )}\n </label>\n )}\n\n {appsLoading && !appId && (\n <div\n className=\"flex items-center gap-2 text-sm text-text-secondary\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <Loader2\n className=\"h-4 w-4 animate-spin\"\n aria-hidden=\"true\"\n />\n {tr(\n \"devportal.createWebhook.loadingApps\",\n \"Loading applications...\",\n )}\n </div>\n )}\n\n {selectedApplication && (\n <div className=\"rounded-md border bg-bg-sunken/40 px-3 py-2 text-sm text-text-secondary\">\n {tr(\n \"devportal.createWebhook.creatingFor\",\n \"Creating webhook for\",\n )}{\" \"}\n <span className=\"font-medium text-text-primary\">\n {selectedApplication.name}\n </span>\n </div>\n )}\n\n <InputField\n label={tr(\n \"devportal.createWebhook.webhookName\",\n \"Webhook Name\",\n )}\n value={formData.name}\n onChange={(changeEvent) =>\n handleChange(\"name\", changeEvent.target.value)\n }\n placeholder={tr(\n \"devportal.createWebhook.webhookNamePlaceholder\",\n \"Production webhook\",\n )}\n error={errors.name}\n required\n />\n\n <TextareaField\n label={tr(\n \"devportal.createWebhook.descriptionLabel\",\n \"Description\",\n )}\n value={formData.description}\n onChange={(changeEvent) =>\n handleChange(\"description\", changeEvent.target.value)\n }\n placeholder={tr(\n \"devportal.createWebhook.descriptionPlaceholder\",\n \"What this webhook is used for\",\n )}\n rows={2}\n />\n\n <InputField\n label={tr(\n \"devportal.createWebhook.endpointUrl\",\n \"Endpoint URL\",\n )}\n type=\"url\"\n value={formData.url}\n onChange={(changeEvent) =>\n handleChange(\"url\", changeEvent.target.value)\n }\n placeholder=\"https://your-app.example.com/webhooks/burdenoff\"\n hint={tr(\"devportal.createWebhook.httpsOnly\", \"HTTPS only\")}\n error={errors.url}\n required\n />\n </div>\n </PageSection>\n\n <PageSection\n title={tr(\n \"devportal.createWebhook.subscribedEvents\",\n \"Subscribed Events\",\n )}\n >\n <div className=\"rounded-card border border-border-seam bg-bg-surface p-4\">\n {errors.events && (\n <p className=\"mb-3 text-sm text-status-error-text\" role=\"alert\">\n {errors.events}\n </p>\n )}\n <ShowMore\n collapsedHeight={320}\n label={tr(\n \"devportal.createWebhook.showAllEvents\",\n \"Show all event categories\",\n )}\n >\n <div className=\"space-y-4\">\n {Object.entries(eventCategories).map(([category, events]) => (\n <section\n key={category}\n className=\"space-y-3 border-b border-border-seam pb-4 last:border-b-0 last:pb-0\"\n >\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"font-medium\">\n {tr(\n `devportal.createWebhook.category.${category.toLowerCase()}`,\n category,\n )}\n </h3>\n <button\n type=\"button\"\n onClick={() => toggleCategory(events)}\n className=\"text-xs font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {events.every((item) =>\n formData.events.includes(item),\n )\n ? tr(\n \"devportal.createWebhook.deselectAll\",\n \"Deselect all\",\n )\n : tr(\n \"devportal.createWebhook.selectAll\",\n \"Select all\",\n )}\n </button>\n </div>\n <div className=\"grid gap-2 sm:grid-cols-2\">\n {events.map((eventName) => (\n <label\n key={eventName}\n className=\"flex items-center gap-2 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm\"\n >\n <input\n type=\"checkbox\"\n checked={formData.events.includes(eventName)}\n onChange={() => toggleEvent(eventName)}\n className=\"rounded border-border-default text-primary focus:ring-primary\"\n aria-label={eventName}\n />\n <code className=\"text-xs text-text-primary\">\n {eventName}\n </code>\n </label>\n ))}\n </div>\n </section>\n ))}\n </div>\n </ShowMore>\n </div>\n </PageSection>\n\n <PageSection\n title={tr(\n \"devportal.createWebhook.retrySettings\",\n \"Retry Settings\",\n )}\n >\n <div className=\"space-y-4 rounded-card border border-border-seam bg-bg-surface p-4\">\n <CheckboxField\n label={tr(\n \"devportal.createWebhook.enableRetries\",\n \"Enable retries\",\n )}\n description={tr(\n \"devportal.createWebhook.enableRetriesDesc\",\n \"Retry failed deliveries automatically\",\n )}\n checked={formData.retryEnabled}\n onChange={(changeEvent) =>\n handleChange(\"retryEnabled\", changeEvent.target.checked)\n }\n />\n\n {formData.retryEnabled && (\n <InputField\n label={tr(\n \"devportal.createWebhook.maxRetries\",\n \"Maximum retries\",\n )}\n type=\"number\"\n value={formData.maxRetries}\n onChange={(changeEvent) =>\n handleChange(\"maxRetries\", Number(changeEvent.target.value))\n }\n min={1}\n max={10}\n hint={tr(\n \"devportal.createWebhook.attemptsHint\",\n \"1 to 10 attempts\",\n )}\n error={errors.maxRetries}\n />\n )}\n </div>\n </PageSection>\n\n <div className=\"flex flex-col gap-3 sm:flex-row\">\n <button\n type=\"button\"\n onClick={() =>\n navigate?.(\n `${basePath}${formData.applicationId ? `/apps/${formData.applicationId}/webhooks` : \"/webhooks\"}`,\n )\n }\n className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {tr(\"devportal.common.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting || appsLoading || !createPerm.allowed}\n aria-disabled={isSubmitting || appsLoading || !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 justify-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 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {isSubmitting ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Webhook size={16} aria-hidden=\"true\" />\n )}\n {isSubmitting\n ? tr(\"devportal.createWebhook.creating\", \"Creating...\")\n : tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAkB;CACtB,aAAa,EAAe,QAAQ,MAClC,EAAM,WAAW,eAAe,CACjC;CACD,cAAc,EAAe,QAAQ,MACnC,EAAM,WAAW,gBAAgB,CAClC;CACD,MAAM,EAAe,QAAQ,MAAU,EAAM,WAAW,QAAQ,CAAC;CACjE,WAAW,EAAe,QAAQ,MAAU,EAAM,WAAW,aAAa,CAAC;CAC3E,SAAS,EAAe,QAAQ,MAAU,EAAM,WAAW,WAAW,CAAC;CACvE,MAAM,EAAe,QAAQ,MAAU,EAAM,WAAW,QAAQ,CAAC;CACjE,SAAS,EAAe,QAAQ,MAAU,EAAM,WAAW,WAAW,CAAC;CACvE,MAAM,EAAe,QAAQ,MAAU,EAAM,WAAW,QAAQ,CAAC;CACjE,QAAQ,EAAe,QAAQ,MAAU,EAAM,WAAW,UAAU,CAAC;CACtE,EAeY,UAA8B;CACzC,IAAM,EAAE,aAAU,GAA8B,EAC1C,EAAE,aAAU,gBAAa,GAAc,EACvC,CAAC,GAAU,KAAe,EAAiC;EAC/D,eAAe,KAAS;EACxB,MAAM;EACN,aAAa;EACb,KAAK;EACL,QAAQ,EAAE;EACV,cAAc;EACd,YAAY;EACb,CAAC,EACI,CAAC,GAAQ,KAAa,EAAiC,EAAE,CAAC,EAC1D,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAE7D,EAAE,MAAM,MAAkB,EAAuB;EACrD,WAAW,EAAE,IAAI,KAAS,IAAI;EAC9B,MAAM,CAAC;EACP,aAAa;EACd,CAAC;AAEF,SAAgB;EACd,IAAM,IAAO,GAAe,aAAa;AACzC,MAAI,CAAC,KAAS,CAAC,EAAM;EACrB,IAAM,IACJ,OAMA;AAEF,SADA,GAAK,SAAS,GAAO,EAAK,QACb,GAAK,WAAW,EAAM;IAClC,CAAC,GAAO,GAAe,aAAa,KAAK,CAAC;CAE7C,IAAM,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAwB;EAC1B,WAAW,EAAE,OAAO,KAAK;EACzB,MAAM,CAAC,CAAC;EACR,aAAa;EACd,CAAC,EACI,CAAC,GAAe,EAAE,SAAS,OAAkB,GAA0B,EACvE,IAAM,GAAsB,EAC5B,IAAK,GAAO,EACZ,IAAa,EACjB,EAAsB,eACvB,EAEK,IAAe,QAEjB,GAAU,cAAc,OACpB,KACC,MACC,EAAK,KACR,CACA,KAAK,OAAoC;EACxC,IAAI,EAAY;EAChB,MAAM,EAAY;EAClB,MAAM,EAAY;EACnB,EAAE,IAAI,EAAE,EACb,CAAC,GAAU,cAAc,MAAM,CAChC,EAEK,IAAsB,EAAa,MACtC,MACC,EAAY,OAAO,EAAS,cAC/B,EAEK,KACJ,GACA,MACG;AAKH,EAJA,GAAa,OAAc;GACzB,GAAG;IACF,IAAM;GACR,EAAE,EACH,GAAW,MAAa;AACtB,OAAI,CAAC,EAAS,GAAgB,QAAO;GACrC,IAAM,IAAa,EAAE,GAAG,GAAU;AAElC,UADA,OAAO,EAAW,IACX;IACP;IAGE,KAAe,MAAkB;AACrC,KAAa,OAAc;GACzB,GAAG;GACH,QAAQ,EAAS,OAAO,SAAS,EAAM,GACnC,EAAS,OAAO,QAAQ,MAAU,MAAU,EAAM,GAClD,CAAC,GAAG,EAAS,QAAQ,EAAM;GAChC,EAAE;IAGC,KAAkB,MAA8B;EACpD,IAAM,IAAc,EAAO,OAAO,MAChC,EAAS,OAAO,SAAS,EAAM,CAChC;AAED,KAAa,OAAc;GACzB,GAAG;GACH,QAAQ,IACJ,EAAS,OAAO,QAAQ,MAAU,CAAC,EAAO,SAAS,EAAM,CAAC,GAC1D,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,EAAS,QAAQ,GAAG,EAAO,CAAC,CAAC;GAClD,EAAE;IAGC,UAA0B;EAC9B,IAAM,IAAqC,EAAE;AA0C7C,SAxCK,EAAS,kBACZ,EAAW,gBAAgB,EACzB,8CACA,wBACD,GAEE,EAAS,KAAK,MAAM,KACvB,EAAW,OAAO,EAChB,+CACA,mBACD,GAEE,EAAS,IAAI,MAAM,GAKZ,eAAe,KAAK,EAAS,IAAI,KAC3C,EAAW,MAAM,EACf,2CACA,8BACD,IARD,EAAW,MAAM,EACf,8CACA,2BACD,EAOC,EAAS,OAAO,WAAW,MAC7B,EAAW,SAAS,EAClB,iDACA,4BACD,GAGD,EAAS,iBACR,EAAS,aAAa,KAAK,EAAS,aAAa,QAElD,EAAW,aAAa,EACtB,+CACA,uCACD,GAGH,EAAU,EAAW,EACd,OAAO,KAAK,EAAW,CAAC,WAAW;;AAwD5C,QACE,kBAAC,GAAD;EAAiB,YAAY,EAAsB;YACjD,kBAAC,GAAD;GACE,OAAO,EAAG,iCAAiC,iBAAiB;GAC5D,aAAa,EACX,uCACA,uFACD;GACD,SAAS,EACP,mCACA,uPACD;GACD,UACE,EAAS,gBACL,SAAS,EAAS,cAAc,aAChC;GAEN,WAAW,EAAG,gCAAgC,mBAAmB;aAEjE,kBAAC,QAAD;IAAM,UAxES,OAAO,MAAsC;AAChE,WAAM,gBAAgB,EACtB,EAAe,KAAK,EAEf,GAAU,CAEf,KAAI;MAeF,IAAM,KAdS,MAAM,EAAc,EACjC,WAAW;OACT,eAAe,EAAS;OACxB,OAAO;QACL,MAAM,EAAS,KAAK,MAAM;QAC1B,aAAa,EAAS,YAAY,MAAM,IAAI,KAAA;QAC5C,KAAK,EAAS,IAAI,MAAM;QACxB,QAAQ,EAAS;QACjB,cAAc,EAAS;QACvB,YAAY,EAAS,eAAe,EAAS,aAAa;QAC3D;OACF,EACF,CAAC,EAE0B,MAAM,eAC5B,IAAiB,GAAc;AACrC,UAAI,CAAC,GAAgB,GACnB,OAAU,MACR,EACE,uCACA,gDACD,CACF;AASH,MANA,EAAI,KAAK,6BAA6B;OACpC,WAAW,EAAe;OAC1B,eAAe,EAAS;OACxB,QAAQ,GAAc;OACvB,CAAC,EAEF,IACE,GAAG,EAAS,QAAQ,EAAS,cAAc,YAAY,EAAe,KACvE;cACM,GAAO;AACd,QACE,aAAiB,QACb,EAAM,UACN,EACE,+CACA,2BACD,CACN;;;IAuB+B,WAAU;cAAxC;KACE,kBAAC,GAAD;MAAO,SAAQ;gBACZ,EACC,gCACA,mLACD;MACK,CAAA;KAEP,KAAe,kBAAC,GAAD;MAAO,SAAQ;gBAAS;MAAoB,CAAA;KAC3D,KAAa,CAAC,KACb,kBAAC,GAAD;MAAO,SAAQ;gBAAS,EAAgB,EAAU;MAAS,CAAA;KAG7D,kBAAC,GAAD;MACE,OAAO,EAAG,qCAAqC,oBAAoB;gBAEnE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,CAAC,KACA,kBAAC,SAAD;SAAO,WAAU;mBAAjB;UACE,kBAAC,QAAD,EAAA,UACG,EAAG,uCAAuC,cAAc,EACpD,CAAA;UACP,kBAAC,UAAD;WACE,OAAO,EAAS;WAChB,WAAW,MACT,EAAa,iBAAiB,EAAY,OAAO,MAAM;WAEzD,UAAU;WACV,cAAY,EACV,uCACA,cACD;WACD,WAAU;qBAVZ,CAYE,kBAAC,UAAD;YAAQ,OAAM;sBACX,EACC,8CACA,wBACD;YACM,CAAA,EACR,EAAa,KACX,MACC,kBAAC,UAAD;YAA6B,OAAO,EAAY;sBAC7C,EAAY;YACN,EAFI,EAAY,GAEhB,CAEZ,CACM;;UACR,EAAO,iBACN,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAO;WACH,CAAA;UAEH;;QAGT,KAAe,CAAC,KACf,kBAAC,OAAD;SACE,WAAU;SACV,MAAK;SACL,aAAU;mBAHZ,CAKE,kBAAC,GAAD;UACE,WAAU;UACV,eAAY;UACZ,CAAA,EACD,EACC,uCACA,0BACD,CACG;;QAGP,KACC,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACG,EACC,uCACA,uBACD;UAAE;UACH,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAoB;WAChB,CAAA;UACH;;QAGR,kBAAC,GAAD;SACE,OAAO,EACL,uCACA,eACD;SACD,OAAO,EAAS;SAChB,WAAW,MACT,EAAa,QAAQ,EAAY,OAAO,MAAM;SAEhD,aAAa,EACX,kDACA,qBACD;SACD,OAAO,EAAO;SACd,UAAA;SACA,CAAA;QAEF,kBAAC,GAAD;SACE,OAAO,EACL,4CACA,cACD;SACD,OAAO,EAAS;SAChB,WAAW,MACT,EAAa,eAAe,EAAY,OAAO,MAAM;SAEvD,aAAa,EACX,kDACA,gCACD;SACD,MAAM;SACN,CAAA;QAEF,kBAAC,GAAD;SACE,OAAO,EACL,uCACA,eACD;SACD,MAAK;SACL,OAAO,EAAS;SAChB,WAAW,MACT,EAAa,OAAO,EAAY,OAAO,MAAM;SAE/C,aAAY;SACZ,MAAM,EAAG,qCAAqC,aAAa;SAC3D,OAAO,EAAO;SACd,UAAA;SACA,CAAA;QACE;;MACM,CAAA;KAEd,kBAAC,GAAD;MACE,OAAO,EACL,4CACA,oBACD;gBAED,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAO,UACN,kBAAC,KAAD;QAAG,WAAU;QAAsC,MAAK;kBACrD,EAAO;QACN,CAAA,EAEN,kBAAC,GAAD;QACE,iBAAiB;QACjB,OAAO,EACL,yCACA,4BACD;kBAED,kBAAC,OAAD;SAAK,WAAU;mBACZ,OAAO,QAAQ,EAAgB,CAAC,KAAK,CAAC,GAAU,OAC/C,kBAAC,WAAD;UAEE,WAAU;oBAFZ,CAIE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,MAAD;YAAI,WAAU;sBACX,EACC,oCAAoC,EAAS,aAAa,IAC1D,EACD;YACE,CAAA,EACL,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAe,EAAO;YACrC,WAAU;sBAET,EAAO,OAAO,MACb,EAAS,OAAO,SAAS,EAAK,CAC/B,GACG,EACE,uCACA,eACD,GACD,EACE,qCACA,aACD;YACE,CAAA,CACL;cACN,kBAAC,OAAD;WAAK,WAAU;qBACZ,EAAO,KAAK,MACX,kBAAC,SAAD;YAEE,WAAU;sBAFZ,CAIE,kBAAC,SAAD;aACE,MAAK;aACL,SAAS,EAAS,OAAO,SAAS,EAAU;aAC5C,gBAAgB,EAAY,EAAU;aACtC,WAAU;aACV,cAAY;aACZ,CAAA,EACF,kBAAC,QAAD;aAAM,WAAU;uBACb;aACI,CAAA,CACD;cAbD,EAaC,CACR;WACE,CAAA,CACE;YA/CH,EA+CG,CACV;SACE,CAAA;QACG,CAAA,CACP;;MACM,CAAA;KAEd,kBAAC,GAAD;MACE,OAAO,EACL,yCACA,iBACD;gBAED,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD;QACE,OAAO,EACL,yCACA,iBACD;QACD,aAAa,EACX,6CACA,wCACD;QACD,SAAS,EAAS;QAClB,WAAW,MACT,EAAa,gBAAgB,EAAY,OAAO,QAAQ;QAE1D,CAAA,EAED,EAAS,gBACR,kBAAC,GAAD;QACE,OAAO,EACL,sCACA,kBACD;QACD,MAAK;QACL,OAAO,EAAS;QAChB,WAAW,MACT,EAAa,cAAc,OAAO,EAAY,OAAO,MAAM,CAAC;QAE9D,KAAK;QACL,KAAK;QACL,MAAM,EACJ,wCACA,mBACD;QACD,OAAO,EAAO;QACd,CAAA,CAEA;;MACM,CAAA;KAEd,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,eACE,IACE,GAAG,IAAW,EAAS,gBAAgB,SAAS,EAAS,cAAc,aAAa,cACrF;OAEH,WAAU;iBAET,EAAG,2BAA2B,SAAS;OACjC,CAAA,EACT,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,KAAgB,KAAe,CAAC,EAAW;OACrD,iBAAe,KAAgB,KAAe,CAAC,EAAW;OAC1D,OACG,EAAW,UAKR,KAAA,IAJA,EACE,iCACA,oDACD;OAGP,WAAU;iBAZZ,CAcG,IACC,kBAAC,GAAD;QAAS,WAAU;QAAuB,eAAY;QAAS,CAAA,GAE/D,kBAAC,GAAD;QAAS,MAAM;QAAI,eAAY;QAAS,CAAA,EAEzC,IACG,EAAG,oCAAoC,cAAc,GACrD,EAAG,iCAAiC,iBAAiB,CAClD;SACL;;KACD;;GACI,CAAA;EACG,CAAA"}
1
+ {"version":3,"file":"CreateWebhookPage.js","names":[],"sources":["../../../src/devportal/pages/CreateWebhookPage.tsx"],"sourcesContent":["import type { FC, FormEvent } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { Loader2, Webhook } from \"lucide-react\";\nimport { ShowMore } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout, PageSection } from \"../components/PageLayout\";\nimport {\n InputField,\n TextareaField,\n CheckboxField,\n} from \"../components/FormField\";\nimport { Alert } from \"../components/ConfirmDialog\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport { PermissionGuard } from \"../components\";\nimport { DEVPORTAL_PERMISSIONS } from \"../constants/permissions\";\nimport { useDevportalEventBus } from \"../events\";\nimport { WEBHOOK_EVENTS } from \"../types\";\nimport {\n type GetApplicationsQuery,\n getErrorMessage,\n useCreateWebhookMutation,\n useGetApplicationQuery,\n useGetApplicationsQuery,\n useDevportalPermission,\n} from \"../hooks\";\nimport { useTr } from \"../utils/i18n\";\n\nconst eventCategories = {\n Application: WEBHOOK_EVENTS.filter((event) =>\n event.startsWith(\"application.\"),\n ),\n Installation: WEBHOOK_EVENTS.filter((event) =>\n event.startsWith(\"installation.\"),\n ),\n User: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"user.\")),\n Workspace: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"workspace.\")),\n Project: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"project.\")),\n Task: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"task.\")),\n Comment: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"comment.\")),\n File: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"file.\")),\n Member: WEBHOOK_EVENTS.filter((event) => event.startsWith(\"member.\")),\n};\n\ninterface CreateWebhookFormState {\n applicationId: string;\n name: string;\n description: string;\n url: string;\n events: string[];\n retryEnabled: boolean;\n maxRetries: number;\n}\n\ntype ApplicationOption =\n GetApplicationsQuery[\"applications\"][\"edges\"][number][\"node\"];\n\nexport const CreateWebhookPage: FC = () => {\n const { appId } = useParams<{ appId: string }>();\n const { navigate, basePath } = useDevportal();\n const [formData, setFormData] = useState<CreateWebhookFormState>({\n applicationId: appId || \"\",\n name: \"\",\n description: \"\",\n url: \"\",\n events: [],\n retryEnabled: true,\n maxRetries: 3,\n });\n const [errors, setErrors] = useState<Record<string, string>>({});\n const [submitError, setSubmitError] = useState<string | null>(null);\n\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 } = useGetApplicationsQuery({\n variables: { limit: 100 },\n skip: !!appId,\n fetchPolicy: \"cache-and-network\",\n });\n const [createWebhook, { loading: isSubmitting }] = useCreateWebhookMutation();\n const bus = useDevportalEventBus();\n const tr = useTr();\n const createPerm = useDevportalPermission(\n DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE,\n );\n\n const applications = useMemo(\n () =>\n appsData?.applications?.edges\n ?.map(\n (edge: GetApplicationsQuery[\"applications\"][\"edges\"][number]) =>\n edge.node,\n )\n .map((application: ApplicationOption) => ({\n id: application.id,\n name: application.name,\n slug: application.slug,\n })) ?? [],\n [appsData?.applications?.edges],\n );\n\n const selectedApplication = applications.find(\n (application: { id: string; name: string; slug: string }) =>\n application.id === formData.applicationId,\n );\n\n const handleChange = <K extends keyof CreateWebhookFormState>(\n key: K,\n value: CreateWebhookFormState[K],\n ) => {\n setFormData((previous) => ({\n ...previous,\n [key]: value,\n }));\n setErrors((previous) => {\n if (!previous[key as string]) return previous;\n const nextErrors = { ...previous };\n delete nextErrors[key as string];\n return nextErrors;\n });\n };\n\n const toggleEvent = (event: string) => {\n setFormData((previous) => ({\n ...previous,\n events: previous.events.includes(event)\n ? previous.events.filter((value) => value !== event)\n : [...previous.events, event],\n }));\n };\n\n const toggleCategory = (events: readonly string[]) => {\n const allSelected = events.every((event) =>\n formData.events.includes(event),\n );\n\n setFormData((previous) => ({\n ...previous,\n events: allSelected\n ? previous.events.filter((event) => !events.includes(event))\n : [...new Set([...previous.events, ...events])],\n }));\n };\n\n const validate = (): boolean => {\n const nextErrors: Record<string, string> = {};\n\n if (!formData.applicationId) {\n nextErrors.applicationId = tr(\n \"devportal.createWebhook.errors.appRequired\",\n \"Select an application\",\n );\n }\n if (!formData.name.trim()) {\n nextErrors.name = tr(\n \"devportal.createWebhook.errors.nameRequired\",\n \"Name is required\",\n );\n }\n if (!formData.url.trim()) {\n nextErrors.url = tr(\n \"devportal.createWebhook.errors.urlRequired\",\n \"Endpoint URL is required\",\n );\n } else if (!import.meta.env.DEV && !/^https:\\/\\//i.test(formData.url)) {\n nextErrors.url = tr(\n \"devportal.createWebhook.errors.urlHttps\",\n \"Endpoint URL must use HTTPS\",\n );\n }\n if (formData.events.length === 0) {\n nextErrors.events = tr(\n \"devportal.createWebhook.errors.eventsRequired\",\n \"Select at least one event\",\n );\n }\n if (\n formData.retryEnabled &&\n (formData.maxRetries < 1 || formData.maxRetries > 10)\n ) {\n nextErrors.maxRetries = tr(\n \"devportal.createWebhook.errors.retriesRange\",\n \"Retry count must be between 1 and 10\",\n );\n }\n\n setErrors(nextErrors);\n return Object.keys(nextErrors).length === 0;\n };\n\n const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmitError(null);\n\n if (!validate()) return;\n\n try {\n const result = await createWebhook({\n variables: {\n applicationId: formData.applicationId,\n input: {\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n url: formData.url.trim(),\n events: formData.events,\n retryEnabled: formData.retryEnabled,\n maxRetries: formData.retryEnabled ? formData.maxRetries : 0,\n },\n },\n });\n\n const createResult = result.data?.createWebhook;\n const createdWebhook = createResult?.webhook;\n if (!createdWebhook?.id) {\n throw new Error(\n tr(\n \"devportal.createWebhook.errors.noId\",\n \"Webhook creation did not return an identifier\",\n ),\n );\n }\n\n bus.emit(\"devportal.webhook.created\", {\n webhookId: createdWebhook.id,\n applicationId: formData.applicationId,\n secret: createResult?.secret,\n });\n\n navigate?.(\n `${basePath}/apps/${formData.applicationId}/webhooks/${createdWebhook.id}`,\n );\n } catch (error) {\n setSubmitError(\n error instanceof Error\n ? error.message\n : tr(\n \"devportal.createWebhook.errors.createFailed\",\n \"Failed to create webhook\",\n ),\n );\n }\n };\n\n return (\n <PermissionGuard permission={DEVPORTAL_PERMISSIONS.WEBHOOK_CREATE}>\n <PageLayout\n title={tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n description={tr(\n \"devportal.createWebhook.description\",\n \"Set up a real webhook endpoint to receive platform events through the public gateway\",\n )}\n purpose={tr(\n \"devportal.createWebhook.purpose\",\n \"Point a webhook at a URL you host so the platform pushes events (installs, payments, app updates) to your backend in real time. Choose which events to subscribe to; you will get a signing secret to verify that deliveries genuinely came from us.\",\n )}\n backLink={\n formData.applicationId\n ? `/apps/${formData.applicationId}/webhooks`\n : \"/webhooks\"\n }\n backLabel={tr(\"devportal.createWebhook.back\", \"Back to Webhooks\")}\n >\n <form onSubmit={handleSubmit} className=\"space-y-6\">\n <Alert variant=\"info\">\n {tr(\n \"devportal.createWebhook.info\",\n \"Webhook deliveries are signed and sent through the public global gateway. Use an HTTPS endpoint that accepts POST requests and returns a 2xx response for successful deliveries.\",\n )}\n </Alert>\n\n {submitError && <Alert variant=\"error\">{submitError}</Alert>}\n {appsError && !appId && (\n <Alert variant=\"error\">{getErrorMessage(appsError)}</Alert>\n )}\n\n <PageSection\n title={tr(\"devportal.createWebhook.basicInfo\", \"Basic Information\")}\n >\n <div className=\"space-y-4 rounded-card border border-border-seam bg-bg-surface p-4\">\n {!appId && (\n <label className=\"grid gap-2 text-sm font-medium\">\n <span>\n {tr(\"devportal.createWebhook.application\", \"Application\")}\n </span>\n <select\n value={formData.applicationId}\n onChange={(changeEvent) =>\n handleChange(\"applicationId\", changeEvent.target.value)\n }\n disabled={appsLoading}\n aria-label={tr(\n \"devportal.createWebhook.application\",\n \"Application\",\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=\"\">\n {tr(\n \"devportal.createWebhook.errors.appRequired\",\n \"Select an application\",\n )}\n </option>\n {applications.map(\n (application: { id: string; name: string }) => (\n <option key={application.id} value={application.id}>\n {application.name}\n </option>\n ),\n )}\n </select>\n {errors.applicationId && (\n <span className=\"text-sm text-status-error-text\">\n {errors.applicationId}\n </span>\n )}\n </label>\n )}\n\n {appsLoading && !appId && (\n <div\n className=\"flex items-center gap-2 text-sm text-text-secondary\"\n role=\"status\"\n aria-live=\"polite\"\n >\n <Loader2\n className=\"h-4 w-4 animate-spin\"\n aria-hidden=\"true\"\n />\n {tr(\n \"devportal.createWebhook.loadingApps\",\n \"Loading applications...\",\n )}\n </div>\n )}\n\n {selectedApplication && (\n <div className=\"rounded-md border bg-bg-sunken/40 px-3 py-2 text-sm text-text-secondary\">\n {tr(\n \"devportal.createWebhook.creatingFor\",\n \"Creating webhook for\",\n )}{\" \"}\n <span className=\"font-medium text-text-primary\">\n {selectedApplication.name}\n </span>\n </div>\n )}\n\n <InputField\n label={tr(\n \"devportal.createWebhook.webhookName\",\n \"Webhook Name\",\n )}\n value={formData.name}\n onChange={(changeEvent) =>\n handleChange(\"name\", changeEvent.target.value)\n }\n placeholder={tr(\n \"devportal.createWebhook.webhookNamePlaceholder\",\n \"Production webhook\",\n )}\n error={errors.name}\n required\n />\n\n <TextareaField\n label={tr(\n \"devportal.createWebhook.descriptionLabel\",\n \"Description\",\n )}\n value={formData.description}\n onChange={(changeEvent) =>\n handleChange(\"description\", changeEvent.target.value)\n }\n placeholder={tr(\n \"devportal.createWebhook.descriptionPlaceholder\",\n \"What this webhook is used for\",\n )}\n rows={2}\n />\n\n <InputField\n label={tr(\n \"devportal.createWebhook.endpointUrl\",\n \"Endpoint URL\",\n )}\n type=\"url\"\n value={formData.url}\n onChange={(changeEvent) =>\n handleChange(\"url\", changeEvent.target.value)\n }\n placeholder=\"https://your-app.example.com/webhooks/burdenoff\"\n hint={tr(\"devportal.createWebhook.httpsOnly\", \"HTTPS only\")}\n error={errors.url}\n required\n />\n </div>\n </PageSection>\n\n <PageSection\n title={tr(\n \"devportal.createWebhook.subscribedEvents\",\n \"Subscribed Events\",\n )}\n >\n <div className=\"rounded-card border border-border-seam bg-bg-surface p-4\">\n {errors.events && (\n <p className=\"mb-3 text-sm text-status-error-text\" role=\"alert\">\n {errors.events}\n </p>\n )}\n <ShowMore\n collapsedHeight={320}\n label={tr(\n \"devportal.createWebhook.showAllEvents\",\n \"Show all event categories\",\n )}\n >\n <div className=\"space-y-4\">\n {Object.entries(eventCategories).map(([category, events]) => (\n <section\n key={category}\n className=\"space-y-3 border-b border-border-seam pb-4 last:border-b-0 last:pb-0\"\n >\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"font-medium\">\n {tr(\n `devportal.createWebhook.category.${category.toLowerCase()}`,\n category,\n )}\n </h3>\n <button\n type=\"button\"\n onClick={() => toggleCategory(events)}\n className=\"text-xs font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {events.every((item) =>\n formData.events.includes(item),\n )\n ? tr(\n \"devportal.createWebhook.deselectAll\",\n \"Deselect all\",\n )\n : tr(\n \"devportal.createWebhook.selectAll\",\n \"Select all\",\n )}\n </button>\n </div>\n <div className=\"grid gap-2 sm:grid-cols-2\">\n {events.map((eventName) => (\n <label\n key={eventName}\n className=\"flex items-center gap-2 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm\"\n >\n <input\n type=\"checkbox\"\n checked={formData.events.includes(eventName)}\n onChange={() => toggleEvent(eventName)}\n className=\"rounded border-border-default text-primary focus:ring-primary\"\n aria-label={eventName}\n />\n <code className=\"text-xs text-text-primary\">\n {eventName}\n </code>\n </label>\n ))}\n </div>\n </section>\n ))}\n </div>\n </ShowMore>\n </div>\n </PageSection>\n\n <PageSection\n title={tr(\n \"devportal.createWebhook.retrySettings\",\n \"Retry Settings\",\n )}\n >\n <div className=\"space-y-4 rounded-card border border-border-seam bg-bg-surface p-4\">\n <CheckboxField\n label={tr(\n \"devportal.createWebhook.enableRetries\",\n \"Enable retries\",\n )}\n description={tr(\n \"devportal.createWebhook.enableRetriesDesc\",\n \"Retry failed deliveries automatically\",\n )}\n checked={formData.retryEnabled}\n onChange={(changeEvent) =>\n handleChange(\"retryEnabled\", changeEvent.target.checked)\n }\n />\n\n {formData.retryEnabled && (\n <InputField\n label={tr(\n \"devportal.createWebhook.maxRetries\",\n \"Maximum retries\",\n )}\n type=\"number\"\n value={formData.maxRetries}\n onChange={(changeEvent) =>\n handleChange(\"maxRetries\", Number(changeEvent.target.value))\n }\n min={1}\n max={10}\n hint={tr(\n \"devportal.createWebhook.attemptsHint\",\n \"1 to 10 attempts\",\n )}\n error={errors.maxRetries}\n />\n )}\n </div>\n </PageSection>\n\n <div className=\"flex flex-col gap-3 sm:flex-row\">\n <button\n type=\"button\"\n onClick={() =>\n navigate?.(\n `${basePath}${formData.applicationId ? `/apps/${formData.applicationId}/webhooks` : \"/webhooks\"}`,\n )\n }\n className=\"rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {tr(\"devportal.common.cancel\", \"Cancel\")}\n </button>\n <button\n type=\"submit\"\n disabled={isSubmitting || appsLoading || !createPerm.allowed}\n aria-disabled={isSubmitting || appsLoading || !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 justify-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 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n >\n {isSubmitting ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Webhook size={16} aria-hidden=\"true\" />\n )}\n {isSubmitting\n ? tr(\"devportal.createWebhook.creating\", \"Creating...\")\n : tr(\"devportal.createWebhook.title\", \"Create Webhook\")}\n </button>\n </div>\n </form>\n </PageLayout>\n </PermissionGuard>\n );\n};\n"],"mappings":"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"}
@@ -4396,6 +4396,46 @@ export type GetDeveloperPortalSettingsOverviewQuery = {
4396
4396
  }>;
4397
4397
  };
4398
4398
  };
4399
+ export type SharedWorkflowFieldsFragment = {
4400
+ __typename?: 'SharedWorkflow';
4401
+ id: string;
4402
+ name: string;
4403
+ description?: string | null;
4404
+ shortDescription?: string | null;
4405
+ iconUrl?: string | null;
4406
+ category?: string | null;
4407
+ tags: Array<string>;
4408
+ manifest: Record<string, unknown>;
4409
+ developerName?: string | null;
4410
+ appType: Types.AppType;
4411
+ sharedAt: string;
4412
+ updatedAt: string;
4413
+ };
4414
+ export type ShareWorkflowMutationVariables = Types.Exact<{
4415
+ id: Types.Scalars['ID']['input'];
4416
+ }>;
4417
+ export type ShareWorkflowMutation = {
4418
+ __typename?: 'Mutation';
4419
+ shareWorkflow: {
4420
+ __typename?: 'Application';
4421
+ id: string;
4422
+ visibility: Types.AppVisibility;
4423
+ manifest?: Record<string, unknown> | null;
4424
+ updatedAt: string;
4425
+ };
4426
+ };
4427
+ export type UnshareWorkflowMutationVariables = Types.Exact<{
4428
+ id: Types.Scalars['ID']['input'];
4429
+ }>;
4430
+ export type UnshareWorkflowMutation = {
4431
+ __typename?: 'Mutation';
4432
+ unshareWorkflow: {
4433
+ __typename?: 'Application';
4434
+ id: string;
4435
+ visibility: Types.AppVisibility;
4436
+ updatedAt: string;
4437
+ };
4438
+ };
4399
4439
  export type DevportalWebhookFieldsFragment = {
4400
4440
  __typename?: 'Webhook';
4401
4441
  id: string;
@@ -4721,6 +4761,7 @@ export declare const SaleFieldsFragmentDoc: Apollo.DocumentNode;
4721
4761
  export declare const PayoutFieldsFragmentDoc: Apollo.DocumentNode;
4722
4762
  export declare const PaymentMethodFieldsFragmentDoc: Apollo.DocumentNode;
4723
4763
  export declare const RevenueAnalyticsFieldsFragmentDoc: Apollo.DocumentNode;
4764
+ export declare const SharedWorkflowFieldsFragmentDoc: Apollo.DocumentNode;
4724
4765
  export declare const DevportalWebhookFieldsFragmentDoc: Apollo.DocumentNode;
4725
4766
  export declare const WebhookDeliveryFieldsFragmentDoc: Apollo.DocumentNode;
4726
4767
  export declare const GetStoreInstallationsDocument: Apollo.DocumentNode;
@@ -7524,6 +7565,52 @@ export type GetDeveloperPortalSettingsOverviewQueryHookResult = ReturnType<typeo
7524
7565
  export type GetDeveloperPortalSettingsOverviewLazyQueryHookResult = ReturnType<typeof useGetDeveloperPortalSettingsOverviewLazyQuery>;
7525
7566
  export type GetDeveloperPortalSettingsOverviewSuspenseQueryHookResult = ReturnType<typeof useGetDeveloperPortalSettingsOverviewSuspenseQuery>;
7526
7567
  export type GetDeveloperPortalSettingsOverviewQueryResult = Apollo.QueryResult<Types.GetDeveloperPortalSettingsOverviewQuery, Types.GetDeveloperPortalSettingsOverviewQueryVariables>;
7568
+ export declare const ShareWorkflowDocument: Apollo.DocumentNode;
7569
+ export type ShareWorkflowMutationFn = Apollo.MutationFunction<Types.ShareWorkflowMutation, Types.ShareWorkflowMutationVariables>;
7570
+ /**
7571
+ * __useShareWorkflowMutation__
7572
+ *
7573
+ * To run a mutation, you first call `useShareWorkflowMutation` within a React component and pass it any options that fit your needs.
7574
+ * When your component renders, `useShareWorkflowMutation` returns a tuple that includes:
7575
+ * - A mutate function that you can call at any time to execute the mutation
7576
+ * - An object with fields that represent the current status of the mutation's execution
7577
+ *
7578
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
7579
+ *
7580
+ * @example
7581
+ * const [shareWorkflowMutation, { data, loading, error }] = useShareWorkflowMutation({
7582
+ * variables: {
7583
+ * id: // value for 'id'
7584
+ * },
7585
+ * });
7586
+ */
7587
+ export declare function useShareWorkflowMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.ShareWorkflowMutation, Types.ShareWorkflowMutationVariables>): ApolloReactHooks.useMutation.ResultTuple<Types.ShareWorkflowMutation, any, Apollo.ApolloCache, undefined>;
7588
+ export type ShareWorkflowMutationHookResult = ReturnType<typeof useShareWorkflowMutation>;
7589
+ export type ShareWorkflowMutationResult = Apollo.MutationResult<Types.ShareWorkflowMutation>;
7590
+ export type ShareWorkflowMutationOptions = Apollo.BaseMutationOptions<Types.ShareWorkflowMutation, Types.ShareWorkflowMutationVariables>;
7591
+ export declare const UnshareWorkflowDocument: Apollo.DocumentNode;
7592
+ export type UnshareWorkflowMutationFn = Apollo.MutationFunction<Types.UnshareWorkflowMutation, Types.UnshareWorkflowMutationVariables>;
7593
+ /**
7594
+ * __useUnshareWorkflowMutation__
7595
+ *
7596
+ * To run a mutation, you first call `useUnshareWorkflowMutation` within a React component and pass it any options that fit your needs.
7597
+ * When your component renders, `useUnshareWorkflowMutation` returns a tuple that includes:
7598
+ * - A mutate function that you can call at any time to execute the mutation
7599
+ * - An object with fields that represent the current status of the mutation's execution
7600
+ *
7601
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
7602
+ *
7603
+ * @example
7604
+ * const [unshareWorkflowMutation, { data, loading, error }] = useUnshareWorkflowMutation({
7605
+ * variables: {
7606
+ * id: // value for 'id'
7607
+ * },
7608
+ * });
7609
+ */
7610
+ export declare function useUnshareWorkflowMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<Types.UnshareWorkflowMutation, Types.UnshareWorkflowMutationVariables>): ApolloReactHooks.useMutation.ResultTuple<Types.UnshareWorkflowMutation, any, Apollo.ApolloCache, undefined>;
7611
+ export type UnshareWorkflowMutationHookResult = ReturnType<typeof useUnshareWorkflowMutation>;
7612
+ export type UnshareWorkflowMutationResult = Apollo.MutationResult<Types.UnshareWorkflowMutation>;
7613
+ export type UnshareWorkflowMutationOptions = Apollo.BaseMutationOptions<Types.UnshareWorkflowMutation, Types.UnshareWorkflowMutationVariables>;
7527
7614
  export declare const GetWebhooksDocument: Apollo.DocumentNode;
7528
7615
  /**
7529
7616
  * __useGetWebhooksQuery__