Merge pull request #295 from siemens/feat/clearing_request_detail

feat(CR): Added fields in open clearing request detail page
eclipse-sw360 · Jul 29, 2024 · 6da1b98 · 6da1b98
2 parents edf532d + 7677ce2
commit 6da1b98
Show file tree

Hide file tree

Showing 23 changed files with 129 additions and 26 deletions.
diff --git a/messages/de.json b/messages/de.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "Zusätzliche Daten",
     "Add Attachment": "Anhang hinzufügen",
+    "Add Comment": "Einen Kommentar hinzufügen",
     "Add Component": "In den Warenkorb",
     "Add License": "Lizenz hinzufügen",
     "Add License To Release": "Lizenz hinzufügen",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Blog URL herunterladen",
     "Enter CVE Number": "CVE Anzahl",
     "Enter CVE Year": "CVE Jahr",
+    "Enter Comment": "Kommentar eingeben...",
     "Enter Cvss Score": "Cvss Score",
     "Enter Cwe": "Cwe",
     "Enter Description": "Beschreibung",

diff --git a/messages/en.json b/messages/en.json
@@ -18,6 +18,7 @@
     "Add": "Add",
     "Add Additional Data": "Add Additional Data",
     "Add Attachment": "Add Attachment",
+    "Add Comment": "Add Comment",
     "Add Component": "Add Component",
     "Add License": "Add License",
     "Add License To Release": "Add License To Release",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Enter Blog URL",
     "Enter CVE Number": "Enter CVE Number",
     "Enter CVE Year": "Enter CVE Year",
+    "Enter Comment": "Enter Comment...",
     "Enter Cvss Score": "Enter Cvss Score",
     "Enter Cwe": "Enter Cwe",
     "Enter Description": "Enter Description",

diff --git a/messages/es.json b/messages/es.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "Añada datos adicionales",
     "Add Attachment": "Add Attachment",
+    "Add Comment": "Agregar comentario",
     "Add Component": "Add Component",
     "Add License": "Añadir Licencia",
     "Add License To Release": "Agregar licencia para liberar",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Entrar URL del Blog",
     "Enter CVE Number": "Entra CVE Número",
     "Enter CVE Year": "Entra CVE Año",
+    "Enter Comment": "Introducir comentario...",
     "Enter Cvss Score": "Ingrese la puntuación de Cvss",
     "Enter Cwe": "Entra en Cwe",
     "Enter Description": "Entrar Descripción",

diff --git a/messages/fr.json b/messages/fr.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "Ajouter des données supplémentaires",
     "Add Attachment": "Ajouter une pièce jointe",
+    "Add Comment": "Ajouter un commentaire",
     "Add Component": "Ajouter un composant",
     "Add License": "Ajouter une licence",
     "Add License To Release": "Ajouter une licence à la publication",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Saisissez l'URL du blog",
     "Enter CVE Number": "Entrez CVE Numéro",
     "Enter CVE Year": "Entrez CVE Année",
+    "Enter Comment": "Entrez un commentaire...",
     "Enter Cvss Score": "Saisissez Cvss Score",
     "Enter Cwe": "Entrez Cwe",
     "Enter Description": "Saisissez la description",

diff --git a/messages/ja.json b/messages/ja.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "追加データの追加",
     "Add Attachment": "添付ファイルを追加する",
+    "Add Comment": "コメントを追加",
     "Add Component": "コンポーネントの追加",
     "Add License": "ライセンスの追加",
     "Add License To Release": "このリリースにデータを追加",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "ブログの URL を入力してください",
     "Enter CVE Number": "Enter CVE Number",
     "Enter CVE Year": "Enter CVE Year",
+    "Enter Comment": "コメントを入力してください...",
     "Enter Cvss Score": "Cvss スコアを入力してください",
     "Enter Cwe": "キューに入る",
     "Enter Description": "説明を入力してください",

diff --git a/messages/ko.json b/messages/ko.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "추가 Data",
     "Add Attachment": "첨부파일",
+    "Add Comment": "댓글 추가",
     "Add Component": "Component 추가",
     "Add License": "비밀번호",
     "Add License To Release": "등록하기",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "블로그 URL을 입력",
     "Enter CVE Number": "CVE 소개 이름 *",
     "Enter CVE Year": "CVE 소개 1 년",
