fix(ui) - funnel issues and other updates

frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx

@@ -27,7 +27,7 @@ function FunnelIssueDetails(props: Props) {
                     filters: item.filter.filters.filter((filter: any, index: any) => {
                         const stage = widget.data.funnel.stages[index];
                         return stage &&stage.isActive
-                    })
+                    }).map((f: any) => f.toJson())
                 }
             }
         }) : [], };

frontend/app/components/Dashboard/components/Funnels/FunnelIssueModal/FunnelIssueModal.tsx

@@ -7,13 +7,11 @@ interface Props {
 function FunnelIssueModal(props: Props) {
     const { issueId } = props;
     return (
-        <div style={{ width: '85vw', maxWidth: '1200px' }}>
-            <div
-                className="border-r shadow p-4 h-screen"
-                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}
-            >
-                <FunnelIssueDetails issueId={issueId} />
-            </div>
+        <div
+            className="border-r shadow p-4 h-screen"
+            style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}
+        >
+            <FunnelIssueDetails issueId={issueId} />
         </div>
     );
 }

frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx

@@ -29,7 +29,7 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
     useEffect(() => {
         if (!issueId) return;
 
-        showModal(<FunnelIssueModal issueId={issueId} />, { right: true, onClose: () => {
+        showModal(<FunnelIssueModal issueId={issueId} />, { right: true, width: 1000, onClose: () => {
             if (props.history.location.pathname.includes("/metric")) {
                 props.history.replace({search: ""});
             }

frontend/app/components/shared/Filters/FilterList/FilterList.tsx

@@ -18,6 +18,7 @@ interface Props {
 function FilterList(props: Props) {
   const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads, supportsEmpty = true, excludeFilterKeys = [] } = props;
   const filters = List(filter.filters);
+  const eventsOrderSupport = filter.eventsOrderSupport;
   const hasEvents = filters.filter((i: any) => i.isEvent).size > 0;
   const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0;
   let rowIndex = 0;
@@ -55,9 +56,9 @@ function FilterList(props: Props) {
                   onSelect={props.onChangeEventsOrder}
                   value={{ value: filter.eventsOrder }}
                   list={[
-                    { name: 'THEN', value: 'then' },
-                    { name: 'AND', value: 'and' },
-                    { name: 'OR', value: 'or' },
+                    { name: 'THEN', value: 'then', disabled: !eventsOrderSupport.includes('then') },
+                    { name: 'AND', value: 'and', disabled: !eventsOrderSupport.includes('and')},
+                    { name: 'OR', value: 'or', disabled: !eventsOrderSupport.includes('or')},
                   ]}
                 />
               </div>

frontend/app/mstore/metricStore.ts

@@ -103,6 +103,9 @@ export default class MetricStore {
 
     // handle metricType change
     if (obj.hasOwnProperty('metricType') && type !== this.instance.metricType) {
+      this.instance.series.forEach((s: any, i: number) => {
+        this.instance.series[i].filter.eventsOrderSupport = ['then', 'or', 'and']
+      })
       this.changeType(type);
     }
 
@@ -141,6 +144,8 @@ export default class MetricStore {
 
     if (value === FUNNEL) {
       obj['metricOf'] = 'sessionCount';
+      obj.series[0].filter.eventsOrder = 'then'
+      obj.series[0].filter.eventsOrderSupport = ['then']
     }
 
     if (value === INSIGHTS) {

frontend/app/mstore/types/filter.ts

@@ -7,6 +7,7 @@ export default class Filter {
     name: string = ''
     filters: FilterItem[] = []
     eventsOrder: string = 'then'
+    eventsOrderSupport: string[] = ['then', 'or', 'and']
     startTimestamp: number = 0
     endTimestamp: number = 0
 

frontend/app/mstore/types/widget.ts

@@ -139,6 +139,11 @@ export default class Widget {
       this.thumbnail = json.thumbnail;
       this.isPublic = json.isPublic;
 
+      if (this.metricType === FUNNEL) {
+        this.series[0].filter.eventsOrder = 'then';
+        this.series[0].filter.eventsOrderSupport = ['then'];
+      }
+
       if (period) {
         this.period = period;
       }