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 { getDataValidationObject, type DataValidationObjectResponse } from '../services/api';
|
||||||
import { useAuthStore } from '../stores/authStore';
|
import { useAuthStore } from '../stores/authStore';
|
||||||
|
|
||||||
@@ -213,7 +213,7 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
|
|||||||
</svg>
|
</svg>
|
||||||
<p className="text-red-600 font-semibold">{error}</p>
|
<p className="text-red-600 font-semibold">{error}</p>
|
||||||
</div>
|
</div>
|
||||||
) : objectData ? (
|
) : objectData !== null ? (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Basic Info */}
|
{/* Basic Info */}
|
||||||
<div>
|
<div>
|
||||||
@@ -235,7 +235,6 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Attributes */}
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
<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>
|
<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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-100">
|
<tbody className="bg-white divide-y divide-gray-100">
|
||||||
{Object.entries(objectData.object as Record<string, any>)
|
{(() => {
|
||||||
.filter(([key]) => !key.startsWith('_'))
|
const obj = objectData.object as Record<string, any>;
|
||||||
.sort(([a], [b]) => a.localeCompare(b))
|
const entries = Object.entries(obj)
|
||||||
.map(([key, value]) => {
|
.filter(([key]) => !key.startsWith('_'))
|
||||||
const renderedValue = renderAttributeValue(key, value);
|
.sort(([a], [b]) => a.localeCompare(b));
|
||||||
if (renderedValue === null) return null;
|
|
||||||
|
|
||||||
return (
|
const rows: React.ReactElement[] = entries
|
||||||
<tr key={key} className="hover:bg-blue-50/30 transition-colors">
|
.map(([key, value]: [string, any]) => {
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-700">
|
const renderedValue = renderAttributeValue(key, value);
|
||||||
{key}
|
if (renderedValue === null) return null;
|
||||||
</td>
|
|
||||||
<td className="px-6 py-4 text-sm">
|
return (
|
||||||
{renderedValue}
|
<tr key={key} className="hover:bg-blue-50/30 transition-colors">
|
||||||
</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-700">
|
||||||
</tr>
|
{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>)
|
{Object.entries(objectData.object as Record<string, any>)
|
||||||
.filter(([key]) => !key.startsWith('_')).length === 0 && (
|
.filter(([key]) => !key.startsWith('_')).length === 0 && (
|
||||||
<tr>
|
<tr>
|
||||||
@@ -289,52 +296,53 @@ export default function ObjectDetailModal({ objectId, onClose, onObjectClick, on
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Metadata */}
|
{/* Metadata */}
|
||||||
{objectData.object && typeof objectData.object === 'object' && '_jiraUpdatedAt' in objectData.object && (
|
{(() => {
|
||||||
<div>
|
if (!objectData.object || typeof objectData.object !== 'object' || objectData.object === null || !('_jiraUpdatedAt' in objectData.object)) {
|
||||||
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
return null;
|
||||||
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
|
}
|
||||||
Metadata
|
const obj = objectData.object as Record<string, unknown>;
|
||||||
</h3>
|
const updatedAt = obj._jiraUpdatedAt;
|
||||||
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
|
const createdAt = obj._jiraCreatedAt;
|
||||||
{(() => {
|
const updatedAtValue: string | number | Date | null =
|
||||||
const obj = objectData.object as Record<string, unknown>;
|
updatedAt && (typeof updatedAt === 'string' || typeof updatedAt === 'number' || updatedAt instanceof Date)
|
||||||
const updatedAt = obj._jiraUpdatedAt;
|
? (updatedAt as string | number | Date)
|
||||||
const createdAt = obj._jiraCreatedAt;
|
: null;
|
||||||
const updatedAtValue: string | number | Date | null =
|
const createdAtValue: string | number | Date | null =
|
||||||
updatedAt && (typeof updatedAt === 'string' || typeof updatedAt === 'number' || updatedAt instanceof Date)
|
createdAt && (typeof createdAt === 'string' || typeof createdAt === 'number' || createdAt instanceof Date)
|
||||||
? (updatedAt as string | number | Date)
|
? (createdAt as string | number | Date)
|
||||||
: null;
|
: 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 (
|
return (
|
||||||
<div className="grid grid-cols-2 gap-6">
|
<div>
|
||||||
{updatedAtValue && (
|
<h3 className="text-sm font-bold text-gray-700 uppercase tracking-wider mb-4 flex items-center gap-2">
|
||||||
<div>
|
<div className="w-1 h-5 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
|
||||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Laatst bijgewerkt (Jira)</div>
|
Metadata
|
||||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
</h3>
|
||||||
{new Date(updatedAtValue).toLocaleString('nl-NL')}
|
<div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{createdAtValue && (
|
)}
|
||||||
<div>
|
{createdAtValue && (
|
||||||
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Aangemaakt (Jira)</div>
|
<div>
|
||||||
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
<div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Aangemaakt (Jira)</div>
|
||||||
{new Date(createdAtValue).toLocaleString('nl-NL')}
|
<div className="text-sm font-medium text-gray-900 bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
|
||||||
</div>
|
{new Date(createdAtValue).toLocaleString('nl-NL')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
);
|
</div>
|
||||||
})()}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
)}
|
})()}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-16 text-gray-500">
|
<div className="text-center py-16 text-gray-500">
|
||||||
|
|||||||
Reference in New Issue
Block a user