fix ui fix onboarding sidemanu and sidemodules (#2006)

* fix(ui): fix onboarding side menu * Removed submodule ee/intelligent_search/llama
2024-03-28 11:36:47 +01:00 · 2024-03-28 11:36:47 +01:00 · dfac6f32fb
commit dfac6f32fb
parent 3d30010a4e
8 changed files with 240 additions and 119 deletions
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +0,0 @@
-[submodule "ee/intelligent_search/llama"]
-	path = ee/intelligent_search/llama
-	url = https://github.com/facebookresearch/llama.git
--- a/ee/intelligent_search/llama
+++ b/ee/intelligent_search/llama
@ -1 +0,0 @@
-Subproject commit b00a461a6582196d8f488c73465f6c87f384a052
--- a/frontend/app/components/Onboarding/Onboarding.tsx
+++ b/frontend/app/components/Onboarding/Onboarding.tsx
@ -1,14 +1,16 @@
 import React from 'react';
-import { Icon } from 'UI';
-import SideMenu from './components/SideMenu';
+import { Redirect, Route, RouteComponentProps, Switch } from 'react-router';
 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',
-  'web': 'web',
-}
-
+  ios: 'mobile',
+  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="side-menu">
+    <div className="flex relative">
      <SideMenu activeTab={activeTab} onClick={onMenuItemClick} />
-      </div>
-      <div className="side-menu-margined w-full">
+      <div className="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 exact strict path={route(OB_TABS.INTEGRATIONS)} component={IntegrationsTab} />
+            <Route
+              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>
--- a/frontend/app/components/Onboarding/components/SideMenu.tsx
+++ b/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 { SideMenuitem } from 'UI';
-import { OB_TABS, onboarding as onboardingRoute } from 'App/routes';
-import OnboardingMenu from './OnboardingMenu/OnboardingMenu';
-import { withRouter } from 'react-router';
+
+import { OB_TABS } from 'App/routes';
+import { Icon } from 'UI';
+
+import SupportModal from '../../../layout/SupportModal';
+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 (
+    <Layout.Sider
+      style={{
+        position: 'sticky',
+        top: 70, // Height of the Header
+        // 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">
-      <div className={cn(stl.header, 'flex items-center')}>
-        <div className={stl.label}>
-          <span>PROJECT SETUP</span>
+        <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>
-      </div>
-
-      <SideMenuitem
-        title="Setup OpenReplay"
-        iconName="tools"
-        active={activeTab === OB_TABS.INSTALLING}
-        onClick={() => props.onClick(OB_TABS.INSTALLING)}
+      <SupportModal
+        onClose={() => {
+          setSupportOpen(false);
+        }}
+        open={supportOpen}
      />
-      <SideMenuitem
-        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>
+    </Layout.Sider>
  );
 }

-export default SideMenu;
+export default observer(SideMenu);
--- a/frontend/app/layout/Layout.tsx
+++ b/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;
--- a/frontend/app/layout/SideMenu.tsx
+++ b/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';
--- a/frontend/app/layout/SupportModal.tsx
+++ b/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}
-            closable={false}>
-      <div className='flex flex-col items-center'>
-        <div className='border p-3 bg-white flex rounded'>
-          <div className='shrink-0 w-10 mt-2'>
-            <Icon name='bookmark' size={18} />
+    <Drawer
+      title="OpenReplay Support"
+      placement="right"
+      open={open}
+      width={400}
+      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>
-            <Text type='secondary' className='text-sm'>
-              Deploy, manage and customize OpenReplay through quick starts, tutorials, samples, and guides.
+
+          <div className="flex flex-col">
+            <Text className="font-medium">Documentation</Text>
+            <Text type="secondary" className="text-sm">
+              Deploy, manage and customize OpenReplay through quick starts,
+              tutorials, samples, and guides.
            </Text>
-            <div className='my-1' />
-            <Button type='link' style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+            <div className="my-1" />
+            <Button
+              type="link"
+              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'>
-            <Icon name='slack' size={18} />
+        <div className="border p-3 bg-white flex rounded">
+          <div className="shrink-0 w-10 mt-2">
+            <Icon name="slack" size={18} />
          </div>
-          <div className='flex flex-col'>
-            <Text className='font-medium'>Slack Community</Text>
-            <Text type='secondary' className='text-sm'>
-              Ask OpenReplay community and get quick resolution to your questions from 1000+ members.
+          <div className="flex flex-col">
+            <Text className="font-medium">Slack Community</Text>
+            <Text type="secondary" className="text-sm">
+              Ask OpenReplay community and get quick resolution to your
+              questions from 1000+ members.
            </Text>
-            <div className='my-1' />
-            <Button type='link'
-                    style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+            <div className="my-1" />
+            <Button
+              type="link"
+              style={{
+                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'>
-            <iframe src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
-                    style={{ height: '415px', margin: '0', padding: '0', width: '100%' }} />
+          <div className="flex rounded border w-full">
+            <iframe
+              src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
+              style={{
+                height: '415px',
+                margin: '0',
+                padding: '0',
+                width: '100%',
+              }}
+            />
          </div>
        )}
      </div>
--- a/frontend/app/window.d.ts
+++ b/frontend/app/window.d.ts
@ -9,6 +9,7 @@ declare global {
      TRACKER_VERSION: string
      TRACKER_HOST: string
      SOURCEMAP: boolean
+      CRISP_KEY: string
    }
  }
 }
				`@ -1 +0,0 @@`
				`Subproject commit b00a461a6582196d8f488c73465f6c87f384a052`