QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-12 19:35:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Adding a show all button to the column/metrics list in the explore view (Allow more than 50 columns to be shown) (#15153)

Browse Source 
* 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:
cccs-RyanS
2021-06-27 15:16:53 -05:00
committed by GitHub
parent a3d91aee28
commit b9b903f8e6
1 changed files with 41 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
superset-frontend/src/explore/components/DatasourcePanel/index.tsx
View File

@@ -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>