feat: handle redirection after onboarding

frontend/public/locales/en/titles.json

@@ -4,7 +4,7 @@
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
 	"GET_STARTED": "SigNoz | Get Started",
-	"GET_STARTED_V2": "SigNoz | Get Started",
+	"ONBOARDING": "SigNoz | Get Started",
 	"GET_STARTED_APPLICATION_MONITORING": "SigNoz | Get Started | APM",
 	"GET_STARTED_LOGS_MANAGEMENT": "SigNoz | Get Started | Logs",
 	"GET_STARTED_INFRASTRUCTURE_MONITORING": "SigNoz | Get Started | Infrastructure",

frontend/src/AppRoutes/routes.ts

@@ -70,11 +70,11 @@ const routes: AppRoutes[] = [
 		key: 'GET_STARTED',
 	},
 	{
-		path: ROUTES.GET_STARTED_V2,
+		path: ROUTES.ONBOARDING,
 		exact: false,
 		component: OnboardingV2,
 		isPrivate: true,
-		key: 'GET_STARTED_V2',
+		key: 'ONBOARDING',
 	},
 	{
 		component: LogsIndexToFields,

frontend/src/constants/routes.ts

@@ -8,7 +8,7 @@ const ROUTES = {
 	TRACE_DETAIL: '/trace/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	GET_STARTED: '/get-started',
-	GET_STARTED_V2: '/get-started-v2',
+	ONBOARDING: '/onboarding',
 	GET_STARTED_APPLICATION_MONITORING: '/get-started/application-monitoring',
 	GET_STARTED_LOGS_MANAGEMENT: '/get-started/logs-management',
 	GET_STARTED_INFRASTRUCTURE_MONITORING:

frontend/src/container/AppLayout/index.tsx

@@ -191,7 +191,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const pageTitle = t(routeKey);
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED ||
-		pathname === ROUTES.GET_STARTED_V2 ||
+		pathname === ROUTES.ONBOARDING ||
 		pathname === ROUTES.WORKSPACE_LOCKED ||
 		pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING ||
 		pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING ||

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss

@@ -7,19 +7,24 @@
 
 		.ant-select-selector {
 			border: 1px solid #1d212d;
-			border-top-right-radius: 0px;
+			border-top-left-radius: 0px;
-			border-bottom-right-radius: 0px;
+			border-bottom-left-radius: 0px;
-
-			border-right: none;
 		}
 	}
 
 	.team-member-email-input {
 		width: 80%;
+		background-color: #121317;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
 
-		border: 1px solid #1d212d;
+		.ant-input,
-		border-top-left-radius: 0px;
+		.ant-input-group-addon {
-		border-bottom-left-radius: 0px;
+			background-color: #121317 !important;
+			border-right: 0px;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
 	}
 }
 

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -11,6 +11,7 @@ import {
 	CheckCircle,
 	Plus,
 	TriangleAlert,
+	X,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
@@ -75,6 +76,10 @@ function InviteTeamMembers({
 		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
 	};
 
+	const handleRemoveTeamMember = (id: string): void => {
+		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
+	};
+
 	// Validation function to check all users
 	const validateAllUsers = (): boolean => {
 		let isValid = true;
@@ -174,7 +179,7 @@ function InviteTeamMembers({
 			</Typography.Paragraph>
 
 			<div className="questions-form-container">
-				<div className="questions-form">
+				<div className="questions-form invite-team-members-form">
 					<div className="form-group">
 						<div className="question-label">
 							Collaborate with your team
@@ -186,15 +191,6 @@ function InviteTeamMembers({
 						<div className="invite-team-members-container">
 							{teamMembersToInvite?.map((member) => (
 								<div className="team-member-container" key={member.id}>
-									<Select
-										defaultValue={member.role}
-										onChange={(value): void => handleRoleChange(value, member)}
-										className="team-member-role-select"
-									>
-										<Select.Option value="VIEWER">Viewer</Select.Option>
-										<Select.Option value="EDITOR">Editor</Select.Option>
-										<Select.Option value="ADMIN">Admin</Select.Option>
-									</Select>
 									<Input
 										placeholder="your-teammate@org.com"
 										value={member.email}
@@ -217,6 +213,24 @@ function InviteTeamMembers({
 											)
 										}
 									/>
+									<Select
+										defaultValue={member.role}
+										onChange={(value): void => handleRoleChange(value, member)}
+										className="team-member-role-select"
+									>
+										<Select.Option value="VIEWER">Viewer</Select.Option>
+										<Select.Option value="EDITOR">Editor</Select.Option>
+										<Select.Option value="ADMIN">Admin</Select.Option>
+									</Select>
+
+									{teamMembersToInvite?.length > 1 && (
+										<Button
+											type="primary"
+											className="remove-team-member-button"
+											icon={<X size={14} />}
+											onClick={(): void => handleRemoveTeamMember(member.id)}
+										/>
+									)}
 								</div>
 							))}
 						</div>

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -83,6 +83,31 @@
 					}
 				}
 			}
+
+			&.invite-team-members-form {
+				min-height: calc(420px - 24px);
+				max-height: calc(420px - 24px);
+
+				.invite-team-members-container {
+					max-height: 260px;
+					padding-right: 8px;
+					overflow-y: auto;
+
+					&::-webkit-scrollbar {
+						width: 0.1rem;
+					}
+					&::-webkit-scrollbar-corner {
+						background: transparent;
+					}
+					&::-webkit-scrollbar-thumb {
+						background: rgb(136, 136, 136);
+						border-radius: 0.625rem;
+					}
+					&::-webkit-scrollbar-track {
+						background: transparent;
+					}
+				}
+			}
 		}
 
 		.invite-team-members-container {
@@ -173,6 +198,10 @@
 			font-style: normal;
 			font-weight: 500;
 			line-height: 20px;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
 		}
 
 		input[type='text'] {
@@ -237,7 +266,8 @@
 		}
 
 		.onboarding-questionaire-button,
-		.add-another-member-button {
+		.add-another-member-button,
+		.remove-team-member-button {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
@@ -270,11 +300,27 @@
 			}
 		}
 
-		.add-another-member-button {
+		.add-another-member-button,
+		.remove-team-member-button {
 			font-size: 12px;
 			height: 32px;
 		}
 
+		.remove-team-member-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			border: 1px solid #1d212d;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+			background-color: #121317;
+
+			border-left: 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+
 		.onboarding-questionaire-other-input {
 			.ant-input-group {
 				.ant-input {

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -3,6 +3,7 @@ import './OnboardingQuestionaire.styles.scss';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import updateProfileAPI from 'api/onboarding/updateProfile';
 import editOrg from 'api/user/editOrg';
+import getOrgUser from 'api/user/getOrgUser';
 import { AxiosError } from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import ROUTES from 'constants/routes';
@@ -11,7 +12,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { Dispatch, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
@@ -78,6 +79,17 @@ function OnboardingQuestionaire(): JSX.Element {
 
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	const { data: orgUsers, isLoading: isLoadingOrgUsers } = useQuery({
+		queryFn: () =>
+			getOrgUser({
+				orgId: (org || [])[0].id,
+			}),
+		queryKey: ['getOrgUser', org?.[0].id],
+	});
+
+	console.log('orgUsers', orgUsers, isLoadingOrgUsers);
+
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [orgData, setOrgData] = useState<OrgData | null>(null);
 
@@ -188,7 +200,7 @@ function OnboardingQuestionaire(): JSX.Element {
 	};
 
 	const handleOnboardingComplete = (): void => {
-		history.push(ROUTES.APPLICATION);
+		history.push(ROUTES.GET_STARTED);
 	};
 
 	return (

frontend/src/container/SideNav/config.ts

@@ -27,7 +27,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.ERROR_DETAIL]: [QueryParams.resourceAttributes],
 	[ROUTES.HOME_PAGE]: [QueryParams.resourceAttributes],
 	[ROUTES.GET_STARTED]: [QueryParams.resourceAttributes],
-	[ROUTES.GET_STARTED_V2]: [QueryParams.resourceAttributes],
+	[ROUTES.ONBOARDING]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGIN]: [QueryParams.resourceAttributes],

frontend/src/container/SideNav/menuItems.tsx

@@ -29,12 +29,6 @@ export const getStartedMenuItem = {
 	icon: <RocketOutlined rotate={45} />,
 };
 
-export const getStartedV2MenuItem = {
-	key: ROUTES.GET_STARTED_V2,
-	label: 'Get Started V2',
-	icon: <RocketOutlined rotate={45} />,
-};
-
 export const inviteMemberMenuItem = {
 	key: `${ROUTES.ORG_SETTINGS}#invite-team-members`,
 	label: 'Invite Team Member',
@@ -72,11 +66,6 @@ export const trySignozCloudMenuItem: SidebarItem = {
 };
 
 const menuItems: SidebarItem[] = [
-	{
-		key: ROUTES.GET_STARTED_V2,
-		label: 'Get Started V2',
-		icon: <RocketOutlined size={16} />,
-	},
 	{
 		key: ROUTES.APPLICATION,
 		label: 'Services',

frontend/src/container/TopNav/Breadcrumbs/index.tsx

@@ -9,7 +9,6 @@ const breadcrumbNameMap: Record<string, string> = {
 	[ROUTES.SERVICE_MAP]: 'Service Map',
 	[ROUTES.USAGE_EXPLORER]: 'Usage Explorer',
 	[ROUTES.GET_STARTED]: 'Get Started',
-	[ROUTES.GET_STARTED_V2]: 'Get Started V2',
 	[ROUTES.ALL_CHANNELS]: 'Channels',
 	[ROUTES.SETTINGS]: 'Settings',
 	[ROUTES.DASHBOARD]: 'Dashboard',

frontend/src/utils/permission/index.ts

@@ -86,7 +86,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	LOGS_PIPELINES: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED: ['ADMIN', 'EDITOR', 'VIEWER'],
-	GET_STARTED_V2: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ONBOARDING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED_APPLICATION_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED_INFRASTRUCTURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED_LOGS_MANAGEMENT: ['ADMIN', 'EDITOR', 'VIEWER'],