GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 04:39:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: handle redirection after onboarding

Browse Source
This commit is contained in:
Yunus M 2024-10-23 23:06:28 +05:30
parent 4dc5615d2f
commit abc2ec2155
12 changed files with 105 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/locales/en/titles.json
View File

@ -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",

4
frontend/src/AppRoutes/routes.ts
View File

@ -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,

2
frontend/src/constants/routes.ts
View File

@ -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:

2
frontend/src/container/AppLayout/index.tsx
View File

@ -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 ||

19
frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
View File

@ -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;
}
}
}

34
frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
View File

@ -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>

50
frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
View File

@ -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 {

16
frontend/src/container/OnboardingQuestionaire/index.tsx
View File

@ -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 (

2
frontend/src/container/SideNav/config.ts
View File

@ -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],

11
frontend/src/container/SideNav/menuItems.tsx
View File

@ -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',

1
frontend/src/container/TopNav/Breadcrumbs/index.tsx
View File

@ -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',

2
frontend/src/utils/permission/index.ts
View File

@ -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'],