enh: Add contextual popovers for recording visibility help

app/assets/locales/en.json

@@ -185,6 +185,15 @@
     "protected": "Protected",
     "public": "Public",
     "public_protected": "Public/Protected",
+    "formats_help": "Shows the available playback types (for example, Presentation or Video). Clicking a format opens the BigBlueButton recording in a new tab.",
+    "visibility_help": {
+      "title": "Recording visibility options",
+      "public_protected": "Public/Protected - The recording is available on the Public Recordings page that can be reached from the Room Join page. The link can only be viewed from within Greenlight",
+      "public": "Public - The recording is available on the Public Recordings page that can be reached from the Room Join page. The link can be shared with anyone",
+      "protected": "Protected - The recording must be viewed from within Greenlight",
+      "published": "Published - The recording is accessible to anyone with the link",
+      "unpublished": "Unpublished - The recording is not accessible to anyone"
+    },
     "length_in_minutes": "{{recording.length}} min.",
     "processing_recording": "Processing recording, this may take several minutes...",
     "copy_recording_urls": "Copy Recording Url(s)",

app/assets/locales/fr.json

@@ -180,11 +180,20 @@
     "users": "Utilisateurs",
     "visibility": "État",
     "formats": "Lecture",
+    "formats_help": "Affiche les types de lecture disponibles (par exemple Présentation ou Vidéo). Cliquer sur un format ouvre l'enregistrement BigBlueButton dans un nouvel onglet.",
     "published": "Publiée",
     "unpublished": "Non publiée",
     "protected": "Protégé",
     "public": "Public",
     "public_protected": "Public/Protégé",
+    "visibility_help": {
+      "title": "Options de visibilité de l'enregistrement",
+      "public_protected": "Public/Protégé - L'enregistrement est disponible sur la page des enregistrements publics accessible depuis la page Rejoindre la salle. Le lien ne peut être consulté que depuis Greenlight",
+      "public": "Public - L'enregistrement est disponible sur la page des enregistrements publics accessible depuis la page Rejoindre la salle. Le lien peut être partagé avec n'importe qui",
+      "protected": "Protégé - L'enregistrement doit être consulté depuis Greenlight",
+      "published": "Publiée - L'enregistrement est accessible à toute personne disposant du lien",
+      "unpublished": "Non publiée - L'enregistrement n'est accessible à personne"
+    },
     "length_in_minutes": "{{recording.length}} min.",
     "processing_recording": "L'enregistrement est en cours de traitement, cela peu prendre quelques minutes...",
     "copy_recording_urls": "Copier l'URL de l'enregistrement",

app/javascript/components/recordings/RecordingsList.jsx

@@ -19,7 +19,10 @@ import PropTypes from 'prop-types';
 import {
   Badge, Card, Stack, Table,
 } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
 import { useTranslation } from 'react-i18next';
+import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
 import SortBy from '../shared_components/search/SortBy';
 import RecordingsListRowPlaceHolder from './RecordingsListRowPlaceHolder';
 import NoSearchResults from '../shared_components/search/NoSearchResults';
@@ -33,6 +36,25 @@ export default function RecordingsList({
 }) {
   const { t } = useTranslation();
 
+  const visibilityTooltip = (
+    <Tooltip id="recordings-visibility-tooltip" className="text-start">
+      <div className="fw-semibold mb-1">{t('recording.visibility_help.title')}</div>
+      <ul className="mb-0 ps-3">
+        <li>{t('recording.visibility_help.public_protected')}</li>
+        <li>{t('recording.visibility_help.public')}</li>
+        <li>{t('recording.visibility_help.protected')}</li>
+        <li>{t('recording.visibility_help.published')}</li>
+        <li>{t('recording.visibility_help.unpublished')}</li>
+      </ul>
+    </Tooltip>
+  );
+
+  const formatsTooltip = (
+    <Tooltip id="recordings-formats-tooltip" className="text-start">
+      {t('recording.formats_help')}
+    </Tooltip>
+  );
+
   if (!isLoading && recordings?.data?.length === 0 && !searchInput && recordingsProcessing === 0) {
     return <EmptyRecordingsList />;
   }
@@ -68,17 +90,44 @@ export default function RecordingsList({
                     <th className="fw-normal border-end-0">{t('recording.name')}<SortBy fieldName="name" /></th>
                     <th className="fw-normal border-0">{t('recording.length')}<SortBy fieldName="length" /></th>
                     <th className="fw-normal border-0">{t('recording.users')}</th>
-                    <th className="fw-normal border-0">{t('recording.visibility')}<SortBy fieldName="visibility" /></th>
-                    <th className="fw-normal border-0">{t('recording.formats')}</th>
+                    <th className="fw-normal border-0">
+                      <Stack direction="horizontal" gap={1} className="align-items-center">
+                        <span>{t('recording.visibility')}</span>
+                        <SortBy fieldName="visibility" />
+                        <OverlayTrigger
+                          placement="top"
+                          trigger={['hover', 'focus']}
+                          overlay={visibilityTooltip}
+                        >
+                          <button type="button" className="btn btn-link p-0 border-0 d-inline-flex text-muted cursor-pointer">
+                            <QuestionMarkCircleIcon className="hi-xs" />
+                          </button>
+                        </OverlayTrigger>
+                      </Stack>
+                    </th>
+                    <th className="fw-normal border-0">
+                      <Stack direction="horizontal" gap={1} className="align-items-center">
+                        <span>{t('recording.formats')}</span>
+                        <OverlayTrigger
+                          placement="top"
+                          trigger={['hover', 'focus']}
+                          overlay={formatsTooltip}
+                        >
+                          <button type="button" className="btn btn-link p-0 border-0 d-inline-flex text-muted cursor-pointer">
+                            <QuestionMarkCircleIcon className="hi-xs" />
+                          </button>
+                        </OverlayTrigger>
+                      </Stack>
+                    </th>
                     <th className="border-start-0" aria-label="options" />
                   </tr>
                 </thead>
                 <tbody className="border-top-0">
                   {
-                    (isLoading && [...Array(numPlaceholders)].map((val, idx) => (
+                    isLoading && Array.from({ length: numPlaceholders }).map((_, idx) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <RecordingsListRowPlaceHolder key={idx} />
-                    )))
+                    ))
                   }
                   {
                     (recordings?.data?.length > 0 && recordings?.data?.map((recording, idx) => (