- Unknown
+
+ Unknown
+
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
- Unknown
+
+ Unknown
+
|
{
title?: React.ReactNode;
+ subtitle?: React.ReactNode;
headerProps?: Omit;
outterBoxProps?: Omit;
//** The location to go back to. If provided as an empty string, the browser's history will be used. If not provided (default)), then no back button is used. */
@@ -14,6 +15,7 @@ export interface SectionBoxProps extends Omit {
export function SectionBox(props: SectionBoxProps) {
const {
title,
+ subtitle,
children,
headerProps = { noPadding: false, headerStyle: 'subsection' },
outterBoxProps = {},
@@ -26,7 +28,9 @@ export function SectionBox(props: SectionBoxProps) {
const actualBackLink = typeof backLink === 'boolean' ? (!!backLink ? '' : undefined) : backLink;
if (typeof title === 'string') {
- titleElem = ;
+ titleElem = (
+
+ );
} else {
titleElem = title;
}
diff --git a/frontend/src/components/common/SectionHeader.tsx b/frontend/src/components/common/SectionHeader.tsx
index 4f450c9bdd..1cd0a03506 100644
--- a/frontend/src/components/common/SectionHeader.tsx
+++ b/frontend/src/components/common/SectionHeader.tsx
@@ -8,6 +8,7 @@ export type HeaderStyle = 'main' | 'subsection' | 'normal' | 'label';
export interface SectionHeaderProps {
title: string;
+ subtitle?: string | React.ReactNode;
actions?: React.ReactNode[] | null;
noPadding?: boolean;
headerStyle?: HeaderStyle;
@@ -38,18 +39,25 @@ export default function SectionHeader(props: SectionHeaderProps) {
>
{(!!props.title || titleSideActions.length > 0) && (
-
+
{!!props.title && (
- ({
- ...theme.palette.headerStyle[headerStyle || 'normal'],
- whiteSpace: 'pre-wrap',
- })}
- >
- {props.title}
-
+ <>
+ ({
+ ...theme.palette.headerStyle[headerStyle || 'normal'],
+ whiteSpace: 'pre-wrap',
+ })}
+ >
+ {props.title}
+
+ {!!props.subtitle && (
+
+ {props.subtitle}
+
+ )}
+ >
)}
{!!titleSideActions && (
diff --git a/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot b/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot
index 6796020c1b..c46fb4a72b 100644
--- a/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot
+++ b/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot
@@ -7,7 +7,7 @@
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
|