+    "Enter Comment": "댓글 입력...",
     "Enter Cvss Score": "Cvs 점수를 입력하십시오",
     "Enter Cwe": "Cwe를 입력하십시오",
     "Enter Description": "자주 묻는 질문",

diff --git a/messages/pt-BR.json b/messages/pt-BR.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "Dados Adicionais",
     "Add Attachment": "Adicionar Anexo",
+    "Add Comment": "Adicionar comentário",
     "Add Component": "Adicionar Componente",
     "Add License": "Adicionar licença",
     "Add License To Release": "Adicionar licença ao release",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Insira o URL do blog",
     "Enter CVE Number": "Insira o número do CVE",
     "Enter CVE Year": "Inserir Ano CVE",
+    "Enter Comment": "Insira um comentário...",
     "Enter Cvss Score": "Insira a pontuação CVSS",
     "Enter Cwe": "Inserir Cwe",
     "Enter Description": "Adicione a descrição",

diff --git a/messages/vi.json b/messages/vi.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "Thêm dữ liệu bổ sung",
     "Add Attachment": "Thêm bản đính kèm",
+    "Add Comment": "Thêm bình luận",
     "Add Component": "Thêm thành phần",
     "Add License": "Thêm giấy phép",
     "Add License To Release": "Thêm giấy phép để phát hành",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "Nhập URL blog",
     "Enter CVE Number": "Nhập số CVE",
     "Enter CVE Year": "Nhập năm CVE",
+    "Enter Comment": "Nhập bình luận...",
     "Enter Cvss Score": "Nhập điểm Cvss",
     "Enter Cwe": "Nhập Cwe",
     "Enter Description": "Nhập mô tả",

diff --git a/messages/zh-CN.json b/messages/zh-CN.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "添加附加数据",
     "Add Attachment": "添加附件",
+    "Add Comment": "添加评论",
     "Add Component": "添加组件",
     "Add License": "添加许可证",
     "Add License To Release": "添加许可证发布",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "输入博客网址",
     "Enter CVE Number": "输入 CVE 编号",
     "Enter CVE Year": "输入 CVE 年份",
+    "Enter Comment": "输入评论...",
     "Enter Cvss Score": "输入 Cvss 分数",
     "Enter Cwe": "输入Cwe",
     "Enter Description": "输入描述",

diff --git a/messages/zh-TW.json b/messages/zh-TW.json
@@ -18,6 +18,7 @@
     "Add": "",
     "Add Additional Data": "新增資料",
     "Add Attachment": "新增附件",
+    "Add Comment": "新增評論",
     "Add Component": "新增元件",
     "Add License": "新增授權",
     "Add License To Release": "新增授權放行",
@@ -344,6 +345,7 @@
     "Enter Blog URL": "輸入部落格網址",
     "Enter CVE Number": "輸入 CVE 數字",
     "Enter CVE Year": "輸入 CVE 年份",
+    "Enter Comment": "輸入評論...",
     "Enter Cvss Score": "輸入 Cvss 分數",
     "Enter Cwe": "輸入 Cwe",
     "Enter Description": "輸入描述",

