fix(dashboards): show no-data state in brand health drawer (#685)

* fix(dashboards): show no-data state in brand health drawer

When brand mention data is zero the drawer returned empty actions
showing no guidance. Now shows "No brand mention data available"
with guidance to contact marketing ops, under attention section.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): improve no-data message wording

Reword to emphasize engaging marketing ops for momentum
rather than setting up monitoring.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): use neutral card for no-data state

Replace the attention-section approach with a neutral blue
info card. When brand mentions are zero the drawer skips
both "Needs Your Attention" and "Performing Well" and shows
a neutral informational card guiding EDs to engage
marketing ops.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): add a11y attrs and soften no-data copy

Add role=status and aria-live=polite to no-data card. Remove
actionable CTA language from description.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

---------

Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: mrautela365

apps/lfx-one/src/app/modules/dashboards/executive-director/components/brand-health-drawer/brand-health-drawer.component.html

@@ -143,6 +143,22 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
       </div>
     }
 
+    @if (hasNoData()) {
+      <div
+        class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-blue-400 bg-white overflow-hidden"
+        role="status"
+        aria-live="polite"
+        data-testid="brand-health-drawer-no-data">
+        <div class="flex items-start gap-4 px-4 py-4">
+          <i class="fa-light fa-circle-info text-blue-500 mt-0.5" aria-hidden="true"></i>
+          <div class="flex flex-col gap-1 flex-1 min-w-0">
+            <span class="text-sm font-semibold text-gray-900">No brand mention data available</span>
+            <p class="text-sm text-gray-500">No brand mentions are currently available for this foundation</p>
+          </div>
+        </div>
+      </div>
+    }
+
     <!-- Mentions Trend -->
     <div class="flex flex-col gap-4 p-4 border border-gray-200 rounded-lg" data-testid="brand-health-drawer-mentions-trend">
       <div class="flex flex-col gap-1">

apps/lfx-one/src/app/modules/dashboards/executive-director/components/brand-health-drawer/brand-health-drawer.component.ts

@@ -82,6 +82,8 @@ export class BrandHealthDrawerComponent {
 
   protected readonly performingInsights: Signal<MarketingKeyInsight[]> = computed(() => this.split().performingInsights);
 
+  protected readonly hasNoData: Signal<boolean> = computed(() => this.data().totalMentions === 0);
+
   protected readonly formattedSentimentMom: Signal<string> = computed(() => {
     const v = this.data().sentimentMomChangePp;
     return (v > 0 ? '+' : '') + v.toFixed(1);