ui: fix defualt import, fix sessheader crash, fix condition set ui

frontend/app/components/shared/ConditionSet/ConditionSet.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Icon, Input, Button } from 'UI';
+import { Icon, Input } from 'UI';
 import cn from 'classnames';
-import FilterList from 'Shared/Filters/FilterList';
+import { FilterList } from 'Shared/Filters/FilterList';
 import { observer } from 'mobx-react-lite';
-import FilterSelection from 'Shared/Filters/FilterSelection';
 import { Typography } from 'antd';
 import { BranchesOutlined } from '@ant-design/icons';
 
@@ -84,29 +83,16 @@ function ConditionSetComponent({
             onRemoveFilter={onRemoveFilter}
             onChangeEventsOrder={onChangeEventsOrder}
             hideEventsOrder
+            onAddFilter={onAddFilter}
             excludeFilterKeys={excludeFilterKeys}
             readonly={readonly}
             isConditional={isConditional}
+            borderless
           />
           {readonly && !conditions.filter?.filters?.length ? (
             <div className={'p-2'}>No conditions</div>
           ) : null}
         </div>
-        {readonly ? null : (
-          <div className={'px-2'}>
-            <FilterSelection
-              isConditional={isConditional}
-              filter={undefined}
-              onFilterClick={onAddFilter}
-              excludeFilterKeys={excludeFilterKeys}
-              isMobile={isMobile}
-            >
-              <Button variant="text-primary" icon="plus">
-                Add Condition
-              </Button>
-            </FilterSelection>
-          </div>
-        )}
       </div>
       <div className={'px-4 py-2 flex items-center gap-2 border-t'}>
         <span>{bottomLine1}</span>

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

@@ -2,7 +2,7 @@ import { GripHorizontal, Plus, Filter } from 'lucide-react';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { Button } from 'antd';
-import { Icon } from 'UI';
+import cn from 'classnames';
 import FilterItem from '../FilterItem';
 import EventsOrder from 'Shared/Filters/FilterList/EventsOrder';
 import FilterSelection from '../FilterSelection/FilterSelection';
@@ -25,6 +25,7 @@ interface Props {
   onAddFilter: (filter: any) => void;
   mergeDown?: boolean;
   mergeUp?: boolean;
+  borderless?: boolean;
 }
 
 export const FilterList = observer((props: Props) => {
@@ -34,6 +35,8 @@ export const FilterList = observer((props: Props) => {
     excludeFilterKeys = [],
     isConditional,
     onAddFilter,
+    readonly,
+    borderless
   } = props;
 
   const filters = filter.filters;
@@ -44,7 +47,7 @@ export const FilterList = observer((props: Props) => {
   };
   return (
     <div
-      className={'py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
+      className={cn('bg-white', borderless ? '' : 'py-2 px-4 rounded-xl  border border-gray-lighter')}
       style={{
         borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
         borderBottomRightRadius: props.mergeDown ? 0 : undefined,
@@ -54,7 +57,7 @@ export const FilterList = observer((props: Props) => {
     >
       <div className={'flex items-center mb-2'} style={{ gap: '0.65rem' }}>
         <div className="font-semibold">Filters</div>
-        <FilterSelection mode={'filters'} filter={undefined} onFilterClick={onAddFilter}>
+        <FilterSelection mode={'filters'} filter={undefined} onFilterClick={onAddFilter} disabled={readonly}>
           <Button icon={<Filter size={16} strokeWidth={1} />} type="default" size={'small'}>
             Add
           </Button>

frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx

@@ -16,11 +16,11 @@ function SessionHeader() {
   const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
 
   const title = useMemo(() => {
-    if (activeTab.type === 'bookmarks') {
+    if (activeTab && activeTab.type === 'bookmarks') {
       return isEnterprise ? 'Vault' : 'Bookmarks';
     }
     return 'Sessions';
-  }, [activeTab.type, isEnterprise]);
+  }, [activeTab?.type, isEnterprise]);
 
   const onDateChange = (e: any) => {
     const dateValues = e.toJSON();

frontend/app/mstore/types/FeatureFlag.ts

@@ -12,7 +12,7 @@ export class Conditions {
     this.name = data?.name;
     if (data && (data.rolloutPercentage || data.captureRate)) {
       this.rolloutPercentage = data.rolloutPercentage ?? data.captureRate;
-      this.filter = new Filter(isConditional, isMobile).fromJson(data);
+      this.filter = new Filter([], isConditional, isMobile).fromJson(data);
     }
   }