From a03ba3962e5cf8bb738233fe9d1b20c0460d21d9 Mon Sep 17 00:00:00 2001
From: samcaspus <sandeepguptan1998@gmail.com>
Date: Mon, 20 Jul 2020 00:17:53 -0700
Subject: [PATCH 1/3] enhanced ctrl + click new tab opening feature

---
 frontend/src/layout/Sidebar.js | 40 +++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/frontend/src/layout/Sidebar.js b/frontend/src/layout/Sidebar.js
index 539900638dc0f..93999ace175af 100644
--- a/frontend/src/layout/Sidebar.js
+++ b/frontend/src/layout/Sidebar.js
@@ -65,7 +65,11 @@ const submenuOverride = {
 export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
     const [inviteModalOpen, setInviteModalOpen] = useState(false)
     const [toolbarModalOpen, setToolbarModalOpen] = useState(false)
-    const collapseSidebar = () => {
+    const collapseSidebar = (url) => (e) => {
+        if (e.ctrlKey) {
+            console.log(e)
+            window.open(url, '_blank')
+        }
         if (!sidebarCollapsed && window.innerWidth <= 991) {
             setSidebarCollapsed(true)
         }
@@ -132,14 +136,17 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         >
                             <LineChartOutlined />
                             <span className="sidebar-label">{dashboard.name}</span>
-                            <Link to={`/dashboard/${dashboard.id}`} onClick={collapseSidebar} />
+                            <Link
+                                to={`/dashboard/${dashboard.id}`}
+                                onClick={collapseSidebar(`/dashboard/${dashboard.id}`)}
+                            />
                         </Menu.Item>
                     ))}
 
                     <Menu.Item key="dashboards" style={itemStyle} data-attr="menu-item-dashboards" title="">
                         <FundOutlined />
                         <span className="sidebar-label">Dashboards</span>
-                        <Link to="/dashboard" onClick={collapseSidebar} />
+                        <Link to="/dashboard" onClick={collapseSidebar('/dashboard')} />
                     </Menu.Item>
 
                     {pinnedDashboards.length > 0 ? <Menu.Divider /> : null}
@@ -147,7 +154,7 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                     <Menu.Item key="trends" style={itemStyle} data-attr="menu-item-trends" title="">
                         <RiseOutlined />
                         <span className="sidebar-label">{'Trends'}</span>
-                        <Link to={'/trends'} onClick={collapseSidebar} />
+                        <Link to={'/trends'} onClick={collapseSidebar('/trends')} />
                     </Menu.Item>
 
                     <Menu.SubMenu
@@ -166,22 +173,22 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         <Menu.Item key="events" style={itemStyle} data-attr="menu-item-all-events">
                             <ContainerOutlined />
                             <span className="sidebar-label">{'All Events'}</span>
-                            <Link to={'/events'} onClick={collapseSidebar} />
+                            <Link to={'/events'} onClick={collapseSidebar('/events')} />
                         </Menu.Item>
                         <Menu.Item key="actions" style={itemStyle} data-attr="menu-item-actions">
                             <AimOutlined />
                             <span className="sidebar-label">{'Actions'}</span>
-                            <Link to={'/actions'} onClick={collapseSidebar} />
+                            <Link to={'/actions'} onClick={collapseSidebar('/actions')} />
                         </Menu.Item>
                         <Menu.Item key="liveActions" style={itemStyle} data-attr="menu-item-live-actions">
                             <SyncOutlined />
                             <span className="sidebar-label">{'Live Actions'}</span>
-                            <Link to={'/actions/live'} onClick={collapseSidebar} />
+                            <Link to={'/actions/live'} onClick={collapseSidebar('/actions/live')} />
                         </Menu.Item>
                         <Menu.Item key="sessions" style={itemStyle} data-attr="menu-item-sessions">
                             <ClockCircleOutlined />
                             <span className="sidebar-label">{'Sessions'}</span>
