fix(dataset): resizable dataset layout left column

[justinpark]

SUMMARY

Since #24599 introduced the TableSelector in dataset left column, it also collapses the overflowing (long) table names like before SQLLab editor.. This commit also introduces the Resizable Leftbar in dataset layout to fix the problem as SQL Lab does.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

after--resizable-left-column.mov

Before:

before--resizable-column.mov

TESTING INSTRUCTIONS

Go to "Add Dataset" and choose a schema which contains a long table name

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #24829 (0697490) into master (e2d5046) will decrease coverage by 0.01%.
Report is 2 commits behind head on master.
The diff coverage is 81.81%.

❗ Current head 0697490 differs from pull request most recent head ff8a6bb. Consider uploading reports for the commit ff8a6bb to get more accurate results

@@            Coverage Diff             @@
##           master   #24829      +/-   ##
==========================================
- Coverage   68.99%   68.99%   -0.01%     
==========================================
  Files        1903     1903              
  Lines       74072    74073       +1     
  Branches     8193     8193              
==========================================
- Hits        51107    51106       -1     
  Misses      20844    20844              
- Partials     2121     2123       +2     

Flag	Coverage Δ
javascript	55.82% <66.66%> (-0.01%)	⬇️

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

Files Changed	Coverage Δ
...c/features/datasets/AddDataset/LeftPanel/index.tsx	89.47% <ø> (ø)
superset-frontend/src/features/datasets/styles.ts	92.00% <50.00%> (-8.00%)	⬇️
...tend/src/features/datasets/DatasetLayout/index.tsx	100.00% <100.00%> (ø)
superset/databases/api.py	89.90% <100.00%> (ø)
superset/views/core.py	69.46% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[michael-s-molina]

Given that LeftColumn and RightColumn are pretty much overriding the properties of Column, could you remove Column? I think it will be way more readable.

export const LeftColumn = styled.div<{ theme: SupersetTheme; width?: number }>`
  width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
  height: auto;
  flex-direction: column;
`;

export const RightColumn = styled.div`
  width: auto;
  height: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
`;

[justinpark]

@michael-s-molina I updated the styles as you suggested. could you review this pr again?

[michael-s-molina]

LGTM

[lyndsiWilliams]

/testenv up

[github-actions]

@lyndsiWilliams Ephemeral environment spinning up at http://54.188.162.116:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.