replaces bs tabs with ivy tabs in datasets page

wherehows-web/app/routes/datasets/dataset.js

@@ -342,7 +342,6 @@ export default Route.extend({
           aclAccessResponse: null,
           currentUserInfo: ''
         });
-        throw error;
       });
   },
 

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';

wherehows-web/app/styles/components/ivy-tabs/_addendum.scss

@@ -0,0 +1,3 @@
+.ivy-tabs-tablist {
+  margin: item-spacing(4 0);
+}

wherehows-web/app/styles/components/ivy-tabs/_all.scss

@@ -0,0 +1,4 @@
+@import 'tabs';
+@import 'addendum';
+
+@include tabs();

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);
+        }
+      }
+    }
+  }
+}

wherehows-web/app/templates/datasets/dataset.hbs

@@ -152,70 +152,50 @@
     {{/if}}
   </div>
 
-  <ul class="nav nav-tabs nav-justified tabbed-navigation-list">
+  {{#ivy-tabs selection=selection as |tabs|}}
-    {{#unless isPinot}}
+
-      <li id="properties">
+    {{#tabs.tablist as |tablist|}}
-        <a data-toggle="tab" href="#propertiestab">
+
-          Properties
+      {{#unless isPinot}}
-        </a>
+        {{#tablist.tab "Properties" on-select=(action (mut selection))}}Properties{{/tablist.tab}}
-      </li>
+      {{/unless}}
-    {{/unless}}
+
-    <li id="comments">
+      {{!--feature not available--}}
-      <a data-toggle="tab" href="#commentstab">
+      <span style="display:none">
-        Comments
+        {{#tablist.tab "Access" on-select=(action (mut selection))}}ACL Access{{/tablist.tab}}
-      </a>
+      </span>
-    </li>
+
-    <li id="schemas"><a data-toggle="tab" href="#schematab">Schema</a></li>
+      {{#tablist.tab "Comments" on-select=(action (mut selection))}}Comments{{/tablist.tab}}
-    <li id="aclaccess" style="display:none">
+
-      <a data-toggle="tab" href="#acl-accesstab">ACL Access</a>
+      {{#tablist.tab "Schema" on-select=(action (mut selection))}}Schema{{/tablist.tab}}
-    </li>
+
-    <li id="ownership" class="active">
+      {{#tablist.tab "Ownership" on-select=(action (mut selection))}}
-      <a data-toggle="tab" href="#ownertab">Ownership</a>
+        Ownership
-      {{#if requiredMinNotConfirmed}}
+        {{#if requiredMinNotConfirmed}}
-        <span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
-      {{/if}}
-    </li>
-    {{#if isInternal}}
-      <li id="compliance">
-        <a data-toggle="tab"
-           title="Compliance"
-           href="#compliancetab">
-          Compliance
-        </a>
-        {{#if isNewComplianceInfo}}
           <span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
         {{/if}}
-      </li>
+      {{/tablist.tab}}
-    {{/if}}
-    {{#unless isSFDC}}
-      <li id="samples"><a data-toggle="tab" href="#sampletab">Sample Data</a></li>
-    {{/unless}}
-    <li id="impacts">
-      <a data-toggle="tab"
-         title="Down Stream Impact Analysis"
-         href="#impacttab">
-        Downstream
-      </a>
-    </li>
-    <li id="depends">
-      <a data-toggle="tab"
-         title="Relations"
-         href="#dependtab">
-        Relations
-      </a>
-    </li>
-    <li id="access">
-      <a data-toggle="tab"
-         title="Accessibilities"
-         href="#accesstab">
-        Availability
-      </a>
-    </li>
-  </ul>
 
-  <div class="tab-content">
+      {{#if isInternal}}
-    {{#unless isPinot}}
+        {{#tablist.tab "Compliance" on-select=(action (mut selection))}}
-      <div id="propertiestab" class="tab-pane">
+          Compliance
+
+          {{#if isNewComplianceInfo}}
+            <span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
+          {{/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}}
-      </div>
+      {{/unless}}
-    {{/unless}}
+    {{/tabs.tabpanel}}
 
-    <div id="commentstab" class="tab-pane">
+    {{#tabs.tabpanel "Comments"}}
       {{dataset-comments
         comments=datasetComments
         updateDatasetComment=(action "updateDatasetComment")
         deleteDatasetComment=(action "destroyDatasetComment")
         addDatasetComment=(action "createDatasetComment")
       }}
-    </div>
+    {{/tabs.tabpanel}}
 
-    <div id="schematab" class="tab-pane">
+    {{#tabs.tabpanel "Schema"}}
       {{dataset-schema
         isTable=isTable
         json=model.schema
         schemas=schemas
       }}
-    </div>
+    {{/tabs.tabpanel}}
-    <div id="ownertab" class="tab-pane active">
+
+    {{#tabs.tabpanel "Ownership"}}
       {{dataset-authors
         owners=owners
         ownerTypes=ownerTypes
         save=(action "saveOwnerChanges")
       }}
-    </div>
+    {{/tabs.tabpanel}}
-    {{#unless isSFDC}}
-      <div id="sampletab" class="tab-pane">
-        {{#dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}}
-        {{/dataset-sample}}
-      </div>
-    {{/unless}}
-    <div id="impacttab" class="tab-pane">
-      {{#dataset-impact hasImpacts=hasImpacts impacts=impacts}}
-      {{/dataset-impact}}
-    </div>
-    <div id="dependtab" class="tab-pane">
-      {{#dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}}
-      {{/dataset-relations}}
-    </div>
-    <div id="accesstab" class="tab-pane">
-      {{#dataset-access hasAccess=hasAccess accessibilities=accessibilities}}
-      {{/dataset-access}}
-    </div>
 
-    <div id="compliancetab" class="tab-pane">
+    {{#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")
       }}
-    </div>
+    {{/tabs.tabpanel}}
 
-     <div id="acl-accesstab" class="tab-pane">
+    {{#tabs.tabpanel "Access"}}
       {{dataset-aclaccess
         accessInfo=aclAccessResponse
         currentUser=currentUserInfo
       }}
-    </div>
+    {{/tabs.tabpanel}}
 
-  </div>
+  {{/ivy-tabs}}
-</div>
+</div>

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",

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"