641 lines
32 KiB
Vue
641 lines
32 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head, Link } from '@inertiajs/vue3';
|
|
import { reactive } from 'vue';
|
|
import ProjectNotificationSettingsController from '@/actions/App/Http/Controllers/ProjectNotificationSettingsController';
|
|
import Heading from '@/components/Heading.vue';
|
|
import InputError from '@/components/InputError.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { index, show } from '@/routes/projects/index';
|
|
import {
|
|
board as boardSettings,
|
|
general as generalSettings,
|
|
metadata as metadataSettings,
|
|
notifications as notificationSettings,
|
|
repositories as repositorySettings,
|
|
} from '@/routes/projects/settings';
|
|
import type {
|
|
BreadcrumbItem,
|
|
ProjectNotificationSettingsPageProps,
|
|
} from '@/types';
|
|
import type { NotificationActionModel } from '@/types/models/notification-action-model';
|
|
|
|
const props = defineProps<ProjectNotificationSettingsPageProps>();
|
|
|
|
const defaultCreateChannel =
|
|
props.channelOptions.find((option) => option.value === 'webhook')?.value ??
|
|
props.channelOptions[0]?.value ??
|
|
'';
|
|
const createChannelState = reactive<{ value: string }>({
|
|
value: defaultCreateChannel,
|
|
});
|
|
const editChannelState = reactive<Record<number, string>>({});
|
|
const timestampFormatter = new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
});
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Projects',
|
|
href: index(),
|
|
},
|
|
{
|
|
title: props.project.name,
|
|
href: show(props.project.id),
|
|
},
|
|
{
|
|
title: 'Notification settings',
|
|
href: notificationSettings(props.project.id),
|
|
},
|
|
];
|
|
|
|
props.notificationActions.forEach((notificationAction) => {
|
|
editChannelState[notificationAction.id] = notificationAction.channel;
|
|
});
|
|
|
|
const selectedChannel = (notificationAction: NotificationActionModel): string =>
|
|
editChannelState[notificationAction.id] ?? notificationAction.channel;
|
|
|
|
const notificationActionTimestamp = (
|
|
notificationAction: NotificationActionModel,
|
|
): string => {
|
|
const createdAt = notificationAction.created_at;
|
|
const updatedAt = notificationAction.updated_at ?? createdAt;
|
|
|
|
if (updatedAt === null) {
|
|
return 'No saved changes yet';
|
|
}
|
|
|
|
if (createdAt !== null && createdAt !== updatedAt) {
|
|
return `Updated ${timestampFormatter.format(new Date(updatedAt))}`;
|
|
}
|
|
|
|
return `Created ${timestampFormatter.format(new Date(updatedAt))}`;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head :title="`${project.name} notification settings`" />
|
|
|
|
<div class="flex flex-1 flex-col gap-6 p-4">
|
|
<div
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<div class="space-y-3">
|
|
<Badge variant="outline" class="px-3 py-1">
|
|
{{ project.key }}
|
|
</Badge>
|
|
<Heading
|
|
:title="`${project.name} notification settings`"
|
|
description="Configure project-scoped webhook and Discord notification actions for ticket status changes."
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<Button
|
|
v-if="$page.props.auth.permissions.globalAdmin"
|
|
as-child
|
|
variant="outline"
|
|
>
|
|
<Link :href="generalSettings(project.id)">
|
|
General settings
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button as-child variant="outline">
|
|
<Link :href="boardSettings(project.id)">
|
|
Board settings
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button as-child variant="outline">
|
|
<Link :href="metadataSettings(project.id)">
|
|
Ticket settings
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button as-child variant="outline">
|
|
<Link :href="repositorySettings(project.id)">
|
|
Repository settings
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button as-child variant="outline">
|
|
<Link :href="show(project.id)">Back to project</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="status"
|
|
class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
|
|
>
|
|
{{ status }}
|
|
</div>
|
|
|
|
<div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
|
|
<div class="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Create notification</CardTitle>
|
|
<CardDescription>
|
|
Add a project-scoped notification action for
|
|
the supported ticket status change event.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<Form
|
|
v-bind="
|
|
ProjectNotificationSettingsController.store.form(
|
|
project.id,
|
|
)
|
|
"
|
|
error-bag="createNotificationAction"
|
|
reset-on-success
|
|
@success="
|
|
createChannelState.value =
|
|
defaultCreateChannel
|
|
"
|
|
class="space-y-4"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label for="create-notification-name">
|
|
Name
|
|
</Label>
|
|
<Input
|
|
id="create-notification-name"
|
|
name="name"
|
|
placeholder="Discord alerts"
|
|
/>
|
|
<InputError :message="errors.name" />
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="grid gap-2">
|
|
<Label
|
|
for="create-notification-event-type"
|
|
>
|
|
Event type
|
|
</Label>
|
|
<select
|
|
id="create-notification-event-type"
|
|
name="event_type"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
>
|
|
<option
|
|
v-for="eventTypeOption in eventTypeOptions"
|
|
:key="eventTypeOption.value"
|
|
:value="eventTypeOption.value"
|
|
>
|
|
{{ eventTypeOption.label }}
|
|
</option>
|
|
</select>
|
|
<InputError
|
|
:message="errors.event_type"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="create-notification-channel">
|
|
Channel
|
|
</Label>
|
|
<select
|
|
id="create-notification-channel"
|
|
name="channel"
|
|
v-model="createChannelState.value"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
>
|
|
<option
|
|
v-for="channelOption in channelOptions"
|
|
:key="channelOption.value"
|
|
:value="channelOption.value"
|
|
>
|
|
{{ channelOption.label }}
|
|
</option>
|
|
</select>
|
|
<InputError :message="errors.channel" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label for="create-notification-delivery-url">
|
|
Delivery URL
|
|
</Label>
|
|
<Input
|
|
id="create-notification-delivery-url"
|
|
name="delivery_url"
|
|
type="url"
|
|
placeholder="https://hooks.example.test/kanbangit/secret-token"
|
|
/>
|
|
<p class="text-muted-foreground text-sm">
|
|
Secret URLs are stored encrypted and are
|
|
never rendered back to the browser after
|
|
save.
|
|
</p>
|
|
<InputError :message="errors.delivery_url" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
for="create-notification-message-template"
|
|
>
|
|
Discord message template
|
|
</Label>
|
|
<textarea
|
|
id="create-notification-message-template"
|
|
name="message_template"
|
|
rows="4"
|
|
:disabled="
|
|
createChannelState.value !==
|
|
'discord'
|
|
"
|
|
:class="[
|
|
'border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-28 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]',
|
|
createChannelState.value !==
|
|
'discord'
|
|
? 'hidden'
|
|
: 'block',
|
|
]"
|
|
placeholder="$ticket_key moved from $status_from to $status_to by $actor_name: $url"
|
|
/>
|
|
<p class="text-muted-foreground text-sm">
|
|
{{
|
|
createChannelState.value ===
|
|
'discord'
|
|
? 'Available for Discord actions only. Use the fixed variables listed below.'
|
|
: 'Discord message templates are only used when the channel is Discord.'
|
|
}}
|
|
</p>
|
|
<InputError
|
|
:message="errors.message_template"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
for="create-notification-enabled"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="enabled"
|
|
value="0"
|
|
/>
|
|
<input
|
|
id="create-notification-enabled"
|
|
type="checkbox"
|
|
name="enabled"
|
|
value="1"
|
|
checked
|
|
class="border-input text-primary focus:ring-ring size-4 rounded"
|
|
/>
|
|
<span>Enabled immediately</span>
|
|
</Label>
|
|
<InputError :message="errors.enabled" />
|
|
</div>
|
|
|
|
<Button type="submit" :disabled="processing">
|
|
Save notification
|
|
</Button>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Template variables</CardTitle>
|
|
<CardDescription>
|
|
Discord templates can reference the following
|
|
fixed variables.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-3">
|
|
<div
|
|
v-for="templateVariable in templateVariables"
|
|
:key="templateVariable.value"
|
|
class="border-border/70 rounded-xl border p-4"
|
|
>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<Badge variant="secondary">
|
|
{{ templateVariable.value }}
|
|
</Badge>
|
|
</div>
|
|
<p class="text-muted-foreground mt-2 text-sm">
|
|
{{ templateVariable.description }}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<Card
|
|
v-if="notificationActions.length === 0"
|
|
class="border-dashed"
|
|
>
|
|
<CardHeader>
|
|
<CardTitle>No notifications configured</CardTitle>
|
|
<CardDescription>
|
|
Create your first webhook or Discord action to
|
|
start sending project notifications later in
|
|
this release.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
<Card
|
|
v-for="notificationAction in notificationActions"
|
|
:key="notificationAction.id"
|
|
>
|
|
<CardHeader
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<div class="space-y-3">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<CardTitle>
|
|
{{ notificationAction.name }}
|
|
</CardTitle>
|
|
<Badge variant="outline">
|
|
{{
|
|
notificationAction.event_type_label
|
|
}}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{{ notificationAction.channel_label }}
|
|
</Badge>
|
|
<Badge
|
|
:variant="
|
|
notificationAction.enabled
|
|
? 'default'
|
|
: 'secondary'
|
|
"
|
|
>
|
|
{{
|
|
notificationAction.enabled
|
|
? 'Enabled'
|
|
: 'Disabled'
|
|
}}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription>
|
|
{{ notificationActionTimestamp(notificationAction) }}
|
|
</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-4">
|
|
<Form
|
|
v-bind="
|
|
ProjectNotificationSettingsController.update.form(
|
|
[project.id, notificationAction.id],
|
|
)
|
|
"
|
|
:error-bag="
|
|
`updateNotificationAction-${notificationAction.id}`
|
|
"
|
|
class="space-y-4"
|
|
v-slot="{ errors, processing }"
|
|
>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-name-${notificationAction.id}`
|
|
"
|
|
>
|
|
Name
|
|
</Label>
|
|
<Input
|
|
:id="
|
|
`notification-name-${notificationAction.id}`
|
|
"
|
|
name="name"
|
|
:default-value="
|
|
notificationAction.name
|
|
"
|
|
/>
|
|
<InputError :message="errors.name" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-delivery-url-${notificationAction.id}`
|
|
"
|
|
>
|
|
Delivery URL
|
|
</Label>
|
|
<Input
|
|
:id="
|
|
`notification-delivery-url-${notificationAction.id}`
|
|
"
|
|
name="delivery_url"
|
|
type="url"
|
|
:placeholder="
|
|
notificationAction.has_delivery_url
|
|
? 'Saved URL stays hidden. Enter a new URL to replace it.'
|
|
: 'https://hooks.example.test/kanbangit/secret-token'
|
|
"
|
|
/>
|
|
<p
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
{{
|
|
notificationAction.has_delivery_url
|
|
? 'A delivery URL is already stored. Leaving this blank keeps the existing secret.'
|
|
: 'No delivery URL is stored yet. Enter a secret URL to enable delivery later.'
|
|
}}
|
|
</p>
|
|
<InputError
|
|
:message="errors.delivery_url"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-event-type-${notificationAction.id}`
|
|
"
|
|
>
|
|
Event type
|
|
</Label>
|
|
<select
|
|
:id="
|
|
`notification-event-type-${notificationAction.id}`
|
|
"
|
|
name="event_type"
|
|
:default-value="
|
|
notificationAction.event_type
|
|
"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
>
|
|
<option
|
|
v-for="eventTypeOption in eventTypeOptions"
|
|
:key="eventTypeOption.value"
|
|
:value="eventTypeOption.value"
|
|
>
|
|
{{ eventTypeOption.label }}
|
|
</option>
|
|
</select>
|
|
<InputError
|
|
:message="errors.event_type"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-channel-${notificationAction.id}`
|
|
"
|
|
>
|
|
Channel
|
|
</Label>
|
|
<select
|
|
:id="
|
|
`notification-channel-${notificationAction.id}`
|
|
"
|
|
name="channel"
|
|
v-model="
|
|
editChannelState[
|
|
notificationAction.id
|
|
]
|
|
"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
>
|
|
<option
|
|
v-for="channelOption in channelOptions"
|
|
:key="channelOption.value"
|
|
:value="channelOption.value"
|
|
>
|
|
{{ channelOption.label }}
|
|
</option>
|
|
</select>
|
|
<InputError :message="errors.channel" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-message-template-${notificationAction.id}`
|
|
"
|
|
>
|
|
Discord message template
|
|
</Label>
|
|
<textarea
|
|
:id="
|
|
`notification-message-template-${notificationAction.id}`
|
|
"
|
|
name="message_template"
|
|
rows="4"
|
|
:default-value="
|
|
notificationAction.message_template ??
|
|
''
|
|
"
|
|
:disabled="
|
|
selectedChannel(notificationAction) !==
|
|
'discord'
|
|
"
|
|
:class="[
|
|
'border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-28 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]',
|
|
selectedChannel(notificationAction) !==
|
|
'discord'
|
|
? 'hidden'
|
|
: 'block',
|
|
]"
|
|
placeholder="$ticket_key moved from $status_from to $status_to by $actor_name: $url"
|
|
/>
|
|
<p class="text-muted-foreground text-sm">
|
|
{{
|
|
selectedChannel(notificationAction) ===
|
|
'discord'
|
|
? 'Available for Discord actions only. Use the fixed variables listed in the sidebar.'
|
|
: 'Discord message templates are only used when the channel is Discord.'
|
|
}}
|
|
</p>
|
|
<InputError
|
|
:message="errors.message_template"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="
|
|
`notification-enabled-${notificationAction.id}`
|
|
"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="enabled"
|
|
value="0"
|
|
/>
|
|
<input
|
|
:id="
|
|
`notification-enabled-${notificationAction.id}`
|
|
"
|
|
type="checkbox"
|
|
name="enabled"
|
|
value="1"
|
|
:default-checked="
|
|
notificationAction.enabled
|
|
"
|
|
class="border-input text-primary focus:ring-ring size-4 rounded"
|
|
/>
|
|
<span>Enabled</span>
|
|
</Label>
|
|
<InputError :message="errors.enabled" />
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
:disabled="processing"
|
|
>
|
|
Save changes
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
|
|
<Form
|
|
v-bind="
|
|
ProjectNotificationSettingsController.destroy.form(
|
|
[project.id, notificationAction.id],
|
|
)
|
|
"
|
|
class="border-t pt-4"
|
|
v-slot="{ processing }"
|
|
>
|
|
<Button
|
|
type="submit"
|
|
variant="destructive"
|
|
:disabled="processing"
|
|
>
|
|
Delete notification
|
|
</Button>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|