From 6d4d6b433c761f19afbd87785aa77f692031479a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 7 Feb 2022 16:46:19 +0100
Subject: [PATCH] feat(ui) - alert dropdown populate and clear search on
 project change

---
 frontend/app/components/Alerts/AlertForm.js           |  2 --
 .../components/BugFinder/Attributes/AttributeItem.js  |  2 +-
 .../components/BugFinder/AutoComplete/AutoComplete.js |  2 +-
 .../components/BugFinder/EventFilter/EventEditor.js   |  2 +-
 .../components/BugFinder/ManageFilters/SaveModal.js   |  2 +-
 .../CustomMetricsWidgets/CustomMetricsWidgets.tsx     |  4 +---
 .../Funnels/FunnelSaveModal/FunnelSaveModal.js        |  2 +-
 frontend/app/components/Header/SiteDropdown.js        | 11 +++++++++--
 .../CustomMetricForm/CustomMetricForm.tsx             |  4 ++--
 .../shared/EventFilter/Attributes/AttributeItem.js    |  2 +-
 .../app/components/shared/EventFilter/EventEditor.js  |  2 +-
 .../shared/TrackingCodeModal/TrackingCodeModal.js     |  2 +-
 .../app/components/ui/EscapeButton/EscapeButton.js    |  2 +-
 frontend/app/types/customMetric.js                    |  1 +
 14 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/Alerts/AlertForm.js b/frontend/app/components/Alerts/AlertForm.js
index f3286542b..4003b4864 100644
--- a/frontend/app/components/Alerts/AlertForm.js
+++ b/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')}>
diff --git a/frontend/app/components/BugFinder/Attributes/AttributeItem.js b/frontend/app/components/BugFinder/Attributes/AttributeItem.js
index ad27649dd..74d4fa6bd 100644
--- a/frontend/app/components/BugFinder/Attributes/AttributeItem.js
+++ b/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>
diff --git a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
index f902235ed..6b90786b7 100644
--- a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
+++ b/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>
 
diff --git a/frontend/app/components/BugFinder/EventFilter/EventEditor.js b/frontend/app/components/BugFinder/EventFilter/EventEditor.js
index d687adb86..def086416 100644
--- a/frontend/app/components/BugFinder/EventFilter/EventEditor.js
+++ b/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>
diff --git a/frontend/app/components/BugFinder/ManageFilters/SaveModal.js b/frontend/app/components/BugFinder/ManageFilters/SaveModal.js
index e43cd69e9..b10b7aa3d 100644
--- a/frontend/app/components/BugFinder/ManageFilters/SaveModal.js
+++ b/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) }
           />
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
index 26c019eaf..fb927bc0a 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
+++ b/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 }})
           }}
         />
       ))}
diff --git a/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js b/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js
index 36e2bc35b..067be7c52 100644
--- a/frontend/app/components/Funnels/FunnelSaveModal/FunnelSaveModal.js
+++ b/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 }
           />
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index 170b99b6a..37057866b 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/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"
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
index b7a552593..2a029ad3f 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
+++ b/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>
diff --git a/frontend/app/components/shared/EventFilter/Attributes/AttributeItem.js b/frontend/app/components/shared/EventFilter/Attributes/AttributeItem.js
index 51e16da7e..0b7b39b78 100644
--- a/frontend/app/components/shared/EventFilter/Attributes/AttributeItem.js
+++ b/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>
diff --git a/frontend/app/components/shared/EventFilter/EventEditor.js b/frontend/app/components/shared/EventFilter/EventEditor.js
index 94ffb8692..f2d5dee8f 100644
--- a/frontend/app/components/shared/EventFilter/EventEditor.js
+++ b/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>
diff --git a/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js b/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
index 26e2d709c..1a8eb17bf 100644
--- a/frontend/app/components/shared/TrackingCodeModal/TrackingCodeModal.js
+++ b/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 }>
diff --git a/frontend/app/components/ui/EscapeButton/EscapeButton.js b/frontend/app/components/ui/EscapeButton/EscapeButton.js
index 69e68e8ee..5c06efc3d 100644
--- a/frontend/app/components/ui/EscapeButton/EscapeButton.js
+++ b/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>
   )
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index 32e5f644f..f80c045fd 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -30,6 +30,7 @@ export default Record({
   isPublic: false,
   startDate: '',
   endDate: '',
+  active: true,
 }, {
   idKey: 'metricId',
   methods: {