feat: display basic list of project events (#8291)

frontend/src/component/personalDashboard/LatestProjectEvents.tsx

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
+import { Markdown } from '../common/Markdown/Markdown';
+
+export const LatestProjectEvents: FC<{
+    latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
+}> = ({ latestEvents }) => {
+    return (
+        <ul>
+            {latestEvents.map((event) => {
+                return (
+                    <li key={event.summary}>
+                        <Markdown>
+                            {event.summary ||
+                                'No preview available for this event'}
+                        </Markdown>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -29,6 +29,8 @@ import type {
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
 import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
 import { ContentGridNoProjects } from './ContentGridNoProjects';
+import { LatestProjectEvents } from './LatestProjectEvents';
+import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
 
 const ScreenExplanation = styled(Typography)(({ theme }) => ({
     marginTop: theme.spacing(1),
@@ -122,11 +124,11 @@ const SpacedGridItem = styled(Grid)(({ theme }) => ({
 }));
 
 const useProjects = (projects: PersonalDashboardSchemaProjectsItem[]) => {
-    const [activeProject, setActiveProject] = useState(projects[0]?.name);
+    const [activeProject, setActiveProject] = useState(projects[0]?.id);
 
     useEffect(() => {
         if (!activeProject && projects.length > 0) {
-            setActiveProject(projects[0].name);
+            setActiveProject(projects[0].id);
         }
     }, [JSON.stringify(projects)]);
 
@@ -185,14 +187,13 @@ export const PersonalDashboard = () => {
         personalDashboard?.projects || [],
     );
 
+    // TODO: since we use this one only for the onboarding status, we can add th eonboarding status to the personal dashboard project details API
     const { project: activeProjectOverview, loading } =
         useProjectOverview(activeProject);
+    const { personalDashboardProjectDetails, loading: loadingDetails } =
+        usePersonalDashboardProjectDetails(activeProject);
 
-    const onboardingCompleted = Boolean(
-        !loading &&
-            activeProject &&
-            activeProjectOverview?.onboardingStatus.status === 'onboarded',
-    );
+    const stage = activeProjectOverview?.onboardingStatus.status ?? 'loading';
 
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'seen' | 'not_seen'
@@ -250,10 +251,10 @@ export const PersonalDashboard = () => {
                                         <ListItemButton
                                             sx={projectStyle}
                                             selected={
-                                                project.name === activeProject
+                                                project.id === activeProject
                                             }
                                             onClick={() =>
-                                                setActiveProject(project.name)
+                                                setActiveProject(project.id)
                                             }
                                         >
                                             <ProjectBox>
@@ -272,7 +273,7 @@ export const PersonalDashboard = () => {
                                                     />
                                                 </IconButton>
                                             </ProjectBox>
-                                            {project.name === activeProject ? (
+                                            {project.id === activeProject ? (
                                                 <ActiveProjectDetails
                                                     project={project}
                                                 />
@@ -284,14 +285,23 @@ export const PersonalDashboard = () => {
                         </List>
                     </SpacedGridItem>
                     <SpacedGridItem item lg={4} md={1}>
-                        {onboardingCompleted ? (
+                        {stage === 'onboarded' ? (
                             <ProjectSetupComplete project={activeProject} />
                         ) : activeProject ? (
                             <CreateFlag project={activeProject} />
                         ) : null}
                     </SpacedGridItem>
                     <SpacedGridItem item lg={4} md={1}>
-                        {activeProject ? (
+                        {stage === 'onboarded' &&
+                        personalDashboardProjectDetails ? (
+                            <LatestProjectEvents
+                                latestEvents={
+                                    personalDashboardProjectDetails.latestEvents
+                                }
+                            />
+                        ) : null}
+                        {stage === 'onboarding-started' ||
+                        stage === 'first-flag-created' ? (
                             <ConnectSDK project={activeProject} />
                         ) : null}
                     </SpacedGridItem>

frontend/src/hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails.ts

@@ -0,0 +1,33 @@
+import useSWR from 'swr';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+import type { PersonalDashboardProjectDetailsSchema } from 'openapi';
+
+export interface IPersonalDashboardProjectDetailsOutput {
+    personalDashboardProjectDetails?: PersonalDashboardProjectDetailsSchema;
+    refetch: () => void;
+    loading: boolean;
+    error?: Error;
+}
+
+export const usePersonalDashboardProjectDetails = (
+    project: string,
+): IPersonalDashboardProjectDetailsOutput => {
+    const { data, error, mutate } = useSWR(
+        formatApiPath(`api/admin/personal-dashboard/${project}`),
+        fetcher,
+    );
+
+    return {
+        personalDashboardProjectDetails: data,
+        loading: !error && !data,
+        refetch: () => mutate(),
+        error,
+    };
+};
+
+const fetcher = (path: string) => {
+    return fetch(path)
+        .then(handleErrorResponses('Personal Dashboard Project Details'))
+        .then((res) => res.json());
+};

frontend/src/openapi/models/getPersonalDashboardProjectDetails401.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type GetPersonalDashboardProjectDetails401 = {
+    /** The ID of the error instance */
+    id?: string;
+    /** A description of what went wrong. */
+    message?: string;
+    /** The name of the error kind */
+    name?: string;
+};

frontend/src/openapi/models/getPersonalDashboardProjectDetails403.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type GetPersonalDashboardProjectDetails403 = {
+    /** The ID of the error instance */
+    id?: string;
+    /** A description of what went wrong. */
+    message?: string;
+    /** The name of the error kind */
+    name?: string;
+};

frontend/src/openapi/models/getPersonalDashboardProjectDetails404.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+export type GetPersonalDashboardProjectDetails404 = {
+    /** The ID of the error instance */
+    id?: string;
+    /** A description of what went wrong. */
+    message?: string;
+    /** The name of the error kind */
+    name?: string;
+};

frontend/src/openapi/models/index.ts

@@ -693,6 +693,9 @@ export * from './getPats404';
 export * from './getPersonalDashboard401';
 export * from './getPersonalDashboard403';
 export * from './getPersonalDashboard404';
+export * from './getPersonalDashboardProjectDetails401';
+export * from './getPersonalDashboardProjectDetails403';
+export * from './getPersonalDashboardProjectDetails404';
 export * from './getPlayground400';
 export * from './getPlayground401';
 export * from './getProfile401';
@@ -900,19 +903,21 @@ export * from './patchSchemaOp';
 export * from './patchesSchema';
 export * from './patsSchema';
 export * from './permissionSchema';
+export * from './personalDashboardProjectDetailsSchema';
+export * from './personalDashboardProjectDetailsSchemaLatestEventsItem';
+export * from './personalDashboardProjectDetailsSchemaOwners';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItem';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfOwnerType';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThreeOwnerType';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfSixItem';
+export * from './personalDashboardProjectDetailsSchemaOwnersOneOfSixItemOwnerType';
+export * from './personalDashboardProjectDetailsSchemaRolesItem';
+export * from './personalDashboardProjectDetailsSchemaRolesItemType';
 export * from './personalDashboardSchema';
 export * from './personalDashboardSchemaFlagsItem';
 export * from './personalDashboardSchemaProjectsItem';
-export * from './personalDashboardSchemaProjectsItemOwners';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfItem';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfItemAnyOf';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfItemAnyOfOwnerType';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfItemAnyOfThree';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfItemAnyOfThreeOwnerType';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfSixItem';
-export * from './personalDashboardSchemaProjectsItemOwnersOneOfSixItemOwnerType';
-export * from './personalDashboardSchemaProjectsItemRolesItem';
-export * from './personalDashboardSchemaProjectsItemRolesItemType';
 export * from './playgroundConstraintSchema';
 export * from './playgroundConstraintSchemaOperator';
 export * from './playgroundFeatureSchema';

frontend/src/openapi/models/personalDashboardProjectDetailsSchema.ts

@@ -0,0 +1,23 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaLatestEventsItem } from './personalDashboardProjectDetailsSchemaLatestEventsItem';
+import type { PersonalDashboardProjectDetailsSchemaOwners } from './personalDashboardProjectDetailsSchemaOwners';
+import type { PersonalDashboardProjectDetailsSchemaRolesItem } from './personalDashboardProjectDetailsSchemaRolesItem';
+
+/**
+ * Project details in personal dashboard
+ */
+export interface PersonalDashboardProjectDetailsSchema {
+    /** The latest events for the project. */
+    latestEvents: PersonalDashboardProjectDetailsSchemaLatestEventsItem[];
+    /** 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;
+    /**
+     * The list of roles that the user has in this project.
+     * @minItems 1
+     */
+    roles: PersonalDashboardProjectDetailsSchemaRolesItem[];
+}

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts

@@ -0,0 +1,18 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+
+/**
+ * An event summary
+ */
+export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
+    /** Which user created this event */
+    createdBy: string;
+    /**
+     * **[Experimental]** A markdown-formatted summary of the event.
+     * @nullable
+     */
+    summary: string | null;
+};

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwners.ts

@@ -0,0 +1,14 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfItem } from './personalDashboardProjectDetailsSchemaOwnersOneOfItem';
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfSixItem } from './personalDashboardProjectDetailsSchemaOwnersOneOfSixItem';
+
+/**
+ * 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.
+ */
+export type PersonalDashboardProjectDetailsSchemaOwners =
+    | PersonalDashboardProjectDetailsSchemaOwnersOneOfItem[]
+    | PersonalDashboardProjectDetailsSchemaOwnersOneOfSixItem[];

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfItem.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf } from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf';
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree } from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree';
+
+export type PersonalDashboardProjectDetailsSchemaOwnersOneOfItem =
+    | PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf
+    | PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree;

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfOwnerType } from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfOwnerType';
+
+export type PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOf = {
+    /** @nullable */
+    email?: string | null;
+    /** @nullable */
+    imageUrl?: string | null;
+    name: string;
+    ownerType: PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfOwnerType;
+};

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfOwnerType.ts

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

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree.ts

@@ -0,0 +1,11 @@
+/**
+ * Generated by Orval
+ * Do not edit manually.
+ * See `gen:api` script in package.json
+ */
+import type { PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThreeOwnerType } from './personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThreeOwnerType';
+
+export type PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThree = {
+    name: string;
+    ownerType: PersonalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThreeOwnerType;
+};

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfItemAnyOfThreeOwnerType.ts

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

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfSixItem.ts

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

frontend/src/openapi/models/personalDashboardProjectDetailsSchemaOwnersOneOfSixItemOwnerType.ts

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