1244 lines
64 KiB
Vue
1244 lines
64 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head, Link } from '@inertiajs/vue3';
|
|
import { computed, 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 } from '@/routes/projects/index';
|
|
import { index as boardIndex } from '@/routes/projects/board';
|
|
import {
|
|
board as boardSettings,
|
|
general as generalSettings,
|
|
metadata as metadataSettings,
|
|
notifications as notificationSettings,
|
|
repositories as repositorySettings,
|
|
} from '@/routes/projects/settings';
|
|
import type {
|
|
BreadcrumbItem,
|
|
NotificationFilterFormState,
|
|
NotificationFilterPayload,
|
|
ProjectNotificationSettingsPageProps,
|
|
} from '@/types';
|
|
import type { NotificationActionFilterModel } from '@/types/models/notification-action-filter-model';
|
|
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 defaultFilterAttribute = props.filterAttributeOptions[0]?.value ?? '';
|
|
const defaultFilterOperator =
|
|
props.filterOperatorOptions.find((option) => option.value === 'equals')
|
|
?.value ??
|
|
props.filterOperatorOptions[0]?.value ??
|
|
'';
|
|
|
|
const createChannelState = reactive<{ value: string }>({
|
|
value: defaultCreateChannel,
|
|
});
|
|
const createFilterState = reactive<{ filters: NotificationFilterFormState[] }>({
|
|
filters: [],
|
|
});
|
|
const editChannelState = reactive<Record<number, string>>({});
|
|
const editFilterState = reactive<Record<number, NotificationFilterFormState[]>>(
|
|
{},
|
|
);
|
|
const timestampFormatter = new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
});
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Projects',
|
|
href: index(),
|
|
},
|
|
{
|
|
title: props.project.name,
|
|
href: boardIndex(props.project.id),
|
|
},
|
|
{
|
|
title: 'Notification settings',
|
|
href: notificationSettings(props.project.id),
|
|
},
|
|
];
|
|
|
|
let filterStateCounter = 0;
|
|
|
|
const nextFilterStateId = (): string =>
|
|
`notification-filter-${filterStateCounter++}`;
|
|
|
|
const parseInFilterValues = (value: string): string[] =>
|
|
value
|
|
.split(/[\n,]/)
|
|
.map((entry) => entry.trim())
|
|
.filter((entry) => entry.length > 0);
|
|
|
|
const supportsFilterValue = (operator: string): boolean =>
|
|
!['exists', 'not_exists'].includes(operator);
|
|
|
|
const supportsArrayFilterValue = (operator: string): boolean =>
|
|
operator === 'in';
|
|
|
|
const createFilter = (): NotificationFilterFormState => ({
|
|
attribute: defaultFilterAttribute,
|
|
id: nextFilterStateId(),
|
|
operator: defaultFilterOperator,
|
|
value: '',
|
|
});
|
|
|
|
const toFilterFormState = (
|
|
filter: NotificationActionFilterModel,
|
|
): NotificationFilterFormState => ({
|
|
attribute: filter.attribute,
|
|
id: nextFilterStateId(),
|
|
operator: filter.operator,
|
|
value: Array.isArray(filter.value)
|
|
? filter.value.join(', ')
|
|
: (filter.value ?? ''),
|
|
});
|
|
|
|
const serializeFilters = (
|
|
filters: NotificationFilterFormState[],
|
|
): NotificationFilterPayload[] =>
|
|
filters.map((filter) => ({
|
|
attribute: filter.attribute,
|
|
operator: filter.operator,
|
|
value: supportsArrayFilterValue(filter.operator)
|
|
? parseInFilterValues(filter.value)
|
|
: supportsFilterValue(filter.operator)
|
|
? filter.value.trim()
|
|
: null,
|
|
}));
|
|
|
|
const notificationFilterError = (
|
|
errors: Record<string, string>,
|
|
): string | undefined => {
|
|
if (errors.filters) {
|
|
return errors.filters;
|
|
}
|
|
|
|
const nestedErrorKey = Object.keys(errors).find((key) =>
|
|
key.startsWith('filters.'),
|
|
);
|
|
|
|
return nestedErrorKey === undefined ? undefined : errors[nestedErrorKey];
|
|
};
|
|
|
|
const addCreateFilter = (): void => {
|
|
createFilterState.filters.push(createFilter());
|
|
};
|
|
|
|
const removeCreateFilter = (index: number): void => {
|
|
createFilterState.filters.splice(index, 1);
|
|
};
|
|
|
|
const resetCreateFilters = (): void => {
|
|
createFilterState.filters = [];
|
|
};
|
|
|
|
const editFilters = (
|
|
notificationActionId: number,
|
|
): NotificationFilterFormState[] => editFilterState[notificationActionId] ?? [];
|
|
|
|
const addEditFilter = (notificationActionId: number): void => {
|
|
editFilterState[notificationActionId] = [
|
|
...editFilters(notificationActionId),
|
|
createFilter(),
|
|
];
|
|
};
|
|
|
|
const removeEditFilter = (
|
|
notificationActionId: number,
|
|
index: number,
|
|
): void => {
|
|
editFilterState[notificationActionId] = editFilters(
|
|
notificationActionId,
|
|
).filter((_, candidateIndex) => candidateIndex !== index);
|
|
};
|
|
|
|
const createSerializedFilters = computed<string>(() =>
|
|
JSON.stringify(serializeFilters(createFilterState.filters)),
|
|
);
|
|
|
|
const editSerializedFilters = (notificationActionId: number): string =>
|
|
JSON.stringify(serializeFilters(editFilters(notificationActionId)));
|
|
|
|
props.notificationActions.forEach((notificationAction) => {
|
|
editChannelState[notificationAction.id] = notificationAction.channel;
|
|
editFilterState[notificationAction.id] = (
|
|
notificationAction.filters ?? []
|
|
).map(toFilterFormState);
|
|
});
|
|
|
|
const selectedChannel = (notificationAction: NotificationActionModel): string =>
|
|
editChannelState[notificationAction.id] ?? notificationAction.channel;
|
|
|
|
const notificationActionAllowedMentions = (
|
|
notificationAction: NotificationActionModel,
|
|
): string[] => {
|
|
const allowedMentions =
|
|
notificationAction.channel_configuration['allowed_mentions'];
|
|
|
|
if (!Array.isArray(allowedMentions)) {
|
|
return [];
|
|
}
|
|
|
|
return allowedMentions
|
|
.filter(
|
|
(allowedMention): allowedMention is string =>
|
|
typeof allowedMention === 'string',
|
|
)
|
|
.map((allowedMention) => allowedMention.trim().toLowerCase())
|
|
.filter((allowedMention) => allowedMention !== '');
|
|
};
|
|
|
|
const allowedMentionsError = (
|
|
errors: Record<string, string>,
|
|
): string | undefined => {
|
|
const generalError = errors['channel_configuration.allowed_mentions'];
|
|
|
|
if (generalError !== undefined) {
|
|
return generalError;
|
|
}
|
|
|
|
const itemErrorKey = Object.keys(errors).find((key) =>
|
|
key.startsWith('channel_configuration.allowed_mentions.'),
|
|
);
|
|
|
|
return itemErrorKey === undefined ? undefined : errors[itemErrorKey];
|
|
};
|
|
|
|
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>
|
|
<component
|
|
:is="embedded ? 'div' : AppLayout"
|
|
v-bind="embedded ? {} : { breadcrumbs, project }"
|
|
>
|
|
<Head
|
|
v-if="!embedded"
|
|
:title="`${project.name} notification settings`"
|
|
/>
|
|
|
|
<div :class="embedded ? 'space-y-6' : 'app-page'">
|
|
<div
|
|
v-if="!embedded"
|
|
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 events."
|
|
/>
|
|
</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="boardIndex(project.id)"
|
|
>Back to project</Link
|
|
>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!embedded && status" class="status-success">
|
|
{{ status }}
|
|
</div>
|
|
|
|
<Card v-if="templateState?.inheritsFromTemplate">
|
|
<CardHeader>
|
|
<CardTitle>
|
|
Template inheritance: {{ templateState.templateName }}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Notification rules can remain inherited from the
|
|
template or diverge here as project-level overrides.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="flex flex-wrap gap-2">
|
|
<Badge
|
|
v-for="area in templateState.inheritedAreas"
|
|
:key="`inherited-${area.value}`"
|
|
variant="outline"
|
|
>
|
|
{{ area.label }} · inherited
|
|
</Badge>
|
|
<Badge
|
|
v-for="area in templateState.overriddenAreas"
|
|
:key="`overridden-${area.value}`"
|
|
>
|
|
{{ area.label }} · overridden
|
|
</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<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
|
|
supported ticket events.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<Form
|
|
v-bind="
|
|
ProjectNotificationSettingsController.store.form(
|
|
project.id,
|
|
)
|
|
"
|
|
error-bag="createNotificationAction"
|
|
reset-on-success
|
|
@success="
|
|
createChannelState.value =
|
|
defaultCreateChannel;
|
|
resetCreateFilters();
|
|
"
|
|
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>Allowed mentions</Label>
|
|
<div
|
|
:class="[
|
|
'grid gap-2',
|
|
createChannelState.value !==
|
|
'discord'
|
|
? 'hidden'
|
|
: '',
|
|
]"
|
|
>
|
|
<label
|
|
v-for="allowedMentionOption in discordAllowedMentionOptions"
|
|
:key="`create-allowed-mention-${allowedMentionOption.value}`"
|
|
class="border-border flex items-center gap-2 rounded-lg border px-3 py-2"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name="channel_configuration[allowed_mentions][]"
|
|
:value="
|
|
allowedMentionOption.value
|
|
"
|
|
:disabled="
|
|
createChannelState.value !==
|
|
'discord'
|
|
"
|
|
class="border-input text-primary focus:ring-ring size-4 rounded"
|
|
/>
|
|
<span>
|
|
{{ allowedMentionOption.label }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<p class="text-muted-foreground text-sm">
|
|
{{
|
|
createChannelState.value ===
|
|
'discord'
|
|
? 'Pick which Discord mention types are allowed. Leave all unchecked to keep mentions fully disabled.'
|
|
: 'Allowed mentions are only used when the channel is Discord.'
|
|
}}
|
|
</p>
|
|
<InputError
|
|
:message="allowedMentionsError(errors)"
|
|
/>
|
|
</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 in $project_name ($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="space-y-3 rounded-lg border p-4">
|
|
<div class="space-y-1">
|
|
<Label>Notification filters</Label>
|
|
<p
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
Optional rules that must match the
|
|
ticket payload before this
|
|
notification is dispatched.
|
|
</p>
|
|
</div>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="filters"
|
|
:value="createSerializedFilters"
|
|
/>
|
|
|
|
<div
|
|
v-if="
|
|
createFilterState.filters.length ===
|
|
0
|
|
"
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
No filters configured. This action runs
|
|
for every matching event.
|
|
</div>
|
|
|
|
<div
|
|
v-for="(
|
|
filter, filterIndex
|
|
) in createFilterState.filters"
|
|
:key="filter.id"
|
|
class="grid gap-3 rounded-md border p-3"
|
|
>
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="`create-filter-attribute-${filter.id}`"
|
|
>
|
|
Attribute
|
|
</Label>
|
|
<select
|
|
:id="`create-filter-attribute-${filter.id}`"
|
|
v-model="filter.attribute"
|
|
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="filterAttributeOption in filterAttributeOptions"
|
|
:key="
|
|
filterAttributeOption.value
|
|
"
|
|
:value="
|
|
filterAttributeOption.value
|
|
"
|
|
>
|
|
{{
|
|
filterAttributeOption.label
|
|
}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="`create-filter-operator-${filter.id}`"
|
|
>
|
|
Operator
|
|
</Label>
|
|
<select
|
|
:id="`create-filter-operator-${filter.id}`"
|
|
v-model="filter.operator"
|
|
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="filterOperatorOption in filterOperatorOptions"
|
|
:key="
|
|
filterOperatorOption.value
|
|
"
|
|
:value="
|
|
filterOperatorOption.value
|
|
"
|
|
>
|
|
{{
|
|
filterOperatorOption.label
|
|
}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
supportsFilterValue(
|
|
filter.operator,
|
|
)
|
|
"
|
|
class="grid gap-2"
|
|
>
|
|
<Label
|
|
:for="`create-filter-value-${filter.id}`"
|
|
>
|
|
{{
|
|
supportsArrayFilterValue(
|
|
filter.operator,
|
|
)
|
|
? 'Values (comma or newline separated)'
|
|
: 'Value'
|
|
}}
|
|
</Label>
|
|
<textarea
|
|
:id="`create-filter-value-${filter.id}`"
|
|
v-model="filter.value"
|
|
rows="2"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-20 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
:placeholder="
|
|
supportsArrayFilterValue(
|
|
filter.operator,
|
|
)
|
|
? 'CORE-1, CORE-2'
|
|
: 'Doing'
|
|
"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
@click="
|
|
removeCreateFilter(
|
|
filterIndex,
|
|
)
|
|
"
|
|
>
|
|
Remove filter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-start">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
@click="addCreateFilter"
|
|
>
|
|
Add filter
|
|
</Button>
|
|
</div>
|
|
|
|
<InputError
|
|
:message="
|
|
notificationFilterError(errors)
|
|
"
|
|
/>
|
|
</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>Allowed mentions</Label>
|
|
<div
|
|
:class="[
|
|
'grid gap-2',
|
|
selectedChannel(
|
|
notificationAction,
|
|
) !== 'discord'
|
|
? 'hidden'
|
|
: '',
|
|
]"
|
|
>
|
|
<label
|
|
v-for="allowedMentionOption in discordAllowedMentionOptions"
|
|
:key="`notification-allowed-mention-${notificationAction.id}-${allowedMentionOption.value}`"
|
|
class="border-border flex items-center gap-2 rounded-lg border px-3 py-2"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
name="channel_configuration[allowed_mentions][]"
|
|
:value="
|
|
allowedMentionOption.value
|
|
"
|
|
:default-checked="
|
|
notificationActionAllowedMentions(
|
|
notificationAction,
|
|
).includes(
|
|
allowedMentionOption.value,
|
|
)
|
|
"
|
|
:disabled="
|
|
selectedChannel(
|
|
notificationAction,
|
|
) !== 'discord'
|
|
"
|
|
class="border-input text-primary focus:ring-ring size-4 rounded"
|
|
/>
|
|
<span>
|
|
{{ allowedMentionOption.label }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<p class="text-muted-foreground text-sm">
|
|
{{
|
|
selectedChannel(
|
|
notificationAction,
|
|
) === 'discord'
|
|
? 'Pick which Discord mention types are allowed. Leave all unchecked to keep mentions fully disabled.'
|
|
: 'Allowed mentions are only used when the channel is Discord.'
|
|
}}
|
|
</p>
|
|
<InputError
|
|
:message="allowedMentionsError(errors)"
|
|
/>
|
|
</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"
|
|
: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 in $project_name ($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="space-y-3 rounded-lg border p-4">
|
|
<div class="space-y-1">
|
|
<Label>Notification filters</Label>
|
|
<p
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
Optional rules that must all match
|
|
this event payload before delivery.
|
|
</p>
|
|
</div>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="filters"
|
|
:value="
|
|
editSerializedFilters(
|
|
notificationAction.id,
|
|
)
|
|
"
|
|
/>
|
|
|
|
<div
|
|
v-if="
|
|
editFilters(notificationAction.id)
|
|
.length === 0
|
|
"
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
No filters configured. This action runs
|
|
for every matching event.
|
|
</div>
|
|
|
|
<div
|
|
v-for="(
|
|
filter, filterIndex
|
|
) in editFilters(notificationAction.id)"
|
|
:key="filter.id"
|
|
class="grid gap-3 rounded-md border p-3"
|
|
>
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="`notification-filter-attribute-${notificationAction.id}-${filter.id}`"
|
|
>
|
|
Attribute
|
|
</Label>
|
|
<select
|
|
:id="`notification-filter-attribute-${notificationAction.id}-${filter.id}`"
|
|
v-model="filter.attribute"
|
|
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="filterAttributeOption in filterAttributeOptions"
|
|
:key="
|
|
filterAttributeOption.value
|
|
"
|
|
:value="
|
|
filterAttributeOption.value
|
|
"
|
|
>
|
|
{{
|
|
filterAttributeOption.label
|
|
}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<Label
|
|
:for="`notification-filter-operator-${notificationAction.id}-${filter.id}`"
|
|
>
|
|
Operator
|
|
</Label>
|
|
<select
|
|
:id="`notification-filter-operator-${notificationAction.id}-${filter.id}`"
|
|
v-model="filter.operator"
|
|
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="filterOperatorOption in filterOperatorOptions"
|
|
:key="
|
|
filterOperatorOption.value
|
|
"
|
|
:value="
|
|
filterOperatorOption.value
|
|
"
|
|
>
|
|
{{
|
|
filterOperatorOption.label
|
|
}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
supportsFilterValue(
|
|
filter.operator,
|
|
)
|
|
"
|
|
class="grid gap-2"
|
|
>
|
|
<Label
|
|
:for="`notification-filter-value-${notificationAction.id}-${filter.id}`"
|
|
>
|
|
{{
|
|
supportsArrayFilterValue(
|
|
filter.operator,
|
|
)
|
|
? 'Values (comma or newline separated)'
|
|
: 'Value'
|
|
}}
|
|
</Label>
|
|
<textarea
|
|
:id="`notification-filter-value-${notificationAction.id}-${filter.id}`"
|
|
v-model="filter.value"
|
|
rows="2"
|
|
class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-20 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
|
|
:placeholder="
|
|
supportsArrayFilterValue(
|
|
filter.operator,
|
|
)
|
|
? 'CORE-1, CORE-2'
|
|
: 'Doing'
|
|
"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
@click="
|
|
removeEditFilter(
|
|
notificationAction.id,
|
|
filterIndex,
|
|
)
|
|
"
|
|
>
|
|
Remove filter
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-start">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
@click="
|
|
addEditFilter(
|
|
notificationAction.id,
|
|
)
|
|
"
|
|
>
|
|
Add filter
|
|
</Button>
|
|
</div>
|
|
|
|
<InputError
|
|
:message="
|
|
notificationFilterError(errors)
|
|
"
|
|
/>
|
|
</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>
|
|
</component>
|
|
</template>
|