feat: hook up admin / owner data to UI (#8300)

This PR hooks up the owners and admins of Unleash to the UI. They'll
only be visible in cases where you have no projects.

In addition, it adds Orval schemas for the new payload properties and
updates the generating schemas to fix some minor typing issues.

frontend/src/component/personalDashboard/ContentGridNoProjects.tsx

@@ -1,7 +1,8 @@
 import { Grid, Typography, styled } from '@mui/material';
 import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
-import type { ProjectSchemaOwners } from 'openapi';
+import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
+import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
 import { Link } from 'react-router-dom';
 
 const ContentGrid = styled(Grid)(({ theme }) => ({
@@ -61,8 +62,8 @@ const AdminListItem = styled('li')(({ theme }) => ({
 }));
 
 type Props = {
-    owners: ProjectSchemaOwners;
+    owners: PersonalDashboardSchemaProjectOwnersItem[];
-    admins: { name: string; imageUrl?: string }[];
+    admins: PersonalDashboardSchemaAdminsItem[];
 };
 
 export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
@@ -97,23 +98,37 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                         Contact Unleash admin
                     </TitleContainer>
                     <BoxMainContent>
-                        <p>
+                        {admins.length ? (
-                            Your Unleash administrator
+                            <>
-                            {admins.length > 1 ? 's are' : ' is'}:
+                                <p>
-                        </p>
+                                    Your Unleash administrator
-                        <AdminList>
+                                    {admins.length > 1 ? 's are' : ' is'}:
-                            {admins.map((admin) => (
+                                </p>
-                                <AdminListItem key={admin.name}>
+                                <AdminList>
-                                    <UserAvatar
+                                    {admins.map((admin) => {
-                                        sx={{
+                                        return (
-                                            margin: 0,
+                                            <AdminListItem key={admin.id}>
-                                        }}
+                                                <UserAvatar
-                                        user={admin}
+                                                    sx={{
-                                    />
+                                                        margin: 0,
-                                    <Typography>{admin.name}</Typography>
+                                                    }}
-                                </AdminListItem>
+                                                    user={admin}
-                            ))}
+                                                />
-                        </AdminList>
+                                                <Typography>
+                                                    {admin.name ||
+                                                        admin.username ||
+                                                        admin.email}
+                                                </Typography>
+                                            </AdminListItem>
+                                        );
+                                    })}
+                                </AdminList>
+                            </>
+                        ) : (
+                            <p>
+                                You have no Unleash administrators to contact.
+                            </p>
+                        )}
                     </BoxMainContent>
                 </GridContent>
             </SpacedGridItem>
@@ -124,8 +139,20 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                         Ask a project owner to add you to their project
                     </TitleContainer>
                     <BoxMainContent>
-                        <p>Project owners in Unleash:</p>
+                        {owners.length ? (
-                        <AvatarGroupFromOwners users={owners} avatarLimit={9} />
+                            <>
+                                <p>Project owners in Unleash:</p>
+                                <AvatarGroupFromOwners
+                                    users={owners}
+                                    avatarLimit={9}
+                                />
+                            </>
+                        ) : (
+                            <p>
+                                There are no project owners in Unleash to ask
+                                for access.
+                            </p>
+                        )}
                     </BoxMainContent>
                 </GridContent>
             </SpacedGridItem>

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -227,17 +227,10 @@ export const PersonalDashboard = () => {
                 ) : null}
             </ScreenExplanation>
 
-            {noProjects ? (
+            {noProjects && personalDashboard ? (
                 <ContentGridNoProjects
-                    owners={[{ ownerType: 'system' }]}
+                    owners={personalDashboard.projectOwners}
-                    admins={[
+                    admins={personalDashboard.admins}
-                        { name: 'admin' },
-                        {
-                            name: 'Christopher Tompkins',
-                            imageUrl:
-                                'https://avatars.githubusercontent.com/u/1010371?v=4',
-                        },
-                    ]}
                 />
             ) : (
                 <ContentGrid container columns={{ lg: 12, md: 1 }}>

frontend/src/openapi/models/personalDashboardSchema.ts

@@ -13,11 +13,11 @@ import type { PersonalDashboardSchemaProjectsItem } from './personalDashboardSch
  */
 export interface PersonalDashboardSchema {
     /** Users with the admin role in Unleash. */
-    admins?: PersonalDashboardSchemaAdminsItem[];
+    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[];
+    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

@@ -6,11 +6,11 @@
 
 export type PersonalDashboardSchemaAdminsItem = {
     /** @nullable */
-    email?: string | null;
+    email?: string;
     /** The user ID. */
     id: number;
     /** @nullable */
-    imageUrl?: string | null;
+    imageUrl?: string;
     /** The user's name. */
     name?: string;
     /** The user's username. */

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

@@ -5,7 +5,7 @@ export const personalDashboardSchema = {
     type: 'object',
     description: 'Project and flags relevant to the user',
     additionalProperties: false,
-    required: ['projects', 'flags'],
+    required: ['projects', 'flags', 'admins', 'projectOwners'],
     properties: {
         admins: {
             type: 'array',
@@ -31,12 +31,10 @@ export const personalDashboardSchema = {
                     },
                     imageUrl: {
                         type: 'string',
-                        nullable: true,
                         example: 'https://example.com/peek-at-you.jpg',
                     },
                     email: {
                         type: 'string',
-                        nullable: true,
                         example: 'user@example.com',
                     },
                 },