From dcf252068787630e72c3be5b94b9123bdfc38446 Mon Sep 17 00:00:00 2001
From: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
Date: Mon, 28 Aug 2023 15:25:45 +0700
Subject: [PATCH 1/3] feat(release): Add release - Get data release summary

Signed-off-by: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
---
 .../add/releases/ReleaseAddSummary.tsx        | 15 +++-
 .../ReleaseSummary/ReleaseSummary.tsx         | 75 +++++++++++++++++--
 2 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/src/app/[locale]/components/edit/[id]/release/add/releases/ReleaseAddSummary.tsx b/src/app/[locale]/components/edit/[id]/release/add/releases/ReleaseAddSummary.tsx
index 4f95b851..9d7fe18a 100644
--- a/src/app/[locale]/components/edit/[id]/release/add/releases/ReleaseAddSummary.tsx
+++ b/src/app/[locale]/components/edit/[id]/release/add/releases/ReleaseAddSummary.tsx
@@ -22,6 +22,7 @@ import Vendor from '@/object-types/Vendor'
 import Licenses from '@/object-types/Licenses'
 import Moderators from '@/object-types/Moderators'
 import Repository from '@/object-types/Repository'
+import { useState } from 'react'
 
 interface Props {
     session?: Session
@@ -71,7 +72,19 @@ export default function ReleaseAddSummary({
                 }}
             >
                 <div className='col' style={{ fontSize: '0.875rem' }}>
-                    <ReleaseSummary />
+                    <ReleaseSummary
+                        session={session}
+                        releasePayload={releasePayload}
+                        setReleasePayload={setReleasePayload}
+                        vendor={vendor}
+                        setVendor={setVendor}
+                        mainLicensesId={mainLicensesId}
+                        setMainLicensesId={setMainLicensesId}
+                        otherLicensesId={otherLicensesId}
+                        setOtherLicensesId={setOtherLicensesId}
+                        moderator={moderator}
+                        setModerator={setModerator}
+                    />
                     <div className='row mb-4'>
                         <AddAdditionalRolesComponent documentType={DocumentTypes.COMPONENT} />
                     </div>
diff --git a/src/components/ReleaseSummary/ReleaseSummary.tsx b/src/components/ReleaseSummary/ReleaseSummary.tsx
index 1fc96ae3..f5be25b1 100644
--- a/src/components/ReleaseSummary/ReleaseSummary.tsx
+++ b/src/components/ReleaseSummary/ReleaseSummary.tsx
@@ -15,6 +15,27 @@ import { useTranslations } from 'next-intl'
 import { COMMON_NAMESPACE } from '@/object-types/Constants'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { BiInfoCircle } from 'react-icons/bi'
+import { Session } from '@/object-types/Session'
+import Vendor from '@/object-types/Vendor'
+import Licenses from '@/object-types/Licenses'
+import ModeratorsDiaglog from '../sw360/SearchModerators/ModeratorsDiaglog'
+import Moderators from '@/object-types/Moderators'
+import ReleasePayload from '@/object-types/ReleasePayload'
+interface Props {
+    session?: Session
+    releasePayload: ReleasePayload
+    setReleasePayload: React.Dispatch<React.SetStateAction<ReleasePayload>>
+    vendor?: Vendor
+    setVendor?: React.Dispatch<React.SetStateAction<Vendor>>
+    mainLicensesId?: Licenses
+    setMainLicensesId?: React.Dispatch<React.SetStateAction<Licenses>>
+    otherLicensesId?: Licenses
+    setOtherLicensesId?: React.Dispatch<React.SetStateAction<Licenses>>
+    contributor?: Moderators
+    setContributor?: React.Dispatch<React.SetStateAction<Moderators>>
+    moderator?: Moderators
+    setModerator?: React.Dispatch<React.SetStateAction<Moderators>>
+}
 
 const getDate = () => {
     const today = new Date()
@@ -36,9 +57,41 @@ const ShowInfoOnHover = ({ text }: { text: string }) => {
     );
 };
 
-const ReleaseSummary = () => {
+const ReleaseSummary = ({
+    session,
+    releasePayload,
+    setReleasePayload,
+    vendor,
+    setVendor,
+    mainLicensesId,
+    setMainLicensesId,
+    otherLicensesId,
+    setOtherLicensesId,
+    contributor,
+    setContributor,
+    moderator,
+    setModerator,
+}: Props) => {
     const t = useTranslations(COMMON_NAMESPACE)
     const [currentDate, setCurrentDate] = useState(getDate())
+    const updateField = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>) => {
+        setReleasePayload({
+            ...releasePayload,
+            [e.target.name]: e.target.value,
+        })
+    }
+
+    const setArrayData = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>) => {
+        const data: string[] = splitValueCategories(e.target.value)
+        setReleasePayload({
+            ...releasePayload,
+            [e.target.name]: data,
+        })
+    }
+
+    const splitValueCategories = (valueCatergories: string) => {
+        return valueCatergories.split(',')
+    }
 
     return (
         <>
@@ -62,7 +115,9 @@ const ReleaseSummary = () => {
                                 aria-describedby='Vendor'
                                 readOnly={true}
                                 name='defaultVendorId'
+                                value={vendor.fullName ?? ''}
                             />
+                            <span >x</span>
                         </div>
                         <div className='col-lg-4'>
                             <label htmlFor='name' className='form-label fw-bold'>
@@ -76,6 +131,7 @@ const ReleaseSummary = () => {
                                 name='name'
                                 aria-describedby='name'
                                 readOnly={true}
+                                value={releasePayload.name ?? ''}
                             />
                             <div id='learn_more_about_component_name' className='form-text'>
                                 <ShowInfoOnHover text={t('NAME_COMPONENT')} />
@@ -94,6 +150,7 @@ const ReleaseSummary = () => {
                                 aria-describedby='version'
                                 required
                                 name='version'
+                                onChange={updateField}
                             />
                         </div>
                     </div>
@@ -110,6 +167,7 @@ const ReleaseSummary = () => {
                                 id='programming_languages'
                                 aria-describedby='programming_languages'
                                 name='languages'
+                                onChange={setArrayData}
                             />
                         </div>
                         <div className='col-lg-4'>
@@ -123,6 +181,7 @@ const ReleaseSummary = () => {
                                 id='operating_systems'
                                 aria-describedby='operating_systems'
                                 name='operatingSystems'
+                                onChange={setArrayData}
                             />
                         </div>
                         <div className='col-lg-4'>
@@ -136,6 +195,7 @@ const ReleaseSummary = () => {
                                 id='tag'
                                 aria-describedby='Tag'
                                 name='cpeid'
+                                onChange={updateField}
                             />
                             <div id='learn_more_about_cpe' className='form-text'>
                                 <ShowInfoOnHover text={t('CPE_ID')} />
@@ -156,6 +216,7 @@ const ReleaseSummary = () => {
                                 id='blog_url'
                                 aria-describedby='blog_url'
                                 name='softwarePlatforms'
+                                onChange={setArrayData}
                             />
                         </div>
                         <div className='col-lg-4'>
@@ -169,6 +230,7 @@ const ReleaseSummary = () => {
                                 id='releaseDate'
                                 aria-describedby='releaseDate'
                                 name='releaseDate'
+                                onChange={updateField}
                             />
                         </div>
                         <div className='col-lg-4'>
@@ -185,6 +247,7 @@ const ReleaseSummary = () => {
                                 aria-describedby='Vendor'
                                 readOnly={true}
                                 name='mainLicenseIds'
+                                value={mainLicensesId.fullName ?? ''}
                             />
                         </div>
                     </div>
@@ -204,10 +267,8 @@ const ReleaseSummary = () => {
                                 aria-describedby='Vendor'
                                 readOnly={true}
                                 name='otherLicenseIds'
+                                value={otherLicensesId.fullName ?? ''}
                             />
-                            <div id='otherLicenseIds-i' className='form-text'>
-                                <i className='bi bi-x-circle'></i>
-                            </div>
                         </div>
                         <div className='col-lg-4'>
                             <label htmlFor='sourceCodeDownloadurl' className='form-label fw-bold'>
@@ -220,6 +281,7 @@ const ReleaseSummary = () => {
                                 id='wiki_url'
                                 aria-describedby='wiki_url'
                                 name='sourceCodeDownloadurl'
+                                onChange={updateField}
                             />
                         </div>
                         <div className='col-lg-4'>
@@ -233,6 +295,7 @@ const ReleaseSummary = () => {
                                 id='binaryDownloadurl'
                                 aria-describedby='wiki_url'
                                 name='binaryDownloadurl'
+                                onChange={updateField}
                             />
                         </div>
                     </div>
@@ -253,7 +316,7 @@ const ReleaseSummary = () => {
                         </div>
                         <div className='col-lg-4'>
                             <label htmlFor='mainlineState' className='form-label fw-bold'>
-                                {t('Release Mainline State')} <span className='text-red' style={{color: '#F7941E'}}>*</span>
+                                {t('Release Mainline State')}
                             </label>
                             <select
                                 className='form-select'
@@ -261,6 +324,7 @@ const ReleaseSummary = () => {
                                 id='mainlineState'
                                 required
                                 name='mainlineState'
+                                onChange={updateField}
                             >
                                 <option value='OPEN'>{t('OPEN')}</option>
                                 <option value='MAINLINE'> {t('MAINLINE')}</option>
@@ -332,6 +396,7 @@ const ReleaseSummary = () => {
                                 aria-describedby='Moderators'
                                 readOnly={true}
                                 name='moderators'
+                                value={moderator.fullName ?? ''}
                             />
                         </div>
                     </div>

From bbef84c4c7b2c9ecce9f120268ca5abc6be28979 Mon Sep 17 00:00:00 2001
From: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
Date: Mon, 28 Aug 2023 15:32:58 +0700
Subject: [PATCH 2/3] feat(release): Add release - Add Table Main Licenses

Signed-off-by: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
---
 .../SearchMainLicenses/MainLicensesTable.tsx  | 28 +++++++
 .../SelectTableMainLicenses.tsx               | 80 +++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 src/components/sw360/SearchMainLicenses/MainLicensesTable.tsx
 create mode 100644 src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx

diff --git a/src/components/sw360/SearchMainLicenses/MainLicensesTable.tsx b/src/components/sw360/SearchMainLicenses/MainLicensesTable.tsx
new file mode 100644
index 00000000..d9fc0d86
--- /dev/null
+++ b/src/components/sw360/SearchMainLicenses/MainLicensesTable.tsx
@@ -0,0 +1,28 @@
+// Copyright (C) TOSHIBA CORPORATION, 2023. Part of the SW360 Frontend Project.
+// Copyright (C) Toshiba Software Development (Vietnam) Co., Ltd., 2023. 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
+
+import { memo } from 'react'
+import Table from '../Table/Table'
+
+
+interface Props {
+    data: any
+    columns: any
+}
+
+const compare = (preState: any, nextState: any) => {
+    return Object.entries(preState.data).sort().toString() === Object.entries(nextState.data).sort().toString()
+}
+
+const MainLicensesTable = memo(function LicensesTable({ columns, data }: Props) {
+    return <Table columns={columns} data={data} />
+}, compare)
+
+export default MainLicensesTable
diff --git a/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx b/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx
new file mode 100644
index 00000000..bde596ef
--- /dev/null
+++ b/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx
@@ -0,0 +1,80 @@
+// Copyright (C) TOSHIBA CORPORATION, 2023. Part of the SW360 Frontend Project.
+// Copyright (C) Toshiba Software Development (Vietnam) Co., Ltd., 2023. 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 { Form } from 'react-bootstrap'
+import React from 'react'
+import { _ } from '@/components/sw360'
+import LicensesTable from './MainLicensesTable'
+import Licenses from '@/object-types/Licenses'
+
+interface Props {
+    licenseDatas?: any[]
+    setLicenses?: (licenses: Licenses) => void
+    fullnames?: any[]
+}
+
+const SelectTableMainLicenses = ({ licenseDatas, setLicenses, fullnames }: Props) => {
+    const handlerRadioButton = (item: any) => {
+        if (fullnames.includes(item)) {
+            const index = fullnames.indexOf(item)
+            fullnames.splice(index, 1)
+        } else {
+            fullnames.push(item)
+        }
+        const fullNameLicenses: string[] = []
+        const licensesId: string[] = []
+        fullnames.forEach((item) => {
+            fullNameLicenses.push(item.fullName)
+            licensesId.push(handleId(item._links.self.href))
+        })
+        const licensesName: string = fullNameLicenses.join(' , ')
+        const licensesResponse: Licenses = {
+            fullName: licensesName,
+            id: licensesId,
+        }
+        setLicenses(licensesResponse)
+    }
+
+    const handleId = (id: string): string => {
+        return id.split('/').at(-1)
+    }
+
+    const columns = [
+        {
+            name: '',
+            formatter: (item: string) =>
+                _(
+                    <Form.Check
+                        name='licenseId'
+                        type='checkbox'
+                        onClick={() => {
+                            handlerRadioButton(item)
+                        }}
+                    ></Form.Check>
+                ),
+        },
+        {
+            name: 'FullName',
+            sort: true,
+        },
+    ]
+
+    return (
+        <>
+            <div className='row'>
+                <LicensesTable data={licenseDatas} columns={columns} />
+            </div>
+        </>
+    )
+}
+
+export default React.memo(SelectTableMainLicenses)

From 12b06898f6861f9be0f89b070bf2b8caaaa3dd03 Mon Sep 17 00:00:00 2001
From: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
Date: Mon, 28 Aug 2023 15:51:42 +0700
Subject: [PATCH 3/3] feat(release): Add release - Add search dialog Main
 Licenses

Signed-off-by: tuannn2 <tuan2.nguyennhu@toshiba.co.jp>
---
 messages/en.json                              |   3 +-
 messages/ja.json                              |   2 +
 messages/vi.json                              |   2 +
 messages/zh.json                              |   2 +
 .../ReleaseSummary/ReleaseSummary.tsx         |  25 +++-
 .../SearchMainLicenses/MainLicensesDialog.tsx | 138 ++++++++++++++++++
 .../SelectTableMainLicenses.tsx               |  11 +-
 src/object-types/LicensesType.ts              |  13 ++
 8 files changed, 191 insertions(+), 5 deletions(-)
 create mode 100644 src/components/sw360/SearchMainLicenses/MainLicensesDialog.tsx
 create mode 100644 src/object-types/LicensesType.ts

diff --git a/messages/en.json b/messages/en.json
index 059ff348..b07aeaa8 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -462,7 +462,8 @@
         "SPDX Attachments": "SPDX Attachments",
         "Security Assessment": "Security Assessment",
         "Supplemental Information": "Supplemental Information",
-        "Source Code Available": "Source Code Available",
+        "Search Licenses": "Search Licenses",
+        "Select Licenses": "Select Licenses",
         "Team Foundation Server": "Team Foundation Server",
         "Technical writer": "Technical writer",
         "Test Manager": "Test Manager",
diff --git a/messages/ja.json b/messages/ja.json
index cc266caf..6469999b 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -445,6 +445,8 @@
         "Subversion (SVN)": "転覆 (SVN)",
         "Success! Please reload page to see the changes!": "成功! 変更点を確認するには、ページをリロードしてください！",
         "Supplemental Information": "補足情報",
+        "Search Licenses": "Search Licenses",
+        "Select Licenses": "Select Licenses",
         "Team Foundation Server": "チームファンデーションサーバー",
         "Test Manager": "NOT TRANSLATED",
         "Technical writer": "NOT TRANSLATED",
diff --git a/messages/vi.json b/messages/vi.json
index cb30db29..1caba0a5 100644
--- a/messages/vi.json
+++ b/messages/vi.json
@@ -445,6 +445,8 @@
         "Supplemental Information": "Thông tin bổ sung",
         "Subversion (SVN)": "Lật đổ (SVN)",
         "SAP Design Time Repository (DTR)": "Kho lưu trữ thời gian thiết kế SAP (DTR)",
+        "Search Licenses": "Search Licenses",
+        "Select Licenses": "Select Licenses",
         "Test Manager": "NOT TRANSLATED",
         "Technical writer": "NOT TRANSLATED",
         "Tag": "NOT TRANSLATED",
diff --git a/messages/zh.json b/messages/zh.json
index f764bc0e..b82e0c83 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -442,6 +442,8 @@
         "Supplemental Information": "补充信息",
         "Subversion (SVN)": "颠覆（SVN）",
         "SAP Design Time Repository (DTR)": "SAP 设计时存储库 (DTR)",
+        "Search Licenses": "Search Licenses",
+        "Select Licenses": "Select Licenses",
         "Test Manager": "NOT TRANSLATED",
         "Technical writer": "NOT TRANSLATED",
         "Tag": "NOT TRANSLATED",
diff --git a/src/components/ReleaseSummary/ReleaseSummary.tsx b/src/components/ReleaseSummary/ReleaseSummary.tsx
index f5be25b1..fac912eb 100644
--- a/src/components/ReleaseSummary/ReleaseSummary.tsx
+++ b/src/components/ReleaseSummary/ReleaseSummary.tsx
@@ -10,7 +10,7 @@
 
 'use client'
 import styles from './ReleaseSummary.module.css'
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { COMMON_NAMESPACE } from '@/object-types/Constants'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
@@ -21,6 +21,7 @@ import Licenses from '@/object-types/Licenses'
 import ModeratorsDiaglog from '../sw360/SearchModerators/ModeratorsDiaglog'
 import Moderators from '@/object-types/Moderators'
 import ReleasePayload from '@/object-types/ReleasePayload'
+import MainLicensesDiaglog from '../sw360/SearchMainLicenses/MainLicensesDialog'
 interface Props {
     session?: Session
     releasePayload: ReleasePayload
@@ -74,6 +75,21 @@ const ReleaseSummary = ({
 }: Props) => {
     const t = useTranslations(COMMON_NAMESPACE)
     const [currentDate, setCurrentDate] = useState(getDate())
+    const [dialogOpenMainLicenses, setDialogOpenMainLicenses] = useState(false)
+    const handleClickSearchMainLicenses = useCallback(() => setDialogOpenMainLicenses(true), [])
+
+    const setMainLicenses = (licenseResponse: Licenses) => {
+        const mainLicenses: Licenses = {
+            id: licenseResponse.id,
+            fullName: licenseResponse.fullName,
+        }
+        setMainLicensesId(mainLicenses)
+        setReleasePayload({
+            ...releasePayload,
+            mainLicenseIds: mainLicenses.id,
+        })
+    }
+
     const updateField = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>) => {
         setReleasePayload({
             ...releasePayload,
@@ -248,6 +264,13 @@ const ReleaseSummary = ({
                                 readOnly={true}
                                 name='mainLicenseIds'
                                 value={mainLicensesId.fullName ?? ''}
+                                onClick={handleClickSearchMainLicenses}
+                            />
+                            <MainLicensesDiaglog
+                                show={dialogOpenMainLicenses}
+                                setShow={setDialogOpenMainLicenses}
+                                session={session}
+                                selectLicenses={setMainLicenses}
                             />
                         </div>
                     </div>
diff --git a/src/components/sw360/SearchMainLicenses/MainLicensesDialog.tsx b/src/components/sw360/SearchMainLicenses/MainLicensesDialog.tsx
new file mode 100644
index 00000000..4b887e33
--- /dev/null
+++ b/src/components/sw360/SearchMainLicenses/MainLicensesDialog.tsx
@@ -0,0 +1,138 @@
+// Copyright (C) TOSHIBA CORPORATION, 2023. Part of the SW360 Frontend Project.
+// Copyright (C) Toshiba Software Development (Vietnam) Co., Ltd., 2023. 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 Modal from 'react-bootstrap/Modal'
+import Button from 'react-bootstrap/Button'
+import { Session } from '@/object-types/Session'
+import ApiUtils from '@/utils/api/api.util'
+import HttpStatus from '@/object-types/enums/HttpStatus'
+import { useCallback, useEffect, useState } from 'react'
+import CommonUtils from '@/utils/common.utils'
+import { useTranslations } from 'next-intl'
+import { COMMON_NAMESPACE } from '@/object-types/Constants'
+import Licenses from '@/object-types/Licenses'
+import SelectTableMainLicenses from './SelectTableMainLicenses'
+import { LicensesType } from '@/object-types/LicensesType'
+
+interface Props {
+    show?: boolean
+    setShow?: React.Dispatch<React.SetStateAction<boolean>>
+    session?: Session
+    selectLicenses?: LicensesType
+}
+
+const MainLicensesDiaglog = ({ show, setShow, session, selectLicenses }: Props) => {
+    const t = useTranslations(COMMON_NAMESPACE)
+    const [data, setData] = useState([])
+    const [licenses, setLicenses] = useState([])
+    const [licensesResponse, setLicensesResponse] = useState<Licenses>()
+    const [licenseDatas, setLicenseDatas] = useState([])
+
+    const handleCloseDialog = () => {
+        setShow(!show)
+    }
+
+    const searchVendor = () => {
+        setLicenseDatas(data)
+    }
+
+    const fetchData: any = useCallback(async (url: string) => {
+        const response = await ApiUtils.GET(url, session.user.access_token)
+        if (response.status == HttpStatus.OK) {
+            const data = await response.json()
+            return data
+        } else {
+            return []
+        }
+    }, [])
+
+    useEffect(() => {
+        fetchData(`licenses`).then((licenses: any) => {
+            if(typeof licenses == "undefined") {
+                setData([]);
+                return;
+            }
+            if (
+                !CommonUtils.isNullOrUndefined(licenses['_embedded']) &&
+                !CommonUtils.isNullOrUndefined(licenses['_embedded']['sw360:licenses'])
+            ){
+                const data = licenses['_embedded']['sw360:licenses'].map((item: any) => [
+                    item,
+                    item.fullName,
+                ])
+                setData(data)
+            }
+        })
+    }, [])
+
+    const handleClickSelectModerators = () => {
+        selectLicenses(licensesResponse)
+        setShow(!show)
+    }
+
+    const getLicenses: LicensesType = useCallback((licenses: Licenses) => setLicensesResponse(licenses), [])
+
+    return (
+        <Modal show={show} onHide={handleCloseDialog} backdrop='static' centered size='lg'>
+            <Modal.Header closeButton>
+                <Modal.Title>{t('Search Licenses')}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <div className='modal-body'>
+                    <div className='row'>
+                        <div className='col-lg-8'>
+                            <input
+                                type='text'
+                                className='form-control'
+                                placeholder={t('Enter search text')}
+                                aria-describedby='Search Licenses'
+                            />
+                        </div>
+                        <div className='col-lg-4'>
+                            <button
+                                type='button'
+                                className={`fw-bold btn btn-light button-plain me-2`}
+                                onClick={searchVendor}
+                            >
+                                {t('Search')}
+                            </button>
+                            <button type='button' className={`fw-bold btn btn-light button-plain me-2`}>
+                                {t('Reset')}
+                            </button>
+                        </div>
+                    </div>
+                    <div className='row mt-3'>
+                        <SelectTableMainLicenses licenseDatas={licenseDatas} setLicenses={getLicenses} fullnames={licenses} />
+                    </div>
+                </div>
+            </Modal.Body>
+            <Modal.Footer className='justify-content-end'>
+                <Button
+                    type='button'
+                    data-bs-dismiss='modal'
+                    className={`fw-bold btn btn-light button-plain me-2`}
+                    onClick={handleCloseDialog}
+                >
+                    {t('Close')}
+                </Button>
+                <Button
+                    type='button'
+                    className={`btn btn-primary`}
+                    onClick={handleClickSelectModerators}
+                >
+                    {t('Select Licenses')}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    )
+}
+
+export default MainLicensesDiaglog
diff --git a/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx b/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx
index bde596ef..39c73ef9 100644
--- a/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx
+++ b/src/components/sw360/SearchMainLicenses/SelectTableMainLicenses.tsx
@@ -12,13 +12,14 @@
 
 import { Form } from 'react-bootstrap'
 import React from 'react'
-import { _ } from '@/components/sw360'
+import { Table, _ } from '@/components/sw360'
 import LicensesTable from './MainLicensesTable'
 import Licenses from '@/object-types/Licenses'
+import { LicensesType } from '@/object-types/LicensesType'
 
 interface Props {
     licenseDatas?: any[]
-    setLicenses?: (licenses: Licenses) => void
+    setLicenses?: LicensesType
     fullnames?: any[]
 }
 
@@ -50,6 +51,7 @@ const SelectTableMainLicenses = ({ licenseDatas, setLicenses, fullnames }: Props
 
     const columns = [
         {
+            id: 'licenseId',
             name: '',
             formatter: (item: string) =>
                 _(
@@ -61,10 +63,13 @@ const SelectTableMainLicenses = ({ licenseDatas, setLicenses, fullnames }: Props
                         }}
                     ></Form.Check>
                 ),
+            width: '5%'
         },
         {
-            name: 'FullName',
+            id: 'license',
+            name: 'License',
             sort: true,
+            width: '95%'
         },
     ]
 
diff --git a/src/object-types/LicensesType.ts b/src/object-types/LicensesType.ts
new file mode 100644
index 00000000..0f9307f4
--- /dev/null
+++ b/src/object-types/LicensesType.ts
@@ -0,0 +1,13 @@
+// Copyright (C) TOSHIBA CORPORATION, 2023. Part of the SW360 Frontend Project.
+// Copyright (C) Toshiba Software Development (Vietnam) Co., Ltd., 2023. 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
+
+import Licenses from "./Licenses";
+
+export type LicensesType = (licenses: Licenses) => void