Skip to content

Commit 3b50f73

Browse files
author
Clément VALENTIN
committed
feat: Enhance Admin and API documentation pages, improve layout and transitions
- Updated AdminTabs and ApiDocsTabs components to remove unnecessary margin. - Refactored Layout component to make PageHeader and tabs sticky at the top. - Improved PageTransition component for smoother animations during route changes. - Removed redundant headers and descriptions from various Admin pages for cleaner UI. - Added new icons and updated page configurations for better clarity in the PageHeader. - Enhanced backend deployment configuration with additional environment variables. - Updated secrets management to include new API credentials and Mailgun settings. - Removed outdated production values file and streamlined values.yaml for better maintainability. - Introduced a new GitHub Actions workflow for Helm chart releases.
1 parent 1fc7434 commit 3b50f73

24 files changed

+190
-338
lines changed

‎.github/workflows/deploy-docs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ jobs:
4949

5050
- name: Setup Pages
5151
uses: actions/configure-pages@v4
52+
with:
53+
enablement: true
5254

5355
- name: Upload artifact
5456
uses: actions/upload-pages-artifact@v3

‎.github/workflows/helm-release.yml‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
name: Release Helm Chart
2+
3+
on:
4+
push:
5+
tags:
6+
- 'helm-v*' # Déclenché par les tags comme helm-v0.1.0
7+
paths:
8+
- 'helm/myelectricaldata/**'
9+
workflow_dispatch: # Permet le déclenchement manuel
10+
inputs:
11+
version:
12+
description: 'Version du chart (ex: 0.1.0)'
13+
required: false
14+
default: ''
15+
16+
env:
17+
REGISTRY: ghcr.io
18+
CHART_PATH: helm/myelectricaldata
19+
20+
jobs:
21+
release:
22+
runs-on: ubuntu-latest
23+
permissions:
24+
contents: read
25+
packages: write
26+
27+
steps:
28+
- name: Checkout repository
29+
uses: actions/checkout@v4
30+
31+
- name: Install Helm
32+
uses: azure/setup-helm@v4
33+
with:
34+
version: 'v3.14.0'
35+
36+
- name: Login to GHCR
37+
run: |
38+
echo "${{ secrets.GITHUB_TOKEN }}" | helm registry login ${{ env.REGISTRY }} -u ${{ github.actor }} --password-stdin
39+
40+
- name: Get chart version
41+
id: chart_version
42+
run: |
43+
if [ -n "${{ github.event.inputs.version }}" ]; then
44+
VERSION="${{ github.event.inputs.version }}"
45+
elif [[ "${{ github.ref }}" == refs/tags/helm-v* ]]; then
46+
VERSION="${{ github.ref_name }}"
47+
VERSION="${VERSION#helm-v}"
48+
else
49+
VERSION=$(grep '^version:' ${{ env.CHART_PATH }}/Chart.yaml | awk '{print $2}')
50+
fi
51+
echo "version=$VERSION" >> $GITHUB_OUTPUT
52+
echo "Chart version: $VERSION"
53+
54+
- name: Update chart version
55+
run: |
56+
sed -i "s/^version:.*/version: ${{ steps.chart_version.outputs.version }}/" ${{ env.CHART_PATH }}/Chart.yaml
57+
sed -i "s/^appVersion:.*/appVersion: \"${{ steps.chart_version.outputs.version }}\"/" ${{ env.CHART_PATH }}/Chart.yaml
58+
cat ${{ env.CHART_PATH }}/Chart.yaml
59+
60+
- name: Update Helm dependencies
61+
run: |
62+
helm dependency update ${{ env.CHART_PATH }}
63+
64+
- name: Lint Helm chart
65+
run: |
66+
helm lint ${{ env.CHART_PATH }}
67+
68+
- name: Package Helm chart
69+
run: |
70+
helm package ${{ env.CHART_PATH }} --destination ./packages
71+
72+
- name: Push to GHCR
73+
run: |
74+
CHART_PACKAGE=$(ls ./packages/*.tgz)
75+
helm push $CHART_PACKAGE oci://${{ env.REGISTRY }}/${{ github.repository_owner }}/charts
76+
echo "Chart pushed to: oci://${{ env.REGISTRY }}/${{ github.repository_owner }}/charts/myelectricaldata:${{ steps.chart_version.outputs.version }}"
77+
78+
- name: Summary
79+
run: |
80+
echo "## Helm Chart Published" >> $GITHUB_STEP_SUMMARY
81+
echo "" >> $GITHUB_STEP_SUMMARY
82+
echo "**Chart:** myelectricaldata" >> $GITHUB_STEP_SUMMARY
83+
echo "**Version:** ${{ steps.chart_version.outputs.version }}" >> $GITHUB_STEP_SUMMARY
84+
echo "**Registry:** oci://${{ env.REGISTRY }}/${{ github.repository_owner }}/charts" >> $GITHUB_STEP_SUMMARY
85+
echo "" >> $GITHUB_STEP_SUMMARY
86+
echo "### Installation" >> $GITHUB_STEP_SUMMARY
87+
echo "\`\`\`bash" >> $GITHUB_STEP_SUMMARY
88+
echo "helm install myelectricaldata oci://${{ env.REGISTRY }}/${{ github.repository_owner }}/charts/myelectricaldata --version ${{ steps.chart_version.outputs.version }}" >> $GITHUB_STEP_SUMMARY
89+
echo "\`\`\`" >> $GITHUB_STEP_SUMMARY

‎apps/web/src/components/AdminTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function AdminTabs() {
2525
const visibleTabs = tabs.filter(tab => !tab.permission || hasPermission(tab.permission))
2626

2727
return (
28-
<div className="w-full border-b border-gray-200 dark:border-gray-700 mb-4 overflow-x-auto bg-white dark:bg-gray-800">
28+
<div className="w-full border-b border-gray-200 dark:border-gray-700 overflow-x-auto bg-white dark:bg-gray-800">
2929
<nav className="flex gap-1 min-w-max px-3 sm:px-4 lg:px-6" aria-label="Tabs">
3030
{visibleTabs.map((tab) => {
3131
const isActive = location.pathname === tab.path

‎apps/web/src/components/ApiDocsTabs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function ApiDocsTabs() {
1414
const location = useLocation()
1515

1616
return (
17-
<div className="w-full border-b border-gray-200 dark:border-gray-700 mb-4 overflow-x-auto bg-white dark:bg-gray-800">
17+
<div className="w-full border-b border-gray-200 dark:border-gray-700 overflow-x-auto bg-white dark:bg-gray-800">
1818
<nav className="flex gap-1 min-w-max px-3 sm:px-4 lg:px-6" aria-label="Tabs">
1919
{tabs.map((tab) => {
2020
const isActive = location.pathname === tab.path

‎apps/web/src/components/Layout.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -454,17 +454,17 @@ export default function Layout({ children }: { children: React.ReactNode }) {
454454

455455
{/* Main Content Area */}
456456
<div className={`flex-1 flex flex-col min-w-0 transition-all duration-300 ${sidebarCollapsed ? 'md:ml-16' : 'md:ml-56'}`}>
457-
{/* Admin/API Docs Tabs - Full Width at the very top */}
458-
{location.pathname.startsWith('/admin') && <AdminTabs />}
459-
{location.pathname.startsWith('/api-docs') && <ApiDocsTabs />}
460-
461-
{/* Page Header - Visible sur toutes les pages avec titre + sélecteur PDL optionnel */}
462-
<PageHeader />
457+
{/* Header sticky : PageHeader + Tabs (si présents) */}
458+
<div className="sticky top-0 z-20 flex-shrink-0">
459+
<PageHeader />
460+
{location.pathname.startsWith('/admin') && <AdminTabs />}
461+
{location.pathname.startsWith('/api-docs') && <ApiDocsTabs />}
462+
</div>
463463

