Ep 780 (#35)

* EP-780 create new connected space * EP-780 fix broke sticky * EP-780 create input name * EP-780 add id to dashboard router
numerique-gouv · Nov 23, 2023 · cee71b3 · cee71b3
1 parent 6996e12
commit cee71b3
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 34 deletions.
diff --git a/front/src/providers/connectedSpaces/EspaceConnected.tsx b/front/src/providers/connectedSpaces/EspaceConnected.tsx
@@ -0,0 +1,52 @@
+import Title1 from '../../titles/Title1';
+import { KeyProductionData } from '../details/KeyProductionData';
+import { ProviderKey } from '../details/ProviderKey';
+import { ProviderName } from '../details/ProviderName';
+import { ProviderScope } from '../details/ProviderScope';
+import { ProviderUrl } from '../details/ProviderUrl';
+import { ProviderUrlDeco } from '../details/ProviderUrlDeco';
+import { ProviderValidation } from '../details/ProviderValidation';
+import { OidcClientFormContext } from '../details/oidc-client-form.context';
+import { OidcClient } from '../../types';
+import { useState } from 'react';
+import { SideMenu } from '../details/ProviderSideMenu';
+
+export const EspaceConnected = () => {
+  const [oidcClientForm, setOidcClientForm] = useState<OidcClient>({
+    clientName: '',
+    clientDescription: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUris: [],
+    postLogoutRedirectUris: [],
+    scope: [],
+  });
+  return (
+    <OidcClientFormContext.Provider
+      value={{
+        setOidcClientForm,
+      }}
+    >
+      <div className="fr-container">
+        <Title1 title="Espace connecté" />
+        <div className="fr-container--fluid">
+          <div className="fr-grid-row fr-grid-row--gutters"></div>
+        </div>
+        <div className="fr-container--fluid fr-mt-10v">
+          <div className="fr-grid-row">
+            <SideMenu></SideMenu>
+            <div className="fr-col-12 fr-col-md">
+              <ProviderName />
+              <ProviderKey />
+              <ProviderUrl />
+              <ProviderUrlDeco />
+              <ProviderScope />
+              <ProviderValidation oidcClientForm={oidcClientForm} />
+              <KeyProductionData />
+            </div>
+          </div>
+        </div>
+      </div>
+    </OidcClientFormContext.Provider>
+  );
+};
diff --git a/front/src/providers/details/ProviderDetails.tsx b/front/src/providers/details/ProviderDetails.tsx
@@ -12,6 +12,7 @@ import CardInfos from '../../cards/CardInfos';
 import monImage from '../../images/test-image.png';
 import monImage2 from '../../images/test-image2.png';
 import { ProviderValidation } from './ProviderValidation';
+import { ProviderName } from './ProviderName';
 
 export function ProviderDetails() {
   const [oidcClientForm, setOidcClientForm] = useState<OidcClient>({
@@ -32,7 +33,7 @@ export function ProviderDetails() {
     >
       <div className="fr-container">
         <Title1 title="Implémentation" />
-        <div className="fr-container--fluid">
+        <div className="fr-container">
           <div className="fr-grid-row fr-grid-row--gutters">
             <CardInfos
               title="Faites vos tests"
@@ -58,10 +59,11 @@ export function ProviderDetails() {
             />
           </div>
         </div>
-        <div className="fr-container--fluid fr-mt-10v">
+        <div className="fr-container fr-mt-10v">
           <div className="fr-grid-row">
             <SideMenu></SideMenu>
             <div className="fr-col-12 fr-col-md">
+              <ProviderName />
               <ProviderKey />
               <ProviderUrl />
               <ProviderUrlDeco />

diff --git a/front/src/providers/details/ProviderName.tsx b/front/src/providers/details/ProviderName.tsx
@@ -0,0 +1,20 @@
+import { Input } from '@codegouvfr/react-dsfr/Input';
+
+export const ProviderName = () => {
+  return (
+    <div className="fr-mb-10v">
+      <div className="fr-container--fluid">
+        <div className="fr-grid-row fr-grid-row--bottom">
+          <Input
+            className="fr-col-md-7 fr-m-1v fr-text--bold"
+            label="Nom du projet"
+            nativeInputProps={{
+              type: 'text',
+              placeholder: 'Test - date',
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/front/src/providers/details/ProviderSideMenu.tsx b/front/src/providers/details/ProviderSideMenu.tsx
@@ -5,42 +5,40 @@ export const SideMenu = () => {
   const [currentAnchor] = useHash();
   return (
     <div className="fr-col-12 fr-col-md-3">
-      <div className="container">
-        <DsfrSideMenu
-          sticky
-          burgerMenuButtonText="Dans cette rubrique"
-          items={[
-            {
-              isActive: currentAnchor === '#keys',
-              linkProps: {
-                to: '#keys',
-              },
-              text: 'Clés',
+      <DsfrSideMenu
+        sticky
+        burgerMenuButtonText="Dans cette rubrique"
+        items={[
+          {
+            isActive: currentAnchor === '#keys',
+            linkProps: {
+              to: '#keys',
             },
-            {
-              isActive: currentAnchor === '#url',
-              linkProps: {
-                to: '#url',
-              },
-              text: 'URL',
+            text: 'Clés',
+          },
+          {
+            isActive: currentAnchor === '#url',
+            linkProps: {
+              to: '#url',
             },
-            {
-              isActive: currentAnchor === '#scopes',
-              linkProps: {
-                to: '#scopes',
-              },
-              text: 'Données',
+            text: 'URL',
+          },
+          {
+            isActive: currentAnchor === '#scopes',
+            linkProps: {
+              to: '#scopes',
             },
-            {
-              isActive: currentAnchor === '#authorization',
-              linkProps: {
-                to: '#authorization',
-              },
-              text: 'Habilitation',
+            text: 'Données',
+          },
+          {
+            isActive: currentAnchor === '#authorization',
+            linkProps: {
+              to: '#authorization',
             },
-          ]}
-        />
-      </div>
+            text: 'Habilitation',
+          },
+        ]}
+      />
     </div>
   );
 };
diff --git a/front/src/routes/Router.tsx b/front/src/routes/Router.tsx
@@ -3,6 +3,7 @@ import { PageLayout } from '../layouts/PageLayout';
 import HomeLayout from '../layouts/HomeLayout';
 import { ProviderDetails } from '../providers/details/ProviderDetails';
 import { EspaceDocumentation } from '../providers/documentation/EspaceDocumentation';
+import { EspaceConnected } from '../providers/connectedSpaces/EspaceConnected';
 
 const router = createBrowserRouter([
   {
@@ -29,6 +30,14 @@ const router = createBrowserRouter([
       </PageLayout>
     ),
   },
+  {
+    path: '/dashboard/:id',
+    element: (
+      <PageLayout>
+        <EspaceConnected />
+      </PageLayout>
+    ),
+  },
 ]);
 
 function Router() {