-                            <Link to={'/sessions'} onClick={collapseSidebar} />
+                            <Link to={'/sessions'} onClick={collapseSidebar('/sessions')} />
                         </Menu.Item>
                     </Menu.SubMenu>
                     <Menu.SubMenu
@@ -200,38 +207,41 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         <Menu.Item key="people" style={itemStyle} data-attr="menu-item-all-people">
                             <UserOutlined />
                             <span className="sidebar-label">{'All Users'}</span>
-                            <Link to={'/people'} onClick={collapseSidebar} />
+                            <Link to={'/people'} onClick={collapseSidebar('/people')} />
                         </Menu.Item>
                         <Menu.Item key="cohorts" style={itemStyle} data-attr="menu-item-cohorts">
                             <UsergroupAddOutlined />
                             <span className="sidebar-label">{'Cohorts'}</span>
-                            <Link to={'/people/cohorts'} onClick={collapseSidebar} />
+                            <Link to={'/people/cohorts'} onClick={collapseSidebar('/people/cohorts')} />
                         </Menu.Item>
                         <Menu.Item key="retention" style={itemStyle} data-attr="menu-item-retention">
                             <RetweetOutlined />
                             <span className="sidebar-label">{'Retention'}</span>
-                            <Link to={'/people/retention'} onClick={collapseSidebar} />
+                            <Link to={'/people/retention'} onClick={collapseSidebar('/people/retention')} />
                         </Menu.Item>
                     </Menu.SubMenu>
                     <Menu.Item key="funnels" style={itemStyle} data-attr="menu-item-funnels">
                         <FunnelPlotOutlined />
                         <span className="sidebar-label">{'Funnels'}</span>
-                        <Link to={'/funnel'} onClick={collapseSidebar} />
+                        <Link to={'/funnel'} onClick={collapseSidebar('/funnel')} />
                     </Menu.Item>
                     <Menu.Item key="paths" style={itemStyle} data-attr="menu-item-paths">
                         <ForkOutlined />
                         <span className="sidebar-label">{'Paths'}</span>
-                        <Link to={'/paths'} onClick={collapseSidebar} />
+                        <Link to={'/paths'} onClick={collapseSidebar('/paths')} />
                     </Menu.Item>
                     <Menu.Item key="experiments" style={itemStyle} data-attr="menu-item-feature-f">
                         <ExperimentOutlined />
                         <span className="sidebar-label">{'Experiments'}</span>
-                        <Link to={'/experiments/feature_flags'} onClick={collapseSidebar} />
+                        <Link
+                            to={'/experiments/feature_flags'}
+                            onClick={collapseSidebar('/experiments/feature_flags')}
+                        />
                     </Menu.Item>
                     <Menu.Item key="setup" style={itemStyle} data-attr="menu-item-setup">
                         <SettingOutlined />
                         <span className="sidebar-label">{'Setup'}</span>
-                        <Link to={'/setup'} onClick={collapseSidebar} />
+                        <Link to={'/setup'} onClick={collapseSidebar('/setup')} />
                     </Menu.Item>
                     <Menu.Item
                         key="invite"

From 1290f1c035f154468f3533826fce917c5c9368f0 Mon Sep 17 00:00:00 2001
From: samcaspus <sandeepguptan1998@gmail.com>
Date: Mon, 20 Jul 2020 02:50:13 -0700
Subject: [PATCH 2/3] worked on review changes reverted and fixed over link.js
 component

