feat(license): Handle css for license detail

Signed-off-by: tuannn2 <[email protected]>
eclipse-sw360 · Feb 27, 2024 · 7e5e012 · 7e5e012
1 parent 11bc6bd
commit 7e5e012
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 46 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -508,6 +508,7 @@
         "Number of Security Vulnerabilities": "Number of Security Vulnerabilities",
         "Obligation": "Obligation",
         "Obligation Type": "Obligation Type",
+        "Obligation Title": "Obligation Title",
         "OAuth Client": "OAuth Client",
         "OPEN": "Open",
         "OPTIONAL": "Optional",

diff --git a/src/app/[locale]/licenses/detail/components/Detail.tsx b/src/app/[locale]/licenses/detail/components/Detail.tsx
@@ -80,8 +80,7 @@ const Detail = ({ license, setLicense }: Props) => {
             </ToastContainer>
             {!license.checked && (
                 <div
-                    className='alert'
-                    style={{ backgroundColor: '#feefef', borderColor: '#f48989', color: '#da1414', fontSize: '14px' }}
+                    className={`alert ${styles['isChecked']}`}
                 >
                     {t('This license is')} <b>UNCHECKED</b>
                 </div>
@@ -168,7 +167,7 @@ const Detail = ({ license, setLicense }: Props) => {
                                 />
                                 <Button
                                     variant='secondary'
-                                    style={{ marginLeft: '20px', backgroundColor: 'white' }}
+                                    className={`${styles['button-save']}`}
                                     type='submit'
                                     onClick={updateExternalLicenseLink}
                                 >

diff --git a/src/app/[locale]/licenses/detail/components/LicenseDetailOverview.tsx b/src/app/[locale]/licenses/detail/components/LicenseDetailOverview.tsx
@@ -23,6 +23,7 @@ import { ToastContainer } from 'react-bootstrap'
 import Detail from './Detail'
 import Obligations from './Obligations'
 import Text from './Text'
+import styles from '../detail.module.css'
 
 interface Props {
     licenseId?: string
@@ -174,7 +175,7 @@ const LicenseDetailOverview = ({ licenseId }: Props) => {
     } else {
         return (
             license && (
-                <div className='container' style={{ maxWidth: '98vw', marginTop: '10px' }}>
+                <div className={`container ${styles['row-license-detail']}`}>
                     <div className='row'>
                         <ToastContainer position='top-start'>
                             <ToastMessage

diff --git a/src/app/[locale]/licenses/detail/components/Text.tsx b/src/app/[locale]/licenses/detail/components/Text.tsx
@@ -30,7 +30,7 @@ const Text = ({ license }: Props) => {
                 <tbody>
                     <tr>
                         <td>
-                            <pre style={{ whiteSpace: 'pre-wrap' }}>{license.text ?? ''}</pre>
+                            <pre className={`${styles['pre-text']}`}>{license.text ?? ''}</pre>
                         </td>
                     </tr>
                 </tbody>

diff --git a/src/app/[locale]/licenses/detail/detail.module.css b/src/app/[locale]/licenses/detail/detail.module.css
@@ -0,0 +1,20 @@
+.isChecked {
+    background-color: #feefef;
+    border-color: #f48989;
+    color: #da1414; 
+    font-size: 14px;
+}
+
+.button-save {
+    margin-left: 20px;
+    background-color: white;
+}
+
+.row-license-detail {
+    max-width: 98vw;
+    margin-top: 10px;
+}
+
+.pre-text {
+    white-space: pre-wrap;
+}
diff --git a/src/components/LinkedObligations/TableLicense.tsx b/src/components/LinkedObligations/TableLicense.tsx
@@ -14,6 +14,7 @@ import { Config, Grid } from 'gridjs'
 import * as React from 'react'
 import { Component, RefObject, createRef } from 'react'
 import { Form } from 'react-bootstrap'
+import styles from './TableLinkedObligations/TableLinkedObligations.module.css'
 
 const defaultOptions = {
     pagination: { limit: 10 },
@@ -97,13 +98,13 @@ class TableLicense extends Component<TableProps, unknown> {
     render(): React.ReactElement {
         return (
             <>
-                <div style={{ display: 'flex', width: '1455px' }}>
+                <div className={styles['div-table-license']}>
                     {this.props.selector && (
                         <>
                             <div className='col-auto' style={{ fontSize: '14px' }}>
                                 <div className='dataTables_length' style={{ fontSize: '0.875rem' }}>
                                     <span className='my-2'>Show</span>
-                                    <label style={{ marginLeft: '5px', marginRight: '5px' }}>
+                                    <label className={styles['lable-table-license']}>
                                         <Form.Select size='sm' onChange={this.handlePageSizeChange}>
                                             <option defaultValue={defaultOptions.pagination.limit}>
                                                 {defaultOptions.pagination.limit}

diff --git a/src/components/LinkedObligations/TableLinkedObligations/FilterSearch.tsx b/src/components/LinkedObligations/TableLinkedObligations/FilterSearch.tsx
@@ -8,6 +8,7 @@
 // License-Filename: LICENSE
 
 'use client'
+import styles from './TableLinkedObligations.module.css'
 
 interface Props {
     title?: string
@@ -16,23 +17,15 @@ interface Props {
 function FilterSearch({ title, searchFunction }: Props) {
     return (
         <div
-            style={{
-                fontSize: '14px',
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'center',
-                marginLeft: 'auto',
-            }}
+        className={styles['div-filter']}
         >
             <label>Search: </label>
             &nbsp;&nbsp;
             <input
-                className='form-control'
                 type='text'
                 name={title}
                 onInput={searchFunction}
-                style={{ width: '238px', height: '32px' }}
+                className={`form-control ${styles['input-filter']}`}
             />
         </div>
     )

diff --git a/src/components/LinkedObligations/TableLinkedObligations/TableLinkedObligations.module.css b/src/components/LinkedObligations/TableLinkedObligations/TableLinkedObligations.module.css
@@ -35,3 +35,27 @@
 .delete-btn:hover {
     cursor: pointer;
 }
+
+.div-table-license {
+    display: flex;
+    width: 1455px;
+}
+
+.lable-table-license {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.div-filter {
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+}
+
+.input-filter {
+    width: 238px;
+    height: 32px;
+}
diff --git a/src/components/LinkedObligations/TableLinkedObligations/TableLinkedObligations.tsx b/src/components/LinkedObligations/TableLinkedObligations/TableLinkedObligations.tsx
@@ -11,27 +11,18 @@
 import React, { useState } from 'react'
 import { FaTrashAlt } from 'react-icons/fa'
 
-import DeleteObligationDialog from '@/app/[locale]/licenses/components/DeleteObligationDialog'
 import { useTranslations } from 'next-intl'
 import { _ } from 'next-sw360'
 import Obligation from '../../../object-types/Obligation'
 import TableLicense from '../TableLicense'
 import styles from './TableLinkedObligations.module.css'
 
 interface Props {
-    data: Array<any>
-    setData: (data: Array<any>) => void
-    setObligationIdToLicensePayLoad?: (releaseIdToRelationships: Array<string>) => void
+    data?: Array<any>
 }
 
-export default function TableLinkedObligations({ data, setData, setObligationIdToLicensePayLoad }: Props) {
+export default function TableLinkedObligations({ data }: Props) {
     const t = useTranslations('default')
-    const [obligation, setObligation] = useState<Obligation>()
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-    const deleteObligation = (item: Obligation) => {
-        setObligation(item)
-        setDeleteDialogOpen(true)
-    }
 
     const buildAttachmentDetail = (item: Obligation) => {
         return (event: React.MouseEvent<HTMLElement>) => {
@@ -104,11 +95,11 @@ export default function TableLinkedObligations({ data, setData, setObligationIdT
         {
             id: 'action',
             name: t('Action'),
-            formatter: (item: Obligation) =>
+            formatter: () =>
                 _(
                     <div style={{ textAlign: 'left' }}>
                         <span>
-                            <FaTrashAlt className={styles['delete-btn']} onClick={() => deleteObligation(item)} />
+                            <FaTrashAlt className={styles['delete-btn']} />
                         </span>
                     </div>
                 ),
@@ -121,21 +112,13 @@ export default function TableLinkedObligations({ data, setData, setObligationIdT
 
     return (
         <div className='row'>
-            <DeleteObligationDialog
-                data={data}
-                setData={setData}
-                setObligationIdToLicensePayLoad={setObligationIdToLicensePayLoad}
-                obligation={obligation}
-                show={deleteDialogOpen}
-                setShow={setDeleteDialogOpen}
-            />
             <TableLicense
                 data={data}
                 search={search}
                 columns={columns}
                 selector={true}
                 style={style}
-                title={t('search')}
+                title={t('Search')}
                 searchFunction={doSearch}
             />
         </div>

diff --git a/src/components/sw360/PageButtonHeader/PageButtonHeader.tsx b/src/components/sw360/PageButtonHeader/PageButtonHeader.tsx
@@ -62,11 +62,11 @@ function PageButtonHeader({
                         {checked != undefined && (
                             <>
                                 {checked ? (
-                                    <span className='badge' style={{ fontSize: '45%', backgroundColor: '#287d3c' }}>
+                                    <span className={`badge ${styles['checked']}`}>
                                         CHECKED
                                     </span>
                                 ) : (
-                                    <span className='badge' style={{ fontSize: '45%', backgroundColor: '#da1414' }}>
+                                    <span className={`badge ${styles['un-checked']}`}>
                                         UNCHECKED
                                     </span>
                                 )}
@@ -76,7 +76,7 @@ function PageButtonHeader({
                 </div>
             )}
             {changesLogTab && (
-                <div className='list-group-companion' style={{ width: 'auto', maxWidth: '100%' }}>
+                <div className={`list-group-companion ${styles['div-changelog']}`}>
                     <div
                         className='nav nav-pills justify-content-center bg-light font-weight-bold'
                         id='pills-tab'
@@ -85,20 +85,19 @@ function PageButtonHeader({
                     >
                         <div>
                             <a
-                                className={`nav-item nav-link ${changesLogTab == 'list-change' ? 'active' : ''}`}
+                                className={`nav-item nav-link ${changesLogTab == 'list-change' ? 'active' : ''} ${styles['a-changelog']}`}
                                 onClick={() => setChangesLogTab('list-change')}
-                                style={{ color: '#F7941E', fontWeight: 'bold' }}
+
                             >
                                 {t('Change Log')}
                             </a>
                         </div>
                         <div>
                             <a
-                                className={`nav-item nav-link ${changesLogTab == 'view-log' ? 'active' : ''}`}
+                                className={`nav-item nav-link ${changesLogTab == 'view-log' ? 'active' : ''} ${styles['a-changes']}`}
                                 onClick={() => {
                                     changeLogIndex !== -1 && setChangesLogTab('view-log')
                                 }}
-                                style={{ color: '#F7941E', fontWeight: 'bold' }}
                             >
                                 {t('Changes')}
                             </a>

diff --git a/src/components/sw360/PageButtonHeader/pagebuttonheader.module.css b/src/components/sw360/PageButtonHeader/pagebuttonheader.module.css
@@ -13,3 +13,28 @@
     margin-bottom: 1rem;
     align-items: center;
 }
+
+.checked {
+    font-size: 45%;
+    background-color: #287d3c;
+}
+
+.un-checked {
+    font-size: 45%;
+    background-color: #da1414;
+}
+
+.div-changelog {
+    width: auto;
+    max-width: 100%;
+}
+
+.a-changelog {
+    color: #F7941E;
+    font-weight: bold;
+}
+
+.a-changes {
+    color: #F7941E;
+    font-weight: bold;
+}