d0zingcat/alert-message-center
1
0
Fork 0
mirror of https://github.com/d0zingcat/alert-message-center.git synced 2026-05-13 15:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(topic): correct 'make global' API call and improve UI

Browse Source 
- Change 'make global' API method from POST to PUT in AdminView.tsx
- Refine backend update logic for 'isGlobal' to correctly handle boolean values
- Improve 'make global' and 'private' UI with icons and better styling in AdminView.tsx and TopicsView.tsx
This commit is contained in:
d0zingcat
2026-01-23 22:38:16 +08:00
parent 33530f2c27
commit 5dc6fe43d5
3 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/src/api.ts
View File

@@ -180,7 +180,7 @@ api.put(
.update(topics)
.set({
...body,
isGlobal: body.isGlobal ?? (undefined as any),
isGlobal: body.isGlobal !== undefined ? body.isGlobal : undefined,
})
.where(eq(topics.id, id))
.returning();

46
apps/web/src/views/AdminView.tsx
View File

@@ -1,3 +1,4 @@
import { Globe, Lock, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { client } from "../lib/client";
import SystemLoadView from "./SystemLoadView";
@@ -254,7 +255,7 @@ function TopicsManagement() {
const handleToggleGlobal = async (topic: Topic) => {
try {
await client.api.topics[":id"].$post(
await client.api.topics[":id"].$put(
{
param: { id: topic.id },
json: { isGlobal: !topic.isGlobal },
@@ -302,10 +303,16 @@ function TopicsManagement() {
<div className="text-sm font-medium text-gray-900">
{topic.name}
</div>
{topic.isGlobal && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200">
{topic.isGlobal ? (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200 uppercase tracking-tight">
<Globe className="w-2.5 h-2.5 mr-1" />
Global
</span>
) : (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-gray-100 text-gray-600 border border-gray-200 uppercase tracking-tight">
<Lock className="w-2.5 h-2.5 mr-1" />
Private
</span>
)}
</div>
<div className="text-sm text-gray-500 font-mono">
@@ -335,24 +342,35 @@ function TopicsManagement() {
{topic.approver?.name || "-"}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div className="flex justify-end space-x-3">
<div className="flex justify-end space-x-2">
<button
type="button"
onClick={() => handleToggleGlobal(topic)}
className={`${
className={`inline-flex items-center px-3 py-1 rounded-md text-xs font-medium transition-colors border ${
topic.isGlobal
? "text-purple-600 hover:text-purple-900"
: "text-gray-600 hover:text-gray-900"
? "bg-purple-50 text-purple-700 border-purple-200 hover:bg-purple-100"
: "bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100"
}`}
title={topic.isGlobal ? "Disable Global" : "Enable Global"}
>
{topic.isGlobal ? "Make Private" : "Make Global"}
{topic.isGlobal ? (
<>
<Lock className="w-3 h-3 mr-1" />
Make Private
</>
) : (
<>
<Globe className="w-3 h-3 mr-1" />
Make Global
</>
)}
</button>
<button
type="button"
onClick={() => handleDelete(topic.id, topic.name)}
className="text-red-600 hover:text-red-900"
className="inline-flex items-center px-3 py-1 rounded-md text-xs font-medium bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 transition-colors"
>
<Trash2 className="w-3 h-3 mr-1" />
Delete
</button>
</div>
@@ -446,10 +464,16 @@ function TopicRequestsList() {
<div>
<div className="flex items-center">
<p className="font-medium text-gray-900">{req.name}</p>
{req.isGlobal && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200">
{req.isGlobal ? (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200 uppercase tracking-tight">
<Globe className="w-2.5 h-2.5 mr-1" />
Global
</span>
) : (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-gray-100 text-gray-600 border border-gray-200 uppercase tracking-tight">
<Lock className="w-2.5 h-2.5 mr-1" />
Private
</span>
)}
</div>
<p className="text-sm text-gray-500">

40
apps/web/src/views/TopicsView.tsx
View File

@@ -1,6 +1,8 @@
import {
Check,
Copy,
Globe,
Lock,
Plus,
Settings,
ShieldCheck,
@@ -434,12 +436,18 @@ export default function TopicsView() {
<div className="flex items-center justify-between">
<div className="flex-1">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">
<p className="text-sm font-medium text-indigo-600 truncate flex items-center">
{topic.name}
{topic.isGlobal && (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200">
{topic.isGlobal ? (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-purple-100 text-purple-700 border border-purple-200 uppercase tracking-tight">
<Globe className="w-2.5 h-2.5 mr-1" />
Global
</span>
) : (
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-gray-100 text-gray-600 border border-gray-200 uppercase tracking-tight">
<Lock className="w-2.5 h-2.5 mr-1" />
Private
</span>
)}
</p>
<div className="flex items-center space-x-2">
@@ -561,11 +569,17 @@ export default function TopicsView() {
</div>
{topic.isGlobal && (
<div className="bg-purple-50 p-2 rounded border border-purple-100">
<div className="flex justify-between items-center">
<span className="text-xs font-semibold text-purple-600 uppercase tracking-wider">
Global Webhook (No Token Required)
</span>
<div className="bg-purple-50/50 p-3 rounded-lg border border-purple-100 shadow-sm relative overflow-hidden group">
<div className="absolute top-0 right-0 p-1 opacity-10 group-hover:opacity-20 transition-opacity">
<Globe className="w-12 h-12 text-purple-600" />
</div>
<div className="flex justify-between items-center mb-1.5">
<div className="flex items-center">
<Globe className="w-3.5 h-3.5 mr-1.5 text-purple-500" />
<span className="text-[10px] font-bold text-purple-600 uppercase tracking-widest">
Global Webhook (Public)
</span>
</div>
<button
type="button"
onClick={() =>
@@ -574,12 +588,12 @@ export default function TopicsView() {
`${topic.id}-global`,
)
}
className="text-purple-600 hover:text-purple-800 flex items-center text-xs font-medium"
className="text-purple-600 hover:text-purple-800 flex items-center text-xs font-semibold bg-white px-2 py-0.5 rounded border border-purple-200 shadow-sm transition-all hover:shadow hover:translate-y-[-1px]"
>
{copiedId === `${topic.id}-global` ? (
<>
<Check className="w-3 h-3 mr-1" />
Copied!
Copied
</>
) : (
<>
@@ -589,9 +603,13 @@ export default function TopicsView() {
)}
</button>
</div>
<div className="mt-1 text-xs font-mono text-purple-700 break-all select-all">
<div className="text-[11px] font-mono text-purple-800 break-all select-all bg-white/60 p-1.5 rounded border border-purple-100/50 leading-relaxed">
{getGlobalWebhookUrl(topic.slug)}
</div>
<p className="mt-1.5 text-[10px] text-purple-500 italic">
* Global topics can receive alerts without a
personal token.
</p>
</div>
)}
</div>