Merge pull request #2625 from ankaboot-source/fix/sources-tab-ui-polish

baderdean · web-flow · commit 5456e72a3f32 · 2026-02-28T11:00:42.000+01:00
fix: polish sources tab cards and loading state
diff --git a/frontend/src/pages/sources.vue b/frontend/src/pages/sources.vue
@@ -6,7 +6,39 @@
       <h1 class="text-xl font-semibold">{{ t('sources') }}</h1>
     </div>
 
+    <div
+      v-if="
+        $leadminer.isLoadingMiningSources && !$leadminer.miningSources.length
+      "
+      class="grid gap-3"
+    >
+      <div
+        v-for="n in 3"
+        :key="`source-skeleton-${n}`"
+        class="border border-surface-200 rounded-md p-4"
+      >
+        <div class="flex items-center justify-between gap-3 flex-wrap">
+          <div class="flex flex-col gap-2">
+            <Skeleton width="8rem" height="1rem" />
+            <Skeleton width="14rem" height="0.85rem" />
+          </div>
+          <div class="flex items-center gap-2">
+            <Skeleton width="5.5rem" height="2rem" />
+            <Skeleton width="2.8rem" height="1.6rem" />
+            <Skeleton width="5.2rem" height="1.75rem" />
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4">
+          <Skeleton height="4.5rem" />
+          <Skeleton height="4.5rem" />
+          <Skeleton height="4.5rem" />
+        </div>
+      </div>
+    </div>
+
     <DataView
+      v-else
       :value="$leadminer.miningSources"
       data-key="email"
       :paginator="true"
@@ -18,98 +50,73 @@
         </div>
       </template>
       <template #list="slotProps">
-        <div class="grid gap-2">
+        <div class="grid gap-3">
           <div
             v-for="source in slotProps.items"
             :key="source.email"
             class="border border-surface-200 rounded-md p-4"
           >
-            <div class="flex items-center justify-between gap-2">
-              <div class="flex items-center gap-2">
-                <div class="font-medium">{{ source.email }}</div>
-                <Tag
-                  :value="
-                    source.isValid ? t('connected') : t('credential_expired')
-                  "
-                  :severity="source.isValid ? 'success' : 'warn'"
-                />
+            <div class="flex items-start justify-between gap-3 flex-wrap">
+              <div>
+                <div class="font-medium">{{ source.type }}</div>
+                <div class="text-sm text-surface-500">{{ source.email }}</div>
               </div>
-              <div class="flex items-center gap-2">
-                <Button
-                  v-if="isActiveMiningSource(source)"
-                  size="small"
-                  outlined
-                  severity="warning"
-                  icon="pi pi-stop"
-                  :label="t('stop_mining')"
-                  :loading="isStoppingMining"
-                  @click="confirmStopMining"
-                />
+
+              <div class="flex items-center justify-end gap-2 flex-wrap">
+                <div class="flex items-center gap-2 text-sm text-surface-600">
+                  <span>{{ t('continuous_mining') }}</span>
+                  <ToggleSwitch
+                    v-model="source.passive_mining"
+                    @update:model-value="
+                      (val: boolean) =>
+                        togglePassiveMining(source.email, source.type, val)
+                    "
+                  />
+                </div>
+
                 <Button
                   size="small"
                   outlined
                   severity="danger"
                   icon="pi pi-trash"
-                  :label="t('delete_source')"
+                  :label="t('remove')"
                   :loading="
                     isDeleting && deletingSource?.email === source.email
                   "
                   @click="openDeleteDialog(source)"
                 />
+
+                <Tag
+                  :value="
+                    source.isValid ? t('connected') : t('credential_expired')
+                  "
+                  :severity="source.isValid ? 'success' : 'warn'"
+                />
               </div>
             </div>
 
-            <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 mt-4 text-sm">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-4 text-sm">
               <div class="p-2 rounded bg-surface-50">
