Skip to content
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

chore: Improves the flow to create a new chart #16252

Merged
merged 2 commits into from
Aug 16, 2021
Merged

chore: Improves the flow to create a new chart #16252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
466eaa1
chore: Improves the flow to create a new chart
michael-s-molina Aug 12, 2021
2503598
Adds a comment about selector specificity
michael-s-molina Aug 13, 2021
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
200 changes: 127 additions & 73 deletions superset-frontend/src/addSlice/AddSliceContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,10 @@
*/
import React from 'react';
import rison from 'rison';
import { styled, t, SupersetClient, JsonResponse } from '@superset-ui/core';
import { Steps } from 'src/common/components';
import Button from 'src/components/Button';
import { Select } from 'src/components';
import {
css,
styled,
t,
SupersetClient,
JsonResponse,
} from '@superset-ui/core';
import { FormLabel } from 'src/components/Form';
import { Tooltip } from 'src/components/Tooltip';

Expand All @@ -48,7 +43,8 @@ export type AddSliceContainerState = {
visType: string | null;
};

const ESTIMATED_NAV_HEIGHT = '56px';
const ESTIMATED_NAV_HEIGHT = 56;
const ELEMENTS_EXCEPT_VIZ_GALLERY = ESTIMATED_NAV_HEIGHT + 250;

const StyledContainer = styled.div`
${({ theme }) => `
Expand All @@ -58,7 +54,7 @@ const StyledContainer = styled.div`
justify-content: space-between;
width: 100%;
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT});
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT}px);
border-radius: ${theme.gridUnit}px;
background-color: ${theme.colors.grayscale.light5};
margin-left: auto;
Expand All @@ -75,6 +71,7 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: ${theme.gridUnit * 2}px;

& > div {
min-width: 200px;
Expand All @@ -84,11 +81,56 @@ const StyledContainer = styled.div`
& > span {
color: ${theme.colors.grayscale.light1};
margin-left: ${theme.gridUnit * 4}px;
margin-top: ${theme.gridUnit * 6}px;
}
}

& .ant-tooltip-open {
& .viz-gallery {
border: 1px solid ${theme.colors.grayscale.light2};
border-radius: ${theme.gridUnit}px;
margin: ${theme.gridUnit}px 0px;
max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px);
flex: 1;
}

& .footer {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;

& > span {
color: ${theme.colors.grayscale.light1};
margin-right: ${theme.gridUnit * 4}px;
}
}

/* The following extra ampersands (&&&&) are used to boost selector specificity */

&&&& .ant-steps-item-tail {
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
display: none;
}

&&&& .ant-steps-item-icon {
margin-right: ${theme.gridUnit * 2}px;
width: ${theme.gridUnit * 5}px;
height: ${theme.gridUnit * 5}px;
line-height: ${theme.gridUnit * 5}px;
}

&&&& .ant-steps-item-title {
line-height: ${theme.gridUnit * 5}px;
}

&&&& .ant-steps-item-content {
overflow: unset;

.ant-steps-item-description {
margin-top: ${theme.gridUnit}px;
}
}

&&&& .ant-tooltip-open {
display: inline;
}

