zuora_connect_ui 0.11.9 → 0.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32d372e496a1170a4795931cb901e98e540527e333c2dbb3962da0155e854e2f
-  data.tar.gz: bf6fddc5f49eeebb2ef0171428d86d505eb08ce3fec9bca7ed180850abdade6e
+  metadata.gz: 217a07e8d25bf90450ce940c088c4827773246de310224e6042cbee026dba89d
+  data.tar.gz: 67c896c71ab3678392050404f3ebf64f69a8940818d1f6504cbb8f678e48a242
 SHA512:
-  metadata.gz: e2e339ad687a0ec46e9fdba8f72fbd1427e01289cf183ece5383fbefb76a0c6031342059cc728b31b8dd44ff2a533ed013ccc9c56a4e808b8a7b263dc331ff78
-  data.tar.gz: 6b59903dbd023b6c88b7f96a293e50d2d7076ad2dfc1529644c0ed8bca4268b4d1bf625139845da2a50aa403c8cc830372f43ad61969ca4c420087207033ad34
+  metadata.gz: ebf4d8b498b476fbaa4b6e5a57bde442cb7063cc10f7db5d9f0308e023d42148e0959afb1c69babe0405c2b3db3529567346123603b801db9b21a3cae464fcea
+  data.tar.gz: 2410ba2e9498ce47623cf33b59221eaa6d023b20a36340cf31e0bc961b67e137197605450667133f33ebcd912c3ca1e4c512c259de7ea485cfc96fddfbe2d428

data/app/assets/stylesheets/zuora_connect_ui/base.scss

@@ -90,6 +90,10 @@ select {
   text-align: center;
 }
 
+#main {
+  position: relative;
+}
+
 #content {
   margin: 0 1.5rem 1.5rem 1.5rem;
   min-height: 500px;

data/app/assets/stylesheets/zuora_connect_ui/breadcrumb_bar.scss

@@ -1,110 +1,107 @@
-#breadcrumb-bar {
+#breadcrumb-bar,
+#breadcrumbs {
   min-height: 2.75rem;
-  #breadcrumbs {
-    .breadcrumb {
-      font-size: 0.75rem;
-      padding: 1rem 1.5rem 0.5rem 1.5rem;
-      margin-bottom: 0px; // override bootstrap default
-    }
-  }
-
-  #peek {
-    font-size: 0.625rem;
-    text-shadow: none;
-    background-color: transparent;
-    overflow: hidden; // keeps the contents hidden when peek is collapsed
-    width: 0;
+}
 
-    -webkit-transition: width 0.3s ease-in-out;
-    -moz-transition: width 0.3s ease-in-out;
-    transition: width 0.3s ease-in-out;
+#breadcrumbs {
+  .breadcrumb {
+    font-size: 0.75rem;
+    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    margin-bottom: 0px; // override bootstrap default
+  }
+}
 
-    &.active {
-      width: 54rem;
-    }
+#peek,
+#peek.development,
+#peek.staging,
+#peek.production {
+  font-size: 0.625rem;
+  text-shadow: none;
+  background-color: transparent;
+  overflow: hidden; // keeps the contents hidden when peek is collapsed
+  width: 0;
+
+  -webkit-transition: width 0.3s ease-in-out;
+  -moz-transition: width 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
+
+  &.active {
+    width: 54rem;
+  }
 
-    &.disabled {
-      display: block;
+  .wrapper {
+    padding-left: 1rem;
+    width: auto;
+  }
 
-      &.active {
-        width: 7rem;
-      }
+  .bucket {
+    white-space: nowrap;
+    .hidden {
+      display: inline !important;
     }
+  }
 
-    .wrapper {
-      padding-left: 1rem;
-      width: auto;
-    }
+  strong {
+    color: $neutral-1;
+  }
 
-    .bucket {
-      white-space: nowrap;
-      .hidden {
-        display: inline !important;
-      }
-    }
+  #peek-view-connect > strong:not(:first-child) {
+    margin-left: 15px;
+  }
+}
 
-    strong {
-      color: $neutral-1;
+#admin-menu {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  max-width: 100%;
+
+  background-color: $neutral-4;
+  border-left: 1px solid $neutral-2;
+  border-bottom: 1px solid $neutral-2;
+  border-radius: 0 0 0 0.5rem;
+  box-shadow: 0 1px 8px -1px $neutral-shadow;
+
+  #admin-peek-btn {
+    z-index: 1001;
+    border-radius: 0 0 0 0.5rem;
+    background: white;
+    padding: 0.5rem;
+    line-height: 1.2rem;
+    border-right: 1px solid $neutral-3;
+
+    &:before {
+      display: inline-block;
+      transform: rotate(90deg);
+      font-size: 0.75rem;
     }
+  }
 
-    #peek-view-connect > strong:not(:first-child) {
-      margin-left: 15px;
+  .dropdown-toggle {
+    cursor: pointer;
+    min-width: 120px;
+    z-index: 1001;
+    background: white;
+    font-size: 0.75rem;
+    padding: 0.5rem 1rem;
+
+    > span {
+      float: right;
+      padding: 0.25rem 0rem;
     }
   }
 
-  #admin-menu {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: absolute;
-    top: 0;
+  .dropdown-menu {
+    min-width: 120px;
+    left: unset;
     right: 0;
-    max-width: 100%;
-
-    background-color: $neutral-4;
-    border-left: 1px solid $neutral-2;
-    border-bottom: 1px solid $neutral-2;
+    margin-top: -2px;
+    font-size: 0.75rem;
     border-radius: 0 0 0 0.5rem;
-    box-shadow: 0 1px 8px -1px $neutral-shadow;
-
-    #admin-peek-btn {
-      z-index: 1001;
-      border-radius: 0 0 0 0.5rem;
-      background: white;
-      padding: 0.5rem;
-      line-height: 1.2rem;
-
-      &:before {
-        display: inline-block;
-        transform: rotate(90deg);
-        font-size: 0.75rem;
-      }
-    }
-
-    .dropdown-toggle {
-      cursor: pointer;
-      min-width: 120px;
-      z-index: 1001;
-      background: white;
-      border-left: 1px solid $neutral-3;
-      font-size: 0.75rem;
-      padding: 0.5rem 1rem;
-
-      > span {
-        float: right;
-        padding: 0.25rem 0rem;
-      }
-    }
-
-    .dropdown-menu {
-      min-width: 120px;
-      left: unset;
-      right: 0;
-      margin-top: -2px;
-      font-size: 0.75rem;
-      border-radius: 0 0 0 0.5rem;
-      border: 1px solid #d0d3da;
-      border-right: none;
-    }
+    border: 1px solid #d0d3da;
+    border-right: none;
   }
 }

data/app/helpers/zuora_connect_ui/application_helper.rb

@@ -6,44 +6,5 @@ module ZuoraConnectUi
     def zuo_parameterize(string)
       string.parameterize(separator: '_')
     end
-
-    def zuo_include_tag
-      script_tag(type: 'module', src: anjuna(ANJUNA_VERSION, true)) +
-        script_tag(nomodule: '', src: anjuna(ANJUNA_VERSION, false)) +
-        script_tag(type: 'module', src: charts(ANJUNA_VERSION, true)) +
-        script_tag(nomodule: '', src: charts(ANJUNA_VERSION, false)) +
-        link_tag(href: theme(THEME_VERSION, 'application'), rel: 'stylesheet') +
-        link_tag(href: theme(THEME_VERSION, 'theme'), rel: 'stylesheet') +
-        link_tag(href: theme(THEME_VERSION, 'icons'), rel: 'stylesheet')
-    end
-
-    def script_tag(attrs)
-      attr_map = attrs.map { |key, value| " #{key}=\"#{value}\"" }
-
-      "<script#{attr_map.join('')}></script>".html_safe
-    end
-
-    def anjuna(version, esm)
-      "https://cdn.zuora.com/@anjuna/core@#{version}" \
-        "/anjuna-core/anjuna-core#{'.esm' if esm}.js"
-    end
-
-    def charts(version, esm)
-      "https://cdn.zuora.com/@anjuna/charts@#{version}" \
-        "/anjuna-charts/anjuna-charts#{'.esm' if esm}.js"
-    end
-
-    def link_tag(attrs)
-      attr_map = attrs.map { |key, value| " #{key}=\"#{value}\"" }
-
-      "<link#{attr_map.join('')}>".html_safe
-    end
-
-    def theme(version, file)
-      "https://cdn.zuora.com/@anjuna/theme@#{version}/css/#{file}.css"
-    end
-
-    ANJUNA_VERSION = '1.2.14'
-    THEME_VERSION = '1.2.14'
   end
 end

data/app/helpers/zuora_connect_ui/asset_helper.rb

@@ -3,5 +3,42 @@
 module ZuoraConnectUi
   # Helper methods for including CDN links in views
   module AssetHelper