464464
{/* Main Content */}
465465
<main className={`flex-1 bg-gray-50 dark:bg-gray-900 ${isAdminLogsPage ? 'overflow-hidden' : 'overflow-y-auto'}`}>
466-
<div className={`container mx-auto px-3 sm:px-4 lg:px-6 max-w-[1920px] ${isAdminLogsPage ? 'h-full pb-0' : 'pb-6'}`}>
467-
<PageTransition>
466+
<div className={`container mx-auto px-3 sm:px-4 lg:px-6 max-w-[1920px] ${isAdminLogsPage ? 'h-full pb-0' : 'pb-6'} ${(location.pathname.startsWith('/admin') || location.pathname.startsWith('/api-docs')) ? 'pt-4' : ''}`}>
467+
<PageTransition key={location.pathname}>
468468
{children}
469469
</PageTransition>
470470

‎apps/web/src/components/PageHeader.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect } from 'react'
22
import { useLocation } from 'react-router-dom'
3-
import { TrendingUp, Sun, Calculator, Download, Lock, LayoutDashboard, Calendar, Zap, Users } from 'lucide-react'
3+
import { TrendingUp, Sun, Calculator, Download, Lock, LayoutDashboard, Calendar, Zap, Users, AlertCircle, BookOpen, Settings as SettingsIcon, Key, Shield, FileText, Activity } from 'lucide-react'
44
import { useQuery } from '@tanstack/react-query'
55
import { pdlApi } from '@/api/pdl'
66
import { usePdlStore } from '@/stores/pdlStore'
@@ -11,7 +11,11 @@ import { LoadingStatusBadge } from './LoadingStatusBadge'
1111
import type { PDL } from '@/types/api'
1212

