diff --git a/wherehows-web/app/routes/datasets/dataset.js b/wherehows-web/app/routes/datasets/dataset.js index c7a0e07d2e..37c277d876 100644 --- a/wherehows-web/app/routes/datasets/dataset.js +++ b/wherehows-web/app/routes/datasets/dataset.js @@ -342,7 +342,6 @@ export default Route.extend({ aclAccessResponse: null, currentUserInfo: '' }); - throw error; }); }, diff --git a/wherehows-web/app/styles/components/_all.scss b/wherehows-web/app/styles/components/_all.scss index b2de7c91c2..94df90b09e 100644 --- a/wherehows-web/app/styles/components/_all.scss +++ b/wherehows-web/app/styles/components/_all.scss @@ -17,8 +17,8 @@ @import 'pendulum-ellipsis-animation/all'; @import 'toggle-switch/all'; @import 'schemaless-tagging/all'; -// add scss for acl @import 'dataset-acl-access/all'; +@import 'ivy-tabs/all'; @import 'nacho/nacho-button'; @import 'nacho/nacho-global-search'; diff --git a/wherehows-web/app/styles/components/ivy-tabs/_addendum.scss b/wherehows-web/app/styles/components/ivy-tabs/_addendum.scss new file mode 100644 index 0000000000..deb9a030b9 --- /dev/null +++ b/wherehows-web/app/styles/components/ivy-tabs/_addendum.scss @@ -0,0 +1,3 @@ +.ivy-tabs-tablist { + margin: item-spacing(4 0); +} diff --git a/wherehows-web/app/styles/components/ivy-tabs/_all.scss b/wherehows-web/app/styles/components/ivy-tabs/_all.scss new file mode 100644 index 0000000000..efb29a5b28 --- /dev/null +++ b/wherehows-web/app/styles/components/ivy-tabs/_all.scss @@ -0,0 +1,4 @@ +@import 'tabs'; +@import 'addendum'; + +@include tabs(); diff --git a/wherehows-web/app/styles/components/ivy-tabs/_tabs.scss b/wherehows-web/app/styles/components/ivy-tabs/_tabs.scss new file mode 100644 index 0000000000..0d118fdb8b --- /dev/null +++ b/wherehows-web/app/styles/components/ivy-tabs/_tabs.scss @@ -0,0 +1,255 @@ +@mixin tabs { + $BREAKPOINT_800: 800px; + $BREAKPOINT_480: 480px; + + $black75: get-color(black, 0.75); + $blue7: get-color(blue7); + $blue8: get-color(blue8); + $blue9: get-color(blue9); + $white25: get-color(white, 0.25); + $white70: get-color(white, 0.7); + $white85: get-color(white, 0.85); + $white: get-color(white); + $teal5: get-color(teal5); + $tab-max-width: 220px; + $item-spacing-2: item-spacing(2); // 8px + $item-spacing-4: item-spacing(4); // 16px + $item-spacing-5: item-spacing(5); // 24px + + $tabs-border: 1px solid get-color(black, 0.15); + + .ivy-tabs { + display: block; + position: relative; + + .ivy-tabs-tabpanel[role='tabpanel'] { + display: block; + &[aria-hidden='true'] { + display: none; + } + } + + &[disabled] .ivy-tabs-tablist[role='tablist'] { + position: relative; + &:before { + display: block; + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + cursor: not-allowed; + + // Spec calls for the container to have 35% opacity, + // so we use the opposite value for an overlay + background: get-color(white, 0.65); + } + } + + .ivy-tabs-tablist[role='tablist'] { + display: flex; + flex-direction: row; + align-items: flex-end; + border-bottom: $tabs-border; + position: relative; + + .ivy-tabs-tab[role='tab'] { + font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, + Oxygen, Oxygen Sans, Cantarell, Droid Sans, Lucida Grande, Helvetica, Arial, sans-serif, Apple Color Emoji, + Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Hiragino Kaku Gothic Pro, Meiryo, Hiragino Sans GB W3, + Noto Naskh Arabic, Droid Arabic Naskh, Geeza Pro, Simplified Arabic, Noto Sans Thai, Thonburi, Dokchampa, + Droid Sans Thai, Droid Sans Fallback, '.SFNSDisplay-Regular', Heiti SC, Microsoft Yahei; + font-size: 14px; + line-height: 20px; + font-weight: 600; + color: rgba(0, 0, 0, 0.6); + outline: 0; + box-sizing: border-box; + max-width: $tab-max-width; + position: relative; + background-color: transparent; + cursor: pointer; + transition: background-color; + // ad motion easeInOut fast + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 83ms; + + // I would prefer to set the min/max height of 40px/60px here, however + // IE11 barfs on flexbox when setting any min-height. Luckily, and perhaps + // this is design doing their homework, when using the spec'd paddings and + // typography, the tab heights work out to 40px for a single line and 60px + // for a double line. Just leaving this note in case that comes back to bite me. + padding: 9px $item-spacing-2 11px; + margin-left: $item-spacing-5; + &:first-child { + margin-left: $item-spacing-4; + } + + // The underline will exist on all tabs, but be transparent + // in the unselected state for animation later. + &:before { + position: absolute; + content: ''; + height: 2px; + background-color: transparent; + left: 0; + right: 0; + bottom: 0; + // ad motion easeInOut fast + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 83ms; + } + + &[aria-selected='true'] { + color: $blue7; + background-color: transparent; + // ad motion easeInOut important + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + + &:before { + background-color: $blue7; + // ad motion easeInOut important + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + } + + @media screen and (-ms-high-contrast: active) { + text-decoration: underline; + } + + &:hover { + color: $blue8; + &:before { + background: $blue8; + } + } + + &:active { + color: $blue9; + &:before { + background: $blue9; + } + } + } + + &:hover { + color: $black75; + } + + &:active { + color: $blue8; + background-color: get-color(blue2, 0.45); + } + + &[disabled] { + color: get-color(black, 0.35); + cursor: not-allowed; + } + + // Mobile tweaks + @media screen and (min-width: $BREAKPOINT_480) and (max-width: $BREAKPOINT_800 - 1px) { + margin-left: $item-spacing-4; + } + + @media screen and (max-width: $BREAKPOINT_480 - 1px) { + margin-left: $item-spacing-2; + &:first-child { + margin-left: $item-spacing-2; + } + } + } + + // Scrolling and sizing related things + &.no-wrap .ivy-tabs-tab[role='tab'] { + white-space: nowrap; + max-width: none; + } + } + + // Pro themed tablist + &[theme='pro'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'][aria-selected='true'] { + color: $teal5; + &:before { + background: $teal5; + } + } + + // Attribute modifiers + &[in-modal='true'] .ivy-tabs-tablist .ivy-tabs-tab:first-child { + margin-left: $item-spacing-5; + } + + &[align='centered'] .ivy-tabs-tablist { + justify-content: center; + .ivy-tabs-tab:first-child { + &[aria-selected='true']:before { + left: $item-spacing-2; + right: $item-spacing-2; + } + } + } + + // What is now the "48dp" variant was originally "17px", based off the font size. + // We'll support both for backwards compatibility since it's of little consequence + // to do so. + &[size='48dp'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'], + &[size='17px'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'] { + padding-top: 12px; + padding-bottom: 16px; + font-size: 17px; + } + } + + // Inverse theme + &[theme='inverse'] { + &[disabled] .ivy-tabs-tablist[role='tablist']:before { + // Spec calls for the container to have 45% opacity, + // so we use the opposite value for an overlay + background: get-color(white, 0.55); + } + + .ivy-tabs-tablist[role='tablist'] { + border-bottom-color: $white25; + + .ivy-tabs-tab[role='tab'] { + color: $white70; + + &:hover { + color: $white85; + } + + &:active { + background: get-color(white, 0.15); + } + + &[aria-selected='true'] { + color: $white; + &:before { + background: $white; + } + + &:hover { + color: $white85; + &:before { + background: $white85; + } + } + + &:active { + color: $white70; + &:before { + background: $white70; + } + } + } + + &[disabled] { + color: get-color(white, 0.45); + } + } + } + } +} diff --git a/wherehows-web/app/templates/datasets/dataset.hbs b/wherehows-web/app/templates/datasets/dataset.hbs index e01d174388..758159a0d3 100644 --- a/wherehows-web/app/templates/datasets/dataset.hbs +++ b/wherehows-web/app/templates/datasets/dataset.hbs @@ -152,70 +152,50 @@ {{/if}} - + {{/tablist.tab}} -
- {{#unless isPinot}} -
+ {{#if isInternal}} + {{#tablist.tab "Compliance" on-select=(action (mut selection))}} + Compliance + + {{#if isNewComplianceInfo}} + + {{/if}} + {{/tablist.tab}} + {{/if}} + + {{#unless isSFDC}} + {{#tablist.tab "Sample Data" on-select=(action (mut selection))}}Sample Data{{/tablist.tab}} + {{/unless}} + + {{#tablist.tab "Relations" on-select=(action (mut selection))}}Relations{{/tablist.tab}} + + {{/tabs.tablist}} + + {{#tabs.tabpanel "Properties"}} + {{#unless isPinot}} {{dataset-deprecation deprecated=datasetView.deprecated deprecationNote=datasetView.deprecationNote @@ -223,52 +203,47 @@ }} {{dataset-property properties=properties}} -
- {{/unless}} + {{/unless}} + {{/tabs.tabpanel}} -
+ {{#tabs.tabpanel "Comments"}} {{dataset-comments comments=datasetComments updateDatasetComment=(action "updateDatasetComment") deleteDatasetComment=(action "destroyDatasetComment") addDatasetComment=(action "createDatasetComment") }} -
+ {{/tabs.tabpanel}} -
+ {{#tabs.tabpanel "Schema"}} {{dataset-schema isTable=isTable json=model.schema schemas=schemas }} -
-
+ {{/tabs.tabpanel}} + + {{#tabs.tabpanel "Ownership"}} {{dataset-authors owners=owners ownerTypes=ownerTypes save=(action "saveOwnerChanges") }} -
- {{#unless isSFDC}} -
- {{#dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}} - {{/dataset-sample}} -
- {{/unless}} -
- {{#dataset-impact hasImpacts=hasImpacts impacts=impacts}} - {{/dataset-impact}} -
-
- {{#dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}} - {{/dataset-relations}} -
-
- {{#dataset-access hasAccess=hasAccess accessibilities=accessibilities}} - {{/dataset-access}} -
+ {{/tabs.tabpanel}} -
+ {{#tabs.tabpanel "Sample Data"}} + {{#unless isSFDC}} + {{dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}} + {{/unless}} + {{/tabs.tabpanel}} + + {{#tabs.tabpanel "Relations"}} + {{#unless isSFDC}} + {{dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}} + {{/unless}} + {{/tabs.tabpanel}} + + {{#tabs.tabpanel "Compliance"}} {{dataset-compliance datasetName=model.name schemaless=schemaless @@ -281,14 +256,14 @@ onSave=(action "savePrivacyCompliancePolicy") onReset=(action "resetPrivacyCompliancePolicy") }} -
+ {{/tabs.tabpanel}} -
+ {{#tabs.tabpanel "Access"}} {{dataset-aclaccess accessInfo=aclAccessResponse currentUser=currentUserInfo }} -
+ {{/tabs.tabpanel}} -
- \ No newline at end of file + {{/ivy-tabs}} + diff --git a/wherehows-web/package.json b/wherehows-web/package.json index e1dfea4778..6621bd9b24 100644 --- a/wherehows-web/package.json +++ b/wherehows-web/package.json @@ -79,6 +79,7 @@ "eyeglass": "^1.3.0", "eyeglass-restyle": "^1.1.0", "husky": "^0.14.3", + "ivy-tabs": "^3.1.0", "lint-staged": "^6.0.1", "loader.js": "^4.2.3", "node-sass": "^4.7.2", diff --git a/wherehows-web/yarn.lock b/wherehows-web/yarn.lock index e0dcecefac..8cf83d21a4 100644 --- a/wherehows-web/yarn.lock +++ b/wherehows-web/yarn.lock @@ -5543,6 +5543,13 @@ istextorbinary@2.1.0: editions "^1.1.1" textextensions "1 || 2" +ivy-tabs@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/ivy-tabs/-/ivy-tabs-3.1.0.tgz#07eae83bf46c974bf7de2f4d9404a7abaebe39fe" + dependencies: + ember-cli-babel "^5.1.7" + ember-cli-htmlbars "^1.0.10" + jest-docblock@^21.0.0: version "21.2.0" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"