Fix TypeScript error: Type 'unknown' not assignable to ReactNode in ObjectDetailModal
- 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:
@@ -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,24 +253,32 @@ 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>)
|
||||
.filter(([key]) => !key.startsWith('_'))
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([key, value]) => {
|
||||
const renderedValue = renderAttributeValue(key, value);
|
||||
if (renderedValue === null) return null;
|
||||
{(() => {
|
||||
const obj = objectData.object as Record<string, any>;
|
||||
const entries = Object.entries(obj)
|
||||
.filter(([key]) => !key.startsWith('_'))
|
||||
.sort(([a], [b]) => a.localeCompare(b));
|
||||
|
||||
return (
|
||||
<tr key={key} className="hover:bg-blue-50/30 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-700">
|
||||
{key}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
{renderedValue}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
const rows: React.ReactElement[] = entries
|
||||
.map(([key, value]: [string, any]) => {
|
||||
const renderedValue = renderAttributeValue(key, value);
|
||||
if (renderedValue === null) return null;
|
||||
|
||||
return (
|
||||
<tr key={key} className="hover:bg-blue-50/30 transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-700">
|
||||
{key}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
{renderedValue}
|
||||
</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,52 +296,53 @@ 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">
|
||||
{(() => {
|
||||
const obj = objectData.object as Record<string, unknown>;
|
||||
const updatedAt = obj._jiraUpdatedAt;
|
||||
const createdAt = obj._jiraCreatedAt;
|
||||
const updatedAtValue: string | number | Date | null =
|
||||
updatedAt && (typeof updatedAt === 'string' || typeof updatedAt === 'number' || updatedAt instanceof Date)
|
||||
? (updatedAt as string | number | Date)
|
||||
: null;
|
||||
const createdAtValue: string | number | Date | null =
|
||||
createdAt && (typeof createdAt === 'string' || typeof createdAt === 'number' || createdAt instanceof Date)
|
||||
? (createdAt as string | number | Date)
|
||||
: null;
|
||||
{(() => {
|
||||
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;
|
||||
const updatedAtValue: string | number | Date | null =
|
||||
updatedAt && (typeof updatedAt === 'string' || typeof updatedAt === 'number' || updatedAt instanceof Date)
|
||||
? (updatedAt as string | number | Date)
|
||||
: null;
|
||||
const createdAtValue: string | number | Date | null =
|
||||
createdAt && (typeof createdAt === 'string' || typeof createdAt === 'number' || createdAt instanceof Date)
|
||||
? (createdAt as string | number | Date)
|
||||
: null;
|
||||
|
||||
if (!updatedAtValue && !createdAtValue) return null;
|
||||
if (!updatedAtValue && !createdAtValue) return null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{updatedAtValue && (
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Laatst bijgewerkt (Jira)</div>
|
||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
||||
{new Date(updatedAtValue).toLocaleString('nl-NL')}
|
||||
</div>
|
||||
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>
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Laatst bijgewerkt (Jira)</div>
|
||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
||||
{new Date(updatedAtValue).toLocaleString('nl-NL')}
|
||||
</div>
|
||||
)}
|
||||
{createdAtValue && (
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Aangemaakt (Jira)</div>
|
||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
||||
{new Date(createdAtValue).toLocaleString('nl-NL')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{createdAtValue && (
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Aangemaakt (Jira)</div>
|
||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
||||
{new Date(createdAtValue).toLocaleString('nl-NL')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16 text-gray-500">
|
||||
|
||||
Reference in New Issue
Block a user