Merge pull request #1038 from theseyi/more-info

creates more info component and refactors links

wherehows-web/app/components/more-info.ts

@@ -0,0 +1,41 @@
+import Component from '@ember/component';
+
+export default class MoreInfo extends Component {
+  tagName = 'span';
+
+  classNames = ['more-info'];
+
+  /**
+   * Proxies to anchor element target attribute
+   * @type {string}
+   * @memberOf MoreInfo
+   */
+  target: string;
+
+  /**
+   * Proxies to anchor element href attribute
+   * @type {string}
+   * @memberOf MoreInfo
+   */
+  link: string;
+
+  /**
+   * Renders the tool tip component, if present
+   * @type {string}
+   * @memberOf MoreInfo
+   */
+  tooltip: string;
+
+  constructor() {
+    super(...arguments);
+
+    this.target || (this.target = '_blank');
+    this.link || (this.link = '#');
+  }
+
+  /**
+   * Disables DOM event propagation
+   * @return {boolean}
+   */
+  click = () => false;
+}

wherehows-web/app/templates/components/datasets/schemaless-tagging.hbs

@@ -29,16 +29,10 @@
   <h4 class="schemaless-tagging__prompt">
     Dataset security classification
 
-    <a
+    {{more-info
-      target="_blank"
+      link="http://go/dht"
-      href="http://go/dht">
+      tooltip="information dataset security classification"
-      <sup>
+    }}
-        More Info
-
-        <span class="glyphicon glyphicon-question-sign"
-              title="More information dataset security classification"></span>
-      </sup>
-    </a>
   </h4>
 
   <div class="schemaless-tagging__input">

wherehows-web/app/templates/components/more-info.hbs

@@ -0,0 +1,14 @@
+<a {{action "click" preventDefault=false}} target={{target}} href={{link}}>
+  <sup>
+    {{#if tooltip}}
+      {{tooltip-on-element
+        text=tooltip
+      }}
+    {{/if}}
+
+    More Info
+
+    <span class="glyphicon glyphicon-question-sign"
+          title="Click for {{tooltip}}"></span>
+  </sup>
+</a>

wherehows-web/app/templates/components/purge-policy.hbs

@@ -3,16 +3,10 @@
     <p>
       Compliance Purge Policy
 
-      <a
+      {{more-info
-        target="_blank"
+        link="http://go/gdpr/deletions/purgePolicies"
-        href="http://go/gdpr/deletions/purgePolicies">
+        tooltip="more information Purge Policies"
-        <sup>
+      }}
-          More Info
-
-          <span class="glyphicon glyphicon-question-sign"
-                title="More information Purge Policies"></span>
-        </sup>
-      </a>
     </p>
   </header>
 </section>

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

@@ -5,18 +5,11 @@
            "Does this dataset contain the following types of data?"
            "Types of data contained in this dataset"}}
 
-      <!--TODO: DSS-6716-->
-      <!-- DRY out with wrapper component that takes the link as an attribute-->
-      <a
-        target="_blank"
-        href="http://go/gdpr-taxonomy#MetadataTaxonomyforDataSets-DatasetLevelTags">
-        <sup>
-          More Info
 
-          <span class="glyphicon glyphicon-question-sign"
+      {{more-info
-                title="More information on Dataset classification with examples"></span>
+        link="http://go/gdpr-taxonomy#MetadataTaxonomyforDataSets-DatasetLevelTags"
-        </sup>
+        tooltip="more information on Dataset classification with examples"
-      </a>
+      }}
     </p>
 
     {{#if isEditing}}

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

@@ -4,16 +4,12 @@
       {{if isEditing
            "Does any field in the schema contain an IDs (e.g. Member ID, Enterprise Profile ID etc) or other PII information?"
            "IDs and PII in the schema"}}
-      <a
-        target="_blank"
-        href="http://go/gdpr-pii">
-        <sup>
-          More Info
 
-          <span class="glyphicon glyphicon-question-sign"
+      {{more-info
-                title="More information on Schema field format and types"></span>
+        link="http://go/gdpr-pii"
-        </sup>
+        tooltip="more information on Schema field format and types"
-      </a>
+      }}
+
     </p>
   </header>
 </section>
@@ -45,7 +41,16 @@
 
     {{#table.head as |head|}}
       {{#head.column class="dataset-compliance-fields__notification-column"}}{{/head.column}}
-      {{#head.column columnName="identifierField"}}Field{{/head.column}}
+      {{#head.column columnName="identifierField"}}
+
+        Field
+
+        {{more-info
+          link="http://go/tms-schema"
+          tooltip="more information on Schema"
+        }}
+
+      {{/head.column}}
       {{#head.column columnName="dataType"}}Data Type{{/head.column}}
       {{#head.column class="nacho-table-cell-wrapped" columnName="confidence"}}
         System Suggestion Confidence
@@ -151,16 +156,11 @@
             <section class="compliance-depends compliance-depends--visible">
               <div class="dataset-compliance-fields__form-input">
                 Field Type
-                <a
-                  target="_blank"
-                  href="http://go/metadata_acquisition#ProjectOverview-compliance">
-                  <sup>
-                    More Info
 
-                    <span class="glyphicon glyphicon-question-sign"
+                {{more-info
-                          title="More information on various IDs"></span>
+                  link="http://go/metadata_acquisition#ProjectOverview-compliance"
-                  </sup>
+                  tooltip="more information on various IDs"
-                </a>
+                }}
               </div>
 
               {{ember-selector
@@ -178,16 +178,11 @@
             <section class="compliance-depends {{if row.isIdType 'compliance-depends--visible'}}">
               <div class="dataset-compliance-fields__form-input">
                 Field Format
-                <a
-                  target="_blank"
-                  href="http://go/metadata_acquisition#ProjectOverview-compliance">
-                  <sup>
-                    More Info
 
-                    <span class="glyphicon glyphicon-question-sign"
+                {{more-info
-                          title="More information on Field Format"></span>
+                  link="http://go/metadata_acquisition#ProjectOverview-compliance"
-                  </sup>
+                  tooltip="more information on Field Format"
-                </a>
+                }}
               </div>
 
               {{ember-selector

wherehows-web/tests/integration/components/more-info-test.js

@@ -0,0 +1,48 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { click } from 'ember-native-dom-helpers';
+
+const elementQuery = '.more-info';
+
+moduleForComponent('more-info', 'Integration | Component | more info', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{more-info}}`);
+  const element = document.querySelector(elementQuery);
+
+  assert.ok(element, 'component is rendered in the DOM');
+  assert.equal(
+    element.querySelector('a').getAttribute('target'),
+    '_blank',
+    'sets the default target attribute when none is provided'
+  );
+  assert.equal(
+    element.querySelector('a').getAttribute('href'),
+    '#',
+    'it sets a default href attribute when none is provided'
+  );
+});
+
+test('MoreInfo', function(assert) {
+  const externalUrl = 'https://www.linkedin.com';
+  const target = '_self';
+
+  this.set('href', externalUrl);
+  this.set('target', target);
+
+  this.render(hbs`{{more-info target=target link=href}}`);
+  const element = document.querySelector(elementQuery);
+
+  assert.equal(
+    element.querySelector('a').getAttribute('target'),
+    target,
+    'it sets the passed in target attribute when on is provided'
+  );
+  assert.equal(
+    element.querySelector('a').getAttribute('href'),
+    externalUrl,
+    'it sets the passed href attribute when a value is provided'
+  );
+});