Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: base tabbed modal for new database CRUD UI #10668

Merged
merged 12 commits into from
Aug 27, 2020

Conversation

riahk
Copy link
Contributor

@riahk riahk commented Aug 25, 2020

SUMMARY

  • Add DatabaseModal opened from new DatabaseList UI
  • Sections separated into sections based on relevance
  • Modal can accept a database object to trigger edit mode
  • Add styled ant-d Modal to src/common/components
  • As per feat: setup react page with submenu for datasources listview  #10642 new UI is only available when both ENABLE_REACT_CRUD_VIEWS and SIP_34_DATABASE_UI config flags are turned on

Tabbed sections will be built in later PRs.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen Shot 2020-08-24 at 3 38 04 PM

Screen Shot 2020-08-24 at 3 38 14 PM

Screen Shot 2020-08-24 at 4 55 21 PM

TEST PLAN

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


const { TabPane } = Tabs;

const StyledIcon = styled(Icon)`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if this will be a common occurrence for the Icon (having text to the right of it). If so, it might make sense to add a prop to that component, handle the styling on that side, and just use the prop here.

`;

const StyledTabs = styled(Tabs)`
margin-top: -18px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this to counteract some other padding/margin that should be removed instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it was a hack to counteract the modal body default padding. Not sure if I want to change the modal padding since generally, it's nice to have. It just looks weird for the tabs in particular.

Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, I'm excited about a lot of these changes! Made some questions/comments/suggestions about small tweaks.

Copy link
Member

@nytai nytai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly looks good to me. Can we add some tests?

@riahk riahk requested review from rusackas and nytai August 25, 2020 22:21
@codecov-commenter
Copy link

Codecov Report

Merging #10668 into master will increase coverage by 4.06%.
The diff coverage is 66.07%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #10668      +/-   ##
==========================================
+ Coverage   60.18%   64.25%   +4.06%     
==========================================
  Files         783      789       +6     
  Lines       36934    37032      +98     
  Branches     3527     3535       +8     
==========================================
+ Hits        22228    23794    +1566     
+ Misses      14519    13126    -1393     
+ Partials      187      112      -75     
Flag Coverage Δ
#cypress 54.10% <ø> (?)
#javascript 60.85% <66.07%> (-0.03%) ⬇️
#python 59.82% <ø> (+0.05%) ⬆️

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

Impacted Files Coverage Δ
...nd/src/views/CRUD/data/dataset/AddDatasetModal.tsx 60.00% <0.00%> (-1.77%) ⬇️
superset-frontend/src/common/components/Tabs.tsx 50.00% <50.00%> (ø)
...end/src/views/CRUD/data/database/DatabaseModal.tsx 58.18% <58.18%> (ø)
...tend/src/views/CRUD/data/database/DatabaseList.tsx 74.28% <70.00%> (-25.72%) ⬇️
superset-frontend/src/common/components/Modal.tsx 94.11% <94.11%> (ø)
superset-frontend/src/components/Icon/index.tsx 100.00% <100.00%> (ø)
...perset-frontend/src/views/CRUD/chart/ChartList.tsx 72.41% <0.00%> (-3.78%) ⬇️
...rontend/src/views/CRUD/dashboard/DashboardList.tsx 70.43% <0.00%> (-3.57%) ⬇️
...ontend/src/views/CRUD/data/dataset/DatasetList.tsx 71.83% <0.00%> (-1.51%) ⬇️
superset/db_engine_specs/mssql.py 92.30% <0.00%> (-1.03%) ⬇️
... and 175 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 b86c0e5...492b450. Read the comment docs.

Copy link
Member

@nytai nytai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, thanks for adding some tests!

@mistercrunch
Copy link
Member

I like the new tabs and modal, but we'll have to go back and migrate all of the react-bootstrap's instances of these components and point them to these new style wrappers (that's outside the scope of this PR).

What color Is the active tab underline? looks like a dark blue. Shouldn't this be our brand-primary color?

Copy link
Member

@willbarrett willbarrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good progress! One question, but I may simply not be understanding the state of things :)

@riahk
Copy link
Contributor Author

riahk commented Aug 27, 2020

@mistercrunch yea that's a dark blue from our theme colors, as per the figma mocks. I can consult with design and possibly update it?

@nytai nytai merged commit c715cad into apache:master Aug 27, 2020
@nytai nytai deleted the moriah/db-ui-add-modal branch August 27, 2020 21:28
@mistercrunch
Copy link
Member

@riahk sorry about the confusion, stick with the Figma designs!

Let's note that we now have 2 new component (tabs & modal) that don't fully meet the horizontal component process, so we'll need to:

  • add them to react-storybook
  • migrate all instances of tabs and modal react-bootstrap components to these new ones

@willbarrett
Copy link
Member

@mistercrunch Yes, that's accurate. We'll track those as separate pieces of work.

Ofeknielsen pushed a commit to ofekisr/incubator-superset that referenced this pull request Oct 5, 2020
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.38.0 labels Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XL 🚢 0.38.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants