Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 27x 27x 17x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Layout, Text, IconName, Page, Heading, Container, Breadcrumb } from '@harness/uicore'
import { Color, FontVariation } from '@harness/design-system'
import { IdentifierText } from '@cf/components/IdentifierText/IdentifierText'
import { NGBreadcrumbs } from '@common/components/NGBreadcrumbs/NGBreadcrumbs'
import RbacOptionsMenuButton, {
RbacOptionsMenuButtonProps
} from '@rbac/components/RbacOptionsMenuButton/RbacOptionsMenuButton'
import { StringKeys, useStrings } from 'framework/strings'
import css from './DetailPageTemplate.module.scss'
export interface DetailPageTemplateProps {
breadcrumbs: Breadcrumb[]
title: React.ReactNode
titleIcon?: IconName | React.ReactNode
subTitle?: string
tags?: string[] | null | undefined
identifier?: string
/** Optional extra components to be added into header (context menu, edit button, etc...) */
/** Note: Use absolute position to style it */
menuItems?: RbacOptionsMenuButtonProps['items']
metaData?: Record<string, string>
}
export const DetailPageTemplate: React.FC<DetailPageTemplateProps> = ({
breadcrumbs,
title,
subTitle,
identifier,
children,
menuItems = [],
metaData = {}
}) => {
const { getString } = useStrings()
return (
<>
<Page.Header
size="large"
breadcrumbs={<NGBreadcrumbs customPathParams={{ module: 'cf' }} links={breadcrumbs} />}
title={
<>
<Layout.Horizontal spacing="small">
<Heading level={3} font={{ variation: FontVariation.H4 }}>
{title}
</Heading>
{identifier && <IdentifierText identifier={identifier} allowCopy />}
</Layout.Horizontal>
{subTitle && (
<Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_400} padding={{ top: 'xsmall' }}>
{subTitle}
</Text>
)}
</>
}
content={
<>
{!!menuItems.length && (
<Container className={css.optionsMenu}>
<RbacOptionsMenuButton items={menuItems} />
</Container>
)}
{!!Object.keys(metaData).length && (
<dl className={css.metaData}>
{Object.entries(metaData).map(([key, val]) => (
<div className={css.metaDataPair} key={key}>
<dt>{getString(key as StringKeys)}</dt>
<dd>{val}</dd>
</div>
))}
</dl>
)}
</>
}
/>
<Page.Body>{children}</Page.Body>
</>
)
}
|