+    ANJUNA_VERSION = '1.2.14'
+    ANJUNA_CORE_URL = "https://cdn.zuora.com/@anjuna/core@#{ANJUNA_VERSION}/anjuna-core/anjuna-core.js"
+    ANJUNA_CHARTS_URL = "https://cdn.zuora.com/@anjuna/charts@#{ANJUNA_VERSION}/anjuna-charts/anjuna-charts.js"
+
+    def zuo_include_tag
+      anjuna_core + anjuna_charts + anjuna_theme
+    end
+
+    private
+
+    def to_esm(url)
+      url.gsub('.js', '.esm.js')
+    end
+
+    # NOTE(hartley): nomodule was added as an explict boolean attribute in Rails
+    # 6.1, meaning 'nomodule: true' should be used once minimum version is 6.1
+    # However, for consistency with older versions we have to specify 'nomodule'
+    # as the value
+    def anjuna_core
+      tag.script(type: 'module', src: to_esm(ANJUNA_CORE_URL)) +
+        tag.script(nomodule: 'nomodule', src: ANJUNA_CORE_URL)
+    end
+
+    def anjuna_charts
+      tag.script(type: 'module', src: to_esm(ANJUNA_CHARTS_URL)) +
+        tag.script(nomodule: 'nomodule', src: ANJUNA_CHARTS_URL)
+    end
+
+    def anjuna_theme
+      tag.link(href: anjuna_theme_url('application'), rel: 'stylesheet') +
+        tag.link(href: anjuna_theme_url('theme'), rel: 'stylesheet') +
+        tag.link(href: anjuna_theme_url('icons'), rel: 'stylesheet')
+    end
+
+    def anjuna_theme_url(file)
+      "https://cdn.zuora.com/@anjuna/theme@#{ANJUNA_VERSION}/css/#{file}.css"
+    end
   end
 end

data/app/views/partials/_admin_menu.html.erb

@@ -2,12 +2,12 @@
   <div id='admin-menu' class="dropdown">
     <% if defined?(peek_bar) && peek_bar %>
       <%= render 'peek/bar' %>
-    <% else %>
-      <div id="peek" class="disabled">
-        <div class="wrapper">Peek is not enabled.</div>
-      </div>
+      <div id="admin-peek-btn" class="z-icon-dotted zuo-btn"></div>
+
+      <% content_for :scripts do %>
+        $('#admin-peek-btn').on('click', () => $('#peek').toggleClass('active'));
+      <% end %>
     <% end %>
-    <div id="admin-peek-btn" class="z-icon-dotted zuo-btn"></div>
     <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Admin
       <span class="z-icon-desc"></span>
@@ -17,7 +17,3 @@
     </ul>
   </div>
 <% end %>
-
-<% content_for :scripts do %>
-  $('#admin-peek-btn').on('click', () => $('#peek').toggleClass('active'));
-<% end %>

data/app/views/partials/_table.html.erb

@@ -75,7 +75,7 @@
     '<%= table_name %>',
     {
       columns: <%= raw columns.to_json %>,
-      filters: <%= raw table_filters.to_json %>,
+      filters: <%= json_escape table_filters.to_json.html_safe %>,
       view: '<%= table_views.select { |k, v| v == true }.first[0].to_s %>',
       size: <%= initial_size %>,
       sort: <%= raw sort %>
@@ -258,7 +258,7 @@
       '<%= table_name %>',
       { view, size },
       columns,
-      <%= raw table_filters.to_json %>
+      <%= json_escape table_filters.to_json.html_safe %>
     );
 
   }

data/app/views/zuora_connect_ui/_nav.html.erb

@@ -0,0 +1,14 @@
+<% layout_id = "HTTP_ZUORA_LAYOUT_FETCH_TEMPLATE_ID" %>
+<% ui_path = "HTTP_ZUORA_UI_PATH" %>
+
+<% if request.headers[layout_id].present? || (!request.headers[ui_path].present? && !Rails.env.development?) %>
+  <%= yield %>
+<% else %>
+  <z-unified-nav-v2>
+    <div slot="breadcrumbContent">
+      <%= yield %>
+    </div>
+  </z-unified-nav-v2>
+  <script type="text/javascript" crossorigin="anonymous" src="https://cdn.zuora.com/@platform-ui/nav-v2/main.js"></script>
+<% end %>
+

data/lib/zuora_connect_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ZuoraConnectUi
-  VERSION = '0.11.9'
+  VERSION = '0.12.2'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: zuora_connect_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.9
+  version: 0.12.2
 platform: ruby
 authors:
 - Connect Team
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-21 00:00:00.000000000 Z
+date: 2022-01-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '5.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '5.1'
 - !ruby/object:Gem::Dependency
   name: select2-rails
   requirement: !ruby/object:Gem::Requirement
@@ -358,6 +358,7 @@ files:
 - app/views/partials/_row_actions.html.erb
 - app/views/partials/_table.html.erb
 - app/views/peek/views/_connect.html.erb
+- app/views/zuora_connect_ui/_nav.html.erb
 - config/initializers/oj.rb
 - lib/peek/views/connect.rb
 - lib/zuora_connect_ui.rb