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(dashboard): Add description to the native filter #17025

Merged
merged 11 commits into from
Oct 27, 2021
Merged

feat(dashboard): Add description to the native filter #17025

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1753e7d
Adding description works
m-ajay Oct 6, 2021
4590a23
Add some tests
m-ajay Oct 7, 2021
6541942
Merge branch 'master' into feat/add-filter-description
m-ajay Oct 14, 2021
c2b0fa2
Fix tests
m-ajay Oct 15, 2021
9546f27
Lint error
m-ajay Oct 25, 2021
7901493
Styled look good
m-ajay Oct 25, 2021
7bd5705
Tests successful
m-ajay Oct 25, 2021
8dcba33
Merge branch 'master' into feat/add-filter-description
m-ajay Oct 26, 2021
4a5c51e
Address PR comments
m-ajay Oct 27, 2021
bb60d88
fix a test
m-ajay Oct 27, 2021
7594453
Merge branch 'master' into feat/add-filter-description
m-ajay Oct 27, 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
79 changes: 47 additions & 32 deletions ...rontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@
* under the License.
*/
import React, { useMemo } from 'react';
import { styled, t } from '@superset-ui/core';
import Form from 'antd/lib/form';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
import { styled } from '@superset-ui/core';
import { FormItem as StyledFormItem, Form } from 'src/components/Form';
import Icons from 'src/components/Icons';
import { Tooltip } from 'src/components/Tooltip';
import { theme as supersetTheme } from 'src/preamble';
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
import { checkIsMissingRequiredValue } from '../utils';
import FilterValue from './FilterValue';
Expand All @@ -43,11 +44,6 @@ const StyledFilterControlTitleBox = styled.div`
align-items: center;
justify-content: space-between;
margin-bottom: ${({ theme }) => theme.gridUnit}px;
.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
&::before {
display: none;
}
}
`;

const StyledFilterControlContainer = styled(Form)`
Expand All @@ -62,21 +58,56 @@ const StyledFilterControlContainer = styled(Form)`
}
`;

const FormItem = styled(Form.Item)`
const FormItem = styled(StyledFormItem)`
${({ theme }) => `
.ant-form-item-label {
padding-bottom: ${theme.gridUnit}px;
label.ant-form-item-required:not(.ant-form-item-required-mark-optional){
&::after {
display: none;
}
}
}

`}
`}
`;

const ToolTipContainer = styled.div`
font-size: ${({ theme }) => theme.typography.sizes.m}px;
display: flex;
padding-left: ${({ theme }) => theme.gridUnit}px;
`;

const RequiredFieldIndicator = () => (
<span
css={{
color: supersetTheme.colors.error.base,
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
fontSize: `${supersetTheme.typography.sizes.s}px`,
paddingLeft: '2px',
}}
>
*
</span>
);

const DescriptoinToolTip = ({ description }: { description: string }) => (
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
<ToolTipContainer>
<Tooltip
title={description}
placement="top"
overlayInnerStyle={{
display: '-webkit-box',
overflow: 'hidden',
// @ts-ignore -webkit-line-clamp is not in the CSS type
'-webkit-line-clamp': '20',
'-webkit-box-orient': 'vertical',
'text-overflow': 'ellipsis',
}}
>
<Icons.InfoCircle
className="text-muted"
css={{ color: supersetTheme.colors.grayscale.light1 }}
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
/>
</Tooltip>
</ToolTipContainer>
);
const FilterControl: React.FC<FilterProps> = ({
dataMaskSelected,
filter,
Expand All @@ -99,29 +130,14 @@ const FilterControl: React.FC<FilterProps> = ({
<StyledFilterControlTitle data-test="filter-control-name">
{name}
</StyledFilterControlTitle>
{isRequired && (
<span
css={{
color: supersetTheme.colors.error.base,
fontSize: `${supersetTheme.typography.sizes.s}px`,
}}
>
*
</span>
)}
{isRequired && <RequiredFieldIndicator />}
{filter.description && filter.description.trim() && (
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
<ToolTipContainer>
<InfoTooltipWithTrigger
label={t('description')}
tooltip={filter.description}
placement="top"
/>
</ToolTipContainer>
<DescriptoinToolTip description={filter.description} />
michael-s-molina marked this conversation as resolved.
Show resolved Hide resolved
)}
<StyledIcon data-test="filter-icon">{icon}</StyledIcon>
</StyledFilterControlTitleBox>
),
[icon, name],
[name, isRequired, filter.description, icon],
);

return (
Expand All @@ -139,7 +155,6 @@ const FilterControl: React.FC<FilterProps> = ({
inView={inView}
/>
</FormItem>
{filter.requiredFirst ? <span>Test</span> : null}
</StyledFilterControlContainer>
);
};
Expand Down