From abc2ec2155d36658d2a75082bf5c479c984c8e1e Mon Sep 17 00:00:00 2001 From: Yunus M Date: Wed, 23 Oct 2024 23:06:28 +0530 Subject: [PATCH] feat: handle redirection after onboarding --- frontend/public/locales/en/titles.json | 2 +- frontend/src/AppRoutes/routes.ts | 4 +- frontend/src/constants/routes.ts | 2 +- frontend/src/container/AppLayout/index.tsx | 2 +- .../InviteTeamMembers.styles.scss | 19 ++++--- .../InviteTeamMembers/InviteTeamMembers.tsx | 34 +++++++++---- .../OnboardingQuestionaire.styles.scss | 50 ++++++++++++++++++- .../OnboardingQuestionaire/index.tsx | 16 +++++- frontend/src/container/SideNav/config.ts | 2 +- frontend/src/container/SideNav/menuItems.tsx | 11 ---- .../container/TopNav/Breadcrumbs/index.tsx | 1 - frontend/src/utils/permission/index.ts | 2 +- 12 files changed, 105 insertions(+), 40 deletions(-) diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json index aa59005c3f..4d3e899d76 100644 --- a/frontend/public/locales/en/titles.json +++ b/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", diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index fc59fef1e3..1901095a67 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/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, diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 50d189f4a8..3c17336889 100644 --- a/frontend/src/constants/routes.ts +++ b/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: diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index 898481e2a5..700914cc6a 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/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 || diff --git a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss index 263e1d4e80..ae26562b3a 100644 --- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss +++ b/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-bottom-right-radius: 0px; - - border-right: none; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; } } .team-member-email-input { width: 80%; + background-color: #121317; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; - border: 1px solid #1d212d; - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; + .ant-input, + .ant-input-group-addon { + background-color: #121317 !important; + border-right: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + } } } diff --git a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx index e4d2a64bc7..4adfd92c6e 100644 --- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx +++ b/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({
-
+
Collaborate with your team @@ -186,15 +191,6 @@ function InviteTeamMembers({
{teamMembersToInvite?.map((member) => (
- + + + {teamMembersToInvite?.length > 1 && ( +
))}
diff --git a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss index 8be4dc608c..00b091d1d8 100644 --- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss +++ b/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 { diff --git a/frontend/src/container/OnboardingQuestionaire/index.tsx b/frontend/src/container/OnboardingQuestionaire/index.tsx index 974070b944..a5d1f83254 100644 --- a/frontend/src/container/OnboardingQuestionaire/index.tsx +++ b/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((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>(); const [orgData, setOrgData] = useState(null); @@ -188,7 +200,7 @@ function OnboardingQuestionaire(): JSX.Element { }; const handleOnboardingComplete = (): void => { - history.push(ROUTES.APPLICATION); + history.push(ROUTES.GET_STARTED); }; return ( diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts index 7b37f64bb7..7fdd462a52 100644 --- a/frontend/src/container/SideNav/config.ts +++ b/frontend/src/container/SideNav/config.ts @@ -27,7 +27,7 @@ export const routeConfig: Record = { [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], diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx index a1c41ddea8..6d24b74c53 100644 --- a/frontend/src/container/SideNav/menuItems.tsx +++ b/frontend/src/container/SideNav/menuItems.tsx @@ -29,12 +29,6 @@ export const getStartedMenuItem = { icon: , }; -export const getStartedV2MenuItem = { - key: ROUTES.GET_STARTED_V2, - label: 'Get Started V2', - icon: , -}; - 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: , - }, { key: ROUTES.APPLICATION, label: 'Services', diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx index c98f4d05e2..9efd50d2c3 100644 --- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx +++ b/frontend/src/container/TopNav/Breadcrumbs/index.tsx @@ -9,7 +9,6 @@ const breadcrumbNameMap: Record = { [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', diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts index 6052900a05..e58843232a 100644 --- a/frontend/src/utils/permission/index.ts +++ b/frontend/src/utils/permission/index.ts @@ -86,7 +86,7 @@ export const routePermission: Record = { 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'],