Skip to content

Commit 13c958a

Browse files
akshitjoshiiheliocastro
akshitjoshii
authored and
heliocastro
committed
feat(Component): Add breadcrumbs to component and release tabs
Signed-off-by: Akshit Joshi <[email protected]>
1 parent 9b7f275 commit 13c958a

File tree

3 files changed

+358
-315
lines changed

3 files changed

+358
-315
lines changed

‎src/app/[locale]/components/detail/[id]/components/DetailOverview.tsx‎

Lines changed: 134 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313

1414
import { signOut, useSession } from 'next-auth/react'
1515
import { useTranslations } from 'next-intl'
16+
import { useParams } from 'next/navigation'
1617
import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
18+
import Breadcrumb from 'react-bootstrap/Breadcrumb'
1719

1820
import Attachments from '@/components/Attachments/Attachments'
1921
import ChangeLogDetail from '@/components/ChangeLog/ChangeLogDetail/ChangeLogDetail'
@@ -265,142 +267,154 @@ const DetailOverview = ({ componentId }: Props): ReactNode => {
265267
return () => controller.abort()
266268
}, [pageableQueryParam, componentId, session])
267269

270+
const param = useParams()
271+
const locale = (param.locale as string) || 'en'
272+
const componentsPath = `/${locale}/components`
273+
268274
return (
269275
component && (
270-
<div className='container page-content'>
271-
<div className='row'>
272-
<div className='col-2 sidebar'>
273-
<SideBar
274-
selectedTab={selectedTab}
275-
setSelectedTab={setSelectedTab}
276-
tabList={tabList}
277-
vulnerabilities={vulnerData}
278-
/>
279-
</div>
280-
<div className='col'>
281-
<div
282-
className='row'
283-
style={{ marginBottom: '20px' }}
284-
>
285-
<PageButtonHeader
286-
title={component.name}
287-
buttons={headerButtons}
276+
<>
277+
<Breadcrumb className='container page-content'>
278+
<Breadcrumb.Item href={componentsPath}>{t('Components')}</Breadcrumb.Item>
279+
<Breadcrumb.Item active>{component.name}</Breadcrumb.Item>
280+
</Breadcrumb>
281+
<div className='container page-content'>
282+
<div className='row'>
283+
<div className='col-2 sidebar'>
284+
<SideBar
285+
selectedTab={selectedTab}
286+
setSelectedTab={setSelectedTab}
287+
tabList={tabList}
288+
vulnerabilities={vulnerData}
289+
/>
290+
</div>
291+
<div className='col'>
292+
<div
293+
className='row'
294+
style={{ marginBottom: '20px' }}
288295
>
289-
{selectedTab === CommonTabIds.ATTACHMENTS && attachmentNumber > 0 && (
290-
<div
291-
className='list-group-companion'
292-
data-belong-to='tab-Attachments'
293-
>
296+
<PageButtonHeader
297+
title={component.name}
298+
buttons={headerButtons}
299+
>
300+
{selectedTab === CommonTabIds.ATTACHMENTS && attachmentNumber > 0 && (
294301
<div
295-
className='btn-group'
296-
role='group'
302+
className='list-group-companion'
303+
data-belong-to='tab-Attachments'
297304
>
298-
<button
299-
id='downloadAttachmentBundle'
300-
type='button'
301-
className='btn btn-secondary'
302-
onClick={() => void downloadBundle()}
305+
<div
306+
className='btn-group'
307+
role='group'
303308
>
304-
{t('Download Attachment Bundle')}
305-
</button>
309+
<button
310+
id='downloadAttachmentBundle'
311+
type='button'
312+
className='btn btn-secondary'
313+
onClick={() => void downloadBundle()}
314+
>
315+
{t('Download Attachment Bundle')}
316+
</button>
317+
</div>
306318
</div>
307-
</div>
308-
)}
309-
{selectedTab === CommonTabIds.CHANGE_LOG && (
319+
)}
320+
{selectedTab === CommonTabIds.CHANGE_LOG && (
321+
<div
322+
className='nav nav-pills justify-content-center bg-light font-weight-bold'
323+
id='pills-tab'
324+
role='tablist'
325+
>
326+
<a
327+
className={`nav-item nav-link ${changelogTab === 'list-change' ? 'active' : ''}`}
328+
onClick={() => setChangelogTab('list-change')}
329+
style={{ color: '#F7941E', fontWeight: 'bold' }}
330+
>
331+
{t('Change Log')}
332+
</a>
333+
<a
334+
className={`nav-item nav-link ${changelogTab == 'view-log' ? 'active' : ''}`}
335+
onClick={() => {
336+
if (changeLogId !== '') {
337+
setChangelogTab('view-log')
338+
}
339+
}}
340+
style={{ color: '#F7941E', fontWeight: 'bold' }}
341+
>
342+
{t('Changes')}
343+
</a>
344+
</div>
345+
)}
346+
</PageButtonHeader>
347+
</div>
348+
<div
349+
className='row'
350+
hidden={selectedTab !== CommonTabIds.SUMMARY ? true : false}
351+
>
352+
<Summary
353+
component={component}
354+
componentId={componentId}
355+
/>
356+
</div>
357+
<div
358+
className='row'
359+
hidden={selectedTab !== ComponentTabIds.RELEASE_OVERVIEW ? true : false}
360+
>
361+
<ReleaseOverview componentId={componentId} />
362+
</div>
363+
<div
364+
className='row'
365+
hidden={selectedTab !== CommonTabIds.ATTACHMENTS ? true : false}
366+
>
367+
<Attachments
368+
documentId={componentId}
369+
documentType={DocumentTypes.COMPONENT}
370+
/>
371+
</div>
372+
<div
373+
className='containers'
374+
hidden={selectedTab !== CommonTabIds.VULNERABILITIES ? true : false}
375+
>
376+
<ComponentVulnerabilities vulnerData={vulnerData} />
377+
</div>
378+
<div
379+
className='row'
380+
hidden={selectedTab !== CommonTabIds.CHANGE_LOG ? true : false}
381+
>
382+
<div className='col'>
310383
<div
311-
className='nav nav-pills justify-content-center bg-light font-weight-bold'
312-
id='pills-tab'
313-
role='tablist'
384+
className='row'
385+
hidden={changelogTab !== 'list-change' ? true : false}
314386
>
315-
<a
316-
className={`nav-item nav-link ${changelogTab === 'list-change' ? 'active' : ''}`}
317-
onClick={() => setChangelogTab('list-change')}
318-
style={{ color: '#F7941E', fontWeight: 'bold' }}
319-
>
320-
{t('Change Log')}
321-
</a>
322-
<a
323-
className={`nav-item nav-link ${changelogTab == 'view-log' ? 'active' : ''}`}
324-
onClick={() => {
325-
if (changeLogId !== '') {
326-
setChangelogTab('view-log')
327-
}
328-
}}
329-
style={{ color: '#F7941E', fontWeight: 'bold' }}
330-
>
331-
{t('Changes')}
332-
</a>
387+
<ChangeLogList
388+
setChangeLogId={setChangeLogId}
389+
documentId={componentId}
390+
setChangesLogTab={setChangelogTab}
391+
changeLogList={memoizedData}
392+
pageableQueryParam={pageableQueryParam}
393+
setPageableQueryParam={setPageableQueryParam}
394+
showProcessing={showProcessing}
395+
paginationMeta={paginationMeta}
396+
/>
333397
</div>
334-
)}
335-
</PageButtonHeader>
336-
</div>
337-
<div
338-
className='row'
339-
hidden={selectedTab !== CommonTabIds.SUMMARY ? true : false}
340-
>
341-
<Summary
342-
component={component}
343-
componentId={componentId}
344-
/>
345-
</div>
346-
<div
347-
className='row'
348-
hidden={selectedTab !== ComponentTabIds.RELEASE_OVERVIEW ? true : false}
349-
>
350-
<ReleaseOverview componentId={componentId} />
351-
</div>
352-
<div
353-
className='row'
354-
hidden={selectedTab !== CommonTabIds.ATTACHMENTS ? true : false}
355-
>
356-
<Attachments
357-
documentId={componentId}
358-
documentType={DocumentTypes.COMPONENT}
359-
/>
360-
</div>
361-
<div
362-
className='containers'
363-
hidden={selectedTab !== CommonTabIds.VULNERABILITIES ? true : false}
364-
>
365-
<ComponentVulnerabilities vulnerData={vulnerData} />
366-
</div>
367-
<div
368-
className='row'
369-
hidden={selectedTab !== CommonTabIds.CHANGE_LOG ? true : false}
370-
>
371-
<div className='col'>
372-
<div
373-
className='row'
374-
hidden={changelogTab !== 'list-change' ? true : false}
375-
>
376-
<ChangeLogList
377-
setChangeLogId={setChangeLogId}
378-
documentId={componentId}
379-
setChangesLogTab={setChangelogTab}
380-
changeLogList={memoizedData}
381-
pageableQueryParam={pageableQueryParam}
382-
setPageableQueryParam={setPageableQueryParam}
383-
showProcessing={showProcessing}
384-
paginationMeta={paginationMeta}
385-
/>
386-
</div>
387-
<div
388-
className='row'
389-
hidden={changelogTab !== 'view-log' ? true : false}
390-
>
391-
<ChangeLogDetail
392-
changeLogData={changeLogList.filter((d: Changelogs) => d.id === changeLogId)[0]}
393-
/>
394398
<div
395-
id='cardScreen'
396-
style={{ padding: '0px' }}
397-
></div>
399+
className='row'
400+
hidden={changelogTab !== 'view-log' ? true : false}
401+
>
402+
<ChangeLogDetail
403+
changeLogData={
404+
changeLogList.filter((d: Changelogs) => d.id === changeLogId)[0]
405+
}
406+
/>
407+
<div
408+
id='cardScreen'
409+
style={{ padding: '0px' }}
410+
></div>
411+
</div>
398412
</div>
399413
</div>
400414
</div>
401415
</div>
402416
</div>
403-
</div>
417+
</>
404418
)
405419
)
406420
}

