From 6f31f7fd7c18612645bb808ee50fa3113654f312 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 14 Jul 2022 13:55:08 +0200
Subject: [PATCH] fix(ui) - onboarding user form

---
 .../Client/Roles/components/RoleForm/RoleForm.tsx  |  1 -
 frontend/app/components/Client/Users/UsersView.tsx |  5 +++--
 .../Client/Users/components/UserList/UserList.tsx  |  6 ++++--
 .../Users/components/UserListItem/UserListItem.tsx | 14 +++++++++-----
 .../components/ManageUsersTab/ManageUsersTab.js    |  7 +++----
 .../app/components/Session_/Inspector/index.js     |  2 --
 .../Session_/Player/Controls/Timeline.js           |  1 -
 .../components/shared/CodeSnippet/CodeSnippet.tsx  |  1 -
 frontend/app/duck/assignments.js                   |  1 -
 frontend/app/mstore/funnelStore.ts                 |  1 -
 10 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
index 578cc75ad..7aed70131 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
@@ -49,7 +49,6 @@ const RoleForm = (props: Props) => {
   }
 
   const writeOption = ({ name, value }: any) => {
-    console.log('name', name);
     if (name === 'permissions') {
       onChangePermissions(value)
     } else if (name === 'projects') {
diff --git a/frontend/app/components/Client/Users/UsersView.tsx b/frontend/app/components/Client/Users/UsersView.tsx
index 3b4d0c95f..a1240eb37 100644
--- a/frontend/app/components/Client/Users/UsersView.tsx
+++ b/frontend/app/components/Client/Users/UsersView.tsx
@@ -10,12 +10,13 @@ import { connect } from 'react-redux';
 import AddUserButton from './components/AddUserButton';
 
 interface Props {
+    isOnboarding?: boolean;
     account: any;
     isEnterprise: boolean;
     limits: any;
 }
 function UsersView(props: Props) {
-    const { account, limits, isEnterprise } = props;
+    const { account, limits, isEnterprise, isOnboarding = false } = props;
     const { userStore, roleStore } = useStore();
     const userCount = useObserver(() => userStore.list.length);
     const roles = useObserver(() => roleStore.list);
@@ -49,7 +50,7 @@ function UsersView(props: Props) {
                     <UserSearch />
                 </div>
             </div>
-            <UserList isEnterprise={isEnterprise} />
+            <UserList isEnterprise={isEnterprise} isOnboarding={isOnboarding} />
         </div>
     );
 }
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index cae5ffd43..a86e6d7d7 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -9,10 +9,11 @@ import UserForm from '../UserForm';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 interface Props {
+    isOnboarding?: boolean;
     isEnterprise?: boolean;
 }
 function UserList(props: Props) {
-    const { isEnterprise  = false } = props;
+    const { isEnterprise  = false, isOnboarding = false } = props;
     const { userStore } = useStore();
     const loading = useObserver(() => userStore.loading);
     const users = useObserver(() => userStore.list);
@@ -55,7 +56,7 @@ function UserList(props: Props) {
                     <div className="grid grid-cols-12 p-3 border-b font-medium">
                         <div className="col-span-5">Name</div>
                         <div className="col-span-3">Role</div>
-                        <div className="col-span-2">Created On</div>
+                        {!isOnboarding && <div className="col-span-2">Created On</div> }
                         <div className="col-span-2"></div>
                     </div>
 
@@ -67,6 +68,7 @@ function UserList(props: Props) {
                                 generateInvite={() => userStore.generateInviteCode(user.userId)}
                                 copyInviteCode={() => userStore.copyInviteCode(user.userId)}
                                 isEnterprise={isEnterprise}
+                                isOnboarding={isOnboarding}
                             />
                         </div>
                     ))}
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index 8628f029f..d7b7d0d55 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Icon, Popup } from 'UI';
 import { checkForRecent } from 'App/date';
-
+import cn from 'classnames';
 
 const AdminPrivilegeLabel = ({ user }) => {
     return (
@@ -13,6 +13,7 @@ const AdminPrivilegeLabel = ({ user }) => {
     )
 }
 interface Props {
+    isOnboarding?: boolean;
     user: any;
     editHandler?: any;
     generateInvite?: any;
@@ -26,6 +27,7 @@ function UserListItem(props: Props) {
         generateInvite = () => {},
         copyInviteCode = () => {},
         isEnterprise = false,
+        isOnboarding = false
     } = props;
     return (
         <div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group">
@@ -41,11 +43,13 @@ function UserListItem(props: Props) {
                     </span>
                 )}
             </div>
-            <div className="col-span-2">
-                <span>{user.createdAt && checkForRecent(user.createdAt, 'LLL dd, yyyy, hh:mm a')}</span>
-            </div>
+            {!isOnboarding && (
+                <div className="col-span-2">
+                    <span>{user.createdAt && checkForRecent(user.createdAt, 'LLL dd, yyyy, hh:mm a')}</span>
+                </div>
+            )}
 
-            <div className="col-span-2 justify-self-end invisible group-hover:visible">
+            <div className={cn("justify-self-end invisible group-hover:visible", { 'col-span-2' : !isOnboarding, 'col-span-4' : isOnboarding})}>
                 <div className="grid grid-cols-2 gap-3 items-center justify-end">
                     <div>
                         {!user.isJoined && user.invitationLink && !user.isExpiredInvite && (
diff --git a/frontend/app/components/Onboarding/components/ManageUsersTab/ManageUsersTab.js b/frontend/app/components/Onboarding/components/ManageUsersTab/ManageUsersTab.js
index c4d414395..1f4763247 100644
--- a/frontend/app/components/Onboarding/components/ManageUsersTab/ManageUsersTab.js
+++ b/frontend/app/components/Onboarding/components/ManageUsersTab/ManageUsersTab.js
@@ -1,5 +1,5 @@
+import UsersView from 'App/components/Client/Users/UsersView'
 import React from 'react' 
-import ManageUsers from '../../../Client/ManageUsers'
 
 export default function ManageUsersTab() {
   return (
@@ -9,9 +9,8 @@ export default function ManageUsersTab() {
           <span>👨‍💻</span>
           <div className="ml-3">Invite Collaborators</div>
         </h1>
-        
-        <ManageUsers hideHeader />
-      
+
+        <UsersView isOnboarding={true} />      
       </div>
       <div className="w-4/12 py-6">
         <div className="p-5 bg-gray-lightest mb-4 rounded">
diff --git a/frontend/app/components/Session_/Inspector/index.js b/frontend/app/components/Session_/Inspector/index.js
index e3fda7096..f76834fee 100644
--- a/frontend/app/components/Session_/Inspector/index.js
+++ b/frontend/app/components/Session_/Inspector/index.js
@@ -38,9 +38,7 @@ export default function Inspector () {
     const onKeyPress = e => {
       if (e.key === 'Backspace' || e.key === 'Delete') {
         const elem = selectedElementRef.current;
-        console.log(elem)
         if (elem !== null && elem.parentElement !== null) {
-          console.log('a?')
           elem.parentElement.removeChild(elem);
           setSelectedElement(null);
         }
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index 828715499..3acdb4c11 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -95,7 +95,6 @@ export default class Timeline extends React.PureComponent {
     const { endTime } = this.props;
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const time = Math.max(Math.round(p * endTime), 0);
-    console.log(p, time, e, endTime)
     this.props.jump(time);
   }
 
diff --git a/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx b/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
index 76f752f70..c9629bf7a 100644
--- a/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
+++ b/frontend/app/components/shared/CodeSnippet/CodeSnippet.tsx
@@ -21,7 +21,6 @@ interface Props {
 }
 function CodeSnippet(props: Props) {
     const { host, projectKey, ingestPoint, defaultInputMode, obscureTextNumbers, obscureTextEmails } = props;
-    console.log('defaultInputMode', defaultInputMode)
     const codeSnippet = `<!-- OpenReplay Tracking Code for ${host} -->
 <script>
   var initOpts = {
diff --git a/frontend/app/duck/assignments.js b/frontend/app/duck/assignments.js
index ed6b9834a..0892df161 100644
--- a/frontend/app/duck/assignments.js
+++ b/frontend/app/duck/assignments.js
@@ -41,7 +41,6 @@ const reducer = (state = initialState, action = {}) => {
     case EDIT:
       return state.mergeIn([ 'instance' ], action.instance);
     case FETCH_PROJECTS.SUCCESS:
-      console.log('data', action.data)
       return state.set('projects', List(action.data)).set('projectsFetched', true);
     case FETCH_ASSIGNMENTS.SUCCESS:
       return state.set('list', List(action.data).map(Assignment));
diff --git a/frontend/app/mstore/funnelStore.ts b/frontend/app/mstore/funnelStore.ts
index d727661ea..f0a9d5384 100644
--- a/frontend/app/mstore/funnelStore.ts
+++ b/frontend/app/mstore/funnelStore.ts
@@ -134,7 +134,6 @@ export default class FunnelStore {
                 .then(response => {
                     this.issueInstance = new FunnelIssue().fromJSON(response.issue)
                     this.issueInstance.sessions = response.sessions.sessions.map(i => new Session().fromJson(i))
-                    console.log('response.sessions', response.sessions);
                     resolve(this.issueInstance)
                 }).catch(error => {
                     reject(error)