style: remove react bootstrap fade component

[nikolagigic]

SUMMARY

Replacing Bootstrap component with custom Emotion/CSS component with same behaviour in effort to move away from Bootstrap.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
https://www.loom.com/share/e1ba9e7671c34581858043bfca669ea1
After:
https://www.loom.com/share/7228d0769f3247bba5aedec407d7f3bc

TEST PLAN

1.	Log into Superset
2.	Navigate to SQL Lab > SQL Editor (/superset/sqllab)
3.	Query a table
4.	Hover over Table Element on the left side of the screen

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #11843 (6729938) into master (3578410) will decrease coverage by 4.14%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #11843      +/-   ##
==========================================
- Coverage   67.54%   63.40%   -4.15%     
==========================================
  Files         916      459     -457     
  Lines       44545    28173   -16372     
  Branches     4227        0    -4227     
==========================================
- Hits        30090    17864   -12226     
+ Misses      14352    10309    -4043     
+ Partials      103        0     -103     

Flag	Coverage Δ
cypress	?
javascript	?
python	63.40% <ø> (-0.70%)	⬇️

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

Impacted Files	Coverage Δ
superset/db_engines/hive.py	0.00% <0.00%> (-85.72%)	⬇️
superset/db_engine_specs/hive.py	54.08% <0.00%> (-29.97%)	⬇️
superset/db_engine_specs/presto.py	69.76% <0.00%> (-12.53%)	⬇️
superset/db_engine_specs/mysql.py	79.59% <0.00%> (-12.25%)	⬇️
superset/db_engine_specs/sqlite.py	65.62% <0.00%> (-9.38%)	⬇️
superset/utils/celery.py	96.42% <0.00%> (-3.58%)	⬇️
superset/examples/world_bank.py	97.10% <0.00%> (-2.90%)	⬇️
superset/examples/birth_names.py	96.51% <0.00%> (-2.33%)	⬇️
superset/views/database/mixins.py	80.70% <0.00%> (-1.76%)	⬇️
superset/result_set.py	96.69% <0.00%> (-1.66%)	⬇️
... and 460 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 3578410...6729938. Read the comment docs.

[rusackas]

This works... but would there be a downside to a simpler approach of just making it:

  transition: opacity ${({ theme }) => theme.transitionTiming}s;
  opacity: 0;
  &:hover {
    opacity: 1
  }

then, I think you could go through and remove all the code regarding the hovered state and prop.

[nikolagigic]

With this approach component would only fade in/out if we hover over the header which is not the previous behaviour we had. The previous behaviour would trigger fade in/out when we hover over TableElement component (header and body).

[junlincc]

@nikolagigic thanks for the PR! if it's ok with you, going forward, can we attach screenshot or gif on the PRs, instead of links to video? thanks! 🙏

[rusackas]

@nikolagigic thanks for the PR! if it's ok with you, going forward, can we attach screenshot or gif on the PRs, instead of links to video? thanks! 🙏

I think there are a thousand options, but I've had good luck with Giphy Capture.

[nikolagigic]

@junlincc @rusackas will do!

[rusackas]

LGTM!

There's a bit of an ongoing discussion as to where new components like this should go. This seems like a reasonable place for now, but at some point I want to make things a little more consistent, with components each having a folder with their own test file(s), a Storybook file, and the component itself. That can be a task for another day... this one is obviously pretty light/utilitarian. I appreciate the test!