---
 frontend/src/layout/Sidebar.js      | 40 +++++++++++------------------
 frontend/src/lib/components/Link.js |  4 +++
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/frontend/src/layout/Sidebar.js b/frontend/src/layout/Sidebar.js
index 93999ace175af..539900638dc0f 100644
--- a/frontend/src/layout/Sidebar.js
+++ b/frontend/src/layout/Sidebar.js
@@ -65,11 +65,7 @@ const submenuOverride = {
 export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
     const [inviteModalOpen, setInviteModalOpen] = useState(false)
     const [toolbarModalOpen, setToolbarModalOpen] = useState(false)
-    const collapseSidebar = (url) => (e) => {
-        if (e.ctrlKey) {
-            console.log(e)
-            window.open(url, '_blank')
-        }
+    const collapseSidebar = () => {
         if (!sidebarCollapsed && window.innerWidth <= 991) {
             setSidebarCollapsed(true)
         }
@@ -136,17 +132,14 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         >
                             <LineChartOutlined />
                             <span className="sidebar-label">{dashboard.name}</span>
-                            <Link
-                                to={`/dashboard/${dashboard.id}`}
-                                onClick={collapseSidebar(`/dashboard/${dashboard.id}`)}
-                            />
+                            <Link to={`/dashboard/${dashboard.id}`} onClick={collapseSidebar} />
                         </Menu.Item>
                     ))}
 
                     <Menu.Item key="dashboards" style={itemStyle} data-attr="menu-item-dashboards" title="">
                         <FundOutlined />
                         <span className="sidebar-label">Dashboards</span>
-                        <Link to="/dashboard" onClick={collapseSidebar('/dashboard')} />
+                        <Link to="/dashboard" onClick={collapseSidebar} />
                     </Menu.Item>
 
                     {pinnedDashboards.length > 0 ? <Menu.Divider /> : null}
@@ -154,7 +147,7 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                     <Menu.Item key="trends" style={itemStyle} data-attr="menu-item-trends" title="">
                         <RiseOutlined />
                         <span className="sidebar-label">{'Trends'}</span>
-                        <Link to={'/trends'} onClick={collapseSidebar('/trends')} />
+                        <Link to={'/trends'} onClick={collapseSidebar} />
                     </Menu.Item>
 
                     <Menu.SubMenu
@@ -173,22 +166,22 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         <Menu.Item key="events" style={itemStyle} data-attr="menu-item-all-events">
                             <ContainerOutlined />
                             <span className="sidebar-label">{'All Events'}</span>
-                            <Link to={'/events'} onClick={collapseSidebar('/events')} />
+                            <Link to={'/events'} onClick={collapseSidebar} />
                         </Menu.Item>
                         <Menu.Item key="actions" style={itemStyle} data-attr="menu-item-actions">
                             <AimOutlined />
                             <span className="sidebar-label">{'Actions'}</span>
-                            <Link to={'/actions'} onClick={collapseSidebar('/actions')} />
+                            <Link to={'/actions'} onClick={collapseSidebar} />
                         </Menu.Item>
                         <Menu.Item key="liveActions" style={itemStyle} data-attr="menu-item-live-actions">
                             <SyncOutlined />
                             <span className="sidebar-label">{'Live Actions'}</span>
-                            <Link to={'/actions/live'} onClick={collapseSidebar('/actions/live')} />
+                            <Link to={'/actions/live'} onClick={collapseSidebar} />
                         </Menu.Item>
                         <Menu.Item key="sessions" style={itemStyle} data-attr="menu-item-sessions">
                             <ClockCircleOutlined />
                             <span className="sidebar-label">{'Sessions'}</span>
-                            <Link to={'/sessions'} onClick={collapseSidebar('/sessions')} />
+                            <Link to={'/sessions'} onClick={collapseSidebar} />
                         </Menu.Item>
                     </Menu.SubMenu>
                     <Menu.SubMenu
@@ -207,41 +200,38 @@ export function Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         <Menu.Item key="people" style={itemStyle} data-attr="menu-item-all-people">
                             <UserOutlined />
                             <span className="sidebar-label">{'All Users'}</span>
-                            <Link to={'/people'} onClick={collapseSidebar('/people')} />
+                            <Link to={'/people'} onClick={collapseSidebar} />
                         </Menu.Item>
                         <Menu.Item key="cohorts" style={itemStyle} data-attr="menu-item-cohorts">
                             <UsergroupAddOutlined />
                             <span className="sidebar-label">{'Cohorts'}</span>
