fix(app-template): fixed the app template list not scroll to top issue (#7519)

* fix(app-template): fixed the app template list not scroll to top issue

* fix(templates): added id prop to PageHeader component.

app/portainer/react/components/index.ts

@@ -49,7 +49,14 @@ export const componentsModule = angular
   .component('viewLoading', r2a(ViewLoading, ['message']))
   .component(
     'pageHeader',
-    r2a(PageHeader, ['title', 'breadcrumbs', 'loading', 'onReload', 'reload'])
+    r2a(PageHeader, [
+      'id',
+      'title',
+      'breadcrumbs',
+      'loading',
+      'onReload',
+      'reload',
+    ])
   )
   .component(
     'fallbackImage',

app/portainer/views/templates/templates.html

@@ -1,4 +1,4 @@
-<page-header title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
+<page-header id="'view-top'" title="'Application templates list'" breadcrumbs="['Templates']"> </page-header>
 
 <div class="row">
   <!-- stack-form -->

app/react/components/PageHeader/HeaderContainer.tsx

@@ -12,11 +12,14 @@ export function useHeaderContext() {
     throw new Error('Should be nested inside a HeaderContainer component');
   }
 }
+interface Props {
+  id?: string;
+}
 
-export function HeaderContainer({ children }: PropsWithChildren<unknown>) {
+export function HeaderContainer({ id, children }: PropsWithChildren<Props>) {
   return (
     <Context.Provider value>
-      <div className={clsx('row', styles.header)}>
+      <div id={id} className={clsx('row', styles.header)}>
         <div id="loadingbar-placeholder" />
         <div className="col-xs-12">
           <div className={styles.meta}>{children}</div>

app/react/components/PageHeader/PageHeader.tsx

@@ -10,6 +10,7 @@ import { HeaderTitle } from './HeaderTitle';
 import styles from './PageHeader.module.css';
 
 interface Props {
+  id?: string;
   reload?: boolean;
   loading?: boolean;
   onReload?(): Promise<void> | void;
@@ -18,6 +19,7 @@ interface Props {
 }
 
 export function PageHeader({
+  id,
   title,
   breadcrumbs = [],
   reload,
@@ -31,7 +33,7 @@ export function PageHeader({
   }
 
   return (
-    <HeaderContainer>
+    <HeaderContainer id={id}>
       <Breadcrumbs breadcrumbs={breadcrumbs} />
 
       <HeaderTitle title={title}>