github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
pull/7550/head
fhanportainer 2022-08-20 00:31:17 +12:00 committed by GitHub
parent 8cbff097e4
commit c17baa36ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/portainer/react/components/index.ts
View File

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

2
app/portainer/views/templates/templates.html
View File

@ -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"> <div class="row">
<!-- stack-form --> <!-- stack-form -->

7
app/react/components/PageHeader/HeaderContainer.tsx
View File

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

4
app/react/components/PageHeader/PageHeader.tsx
View File

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