feat: improved versions screen (#897)

InseeFr · Jan 8, 2025 · 3b0d487 · 3b0d487
1 parent fd29281
commit 3b0d487
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 29 deletions.
diff --git a/src/constants/dictionary.ts b/src/constants/dictionary.ts
@@ -1697,6 +1697,18 @@ const dictionary: Dictionary = {
     fr: 'Ouvrir',
     en: 'Open',
   },
+  versionsInfo: {
+    fr: 'Pour afficher une précédente version, choisissez "Charger" puis valider. Cette version peut ensuite être modifiée et sauvegardée comme une nouvelle version.',
+    en: 'To load a previous version, click "Load" and validate. That version can then be edited and saved as a new one.',
+  },
+  versionsLimitInfo: {
+    fr: 'Attention, seulement les 10 dernières versions de la journée la plus récente sont conservées, et la dernière des journées précédentes.',
+    en: 'Caution: only the latest 10 versions of the most recent day are stored, and the last one for the days before.',
+  },
+  documentationInfoLink: {
+    fr: 'Pour plus de précision, se référer à la documentation.',
+    en: 'For more information check the documentation.',
+  },
 };
 
 // Dynamic translations

diff --git a/src/layout/versions/components/VersionDetails.tsx b/src/layout/versions/components/VersionDetails.tsx
@@ -34,7 +34,7 @@ export default function VersionDetails({
     <>
       <div className="inline-flex gap-3 items-center">
         <Clock height={18} width={18} />
-        <span>{dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}</span>
+        <span>{dayjs(timestamp).format('DD-MM-YYYY HH:mm')}</span>
       </div>
       <div className="first-letter:uppercase text-slate-400">
         <span className="italic" title={dayjs(timestamp).format('LLLL')}>
@@ -46,19 +46,21 @@ export default function VersionDetails({
         </a>
       </div>
       <div className="inline-flex gap-3 items-center">
-        <button className="btn-white" onClick={() => setConfirmLoad(true)}>
+        <button className="btn-yellow" onClick={() => setConfirmLoad(true)}>
           {Dictionary.load}
         </button>
         {confirmLoad ? (
-          <ConfirmInline
-            onConfirm={onLoad}
-            onCancel={() => setConfirmLoad(false)}
-            warningLabel={
-              isQuestionnaireModified
-                ? `${Dictionary.modificationsNotSaved}`
-                : undefined
-            }
-          />
+          <div className="ml-3">
+            <ConfirmInline
+              onConfirm={onLoad}
+              onCancel={() => setConfirmLoad(false)}
+              warningLabel={
+                isQuestionnaireModified
+                  ? `${Dictionary.modificationsNotSaved}`
+                  : undefined
+              }
+            />
+          </div>
         ) : null}
       </div>
     </>

diff --git a/src/layout/versions/components/Versions.tsx b/src/layout/versions/components/Versions.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { getVersions } from '@/api/versions';
 import type { Version } from '@/models/versions';
+import Dictionary from '@/utils/dictionary/dictionary';
 
 import VersionDetails from './VersionDetails';
 
@@ -42,18 +43,33 @@ export default function Versions({
   return isLoading ? (
     <div>Loading...</div>
   ) : (
-    <div className="grid grid-cols-[auto_auto_1fr] gap-x-4 space-y-2 items-center">
-      {versions.map((version) => (
-        <VersionDetails
-          key={version.id}
-          isQuestionnaireModified={isQuestionnaireModified}
-          onLoad={() => {
-            loadQuestionnaireVersion(version.id, token);
-            onSuccess();
-          }}
-          version={version}
-        />
-      ))}
-    </div>
+    <>
+      <div className="text-gray-400 mb-3">
+        <p>{Dictionary.versionsInfo}</p>
+        <p>{Dictionary.versionsLimitInfo}</p>
+        <p>
+          <a
+            className="text-lg"
+            target="_blank"
+            href="https://inseefr.github.io/Bowie/1._Pogues/Le%20guide/28-versionning/"
+          >
+            {Dictionary.documentationInfoLink}
+          </a>
+        </p>
+      </div>
+      <div className="grid grid-cols-[auto_auto_1fr] gap-x-4 space-y-2 items-center">
+        {versions.map((version) => (
+          <VersionDetails
+            key={version.id}
+            isQuestionnaireModified={isQuestionnaireModified}
+            onLoad={() => {
+              loadQuestionnaireVersion(version.id, token);
+              onSuccess();
+            }}
+            version={version}
+          />
+        ))}
+      </div>
+    </>
   );
 }
diff --git a/src/widgets/inlineConfirm/component.tsx b/src/widgets/inlineConfirm/component.tsx
@@ -20,28 +20,28 @@ export default function ConfirmInline({
   warningLabel = '',
 }: Readonly<ConfirmInlineProps>) {
   return (
-    <span className="text-lg">
+    <div>
       <span className="align-middle">{Dictionary.confirmQuestionMessage}</span>{' '}
       <button
-        className="hover:text-green-400 align-middle"
+        className="hover:text-green-400 align-middle font-bold"
         title={`${Dictionary.yes}`}
         onClick={onConfirm}
       >
-        <Check height={16} width={16} />
+        <Check height={16} width={16} strokeWidth={2} />
       </button>{' '}
       <button
         className="hover:text-red-400 align-middle"
         title={`${Dictionary.no}`}
         onClick={onCancel}
       >
-        <Xmark height={16} width={16} />
+        <Xmark height={16} width={16} strokeWidth={2} />
       </button>
       {warningLabel ? (
         <span className="ml-3 gap-x-2 align-middle inline-flex text-red-500">
           <WarningTriangle height={16} width={16} />
           <span>{warningLabel}</span>
         </span>
       ) : null}
-    </span>
+    </div>
   );
 }