Create api-keys-list view

Gruntfile.js

@@ -268,6 +268,7 @@ module.exports = function (grunt) {
     'compass',
     'copy:css_vendor_cartodb3',
     'copy:css_cartodb3',
+    'copy:css_dashboard',
     'sass',
     'concat:css'
   ]);

app/assets/stylesheets/new_dashboard/api-keys.scss

@@ -0,0 +1,47 @@
+// MobileApps plan
+// --------------------------------------------------
+
+.ApiKeys-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px solid rgba(#000, 0.1);
+}
+
+.ApiKeys-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  border-bottom: 1px solid rgba(#000, 0.1);
+}
+
+.ApiKeys-footer {
+  padding: 20px 0;
+}
+
+.ApiKeys-footer-text {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  color: #999;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 22px;
+}
+
+.ApiKeys-footer-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border: 1px solid #F2C000;
+  border-radius: 20px;
+  background: #F6D35C;
+  color: #FFF;
+  font-size: 13px;
+  line-height: 20px !important;
+  text-align: center;
+}

app/views/admin/client_applications/api_key.html.erb

@@ -11,15 +11,14 @@
     var dashboardNotifications = <%= safe_js_object @dashboard_notifications.to_json %>;
     var organization_notifications = <%= safe_js_object @organization_notifications.to_json %>;
   </script>
-  <% if @has_new_dashboard %>
-    <%= javascript_include_tag 'common_dashboard', 'api_keys_new' %>
-  <% else %>
-    <%= javascript_include_tag 'cdb.js', 'models.js', 'keys_templates.js', 'keys_deps.js', 'keys.js' -%>
-  <% end %>
 <% end %>
 
 <%= content_for(:css) do %>
-  <%= stylesheet_link_tag 'api_keys.css', :media => 'all' %>
+  <% if @has_new_dashboard %>
+    <%= stylesheet_link_tag 'api_keys_new', :media => 'all' %>
+  <% else %>
+    <%= stylesheet_link_tag 'api_keys', :media => 'all' %>
+  <% end %>
 <% end %>
 
 <%= render :partial => 'shared/flash_message' %>
@@ -32,13 +31,13 @@
     <%= render :partial => 'admin/shared/api_keys_subheader' %>
 
     <% if current_user.engine_enabled? %>
-
+      <% if @has_new_dashboard %>
-      <%= render :partial => 'api_keys_form' %>
+        <div class="js-api-keys-new"></div>
-
+      <% else %>
+        <%= render :partial => 'api_keys_form' %>
+      <% end %>
     <% else %>
-
       <%= render :partial => 'api_keys_cta' %>
-
     <% end %>
 
   </div>
@@ -46,3 +45,9 @@
 </div>
 
 <%= render 'admin/shared/footer' %>
+
+<% if @has_new_dashboard %>
+  <%= javascript_include_tag 'common_dashboard', 'api_keys_new' %>
+<% else %>
+  <%= javascript_include_tag 'cdb.js', 'models.js', 'keys_templates.js', 'keys_deps.js', 'keys.js' -%>
+<% end %>

config/application.rb

@@ -177,6 +177,8 @@ module CartoDB
       mobile_apps.css
       api_keys.css
 
+      api_keys_new.css
+
       plugins/tipsy.css
 
       *.jpg

lib/assets/javascripts/dashboard/api-keys.js

@@ -10,6 +10,7 @@ const HeaderViewModel = require('./views/api-keys/header-view-model');
 const RegenerateKeysView = require('./views/api-keys/regenerate-keys-view');
 const UpgradeMessageView = require('./components/upgrade-message-view');
 const UserNotificationView = require('./components/user-notification/user-notification-view');
+const ApiKeysListView = require('./views/api-keys/api-keys-list-view');
 const UserNotificationModel = require('./components/user-notification/user-notification-model');
 const ModalsServiceModel = require('../cartodb3/components/modals/modals-service-model');
 
@@ -63,6 +64,9 @@ $(function () {
   });
   supportView.render();
 
+  const apiKeysListView = new ApiKeysListView();
+  $('.js-api-keys-new').append(apiKeysListView.render());
+
   $('.js-regenerateApiKey').bind('click', function (event) {
     if (event) event.preventDefault();
 

lib/assets/javascripts/dashboard/views/api-keys/api-keys-list-view.js

@@ -0,0 +1,19 @@
+const CoreView = require('backbone/core-view');
+const checkAndBuildOpts = require('cartodb3/helpers/required-opts');
+const template = require('./api-keys-list.tpl');
+
+const REQUIRED_OPTS = [];
+
+module.exports = CoreView.extend({
+  events: {},
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    return this.$el.html(
+      template()
+    );
+  }
+});

lib/assets/javascripts/dashboard/views/api-keys/api-keys-list.tpl

@@ -0,0 +1,61 @@
+<header class="ApiKeys-title">
+  <h3 class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor">Your API keys</h3>
+  <button type="submit" class="CDB-Button CDB-Button--primary">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase">New API key</span>
+  </button>
+</header>
+<ul class="ApeiKeys-list">
+  <li class="ApiKeys-list-item">
+    <section>
+       <h4 class="CDB-Text CDB-Size-medium is-semibold u-mainTextColor">Master</h4>
+       <p class="CDB-Text CDB-Size-medium u-secondaryTextColor u-tSpace--m u-flex u-alignCenter">
+        a985af72dc9190c90eee07b479390a758910d770
+        <i class="CDB-IconFont CDB-IconFont-anchor u-hintTextColor CDB-Size-large u-lSpace--xl"></i>
+      </p>
+    </section>
+    <section>
+      <button class="CDB-Text CDB-Size-medium u-actionTextColor">Regenerate</button>
+    </section>
+  </li>
+  <li class="ApiKeys-list-item">
+    <section>
+       <h4 class="CDB-Text CDB-Size-medium is-semibold u-actionTextColor">Public</h4>
+       <p class="CDB-Text CDB-Size-medium u-secondaryTextColor u-tSpace--m u-flex u-alignCenter">
+        a985af72dc9190c90eee07b479390a758910d770
+        <i class="CDB-IconFont CDB-IconFont-anchor u-hintTextColor CDB-Size-large u-lSpace--xl"></i>
+      </p>
+    </section>
+    <section>
+      <button class="CDB-Text CDB-Size-medium u-actionTextColor">Edit</button>
+    </section>
+  </li>
+  <li class="ApiKeys-list-item">
+    <section>
+       <h4 class="CDB-Text CDB-Size-medium is-semibold u-actionTextColor u-flex u-alignCenter">
+        SQL Maps Test key
+        <span class="CDB-Tag CDB-Text is-gray is-semibold CDB-Size-small u-iBlock u-lSpace--xl u-upperCase">
+          SQL
+        </span>
+        <span class="CDB-Tag CDB-Text is-gray is-semibold CDB-Size-small u-iBlock u-lSpace--xl u-upperCase">
+          Maps
+        </span>
+      </h4>
+       <p class="CDB-Text CDB-Size-medium u-secondaryTextColor u-tSpace--m u-flex u-alignCenter">
+        a985af72dc9190c90eee07b479390a758910d770
+        <i class="CDB-IconFont CDB-IconFont-anchor u-hintTextColor CDB-Size-large u-lSpace--xl"></i>
+      </p>
+    </section>
+    <section>
+      <button class="CDB-Text CDB-Size-medium u-actionTextColor u-rSpace--m">Clone</button>
+      <button class="CDB-Text CDB-Size-medium u-actionTextColor u-rSpace--m">Regenerate</button>
+      <button class="CDB-Text CDB-Size-medium u-errorTextColor">Delete</button>
+    </section>
+  </li>
+</ul>
+
+<footer class="ApiKeys-footer">
+  <p class="ApiKeys-footer-text">
+    <i class="CDB-IconFont CDB-IconFont-info ApiKeys-footer-icon"></i>
+    <span>Learn more about <a href="https://carto.com/docs/carto-editor/your-account/#api-key">using your simple API key</a> in CARTO</span>
+  </p>
+</footer>

lib/assets/test/spec/cartodb/common/views/dashboard_header_view.spec.js

@@ -6,7 +6,7 @@ var Backbone = require('backbone-cdb-v3');
 var Router = require('../../../../../javascripts/cartodb/dashboard/router');
 var HeaderViewModel = require('../../../../../javascripts/cartodb/dashboard/header_view_model');
 var LocalStorage = require('../../../../../javascripts/cartodb/common/local_storage');
-
+2
 describe('common/views/dashboard_header_view', function() {
   beforeEach(function() {
     // In production is relying on DOM rendered server-side

lib/build/files/css_files.js

@@ -94,8 +94,8 @@ module.exports = css_files = {
     '<%= assets_dir %>/stylesheets/user_feed/**/*.css'
   ],
 
-  keys: [
+  api_keys_new: [
-    '<%= assets_dir %>/stylesheets/keys/**/*.css'
+    '<%= assets_dir %>/stylesheets/new_dashboard/api-keys.css'
   ],
 
   leaflet: [

lib/build/tasks/copy.js

@@ -126,7 +126,8 @@ exports.task = function (grunt) {
         cwd: 'app/assets/stylesheets',
         src: [
           '**/*.scss',
-          '!editor-3/**/*.scss'
+          '!editor-3/**/*.scss',
+          '!new_dashboard/**/*.scss'
         ],
         dest: 'tmp/sass/editor/',
         rename: function (dest, src) {
@@ -145,6 +146,16 @@ exports.task = function (grunt) {
       }]
     },
 
+    css_dashboard: {
+      files: [{
+        // TODO: remove editor
+        expand: true,
+        cwd: 'app/assets/stylesheets/new_dashboard/',
+        src: ['**/*.scss'],
+        dest: 'tmp/sass/new_dashboard/'
+      }]
+    },
+
     css_vendor_cartodb3: {
       files: [{
         expand: true,

lib/build/tasks/watch.js

@@ -8,12 +8,14 @@ exports.task = function () {
       files: [
         'app/assets/stylesheets/editor-3/**/*.scss',
         'app/assets/stylesheets/deep-insights/**/*.scss',
+        'app/assets/stylesheets/new_dashboard/**/*.scss',
         'node_modules/cartoassets/src/scss/**/*.scss',
         'node_modules/cartodb.js/themes/scss/**/*.scss'
       ],
       tasks: [
         'copy:css_vendor_cartodb3',
         'copy:css_cartodb3',
+        'copy:css_dashboard',
         'sass',
         'concat:css'
       ],