add label to user created vessel groups

GlobalFishingWatch · Aug 29, 2024 · 58a4580 · 58a4580
1 parent 7d7f372
commit 58a4580
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.module.css b/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.module.css
@@ -17,6 +17,11 @@
   padding-top: 0;
 }
 
+.userLabel {
+  line-height: 0.5;
+  margin-top: var(--space-S);
+}
+
 .title {
   font: var(--font-L);
   font-size: 2.2rem;

diff --git a/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx b/apps/fishing-map/features/vessel-group-report/VesselGroupReportTitle.tsx
@@ -54,9 +54,16 @@ export default function VesselGroupReportTitle({ vesselGroup, loading }: ReportT
   return (
     <div className={styles.container}>
       <div className={cx(styles.row, styles.border)}>
-        <h1 className={styles.title} data-test="report-title">
-          {formatInfoField(vesselGroup.name, 'name')}
-        </h1>
+        <div>
+          {vesselGroup.ownerType === 'user' && (
+            <label className={styles.userLabel}>
+              {t('vesselGroupReport.user', 'User Vessel Group')}
+            </label>
+          )}
+          <h1 className={styles.title} data-test="report-title">
+            {formatInfoField(vesselGroup.name, 'name')}
+          </h1>
+        </div>
         <a className={styles.reportLink} href={window.location.href}>
           {t('vesselGroupReport.linkToReport', 'Check the vessel group report here')}
         </a>

diff --git a/apps/fishing-map/public/locales/source/translations.json b/apps/fishing-map/public/locales/source/translations.json
@@ -1025,6 +1025,7 @@
     "vesselGroups": "Vessel groups"
   },
   "vesselGroupReport": {
+    "user": "User Vessel Group",
     "clickToSee": "Click to see the vessel group report",
     "linkToReport": "Check the vessel group report here",
     "notFound": "Vessel group not found"