mirror of
https://github.com/okieselbach/AutopilotMonitor.git
synced 2026-10-24 12:42:38 +00:00
fix json toggle view alignment
This commit is contained in:
Oliver Kieselbach
@@ -1 +1 @@
|
||||
467
|
||||
469
|
||||
|
||||
@@ -85,10 +85,26 @@ export default function AnalyzeRuleCard({
|
||||
{/* Expanded Details (read-only) */}
|
||||
{isExpanded && !isEditing && (
|
||||
<div className="border-t border-gray-200 p-6 space-y-6">
|
||||
{/* Details / JSON toggle for built-in and community rules */}
|
||||
{!canEdit && (
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1">
|
||||
{/* JSON view (replaces detail view for built-in / community rules) */}
|
||||
{showJson && !canEdit ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(rule), null, 2)}
|
||||
textareaRows={24}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
||||
<span><span className="font-medium text-gray-700">Version:</span> {rule.version}</span>
|
||||
<span><span className="font-medium text-gray-700">Author:</span> {rule.author}</span>
|
||||
<span><span className="font-medium text-gray-700">Trigger:</span> {(rule.trigger || "single").charAt(0).toUpperCase() + (rule.trigger || "single").slice(1)}</span>
|
||||
<span><span className="font-medium text-gray-700">Created:</span> {new Date(rule.createdAt).toLocaleDateString()}</span>
|
||||
<span><span className="font-medium text-gray-700">Updated:</span> {new Date(rule.updatedAt).toLocaleDateString()}</span>
|
||||
<span className="text-xs font-mono text-gray-400 sm:hidden">{rule.ruleId}</span>
|
||||
</div>
|
||||
{/* Details / JSON toggle for built-in and community rules */}
|
||||
{!canEdit && (
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowJson(false)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
@@ -106,24 +122,7 @@ export default function AnalyzeRuleCard({
|
||||
JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* JSON view (replaces detail view for built-in / community rules) */}
|
||||
{showJson && !canEdit ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(rule), null, 2)}
|
||||
textareaRows={24}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
||||
<span><span className="font-medium text-gray-700">Version:</span> {rule.version}</span>
|
||||
<span><span className="font-medium text-gray-700">Author:</span> {rule.author}</span>
|
||||
<span><span className="font-medium text-gray-700">Trigger:</span> {(rule.trigger || "single").charAt(0).toUpperCase() + (rule.trigger || "single").slice(1)}</span>
|
||||
<span><span className="font-medium text-gray-700">Created:</span> {new Date(rule.createdAt).toLocaleDateString()}</span>
|
||||
<span><span className="font-medium text-gray-700">Updated:</span> {new Date(rule.updatedAt).toLocaleDateString()}</span>
|
||||
<span className="text-xs font-mono text-gray-400 sm:hidden">{rule.ruleId}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rule.tags && rule.tags.length > 0 && (
|
||||
|
||||
@@ -165,10 +165,38 @@ export function GatherRuleCard({
|
||||
{/* Expanded Details */}
|
||||
{isExpanded && !isEditing && (
|
||||
<div className="border-t border-gray-200 p-6 space-y-6">
|
||||
{/* Details / JSON toggle for built-in and community rules */}
|
||||
{!canEdit && (
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1">
|
||||
{/* JSON view (replaces detail view for built-in / community rules) */}
|
||||
{showJson && !canEdit ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(rule), null, 2)}
|
||||
textareaRows={20}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{/* Meta Info Row + Details/JSON toggle */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Version:</span> {rule.version}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Author:</span> {rule.author}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Created:</span>{" "}
|
||||
{new Date(rule.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Updated:</span>{" "}
|
||||
{new Date(rule.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-gray-400 sm:hidden">
|
||||
{rule.ruleId}
|
||||
</span>
|
||||
</div>
|
||||
{/* Details / JSON toggle for built-in and community rules */}
|
||||
{!canEdit && (
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowJson(false)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
@@ -186,36 +214,7 @@ export function GatherRuleCard({
|
||||
JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* JSON view (replaces detail view for built-in / community rules) */}
|
||||
{showJson && !canEdit ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(rule), null, 2)}
|
||||
textareaRows={20}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{/* Meta Info Row */}
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Version:</span> {rule.version}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Author:</span> {rule.author}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Created:</span>{" "}
|
||||
{new Date(rule.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">Updated:</span>{" "}
|
||||
{new Date(rule.updatedAt).toLocaleDateString()}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-gray-400 sm:hidden">
|
||||
{rule.ruleId}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
|
||||
@@ -135,9 +135,22 @@ export default function ImePatternCard({
|
||||
{/* Expanded Details (Read-Only) */}
|
||||
{isExpanded && !isEditing && (
|
||||
<div className="border-t border-gray-200 p-6 space-y-6">
|
||||
{/* Details / JSON toggle */}
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1">
|
||||
{/* JSON view (replaces detail view) */}
|
||||
{showJson ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(pattern), null, 2)}
|
||||
textareaRows={15}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{/* Description + Details/JSON toggle */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
{pattern.description ? (
|
||||
<div className="text-sm text-gray-700">
|
||||
{pattern.description}
|
||||
</div>
|
||||
) : <div />}
|
||||
<div className="flex items-center bg-gray-100 rounded-lg p-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowJson(false)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
@@ -157,20 +170,6 @@ export default function ImePatternCard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* JSON view (replaces detail view) */}
|
||||
{showJson ? (
|
||||
<ReadOnlyJsonView
|
||||
jsonText={JSON.stringify(stripInternalFields(pattern), null, 2)}
|
||||
textareaRows={15}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{pattern.description && (
|
||||
<div className="text-sm text-gray-700">
|
||||
{pattern.description}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-2">Regex Pattern</h4>
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user