perf: query projected milestones for onboarding view (#6760)

* feat: support list milestones api

* show milestones in onboarding view

* add authenticated milestone

* add icon to login milestone

* update main

* lint

* fix import

* fix import

* lint

* reuse proto milestone type mapping
This commit is contained in:
Elio Bischof
2023-10-25 11:16:34 +00:00
committed by GitHub
parent 73dbf31368
commit 1c839e308b
27 changed files with 445 additions and 180 deletions
+2
View File
@@ -25,6 +25,8 @@ export const COLORS = [
{ 500: '#d946ef', 200: '#f5d0fe', 300: '#f0abfc', 600: '#c026d3', 700: '#a21caf', 900: '#701a75' },
{ 500: '#ec4899', 200: '#fbcfe8', 300: '#f9a8d4', 600: '#db2777', 700: '#be185d', 900: '#831843' },
{ 500: '#f43f5e', 200: '#fecdd3', 300: '#fda4af', 600: '#e11d48', 700: '#be123c', 900: '#881337' },
{ 500: '#A89F91', 200: '#D4CDC6', 300: '#BFB6AC', 600: '#8F8378', 700: '#736A60', 900: '#4F4A40' },
{ 500: '#BA9F88', 200: '#E8D3C5', 300: '#D4BAA7', 600: '#9C7A68', 700: '#8A6E5D', 900: '#5F4C42' },
];
export const WEB_APP_COLOR: Color = COLORS[6];
+34 -34
View File
@@ -1,5 +1,6 @@
import { OnboardingActions } from '../services/admin.service';
import { COLORS } from './color';
import { MilestoneType } from '../proto/generated/zitadel/milestone/v1/milestone_pb';
const reddark: string = COLORS[0][700];
const redlight = COLORS[0][200];
@@ -19,67 +20,66 @@ const purplelight = COLORS[12][200];
const pinkdark: string = COLORS[15][700];
const pinklight = COLORS[15][200];
export const ONBOARDING_EVENTS: OnboardingActions[] = [
const sthdark: string = COLORS[18][700];
const sthlight = COLORS[18][200];
export const ONBOARDING_MILESTONES: OnboardingActions[] = [
{
order: 0,
eventType: 'project.added',
oneof: ['project.added'],
link: ['/projects/create'],
milestoneType: MilestoneType.MILESTONE_TYPE_PROJECT_CREATED,
link: '/projects/create',
iconClasses: 'las la-database',
darkcolor: greendark,
lightcolor: greenlight,
aggregateType: 'project',
},
{
order: 1,
eventType: 'project.application.added',
oneof: ['project.application.added'],
link: ['/projects/app-create'],
milestoneType: MilestoneType.MILESTONE_TYPE_APPLICATION_CREATED,
link: '/projects/app-create',
iconClasses: 'lab la-openid',
darkcolor: purpledark,
lightcolor: purplelight,
aggregateType: 'project',
},
{
order: 2,
eventType: 'user.human.added',
oneof: ['user.human.added'],
link: ['/users/create'],
iconClasses: 'las la-user',
darkcolor: bluedark,
lightcolor: bluelight,
aggregateType: 'user',
},
{
order: 3,
eventType: 'user.grant.added',
oneof: ['user.grant.added'],
link: ['/grant-create'],
milestoneType: MilestoneType.MILESTONE_TYPE_AUTHENTICATION_SUCCEEDED_ON_APPLICATION,
link: 'https://zitadel.com/docs/guides/integrate/login-users',
iconClasses: 'las la-sign-in-alt',
darkcolor: sthdark,
lightcolor: sthlight,
} /*
{
order: 4,
milestoneType: 'user.human.added',
link: '/users/create',
iconClasses: 'las la-user',
darkcolor: bluedark,
lightcolor: bluelight,
},
{
order: 5,
milestoneType: 'user.grant.added',
link: '/grant-create',
iconClasses: 'las la-shield-alt',
darkcolor: reddark,
lightcolor: redlight,
aggregateType: 'user_grant',
},
{
order: 4,
eventType: 'instance.policy.label.added',
oneof: ['instance.policy.label.added', 'instance.policy.label.changed'],
link: ['/settings'],
order: 6,
milestoneType: 'instance.policy.label.added',
link: '/settings',
fragment: 'branding',
iconClasses: 'las la-swatchbook',
darkcolor: pinkdark,
lightcolor: pinklight,
aggregateType: 'instance',
},
{
order: 5,
eventType: 'instance.smtp.config.added',
oneof: ['instance.smtp.config.added', 'instance.smtp.config.changed'],
link: ['/settings'],
order: 7,
milestoneType: 'instance.smtp.config.added',
link: '/settings',
fragment: 'smtpprovider',
iconClasses: 'las la-envelope',
darkcolor: yellowdark,
lightcolor: yellowlight,
aggregateType: 'instance',
},
},*/,
];