From 50c5af863279ad2f088de8078fc32fe5b51521c3 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 30 Sep 2024 15:40:33 +0200
Subject: [PATCH] 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.
---
 .../ContentGridNoProjects.tsx                 | 71 +++++++++++++------
 .../personalDashboard/PersonalDashboard.tsx   | 13 +---
 .../openapi/models/personalDashboardSchema.ts |  4 +-
 .../personalDashboardSchemaAdminsItem.ts      |  4 +-
 .../openapi/spec/personal-dashboard-schema.ts |  4 +-
 5 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
index 75a5e90ba0..219f30b568 100644
--- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
+++ b/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;
-    admins: { name: string; imageUrl?: string }[];
+    owners: PersonalDashboardSchemaProjectOwnersItem[];
+    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>
-                            Your Unleash administrator
-                            {admins.length > 1 ? 's are' : ' is'}:
-                        </p>
-                        <AdminList>
-                            {admins.map((admin) => (
-                                <AdminListItem key={admin.name}>
-                                    <UserAvatar
-                                        sx={{
-                                            margin: 0,
-                                        }}
-                                        user={admin}
-                                    />
-                                    <Typography>{admin.name}</Typography>
-                                </AdminListItem>
-                            ))}
-                        </AdminList>
+                        {admins.length ? (
+                            <>
+                                <p>
+                                    Your Unleash administrator
+                                    {admins.length > 1 ? 's are' : ' is'}:
+                                </p>
+                                <AdminList>
+                                    {admins.map((admin) => {
+                                        return (
+                                            <AdminListItem key={admin.id}>
+                                                <UserAvatar
+                                                    sx={{
+                                                        margin: 0,
+                                                    }}
+                                                    user={admin}
+                                                />
+                                                <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>
-                        <AvatarGroupFromOwners users={owners} avatarLimit={9} />
+                        {owners.length ? (
+                            <>
+                                <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>
diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 353978538d..3fdde6e8d7 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -227,17 +227,10 @@ export const PersonalDashboard = () => {
                 ) : null}
             </ScreenExplanation>
 
-            {noProjects ? (
+            {noProjects && personalDashboard ? (
                 <ContentGridNoProjects
-                    owners={[{ ownerType: 'system' }]}
-                    admins={[
-                        { name: 'admin' },
-                        {
-                            name: 'Christopher Tompkins',
-                            imageUrl:
-                                'https://avatars.githubusercontent.com/u/1010371?v=4',
-                        },
-                    ]}
+                    owners={personalDashboard.projectOwners}
+                    admins={personalDashboard.admins}
                 />
             ) : (
                 <ContentGrid container columns={{ lg: 12, md: 1 }}>
diff --git a/frontend/src/openapi/models/personalDashboardSchema.ts b/frontend/src/openapi/models/personalDashboardSchema.ts
index ed2794402c..cb40488850 100644
--- a/frontend/src/openapi/models/personalDashboardSchema.ts
+++ b/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[];
 }
diff --git a/frontend/src/openapi/models/personalDashboardSchemaAdminsItem.ts b/frontend/src/openapi/models/personalDashboardSchemaAdminsItem.ts
index ad749bcaca..da0c317e9f 100644
--- a/frontend/src/openapi/models/personalDashboardSchemaAdminsItem.ts
+++ b/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. */
diff --git a/src/lib/openapi/spec/personal-dashboard-schema.ts b/src/lib/openapi/spec/personal-dashboard-schema.ts
index 7199cc7161..765750bc00 100644
--- a/src/lib/openapi/spec/personal-dashboard-schema.ts
+++ b/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',
                     },
                 },