feat(ui) - filters and metrics fixes

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

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { Loader, NoContent, Icon } from 'UI';
-import { widgetHOC, Styles } from '../../common';
-import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import { LineChart, Line, Legend } from 'recharts';
+import { Styles } from '../../common';
+import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line, Legend } from 'recharts';
 import Period, { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
 import stl from './CustomMetricWidgetPreview.css';
 import { getChartFormatter } from 'Types/dashboard/helper'; 
@@ -45,7 +44,17 @@ function CustomMetricWidget(props: Props) {
   const gradientDef = Styles.gradientDef();
   const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
 
+  const prevMetricRef = useRef<any>();
+
   useEffect(() => {
+    // Check for title change
+    if (prevMetricRef.current && prevMetricRef.current.name !== metric.name) {
+      prevMetricRef.current = metric;
+      return
+    };
+    prevMetricRef.current = metric;
+    
+    // fetch new data for the widget preview
     new APIClient()['post']('/custom_metrics/try', { ...metricParams, ...metric.toSaveData() })
       .then(response => response.json())
       .then(({ errors, data }) => {
@@ -102,13 +111,6 @@ function CustomMetricWidget(props: Props) {
                   margin={Styles.chartMargins}
                   syncId={ showSync ? "domainsErrors_4xx" : undefined }
                 >
-                  {/* <defs>
-                    <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor={colors[1]} stopOpacity={ 1} />
-                      <stop offset="95%" stopColor={colors[2]} stopOpacity={ 1 } />
-                      <stop offset="95%" stopColor={colors[3]} stopOpacity={ 1 } />
-                    </linearGradient>
-                  </defs> */}
                   <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
                   <XAxis
                     {...Styles.xaxis}

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

@@ -33,7 +33,7 @@ function CustomMetricForm(props: Props) {
   const write = ({ target: { value, name } }) => props.editMetric({ ...metric, [ name ]: value }, false);
 
   const changeConditionTab = (e, { name, value }) => {
-    props.editMetric({[ 'type' ]: value });
+    props.editMetric({[ 'viewType' ]: value });
   };
 
   const save = () => {
@@ -84,14 +84,14 @@ function CustomMetricForm(props: Props) {
             <div>
               <SegmentSelection
                 primary
-                name="condition"
+                name="viewType"
                 small={true}
                 // className="my-3"
                 onSelect={ changeConditionTab }
-                value={{ value: metric.type }}
+                value={{ value: metric.viewType }}
                 list={ [
-                  { name: 'Session Count', value: 'session_count' },
-                  { name: 'Session Percentage', value: 'session_percentage' },
+                  { name: 'Session Count', value: 'lineChart' },
+                  { name: 'Session Percentage', value: 'progress', disabled: true },
                 ]}
               />
             </div>

frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx

@@ -4,6 +4,7 @@ import { editSavedSearch as edit, save, remove } from 'Duck/search';
 import { Button, Modal, Form, Icon, Checkbox } from 'UI';
 import { confirm } from 'UI/Confirmation';
 import stl from './SaveSearchModal.css';
+import cn from 'classnames';
 
 interface Props {
   filter: any;
@@ -14,6 +15,7 @@ interface Props {
   closeHandler: () => void;
   savedSearch: any;
   remove: (filterId: number) => Promise<void>;
+  userId: number;
 }
 function SaveSearchModal(props: Props) {
   const { savedSearch, filter, loading, show, closeHandler } = props;
@@ -77,7 +79,7 @@ function SaveSearchModal(props: Props) {
           </Form.Field>
 
           <Form.Field>              
-            <div className="flex items-center">
+            <div className={cn("flex items-center", { 'disabled': savedSearch.exists() && savedSearch.userId !== props.userId })}>
               <Checkbox
                 name="isPublic"
                 className="font-medium mr-3"
@@ -85,11 +87,14 @@ function SaveSearchModal(props: Props) {
                 checked={ savedSearch.isPublic }
                 onClick={ onChangeOption }
               />
-              <div className="flex items-center cursor-pointer" onClick={ () => props.edit({ 'isPublic' : !savedSearch.isPublic }) }>
+              <div
+                className="flex items-center cursor-pointer"
+                onClick={ () => props.edit({ 'isPublic' : !savedSearch.isPublic }) }
+              >
                 <Icon name="user-friends" size="16" />
                 <span className="ml-2"> Team Visible</span>
               </div>
-            </div>              
+            </div>
           </Form.Field>
         </Form>
         { savedSearch.exists() && <div className="mt-4">Changes in filters will be updated.</div> }
@@ -115,6 +120,7 @@ function SaveSearchModal(props: Props) {
 }
 
 export default connect(state => ({
+  userId: state.getIn([ 'user', 'account', 'id' ]),
   savedSearch: state.getIn([ 'search', 'savedSearch' ]),
   filter: state.getIn(['search', 'instance']),
   loading: state.getIn([ 'search', 'saveRequest', 'loading' ]) || 

frontend/app/components/ui/SegmentSelection/SegmentSelection.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Popup } from 'UI';
 import cn from 'classnames';
 import styles from './segmentSelection.css';
 
@@ -19,15 +19,24 @@ class SegmentSelection extends React.Component {
         }, className) }
       >
         { list.map(item => (
-          <div
-            key={ item.name }
-            className={ styles.item }
-            data-active={ this.props.value && this.props.value.value === item.value }
-            onClick={ () => this.setActiveItem(item) }
-          >
-            { item.icon && <Icon name={ item.icon } size="20" marginRight="10" /> }
-            <div>{ item.name }</div>
-          </div>
+          <Popup
+            trigger={
+              <div
+                key={ item.name }
+                className={ cn(styles.item, { 'opacity-25 cursor-default' : item.disabled }) }
+                data-active={ this.props.value && this.props.value.value === item.value }
+                onClick={ () => !item.disabled && this.setActiveItem(item) }
+              >
+                { item.icon && <Icon name={ item.icon } size="20" marginRight="10" /> }
+                <div>{ item.name }</div>
+              </div>
+            }
+            disabled={!item.disabled}
+            content={ `Coming soon` }
+            size="tiny"
+            inverted
+            position="top center"
+          />
         ))
         }
       </div>

frontend/app/types/account/account.js

@@ -10,6 +10,7 @@ export default Member.extend({
   banner: undefined,
   email: '',
   verifiedEmail: undefined,
+  id: undefined,
   smtp: false,
   license: '',
   expirationDate: undefined,

frontend/app/types/customMetric.js

@@ -27,7 +27,7 @@ export const FilterSeries = Record({
 export default Record({
   metricId: undefined,
   name: 'Series',
-  type: 'session_count',
+  viewType: 'lineChart',
   series: List(),
   isPublic: false,
   startDate: '',

frontend/app/types/filter/savedFilter.js

@@ -12,7 +12,7 @@ export default Record({
   createdAt: undefined,
   count: 0,
   watchdogs: List(),
-  isPublic: true,
+  isPublic: false,
 }, {
   idKey: 'searchId',
   methods: {