Skip to content

feat(dashboards): Create table for landing page table view #80945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 20, 2024
Merged

feat(dashboards): Create table for landing page table view #80945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dc29fca
add dashboard layout toggle
nikkikapadia Nov 7, 2024
aa743aa
Merge branch 'master' into nikki/feat/dashboards-table-view
nikkikapadia Nov 14, 2024
be50cad
add feature flag
nikkikapadia Nov 14, 2024
d7373ac
add tests
nikkikapadia Nov 14, 2024
be4917f
constants and language acceptance
nikkikapadia Nov 15, 2024
0aef362
Merge branch 'master' into nikki/feat/make-dashboards-table
nikkikapadia Nov 15, 2024
53c724f
Merge branch 'nikki/feat/dashboards-table-view' into nikki/feat/make-…
nikkikapadia Nov 15, 2024
cd06e10
make table and set it up with toggle
nikkikapadia Nov 18, 2024
3408bc6
Merge branch 'master' into nikki/feat/make-dashboards-table
nikkikapadia Nov 18, 2024
6b2bd2a
use proper grid icon
nikkikapadia Nov 18, 2024
e356236
added and adjusted tests
nikkikapadia Nov 18, 2024
01ff874
fixes
nikkikapadia Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions .../dashboards/manage/dashboardList.spec.tsx → .../dashboards/manage/dashboardGrid.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ import {
within,
} from 'sentry-test/reactTestingLibrary';

import DashboardList from 'sentry/views/dashboards/manage/dashboardList';
import DashboardGrid from 'sentry/views/dashboards/manage/dashboardGrid';
import {type DashboardListItem, DisplayType} from 'sentry/views/dashboards/types';

describe('Dashboards - DashboardList', function () {
describe('Dashboards - DashboardGrid', function () {
let dashboards: DashboardListItem[];
let deleteMock: jest.Mock;
let dashboardUpdateMock: jest.Mock;
Expand Down Expand Up @@ -100,9 +100,9 @@ describe('Dashboards - DashboardList', function () {
dashboardUpdateMock = jest.fn();
});

it('renders an empty list', function () {
it('renders an empty list', async function () {
render(
<DashboardList
<DashboardGrid
onDashboardsChange={jest.fn()}
organization={organization}
dashboards={[]}
Expand All @@ -113,11 +113,14 @@ describe('Dashboards - DashboardList', function () {
);

expect(screen.getByTestId('empty-state')).toBeInTheDocument();
expect(
await screen.findByText('Sorry, no Dashboards match your filters.')
).toBeInTheDocument();
});

it('renders dashboard list', function () {
render(
<DashboardList
<DashboardGrid
onDashboardsChange={jest.fn()}
organization={organization}
dashboards={dashboards}
Expand All @@ -133,7 +136,7 @@ describe('Dashboards - DashboardList', function () {

it('returns landing page url for dashboards', function () {
render(
<DashboardList
<DashboardGrid
onDashboardsChange={jest.fn()}
organization={organization}
dashboards={dashboards}
Expand All @@ -156,7 +159,7 @@ describe('Dashboards - DashboardList', function () {

it('persists global selection headers', function () {
render(
<DashboardList
<DashboardGrid
onDashboardsChange={jest.fn()}
organization={organization}
dashboards={dashboards}
Expand All @@ -175,7 +178,7 @@ describe('Dashboards - DashboardList', function () {

it('can delete dashboards', async function () {
render(
<DashboardList
<DashboardGrid
organization={organization}
dashboards={dashboards}
location={{...LocationFixture(), query: {}}}
Expand Down Expand Up @@ -213,7 +216,7 @@ describe('Dashboards - DashboardList', function () {
}),
];
render(
<DashboardList
<DashboardGrid
organization={organization}
dashboards={singleDashboard}
location={LocationFixture()}
Expand All @@ -232,7 +235,7 @@ describe('Dashboards - DashboardList', function () {

it('can duplicate dashboards', async function () {
render(
<DashboardList
<DashboardGrid
organization={organization}
dashboards={dashboards}
location={{...LocationFixture(), query: {}}}
Expand All @@ -259,7 +262,7 @@ describe('Dashboards - DashboardList', function () {
});

render(
<DashboardList
<DashboardGrid
organization={organization}
dashboards={dashboards}
location={{...LocationFixture(), query: {}}}
Expand Down
14 changes: 9 additions & 5 deletions ...views/dashboards/manage/dashboardList.tsx → ...views/dashboards/manage/dashboardGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ type Props = {
isLoading?: boolean;
};

function DashboardList({
function DashboardGrid({
api,
organization,
location,
Expand Down Expand Up @@ -203,21 +203,25 @@ function DashboardList({
: dashboards?.length ?? 0;

return (
<DashboardGrid rows={rowCount} columns={columnCount}>
<DashboardGridContainer
rows={rowCount}
columns={columnCount}
data-test-id={'dashboard-grid'}
>
{renderMiniDashboards()}
{isLoading &&
rowCount * columnCount > numDashboards &&
new Array(rowCount * columnCount - numDashboards)
.fill(0)
.map((_, index) => <Placeholder key={index} height="270px" />)}
</DashboardGrid>
</DashboardGridContainer>
);
}

return <Fragment>{renderDashboardGrid()}</Fragment>;
}

const DashboardGrid = styled('div')<{columns: number; rows: number}>`
const DashboardGridContainer = styled('div')<{columns: number; rows: number}>`
display: grid;
grid-template-columns: repeat(
${props => props.columns},
Expand All @@ -231,4 +235,4 @@ const DropdownTrigger = styled(Button)`
transform: translateX(${space(1)});
`;

export default withApi(DashboardList);
export default withApi(DashboardGrid);
Loading
Loading