-                            <Link to={'/people/cohorts'} onClick={collapseSidebar('/people/cohorts')} />
+                            <Link to={'/people/cohorts'} onClick={collapseSidebar} />
                         </Menu.Item>
                         <Menu.Item key="retention" style={itemStyle} data-attr="menu-item-retention">
                             <RetweetOutlined />
                             <span className="sidebar-label">{'Retention'}</span>
-                            <Link to={'/people/retention'} onClick={collapseSidebar('/people/retention')} />
+                            <Link to={'/people/retention'} onClick={collapseSidebar} />
                         </Menu.Item>
                     </Menu.SubMenu>
                     <Menu.Item key="funnels" style={itemStyle} data-attr="menu-item-funnels">
                         <FunnelPlotOutlined />
                         <span className="sidebar-label">{'Funnels'}</span>
-                        <Link to={'/funnel'} onClick={collapseSidebar('/funnel')} />
+                        <Link to={'/funnel'} onClick={collapseSidebar} />
                     </Menu.Item>
                     <Menu.Item key="paths" style={itemStyle} data-attr="menu-item-paths">
                         <ForkOutlined />
                         <span className="sidebar-label">{'Paths'}</span>
-                        <Link to={'/paths'} onClick={collapseSidebar('/paths')} />
+                        <Link to={'/paths'} onClick={collapseSidebar} />
                     </Menu.Item>
                     <Menu.Item key="experiments" style={itemStyle} data-attr="menu-item-feature-f">
                         <ExperimentOutlined />
                         <span className="sidebar-label">{'Experiments'}</span>
-                        <Link
-                            to={'/experiments/feature_flags'}
-                            onClick={collapseSidebar('/experiments/feature_flags')}
-                        />
+                        <Link to={'/experiments/feature_flags'} onClick={collapseSidebar} />
                     </Menu.Item>
                     <Menu.Item key="setup" style={itemStyle} data-attr="menu-item-setup">
                         <SettingOutlined />
                         <span className="sidebar-label">{'Setup'}</span>
-                        <Link to={'/setup'} onClick={collapseSidebar('/setup')} />
+                        <Link to={'/setup'} onClick={collapseSidebar} />
                     </Menu.Item>
                     <Menu.Item
                         key="invite"
diff --git a/frontend/src/lib/components/Link.js b/frontend/src/lib/components/Link.js
index 9e35e7c04870a..4d1ca12d98a66 100644
--- a/frontend/src/lib/components/Link.js
+++ b/frontend/src/lib/components/Link.js
@@ -7,6 +7,10 @@ export function Link({ to, preventClick = false, ...props }) {
             href={to || '#'}
             {...props}
             onClick={(event) => {
+                if (event.ctrlKey) {
+                    window.open(to, '_blank')
+                }
+
                 if (!props.target) {
                     event.preventDefault()
                     event.stopPropagation()

From f78ef53e969691b76b8ac6c8cb54431f07ed50ec Mon Sep 17 00:00:00 2001
From: samcaspus <sandeepguptan1998@gmail.com>
Date: Mon, 20 Jul 2020 03:04:38 -0700
Subject: [PATCH 3/3] add return method for ctrl click and command click

---
 frontend/src/lib/components/Link.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/Link.js b/frontend/src/lib/components/Link.js
index 4d1ca12d98a66..f6443aabb6bcc 100644
--- a/frontend/src/lib/components/Link.js
+++ b/frontend/src/lib/components/Link.js
@@ -7,8 +7,8 @@ export function Link({ to, preventClick = false, ...props }) {
             href={to || '#'}
             {...props}
             onClick={(event) => {
-                if (event.ctrlKey) {
-                    window.open(to, '_blank')
+                if (event.metaKey || event.ctrlKey) {
+                    return window.open(to, '_blank')
                 }
 
                 if (!props.target) {