1313
// Pages qui affichent le sélecteur de PDL avec bouton "Récupérer"
14-
const PDL_SELECTOR_PAGES = ['/consumption', '/production', '/simulator', '/dashboard', '/tempo', '/ecowatt', '/contribute']
14+
const PDL_SELECTOR_PAGES = [
15+
'/consumption', '/production', '/simulator', '/dashboard', '/tempo', '/ecowatt', '/contribute',
16+
'/faq', '/api-docs', '/api-docs/auth', '/settings',
17+
'/admin', '/admin/users', '/admin/tempo', '/admin/ecowatt', '/admin/contributions', '/admin/offers', '/admin/roles', '/admin/logs', '/admin/add-pdl'
18+
]
1519

1620
// Configuration des titres et icônes par page
1721
const PAGE_CONFIG: Record<string, { title: string; icon: typeof TrendingUp; subtitle?: string }> = {
@@ -22,6 +26,20 @@ const PAGE_CONFIG: Record<string, { title: string; icon: typeof TrendingUp; subt
2226
'/tempo': { title: 'Calendrier Tempo', icon: Calendar, subtitle: 'Historique des jours Tempo bleus, blancs et rouges fourni par RTE' },
2327
'/ecowatt': { title: 'EcoWatt - Signal RTE', icon: Zap, subtitle: 'Suivez en temps réel l\'état du réseau électrique français' },
2428
'/contribute': { title: 'Contribuer à la base de données', icon: Users, subtitle: 'Aidez la communauté en ajoutant des offres tarifaires' },
29+
'/faq': { title: 'FAQ - Questions fréquentes Enedis', icon: AlertCircle, subtitle: 'Réponses aux questions courantes et solutions aux erreurs de l\'API Enedis' },
30+
'/api-docs': { title: 'Documentation API', icon: BookOpen, subtitle: 'Explorez et testez les endpoints de l\'API MyElectricalData' },
31+
'/api-docs/auth': { title: 'Authentification OAuth 2.0', icon: Key, subtitle: 'Guide complet pour intégrer l\'API MyElectricalData dans vos applications' },
32+
'/settings': { title: 'Mon compte', icon: SettingsIcon, subtitle: 'Gérez votre compte et vos préférences' },
33+
// Admin pages
34+
'/admin': { title: 'Administration', icon: Shield, subtitle: 'Vue d\'ensemble et statistiques de la plateforme' },
35+
'/admin/users': { title: 'Gestion des utilisateurs', icon: Users, subtitle: 'Gérez les comptes utilisateurs de la plateforme' },
36+
'/admin/tempo': { title: 'Gestion Tempo', icon: Calendar, subtitle: 'Gérez les données du calendrier Tempo RTE' },
37+
'/admin/ecowatt': { title: 'Administration EcoWatt', icon: Zap, subtitle: 'Gérez les données EcoWatt RTE' },
38+
'/admin/contributions': { title: 'Gestion des contributions', icon: Users, subtitle: 'Modérez les contributions des utilisateurs' },
39+
'/admin/offers': { title: 'Gestion des offres', icon: Zap, subtitle: 'Gérez les offres tarifaires des fournisseurs' },
40+
'/admin/roles': { title: 'Gestion des rôles', icon: Shield, subtitle: 'Configurez les rôles et permissions' },
41+
'/admin/logs': { title: 'Logs d\'application', icon: FileText, subtitle: 'Consultez les logs du système' },
42+
'/admin/add-pdl': { title: 'Ajouter un PDL', icon: Activity, subtitle: 'Ajouter un point de livraison à un utilisateur' },
2543
}
2644

2745
export default function PageHeader() {
@@ -117,7 +135,7 @@ export default function PageHeader() {
117135
: activePdls
118136

119137
return (
120-
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
138+
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
121139
<div className="container mx-auto px-3 sm:px-4 lg:px-6 max-w-[1920px]">
122140
<div className="flex flex-col gap-3 py-4 lg:flex-row lg:items-center lg:justify-between">
123141
{/* Titre avec icône et sous-titre */}

‎apps/web/src/components/PageTransition.tsx‎

Lines changed: 19 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,42 @@
1-
import { useLocation } from 'react-router-dom'
2-
import { useEffect, useState, useRef } from 'react'
1+
import { useEffect, useState } from 'react'
32

43
interface PageTransitionProps {
54
children: React.ReactNode
65
}
76

87
/**
98
* Composant qui ajoute des transitions fluides entre les pages.
10-
* Utilise un effet de fade + slide subtil lors du changement de route.
11-
* Scroll automatiquement vers le haut lors du changement de page.
9+
* Utilise un effet de fade + slide subtil lors du montage.
10+
* Le composant doit recevoir une key={pathname} pour déclencher l'animation à chaque navigation.
1211
*/
1312
export function PageTransition({ children }: PageTransitionProps) {
14-
const location = useLocation()
15-
const [displayChildren, setDisplayChildren] = useState(children)
16-
const [transitionState, setTransitionState] = useState<'enter' | 'exit' | 'idle'>('idle')
17-
const previousPathRef = useRef(location.pathname)
13+
const [isVisible, setIsVisible] = useState(false)
1814

1915
useEffect(() => {
20-
// Si le chemin a changé
21-
if (location.pathname !== previousPathRef.current) {
22-
// Démarrer l'animation de sortie
23-
setTransitionState('exit')
16+
// Scroll vers le haut
17+
window.scrollTo({ top: 0, behavior: 'smooth' })
2418

25-
// Après l'animation de sortie, mettre à jour le contenu
26-
const exitTimer = setTimeout(() => {
27-
// Scroll vers le haut de manière fluide
28-
window.scrollTo({ top: 0, behavior: 'smooth' })
19+
// Déclencher l'animation d'entrée après le montage
20+
const timer = requestAnimationFrame(() => {
21+
setIsVisible(true)
22+
})
2923

30-
setDisplayChildren(children)
31-
setTransitionState('enter')
32-
33-
// Revenir à idle après l'animation d'entrée
34-
const enterTimer = setTimeout(() => {
35-
setTransitionState('idle')
36-
}, 300)
37-
38-
return () => clearTimeout(enterTimer)
39-
}, 150)
40-
41-
previousPathRef.current = location.pathname
42-
43-
return () => clearTimeout(exitTimer)
44-
} else {
45-
// Même chemin, mettre à jour les enfants directement
46-
setDisplayChildren(children)
47-
}
48-
}, [location.pathname, children])
49-
50-
const getTransitionClasses = () => {
51-
switch (transitionState) {
52-
case 'exit':
53-
return 'opacity-0 translate-y-2 scale-[0.99]'
54-
case 'enter':
55-
return 'opacity-100 translate-y-0 scale-100'
56-
case 'idle':
57-
default:
58-
return 'opacity-100 translate-y-0 scale-100'
59-
}
60-
}
24+
return () => cancelAnimationFrame(timer)
25+
}, [])
6126

6227
return (
6328
<div
64-
className={`transition-all duration-200 ease-out ${getTransitionClasses()}`}
29+
className={`transition-all duration-300 ease-out ${
30+
isVisible
31+
? 'opacity-100 translate-y-0 scale-100'
32+
: 'opacity-0 translate-y-3 scale-[0.98]'
33+
}`}
6534
style={{
6635
transformOrigin: 'top center',
67-
willChange: transitionState !== 'idle' ? 'opacity, transform' : 'auto'
36+
willChange: isVisible ? 'auto' : 'opacity, transform'
6837
}}
6938
>
70-
{displayChildren}
39+
{children}
7140
</div>
7241
)
7342
}

‎apps/web/src/pages/Admin.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,6 @@ export default function Admin() {
6060
return (
6161
<div className="w-full">
6262
<div className="space-y-8 w-full">
63-
<div>
64-
<h1 className="text-3xl font-bold mb-2">Tableau de bord Administration</h1>
65-
<p className="text-gray-600 dark:text-gray-400">
66-
Vue d'ensemble et statistiques de la plateforme
67-
</p>
68-
</div>
69-
7063
{/* Notification Toast */}
7164
{notification && (
7265
<div className={`p-4 rounded-lg flex items-start gap-3 ${

‎apps/web/src/pages/AdminAddPDL.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useState, useRef, useEffect } from 'react'
22
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
33
import {
4-
Activity,
54
CheckCircle,
65
XCircle,
76
AlertCircle,
@@ -311,19 +310,12 @@ export default function AdminAddPDL() {
311310
<div className="space-y-6 w-full max-w-4xl mx-auto">
312311
<div>
313312
<Link
314-
to="/dashboard"
313+
to="/admin/users"
315314
className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-4 transition-colors"
316315
>
317316
<ArrowLeft size={16} />
318-
Retour au Dashboard
317+
Retour à la gestion des utilisateurs
319318
</Link>
320-
<h1 className="text-3xl font-bold mb-2 flex items-center gap-3">
321-
<Activity className="text-amber-600 dark:text-amber-400" size={32} />
322-
Ajouter un PDL à un utilisateur
323-
</h1>
324-
<p className="text-gray-600 dark:text-gray-400">
325-
Fonction d'administration : ajouter un PDL à n'importe quel utilisateur sans consentement
326-
</p>
327319
</div>
328320

329321
{/* Notification Toast - Fixed overlay */}

‎apps/web/src/pages/AdminContributions.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -311,16 +311,6 @@ export default function AdminContributions() {
311311
)}
312312

313313
<div className="space-y-6 w-full">
314-
<div>
315-
<h1 className="text-3xl font-bold mb-2 flex items-center gap-3">
316-
<Users className="text-primary-600 dark:text-primary-400" size={32} />
317-
Gestion des contributions
318-
</h1>
319-
<p className="text-gray-600 dark:text-gray-400">
320-
Approuvez ou rejetez les contributions communautaires en attente.
321-
</p>
322-
</div>
323-
324314
{!contributions || contributions.length === 0 ? (
325315
<div className="card text-center py-12">
326316
<Users className="mx-auto text-gray-400 mb-4" size={48} />

0 commit comments

Comments
 (0)