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

fix: improve import flow UI/UX #12070

Merged
merged 3 commits into from
Dec 16, 2020
Merged

Conversation

betodealmeida
Copy link
Member

@betodealmeida betodealmeida commented Dec 16, 2020

SUMMARY

Improve the UI/UX in the import modal:

  1. When canceling modal and after import, clear the state so that a second modal shows up empty.
  2. Remove icon from header.
  3. Improve padding on import SVG icon.
  4. Improve padding on modal, aligning header with body text.
  5. Increase vertical margin between sections in the modal.
  6. Update text.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Updated import icon (top-right):

Screenshot_2020-12-15 Superset(5)

Updated modal:

Screenshot_2020-12-15 Superset(6)

Asking for password:

Screenshot_2020-12-15 Superset(7)

Modal is cleared after import:

Screenshot_2020-12-15 Superset(8)

Asking for overwrite confirmation:

Screenshot_2020-12-16 Superset

TEST PLAN

See screenshots.

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

@pull-request-size pull-request-size bot added size/L and removed size/M labels Dec 16, 2020
@codecov-io
Copy link

codecov-io commented Dec 16, 2020

Codecov Report

Merging #12070 (53d8c03) into master (12e086d) will decrease coverage by 6.37%.
The diff coverage is 47.05%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #12070      +/-   ##
==========================================
- Coverage   66.57%   60.20%   -6.38%     
==========================================
  Files         956      914      -42     
  Lines       46859    45148    -1711     
  Branches     4590     4079     -511     
==========================================
- Hits        31198    27180    -4018     
- Misses      15535    17968    +2433     
+ Partials      126        0     -126     
Flag Coverage Δ
cypress 53.14% <47.05%> (+7.29%) ⬆️
javascript ?
python 63.98% <ø> (-0.53%) ⬇️

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

Impacted Files Coverage Δ
superset-frontend/src/components/Menu/SubMenu.tsx 93.10% <ø> (-6.90%) ⬇️
...rset-frontend/src/components/ImportModal/index.tsx 42.30% <18.18%> (-32.70%) ⬇️
...set-frontend/src/common/components/Modal/Modal.tsx 100.00% <100.00%> (ø)
...perset-frontend/src/views/CRUD/chart/ChartList.tsx 75.00% <100.00%> (-6.46%) ⬇️
...rontend/src/views/CRUD/dashboard/DashboardList.tsx 70.65% <100.00%> (-5.50%) ⬇️
...tend/src/views/CRUD/data/database/DatabaseList.tsx 68.23% <100.00%> (-7.77%) ⬇️
...ontend/src/views/CRUD/data/dataset/DatasetList.tsx 3.64% <100.00%> (-65.15%) ⬇️
...uperset-frontend/src/dashboard/util/dnd-reorder.js 0.00% <0.00%> (-100.00%) ⬇️
...rset-frontend/src/dashboard/util/getEmptyLayout.js 0.00% <0.00%> (-100.00%) ⬇️
...dashboard/components/resizable/ResizableHandle.jsx 0.00% <0.00%> (-100.00%) ⬇️
... and 397 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 12e086d...53d8c03. Read the comment docs.

import { useImportResource } from 'src/views/CRUD/hooks';
import { ImportResourceName } from 'src/views/CRUD/types';

export const StyledIcon = styled(Icon)`
margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
`;

const HelperMessage = styled.div`
display: block;
Copy link
Member

Choose a reason for hiding this comment

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

curious, is there something that is inherited that is making this div some other kind of display, since block is the default?

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah, you're right, it's not needed here. I copied the style from another helper class where the display is flex.

@betodealmeida betodealmeida merged commit 69185ee into apache:master Dec 16, 2020
amitmiran137 pushed a commit to simcha90/incubator-superset that referenced this pull request Dec 18, 2020
* upstream/master: (55 commits)
  feat(explore): time picker enhancement (apache#11418)
  feat: update alert/report icons and column order (apache#12081)
  feat(explore): metrics and filters controls redesign (apache#12095)
  feat(alerts/reports): add refresh action (apache#12071)
  chore: add latest tag action (apache#11148)
  fix(reports): increase crontab size and alert fixes (apache#12056)
  Small typo fix in Athena connection docs (apache#12099)
  feat(queries): security perm simplification (apache#12072)
  feat(databases): security perm simplification (apache#12036)
  feat(dashboards): security permissions simplification (apache#12012)
  feat(logs): security permissions simplification (apache#12061)
  chore: Remove unused CodeModal (apache#11972)
  Fix typescript error (apache#12074)
  fix: handle context-dependent feature flags in CLI (apache#12088)
  fix: Fix "View in SQLLab" bug (apache#12086)
  feat(alert/report): add 'not null' condition option to modal (apache#12077)
  bumping superset ui to 15.18 and deckgl to 0.3.2 (apache#12078)
  fix: Python dependencies in apache#11499 (apache#12079)
  reset active tab on open (apache#12048)
  fix: improve import flow UI/UX (apache#12070)
  ...
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.0.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 preset-io size/L 🚢 1.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants