feat: adding support for client certificates

import-cc-table.js

@@ -0,0 +1,15 @@
+/**
+@license
+Copyright 2018 The Advanced REST client authors <arc@mulesoft.com>
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+import { ImportCcTable } from './src/ImportCcTable.js';
+window.customElements.define('import-cc-table', ImportCcTable);

src/ImportCcTable.js

@@ -0,0 +1,82 @@
+/**
+@license
+Copyright 2018 The Advanced REST client authors <arc@mulesoft.com>
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+*/
+import { ImportBaseTable } from './ImportBaseTable.js';
+import { html, css } from 'lit-element';
+/**
+ * An element to display list of authorization data to import.
+ *
+ * @customElement
+ * @demo demo/index.html
+ * @memberof UiElements
+ * @extends {ImportBaseTable}
+ */
+export class ImportCcTable extends ImportBaseTable {
+  static get styles() {
+    return [
+      ImportBaseTable.styles,
+      css``
+    ];
+  }
+
+  get selectedItems() {
+    const indexes = this.selectedIndexes;
+    const items = this.data;
+    const result = [];
+    if (!items || !indexes.length) {
+      return result;
+    }
+    for (let i = 0, len = items.length; i < len; i++) {
+      const id = items[i][0]._id;
+      if (indexes.indexOf(id) !== -1) {
+        result[result.length] = items[i];
+      }
+    }
+    return result;
+  }
+
+  repeaterTemplate(data) {
+    if (!data || !data.length) {
+      return '';
+    }
+    const { selectedIndexes } = this;
+    return data.map((item, index) => this._outerTemplate(item, index, selectedIndexes));
+  }
+
+  _outerTemplate(item, index, selectedIndexes) {
+    const [indexData] = item;
+    return html`
+    <anypoint-icon-item data-index="${index}" data-key="${indexData._id}">
+      <anypoint-checkbox
+        data-index="${index}"
+        .checked="${selectedIndexes.indexOf(indexData._id) !== -1}"
+        slot="item-icon"
+        aria-label="Toggle selection"
+        tabindex="-1"
+      ></anypoint-checkbox>
+      ${this._itemBodyContentTemplate(indexData, index)}
+    </anypoint-icon-item>`;
+  }
+
+  _itemBodyContentTemplate(item) {
+    return html`
+    <anypoint-item-body twoline>
+      <span class="name-label">${item.name}</span>
+      <span class="type-label">Type: ${item.type}</span>
+    </anypoint-item-body>`;
+  }
+
+  _createSelectionArray(items) {
+    return (items || []).map((item) => item[0]._id);
+  }
+}

src/ImportDataInspector.js

@@ -22,6 +22,7 @@ import '../import-cookies-table.js';
 import '../import-auth-data-table.js';
 import '../import-url-history-table.js';
 import '../import-websocket-url-history-table.js';
