fix ui fix onboarding sidemanu and sidemodules (#2006)

* fix(ui): fix onboarding side menu

* Removed submodule ee/intelligent_search/llama

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "ee/intelligent_search/llama"]
-	path = ee/intelligent_search/llama
-	url = https://github.com/facebookresearch/llama.git

ee/intelligent_search/llama

@@ -1 +0,0 @@
-Subproject commit b00a461a6582196d8f488c73465f6c87f384a052

frontend/app/components/Onboarding/Onboarding.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Redirect, Route, RouteComponentProps, Switch } from 'react-router';
-import SideMenu from './components/SideMenu';
 import { withRouter } from 'react-router-dom';
-import { Switch, Route, Redirect, RouteComponentProps } from 'react-router';
+
 import { OB_TABS, onboarding as onboardingRoute } from 'App/routes';
-import InstallOpenReplayTab from './components/InstallOpenReplayTab';
+import { withSiteId } from 'App/routes';
+import { Icon } from 'UI';
+
 import IdentifyUsersTab from './components/IdentifyUsersTab';
+import InstallOpenReplayTab from './components/InstallOpenReplayTab';
 import IntegrationsTab from './components/IntegrationsTab';
 import ManageUsersTab from './components/ManageUsersTab';
-import { withSiteId } from 'App/routes';
+import SideMenu from './components/SideMenu';
 
 interface Props {
   match: {
@@ -20,12 +22,10 @@ interface Props {
   history: RouteComponentProps['history'];
 }
 
-
 const platformMap = {
-  'ios': 'mobile',
+  ios: 'mobile',
-  'web': 'web',
+  web: 'web',
-}
+};
-
 
 const Onboarding = (props: Props) => {
   const platforms = [
@@ -62,11 +62,9 @@ const Onboarding = (props: Props) => {
   };
 
   return (
-    <div className="container-90 flex relative">
+    <div className="flex relative">
-      <div className="side-menu">
+      <SideMenu activeTab={activeTab} onClick={onMenuItemClick} />
-        <SideMenu activeTab={activeTab} onClick={onMenuItemClick} />
+      <div className="w-full">
-      </div>
-      <div className="side-menu-margined w-full">
         <div
           className="bg-white w-full rounded-lg mx-auto mb-8 border"
           style={{ maxWidth: '1360px' }}
@@ -88,8 +86,18 @@ const Onboarding = (props: Props) => {
                 platformMap={platformMap}
               />
             </Route>
-            <Route exact strict path={route(OB_TABS.MANAGE_USERS)} component={ManageUsersTab} />
+            <Route
-            <Route exact strict path={route(OB_TABS.INTEGRATIONS)} component={IntegrationsTab} />
+              exact
+              strict
+              path={route(OB_TABS.MANAGE_USERS)}
+              component={ManageUsersTab}
+            />
+            <Route
+              exact
+              strict
+              path={route(OB_TABS.INTEGRATIONS)}
+              component={IntegrationsTab}
+            />
             <Redirect to={route(OB_TABS.INSTALLING)} />
           </Switch>
         </div>

frontend/app/components/Onboarding/components/SideMenu.tsx

@@ -1,71 +1,128 @@
+import { Divider, Layout, Menu } from 'antd';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import stl from './sideMenu.module.css';
+
-import cn from 'classnames';
+import { OB_TABS } from 'App/routes';
-import { SideMenuitem } from 'UI';
+import { Icon } from 'UI';
-import { OB_TABS, onboarding as onboardingRoute } from 'App/routes';
+
-import OnboardingMenu from './OnboardingMenu/OnboardingMenu';
+import SupportModal from '../../../layout/SupportModal';
-import { withRouter } from 'react-router';
+import { useStore } from '../../../mstore';
 
 interface Props {
   activeTab: string;
   onClick: (tab: string) => void;
 }
 function SideMenu(props: Props) {
+  const [supportOpen, setSupportOpen] = React.useState(false);
+  const { settingsStore } = useStore();
   const { activeTab } = props;
+
+  const handleClick = (item: any) => {
+    if (item.key === 'support') {
+      return setSupportOpen(true);
+    }
+    props.onClick(item.key);
+  };
   return (
-    <div className="w-full">
+    <Layout.Sider
-      <div className={cn(stl.header, 'flex items-center')}>
+      style={{
-        <div className={stl.label}>
+        position: 'sticky',
-          <span>PROJECT SETUP</span>
+        top: 70, // Height of the Header
-        </div>
+        // backgroundColor: '#f6f6f6',
+        height: 'calc(100vh - 70px)', // Adjust the height to accommodate the Header
+        overflow: 'auto', // Enable scrolling for the Sider content if needed
+      }}
+      collapsed={settingsStore.menuCollapsed}
+      width={250}
+    >
+      <div className="w-full">
+        <Menu
+          mode="inline"
+          onClick={handleClick}
+          style={{ marginTop: '8px', border: 'none' }}
+          selectedKeys={activeTab ? [activeTab] : []}
+        >
+          <Menu.Item
+            key={OB_TABS.INSTALLING}
+            style={{ paddingLeft: 0 }}
+            icon={
+              <Icon
+                name="tools"
+                size={16}
+                color={activeTab === OB_TABS.INSTALLING ? 'teal' : 'gray'}
+              />
+            }
+            className={'!rounded hover-fill-teal'}
+          >
+            Setup OpenReplay
+          </Menu.Item>
+          <Menu.Item
+            key={OB_TABS.IDENTIFY_USERS}
+            style={{ paddingLeft: 0 }}
+            icon={
+              <Icon
+                name="person-border"
+                size={16}
+                color={activeTab === OB_TABS.IDENTIFY_USERS ? 'teal' : 'gray'}
+              />
+            }
+            className={'!rounded hover-fill-teal'}
+          >
+            Identify Users
+          </Menu.Item>
+          <Menu.Item
+            key={OB_TABS.MANAGE_USERS}
+            style={{ paddingLeft: 0 }}
+            icon={
+              <Icon
+                name="people"
+                size={16}
+                color={activeTab === OB_TABS.MANAGE_USERS ? 'teal' : 'gray'}
+              />
+            }
+            className={'!rounded hover-fill-teal'}
+          >
+            Invite Collaborators
+          </Menu.Item>
+          <Menu.Item
+            key={OB_TABS.INTEGRATIONS}
+            style={{ paddingLeft: 0 }}
+            icon={
+              <Icon
+                name="plug"
+                size={16}
+                color={activeTab === OB_TABS.INTEGRATIONS ? 'teal' : 'gray'}
+              />
+            }
+            className={'!rounded hover-fill-teal'}
+          >
+            Integrations
+          </Menu.Item>
+          <Divider style={{ margin: '6px 0' }} />
+          <Menu.Item
+            key={'support'}
+            style={{ paddingLeft: 0 }}
+            icon={
+              <Icon
+                name="question-circle"
+                size={16}
+                color={activeTab === 'support' ? 'teal' : 'gray'}
+              />
+            }
+            className={'!rounded hover-fill-teal'}
+          >
+            Support
+          </Menu.Item>
+        </Menu>
       </div>
-
+      <SupportModal
-      <SideMenuitem
+        onClose={() => {
-        title="Setup OpenReplay"
+          setSupportOpen(false);
-        iconName="tools"
+        }}
-        active={activeTab === OB_TABS.INSTALLING}
+        open={supportOpen}
-        onClick={() => props.onClick(OB_TABS.INSTALLING)}
       />
-      <SideMenuitem
+    </Layout.Sider>
-        title="Identify Users"
-        iconName="person-border"
-        active={activeTab === OB_TABS.IDENTIFY_USERS}
-        onClick={() => props.onClick(OB_TABS.IDENTIFY_USERS)}
-      />
-      <SideMenuitem
-        title="Invite Collaborators"
-        iconName="people"
-        active={activeTab === OB_TABS.MANAGE_USERS}
-        onClick={() => props.onClick(OB_TABS.MANAGE_USERS)}
-      />
-      <SideMenuitem
-        title="Integrations"
-        iconName="plug"
-        active={activeTab === OB_TABS.INTEGRATIONS}
-        onClick={() => props.onClick(OB_TABS.INTEGRATIONS)}
-      />
-
-      <div className={cn(stl.divider, 'my-4')} />
-
-      <div className={cn(stl.header, 'flex items-center')}>
-        <div className={stl.label}>
-          <span>Help</span>
-        </div>
-      </div>
-
-      <SideMenuitem
-        title="Documentation"
-        iconName="journal-code"
-        onClick={() => window.open('https://docs.openreplay.com', '_blank')}
-      />
-
-      <SideMenuitem
-        title="Report Issue"
-        iconName="github"
-        onClick={() => window.open('https://github.com/openreplay/openreplay/issues', '_blank')}
-      />
-    </div>
   );
 }
 
-export default SideMenu;
+export default observer(SideMenu);

frontend/app/layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Layout as AntLayout } from 'antd';
 import SideMenu from 'App/layout/SideMenu';
 import TopHeader from 'App/layout/TopHeader';
@@ -9,7 +9,7 @@ import { init as initSite } from 'Duck/site';
 import { connect } from 'react-redux';
 
 
-const { Header, Sider, Content } = AntLayout;
+const { Sider, Content } = AntLayout;
 
 interface Props {
   children: React.ReactNode;

frontend/app/layout/SideMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Divider, Menu, Tooltip, Typography } from 'antd';
+import { Divider, Menu, Typography } from 'antd';
 import SVG from 'UI/SVG';
 import * as routes from 'App/routes';
 import { bookmarks, client, CLIENT_DEFAULT_TAB, CLIENT_TABS, fflags, notes, sessions, withSiteId } from 'App/routes';

frontend/app/layout/SupportModal.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import { Icon } from 'UI';
-import { Button, Drawer, Space, Typography } from 'antd';
 import { ArrowRightOutlined } from '@ant-design/icons';
+import { Button, Drawer, Space, Typography } from 'antd';
+import React from 'react';
+
+import { Icon } from 'UI';
 
 const { Text } = Typography;
 
@@ -14,23 +15,38 @@ function SupportModal(props: Props) {
   const { onClose, open } = props;
   const WEBSITE_ID = window.env.CRISP_KEY;
   return (
-    <Drawer title='OpenReplay Support' placement='right' open={open} width={400} onClose={onClose}
+    <Drawer
-            closable={false}>
+      title="OpenReplay Support"
-      <div className='flex flex-col items-center'>
+      placement="right"
-        <div className='border p-3 bg-white flex rounded'>
+      open={open}
-          <div className='shrink-0 w-10 mt-2'>
+      width={400}
-            <Icon name='bookmark' size={18} />
+      onClose={onClose}
+      closable={false}
+    >
+      <div className="flex flex-col items-center gap-2">
+        <div className="border p-3 bg-white flex rounded">
+          <div className="shrink-0 w-10 mt-2">
+            <Icon name="bookmark" size={18} />
           </div>
-          <div className='flex flex-col'>
+
-            <Text className='font-medium'>Documentation</Text>
+          <div className="flex flex-col">
-            <Text type='secondary' className='text-sm'>
+            <Text className="font-medium">Documentation</Text>
-              Deploy, manage and customize OpenReplay through quick starts, tutorials, samples, and guides.
+            <Text type="secondary" className="text-sm">
+              Deploy, manage and customize OpenReplay through quick starts,
+              tutorials, samples, and guides.
             </Text>
-            <div className='my-1' />
+            <div className="my-1" />
-            <Button type='link' style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+            <Button
-                    onClick={() => {
+              type="link"
-                      window.open('https://docs.openreplay.com');
+              style={{
-                    }}>
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: '0',
+              }}
+              onClick={() => {
+                window.open('https://docs.openreplay.com');
+              }}
+            >
               <Space>
                 <div>Browse Docs</div>
                 <ArrowRightOutlined />
@@ -39,23 +55,28 @@ function SupportModal(props: Props) {
           </div>
         </div>
 
-        <div className='my-2' />
+        <div className="border p-3 bg-white flex rounded">
-
+          <div className="shrink-0 w-10 mt-2">
-        <div className='border p-3 bg-white flex rounded'>
+            <Icon name="slack" size={18} />
-          <div className='shrink-0 w-10 mt-2'>
-            <Icon name='slack' size={18} />
           </div>
-          <div className='flex flex-col'>
+          <div className="flex flex-col">
-            <Text className='font-medium'>Slack Community</Text>
+            <Text className="font-medium">Slack Community</Text>
-            <Text type='secondary' className='text-sm'>
+            <Text type="secondary" className="text-sm">
-              Ask OpenReplay community and get quick resolution to your questions from 1000+ members.
+              Ask OpenReplay community and get quick resolution to your
+              questions from 1000+ members.
             </Text>
-            <div className='my-1' />
+            <div className="my-1" />
-            <Button type='link'
+            <Button
-                    style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+              type="link"
-                    onClick={() => {
+              style={{
-                      window.open('https://slack.openreplay.com', '_blank');
+                display: 'flex',
-                    }}>
+                justifyContent: 'space-between',
+                padding: '0',
+              }}
+              onClick={() => {
+                window.open('https://slack.openreplay.com', '_blank');
+              }}
+            >
               <Space>
                 <div>Ask Community</div>
                 <ArrowRightOutlined />
@@ -64,12 +85,50 @@ function SupportModal(props: Props) {
           </div>
         </div>
 
-        <div className='my-2' />
+        <div className="border p-3 bg-white flex rounded">
+          <div className="shrink-0 w-10 mt-2">
+            <Icon name="github" size={18} />
+          </div>
+          <div className="flex flex-col">
+            <Text className="font-medium">Github Repository</Text>
+            <Text type="secondary" className="text-sm">
+              Report issues or request features and get quick updates from our
+              dev team.
+            </Text>
+            <div className="my-1" />
+            <Button
+              type="link"
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: '0',
+              }}
+              onClick={() => {
+                window.open(
+                  'https://github.com/openreplay/openreplay/issues',
+                  '_blank'
+                );
+              }}
+            >
+              <Space>
+                <div>Open GitHub</div>
+                <ArrowRightOutlined />
+              </Space>
+            </Button>
+          </div>
+        </div>
 
         {!!WEBSITE_ID && (
-          <div className='flex rounded border w-full'>
+          <div className="flex rounded border w-full">
-            <iframe src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
+            <iframe
-                    style={{ height: '415px', margin: '0', padding: '0', width: '100%' }} />
+              src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
+              style={{
+                height: '415px',
+                margin: '0',
+                padding: '0',
+                width: '100%',
+              }}
+            />
           </div>
         )}
       </div>
@@ -77,4 +136,4 @@ function SupportModal(props: Props) {
   );
 }
 
-export default SupportModal;
+export default SupportModal;

frontend/app/window.d.ts

@@ -9,6 +9,7 @@ declare global {
       TRACKER_VERSION: string
       TRACKER_HOST: string
       SOURCEMAP: boolean
+      CRISP_KEY: string
     }
   }
 }