diff --git a/packages/app/src/components/techdocs/TechDocsPage.tsx b/packages/app/src/components/techdocs/TechDocsPage.tsx
index 89d0c74ad5..48a9812160 100644
--- a/packages/app/src/components/techdocs/TechDocsPage.tsx
+++ b/packages/app/src/components/techdocs/TechDocsPage.tsx
@@ -17,6 +17,7 @@
import {
TechDocsReaderPage,
TechDocsReaderPageHeader,
+ TechDocsReaderPageSubheader,
TechDocsReaderPageContent,
} from '@backstage/plugin-techdocs';
import React from 'react';
@@ -25,6 +26,7 @@ const DefaultTechDocsPage = () => {
return (
+
);
diff --git a/plugins/techdocs/api-report.md b/plugins/techdocs/api-report.md
index 0aeacde75c..2e9da8a931 100644
--- a/plugins/techdocs/api-report.md
+++ b/plugins/techdocs/api-report.md
@@ -8,6 +8,7 @@
import { ApiRef } from '@backstage/core-plugin-api';
import { AsyncState } from 'react-use/lib/useAsync';
import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { CommonProps } from '@material-ui/core/OverridableComponent';
import { ComponentType } from 'react';
import { CompoundEntityRef } from '@backstage/catalog-model';
import { Config } from '@backstage/config';
@@ -22,8 +23,10 @@ import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
import { SetStateAction } from 'react';
+import { StyledComponentProps } from '@material-ui/core';
import { TableColumn } from '@backstage/core-components';
import { TableProps } from '@backstage/core-components';
+import { ToolbarTypeMap } from '@material-ui/core';
import { UserListFilterKind } from '@backstage/plugin-catalog-react';
// @public
@@ -395,6 +398,545 @@ export type TechDocsReaderPageRenderFunction = ({
onReady?: () => void;
}) => JSX.Element;
+// @public
+export const TechDocsReaderPageSubheader: React_2.ComponentType<
+ Pick<
+ {
+ disableGutters?: boolean | undefined;
+ variant?: 'dense' | 'regular' | undefined;
+ } & CommonProps> &
+ Pick<
+ Pick<
+ React_2.DetailedHTMLProps<
+ React_2.HTMLAttributes,
+ HTMLDivElement
+ >,
+ 'key' | keyof React_2.HTMLAttributes
+ > & {
+ ref?:
+ | ((instance: HTMLDivElement | null) => void)
+ | React_2.RefObject
+ | null
+ | undefined;
+ },
+ | 'key'
+ | 'id'
+ | 'color'
+ | 'translate'
+ | 'hidden'
+ | 'dir'
+ | 'slot'
+ | 'title'
+ | 'accessKey'
+ | 'draggable'
+ | 'lang'
+ | 'prefix'
+ | 'children'
+ | 'contentEditable'
+ | 'inputMode'
+ | 'tabIndex'
+ | 'ref'
+ | 'defaultChecked'
+ | 'defaultValue'
+ | 'suppressContentEditableWarning'
+ | 'suppressHydrationWarning'
+ | 'contextMenu'
+ | 'placeholder'
+ | 'spellCheck'
+ | 'radioGroup'
+ | 'role'
+ | 'about'
+ | 'datatype'
+ | 'inlist'
+ | 'property'
+ | 'resource'
+ | 'typeof'
+ | 'vocab'
+ | 'autoCapitalize'
+ | 'autoCorrect'
+ | 'autoSave'
+ | 'itemProp'
+ | 'itemScope'
+ | 'itemType'
+ | 'itemID'
+ | 'itemRef'
+ | 'results'
+ | 'security'
+ | 'unselectable'
+ | 'is'
+ | 'aria-activedescendant'
+ | 'aria-atomic'
+ | 'aria-autocomplete'
+ | 'aria-busy'
+ | 'aria-checked'
+ | 'aria-colcount'
+ | 'aria-colindex'
+ | 'aria-colspan'
+ | 'aria-controls'
+ | 'aria-current'
+ | 'aria-describedby'
+ | 'aria-details'
+ | 'aria-disabled'
+ | 'aria-dropeffect'
+ | 'aria-errormessage'
+ | 'aria-expanded'
+ | 'aria-flowto'
+ | 'aria-grabbed'
+ | 'aria-haspopup'
+ | 'aria-hidden'
+ | 'aria-invalid'
+ | 'aria-keyshortcuts'
+ | 'aria-label'
+ | 'aria-labelledby'
+ | 'aria-level'
+ | 'aria-live'
+ | 'aria-modal'
+ | 'aria-multiline'
+ | 'aria-multiselectable'
+ | 'aria-orientation'
+ | 'aria-owns'
+ | 'aria-placeholder'
+ | 'aria-posinset'
+ | 'aria-pressed'
+ | 'aria-readonly'
+ | 'aria-relevant'
+ | 'aria-required'
+ | 'aria-roledescription'
+ | 'aria-rowcount'
+ | 'aria-rowindex'
+ | 'aria-rowspan'
+ | 'aria-selected'
+ | 'aria-setsize'
+ | 'aria-sort'
+ | 'aria-valuemax'
+ | 'aria-valuemin'
+ | 'aria-valuenow'
+ | 'aria-valuetext'
+ | 'dangerouslySetInnerHTML'
+ | 'onCopy'
+ | 'onCopyCapture'
+ | 'onCut'
+ | 'onCutCapture'
+ | 'onPaste'
+ | 'onPasteCapture'
+ | 'onCompositionEnd'
+ | 'onCompositionEndCapture'
+ | 'onCompositionStart'
+ | 'onCompositionStartCapture'
+ | 'onCompositionUpdate'
+ | 'onCompositionUpdateCapture'
+ | 'onFocus'
+ | 'onFocusCapture'
+ | 'onBlur'
+ | 'onBlurCapture'
+ | 'onChange'
+ | 'onChangeCapture'
+ | 'onBeforeInput'
+ | 'onBeforeInputCapture'
+ | 'onInput'
+ | 'onInputCapture'
+ | 'onReset'
+ | 'onResetCapture'
+ | 'onSubmit'
+ | 'onSubmitCapture'
+ | 'onInvalid'
+ | 'onInvalidCapture'
+ | 'onLoad'
+ | 'onLoadCapture'
+ | 'onError'
+ | 'onErrorCapture'
+ | 'onKeyDown'
+ | 'onKeyDownCapture'
+ | 'onKeyPress'
+ | 'onKeyPressCapture'
+ | 'onKeyUp'
+ | 'onKeyUpCapture'
+ | 'onAbort'
+ | 'onAbortCapture'
+ | 'onCanPlay'
+ | 'onCanPlayCapture'
+ | 'onCanPlayThrough'
+ | 'onCanPlayThroughCapture'
+ | 'onDurationChange'
+ | 'onDurationChangeCapture'
+ | 'onEmptied'
+ | 'onEmptiedCapture'
+ | 'onEncrypted'
+ | 'onEncryptedCapture'
+ | 'onEnded'
+ | 'onEndedCapture'
+ | 'onLoadedData'
+ | 'onLoadedDataCapture'
+ | 'onLoadedMetadata'
+ | 'onLoadedMetadataCapture'
+ | 'onLoadStart'
+ | 'onLoadStartCapture'
+ | 'onPause'
+ | 'onPauseCapture'
+ | 'onPlay'
+ | 'onPlayCapture'
+ | 'onPlaying'
+ | 'onPlayingCapture'
+ | 'onProgress'
+ | 'onProgressCapture'
+ | 'onRateChange'
+ | 'onRateChangeCapture'
+ | 'onSeeked'
+ | 'onSeekedCapture'
+ | 'onSeeking'
+ | 'onSeekingCapture'
+ | 'onStalled'
+ | 'onStalledCapture'
+ | 'onSuspend'
+ | 'onSuspendCapture'
+ | 'onTimeUpdate'
+ | 'onTimeUpdateCapture'
+ | 'onVolumeChange'
+ | 'onVolumeChangeCapture'
+ | 'onWaiting'
+ | 'onWaitingCapture'
+ | 'onAuxClick'
+ | 'onAuxClickCapture'
+ | 'onClick'
+ | 'onClickCapture'
+ | 'onContextMenu'
+ | 'onContextMenuCapture'
+ | 'onDoubleClick'
+ | 'onDoubleClickCapture'
+ | 'onDrag'
+ | 'onDragCapture'
+ | 'onDragEnd'
+ | 'onDragEndCapture'
+ | 'onDragEnter'
+ | 'onDragEnterCapture'
+ | 'onDragExit'
+ | 'onDragExitCapture'
+ | 'onDragLeave'
+ | 'onDragLeaveCapture'
+ | 'onDragOver'
+ | 'onDragOverCapture'
+ | 'onDragStart'
+ | 'onDragStartCapture'
+ | 'onDrop'
+ | 'onDropCapture'
+ | 'onMouseDown'
+ | 'onMouseDownCapture'
+ | 'onMouseEnter'
+ | 'onMouseLeave'
+ | 'onMouseMove'
+ | 'onMouseMoveCapture'
+ | 'onMouseOut'
+ | 'onMouseOutCapture'
+ | 'onMouseOver'
+ | 'onMouseOverCapture'
+ | 'onMouseUp'
+ | 'onMouseUpCapture'
+ | 'onSelect'
+ | 'onSelectCapture'
+ | 'onTouchCancel'
+ | 'onTouchCancelCapture'
+ | 'onTouchEnd'
+ | 'onTouchEndCapture'
+ | 'onTouchMove'
+ | 'onTouchMoveCapture'
+ | 'onTouchStart'
+ | 'onTouchStartCapture'
+ | 'onPointerDown'
+ | 'onPointerDownCapture'
+ | 'onPointerMove'
+ | 'onPointerMoveCapture'
+ | 'onPointerUp'
+ | 'onPointerUpCapture'
+ | 'onPointerCancel'
+ | 'onPointerCancelCapture'
+ | 'onPointerEnter'
+ | 'onPointerEnterCapture'
+ | 'onPointerLeave'
+ | 'onPointerLeaveCapture'
+ | 'onPointerOver'
+ | 'onPointerOverCapture'
+ | 'onPointerOut'
+ | 'onPointerOutCapture'
+ | 'onGotPointerCapture'
+ | 'onGotPointerCaptureCapture'
+ | 'onLostPointerCapture'
+ | 'onLostPointerCaptureCapture'
+ | 'onScroll'
+ | 'onScrollCapture'
+ | 'onWheel'
+ | 'onWheelCapture'
+ | 'onAnimationStart'
+ | 'onAnimationStartCapture'
+ | 'onAnimationEnd'
+ | 'onAnimationEndCapture'
+ | 'onAnimationIteration'
+ | 'onAnimationIterationCapture'
+ | 'onTransitionEnd'
+ | 'onTransitionEndCapture'
+ >,
+ | 'key'
+ | 'id'
+ | 'color'
+ | 'translate'
+ | 'hidden'
+ | 'dir'
+ | 'slot'
+ | 'style'
+ | 'title'
+ | 'accessKey'
+ | 'draggable'
+ | 'lang'
+ | 'className'
+ | 'prefix'
+ | 'children'
+ | 'contentEditable'
+ | 'inputMode'
+ | 'tabIndex'
+ | 'ref'
+ | 'defaultChecked'
+ | 'defaultValue'
+ | 'suppressContentEditableWarning'
+ | 'suppressHydrationWarning'
+ | 'contextMenu'
+ | 'placeholder'
+ | 'spellCheck'
+ | 'radioGroup'
+ | 'role'
+ | 'about'
+ | 'datatype'
+ | 'inlist'
+ | 'property'
+ | 'resource'
+ | 'typeof'
+ | 'vocab'
+ | 'autoCapitalize'
+ | 'autoCorrect'
+ | 'autoSave'
+ | 'itemProp'
+ | 'itemScope'
+ | 'itemType'
+ | 'itemID'
+ | 'itemRef'
+ | 'results'
+ | 'security'
+ | 'unselectable'
+ | 'is'
+ | 'aria-activedescendant'
+ | 'aria-atomic'
+ | 'aria-autocomplete'
+ | 'aria-busy'
+ | 'aria-checked'
+ | 'aria-colcount'
+ | 'aria-colindex'
+ | 'aria-colspan'
+ | 'aria-controls'
+ | 'aria-current'
+ | 'aria-describedby'
+ | 'aria-details'
+ | 'aria-disabled'
+ | 'aria-dropeffect'
+ | 'aria-errormessage'
+ | 'aria-expanded'
+ | 'aria-flowto'
+ | 'aria-grabbed'
+ | 'aria-haspopup'
+ | 'aria-hidden'
+ | 'aria-invalid'
+ | 'aria-keyshortcuts'
+ | 'aria-label'
+ | 'aria-labelledby'
+ | 'aria-level'
+ | 'aria-live'
+ | 'aria-modal'
+ | 'aria-multiline'
+ | 'aria-multiselectable'
+ | 'aria-orientation'
+ | 'aria-owns'
+ | 'aria-placeholder'
+ | 'aria-posinset'
+ | 'aria-pressed'
+ | 'aria-readonly'
+ | 'aria-relevant'
+ | 'aria-required'
+ | 'aria-roledescription'
+ | 'aria-rowcount'
+ | 'aria-rowindex'
+ | 'aria-rowspan'
+ | 'aria-selected'
+ | 'aria-setsize'
+ | 'aria-sort'
+ | 'aria-valuemax'
+ | 'aria-valuemin'
+ | 'aria-valuenow'
+ | 'aria-valuetext'
+ | 'dangerouslySetInnerHTML'
+ | 'onCopy'
+ | 'onCopyCapture'
+ | 'onCut'
+ | 'onCutCapture'
+ | 'onPaste'
+ | 'onPasteCapture'
+ | 'onCompositionEnd'
+ | 'onCompositionEndCapture'
+ | 'onCompositionStart'
+ | 'onCompositionStartCapture'
+ | 'onCompositionUpdate'
+ | 'onCompositionUpdateCapture'
+ | 'onFocus'
+ | 'onFocusCapture'
+ | 'onBlur'
+ | 'onBlurCapture'
+ | 'onChange'
+ | 'onChangeCapture'
+ | 'onBeforeInput'
+ | 'onBeforeInputCapture'
+ | 'onInput'
+ | 'onInputCapture'
+ | 'onReset'
+ | 'onResetCapture'
+ | 'onSubmit'
+ | 'onSubmitCapture'
+ | 'onInvalid'
+ | 'onInvalidCapture'
+ | 'onLoad'
+ | 'onLoadCapture'
+ | 'onError'
+ | 'onErrorCapture'
+ | 'onKeyDown'
+ | 'onKeyDownCapture'
+ | 'onKeyPress'
+ | 'onKeyPressCapture'
+ | 'onKeyUp'
+ | 'onKeyUpCapture'
+ | 'onAbort'
+ | 'onAbortCapture'
+ | 'onCanPlay'
+ | 'onCanPlayCapture'
+ | 'onCanPlayThrough'
+ | 'onCanPlayThroughCapture'
+ | 'onDurationChange'
+ | 'onDurationChangeCapture'
+ | 'onEmptied'
+ | 'onEmptiedCapture'
+ | 'onEncrypted'
+ | 'onEncryptedCapture'
+ | 'onEnded'
+ | 'onEndedCapture'
+ | 'onLoadedData'
+ | 'onLoadedDataCapture'
+ | 'onLoadedMetadata'
+ | 'onLoadedMetadataCapture'
+ | 'onLoadStart'
+ | 'onLoadStartCapture'
+ | 'onPause'
+ | 'onPauseCapture'
+ | 'onPlay'
+ | 'onPlayCapture'
+ | 'onPlaying'
+ | 'onPlayingCapture'
+ | 'onProgress'
+ | 'onProgressCapture'
+ | 'onRateChange'
+ | 'onRateChangeCapture'
+ | 'onSeeked'
+ | 'onSeekedCapture'
+ | 'onSeeking'
+ | 'onSeekingCapture'
+ | 'onStalled'
+ | 'onStalledCapture'
+ | 'onSuspend'
+ | 'onSuspendCapture'
+ | 'onTimeUpdate'
+ | 'onTimeUpdateCapture'
+ | 'onVolumeChange'
+ | 'onVolumeChangeCapture'
+ | 'onWaiting'
+ | 'onWaitingCapture'
+ | 'onAuxClick'
+ | 'onAuxClickCapture'
+ | 'onClick'
+ | 'onClickCapture'
+ | 'onContextMenu'
+ | 'onContextMenuCapture'
+ | 'onDoubleClick'
+ | 'onDoubleClickCapture'
+ | 'onDrag'
+ | 'onDragCapture'
+ | 'onDragEnd'
+ | 'onDragEndCapture'
+ | 'onDragEnter'
+ | 'onDragEnterCapture'
+ | 'onDragExit'
+ | 'onDragExitCapture'
+ | 'onDragLeave'
+ | 'onDragLeaveCapture'
+ | 'onDragOver'
+ | 'onDragOverCapture'
+ | 'onDragStart'
+ | 'onDragStartCapture'
+ | 'onDrop'
+ | 'onDropCapture'
+ | 'onMouseDown'
+ | 'onMouseDownCapture'
+ | 'onMouseEnter'
+ | 'onMouseLeave'
+ | 'onMouseMove'
+ | 'onMouseMoveCapture'
+ | 'onMouseOut'
+ | 'onMouseOutCapture'
+ | 'onMouseOver'
+ | 'onMouseOverCapture'
+ | 'onMouseUp'
+ | 'onMouseUpCapture'
+ | 'onSelect'
+ | 'onSelectCapture'
+ | 'onTouchCancel'
+ | 'onTouchCancelCapture'
+ | 'onTouchEnd'
+ | 'onTouchEndCapture'
+ | 'onTouchMove'
+ | 'onTouchMoveCapture'
+ | 'onTouchStart'
+ | 'onTouchStartCapture'
+ | 'onPointerDown'
+ | 'onPointerDownCapture'
+ | 'onPointerMove'
+ | 'onPointerMoveCapture'
+ | 'onPointerUp'
+ | 'onPointerUpCapture'
+ | 'onPointerCancel'
+ | 'onPointerCancelCapture'
+ | 'onPointerEnter'
+ | 'onPointerEnterCapture'
+ | 'onPointerLeave'
+ | 'onPointerLeaveCapture'
+ | 'onPointerOver'
+ | 'onPointerOverCapture'
+ | 'onPointerOut'
+ | 'onPointerOutCapture'
+ | 'onGotPointerCapture'
+ | 'onGotPointerCaptureCapture'
+ | 'onLostPointerCapture'
+ | 'onLostPointerCaptureCapture'
+ | 'onScroll'
+ | 'onScrollCapture'
+ | 'onWheel'
+ | 'onWheelCapture'
+ | 'onAnimationStart'
+ | 'onAnimationStartCapture'
+ | 'onAnimationEnd'
+ | 'onAnimationEndCapture'
+ | 'onAnimationIteration'
+ | 'onAnimationIterationCapture'
+ | 'onTransitionEnd'
+ | 'onTransitionEndCapture'
+ | 'variant'
+ | 'innerRef'
+ | 'disableGutters'
+ > &
+ StyledComponentProps<'root'>
+>;
+
// @public
export type TechDocsReaderPageValue = {
metadata: AsyncState;
diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx
index 45a89d0c84..5e89a09fea 100644
--- a/plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsReaderPageSubheader/TechDocsReaderPageSubheader.tsx
@@ -23,6 +23,11 @@ import {
useTechDocsAddons,
} from '@backstage/techdocs-addons';
+/**
+ * Renders the reader page subheader.
+ * Please use the Tech Docs add-ons to customize it
+ * @public
+ */
export const TechDocsReaderPageSubheader = withStyles(theme => ({
root: {
gridArea: 'pageSubheader',
diff --git a/plugins/techdocs/src/reader/components/index.ts b/plugins/techdocs/src/reader/components/index.ts
index 281a16cc08..d910135e91 100644
--- a/plugins/techdocs/src/reader/components/index.ts
+++ b/plugins/techdocs/src/reader/components/index.ts
@@ -32,5 +32,6 @@ export {
} from './TechDocsReaderPage';
export * from './TechDocsReaderPageHeader';
export * from './TechDocsReaderPageContent';
+export * from './TechDocsReaderPageSubheader';
export * from './TechDocsStateIndicator';
export type { ReaderState, ContentStateTypes } from './useReaderState';