-
Notifications
You must be signed in to change notification settings - Fork 13.7k
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.
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
feat: Create dataset blank state #21058
Changes from 9 commits
1298c6a
d1ac6b0
1ccdc90
92ebcee
a879d84
d2f2337
78ce3d6
263601f
f697bea
c5c7f9e
68867b2
c495811
0e6d9c8
c654c4f
4623fce
0e3016d
30d733a
ecf3314
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import DatasetLayout from 'src/views/CRUD/data/dataset/DatasetLayout'; | ||
import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header'; | ||
import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel'; | ||
import DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel'; | ||
import RightPanel from 'src/views/CRUD/data/dataset/DatasetPage/RightPanel'; | ||
import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer'; | ||
|
||
describe('DatasetLayout', () => { | ||
it('renders nothing when no components are passed in', () => { | ||
render(<DatasetLayout />); | ||
const layoutWrapper = screen.getByTestId('dataset-layout-wrapper'); | ||
|
||
expect(layoutWrapper).toHaveTextContent(''); | ||
}); | ||
|
||
it('renders a Header when passed in', () => { | ||
render(<DatasetLayout header={Header()} />); | ||
|
||
expect(screen.getByText(/header/i)).toBeVisible(); | ||
}); | ||
|
||
it('renders a LeftPanel when passed in', () => { | ||
render(<DatasetLayout leftPanel={LeftPanel()} />); | ||
|
||
expect(screen.getByRole('img', { name: /empty/i })).toBeVisible(); | ||
expect(screen.getByText(/no database tables found/i)).toBeVisible(); | ||
}); | ||
|
||
it('renders a DatasetPanel when passed in', () => { | ||
render(<DatasetLayout datasetPanel={DatasetPanel()} />); | ||
|
||
const blankDatasetImg = screen.getByRole('img', { name: /empty/i }); | ||
const blankDatasetTitle = screen.getByText(/select dataset source/i); | ||
|
||
expect(blankDatasetImg).toBeVisible(); | ||
expect(blankDatasetTitle).toBeVisible(); | ||
}); | ||
|
||
it('renders a RightPanel when passed in', () => { | ||
render(<DatasetLayout rightPanel={RightPanel()} />); | ||
|
||
expect(screen.getByText(/right panel/i)).toBeVisible(); | ||
}); | ||
|
||
it('renders a Footer when passed in', () => { | ||
render(<DatasetLayout footer={Footer()} />); | ||
|
||
expect(screen.getByText(/footer/i)).toBeVisible(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React, { ReactElement, JSXElementConstructor } from 'react'; | ||
import { | ||
Column, | ||
Row, | ||
StyledHeader, | ||
StyledLeftPanel, | ||
StyledDatasetPanel, | ||
StyledRightPanel, | ||
StyledFooter, | ||
heightMinusHeaders, | ||
heightMinusFooter, | ||
} from 'src/views/CRUD/data/dataset/styles'; | ||
|
||
interface DatasetLayoutProps { | ||
header?: ReactElement<any, string | JSXElementConstructor<any>> | null; | ||
leftPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; | ||
datasetPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; | ||
rightPanel?: ReactElement<any, string | JSXElementConstructor<any>> | null; | ||
footer?: ReactElement<any, string | JSXElementConstructor<any>> | null; | ||
} | ||
|
||
export default function DatasetLayout({ | ||
header, | ||
leftPanel, | ||
datasetPanel, | ||
rightPanel, | ||
footer, | ||
}: DatasetLayoutProps) { | ||
return ( | ||
<div data-test="dataset-layout-wrapper"> | ||
{header && <StyledHeader>{header}</StyledHeader>} | ||
<Row css={heightMinusHeaders}> | ||
{leftPanel && <StyledLeftPanel>{leftPanel}</StyledLeftPanel>} | ||
<Column css={heightMinusFooter}> | ||
<Row> | ||
{datasetPanel && ( | ||
<StyledDatasetPanel>{datasetPanel}</StyledDatasetPanel> | ||
)} | ||
{rightPanel && <StyledRightPanel>{rightPanel}</StyledRightPanel>} | ||
</Row> | ||
{footer && <StyledFooter>{footer}</StyledFooter>} | ||
</Column> | ||
</Row> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import DatasetPage from 'src/views/CRUD/data/dataset/DatasetPage'; | ||
|
||
describe('DatasetPage', () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what is the difference between DatasetPage, DatasetPanel, and DatasetLayout in this current setup? In the original setup, I believe that DatasetPage was the overarching structure, DatasetPanel was the middle component w/table info and DatasetLayout didn't exist. It seems like DatasetLayout is replacing DatasetPage's function. Is that true? If so, does it make sense to have these three similarly named pages/what is each one doing? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I think if we were to rename them I'd suggest something like:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok, that makes sense. Maybe we should make DatasetPage into just AddDataset. I also think that we should put DatasetLayout into its own folder, with an index.tsx and a testing file. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good call, changed in |
||
it('renders a blank state DatasetPage', () => { | ||
render(<DatasetPage />); | ||
|
||
const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i }); | ||
|
||
// Header | ||
expect(screen.getByText(/header/i)).toBeVisible(); | ||
// Left panel | ||
expect(blankeStateImgs[0]).toBeVisible(); | ||
expect(screen.getByText(/no database tables found/i)).toBeVisible(); | ||
// Database panel | ||
expect(blankeStateImgs[1]).toBeVisible(); | ||
expect(screen.getByText(/select dataset source/i)).toBeVisible(); | ||
// Footer | ||
expect(screen.getByText(/footer/i)).toBeVisible(); | ||
|
||
expect(blankeStateImgs.length).toBe(2); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import DatasetPanel from 'src/views/CRUD/data/dataset/DatasetPage/DatasetPanel'; | ||
|
||
describe('DatasetPanel', () => { | ||
it('renders a blank state DatasetPanel', () => { | ||
render(<DatasetPanel />); | ||
|
||
const blankDatasetImg = screen.getByRole('img', { name: /empty/i }); | ||
const blankDatasetTitle = screen.getByText(/select dataset source/i); | ||
const blankDatasetDescription = screen.getByText( | ||
/datasets can be created from database tables or sql queries\. select a database table to the left or to open sql lab\. from there you can save the query as a dataset\./i, | ||
); | ||
const sqlLabLink = screen.getByRole('button', { | ||
name: /create dataset from sql query/i, | ||
}); | ||
|
||
expect(blankDatasetImg).toBeVisible(); | ||
expect(blankDatasetTitle).toBeVisible(); | ||
expect(blankDatasetDescription).toBeVisible(); | ||
expect(sqlLabLink).toBeVisible(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,7 +17,35 @@ | |
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { t } from '@superset-ui/core'; | ||
import { EmptyStateBig } from 'src/components/EmptyState'; | ||
|
||
const renderDescription = () => ( | ||
<> | ||
{t( | ||
'Datasets can be created from database tables or SQL queries. Select a database table to the left or ', | ||
)} | ||
<span | ||
role="button" | ||
onClick={() => { | ||
window.location.href = `/superset/sqllab`; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. worth checking w/ @yousoph if we want this to open into a new tab or in the same page. For context, currently it opens in the same tab, which I prefer. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The figma says same tab here. |
||
}} | ||
tabIndex={0} | ||
> | ||
{t('create dataset from SQL query')} | ||
</span> | ||
{t(' to open SQL Lab. From there you can save the query as a dataset.')} | ||
</> | ||
); | ||
|
||
export default function DatasetPanel() { | ||
return <div>Dataset Panel</div>; | ||
return ( | ||
<> | ||
<EmptyStateBig | ||
image="empty-dataset.svg" | ||
title={t('Select dataset source')} | ||
description={renderDescription()} | ||
/> | ||
</> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import Footer from 'src/views/CRUD/data/dataset/DatasetPage/Footer'; | ||
|
||
describe('Footer', () => { | ||
it('renders a blank state Footer', () => { | ||
render(<Footer />); | ||
|
||
expect(screen.getByText(/footer/i)).toBeVisible(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import Header from 'src/views/CRUD/data/dataset/DatasetPage/Header'; | ||
|
||
describe('Header', () => { | ||
it('renders a blank state Header', () => { | ||
render(<Header />); | ||
|
||
expect(screen.getByText(/header/i)).toBeVisible(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** | ||
* Licensed to the Apache Software Foundation (ASF) under one | ||
* or more contributor license agreements. See the NOTICE file | ||
* distributed with this work for additional information | ||
* regarding copyright ownership. The ASF licenses this file | ||
* to you 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 | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, | ||
* software distributed under the License is distributed on an | ||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
* KIND, either express or implied. See the License for the | ||
* specific language governing permissions and limitations | ||
* under the License. | ||
*/ | ||
import React from 'react'; | ||
import { render, screen } from 'spec/helpers/testing-library'; | ||
import LeftPanel from 'src/views/CRUD/data/dataset/DatasetPage/LeftPanel'; | ||
|
||
describe('LeftPanel', () => { | ||
it('renders a blank state LeftPanel', () => { | ||
render(<LeftPanel />); | ||
|
||
expect(screen.getByRole('img', { name: /empty/i })).toBeVisible(); | ||
expect(screen.getByText(/no database tables found/i)).toBeVisible(); | ||
expect(screen.getByText(/try selecting a different schema/i)).toBeVisible(); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this page replacing the index.tsx for DatasetPage? If so, would it make sense that this be a) named index.tsx to follow the pattern of the other pages. b) Should we move the reducer into this file?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The DatasetLayout structures the DatasetPage, see here: https://github.com/apache/superset/pull/21058/files#diff-20b7cfe4750d43aa2c1756a68fb109b40b812464206ac3565b2c8865a5ba39e5R71-R76
This is the component we'll use to structure the edit dataset page as well, so it'll all be in the same page layout. You just need to pass in the components.