create dashboard component (#48)

back/src/oidc-client/oidc-client.controller.ts

@@ -20,6 +20,7 @@ export class OidcClientController {
   async findAll() {
     return [
       {
+        id: 123,
         clientDescription: 'Description',
         clientId: 'clientId',
         clientSecret: 'ClientSecret',
@@ -34,6 +35,7 @@ export class OidcClientController {
   @Get('/:id')
   async find_by_id(@Param('id') id: string) {
     return {
+      id: 123,
       clientDescription: 'Description',
       clientId: 'clientId',
       clientSecret: 'ClientSecret',
@@ -57,7 +59,7 @@ export class OidcClientController {
         HttpStatus.BAD_REQUEST,
         {
           cause: error,
-        }
+        },
       );
     }
   }

back/src/oidc-client/oidc-client.dto.ts

@@ -3,6 +3,9 @@ import { IsNotEmpty } from 'class-validator';
 export class CreateOidcClientDto {
   clientDescription: string | null;
 
+  @IsNotEmpty()
+  id: number;
+
   @IsNotEmpty()
   clientName: string;
 

front/src/providers/connectedSpaces/Dashboard.tsx

@@ -0,0 +1,41 @@
+import { Badge } from '@codegouvfr/react-dsfr/Badge';
+import Title1 from '../../titles/Title1';
+import { Card } from '@codegouvfr/react-dsfr/Card';
+import { useRouteLoaderData } from 'react-router-dom';
+import { OidcClients } from '../../types';
+
+export const Dashboard = () => {
+  const oidcClients = useRouteLoaderData('dashboard') as OidcClients;
+  return (
+    <div className="fr-container fr-mb-10v">
+      <Title1>Tableau de bord</Title1>
+      <div className="fr-grid-row fr-grid-row--gutters">
+        {oidcClients.map((oidcClient) => (
+          <div className="container fr-col-6">
+            <Card
+              background
+              border
+              desc={oidcClient.clientDescription}
+              horizontal
+              enlargeLink
+              linkProps={{
+                to: `/dashboard/${oidcClient.id}`,
+              }}
+              size="small"
+              start={
+                <ul className="fr-badges-group">
+                  <li>
+                    <Badge>Clés de test</Badge>
+                    <Badge severity="info">DINUM</Badge>
+                  </li>
+                </ul>
+              }
+              title={oidcClient.clientName}
+              titleAs="h2"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

front/src/providers/details/ProviderDetails.tsx

@@ -16,6 +16,7 @@ import { OidcClientFormContext } from './oidc-client-form.context';
 
 export function ProviderDetails() {
   const [oidcClientForm, setOidcClientForm] = useState<OidcClient>({
+    id: 0,
     clientName: '',
     clientDescription: '',
     clientId: '',

front/src/routes/Router.tsx

@@ -10,6 +10,8 @@ import { EspaceConnected } from '../providers/connectedSpaces/EspaceConnected';
 import { ProviderDetails } from '../providers/details/ProviderDetails';
 import { OidcClientFormProvider } from '../providers/details/oidc-client-form.context';
 import { EspaceDocumentation } from '../providers/documentation/EspaceDocumentation';
+import { Dashboard } from '../providers/connectedSpaces/Dashboard';
+import { OidcClients } from '../types';
 
 const router = createBrowserRouter([
   {
@@ -39,15 +41,13 @@ const router = createBrowserRouter([
   {
     path: '/dashboard',
     loader: async () => {
-      return backendClient.getDashboard();
+      const datas: OidcClients = await backendClient.getDashboard();
+      return datas;
     },
+    id: 'dashboard',
     element: (
       <PageLayout>
-        <>
-          <a href="/dashboard/new">NEW</a>
-          <br />
-          <a href="/dashboard/123">Rebecca Project 123</a>
-        </>
+        <Dashboard />
       </PageLayout>
     ),
   },

front/src/types.ts

@@ -1,4 +1,5 @@
 export type OidcClient = {
+  id: number;
   clientName: string;
   clientDescription: string;
   clientId: string;
@@ -7,3 +8,5 @@ export type OidcClient = {
   postLogoutRedirectUris: string[];
   scope: string[];
 };
+
+export type OidcClients = OidcClient[];