Expand Down Expand Up @@ -126,19 +168,6 @@ const TooltipContent = styled.div<{ hasDescription: boolean }>`
`}
`;

const cssStatic = css`
flex: 0 0 auto;
`;

const StyledVizTypeGallery = styled(VizTypeGallery)`
${({ theme }) => `
border: 1px solid ${theme.colors.grayscale.light2};
border-radius: ${theme.gridUnit}px;
margin: ${theme.gridUnit * 3}px 0px;
flex: 1 1 auto;
`}
`;

const StyledLabel = styled.span`
${({ theme }) => `
position: absolute;
Expand Down Expand Up @@ -215,18 +244,27 @@ export default class AddSliceContainer extends React.PureComponent<
loadDatasources(search: string, page: number, pageSize: number) {
const query = rison.encode({
columns: ['id', 'table_name', 'description', 'datasource_type'],
filter: search,
filters: [{ col: 'table_name', opr: 'ct', value: search }],
page,
page_size: pageSize,
order_column: 'table_name',
order_direction: 'asc',
});
return SupersetClient.get({
endpoint: `/api/v1/dataset?q=${query}`,
endpoint: `/api/v1/dataset/?q=${query}`,
}).then((response: JsonResponse) => {
const list = response.json.result.map((item: Dataset) => ({
value: `${item.id}__${item.datasource_type}`,
label: this.newLabel(item),
labelText: item.table_name,
}));
const list: {
label: string;
value: string;
}[] = response.json.result
.map((item: Dataset) => ({
value: `${item.id}__${item.datasource_type}`,
label: this.newLabel(item),
labelText: item.table_name,
}))
.sort((a: { labelText: string }, b: { labelText: string }) =>
a.labelText.localeCompare(b.labelText),
);
return {
data: list,
totalCount: response.json.count,
Expand All @@ -244,52 +282,68 @@ export default class AddSliceContainer extends React.PureComponent<
}

render() {
const isButtonDisabled = this.isBtnDisabled();
return (
<StyledContainer>
<h3 css={cssStatic}>{t('Create a new chart')}</h3>
<div className="dataset">
<Select
autoFocus
ariaLabel={t('Dataset')}
name="select-datasource"
header={<FormLabel required>{t('Choose a dataset')}</FormLabel>}
filterOption={this.handleFilterOption}
onChange={this.changeDatasource}
options={this.loadDatasources}
placeholder={t('Choose a dataset')}
showSearch
value={this.state.datasource}
<h3>{t('Create a new chart')}</h3>
<Steps direction="vertical" size="small">
<Steps.Step
title={<FormLabel>{t('Choose a dataset')}</FormLabel>}
status={this.state.datasource?.value ? 'finish' : 'process'}
description={
<div className="dataset">
<Select
autoFocus
ariaLabel={t('Dataset')}
name="select-datasource"
filterOption={this.handleFilterOption}
onChange={this.changeDatasource}
options={this.loadDatasources}
placeholder={t('Choose a dataset')}
showSearch
value={this.state.datasource}
/>
<span>
{t(
'Instructions to add a dataset are available in the Superset tutorial.',
)}{' '}
<a
href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
rel="noopener noreferrer"
target="_blank"
>
<i className="fa fa-external-link" />
</a>
</span>
</div>
}
/>
<Steps.Step
title={<FormLabel>{t('Choose chart type')}</FormLabel>}
status={this.state.visType ? 'finish' : 'process'}
description={
<VizTypeGallery
className="viz-gallery"
onChange={this.changeVisType}
selectedViz={this.state.visType}
/>
}
/>
<span>
{t(
'Instructions to add a dataset are available in the Superset tutorial.',
)}{' '}
<a
href="https://superset.apache.org/docs/creating-charts-dashboards/first-dashboard#adding-a-new-table"
rel="noopener noreferrer"
target="_blank"
>
<i className="fa fa-external-link" />
</a>
</span>
</Steps>
<div className="footer">
{isButtonDisabled && (
<span>
{t('Please select both a Dataset and a Chart type to proceed')}
</span>
)}
<Button
buttonStyle="primary"
disabled={isButtonDisabled}
onClick={this.gotoSlice}
>
{t('Create new chart')}
</Button>
</div>
<StyledVizTypeGallery
onChange={this.changeVisType}
selectedViz={this.state.visType}
/>
<Button
css={[
cssStatic,
css`
align-self: flex-end;
`,
]}
buttonStyle="primary"
disabled={this.isBtnDisabled()}
onClick={this.gotoSlice}
>
{t('Create new chart')}
</Button>
</StyledContainer>
);
}
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/common/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export {
Row,
Space,
Skeleton,
Steps,
Switch,
Tag,
Tabs,
Expand Down
7 changes: 6 additions & 1 deletion superset-frontend/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@ const StyledError = styled.div`
`}
`;

const StyledErrorMessage = styled.div`
overflow: hidden;
text-overflow: ellipsis;
`;

const StyledSpin = styled(Spin)`
margin-top: ${({ theme }) => -theme.gridUnit}px;
`;
Expand All @@ -141,7 +146,7 @@ const EMPTY_OPTIONS: OptionsType = [];

const Error = ({ error }: { error: string }) => (
<StyledError>
<Icons.ErrorSolid /> {error}
<Icons.ErrorSolid /> <StyledErrorMessage>{error}</StyledErrorMessage>
</StyledError>
);

Expand Down