RuleLabel component added

src/css/style.css

@@ -77,7 +77,7 @@ h1 {
   display: flex;
 }
 
-.field-line label,
+.field-line div label,
 .field-line input,
 .field-line select {
   display: block;
@@ -134,15 +134,15 @@ h1 {
   border-bottom-left-radius: 5px;
 }
 
-.field-line > label:first-of-type {
+.field-line > div label:first-of-type {
   background: #f6f7f9;
   color: #777;
   padding: 5px;
   border: none;
   border-bottom: 1px solid #e8e8e8;
 }
 
-.field-line.valid > label:first-of-type {
+.field-line.valid > div label:first-of-type {
   color: #3b5998;
 }
 
@@ -293,7 +293,7 @@ h1 {
   color: #9aaf28 !important;
 }
 
-.field-line.active .match label.sub-label {
+.field-line.active .match div label.sub-label {
   color: #9aaf28 !important;
 }
 
@@ -302,7 +302,7 @@ h1 {
   color: #e76e63 !important;
 }
 
-.field-line.active .mismatch label.sub-label {
+.field-line.active .mismatch div label.sub-label {
   color: #e76e63 !important;
 }
 .field-line .attributes {
@@ -336,7 +336,7 @@ h1 {
   background: #9aaf28;
 }
 
-.field-line label.sub-label {
+.field-line div label.sub-label {
   font-size: 0.8em;
   margin: 0px 0px;
   margin-bottom: -8px;
@@ -349,40 +349,46 @@ h1 {
   color: #777;
 }
 
-.field-line.active:not(.finding).single-element-found label.sub-label {
+.field-line.active:not(.finding).single-element-found div label.sub-label {
   color: #9aaf28;
 }
 
-.field-line.active:not(.finding).multiple-elements-found label.sub-label {
+.field-line.active:not(.finding).multiple-elements-found div label.sub-label {
   color: #e76e63;
 }
 
 .field-line.active:not(.finding).multiple.multiple-elements-found
+  div
   label.sub-label {
   color: #9aaf28;
 }
 
-.field-line.active label.sub-label {
+.field-line.active div label.sub-label {
   color: #4a90e2;
 }
 
-.field-line.active:not(.finding).single-element-found > label:first-of-type {
+.field-line.active:not(.finding).single-element-found
+  > div
+  label:first-of-type {
   background: #9aaf28;
   color: #fff;
 }
 
-.field-line.active:not(.finding).multiple-elements-found > label:first-of-type {
+.field-line.active:not(.finding).multiple-elements-found
+  > div
+  label:first-of-type {
   background: #e76e63;
   color: #fff;
 }
 
 .field-line.active:not(.finding).multiple.multiple-elements-found
-  > label:first-of-type {
+  > div
+  label:first-of-type {
   background: #9aaf28;
   color: #fff;
 }
 
-.field-line.active > label:first-of-type {
+.field-line.active > div label:first-of-type {
   background: #4a90e2;
   color: #fff;
 }
@@ -608,7 +614,7 @@ button {
   width: 325px;
 }
 
-.rule-list label {
+.rule-list div label {
   display: block;
 }
 

src/js/components/PropertyPicker.react.js

@@ -12,6 +12,7 @@ const React = require('react');
 const classNames = require('classnames');
 const DateTimeFormatPicker = require('./DateTimeFormatPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react.js');
+const RuleLabel = require('./RuleLabel.react.js');
 import type { RuleProperty } from '../models/RuleProperty';
 import RulePropertyTypes from '../models/RulePropertyTypes';
 import RuleActions from '../data/RuleActions';
@@ -122,16 +123,11 @@ class PropertyPicker extends React.Component<Props> {
           [propertyClass]: true,
         })}
       >
-        <label>
-          {RulePropertyUtils.isValid(this.props.property) ? (
-            <span>✔</span>
-          ) : this.props.property.definition.required ? (
-            <span>✘</span>
-          ) : (
-            <span>•</span>
-          )}{' '}
-          {this.props.property.definition.displayName}
-        </label>
+        <RuleLabel
+          filled={!RulePropertyUtils.isValid(this.props.property)}
+          required={!this.props.property.definition.required}
+          title={this.props.property.definition.displayName}
+        />
         <label className="sub-label selector-label">Selector</label>
         <SelectorPicker {...this.props} field={this.props.property} />
         {attributePicker}

src/js/components/RuleLabel.react.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+
+import type { Props as BaseProps } from '../containers/AppContainer.react';
+
+type Props = BaseProps & { className: string, htmlFor: string };
+
+class RuleLabel extends React.Component<Props> {
+  render() {
+    return (
+      <div>
+        <label
+          className={this.props.className ? this.props.className : ''}
+          htmlFor={this.props.htmlFor ? this.props.htmlFor : ''}
+        >
+          <span>
+            {this.props.required ? '•' : this.props.filled ? '✘' : '✔'}
+          </span>{' '}
+          {this.props.title}
+        </label>
+      </div>
+    );
+  }
+}
+
+module.exports = RuleLabel;

src/js/components/RulePicker.react.js

@@ -11,6 +11,7 @@
 const React = require('react');
 const PropertyPicker = require('./PropertyPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react');
+const RuleLabel = require('./RuleLabel.react.js');
 const classNames = require('classnames');
 const RuleActions = require('../data/RuleActions');
 
@@ -21,7 +22,7 @@ import { RuleUtils } from '../utils/RuleUtils';
 type Props = BaseProps & { rule: Rule };
 
 type State = {
-  collapsed: boolean
+  collapsed: boolean,
 };
 
 class RulePicker extends React.Component<Props, State> {
@@ -87,10 +88,11 @@ class RulePicker extends React.Component<Props, State> {
               valid: this.props.rule.selector != '',
             })}
           >
-            <label>
-              {this.props.rule.selector != '' ? <span>✔</span> : <span>✘</span>}{' '}
-              Selector
-            </label>
+            <RuleLabel
+              filled={this.props.rule.selector == ''}
+              required={false}
+              title="Selector"
+            />
             <SelectorPicker {...this.props} field={this.props.rule} />
           </div>
           {this.props.rule.properties

src/js/components/TransformationSettings.react.js

@@ -9,6 +9,7 @@
  */
 
 const React = require('react');
+const RuleLabel = require('./RuleLabel.react.js');
 
 import { Accordion, Icon } from 'semantic-ui-react';
 import AdsTypes from '../data/AdsTypes';
@@ -19,11 +20,11 @@ import type { Props as BaseProps } from '../containers/AppContainer.react';
 type Props = BaseProps & {
   accordionActive: boolean,
   accordionIndex: number,
-  onAccordionTitleClick: (e: Event, itemProps: AccordionItemProps) => void
+  onAccordionTitleClick: (e: Event, itemProps: AccordionItemProps) => void,
 };
 
 type AccordionItemProps = {
-  index: number
+  index: number,
 };
 
 class TransformationSettings extends React.Component<Props> {
@@ -57,13 +58,13 @@ class TransformationSettings extends React.Component<Props> {
     return this.props.settings.adsSettings.type ===
       AdsTypes.AUDIENCE_NETWORK ? (
         <div>
-          <label className="sub-label" htmlFor="audienceNetworkId">
-            <span>
-              {this.props.settings.adsSettings.audienceNetworkPlacementId
-                ? '✔'
-                : '•'}
-            </span>&nbsp; Audience Network ID
-          </label>
+          <RuleLabel
+            filled={this.props.settings.adsSettings.audienceNetworkPlacementId}
+            required={false}
+            title="Audience Network ID"
+            className="sub-label"
+            htmlFor="audienceNetworkId"
+          />
           <div className="field">
             <input
               type="text"
@@ -80,10 +81,13 @@ class TransformationSettings extends React.Component<Props> {
   renderAdsRawHtmlDiv() {
     return this.props.settings.adsSettings.type === AdsTypes.RAW_HTML ? (
       <div>
-        <label className="sub-label" htmlFor="adsRawHtml">
-          <span>{this.props.settings.adsSettings.rawHtml ? '✔' : '•'}</span>&nbsp;
-          Raw HTML
-        </label>
+        <RuleLabel
+          filled={this.props.settings.adsSettings.rawHtml}
+          required={false}
+          title="Raw HTML"
+          className="sub-label"
+          htmlFor="adsRawHtml"
+        />
         <div className="field">
           <textarea
             name="adsRawHtml"
@@ -119,10 +123,13 @@ class TransformationSettings extends React.Component<Props> {
                 <label>
                   <Icon name="edit" />General
                 </label>
-                <label className="sub-label" htmlFor="styleName">
-                  <span>{this.props.settings.styleName ? '✔' : '•'}</span>&nbsp;
-                  Style Name
-                </label>
+                <RuleLabel
+                  filled={this.props.settings.styleName}
+                  required={false}
+                  title="Style Name"
+                  className="sub-label"
+                  htmlFor="styleName"
+                />
                 <div className="field">
                   <input
                     type="text"
@@ -137,13 +144,13 @@ class TransformationSettings extends React.Component<Props> {
                 <label>
                   <Icon name="bar chart" />Analytics
                 </label>
-                <label className="sub-label" htmlFor="pixelId">
-                  <span>
-                    {this.props.settings.analyticsSettings.fbPixelId
-                      ? '✔'
-                      : '•'}
-                  </span>&nbsp; Pixel ID
-                </label>
+                <RuleLabel
+                  filled={this.props.settings.analyticsSettings.fbPixelId}
+                  required={false}
+                  title="Pixel ID"
+                  className="sub-label"
+                  htmlFor="pixelId"
+                />
                 <div className="field">
                   <input
                     type="text"
@@ -153,11 +160,13 @@ class TransformationSettings extends React.Component<Props> {
                     value={this.props.settings.analyticsSettings.fbPixelId}
                   />
                 </div>
-                <label className="sub-label" htmlFor="analyticsRawHtml">
-                  <span>
-                    {this.props.settings.analyticsSettings.rawHtml ? '✔' : '•'}
-                  </span>&nbsp; Raw HTML
-                </label>
+                <RuleLabel
+                  filled={this.props.settings.analyticsSettings.rawHtml}
+                  required={false}
+                  title="Raw HTML"
+                  className="sub-label"
+                  htmlFor="analyticsRawHtml"
+                />
                 <div className="field">
                   <textarea
                     name="analyticsRawHtml"