feat(ui) - funnels wip

frontend/app/Router.js

@@ -17,7 +17,7 @@ const AssistPure = lazy(() => import('Components/Assist'));
 const BugFinderPure = lazy(() => import('Components/BugFinder/BugFinder'));
 const DashboardPure = lazy(() => import('Components/Dashboard/NewDashboard'));
 const ErrorsPure = lazy(() => import('Components/Errors/Errors'));
-const FunnelDetails = lazy(() => import('Components/Funnels/FunnelDetails'));
+const FunnelDetailsPure = lazy(() => import('Components/Funnels/FunnelDetails'));
 const FunnelIssueDetails = lazy(() => import('Components/Funnels/FunnelIssueDetails'));
 const FunnelPagePure = lazy(() => import('Components/Funnels/FunnelPage'));
 import WidgetViewPure from 'Components/Dashboard/components/WidgetView';
@@ -49,7 +49,7 @@ const Client = withSiteIdUpdater(ClientPure);
 const Onboarding = withSiteIdUpdater(OnboardingPure);
 const Errors = withSiteIdUpdater(ErrorsPure);
 const FunnelPage = withSiteIdUpdater(FunnelPagePure);
-const Funnels = withSiteIdUpdater(FunnelDetails);
+const FunnelsDetails = withSiteIdUpdater(FunnelDetailsPure);
 const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails);
 const withSiteId = routes.withSiteId;
 const withObTab = routes.withObTab;
@@ -68,7 +68,7 @@ const ASSIST_PATH = routes.assist();
 const ERRORS_PATH = routes.errors();
 const ERROR_PATH = routes.error();
 const FUNNEL_PATH = routes.funnels();
-// const FUNNEL_DETAIL_PATH = routes.funnel();
+const FUNNEL_CREATE_PATH = routes.funnelsCreate();
 const FUNNEL_ISSUE_PATH = routes.funnelIssue();
 const SESSION_PATH = routes.session();
 const LIVE_SESSION_PATH = routes.liveSession();
@@ -216,6 +216,7 @@ class Router extends React.Component {
             <Route exact strict path={ withSiteId(ERRORS_PATH, siteIdList) } component={ Errors } />
             <Route exact strict path={ withSiteId(ERROR_PATH, siteIdList) } component={ Errors } />
             <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ FunnelPage } />
+            <Route exact strict path={ withSiteId(FUNNEL_CREATE_PATH, siteIdList) } component={ FunnelsDetails } />
             {/* <Route exact strict path={ withSiteId(FUNNEL_PATH, siteIdList) } component={ Funnels } /> */}
             <Route exact strict path={ withSiteId(FUNNEL_ISSUE_PATH, siteIdList) } component={ FunnelIssue } />
             <Route exact strict path={ withSiteId(SESSIONS_PATH, siteIdList) } component={ BugFinder } />

frontend/app/components/Funnels/FunnelDetails/FunnelDetails.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+
+interface Props {
+    
+}
+function FunnelDetails(props: Props) {
+    return (
+        <div>
+            Create View/Detail View
+        </div>
+    );
+}
+
+export default withRouter(FunnelDetails);

frontend/app/components/Funnels/FunnelList/FunnelList.tsx

@@ -4,6 +4,7 @@ import { useObserver } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { sliceListPerPage } from 'App/utils';
 import FunnelItem from '../FunnelItem/FunnelItem';
+import FunnelSearch from '../FunnelSearch';
 
 function FunnelList(props) {
     const { funnelStore } = useStore()
@@ -19,8 +20,13 @@ function FunnelList(props) {
     return (
         <Loader loading={loading}>
             <div className="flex items-center">
-                <PageTitle title='Funnels' className="mr-3" />
-                <Button primary size="small" onClick={() => {}}>New Funnel</Button>
+                <div className="flex items-center">
+                    <PageTitle title='Funnels' className="mr-3" />
+                    <Button primary size="small" onClick={() => {}}>New Funnel</Button>
+                </div>
+                <div className="ml-auto w-1/4">
+                    <FunnelSearch />
+                </div>
             </div>
 
             <div className="color-gray-medium mt-2 mb-4">Funnels make it easy to uncover the most significant issues that impacted conversions.</div>

frontend/app/components/Funnels/FunnelPage/FunnelPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
+import FunnelDetails from '../FunnelDetails/FunnelDetails';
 import FunnelList from '../FunnelList';
 
 function FunnelPage(props) {
@@ -9,6 +10,14 @@ function FunnelPage(props) {
                 <Route path="/">
                     <FunnelList />
                 </Route>
+                
+                <Route path="/funnel/create">
+                    <FunnelDetails />
+                </Route>
+
+                {/* <Route path="/funnel/:id">
+                    <FunnelDetail />
+                </Route> */}
             </Switch>
         </div>
     );

frontend/app/components/Funnels/FunnelSearch/FunnelSearch.tsx

@@ -0,0 +1,34 @@
+import { useObserver } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
+import { useStore } from 'App/mstore';
+import { Icon } from 'UI';
+import { debounce } from 'App/utils';
+
+let debounceUpdate: any = () => {}
+function FunnelSearch(props) {
+    const { funnelStore } = useStore();
+    const [query, setQuery] = useState(funnelStore.search);
+    useEffect(() => {
+        debounceUpdate = debounce((key, value) => funnelStore.updateKey(key, value), 500);
+    }, [])
+
+    const write = ({ target: { name, value } }) => {
+        setQuery(value);
+        debounceUpdate('metricsSearch', value);
+    }
+    
+    return useObserver(() => (
+        <div className="relative">
+            <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
+            <input
+                value={query}
+                name="metricsSearch"
+                className="bg-white p-2 border rounded w-full pl-10"
+                placeholder="Filter by title, owner"
+                onChange={write}
+            />
+        </div>
+    ));
+}
+
+export default FunnelSearch;

frontend/app/components/Funnels/FunnelSearch/index.ts

@@ -0,0 +1 @@
+export { default } from './FunnelSearch';

frontend/app/mstore/funnelStore.ts

@@ -9,6 +9,7 @@ export default class FunnelStore {
     list: IFunnel[] = []
     instance: IFunnel | null = null
     period: Period = Period({ rangeName: LAST_7_DAYS })
+    search: string = ''
 
     page: number = 1
     pageSize: number = 10

frontend/app/routes.js

@@ -92,6 +92,7 @@ export const errors = params => queried('/errors', params);
 export const error = (id = ':errorId', hash) => hashed(`/errors/${ id }`, hash);
 
 export const funnels = params => queried('/funnels', params)
+export const funnelsCreate = () => `/funnels/create`;
 export const funnel = (id = ':funnelId', hash) => hashed(`/funnels/${ id }`, hash);
 export const funnelIssue = (id = ':funnelId', issueId = ':issueId', hash) => hashed(`/funnels/${ id }/${ issueId}`, hash);
 
@@ -135,6 +136,7 @@ const REQUIRED_SITE_ID_ROUTES = [
     errors(),
     onboarding(''),
     funnels(''),
+    funnelsCreate(''),
     funnel(''),
     funnelIssue(''),
   ];