feat: add json files for status badges

This commit is contained in:
Anish Sarkar 2026-01-11 16:53:54 +05:30
parent 9fa0e17588
commit 1e97745903
5 changed files with 57 additions and 66 deletions

View file

@ -5,7 +5,6 @@ import { differenceInDays, differenceInMinutes, format, isToday, isYesterday } f
import { FileText, Loader2 } from "lucide-react";
import type { FC } from "react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { LogActiveTask } from "@/contracts/types/log.types";
import { cn } from "@/lib/utils";
@ -151,29 +150,21 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
return description;
};
// Determine if we should show tooltip on the whole card (for disabled/maintenance)
const shouldShowCardTooltip =
statusMessage && (status.status === "disabled" || status.status === "maintenance");
const cardContent = (
<div
className={cn(
"group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border",
!isEnabled
? "opacity-50 border-border/50 bg-slate-400/5 dark:bg-white/5 cursor-not-allowed"
: status.status === "warning"
? "border-yellow-500/30 bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
: "border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
status.status === "warning"
? "border-yellow-500/30 bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
: "border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
)}
>
<div
className={cn(
"flex h-12 w-12 items-center justify-center rounded-lg transition-colors shrink-0 border",
!isEnabled
? "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5 opacity-50"
: status.status === "warning"
? "bg-yellow-500/10 border-yellow-500/20 bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
status.status === "warning"
? "bg-yellow-500/10 border-yellow-500/20 bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
)}
>
{connectorType ? (
@ -239,17 +230,5 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
</div>
);
// Wrap card in tooltip for disabled/maintenance status
if (shouldShowCardTooltip) {
return (
<Tooltip>
<TooltipTrigger asChild>{cardContent}</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs">
{statusMessage}
</TooltipContent>
</Tooltip>
);
}
return cardContent;
};

View file

@ -44,7 +44,7 @@ export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({
case "deprecated":
return {
icon: AlertTriangle,
className: "text-amber-500 dark:text-amber-400",
className: "ext-slate-500 dark:text-slate-400",
defaultTitle: "Deprecated",
};
default:
@ -56,12 +56,13 @@ export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({
if (!config) return null;
const Icon = config.icon;
// Only show statusMessage in tooltip for warning status
// For disabled/maintenance, the card tooltip will show the statusMessage
const shouldUseTooltip = status === "warning" && statusMessage;
// Show statusMessage in tooltip for warning, deprecated, disabled, and maintenance statuses
const shouldUseTooltip =
(status === "warning" || status === "deprecated" || status === "disabled" || status === "maintenance") &&
statusMessage;
const tooltipTitle = shouldUseTooltip ? statusMessage : config.defaultTitle;
// Use Tooltip component for warning status with statusMessage, native title for others
// Use Tooltip component for statuses with statusMessage, native title for others
if (shouldUseTooltip) {
return (
<Tooltip>

View file

@ -0,0 +1,29 @@
{
"connectorStatuses": {
"SLACK_CONNECTOR": {
"enabled": false,
"status": "disabled",
"statusMessage": "Unavailable due to API changes"
},
"NOTION_CONNECTOR": {
"enabled": true,
"status": "warning",
"statusMessage": "Rate limits may apply"
},
"TEAMS_CONNECTOR": {
"enabled": false,
"status": "maintenance",
"statusMessage": "Temporarily unavailable for maintenance"
},
"JIRA_CONNECTOR": {
"enabled": false,
"status": "deprecated",
"statusMessage": "Deprecated"
}
},
"globalSettings": {
"showWarnings": true,
"allowManualOverride": false
}
}

View file

@ -0,0 +1,10 @@
{
"connectorStatuses": {
},
"globalSettings": {
"showWarnings": true,
"allowManualOverride": false
}
}

View file

@ -1,11 +1,13 @@
/**
* Connector Status Configuration
*
* This configuration allows managing connector statuses.
* Statuses control disabling connectors and displaying status messages.
* Manages connector statuses (disable/enable, status messages). Edit connector-status-config.json to configure.
* Valid status values: "active", "warning", "disabled", "deprecated", "maintenance".
* Unlisted connectors default to "active" and enabled. See connector-status-config.example.json for reference.
*/
import { z } from "zod";
import rawConnectorStatusConfigData from "./connector-status-config.json";
// Zod schemas for runtime validation and type safety
export const connectorStatusSchema = z.enum([
@ -39,40 +41,10 @@ export type ConnectorStatusMap = z.infer<typeof connectorStatusMapSchema>;
export type ConnectorStatusConfigFile = z.infer<typeof connectorStatusConfigFileSchema>;
/**
* Default status configuration for all connectors
* Connectors not listed here default to "active" and enabled
*
* This config is validated at runtime using the Zod schema above
* Validated at runtime via Zod schema; invalid JSON throws at module load time.
*/
const rawConnectorStatusConfig = {
connectorStatuses: {
// Example configs to use
// SLACK_CONNECTOR: {
// enabled: false,
// status: "disabled",
// statusMessage: "Unavailable due to API changes",
// },
// NOTION_CONNECTOR: {
// enabled: true,
// status: "warning",
// statusMessage: "Rate limits may apply",
// },
// TEAMS_CONNECTOR: {
// enabled: false,
// status: "maintenance",
// statusMessage: "Temporarily unavailable for maintenance",
// },
},
globalSettings: {
showWarnings: true,
allowManualOverride: false,
},
};
// Validate the config at module load time (development only)
// In production, this will throw if config is invalid
export const connectorStatusConfig: ConnectorStatusConfigFile =
connectorStatusConfigFileSchema.parse(rawConnectorStatusConfig);
connectorStatusConfigFileSchema.parse(rawConnectorStatusConfigData);
/**
* Get default status config for a connector (when not in config file)