@@ -109,9 +130,37 @@ export const ListPageLayout = ({
}
/>
)}
- {children}
+ {children({ resources: resourcesForCurrentPage })}
+ {resources.length > 10 && (
+
{
+ setPage(newPage);
+ setPageSize(newPageSize);
+ }}
+ page={page}
+ pageSize={pageSize}
+ pageSizes={[10, 25, 50, 100]}
+ totalItems={resources.length}
+ />
+ )}
>
);
};
export default injectIntl(ListPageLayout);
+
+ListPageLayout.propTypes = {
+ children: PropTypes.func.isRequired
+};
diff --git a/src/containers/ListPageLayout/ListPageLayout.stories.js b/src/containers/ListPageLayout/ListPageLayout.stories.js
index e682ec6b4..b62e67e14 100644
--- a/src/containers/ListPageLayout/ListPageLayout.stories.js
+++ b/src/containers/ListPageLayout/ListPageLayout.stories.js
@@ -1,5 +1,5 @@
/*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -13,6 +13,7 @@ limitations under the License.
import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
+import { Table } from '@tektoncd/dashboard-components';
import { ALL_NAMESPACES } from '@tektoncd/dashboard-utils';
import ListPageLayoutContainer from './ListPageLayout';
@@ -42,6 +43,10 @@ const namespaceContext = {
};
export default {
+ args: {
+ hideNamespacesDropdown: false,
+ title: 'PipelineRuns'
+ },
component: ListPageLayoutContainer,
decorators: [
Story => {
@@ -64,20 +69,27 @@ export default {
export const Base = args => (
- page content goes here
+ {() => page content goes here}
);
-Base.args = {
- hideNamespacesDropdown: false,
- title: 'PipelineRuns'
-};
export const WithFilters = args => (
- page content goes here
+ {() => page content goes here}
+
+);
+
+export const WithPagination = args => (
+ ({
+ id: index,
+ value: `Row ${index + 1}`
+ }))}
+ {...args}
+ >
+ {({ resources }) => (
+
+ )}
);
-WithFilters.args = {
- hideNamespacesDropdown: false,
- title: 'PipelineRuns'
-};
diff --git a/src/containers/ListPageLayout/ListPageLayout.test.js b/src/containers/ListPageLayout/ListPageLayout.test.js
index 8bf281b6f..f342e5ab5 100644
--- a/src/containers/ListPageLayout/ListPageLayout.test.js
+++ b/src/containers/ListPageLayout/ListPageLayout.test.js
@@ -1,5 +1,5 @@
/*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -36,7 +36,9 @@ describe('ListPageLayout', () => {
,
+ >
+ {() => {}}
+ ,
{ path, route: path }
);
fireEvent.click(getByDisplayValue(/All Namespaces/i));
@@ -65,10 +67,9 @@ describe('ListPageLayout', () => {
const selectNamespace = jest.fn();
jest.spyOn(window.history, 'pushState');
const { getByText, getByDisplayValue } = renderWithRouter(
- ,
+
+ {() => {}}
+ ,
{ path, route: `/namespaces/${namespace}/fake/path` }
);
fireEvent.click(getByDisplayValue(namespace));
@@ -94,10 +95,9 @@ describe('ListPageLayout', () => {
jest.spyOn(window.history, 'pushState');
const path = '/namespaces/:namespace/fake/path';
const { getByText, getByDisplayValue } = renderWithRouter(
- ,
+
+ {() => {}}
+ ,
{
path,
route: `/namespaces/${namespace}/fake/path`
@@ -126,10 +126,9 @@ describe('ListPageLayout', () => {
jest.spyOn(window.history, 'pushState');
const path = '/namespaces/:namespace/fake/path';
const { getByTitle } = renderWithRouter(
- ,
+
+ {() => {}}
+ ,
{ path, route: `/namespaces/${namespace}/fake/path` }
);
fireEvent.click(getByTitle(/clear selected item/i));
@@ -144,26 +143,28 @@ describe('ListPageLayout', () => {
it('does not render namespaces dropdown in single namespace visibility mode', () => {
jest.spyOn(API, 'useTenantNamespace').mockImplementation(() => 'fake');
const { queryByPlaceholderText } = renderWithRouter(
-
+ {() => {}}
);
expect(queryByPlaceholderText(/select namespace/i)).toBeFalsy();
});
it('does not render namespaces dropdown when hideNamespacesDropdown is true', () => {
const { queryByPlaceholderText } = renderWithRouter(
-
+ {() => {}}
);
expect(queryByPlaceholderText(/select namespace/i)).toBeFalsy();
});
it('does not render LabelFilter input by default', () => {
- const { queryByLabelText } = renderWithRouter();
+ const { queryByLabelText } = renderWithRouter(
+ {() => {}}
+ );
expect(queryByLabelText(/Input a label filter/i)).toBeFalsy();
});
it('renders LabelFilter input when filters prop is provided', () => {
const { getAllByLabelText } = renderWithRouter(
-
+ {() => {}}
);
expect(getAllByLabelText(/Input a label filter/i)[0]).toBeTruthy();
});
diff --git a/src/containers/PipelineResources/PipelineResources.js b/src/containers/PipelineResources/PipelineResources.js
index 47466090c..872547c6e 100644
--- a/src/containers/PipelineResources/PipelineResources.js
+++ b/src/containers/PipelineResources/PipelineResources.js
@@ -1,5 +1,5 @@
/*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -150,24 +150,29 @@ export function PipelineResources({ intl }) {
-
- {isDeleteModalOpen ? (
-
- ) : null}
+ {({ resources }) => (
+ <>
+
+ {isDeleteModalOpen ? (
+
+ ) : null}
+ >
+ )}
);
}
diff --git a/src/containers/PipelineRuns/PipelineRuns.js b/src/containers/PipelineRuns/PipelineRuns.js
index 54d5b0a57..28e9db9f1 100644
--- a/src/containers/PipelineRuns/PipelineRuns.js
+++ b/src/containers/PipelineRuns/PipelineRuns.js
@@ -1,5 +1,5 @@
/*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -316,30 +316,39 @@ export function PipelineRuns({ intl }) {
);
return (
-
- {
- return runMatchesStatusFilter({
- run,
- statusFilter
- });
- })}
- pipelineRunActions={pipelineRunActions()}
- selectedNamespace={namespace}
- toolbarButtons={toolbarButtons}
- />
- {showDeleteModal ? (
-
- ) : null}
+ {
+ return runMatchesStatusFilter({
+ run,
+ statusFilter
+ });
+ })}
+ title="PipelineRuns"
+ >
+ {({ resources }) => (
+ <>
+
+ {showDeleteModal ? (
+
+ ) : null}
+ >
+ )}
);
}
diff --git a/src/containers/Pipelines/Pipelines.js b/src/containers/Pipelines/Pipelines.js
index ad495ba11..e15f26bba 100644
--- a/src/containers/Pipelines/Pipelines.js
+++ b/src/containers/Pipelines/Pipelines.js
@@ -1,5 +1,5 @@
/*
-Copyright 2019-2021 The Tekton Authors
+Copyright 2019-2022 The Tekton Authors
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -42,6 +42,98 @@ import {
useSelectedNamespace
} from '../../api';
+function getFormattedResources({
+ intl,
+ isReadOnly,
+ openDeleteModal,
+ resources
+}) {
+ return resources.map(pipeline => ({
+ id: pipeline.metadata.uid,
+ name: (
+
+ {pipeline.metadata.name}
+
+ ),
+ namespace: pipeline.metadata.namespace,
+ createdTime: (
+
+ ),
+ actions: (
+ <>
+ {!isReadOnly ? (
+