-                <div class="text-surface-500">{{ t('type') }}</div>
-                <div class="flex items-center gap-2 font-medium">
+                <div class="text-surface-500">{{ t('provider') }}</div>
+                <div class="flex items-center gap-2 font-semibold mt-1">
                   <i
                     :class="getIcon(source.type)"
                     class="text-secondary size-xs"
                   ></i>
-                  <span>{{ source.type }}</span>
-                </div>
-              </div>
-
-              <div class="p-2 rounded bg-surface-50">
-                <div class="text-surface-500">{{ t('passive_mining') }}</div>
-                <div class="flex items-center gap-2">
-                  <span
-                    v-if="source.passive_mining"
-                    class="relative flex h-3 w-3"
-                  >
-                    <span
-                      class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
-                    ></span>
-                    <span
-                      class="relative inline-flex h-3 w-3 rounded-full bg-green-500"
-                    ></span>
-                  </span>
-                  <span
-                    v-else
-                    class="inline-flex h-3 w-3 rounded-full bg-gray-500"
-                  ></span>
-                  <span>{{
-                    source.passive_mining ? t('enabled') : t('disabled')
-                  }}</span>
-                  <ToggleSwitch
-                    v-model="source.passive_mining"
-                    @update:model-value="
-                      (val: boolean) =>
-                        togglePassiveMining(source.email, source.type, val)
-                    "
-                  />
+                  <span class="capitalize">{{ source.type }}</span>
                 </div>
               </div>
 
               <div class="p-2 rounded bg-surface-50">
                 <div class="text-surface-500">{{ t('total_contacts') }}</div>
-                <div class="font-medium">{{ source.totalContacts || 0 }}</div>
+                <div class="font-semibold mt-1">
+                  {{ source.totalContacts || 0 }}
+                </div>
               </div>
 
               <div class="p-2 rounded bg-surface-50">
-                <div class="text-surface-500">{{ t('last_mining') }}</div>
-                <div class="font-medium">
+                <div class="text-surface-500">{{ t('last_extraction') }}</div>
+                <div class="font-semibold mt-1">
                   {{
                     source.lastMiningDate
                       ? formatDate(source.lastMiningDate)
@@ -176,19 +183,19 @@
     <Dialog
       v-model:visible="deleteDialogVisible"
       modal
-      :header="t('delete_source')"
+      :header="t('remove_source')"
       :style="{ width: '28rem', maxWidth: '95vw' }"
     >
       <div class="text-sm text-surface-700">
-        {{ t('delete_source_confirm') }}
+        {{ t('remove_source_confirm') }}
       </div>
 
       <template #footer>
         <div class="flex justify-end gap-2 w-full">
           <Button outlined :label="t('cancel')" @click="closeDeleteDialog" />
           <Button
             severity="danger"
-            :label="t('delete_source')"
+            :label="t('remove')"
             :loading="isDeleting"
             @click="confirmDelete"
           />
@@ -211,7 +218,6 @@ const $toast = useToast();
 const deleteDialogVisible = ref(false);
 const deletingSource = ref<MiningSource | null>(null);
 const isDeleting = ref(false);
-const isStoppingMining = ref(false);
 
 function getIcon(type: string) {
   switch (type) {
@@ -268,7 +274,7 @@ async function confirmDelete() {
   } catch (error) {
     $toast.add({
       severity: 'error',
-      summary: t('delete_source_failed'),
+      summary: t('remove_source_failed'),
       detail: (error as Error).message,
       life: 4500,
     });
@@ -277,28 +283,6 @@ async function confirmDelete() {
   }
 }
 
-async function confirmStopMining() {
-  isStoppingMining.value = true;
-  try {
-    await $leadminer.stopMining(true, null);
-    $toast.add({
-      severity: 'success',
-      summary: t('mining_stopped'),
-      detail: t('mining_stopped_detail'),
-      life: 3500,
-    });
-  } catch (error) {
-    $toast.add({
-      severity: 'error',
-      summary: t('stop_mining_failed'),
-      detail: (error as Error).message,
-      life: 4500,
-    });
-  } finally {
-    isStoppingMining.value = false;
-  }
-}
-
 async function togglePassiveMining(
   email: string,
   type: string,
@@ -319,6 +303,13 @@ onMounted(async () => {
     "sources": "Sources",
     "no_sources": "No sources yet",
     "email": "Email",
+    "provider": "Provider",
+    "last_extraction": "Last extraction",
+    "continuous_mining": "Continuous mining",
+    "remove": "Remove",
+    "remove_source": "Remove source",
+    "remove_source_confirm": "Remove this mining source permanently? This action cannot be undone.",
+    "remove_source_failed": "Unable to remove source",
     "type": "Type",
     "passive_mining": "Passive mining",
     "credentials": "Credentials",
@@ -350,6 +341,13 @@ onMounted(async () => {
     "sources": "Sources",
     "no_sources": "Aucune source",
     "email": "Email",
+    "provider": "Fournisseur",
+    "last_extraction": "Derniere extraction",
+    "continuous_mining": "Extraction continue",
+    "remove": "Retirer",
+    "remove_source": "Retirer la source",
+    "remove_source_confirm": "Retirer definitivement cette source de minage ? Cette action est irreversible.",
+    "remove_source_failed": "Impossible de retirer la source",
     "type": "Type",
     "passive_mining": "Extraction passive",
     "credentials": "Identifiants",
diff --git a/frontend/src/stores/leadminer.ts b/frontend/src/stores/leadminer.ts
@@ -29,6 +29,7 @@ export const useLeadminerStore = defineStore('leadminer', () => {
 
   const miningStartedAt = ref<number | undefined>(); // timestamp in performance.now() time (ms)
   const miningSources = ref<MiningSource[]>([]);
+  const isLoadingMiningSources = ref(false);
   const boxes = ref<BoxNode[]>([]);
   const extractSignatures = ref(true);
   const selectedBoxes = ref<TreeSelectionKeys>([]);
@@ -134,11 +135,17 @@ export const useLeadminerStore = defineStore('leadminer', () => {
    * @throws {Error} Throws an error if there is an issue while retrieving mining sources.
    */
   async function fetchMiningSources() {
-    miningSources.value =
-      (await getMiningSources()).map((source) => ({
-        isValid: true,
-        ...source,
-      })) ?? [];
+    isLoadingMiningSources.value = true;
+
+    try {
+      miningSources.value =
+        (await getMiningSources()).map((source) => ({
+          isValid: true,
+          ...source,
+        })) ?? [];
+    } finally {
+      isLoadingMiningSources.value = false;
+    }
   }
 
   async function fetchInbox() {
@@ -535,6 +542,7 @@ export const useLeadminerStore = defineStore('leadminer', () => {
     miningType,
     miningStartedAt,
     miningSources,
+    isLoadingMiningSources,
     activeMiningSource,
     boxes,
     selectedBoxes,
diff --git a/supabase/functions/.env.dev b/supabase/functions/.env.dev
@@ -1,6 +1,6 @@
 LEADMINER_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 LEADMINER_HASH_SECRET=change_me
-LEADMINER_PROJECT_URL=http://host.docker.internal:54321/
+SUPABASE_PROJECT_URL=http://host.docker.internal:54321/
 LEADMINER_SECRET_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
 
 # Use an SMTP testing service like Ethereal for development https://ethereal.email/
diff --git a/supabase/functions/.env.prod b/supabase/functions/.env.prod
@@ -1,6 +1,6 @@
 LEADMINER_ANON_KEY=      # ( REQUIRED ) Supabase anon key
 LEADMINER_HASH_SECRET=   # ( REQUIRED ) The hash secret used by backend
-LEADMINER_PROJECT_URL=   # ( REQUIRED ) Supabase project url
+SUPABASE_PROJECT_URL=    # ( REQUIRED ) Supabase project url
 LEADMINER_SECRET_TOKEN=  # ( REQUIRED ) Supabase service role key
 
 SMTP_HOST=
diff --git a/supabase/functions/_shared/url.test.ts b/supabase/functions/_shared/url.test.ts
@@ -2,7 +2,7 @@ import {
   assertEquals,
   assertThrows,
 } from "https://deno.land/std@0.224.0/assert/mod.ts";
-import { resolvePublicBaseUrl } from "./url.ts";
+import { resolveCampaignBaseUrlFromEnv, resolvePublicBaseUrl } from "./url.ts";
 
 Deno.test("resolvePublicBaseUrl prefers explicit public URL", () => {
   const value = resolvePublicBaseUrl(
@@ -20,3 +20,22 @@ Deno.test("resolvePublicBaseUrl falls back to secondary URL", () => {
 Deno.test("resolvePublicBaseUrl throws when both values are missing", () => {
   assertThrows(() => resolvePublicBaseUrl());
 });
+
+Deno.test("resolveCampaignBaseUrlFromEnv prefers SUPABASE_PROJECT_URL", () => {
+  const value = resolveCampaignBaseUrlFromEnv((key) => {
+    if (key === "SUPABASE_PROJECT_URL") return "https://db-qa.domain.io/";
+    if (key === "SUPABASE_URL") return "http://kong:8000";
+    return undefined;
+  });
+
+  assertEquals(value, "https://db-qa.domain.io");
+});
+
+Deno.test("resolveCampaignBaseUrlFromEnv falls back to SUPABASE_URL", () => {
+  const value = resolveCampaignBaseUrlFromEnv((key) => {
+    if (key === "SUPABASE_URL") return "http://localhost:54321/";
+    return undefined;
+  });
+
+  assertEquals(value, "http://localhost:54321");
+});
diff --git a/supabase/functions/_shared/url.ts b/supabase/functions/_shared/url.ts
@@ -2,6 +2,8 @@ function normalizeBaseUrl(url: string): string {
   return url.replace(/\/+$/, "");
 }
 
+type EnvReader = (key: string) => string | undefined;
+
 export function resolvePublicBaseUrl(
   explicitPublicUrl?: string,
   fallbackUrl?: string,
@@ -12,3 +14,10 @@ export function resolvePublicBaseUrl(
   }
   return normalizeBaseUrl(candidate);
 }
+
+export function resolveCampaignBaseUrlFromEnv(readEnv: EnvReader): string {
+  return resolvePublicBaseUrl(
+    readEnv("SUPABASE_PROJECT_URL"),
+    readEnv("SUPABASE_URL"),
+  );
+}
diff --git a/supabase/functions/email-campaigns/index.ts b/supabase/functions/email-campaigns/index.ts

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,8 @@ function normalizeBaseUrl(url: string): string {`
`2`	`2`	`return url.replace(/\/+$/, "");`
`3`	`3`	`}`
`4`	`4`
	`5`	`+type EnvReader = (key: string) => string \| undefined;`
	`6`	`+`
`5`	`7`	`export function resolvePublicBaseUrl(`
`6`	`8`	`explicitPublicUrl?: string,`
`7`	`9`	`fallbackUrl?: string,`
`@@ -12,3 +14,10 @@ export function resolvePublicBaseUrl(`
`12`	`14`	`}`
`13`	`15`	`return normalizeBaseUrl(candidate);`
`14`	`16`	`}`
	`17`	`+`
	`18`	`+export function resolveCampaignBaseUrlFromEnv(readEnv: EnvReader): string {`
	`19`	`+ return resolvePublicBaseUrl(`
	`20`	`+ readEnv("SUPABASE_PROJECT_URL"),`
	`21`	`+ readEnv("SUPABASE_URL"),`
	`22`	`+ );`
	`23`	`+}`