toki
3a4e5be1e0
git-subtree-dir: apps/web git-subtree-mainline:9212ed02acgit-subtree-split:5d65cbf2d5
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { PlugZap } from "lucide-react";
|
|
|
|
import type { IntegrationSettings } from "../../api/settings";
|
|
import { testIntegrationPlaceholder } from "../../api/settings";
|
|
import { Button } from "../common/Button";
|
|
|
|
interface IntegrationStatusProps {
|
|
integration: IntegrationSettings;
|
|
}
|
|
|
|
export function IntegrationStatus({ integration }: IntegrationStatusProps) {
|
|
return (
|
|
<div className="integration-row">
|
|
<div>
|
|
<div className="integration-row__title">
|
|
<strong>{integration.name}</strong>
|
|
<span className={`status-pill status-pill--${integration.status}`}>{integration.status}</span>
|
|
</div>
|
|
<p>{integration.endpointLabel}</p>
|
|
{typeof integration.tokenConfigured === "boolean" ? (
|
|
<small>Token configured: {integration.tokenConfigured ? "yes" : "no"}</small>
|
|
) : null}
|
|
</div>
|
|
<div className="integration-row__actions">
|
|
<span className={integration.enabled ? "enabled-label" : "enabled-label is-muted"}>
|
|
{integration.enabled ? "Enabled" : "Disabled"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
icon={<PlugZap size={15} aria-hidden="true" />}
|
|
onClick={() => void testIntegrationPlaceholder(integration.key)}
|
|
>
|
|
Test
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|