From c17baa36ef34131041ede626376042f57219cfd1 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Sat, 20 Aug 2022 00:31:17 +1200
Subject: [PATCH] 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             | 9 ++++++++-
 app/portainer/views/templates/templates.html        | 2 +-
 app/react/components/PageHeader/HeaderContainer.tsx | 7 +++++--
 app/react/components/PageHeader/PageHeader.tsx      | 4 +++-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index c34faebd4..825dd9052 100644
--- a/app/portainer/react/components/index.ts
+++ b/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',
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index ae2e11009..90571ca3d 100644
--- a/app/portainer/views/templates/templates.html
+++ b/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 -->
diff --git a/app/react/components/PageHeader/HeaderContainer.tsx b/app/react/components/PageHeader/HeaderContainer.tsx
index acc840dad..395fda4db 100644
--- a/app/react/components/PageHeader/HeaderContainer.tsx
+++ b/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>
diff --git a/app/react/components/PageHeader/PageHeader.tsx b/app/react/components/PageHeader/PageHeader.tsx
index 6989a8d00..a2724f5f3 100644
--- a/app/react/components/PageHeader/PageHeader.tsx
+++ b/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}>