feat: use onboarding status to conditionally show badge and message (#8304)

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -193,6 +193,15 @@ export const PersonalDashboard = () => {
 
     const noProjects = projects.length === 0;
 
+    const setupIncomplete =
+        personalDashboardProjectDetails?.onboardingStatus.status ===
+            'onboarding-started' ||
+        personalDashboardProjectDetails?.onboardingStatus.status ===
+            'first-flag-created';
+    const onboarded =
+        personalDashboardProjectDetails?.onboardingStatus.status ===
+        'onboarded';
+
     return (
         <div>
             <Typography component='h2' variant='h2'>
@@ -200,16 +209,22 @@ export const PersonalDashboard = () => {
             </Typography>
             <ScreenExplanation>
                 <p>
-                    Here are some tasks we think would be useful in order to get
+                    {onboarded
-                    the most out of Unleash
+                        ? 'We have gathered projects and flags you have favorited or owned'
+                        : null}
+                    {setupIncomplete
+                        ? 'Here are some tasks we think would be useful in order to get the most out of Unleash'
+                        : null}
                 </p>
-                <IconButton
+                {setupIncomplete ? (
-                    size={'small'}
+                    <IconButton
-                    title='Key concepts'
+                        size={'small'}
-                    onClick={() => setWelcomeDialog('open')}
+                        title='Key concepts'
-                >
+                        onClick={() => setWelcomeDialog('open')}
-                    <HelpOutline />
+                    >
-                </IconButton>
+                        <HelpOutline />
+                    </IconButton>
+                ) : null}
             </ScreenExplanation>
 
             {noProjects ? (
@@ -235,7 +250,9 @@ export const PersonalDashboard = () => {
                         md={1}
                         sx={{ display: 'flex', justifyContent: 'flex-end' }}
                     >
-                        <Badge color='warning'>Setup incomplete</Badge>
+                        {setupIncomplete ? (
+                            <Badge color='warning'>Setup incomplete</Badge>
+                        ) : null}
                     </SpacedGridItem>
                     <SpacedGridItem item lg={4} md={1}>
                         <List
@@ -301,8 +318,7 @@ export const PersonalDashboard = () => {
                                 }
                             />
                         ) : null}
-                        {stage === 'onboarding-started' ||
+                        {setupIncomplete ? (
-                        stage === 'first-flag-created' ? (
                             <ConnectSDK project={activeProject} />
                         ) : null}
                     </SpacedGridItem>

frontend/src/openapi/models/index.ts

@@ -905,6 +905,11 @@ export * from './patsSchema';
 export * from './permissionSchema';
 export * from './personalDashboardProjectDetailsSchema';
 export * from './personalDashboardProjectDetailsSchemaLatestEventsItem';
+export * from './personalDashboardProjectDetailsSchemaOnboardingStatus';
+export * from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOf';
+export * from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus';
+export * from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree';
+export * from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus';
 export * from './personalDashboardProjectDetailsSchemaOwners';
 export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItem';
 export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf';
@@ -916,7 +921,10 @@ export * from './personalDashboardProjectDetailsSchemaOwnersOneOfSixItemOwnerTyp
 export * from './personalDashboardProjectDetailsSchemaRolesItem';
 export * from './personalDashboardProjectDetailsSchemaRolesItemType';
 export * from './personalDashboardSchema';
+export * from './personalDashboardSchemaAdminsItem';
 export * from './personalDashboardSchemaFlagsItem';
+export * from './personalDashboardSchemaProjectOwnersItem';
+export * from './personalDashboardSchemaProjectOwnersItemOwnerType';
 export * from './personalDashboardSchemaProjectsItem';
 export * from './playgroundConstraintSchema';
 export * from './playgroundConstraintSchemaOperator';

frontend/src/openapi/models/personalDashboardProjectDetailsSchema.ts

@@ -4,9 +4,9 @@
  * See `gen:api` script in package.json
  */
 import type { PersonalDashboardProjectDetailsSchemaLatestEventsItem } from './personalDashboardProjectDetailsSchemaLatestEventsItem';
+import type { PersonalDashboardProjectDetailsSchemaOnboardingStatus } from './personalDashboardProjectDetailsSchemaOnboardingStatus';
 import type { PersonalDashboardProjectDetailsSchemaOwners } from './personalDashboardProjectDetailsSchemaOwners';
 import type { PersonalDashboardProjectDetailsSchemaRolesItem } from './personalDashboardProjectDetailsSchemaRolesItem';
-import type { ProjectOverviewSchemaOnboardingStatus } from './projectOverviewSchemaOnboardingStatus';
 
 /**
  * Project details in personal dashboard
@@ -14,6 +14,8 @@ import type { ProjectOverviewSchemaOnboardingStatus } from './projectOverviewSch
 export interface PersonalDashboardProjectDetailsSchema {
     /** The latest events for the project. */
     latestEvents: PersonalDashboardProjectDetailsSchemaLatestEventsItem[];
+    /** The current onboarding status of the project. */
+    onboardingStatus: PersonalDashboardProjectDetailsSchemaOnboardingStatus;
     /** The users and/or groups that have the "owner" role in this project. If no such users or groups exist, the list will contain the "system" owner instead. */
     owners: PersonalDashboardProjectDetailsSchemaOwners;
     /**
@@ -21,5 +23,4 @@ export interface PersonalDashboardProjectDetailsSchema {
      * @minItems 1
      */
     roles: PersonalDashboardProjectDetailsSchemaRolesItem[];
-    onboardingStatus: ProjectOverviewSchemaOnboardingStatus;
 }

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts

@@ -10,11 +10,16 @@
 export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
     /** Which user created this event */
     createdBy: string;
+    /** URL used for the user profile image of the event author */
+    createdByImageUrl: string;
+    /**
+     * The ID of the event.
+     * @minimum 1
+     */
+    id: number;
     /**
      * **[Experimental]** A markdown-formatted summary of the event.
      * @nullable
      */
     summary: string | null;
-    id: number;
-    createdByImageUrl: string;
 };

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOnboardingStatus.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOf } from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOf';
+import type { PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree } from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree';
+
+/**
+ * The current onboarding status of the project.
+ */
+export type PersonalDashboardProjectDetailsSchemaOnboardingStatus =
+    | PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOf
+    | PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree;

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOnboardingStatusOneOf.ts

@@ -0,0 +1,10 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus } from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus';
+
+export type PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOf = {
+    status: PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus;
+};

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus =
+    (typeof PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus)[keyof typeof PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfStatus =
+    {
+        'onboarding-started': 'onboarding-started',
+        onboarded: 'onboarded',
+    } as const;

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree.ts

@@ -0,0 +1,12 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus } from './personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus';
+
+export type PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThree = {
+    /** The name of the feature flag */
+    feature: string;
+    status: PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus;
+};

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus =
+    (typeof PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus)[keyof typeof PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PersonalDashboardProjectDetailsSchemaOnboardingStatusOneOfThreeStatus =
+    {
+        'first-flag-created': 'first-flag-created',
+    } as const;

frontend/src/openapi/models/personalDashboardSchema.ts

@@ -3,15 +3,21 @@
  * Do not edit manually.
  * See `gen:api` script in package.json
  */
+import type { PersonalDashboardSchemaAdminsItem } from './personalDashboardSchemaAdminsItem';
 import type { PersonalDashboardSchemaFlagsItem } from './personalDashboardSchemaFlagsItem';
+import type { PersonalDashboardSchemaProjectOwnersItem } from './personalDashboardSchemaProjectOwnersItem';
 import type { PersonalDashboardSchemaProjectsItem } from './personalDashboardSchemaProjectsItem';
 
 /**
  * Project and flags relevant to the user
  */
 export interface PersonalDashboardSchema {
+    /** Users with the admin role in Unleash. */
+    admins?: PersonalDashboardSchemaAdminsItem[];
     /** A list of flags a user created or favorited */
     flags: PersonalDashboardSchemaFlagsItem[];
+    /** Users with the project owner role in Unleash. Only contains owners of projects that are visible to the user. */
+    projectOwners?: PersonalDashboardSchemaProjectOwnersItem[];
     /** A list of projects that a user participates in with any role e.g. member or owner or any custom role */
     projects: PersonalDashboardSchemaProjectsItem[];
 }

frontend/src/openapi/models/personalDashboardSchemaAdminsItem.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type PersonalDashboardSchemaAdminsItem = {
+    /** @nullable */
+    email?: string | null;
+    /** The user ID. */
+    id: number;
+    /** @nullable */
+    imageUrl?: string | null;
+    /** The user's name. */
+    name?: string;
+    /** The user's username. */
+    username?: string;
+};

frontend/src/openapi/models/personalDashboardSchemaProjectOwnersItem.ts

@@ -0,0 +1,23 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardSchemaProjectOwnersItemOwnerType } from './personalDashboardSchemaProjectOwnersItemOwnerType';
+
+export type PersonalDashboardSchemaProjectOwnersItem = {
+    /**
+     * The user's email address.
+     * @nullable
+     */
+    email?: string | null;
+    /**
+     * The URL of the user's profile image.
+     * @nullable
+     */
+    imageUrl?: string | null;
+    /** The name displayed for the user. Can be the user's name, username, or email, depending on what they have provided. */
+    name: string;
+    /** The type of the owner; will always be `user`. */
+    ownerType: PersonalDashboardSchemaProjectOwnersItemOwnerType;
+};

frontend/src/openapi/models/personalDashboardSchemaProjectOwnersItemOwnerType.ts

@@ -0,0 +1,16 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * The type of the owner; will always be `user`.
+ */
+export type PersonalDashboardSchemaProjectOwnersItemOwnerType =
+    (typeof PersonalDashboardSchemaProjectOwnersItemOwnerType)[keyof typeof PersonalDashboardSchemaProjectOwnersItemOwnerType];
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PersonalDashboardSchemaProjectOwnersItemOwnerType = {
+    user: 'user',
+} as const;

src/lib/openapi/spec/personal-dashboard-project-details-schema.ts

@@ -17,7 +17,7 @@ export const personalDashboardProjectDetailsSchema = {
                 type: 'object',
                 description: 'An event summary',
                 additionalProperties: false,
-                required: ['summary', 'createdBy'],
+                required: ['summary', 'createdBy', 'createdByImageUrl', 'id'],
                 properties: {
                     id: {
                         type: 'integer',