mirror of https://github.com/apache/superset.git
feat: Adding a show all button to the column/metrics list in the explore view (Allow more than 50 columns to be shown) (#15153)
* Adding a show all button to the column/metrics list in the explore view * Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com> * Update superset-frontend/src/explore/components/DatasourcePanel/index.tsx Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com> * Fixing typo Co-authored-by: cccs-rc <62034438+cccs-rc@users.noreply.github.com>
This commit is contained in:
parent
a3d91aee28
commit
b9b903f8e6
|
@ -42,6 +42,18 @@ export interface Props {
|
|||
actions: Partial<ExploreActions> & Pick<ExploreActions, 'setControlValue'>;
|
||||
}
|
||||
|
||||
const Button = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
color: ${({ theme }) => theme.colors.primary.dark1};
|
||||
`;
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
text-align: center;
|
||||
padding-top: 2px;
|
||||
`;
|
||||
|
||||
const DatasourceContainer = styled.div`
|
||||
background-color: ${({ theme }) => theme.colors.grayscale.light4};
|
||||
position: relative;
|
||||
|
@ -113,6 +125,11 @@ export default function DataSourcePanel({
|
|||
columns,
|
||||
metrics,
|
||||
});
|
||||
const [showAllMetrics, setShowAllMetrics] = useState(false);
|
||||
const [showAllColumns, setShowAllColumns] = useState(false);
|
||||
|
||||
const DEFAULT_MAX_COLUMNS_LENGTH = 50;
|
||||
const DEFAULT_MAX_METRICS_LENGTH = 50;
|
||||
|
||||
const search = debounce((value: string) => {
|
||||
if (value === '') {
|
||||
|
@ -176,8 +193,12 @@ export default function DataSourcePanel({
|
|||
setInputValue('');
|
||||
}, [columns, datasource, metrics]);
|
||||
|
||||
const metricSlice = lists.metrics.slice(0, 50);
|
||||
const columnSlice = lists.columns.slice(0, 50);
|
||||
const metricSlice = showAllMetrics
|
||||
? lists.metrics
|
||||
: lists.metrics.slice(0, DEFAULT_MAX_COLUMNS_LENGTH);
|
||||
const columnSlice = showAllColumns
|
||||
? lists.columns
|
||||
: lists.columns.slice(0, DEFAULT_MAX_METRICS_LENGTH);
|
||||
|
||||
const mainBody = (
|
||||
<>
|
||||
|
@ -219,6 +240,15 @@ export default function DataSourcePanel({
|
|||
)}
|
||||
</LabelContainer>
|
||||
))}
|
||||
{lists.metrics.length > DEFAULT_MAX_METRICS_LENGTH ? (
|
||||
<ButtonContainer>
|
||||
<Button onClick={() => setShowAllMetrics(!showAllMetrics)}>
|
||||
{showAllMetrics ? t('Show less...') : t('Show all...')}
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Collapse.Panel>
|
||||
<Collapse.Panel
|
||||
header={<span className="header">{t('Columns')}</span>}
|
||||
|
@ -241,6 +271,15 @@ export default function DataSourcePanel({
|
|||
)}
|
||||
</LabelContainer>
|
||||
))}
|
||||
{lists.columns.length > DEFAULT_MAX_COLUMNS_LENGTH ? (
|
||||
<ButtonContainer>
|
||||
<Button onClick={() => setShowAllColumns(!showAllColumns)}>
|
||||
{showAllColumns ? t('Show Less...') : t('Show all...')}
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue