feat(preview): add datafair embed preview (#773)

Replace
[udata-data-fair](https://github.com/koumoul-dev/udata-data-fair)
plugin.

- Use iframe for map, table or field structure preview.
- Use swagger client for api doc preview. 

For now, it's restricted only to certified organization as a security
measure.

Author: maudetes

datagouv-components/src/components/ResourceAccordion/Datafair.client.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="fr-text--xs">
+    <div v-if="dataFairEmbedUrl">
+      <iframe
+        :src="dataFairEmbedUrl"
+        width="100%"
+        height="500px"
+        style="background-color: transparent;
+          border: none;"
+      />
+    </div>
+    <SimpleBanner
+      v-else
+      type="warning"
+      class="flex items-center space-x-2"
+    >
+      <RiErrorWarningLine class="shink-0 size-6" />
+      <span>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
+    </SimpleBanner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiErrorWarningLine } from '@remixicon/vue'
+import SimpleBanner from '../SimpleBanner.vue'
+import type { Resource } from '../../types/resources.ts'
+import type { Dataset, DatasetV2 } from '../../types/datasets.ts'
+import { useTranslation } from '../../composables/useTranslation.ts'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+
+const datafairOrigin = computed(() => {
+  return props.resource.extras['datafairOrigin'] || props.dataset.extras['datafairOrigin']
+})
+const datafairDatasetId = computed(() => {
+  return props.resource.extras['datafairDatasetId'] || props.dataset.extras['datafairDatasetId']
+})
+const embed = computed(() => props.resource.extras['datafairEmbed'])
+
+const dataFairEmbedUrl = computed(() => {
+  // if the return value is null, a banner error is shown
+  if (!datafairOrigin.value || !datafairDatasetId.value)
+    return null
+  return `${datafairOrigin.value}/embed/dataset/${datafairDatasetId.value}/${embed.value}`
+})
+</script>

datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -211,6 +211,17 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <!-- Show Datafair embedded preview (koumoul) -->
+              <DatafairPreview
+                v-else-if="hasDatafairPreview"
+                :resource="resource"
+                :dataset="dataset"
+              />
+              <!-- Show Datafair embedded preview (koumoul) -->
+              <SwaggerClient
+                v-else-if="hasOpenAPIPreview"
+                :url="resource.extras['apidocUrl'] as string"
+              />
               <!-- Show regular preview for other file types -->
               <Preview
                 v-else
@@ -373,6 +384,8 @@ import ResourceIcon from './ResourceIcon.vue'
 import EditButton from './EditButton.vue'
 import DataStructure from './DataStructure.vue'
 import Preview from './Preview.vue'
+import { isOrganizationCertified } from '../../functions/organizations'
+import SwaggerClient from './Swagger.client.vue'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', ' www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
@@ -397,6 +410,7 @@ const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
+const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
@@ -421,6 +435,18 @@ const hasPmtiles = computed(() => {
   return props.resource.extras['analysis:parsing:pmtiles_url'] || props.resource.format === 'pmtiles'
 })
 
+const hasDatafairPreview = computed(() => {
+  // Checks if there are the corresponding extras for a datafair preview.
+  // Limited only to datasets published by certified organizations since it will load an iframe.
+  return isOrganizationCertified(props.dataset.organization) && props.resource.extras['datafairEmbed']
+})
+
+const hasOpenAPIPreview = computed(() => {
+  // Checks if there are the corresponding extras for a datafair preview.
+  // Limited only to datasets published by certified organizations since it will load an iframe.
+  return isOrganizationCertified(props.dataset.organization) && props.resource.extras['apidocUrl']
+})
+
 const format = computed(() => getResourceFormatIcon(props.resource.format) ? props.resource.format : t('Fichier'))
 
 const ogcService = computed(() => detectOgcService(props.resource))
@@ -464,7 +490,7 @@ const tabsOptions = computed(() => {
     options.push({ key: 'map', label: t('Carte') })
   }
 
-  if (hasTabularData.value || hasPreview.value) {
+  if (hasTabularData.value || hasPreview.value || hasDatafairPreview.value || hasOpenAPIPreview.value) {
     options.push({ key: 'data', label: t('Aperçu') })
   }
 

pages/design/previews.vue

@@ -62,6 +62,23 @@
           :dataset="xmlAndJsonDataset"
         />
       </div>
+      <div>
+        <h2>datafair Preview</h2>
+        <h3>Iframe preview</h3>
+        <p>One added tab: <b>Aperçu</b>. The iframe could show a map, data table or a structure field table.</p>
+        <ResourceAccordion
+          :resource="datafairDataset.resources.filter((r) => r.extras['datafairEmbed'] === 'map')[0]"
+          :dataset="datafairDataset"
+        />
+        <h3 class="mt-4">
+          API doc preview
+        </h3>
+        <p>One added tab: <b>Aperçu</b>. Show the api doc with a Swagger UI.</p>
+        <ResourceAccordion
+          :resource="datafairDataset.resources.filter((r) => r.extras['apidocUrl'])[0]"
+          :dataset="datafairDataset"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -75,4 +92,5 @@ const { data: pmtilesDataset } = await useAPI<Dataset>('/api/1/datasets/proposit
 const { data: ogcDataset } = await useAPI<Dataset>('/api/1/datasets/bassins-versant-topographiques-metropole-2023-bd-topage-r/')
 const { data: pdfDataset } = await useAPI<Dataset>('/api/1/datasets/etudes-impact-open-data/')
 const { data: xmlAndJsonDataset } = await useAPI<Dataset>('/api/1/datasets/paris-2024-sites-de-competition/')
+const { data: datafairDataset } = await useAPI<Dataset>('/api/1/datasets/mobilite-stationnement-des-parkings-en-temps-reel-1/')
 </script>