fix custom props

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx

@@ -51,24 +51,27 @@ export const DefaultTechDocsHome = (props: TechDocsIndexPageProps) => {
     columns,
     actions,
     ownerPickerMode,
-    showHeader = true,
-    options,
-    title,
-    subtitle,
-    showSupport = true,
     pagination,
+    options,
+    PageWrapper,
+    CustomHeader,
   } = props;
-  const Wrapper = showHeader ? TechDocsPageWrapper : React.Fragment;
+  const Wrapper: React.FC<{
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+  }> = PageWrapper ? PageWrapper : TechDocsPageWrapper;
+  const Header: React.FC =
+    CustomHeader ||
+    (() => (
+      <ContentHeader title="">
+        <SupportButton>Discover documentation in your ecosystem.</SupportButton>
+      </ContentHeader>
+    ));
   return (
-    <Wrapper title={title} subtitle={subtitle}>
+    <Wrapper>
       <Content>
-        {showSupport && (
-          <ContentHeader title="">
-            <SupportButton>
-              Discover documentation in your ecosystem.
-            </SupportButton>
-          </ContentHeader>
-        )}
+        <Header />
         <EntityListProvider pagination={pagination}>
           <CatalogFilterLayout>
             <CatalogFilterLayout.Filters>

plugins/techdocs/src/home/components/TechDocsCustomHome.test.tsx

@@ -19,6 +19,7 @@ import {
   starredEntitiesApiRef,
   MockStarredEntitiesApi,
 } from '@backstage/plugin-catalog-react';
+import { PageWithHeader } from '@backstage/core-components';
 import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
 import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
 import { screen } from '@testing-library/react';
@@ -103,7 +104,7 @@ describe('TechDocsCustomHome', () => {
       await screen.findByText('Second Tab Description'),
     ).toBeInTheDocument();
   });
