bert.hausmans/cmdb-insight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix TypeScript error: Type 'unknown' not assignable to ReactNode in ObjectDetailModal

Browse Source 
- Added explicit React import
- Converted complex conditional rendering to IIFE for proper type inference
- Fixed type safety issues in metadata conditional rendering
- Resolves build failure in Azure DevOps pipeline
This commit is contained in:
Bert Hausmans
2026-01-21 23:40:07 +01:00
parent 7cf7e757b9
commit ffce6e8db3
1 changed files with 72 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/ObjectDetailModal.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import { getDataValidationObject, type DataValidationObjectResponse } from '../services/api';
import { useAuthStore } from '../stores/authStore';
@@ -213,7 +213,7 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</svg>
<p className="text-red-600 font-semibold">{error}</p>
</div>
) : objectData ? (
) : objectData !== null ? (
<div className="space-y-6">
{/* Basic Info */}
<div>
@@ -235,7 +235,6 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</div>
</div>
{/* Attributes */}
<div>
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
@@ -254,10 +253,14 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-100">
{Object.entries(objectData.object as Record<string, any>)
{(() => {
const obj = objectData.object as Record<string, any>;
const entries = Object.entries(obj)
.filter(([key]) => !key.startsWith('_'))
.sort(([a], [b]) => a.localeCompare(b))
.map(([key, value]) => {
.sort(([a], [b]) => a.localeCompare(b));
const rows: React.ReactElement[] = entries
.map(([key, value]: [string, any]) => {
const renderedValue = renderAttributeValue(key, value);
if (renderedValue === null) return null;
@@ -271,7 +274,11 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</td>
</tr>
);
})}
})
.filter((node): node is React.ReactElement => node !== null);
return rows;
})()}
{Object.entries(objectData.object as Record<string, any>)
.filter(([key]) => !key.startsWith('_')).length === 0 && (
<tr>
@@ -289,14 +296,10 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</div>
{/* Metadata */}
{objectData.object && typeof objectData.object === 'object' && '_jiraUpdatedAt' in objectData.object && (
<div>
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
Metadata
</h3>
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
{(() => {
if (!objectData.object || typeof objectData.object !== 'object' || objectData.object === null || !('_jiraUpdatedAt' in objectData.object)) {
return null;
}
const obj = objectData.object as Record<string, unknown>;
const updatedAt = obj._jiraUpdatedAt;
const createdAt = obj._jiraCreatedAt;
@@ -312,6 +315,12 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
if (!updatedAtValue && !createdAtValue) return null;
return (
<div>
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
Metadata
</h3>
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
<div className="grid grid-cols-2 gap-6">
{updatedAtValue && (
<div>
@@ -330,12 +339,11 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
</div>
)}
</div>
</div>
</div>
);
})()}
</div>
</div>
)}
</div>
) : (
<div className="text-center py-16 text-gray-500">
<div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />