Skip to content

Commit

Permalink
Merge pull request #128 from toshiba/release/fix-type-checking
Browse files Browse the repository at this point in the history 
fix(Code): Fix linter error for component detail
  • Loading branch information
@heliocastro
heliocastro authored Sep 28, 2023
2 parents 626e1f6 + b92cb79 commit 7962754
Show file tree
Hide file tree
Showing 20 changed files with 698 additions and 393 deletions.
230 changes: 132 additions & 98 deletions src/app/[locale]/components/detail/[id]/components/ComponentGeneral.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,111 +8,145 @@
// SPDX-License-Identifier: EPL-2.0
// License-Filename: LICENSE

"use client"
'use client'
import styles from '../detail.module.css'
import AdditionalData from '@/components/AdditionalData/AdditionalData'
import { useState } from 'react'
import ExternalIds from '@/components/ExternalIds/ExternalIds'
import { FaCopy } from 'react-icons/fa'
import { useTranslations } from 'next-intl'
import { COMMON_NAMESPACE } from '@/object-types/Constants'
import Component from '@/object-types/Component'

const ComponentGeneral = ({ component, componentId }: any) => {
const t = useTranslations(COMMON_NAMESPACE);
const [toggle, setToggle] = useState(false);
return (
<table className={`table label-value-table ${styles['summary-table']}`}>
<thead title='Click to expand or collapse' onClick={() => { setToggle(!toggle) }}>
<tr>
<th colSpan={2}>{t('General')}</th>
</tr>
</thead>
<tbody hidden={toggle}>
<tr>
<td className={styles.tag}>Id:</td>
<td id='documentId'>{componentId}
<button id='copyToClipboard' type='button' className='btn btn-sm' data-toggle='tooltip' title='Copy to clipboard'>
<FaCopy style={{color: 'gray', width: '20px'}}/>
</button>
</td>
</tr>
<tr>
<td>{t('Name')}:</td>
<td>{component.name}</td>
</tr>
<tr>
<td>{t('Created On')}:</td>
<td>{component.createdOn}</td>
</tr>
<tr>
<td>{t('Created by')}:</td>
<td>
{(component['_embedded']) && (
<a className={styles.link} href={`mailto:${component['_embedded']['createdBy']['email']}`}>{component['_embedded']['createdBy']['fullName']}</a>
)}
</td>
</tr>
<tr>
<td>{t('Categories')}:</td>
{(component.categories) && (
<td>{component.categories.join(',')}</td>
)}
</tr>
<tr>
<td>{t('Modified On')}:</td>
<td>{(component['modifiedOn']) && component['modifiedOn']}</td>
</tr>
<tr>
<td>{t('Modified By')}:</td>
<td>
{(component['modifiedBy']) && (
<a className={styles.link} href={`mailto:${component['modifiedBy']}`}></a>
)}
</td>
</tr>
<tr>
<td>{t('Component Type')}:</td>
<td><span className='sw360-tt'>{component.componentType}</span></td>
</tr>
<tr>
<td>{t('Default vendor')}:</td>
<td>{(component['_embedded'] && component['_embedded']['defaultVendor']) && component['_embedded']['defaultVendor']['fullName']}</td>
</tr>
<tr>
<td>{t('Homepage')}:</td>
<td><a href={component.homepage}>{component.homepage}</a></td>
</tr>
<tr>
<td>{t('Blog')}:</td>
<td><a href={component.blog}>{component.blog}</a></td>
</tr>
<tr>
<td>{t('Wiki')}:</td>
<td><a href={component.wiki}>{component.wiki}</a></td>
</tr>
<tr>
<td>{t('Mailing list')}:</td>
<td><a href={`mailto:${component.mailinglist}`}>{component.mailinglist}</a></td>
</tr>
<tr>
<td>{t('External ids')}:</td>
<td>
<ul className='mapDisplayRootItem'>
{(component['externalIds']) && <ExternalIds externalIds={component['externalIds']} />}
</ul>
</td>
</tr>
<tr>
<td>{t('Additional Data')}:</td>
<td>
<ul id='list-data-additional-contentComponent' className='mapDisplayRootItem'>
{(component['additionalData']) && <AdditionalData additionalData={component['additionalData']} />}
</ul>
</td>
</tr>
</tbody>
</table>
)
interface Props {
component: Component
componentId: string
}

export default ComponentGeneral
const ComponentGeneral = ({ component, componentId }: Props) => {
const t = useTranslations(COMMON_NAMESPACE)
const [toggle, setToggle] = useState(false)
return (
<table className={`table label-value-table ${styles['summary-table']}`}>
<thead
title='Click to expand or collapse'
onClick={() => {
setToggle(!toggle)
}}
>
<tr>
<th colSpan={2}>{t('General')}</th>
</tr>
</thead>
<tbody hidden={toggle}>
<tr>
<td className={styles.tag}>Id:</td>
<td id='documentId'>
{componentId}
<button
id='copyToClipboard'
type='button'
className='btn btn-sm'
data-toggle='tooltip'
title='Copy to clipboard'
>
<FaCopy style={{ color: 'gray', width: '20px' }} />
</button>
</td>
</tr>
<tr>
<td>{t('Name')}:</td>
<td>{component.name}</td>
</tr>
<tr>
<td>{t('Created On')}:</td>
<td>{component.createdOn}</td>
</tr>
<tr>
<td>{t('Created by')}:</td>
<td>
{component['_embedded'] && (
<a className={styles.link} href={`mailto:${component['_embedded']['createdBy']['email']}`}>
{component['_embedded']['createdBy']['fullName']}
</a>
)}
</td>
</tr>
<tr>
<td>{t('Categories')}:</td>
{component.categories && <td>{component.categories.join(',')}</td>}
</tr>
<tr>
<td>{t('Modified On')}:</td>
<td>{component['modifiedOn'] && component['modifiedOn']}</td>
</tr>
<tr>
<td>{t('Modified By')}:</td>
<td>
{component['modifiedBy'] && (
<a className={styles.link} href={`mailto:${component['modifiedBy']}`}></a>
)}
</td>
</tr>
<tr>
<td>{t('Component Type')}:</td>
<td>
<span className='sw360-tt'>{component.componentType}</span>
</td>
</tr>
<tr>
<td>{t('Default vendor')}:</td>
<td>
{component['_embedded'] &&
component['_embedded']['defaultVendor'] &&
component['_embedded']['defaultVendor']['fullName']}
</td>
</tr>
<tr>
<td>{t('Homepage')}:</td>
<td>
<a href={component.homepage}>{component.homepage}</a>
</td>
</tr>
<tr>
<td>{t('Blog')}:</td>
<td>
<a href={component.blog}>{component.blog}</a>
</td>
</tr>
<tr>
<td>{t('Wiki')}:</td>
<td>
<a href={component.wiki}>{component.wiki}</a>
</td>
</tr>
<tr>
<td>{t('Mailing list')}:</td>
<td>
<a href={`mailto:${component.mailinglist}`}>{component.mailinglist}</a>
</td>
</tr>
<tr>
<td>{t('External ids')}:</td>
<td>
<ul className='mapDisplayRootItem'>
{component['externalIds'] && <ExternalIds externalIds={component['externalIds']} />}
</ul>
</td>
</tr>
<tr>
<td>{t('Additional Data')}:</td>
<td>
<ul id='list-data-additional-contentComponent' className='mapDisplayRootItem'>
{component['additionalData'] && (
<AdditionalData additionalData={component['additionalData']} />
)}
</ul>
</td>
</tr>
</tbody>
</table>
)
}

export default ComponentGeneral
29 changes: 18 additions & 11 deletions src/app/[locale]/components/detail/[id]/components/DeleteReleaseModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ import { useTranslations } from 'next-intl'
import { COMMON_NAMESPACE } from '@/object-types/Constants'
import ActionType from '@/object-types/enums/ActionType'
import { useRouter } from 'next/navigation'
import { Session } from '@/object-types/Session'
import ReleaseDetail from '@/object-types/ReleaseDetail'

const DEFAULT_RELEASE_INFO: any = { name: '', version: '', _embedded: { 'sw360:attachments': [] } }
const DEFAULT_RELEASE_INFO: ReleaseDetail = { name: '', version: '', _embedded: { 'sw360:attachments': [] } }

interface Props {
componentId?: string
Expand All @@ -34,8 +36,13 @@ interface Props {
setShow?: React.Dispatch<React.SetStateAction<boolean>>
}

interface DeleteResponse {
resourceId: string
status: number
}

const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow }: Props) => {
const { data: session }: any = useSession()
const { data: session } = useSession() as { data: Session }
const t = useTranslations(COMMON_NAMESPACE)
const [release, setRelease] = useState(DEFAULT_RELEASE_INFO)
const [variant, setVariant] = useState('success')
Expand All @@ -55,11 +62,11 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
setReloadPage(true)
}, [])

const deleteComponent: any = async () => {
const deleteComponent = async () => {
const response = await ApiUtils.DELETE(`releases/${releaseId}`, session.user.access_token)
try {
if (response.status == HttpStatus.MULTIPLE_STATUS) {
const body = await response.json()
const body = (await response.json()) as Array<DeleteResponse>
const deleteStatus = body[0].status
if (deleteStatus == HttpStatus.OK) {
displayMessage('success', 'Delete release success!')
Expand All @@ -75,7 +82,7 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
displayMessage('danger', 'Error when processing!')
}
} else if (response.status == HttpStatus.UNAUTHORIZED) {
signOut()
handleError()
} else {
handleError()
}
Expand All @@ -84,15 +91,15 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
}
}

const fetchData: any = useCallback(
async (signal: any) => {
const fetchData = useCallback(
async (signal: AbortSignal) => {
if (session) {
const releaseResponse = await ApiUtils.GET(`releases/${releaseId}`, session.user.access_token, signal)
if (releaseResponse.status == HttpStatus.OK) {
const release = await releaseResponse.json()
const release = (await releaseResponse.json()) as ReleaseDetail
setRelease(release)
} else if (releaseResponse.status == HttpStatus.UNAUTHORIZED) {
signOut()
await signOut()
} else {
setRelease(DEFAULT_RELEASE_INFO)
handleError()
Expand All @@ -103,7 +110,7 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
)

const handleSubmit = () => {
deleteComponent()
deleteComponent().catch((err) => console.error(err))
}

const handleCloseDialog = () => {
Expand All @@ -119,7 +126,7 @@ const DeleteReleaseModal = ({ componentId, actionType, releaseId, show, setShow
useEffect(() => {
const controller = new AbortController()
const signal = controller.signal
fetchData(signal)
fetchData(signal).catch((err) => console.error(err))

return () => {
controller.abort()
Expand Down
Loading

0 comments on commit 7962754

Please sign in to comment.