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

Jump to bottom

feat(explore): Add empty state to annotations #20160

Merged
merged 3 commits into from
May 31, 2022
Merged

feat(explore): Add empty state to annotations #20160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf5515d
feat(explore): Add empty state to annotations
kgabryje May 23, 2022
c381a6d
Set line height for small empty state description
kgabryje May 23, 2022
48b3e5e
Simplify code
kgabryje May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions superset-frontend/src/components/EmptyState/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const BigDescription = styled(Description)`
const SmallDescription = styled(Description)`
${({ theme }) => css`
margin-top: ${theme.gridUnit}px;
line-height: 1.2;
`}
`;

Expand Down
35 changes: 34 additions & 1 deletion superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
getChartMetadataRegistry,
validateNonEmpty,
isValidExpression,
styled,
withTheme,
} from '@superset-ui/core';

Expand All @@ -43,6 +44,7 @@ import {
} from 'src/modules/AnnotationTypes';
import PopoverSection from 'src/components/PopoverSection';
import ControlHeader from 'src/explore/components/ControlHeader';
import { EmptyStateSmall } from 'src/components/EmptyState';

const AUTOMATIC_COLOR = '';

Expand Down Expand Up @@ -98,6 +100,35 @@ const defaultProps = {
close: () => {},
};

const NotFoundContentWrapper = styled.div`
&& > div:first-child {
padding-left: 0;
padding-right: 0;
}
`;

const NotFoundContent = () => (
<NotFoundContentWrapper>
<EmptyStateSmall
title={t('No annotation layers')}
description={
<span>
{t('Add an annotation layer')}{' '}
<a
href="/annotationlayermodelview/list"
target="_blank"
rel="noopener noreferrer"
>
{t('here')}
</a>
Comment on lines +116 to +123
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't the only place where we have this type of translation logic, but splitting up a translation like this can be problematic for languages that have different sentence structure/order than English. But since I don't have a better proposal at this time we can surely live with this. But maybe there's a more modern translation library out there that more natively supports these types of Reacty-y use cases better.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

..aaand some quick googling turned up this: https://react.i18next.com/

Copy link
Member Author

@kgabryje kgabryje May 31, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I'm not very familiar with the translation logic. Do you think it'd be a big project to switch to using this library?

.
</span>
}
image="empty.svg"
/>
</NotFoundContentWrapper>
);

class AnnotationLayer extends React.PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -416,6 +447,7 @@ class AnnotationLayer extends React.PureComponent {
onChange={this.handleValue}
validationErrors={!value ? ['Mandatory'] : []}
optionRenderer={this.renderOption}
notFoundContent={<NotFoundContent />}
/>
);
}
Expand Down Expand Up @@ -760,9 +792,10 @@ class AnnotationLayer extends React.PureComponent {
ariaLabel={t('Annotation source type')}
hovered
description={t('Choose the source of your annotations')}
label={t('Annotation Source')}
label={t('Annotation source')}
name="annotation-source-type"
options={supportedSourceTypes}
notFoundContent={<NotFoundContent />}
value={sourceType}
onChange={this.handleAnnotationSourceType}
validationErrors={!sourceType ? [t('Mandatory')] : []}
Expand Down
3 changes: 3 additions & 0 deletions superset-frontend/src/explore/components/controls/SelectControl.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const propTypes = {
placeholder: PropTypes.string,
filterOption: PropTypes.func,
tokenSeparators: PropTypes.arrayOf(PropTypes.string),
notFoundContent: PropTypes.object,

// ControlHeader props
label: PropTypes.string,
Expand Down Expand Up @@ -179,6 +180,7 @@ export default class SelectControl extends React.PureComponent {
showHeader,
value,
tokenSeparators,
notFoundContent,
// ControlHeader props
description,
renderTrigger,
Expand Down Expand Up @@ -245,6 +247,7 @@ export default class SelectControl extends React.PureComponent {
sortComparator: this.props.sortComparator,
value: getValue(),
tokenSeparators,
notFoundContent,
};

return (
Expand Down