geido commented on code in PR #32810:
URL: https://github.com/apache/superset/pull/32810#discussion_r2024590844
##########
superset-frontend/src/components/Tabs/Tabs.tsx:
##########
@@ -81,7 +61,7 @@ const StyledTabs = ({
color: ${theme.colorError};
}
}
- .ant-tabs-ink-bar {
+ .antd5-tabs-ink-bar {
background: ${theme.colorPrimary};
Review Comment:
Can we go vanilla?
##########
superset-frontend/src/explore/components/ControlPanelsContainer.tsx:
##########
@@ -791,10 +756,10 @@ export const ControlPanelsContainer = (props:
ControlPanelsContainerProps) => {
return (
<Styles ref={containerRef}>
- <ControlPanelsTabs
+ <Tabs
id="controlSections"
data-test="control-tabs"
- fullWidth={showCustomizeTab}
+ tabBarStyle={{ paddingLeft: theme.sizeUnit * 4 }}
Review Comment:
What is wrong with vanilla?
##########
superset-frontend/src/GlobalStyles.tsx:
##########
@@ -66,15 +66,15 @@ export const GlobalStyles = () => (
& .btn-group > .btn {
padding: 5px 10px 6px;
}
- && .ant-tabs {
+ && .antd5-tabs {
margin-top: ${theme.sizeUnit * -3}px;
}
- & .ant-tabs-nav {
+ & .antd5-tabs-nav {
margin-left: ${theme.sizeUnit * -4}px;
margin-right: ${theme.sizeUnit * -4}px;
margin-bottom: ${theme.sizeUnit * 2}px;
}
- && .ant-tabs-tab {
+ && .antd5-tabs-tab {
Review Comment:
Can we verify that we actually need these styles? These are affecting Tabs
globally. Can vanilla suffice?
##########
superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx:
##########
@@ -55,9 +55,12 @@ export const useResultsTableView = (
);
}
return (
- <Tabs fullWidth={false} data-test="drill-by-results-tabs">
- {chartDataResult.map((res, index) => (
- <Tabs.TabPane tab={t('Results %s', index + 1)} key={index}>
+ <Tabs
+ defaultActiveKey="0"
+ items={chartDataResult.map((res, index) => ({
+ key: index.toString(),
Review Comment:
A good chance to use something else instead of the `index` if possible.
##########
superset-frontend/src/components/Datasource/DatasourceEditor.jsx:
##########
@@ -1363,105 +1363,118 @@ class DatasourceEditor extends PureComponent {
data-test="edit-dataset-tabs"
onChange={this.handleTabSelect}
defaultActiveKey={activeTabKey}
- >
- <Tabs.TabPane key={0} tab={t('Source')}>
- {this.renderSourceFieldset(theme)}
- </Tabs.TabPane>
- <Tabs.TabPane
- tab={
- <CollectionTabTitle
- collection={sortedMetrics}
- title={t('Metrics')}
- />
- }
- key={1}
- >
- {this.renderMetricCollection()}
- </Tabs.TabPane>
- <Tabs.TabPane
- tab={
- <CollectionTabTitle
- collection={this.state.databaseColumns}
- title={t('Columns')}
- />
- }
- key={2}
- >
- <StyledColumnsTabWrapper>
- <ColumnButtonWrapper>
- <StyledButtonWrapper>
- <Button
- buttonSize="small"
- onClick={this.syncMetadata}
- className="sync-from-source"
- disabled={this.state.isEditMode}
- >
- <Icons.DatabaseOutlined iconSize="m" />
- {t('Sync columns from source')}
- </Button>
- </StyledButtonWrapper>
- </ColumnButtonWrapper>
- <ColumnCollectionTable
- className="columns-table"
- columns={this.state.databaseColumns}
- datasource={datasource}
- onColumnsChange={databaseColumns =>
- this.setColumns({ databaseColumns })
- }
- onDatasourceChange={this.onDatasourceChange}
- />
- {this.state.metadataLoading && <Loading />}
- </StyledColumnsTabWrapper>
- </Tabs.TabPane>
- <Tabs.TabPane
- tab={
- <CollectionTabTitle
- collection={this.state.calculatedColumns}
- title={t('Calculated columns')}
- />
- }
- key={3}
- >
- <StyledColumnsTabWrapper>
- <ColumnCollectionTable
- columns={this.state.calculatedColumns}
- onColumnsChange={calculatedColumns =>
- this.setColumns({ calculatedColumns })
- }
- columnLabelTooltips={{
- column_name: t(
- 'This field is used as a unique identifier to attach ' +
- 'the calculated dimension to charts. It is also used ' +
- 'as the alias in the SQL query.',
- ),
- }}
- onDatasourceChange={this.onDatasourceChange}
- datasource={datasource}
- editableColumnName
- showExpression
- allowAddItem
- allowEditDataType
- itemGenerator={() => ({
- column_name: t('<new column>'),
- filterable: true,
- groupby: true,
- expression: t('<enter SQL expression here>'),
- __expanded: true,
- })}
- />
- </StyledColumnsTabWrapper>
- </Tabs.TabPane>
- <Tabs.TabPane key={4} tab={t('Settings')}>
- <Row gutter={16}>
- <Col xs={24} md={12}>
- <FormContainer>{this.renderSettingsFieldset()}</FormContainer>
- </Col>
- <Col xs={24} md={12}>
- <FormContainer>{this.renderAdvancedFieldset()}</FormContainer>
- </Col>
- </Row>
- </Tabs.TabPane>
- </StyledTableTabs>
+ items={[
+ {
+ key: '0',
Review Comment:
Let's use human-readable keys
##########
superset-frontend/src/components/Datasource/DatasourceModal.tsx:
##########
@@ -68,6 +68,10 @@ const StyledDatasourceModal = styled(Modal)`
.modal-footer {
flex: 0 1 auto;
}
+
+ .antd5-tabs-top {
+ margin-top: -${({ theme }) => theme.sizeUnit * 4}px;
Review Comment:
Why is this needed?
##########
superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx:
##########
@@ -60,40 +60,51 @@ const BuilderComponentPane = ({ topOffset = 0 }) => (
margin-top: ${theme.sizeUnit * 2}px;
height: 100%;
- & .ant-tabs-content-holder {
+ & .antd5-tabs-content-holder {
height: 100%;
- & .ant-tabs-content {
+ & .antd5-tabs-content {
height: 100%;
}
}
`}
- >
- <Tabs.TabPane
- key={1}
- tab={t('Charts')}
- css={css`
- height: 100%;
- `}
- >
- <SliceAdder />
- </Tabs.TabPane>
- <Tabs.TabPane key={2} tab={t('Layout elements')}>
- <NewTabs />
- <NewRow />
- <NewColumn />
- <NewHeader />
- <NewMarkdown />
- <NewDivider />
- {dashboardComponents
- .getAll()
- .map(({ key: componentKey, metadata }) => (
- <NewDynamicComponent
- metadata={metadata}
- componentKey={componentKey}
- />
- ))}
- </Tabs.TabPane>
- </Tabs>
+ items={[
+ {
+ key: '1',
Review Comment:
human-readable if possible
##########
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx:
##########
@@ -67,7 +67,9 @@ const FilterTitlePane: FC<Props> = ({
setTimeout(() => {
const element = document.getElementById('native-filters-tabs');
if (element) {
- const navList = element.getElementsByClassName('ant-tabs-nav-list')[0];
+ const navList = element.getElementsByClassName(
+ 'antd5-tabs-nav-list',
Review Comment:
Curious if there is a better way to do it without relying on classNames
which are not in our control?
##########
superset-frontend/src/explore/components/ControlPanelsContainer.tsx:
##########
@@ -156,40 +153,8 @@ const Styles = styled.div`
text-align: center;
font-weight: ${({ theme }) => theme.fontWeightStrong};
}
-`;
-
-const ControlPanelsTabs = styled(Tabs)`
- ${({ theme, fullWidth }) => css`
- height: 100%;
- overflow: visible;
- .ant-tabs-nav {
- margin-bottom: 0;
- }
- .ant-tabs-nav-list {
- width: ${fullWidth ? '100%' : '50%'};
- }
- .ant-tabs-tabpane {
- height: 100%;
- }
- .ant-tabs-content-holder {
- padding-top: ${theme.sizeUnit * 4}px;
- }
-
- .ant-collapse-ghost > .ant-collapse-item {
- &:not(:last-child) {
- border-bottom: 1px solid ${theme.colorSplit};
- }
-
- & > .ant-collapse-header {
- font-size: ${theme.fontSizeSM}px;
- }
-
- & > .ant-collapse-content > .ant-collapse-content-box {
- padding-bottom: 0;
- font-size: ${theme.fontSizeSM}px;
- }
- }
- `}
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
Review Comment:
Can we rely on vanilla?
##########
superset-frontend/src/features/datasets/AddDataset/EditDataset/index.tsx:
##########
@@ -63,15 +63,25 @@ const EditPage = ({ id }: EditPageProps) => {
</TabStyles>
);
- return (
- <StyledTabs moreIcon={null} fullWidth={false}>
- <Tabs.TabPane tab={TRANSLATIONS.COLUMNS_TEXT} key="1" />
- <Tabs.TabPane tab={TRANSLATIONS.METRICS_TEXT} key="2" />
- <Tabs.TabPane tab={usageTab} key="3">
- <UsageTab datasetId={id} />
- </Tabs.TabPane>
- </StyledTabs>
- );
+ const items = [
+ {
+ key: '1',
Review Comment:
human-redable if possible
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