-  it('should render ContentHeader based on showHeader prop', async () => {
+  it('should render ContentHeader based on CustomHeader prop', async () => {
     const tabsConfig = [
       {
         label: 'First Tab',
@@ -112,7 +113,7 @@ describe('TechDocsCustomHome', () => {
             title: 'First Tab',
             description: 'First Tab Description',
             panelType: 'DocsCardGrid' as PanelType,
-            panelProps: { showHeader: false },
+            panelProps: { CustomHeader: React.Fragment },
             filterPredicate: () => true,
           },
         ],
@@ -134,71 +135,6 @@ describe('TechDocsCustomHome', () => {
       screen.queryByText('Discover documentation in your ecosystem.'),
     ).not.toBeInTheDocument();
   });
-  it('should render SupportButton based on showSupport prop', async () => {
-    const tabsConfig = [
-      {
-        label: 'First Tab',
-        panels: [
-          {
-            title: 'First Tab',
-            description: 'First Tab Description',
-            panelType: 'DocsCardGrid' as PanelType,
-            filterPredicate: () => true,
-            panelProps: { showSupport: false },
-          },
-        ],
-      },
-    ];
-
-    await renderInTestApp(
-      <ApiProvider apis={apiRegistry}>
-        <TechDocsCustomHome tabsConfig={tabsConfig} />
-      </ApiProvider>,
-      {
-        mountedRoutes: {
-          '/docs/:namespace/:kind/:name/*': rootDocsRouteRef,
-        },
-      },
-    );
-
-    expect(
-      screen.queryByText('Discover documentation in your ecosystem.'),
-    ).not.toBeInTheDocument();
-  });
-  it('should hide subtitle when showSubtitle is false', async () => {
-    const tabsConfig = [
-      {
-        label: 'First Tab',
-        panels: [
-          {
-            title: 'First Tab',
-            description: 'First Tab Description',
-            panelType: 'DocsCardGrid' as PanelType,
-            filterPredicate: () => true,
-          },
-        ],
-      },
-    ];
-
-    await renderInTestApp(
-      <ApiProvider apis={apiRegistry}>
-        <TechDocsCustomHome
-          tabsConfig={tabsConfig}
-          title="Custom Title"
-          subtitle="Custom Subtitle"
-          showSubtitle={false}
-        />
-      </ApiProvider>,
-      {
-        mountedRoutes: {
-          '/docs/:namespace/:kind/:name/*': rootDocsRouteRef,
-        },
-      },
-    );
-
-    expect(screen.getByText('Custom Title')).toBeInTheDocument();
-    expect(screen.queryByText('Custom Subtitle')).not.toBeInTheDocument();
-  });
   it('should render title and subtitle', async () => {
     const tabsConfig = [
       {
@@ -218,8 +154,15 @@ describe('TechDocsCustomHome', () => {
       <ApiProvider apis={apiRegistry}>
         <TechDocsCustomHome
           tabsConfig={tabsConfig}
-          title="Custom Title"
-          subtitle="Custom Subtitle"
+          CustomPageWrapper={({ children }: React.PropsWithChildren<{}>) => (
+            <PageWithHeader
+              title="Custom Title"
+              subtitle="Custom Subtitle"
+              themeId="documentation"
+            >
+              {children}
+            </PageWithHeader>
+          )}
         />
       </ApiProvider>,
       {

plugins/techdocs/src/home/components/TechDocsCustomHome.tsx

@@ -69,11 +69,11 @@ export type PanelType =
  * @public
  */
 export interface PanelProps {
-  showHeader?: boolean;
-  showSupport?: boolean;
   options?: TableOptions<DocsTableRow>;
   linkContent?: string | JSX.Element;
   linkDestination?: (entity: Entity) => string | undefined;
+  PageWrapper?: React.FC;
+  CustomHeader?: React.FC;
 }
 
 /**
@@ -146,17 +146,21 @@ export const CustomDocsPanel = ({
     );
   });
 
+  const Header: React.FC =
+    config.panelProps?.CustomHeader ||
+    (() => (
+      <ContentHeader title={config.title} description={config.description}>
+        {index === 0 ? (
+          <SupportButton>
+            Discover documentation in your ecosystem.
+          </SupportButton>
+        ) : null}
+      </ContentHeader>
+    ));
+
   return (
     <>
-      {(config.panelProps?.showHeader ?? true) && (
-        <ContentHeader title={config.title} description={config.description}>
-          {index === 0 && (config.panelProps?.showSupport ?? true) && (
-            <SupportButton>
-              Discover documentation in your ecosystem.
-            </SupportButton>
-          )}
-        </ContentHeader>
-      )}
+      <Header />
       <div className={classes.panelContainer}>
         <EntityListProvider>
           <Panel
@@ -178,13 +182,11 @@ export const CustomDocsPanel = ({
 export type TechDocsCustomHomeProps = {
   tabsConfig: TabsConfig;
   filter?: EntityFilterQuery;
-  title?: string;
-  subtitle?: string;
-  showSubtitle?: boolean;
+  CustomPageWrapper?: React.FC;
 };
 
 export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {
-  const { tabsConfig, filter, title, subtitle, showSubtitle = true } = props;
+  const { tabsConfig, filter, CustomPageWrapper } = props;
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const catalogApi: CatalogApi = useApi(catalogApiRef);
 
@@ -216,11 +218,7 @@ export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {
 
   if (loading) {
     return (
-      <TechDocsPageWrapper
-        title={title}
-        subtitle={subtitle}
-        showSubtitle={showSubtitle}
-      >
+      <TechDocsPageWrapper CustomPageWrapper={CustomPageWrapper}>
         <Content>
           <Progress />
         </Content>
@@ -230,11 +228,7 @@ export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {
 
   if (error) {
     return (
-      <TechDocsPageWrapper
-        title={title}
-        subtitle={subtitle}
-        showSubtitle={showSubtitle}
-      >
+      <TechDocsPageWrapper CustomPageWrapper={CustomPageWrapper}>
         <Content>
           <WarningPanel
             severity="error"
@@ -248,11 +242,7 @@ export const TechDocsCustomHome = (props: TechDocsCustomHomeProps) => {
   }
 
   return (
-    <TechDocsPageWrapper
-      title={title}
-      subtitle={subtitle}
-      showSubtitle={showSubtitle}
-    >
+    <TechDocsPageWrapper CustomPageWrapper={CustomPageWrapper}>
       <HeaderTabs
         selectedIndex={selectedTab}
         onChange={index => setSelectedTab(index)}

plugins/techdocs/src/home/components/TechDocsIndexPage.tsx

@@ -39,12 +39,10 @@ export type TechDocsIndexPageProps = {
   columns?: TableColumn<DocsTableRow>[];
   actions?: TableProps<DocsTableRow>['actions'];
   ownerPickerMode?: EntityOwnerPickerProps['mode'];
-  showHeader?: boolean;
-  showSupport?: boolean;
-  options?: TableOptions<DocsTableRow>;
-  title?: string;
-  subtitle?: string;
   pagination?: EntityListPagination;
+  options?: TableOptions<DocsTableRow>;
+  PageWrapper?: React.FC;
+  CustomHeader?: React.FC;
 };
 
 export const TechDocsIndexPage = (props: TechDocsIndexPageProps) => {

plugins/techdocs/src/home/components/TechDocsPageWrapper.tsx

@@ -26,9 +26,7 @@ import { useApi, configApiRef } from '@backstage/core-plugin-api';
  */
 export type TechDocsPageWrapperProps = {
   children?: React.ReactNode;
-  title?: string;
-  subtitle?: string;
-  showSubtitle?: boolean;
+  CustomPageWrapper?: React.FC<{ children?: React.ReactNode }>;
 };
 
 /**
@@ -37,21 +35,25 @@ export type TechDocsPageWrapperProps = {
  * @public
  */
 export const TechDocsPageWrapper = (props: TechDocsPageWrapperProps) => {
-  const { children, title, subtitle, showSubtitle = true } = props;
+  const { children, CustomPageWrapper } = props;
   const configApi = useApi(configApiRef);
-  const generatedSubtitle =
-    subtitle ||
-    `Documentation available in ${
-      configApi.getOptionalString('organization.name') ?? 'Backstage'
-    }`;
+  const generatedSubtitle = `Documentation available in ${
+    configApi.getOptionalString('organization.name') ?? 'Backstage'
+  }`;
 
   return (
-    <PageWithHeader
-      title={title || 'Documentation'}
-      subtitle={showSubtitle ? generatedSubtitle : undefined}
-      themeId="documentation"
-    >
-      {children}
-    </PageWithHeader>
+    <>
+      {CustomPageWrapper ? (
+        <CustomPageWrapper>{children}</CustomPageWrapper>
+      ) : (
+        <PageWithHeader
+          title="Documentation"
+          subtitle={generatedSubtitle}
+          themeId="documentation"
+        >
+          {children}
+        </PageWithHeader>
+      )}
+    </>
   );
 };

plugins/techdocs/src/index.ts

@@ -67,3 +67,5 @@ export type {
   DeprecatedTechDocsEntityMetadata as TechDocsEntityMetadata,
   DeprecatedTechDocsMetadata as TechDocsMetadata,
 };
+
+export * from './overridableComponents';