diff --git a/src/app/[locale]/requests/clearingRequest/detail/[id]/components/ClearingComments.tsx b/src/app/[locale]/requests/clearingRequest/detail/[id]/components/ClearingComments.tsx
@@ -0,0 +1,62 @@
+// Copyright (C) Siemens AG, 2024. Part of the SW360 Frontend Project.
+
+// This program and the accompanying materials are made
+// available under the terms of the Eclipse Public License 2.0
+// which is available at https://www.eclipse.org/legal/epl-2.0/
+
+// SPDX-License-Identifier: EPL-2.0
+// License-Filename: LICENSE
+
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { ClearingRequestDetails } from '@/object-types'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
+import { signOut, useSession } from 'next-auth/react'
+
+
+export default function ClearingComments({ data }: { data: ClearingRequestDetails }) {
+    const t = useTranslations('default')
+    const { status } = useSession()
+
+    const handleAddComment = () => {
+        console.log('Test')
+    }
+
+    if (status === 'unauthenticated') {
+        signOut()
+    } else {
+    return (
+        <>
+            <table className={`table label-value-table ${styles['summary-table']}`}>
+                <thead>
+                    <tr>
+                        <th colSpan={2}>{t('Comments')}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <th>
+                        <input className='form-control'
+                               type="text"
+                               placeholder={t('Enter Comment')}
+                               style={{height: '50px'}}/>
+                    </th>
+                    <tr>
+                        <button type='button'
+                                className='btn btn-accept mb-2 mx-3'
+                                onClick={handleAddComment}
+                                >
+                            {t('Add Comment')}
+                        </button>
+                    </tr>
+                    {data.comments.map((item) => (
+                        <tr key={item.text}>
+                            <td>{item.text}</td>
+                            <td>{item.commentedBy}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </>
+    )}
+}
diff --git a/...uest/[id]/components/ClearingDecision.tsx → ...tail/[id]/components/ClearingDecision.tsx b/...uest/[id]/components/ClearingDecision.tsx → ...tail/[id]/components/ClearingDecision.tsx
@@ -12,7 +12,7 @@
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { ClearingRequestDetails } from '@/object-types'
-import styles from './../../../moderationRequest/[id]/moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 import { signOut, useSession } from 'next-auth/react'
 
 interface ClearingRequestDataMap {

diff --git a/...[id]/components/ClearingRequestDetail.tsx → ...[id]/components/ClearingRequestDetail.tsx b/...[id]/components/ClearingRequestDetail.tsx → ...[id]/components/ClearingRequestDetail.tsx
@@ -16,11 +16,12 @@ import { notFound, useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { signOut, useSession } from 'next-auth/react'
-import styles from './../../../moderationRequest/[id]/moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 import { Button, Col, Row, Tab, Card, Collapse } from 'react-bootstrap'
 import { ShowInfoOnHover } from 'next-sw360'
 import ClearingRequestInfo from './ClearingRequestInfo'
 import ClearingDecision from './ClearingDecision'
+import ClearingComments from './ClearingComments'
 
 
 function ClearingRequestDetail({ clearingRequestId }: { clearingRequestId: string }) {
@@ -45,7 +46,13 @@ function ClearingRequestDetail({ clearingRequestId }: { clearingRequestId: strin
         clearingType: '',
         reOpenOn: null,
         createdOn: '',
-        comments: [{}]
+        comments: [{}],
+        _embedded: {
+            "sw360:project": {
+                name: '',
+                version: ''
+            }
+        }
     })
 
     const fetchData = useCallback(
@@ -138,12 +145,14 @@ function ClearingRequestDetail({ clearingRequestId }: { clearingRequestId: strin
                                                     t('Clearing Request Information For DELETED Project')
                                                 ) : ( <>
                                                         {t('Clearing Request Information For Project') + ` `}
-                                                        <a href={`/projects/detail/${clearingRequestData.projectId}`}>
-                                                            {clearingRequestData.projectId}
+                                                        <a href={`/projects/detail/${clearingRequestData.projectId}`}
+                                                           className='text-link'>
+                                                                {clearingRequestData._embedded['sw360:project'].name + 
+                                                                `(${clearingRequestData._embedded['sw360:project'].version})`}
                                                         </a>
                                                     </>
                                                 )}
-                                            </div>
+                                            </div>  
                                             </Button>
                                         </Card.Header>
                                     </div>
@@ -182,13 +191,21 @@ function ClearingRequestDetail({ clearingRequestId }: { clearingRequestId: strin
                                                 aria-controls="example-collapse-text-2"
                                                 aria-expanded={openCardIndex === 1}
                                             >
-                                            {t('Clearing Request Comments')}
+                                            {t('Clearing Request Comments') + ' ' +
+                                             `(${clearingRequestData.comments.length})`}
                                             </Button>
                                         </Card.Header>
                                     </div>
                                     <Collapse in={openCardIndex === 1}>
                                         <div id="example-collapse-text-2">
                                             <Card.Body className = {`${styles['card-body']}`}>
+                                                <div>
+                                                    <div className="col">
+                                                        <ClearingComments
+                                                            data={clearingRequestData}
+                                                        />
+                                                    </div>
+                                                </div>
                                             </Card.Body>
                                         </div>
                                     </Collapse>

diff --git a/...t/[id]/components/ClearingRequestInfo.tsx → ...l/[id]/components/ClearingRequestInfo.tsx b/...t/[id]/components/ClearingRequestInfo.tsx → ...l/[id]/components/ClearingRequestInfo.tsx
@@ -12,7 +12,7 @@
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { ClearingRequestDetails } from '@/object-types'
-import styles from './../../../moderationRequest/[id]/moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 import { signOut, useSession } from 'next-auth/react'
 
 

diff --git a/...e]/requests/clearingRequest/[id]/page.tsx → ...ests/clearingRequest/detail/[id]/page.tsx b/...e]/requests/clearingRequest/[id]/page.tsx → ...ests/clearingRequest/detail/[id]/page.tsx
diff --git a/src/app/[locale]/requests/components/ClosedClearingRequest.tsx b/src/app/[locale]/requests/components/ClosedClearingRequest.tsx
@@ -63,7 +63,7 @@ function ClosedClearingRequest() {
             formatter: ({ requestId }: { requestId: string; }) =>
                 _(
                     <>
-                        <Link href={`/requests/clearingRequest/${requestId}`} className='text-link'>
+                        <Link href={`/requests/clearingRequest/detail/${requestId}`} className='text-link'>
                             {requestId}
                         </Link>
                     </>

diff --git a/src/app/[locale]/requests/components/OpenClearingRequest.tsx b/src/app/[locale]/requests/components/OpenClearingRequest.tsx
@@ -22,15 +22,7 @@ import { Spinner } from 'react-bootstrap'
 
 type EmbeddedClearingRequest = Embedded<ClearingRequest, 'sw360:clearingRequests'>
 
-interface ClearingRequestStatusMap {
-    [key: string]: string;
-}
-
-interface ClearingRequestPriorityMap {
-    [key: string]: string;
-}
-
-interface ClearingRequestTypeMap {
+interface ClearingRequestDataMap {
     [key: string]: string;
 }
 
@@ -121,7 +113,7 @@ function OpenClearingRequest() {
     const [loading, setLoading] = useState(true)
     const { data: session, status } = useSession()
     const [tableData, setTableData] = useState<Array<any>>([])
-    const clearingRequestStatus : ClearingRequestStatusMap = {
+    const clearingRequestStatus : ClearingRequestDataMap = {
         NEW: t('New'),
         IN_PROGRESS: t('In Progress'),
         ACCEPTED: t('ACCEPTED'),
@@ -134,14 +126,14 @@ function OpenClearingRequest() {
         SANITY_CHECK: t('Sanity Check')
     };
 
-    const clearingRequestPriority : ClearingRequestPriorityMap = {
+    const clearingRequestPriority : ClearingRequestDataMap = {
         LOW: t('Low'),
         MEDIUM: t('Medium'),
         HIGH: t('High'),
         CRITICAL: t('Critical')
     };
 
-    const clearingRequestType : ClearingRequestTypeMap = {
+    const clearingRequestType : ClearingRequestDataMap = {
         DEEP: t('Deep'),
         HIGH: t('High')
     };
@@ -223,7 +215,7 @@ function OpenClearingRequest() {
             formatter: ({ requestId }: { requestId: string; }) =>
                 _(
                     <>
-                        <Link href={`/requests/clearingRequest/${requestId}`} className='text-link'>
+                        <Link href={`/requests/clearingRequest/detail/${requestId}`} className='text-link'>
                             {requestId}
                         </Link>
                     </>

diff --git a/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationDecision.tsx b/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationDecision.tsx
@@ -12,7 +12,7 @@
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { ModerationRequestDetails, ModerationRequestPayload } from '@/object-types'
-import styles from '../moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 
 interface ModerationRequestMap {
     [key: string]: string;

diff --git a/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationRequestDetail.tsx b/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationRequestDetail.tsx
@@ -16,7 +16,7 @@ import { notFound, useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { signOut, useSession } from 'next-auth/react'
-import styles from '../moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 import { Button, Col, Row, Tab, Card, Collapse } from 'react-bootstrap'
 import { ModerationRequestDetails } from '@/object-types'
 import ModerationRequestInfo from './ModerationRequestInfo'

diff --git a/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationRequestInfo.tsx b/src/app/[locale]/requests/moderationRequest/[id]/components/ModerationRequestInfo.tsx
@@ -12,7 +12,7 @@
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { ModerationRequestDetails } from '@/object-types'
-import styles from '../moderationRequestDetail.module.css'
+import styles from '@/app/[locale]/requests/requestDetail.module.css'
 
 
 export default function ModerationRequestInfo({ data }: { data: ModerationRequestDetails }) {