refactor: Bootstrap to AntD - Collapse #12920

michael-s-molina · 2021-02-03T14:38:49Z

SUMMARY

Migrates Collapse component from Bootstrap to AntD.
Unifies all Collapse stories into a single one with controls support.
Moves Collapse component to own folder.
Fixes padding and border in storybook gallery examples.
Increases clickable area in SQL Lab collapsable tables.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

1 - Open any screen that contains a Collapse (explore, welcome, dashboards, etc.)
2 - All collapse components should have the same theme and behavior
3 - Additional testing can be done using Storybook

ADDITIONAL INFORMATION

superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx

superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx

codecov-io · 2021-02-03T16:49:45Z

Codecov Report

Merging #12920 (5b62a9c) into master (9b5e66b) will decrease coverage by 13.73%.
The diff coverage is 10.34%.

@@             Coverage Diff             @@
##           master   #12920       +/-   ##
===========================================
- Coverage   72.29%   58.55%   -13.74%     
===========================================
  Files         864      478      -386     
  Lines       44883    15977    -28906     
  Branches     5403     4121     -1282     
===========================================
- Hits        32450     9356    -23094     
+ Misses      12224     6621     -5603     
+ Partials      209        0      -209

Flag	Coverage Δ
cypress	`58.55% <10.34%> (?)`
javascript	`?`
python	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...et-frontend/src/SqlLab/components/TableElement.jsx	`5.88% <0.00%> (-80.64%)`	⬇️
...-frontend/src/common/components/Collapse/index.tsx	`94.73% <ø> (ø)`
...t-frontend/src/common/components/Tooltip/index.tsx	`100.00% <ø> (ø)`
superset-frontend/src/common/components/index.tsx	`100.00% <ø> (ø)`
superset-frontend/src/components/Button/index.tsx	`100.00% <ø> (ø)`
...dashboard/components/FiltersBadge/DetailsPanel.tsx	`54.05% <ø> (-0.50%)`	⬇️
.../src/explore/components/ControlPanelsContainer.jsx	`86.73% <ø> (+11.22%)`	⬆️
...frontend/src/explore/components/DataTablesPane.tsx	`56.52% <ø> (+32.47%)`	⬆️
...rontend/src/explore/components/DatasourcePanel.tsx	`68.29% <ø> (-10.88%)`	⬇️
...plore/components/controls/FixedOrMetricControl.jsx	`9.25% <0.00%> (-43.47%)`	⬇️
... and 787 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9b5e66b...5b62a9c. Read the comment docs.

rusackas · 2021-02-18T08:12:22Z

superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx

+              > .ant-collapse-item.ant-collapse-no-arrow
+              > .ant-collapse-header {
+              border: 0px;
+              padding: 0px 0px 8px 0px;


Suggested change

padding: 0px 0px 8px 0px;

padding: 0px 0px 8px 0px;

Nit, but would be nice to use gridUnits here and in the .well selector below.

Also, I think this deep selector is definitely better than !important, but now I'm just curious if we can tack on an id to the element itself, and use &#someID.ant-... to to throw a little more value at the selector weighting.

Applied gridUnit.

About the ID the & is transformed into a unique class name by emotion giving the appropriate weighting value.

superset-frontend/src/common/components/Collapse/Collapse.stories.tsx

superset-frontend/src/common/components/Collapse/index.tsx

superset-frontend/src/common/components/index.tsx

rusackas · 2021-02-18T08:26:49Z

superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx

+                )}
+                {this.state.type === controlTypes.metric && (
+                  <span>
+                    <span style={{ fontWeight: 'normal' }}>metric: </span>


This looks like it would be normal font weight, and not need this style prop. But if it does need an override, it might be nice to use the css prop and pull in theme.typography.weights.normal here.

I realize this is just stuff carried over... no need to worry here I suppose, as we'll probably audit all style attributes at some point.

We didn't need that style. Fixed.

rusackas · 2021-02-18T08:31:01Z

superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx

+          >
+            <div className="well">
+              <PopoverSection
+                title="Fixed"


Another out-of-scope item since it's not pertinent to the intent of this PR, but maybe worth adding a t() here and the "Based on a metric" title below?

rusackas

This PR is looking great in general. Most of my comments are either small nits, or tangential things I noticed that aren't part of the PR's intended effort.

The only thing holding up my approval is the export of the AntD component we don't want people using, if we're to favor the customized one.

michael-s-molina · 2021-02-19T12:41:12Z

@rusackas I tackled your comments and also added tests for Collapse.

rusackas

LGTM, thanks for all the touch-ups! Looks like a minor rebase is needed, and I'll merge it.

michael-s-molina · 2021-02-23T12:28:44Z

LGTM, thanks for all the touch-ups! Looks like a minor rebase is needed, and I'll merge it.

Rebased.

junlincc · 2021-03-16T21:53:28Z

@michael-s-molina
I know we standardize the collapsing behavior, but previously in SQL, table metadata (column) used to be expanded by default. Let's change it back, only for this case? thanks.🙏

michael-s-molina · 2021-03-17T10:41:58Z

@michael-s-molina
I know we standardize the collapsing behavior, but previously in SQL, table metadata (column) used to be expanded by default. Let's change it back, only for this case? thanks.🙏

Fixed in #13624

superset-github-bot bot added the Turing label Feb 3, 2021

pull-request-size bot added the size/XL label Feb 3, 2021

simcha90 reviewed Feb 3, 2021

View reviewed changes

superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx Show resolved Hide resolved

simcha90 reviewed Feb 3, 2021

View reviewed changes

superset-frontend/src/explore/components/controls/FixedOrMetricControl.jsx Outdated Show resolved Hide resolved

junlincc added the change:component label Feb 4, 2021

michael-s-molina force-pushed the bootstrap-to-antd-collapse branch 2 times, most recently from 9f1538e to 2561ba3 Compare February 8, 2021 19:38

rusackas added the hold! On hold label Feb 16, 2021

michael-s-molina force-pushed the bootstrap-to-antd-collapse branch from 2561ba3 to 98e548f Compare February 16, 2021 17:06

rusackas added hold:testing! On hold for testing and removed hold! On hold labels Feb 18, 2021

rusackas reviewed Feb 18, 2021

View reviewed changes

superset-frontend/src/common/components/Collapse/Collapse.stories.tsx Outdated Show resolved Hide resolved

rusackas reviewed Feb 18, 2021

View reviewed changes

superset-frontend/src/common/components/Collapse/index.tsx Outdated Show resolved Hide resolved

rusackas reviewed Feb 18, 2021

View reviewed changes

superset-frontend/src/common/components/index.tsx Outdated Show resolved Hide resolved

rusackas reviewed Feb 18, 2021

View reviewed changes

rusackas requested changes Feb 18, 2021

View reviewed changes

michael-s-molina force-pushed the bootstrap-to-antd-collapse branch from 98e548f to 5c8879a Compare February 19, 2021 12:28

michael-s-molina requested a review from rusackas February 19, 2021 12:52

rusackas approved these changes Feb 22, 2021

View reviewed changes

Migrates Collapse component from Bootstrap to AntD

5b62a9c

michael-s-molina force-pushed the bootstrap-to-antd-collapse branch from 5c8879a to 5b62a9c Compare February 22, 2021 11:26

rusackas merged commit 9a05d6a into apache:master Feb 23, 2021

junlincc removed the hold:testing! On hold for testing label Mar 15, 2021

junlincc mentioned this pull request Apr 1, 2021

[SQL Lab] Expand/Collapse Arrow is not working #13903

Closed

2 tasks

michael-s-molina mentioned this pull request Apr 22, 2021

chore: Removes ColorSchemeControl.less #14199

Merged

8 tasks

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.2.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Bootstrap to AntD - Collapse #12920

refactor: Bootstrap to AntD - Collapse #12920

michael-s-molina commented Feb 3, 2021

codecov-io commented Feb 3, 2021 •

edited

Loading

rusackas Feb 18, 2021

michael-s-molina Feb 19, 2021

rusackas Feb 18, 2021

rusackas Feb 18, 2021

michael-s-molina Feb 19, 2021

rusackas Feb 18, 2021

michael-s-molina Feb 19, 2021

rusackas left a comment

michael-s-molina commented Feb 19, 2021

rusackas left a comment •

edited

Loading

michael-s-molina commented Feb 23, 2021

junlincc commented Mar 16, 2021 •

edited

Loading

michael-s-molina commented Mar 17, 2021

refactor: Bootstrap to AntD - Collapse #12920

refactor: Bootstrap to AntD - Collapse #12920

Conversation

michael-s-molina commented Feb 3, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

codecov-io commented Feb 3, 2021 • edited Loading

Codecov Report

rusackas Feb 18, 2021

Choose a reason for hiding this comment

michael-s-molina Feb 19, 2021

Choose a reason for hiding this comment

rusackas Feb 18, 2021

Choose a reason for hiding this comment

rusackas Feb 18, 2021

Choose a reason for hiding this comment

michael-s-molina Feb 19, 2021

Choose a reason for hiding this comment

rusackas Feb 18, 2021

Choose a reason for hiding this comment

michael-s-molina Feb 19, 2021

Choose a reason for hiding this comment

rusackas left a comment

Choose a reason for hiding this comment

michael-s-molina commented Feb 19, 2021

rusackas left a comment • edited Loading

Choose a reason for hiding this comment

michael-s-molina commented Feb 23, 2021

junlincc commented Mar 16, 2021 • edited Loading

michael-s-molina commented Mar 17, 2021

codecov-io commented Feb 3, 2021 •

edited

Loading

rusackas left a comment •

edited

Loading

junlincc commented Mar 16, 2021 •

edited

Loading