feat(ui) - alert dropdown populate and clear search on project change

frontend/app/components/Alerts/AlertForm.js

@@ -70,8 +70,6 @@ const AlertForm = props => {
   const unit = metric ? metric.unit : '';
   const isThreshold = instance.detectionMethod === 'threshold';
 
-  console.log('AlertForm', instance.query);
-
   return (
     <Form className={ cn("p-6", stl.wrapper)} style={{ width: '580px' }} onSubmit={() => props.onSubmit(instance)} id="alert-form">
        <div className={cn(stl.content, '-mx-6 px-6 pb-12')}>

frontend/app/components/BugFinder/Attributes/AttributeItem.js

@@ -82,7 +82,7 @@ class AttributeItem extends React.PureComponent {
         
         <div className={ stl.actions }>
           <button className={ stl.button } onClick={ this.removeFilter }>
-            <Icon name="close" size="16" />
+            <Icon name="close" size="14" />
           </button>
         </div>
       </div>

frontend/app/components/BugFinder/AutoComplete/AutoComplete.js

@@ -152,7 +152,7 @@ class AutoComplete extends React.PureComponent {
             } }
           />
           <div className={stl.right} onClick={showCloseButton ? onRemoveValue : onAddValue}>
-            { showCloseButton ? <Icon name="close" size="18" /> : <span className="px-1">or</span>}
+            { showCloseButton ? <Icon name="close" size="14" /> : <span className="px-1">or</span>}
           </div>
         </div>
 

frontend/app/components/BugFinder/EventFilter/EventEditor.js

@@ -100,7 +100,7 @@ export default class EventEditor extends React.PureComponent {
         <div className={ stl.actions }>
           { dndBtn }
           <button className={ stl.button } onClick={ this.remove }>
-            <Icon name="close" size="16" />
+            <Icon name="close" size="14" />
           </button>
         </div>
       </div>

frontend/app/components/BugFinder/ManageFilters/SaveModal.js

@@ -46,7 +46,7 @@ export default class SaveModal extends React.PureComponent {
             role="button"
             tabIndex="-1"
             color="gray-dark"
-            size="18"
+            size="14"
             name="close"
             onClick={ () => toggleFilterModal(false) }
           />

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx

@@ -19,8 +19,6 @@ function CustomMetricsWidgets(props: Props) {
     props.fetchList()
   }, [])
 
-  console.log('activeMetricId', activeMetricId)
-
   return (
     <>
       {list.map((item: any) => (
@@ -29,7 +27,7 @@ function CustomMetricsWidgets(props: Props) {
           onClickEdit={props.onClickEdit}
           onAlertClick={(e) => {
             setActiveMetricId(item.metricId)
-            props.initAlert({ left: item.series.first().seriesId })
+            props.initAlert({ query: { left: item.series.first().seriesId }})
           }}
         />
       ))}

frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js

@@ -52,7 +52,7 @@ export default class FunnelSaveModal extends React.PureComponent {
             role="button"
             tabIndex="-1"
             color="gray-dark"
-            size="18"
+            size="14"
             name="close"
             onClick={ closeHandler }
           />

frontend/app/components/Header/SiteDropdown.js

@@ -9,6 +9,7 @@ import { init } from 'Duck/site';
 import styles from './siteDropdown.css';
 import cn from 'classnames';
 import NewSiteForm from '../Client/Sites/NewSiteForm';
+import { clearSearch } from 'Duck/search';
 
 @withRouter
 @connect(state => ({  
@@ -18,7 +19,8 @@ import NewSiteForm from '../Client/Sites/NewSiteForm';
 }), {
   setSiteId,
   pushNewSite,
-  init
+  init,
+  clearSearch,
 })
 export default class SiteDropdown extends React.PureComponent {
   state = { showProductModal: false }
@@ -32,6 +34,11 @@ export default class SiteDropdown extends React.PureComponent {
     this.setState({showProductModal: true})
   }
 
+  switchSite = (siteId) => {
+    this.props.setSiteId(siteId);
+    this.props.clearSearch();
+  }
+
   render() {
     const { sites, siteId, account, location: { pathname } } = this.props;
     const { showProductModal } = this.state;
@@ -54,7 +61,7 @@ export default class SiteDropdown extends React.PureComponent {
             { !showCurrent && <li>{ 'Does not require domain selection.' }</li>}
             {
               sites.map(site => (
-                <li key={ site.id } onClick={ () => this.props.setSiteId(site.id) }>
+                <li key={ site.id } onClick={() => this.switchSite(site.id)}>
                   <Icon 
                     name="circle"
                     size="8"

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -109,7 +109,7 @@ function CustomMetricForm(props: Props) {
                 onSelect={ changeConditionTab }
                 value={{ value: metric.type }}
                 list={ [
-                  { name: 'Series 1', value: 'session_count' },
+                  { name: 'Session Count', value: 'session_count' },
                   { name: 'Session Percentage', value: 'session_percentage' },
                 ]}
               />
@@ -149,7 +149,7 @@ function CustomMetricForm(props: Props) {
           <Button type="button" className="ml-3" outline hover plain onClick={props.onClose}>Cancel</Button>
         </div>
         <div>
-          <Button type="button" className="ml-3" outline hover plain onClick={deleteHandler}>Delete</Button>
+          { metric.exists() && <Button type="button" className="ml-3" outline hover plain onClick={deleteHandler}>Delete</Button> }
         </div>
       </div>
     </Form>

frontend/app/components/shared/EventFilter/Attributes/AttributeItem.js

@@ -81,7 +81,7 @@ class AttributeItem extends React.PureComponent {
         
         <div className={ stl.actions }>
           <button className={ stl.button } onClick={ this.removeFilter }>
-            <Icon name="close" size="16" />
+            <Icon name="close" size="14" />
           </button>
         </div>
       </div>

frontend/app/components/shared/EventFilter/EventEditor.js

@@ -97,7 +97,7 @@ export default class EventEditor extends React.PureComponent {
         <div className={ stl.actions }>
           { dndBtn }
           <button className={ stl.button } onClick={ this.remove }>
-            <Icon name="close" size="16" />
+            <Icon name="close" size="14" />
           </button>
         </div>
       </div>

frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js

@@ -41,7 +41,7 @@ class TrackingCodeModal extends React.PureComponent {
         <Modal.Header className={ styles.modalHeader }>
           <div>{ title } { subTitle && <span className="text-sm color-gray-dark">{subTitle}</span>}</div>
           <div className={ cn(styles.closeButton, { 'hidden' : !onClose }) } role="button" tabIndex="-1" onClick={ onClose }>
-            <Icon name="close" size="16" />
+            <Icon name="close" size="14" />
           </div>
         </Modal.Header>
         <Modal.Content className={ styles.content }>

frontend/app/components/ui/EscapeButton/EscapeButton.js

@@ -5,7 +5,7 @@ import stl from './escapeButton.css'
 function EscapeButton({ onClose = null}) {
   return (
     <div className={ stl.closeWrapper } onClick={ onClose }>
-      <Icon name="close" size="20" />
+      <Icon name="close" size="16" />
       <div>{ 'ESC' }</div>
     </div>
   )

frontend/app/types/customMetric.js

@@ -30,6 +30,7 @@ export default Record({
   isPublic: false,
   startDate: '',
   endDate: '',
+  active: true,
 }, {
   idKey: 'metricId',
   methods: {