‎src/app/[locale]/components/editRelease/[id]/components/EditRelease.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313

1414
import { getSession, signOut, useSession } from 'next-auth/react'
1515
import { useTranslations } from 'next-intl'
16-
import { notFound, useRouter, useSearchParams } from 'next/navigation'
16+
import { notFound, useParams, useRouter, useSearchParams } from 'next/navigation'
1717
import { ReactNode, useEffect, useState } from 'react'
18+
import Breadcrumb from 'react-bootstrap/Breadcrumb'
1819

1920
import { AccessControl } from '@/components/AccessControl/AccessControl'
2021
import EditAttachments from '@/components/Attachments/EditAttachments'
@@ -466,9 +467,18 @@ const EditRelease = ({ releaseId, isSPDXFeatureEnabled }: Props): ReactNode => {
466467
Cancel: { link: '/components/releases/detail/' + releaseId, type: 'secondary', name: t('Cancel') },
467468
}
468469

470+
const param = useParams()
471+
const locale = (param.locale as string) || 'en'
472+
const componentsPath = `/${locale}/components`
473+
469474
return (
470475
release && (
471476
<>
477+
<Breadcrumb className='container page-content'>
478+
<Breadcrumb.Item href={componentsPath}>{t('Components')}</Breadcrumb.Item>
479+
<Breadcrumb.Item href={`${componentsPath}/detail/${componentId}`}>{release.name}</Breadcrumb.Item>
480+
<Breadcrumb.Item active>{`${release.name} (${release.version})`}</Breadcrumb.Item>
481+
</Breadcrumb>
472482
<CreateMRCommentDialog<Release>
473483
show={showCommentModal}
474484
setShow={setShowCommentModal}

0 commit comments

Comments
 (0)