feat: migrate toasts to vue-sonner

app.vue

@@ -1,6 +1,11 @@
 <template>
   <NuxtLoadingIndicator color="var(--blue-cumulus-main-526)" />
   <NuxtRouteAnnouncer />
+  <Toaster
+    position="bottom-right"
+    :duration="4000"
+    close-button
+  />
   <div class="datagouv-components">
     <div
       id="tooltips"
@@ -13,7 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import { datagouv } from '@datagouv/components-next'
+import 'vue-sonner/style.css'
+import { Toaster, datagouv } from '@datagouv/components-next'
 import type { UseFetchFunction } from '@datagouv/components-next'
 import CdataLink from './components/CdataLink.vue'
 import { ClientOnly, TextClamp } from '#components'

components/AdminTable/AdminCommunityResourcesTable/AdminCommunityResourcesTable.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script setup lang="ts">
-import { useFormatDate, type CommunityResource, type Resource, type SchemaResponseData } from '@datagouv/components-next'
+import { useFormatDate, type CommunityResource, type Resource, type SchemaResponseData, toast } from '@datagouv/components-next'
 import AdminBadge from '../../../components/AdminBadge/AdminBadge.vue'
 import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
@@ -112,7 +112,6 @@ const emit = defineEmits<{
 
 const { t } = useTranslation()
 const { formatDate } = useFormatDate()
-const { toast } = useToast()
 
 const { data: schemas } = await useAPI<SchemaResponseData>('/api/1/datasets/schemas/')
 

components/AdminTable/AdminContactPointsTable/AdminContactPointsTable.vue

@@ -123,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { ContactPoint, ContactPointRole, Organization } from '@datagouv/components-next'
 import { RiPencilLine } from '@remixicon/vue'
 import AdminBadge from '~/components/AdminBadge/AdminBadge.vue'
@@ -143,7 +143,6 @@ const emit = defineEmits<{
 const { $api } = useNuxtApp()
 
 const { t } = useTranslation()
-const { toast } = useToast()
 
 const { form: newContactForm, getFirstError, touch, validate } = useForm({
   ...defaultContactForm,

components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue

@@ -40,15 +40,14 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, toast } from '@datagouv/components-next'
 import type { Dataservice, DatasetV2 } from '@datagouv/components-next'
 import type { DatasetSuggest } from '~/types/types'
 
 const config = useRuntimeConfig()
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/dataservices/${route.params.id}`)

components/Dataservices/AdminUpdateDataservicePage.vue

@@ -1,6 +1,6 @@
 <template>
   <LoadingBlock
     v-slot="{ data: dataservice }"
     :status
     :data="dataservice"
   >
@@ -139,15 +139,14 @@
 </template>
 
 <script setup lang="ts">
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { Dataservice } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
 import DescribeDataservice from '~/components/Dataservices/DescribeDataservice.vue'
 import type { DataserviceForm } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
@@ -202,10 +201,10 @@
     })
     await refresh()
     if (dataservice.value?.archived_at) {
-      toast.success(t('API désarchivée !'))
+      toast.success(t('API archivée !'))
     }
     else {
-      toast.success(t('API archivée !'))
+      toast.success(t('API désarchivée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
@@ -225,10 +224,10 @@
     })
     await refresh()
     if (dataservice.value?.private) {
-      toast.success(t('API publiée !'))
+      toast.success(t('API passée en brouillon !'))
     }
     else {
-      toast.success(t('API passée en brouillon !'))
+      toast.success(t('API publiée !'))
     }
   }
   finally {

components/Dataservices/SearchPage.vue

@@ -101,7 +101,7 @@
         </div>
         <transition mode="out-in">
           <LoadingBlock
             v-slot="{ data: searchResults }"
             :status="searchResultsStatus"
             :data="searchResults"
           >
@@ -160,7 +160,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, LoadingBlock, Pagination, getLink } from '@datagouv/components-next'
+import { BrandedButton, LoadingBlock, Pagination, getLink, toast } from '@datagouv/components-next'
 import type { Dataservice, Organization, OrganizationOrSuggest, OrganizationSuggest } from '@datagouv/components-next'
 import { RiCloseCircleLine } from '@remixicon/vue'
 import { computedAsync, debouncedRef, useUrlSearchParams } from '@vueuse/core'
@@ -181,7 +181,6 @@
 const route = useRoute()
 const { t } = useTranslation()
 const config = useRuntimeConfig()
-const { toast } = useToast()
 const { $api } = useNuxtApp()
 
 async function suggestOrganizations(q: string) {

components/Datasets/AdminDatasetResourcesPage.vue

@@ -74,7 +74,7 @@
     />
 
     <LoadingBlock
       v-slot="{ data: resourcesPage }"
       :status
       :data="resourcesPage"
     >
@@ -198,7 +198,7 @@
 </template>
 
 <script setup lang="ts">
-import { getResourceLabel, BrandedButton, LoadingBlock, Pagination, Tooltip, useFormatDate, type DatasetV2, type Resource, type SchemaResponseData } from '@datagouv/components-next'
+import { getResourceLabel, BrandedButton, LoadingBlock, Pagination, Tooltip, useFormatDate, type DatasetV2, type Resource, type SchemaResponseData, toast } from '@datagouv/components-next'
 import { RiArrowDownLine, RiArrowUpLine, RiCheckLine, RiDraggable } from '@remixicon/vue'
 import { useSortable } from '@vueuse/integrations/useSortable'
 import { useTemplateRef } from 'vue'
@@ -210,7 +210,6 @@
 import type { AdminBadgeType, CommunityResourceForm, PaginatedArray, ResourceForm } from '~/types/types'
 
 const route = useRoute()
-const { toast } = useToast()
 const { $api } = useNuxtApp()
 const { formatDate } = useFormatDate()
 

components/Datasets/AdminUpdateDatasetPage.vue

@@ -1,6 +1,6 @@
 <template>
   <LoadingBlock
     v-slot="{ data: dataset }"
     :status
     :data="dataset"
   >
@@ -132,8 +132,8 @@
 </template>
 
 <script setup lang="ts">
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { DatasetV2WithFullObject } from '@datagouv/components-next'
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
 import DescribeDataset from '~/components/Datasets/DescribeDataset.vue'
 import type { DatasetForm } from '~/types/types'
@@ -144,8 +144,6 @@
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
 
-const { toast } = useToast()
-
 const url = computed(() => `/api/2/datasets/${route.params.id}/`)
 const { data: dataset, status, refresh } = await useAPI<DatasetV2WithFullObject>(url, {
   headers: {
@@ -217,11 +215,11 @@
       body: JSON.stringify(datasetToApi(datasetForm.value, { private: !datasetForm.value.private })),
     })
     await refresh()
-    if (datasetForm.value.private) {
-      toast.success(t('Jeu de données publié !'))
+    if (dataset.value?.private) {
+      toast.success(t('Jeu de données passé en brouillon !'))
     }
     else {
-      toast.success(t('Jeu de données passé en brouillon !'))
+      toast.success(t('Jeu de données publié !'))
     }
   }
   finally {
@@ -255,10 +253,10 @@
     })
     await refresh()
     if (dataset.value?.archived) {
-      toast.success(t('Jeu de données désarchivé !'))
+      toast.success(t('Jeu de données archivé !'))
     }
     else {
-      toast.success(t('Jeu de données archivé !'))
+      toast.success(t('Jeu de données désarchivé !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }

components/Datasets/DescribeResource.vue

@@ -394,7 +394,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, getResourceLabel, LoadingBlock, RESOURCE_TYPE, SimpleBanner, TranslationT } from '@datagouv/components-next'
+import { BrandedButton, getResourceLabel, LoadingBlock, RESOURCE_TYPE, SimpleBanner, TranslationT, toast } from '@datagouv/components-next'
 import type { DatasetV2, SchemaResponseData } from '@datagouv/components-next'
 import { RiAddLine } from '@remixicon/vue'
 import SelectGroup from '../Form/SelectGroup/SelectGroup.vue'
@@ -454,8 +454,6 @@ const setFiles = (files: Array<File>) => {
 const { data: extensions, status } = await useAPI<Array<string>>('/api/1/datasets/extensions/', { lazy: true })
 const { data: schemasData, status: schemaStatus } = await useAPI<SchemaResponseData>('/api/1/datasets/schemas/', { lazy: true })
 
-const { toast } = useToast()
-
 watch(newFile, (file) => {
   // console.log('[DescribeResource] newFile changed:', file ? file.name : 'null')
   if (file && form.value.filetype === 'file') {

components/Datasets/SearchPage.vue

@@ -281,7 +281,7 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, getLink, getOrganizationTypes, LoadingBlock, Pagination, OTHER, USER } from '@datagouv/components-next'
+import { BrandedButton, getLink, getOrganizationTypes, LoadingBlock, Pagination, OTHER, USER, toast } from '@datagouv/components-next'
 import type { DatasetV2, License, Organization, OrganizationTypes, RegisteredSchema, TranslatedBadge, OrganizationOrSuggest } from '@datagouv/components-next'
 import { ref, computed, type Component } from 'vue'
 import { RiCloseCircleLine, RiDownloadLine } from '@remixicon/vue'
@@ -309,7 +309,6 @@ type Facets = {
 const { $api } = useNuxtApp()
 const { t } = useTranslation()
 const config = useRuntimeConfig()
-const { toast } = useToast()
 
 const route = useRoute()
 const params = useUrlSearchParams<DatasetSearchParams>('history', {

components/Organization/Search.vue

@@ -60,13 +60,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { OrganizationLogo, type Organization } from '@datagouv/components-next'
+import { OrganizationLogo, type Organization, toast } from '@datagouv/components-next'
 import { watchDebounced } from '@vueuse/core'
 import { RiSearch2Line } from '@remixicon/vue'
 import { Combobox, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptions } from '@headlessui/vue'
 
 const { t } = useTranslation()
-const { toast } = useToast()
 const config = useRuntimeConfig()
 const q = ref('')
 const { $api } = useNuxtApp()

components/Pages/SiteEditoPage.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { toast } from '@datagouv/components-next'
 import type { Site } from '@datagouv/components-next'
 import AdminBreadcrumb from '~/components/Breadcrumbs/AdminBreadcrumb.vue'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
@@ -46,7 +47,6 @@ definePageMeta({
 })
 
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 const { t } = useTranslation()
 
 const loading = ref(false)

components/Reuses/AdminUpdateReuseDataservicesPage.vue

@@ -16,13 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { Dataservice, Reuse } from '@datagouv/components-next'
 import DataservicesSelect from '../DataservicesSelect.vue'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/reuses/${route.params.id}`)

components/Reuses/AdminUpdateReuseDatasetsPage.vue

@@ -17,13 +17,12 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton } from '@datagouv/components-next'
+import { BrandedButton, toast } from '@datagouv/components-next'
 import type { Dataset, DatasetV2, Reuse } from '@datagouv/components-next'
 import type { DatasetSuggest } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const url = computed(() => `/api/1/reuses/${route.params.id}`)

components/Reuses/AdminUpdateReusePage.vue

@@ -140,15 +140,14 @@
 </template>
 
 <script setup lang="ts">
-import { BannerAction, BrandedButton, LoadingBlock, TranslationT } from '@datagouv/components-next'
+import { BannerAction, BrandedButton, LoadingBlock, TranslationT, toast } from '@datagouv/components-next'
 import type { Reuse, ReuseTopic, ReuseType } from '@datagouv/components-next'
 import { RiArchiveLine, RiArrowGoBackLine, RiDeleteBin6Line } from '@remixicon/vue'
 import DescribeReuse from '~/components/Reuses/DescribeReuse.vue'
 import type { ReuseForm } from '~/types/types'
 
 const { t } = useTranslation()
 const { $api, $fileApi } = useNuxtApp()
-const { toast } = useToast()
 
 const route = useRoute()
 const { start, finish, isLoading } = useLoadingIndicator()
@@ -223,10 +222,10 @@ async function archiveReuse() {
 
     await refresh()
     if (reuse.value?.archived) {
-      toast.success(t('Réutilisation désarchivée !'))
+      toast.success(t('Réutilisation archivée !'))
     }
     else {
-      toast.success(t('Réutilisation archivée !'))
+      toast.success(t('Réutilisation désarchivée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
@@ -249,10 +248,10 @@ async function switchReusePrivate() {
 
     await refresh()
     if (reuse.value?.private) {
-      toast.success(t('Réutilisation publiée !'))
+      toast.success(t('Réutilisation passée en brouillon !'))
     }
     else {
-      toast.success(t('Réutilisation passée en brouillon !'))
+      toast.success(t('Réutilisation publiée !'))
     }
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }

components/SiteHeader/SiteHeader.vue

@@ -503,7 +503,7 @@
 
 <script setup lang="ts">
 import { NuxtImg } from '#components'
-import { AnimatedLoader, BrandedButton, Toggletip, useGetUserAvatar } from '@datagouv/components-next'
+import { AnimatedLoader, BrandedButton, Toggletip, useGetUserAvatar, toast } from '@datagouv/components-next'
 import { RiAccountCircleLine, RiAddLine, RiDatabase2Line, RiInbox2Line, RiLockLine, RiMenuLine, RiSearchLine, RiRobot2Line, RiLineChartLine, RiServerLine, RiArticleLine, RiSettings3Line, RiLogoutBoxRLine, RiBuilding2Line, RiCloseLine } from '@remixicon/vue'
 import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems, Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import CdataLink from '../CdataLink.vue'
@@ -568,8 +568,6 @@ const logout = async () => {
   toast.success(t('Vous avez été déconnecté.'))
 }
 
-const { toast } = useToast()
-
 onMounted(() => {
   // TODO: remove this logic when we don't rely on udata flash messages
   // following https://github.com/opendatateam/udata/pull/3348

components/Support/Choices.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { useActiveDescendant, BrandedButton, MarkdownViewer, SimpleBanner } from '@datagouv/components-next'
+import { useActiveDescendant, BrandedButton, MarkdownViewer, SimpleBanner, toast } from '@datagouv/components-next'
 import type { Question, QuestionWithSegment } from '~/types/support'
 
 const emit = defineEmits<{
@@ -115,8 +115,6 @@ const answerResponse = ref('')
 const loading = ref(false)
 const messageSent = ref(false)
 
-const { toast } = useToast()
-
 const { isActive, active, focusOut, handleKeyPressForActiveDescendant } = useActiveDescendant('choices' in props.question ? props.question.choices : [], 'horizontal')
 
 const { form, touch, getFirstError, validate } = useForm({