+import '../import-cc-table.js';
 import styles from './InspectorStyles.js';
 /**
  * An element to display tables of import data.
@@ -128,6 +129,7 @@ export class ImportDataInspector extends LitElement {
     result['auth-data'] = this._getTableData('import-auth-data-table');
     result['url-history'] = this._getTableData('import-url-history-table');
     result['websocket-url-history'] = this._getTableData('import-websocket-url-history-table');
+    result['client-certificates'] = this._getTableData('import-cc-table');
     return result;
   }
 
@@ -144,6 +146,7 @@ export class ImportDataInspector extends LitElement {
     ${this._authDataTableTemplate(data, compatibility)}
     ${this._urlsTableTemplate(data, compatibility)}
     ${this._socketUrlsTableTemplate(data, compatibility)}
+    ${this._ccTableTemplate(data, compatibility)}
 
     <section class="form-actions">
       <anypoint-button
@@ -278,6 +281,19 @@ export class ImportDataInspector extends LitElement {
       ?compatibility="${compatibility}"
     ></import-websocket-url-history-table>`;
   }
+
+  _ccTableTemplate(data, compatibility) {
+    const items = data['client-certificates'];
+    if (!items || !items.length) {
+      return '';
+    }
+    return html`
+    <import-cc-table
+      tabletitle="Client certificates"
+      .data="${items}"
+      ?compatibility="${compatibility}"
+    ></import-cc-table>`;
+  }
   /**
    * Fired when the user accepts the import
    * Event's detail object is ARC import data object.

test/import-data-inspector.test.js

@@ -33,7 +33,22 @@ describe('<import-data-inspector>', function() {
       'websocket-url-history': DataGenerator.generateUrlsData({
         size: 5
       }),
-      'auth-data': [{ _id: 'test', encoded: 'test' }]
+      'auth-data': [{ _id: 'test', encoded: 'test' }],
+      'client-certificates': [[{
+        name: "Bob pem",
+        type: "pem",
+        dataKey: "2bcf5d24-744b-4002-ad80-5e3b9bfead18",
+        created: 1577999288834,
+        _id: "60547629-570a-4b4a-8529-55723cd3f80d",
+      }, {
+        _id: '2bcf5d24-744b-4002-ad80-5e3b9bfead18',
+        cert: {
+          "data": "-----BEGIN CERTIFICATE-----\ntest\n-----END CERTIFICATE-----\n"
+        },
+        key: {
+          "data": "-----BEGIN PRIVATE KEY-----\ntest\n-----END PRIVATE KEY-----\n"
+        },
+      }]]
     };
   }
 
@@ -106,6 +121,12 @@ describe('<import-data-inspector>', function() {
       assert.ok(node, 'table is rendered');
       assert.typeOf(node.data, 'array', 'table has data');
     });
+
+    it('renders client certificates table', () => {
+      const node = element.shadowRoot.querySelector('import-cc-table');
+      assert.ok(node, 'table is rendered');
+      assert.typeOf(node.data, 'array', 'table has data');
+    });
   });
 
   describe('_getTableData()', function() {
@@ -151,7 +172,7 @@ describe('<import-data-inspector>', function() {
 
     it('Has all data', function() {
       result = element.collectData();
-      assert.lengthOf(Object.keys(result), 12);
+      assert.lengthOf(Object.keys(result), 13);
     });
 
     it('Will contain partial import', function() {

test/import-panel.test.js

@@ -2,7 +2,6 @@ import { fixture, assert, html, nextFrame } from '@open-wc/testing';
 import '@advanced-rest-client/arc-data-import/arc-data-import.js';
 import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions.js';
 import { DataGenerator } from '@advanced-rest-client/arc-data-generator/arc-data-generator.js';
-// import * as sinon from 'sinon/pkg/sinon-esm.js';
 import { DataTestHelper } from './test-helper.js';
 import '../import-panel.js';
 
@@ -146,7 +145,22 @@ describe('<import-panel>', function() {
         'headers-sets': DataGenerator.generateHeadersSetsData(),
         'cookies': DataGenerator.generateCookiesData(),
         'url-history': DataGenerator.generateUrlsData(),
-        'websocket-url-history': DataGenerator.generateUrlsData()
+        'websocket-url-history': DataGenerator.generateUrlsData(),
+        'client-certificates': [[{
+          name: "Bob pem",
+          type: "pem",
+          dataKey: "2bcf5d24-744b-4002-ad80-5e3b9bfead18",
+          created: 1577999288834,
+          _id: "60547629-570a-4b4a-8529-55723cd3f80d",
+        }, {
+          _id: '2bcf5d24-744b-4002-ad80-5e3b9bfead18',
+          cert: {
+            "data": "-----BEGIN CERTIFICATE-----\ntest\n-----END CERTIFICATE-----\n"
+          },
+          key: {
+            "data": "-----BEGIN PRIVATE KEY-----\ntest\n-----END PRIVATE KEY-----\n"
+          },
+        }]]
       };
       document.body.addEventListener('import-data', importCallback);
     });