From d2e6d6aee3fad279f1988e08c93703b58058381b Mon Sep 17 00:00:00 2001
From: Gabriel Jablonski <gabriel.g.jablonski@gmail.com>
Date: Mon, 22 Dec 2025 20:10:45 -0300
Subject: [PATCH] fix: Improve handling of empty custom attributes list in
 settings (#13127)

## Description

This PR fixes a UX bug in the Custom Attributes settings page where
switching tabs becomes impossible when the currently selected tab has no
attributes.

Closes #13120

### The Problem
When viewing the Custom Attributes settings page, if one tab (e.g.,
Conversation) has no attributes, users could not switch to the other tab
(e.g., Contact) which might have attributes.

### Root Cause
The `SettingsLayout` component receives `no-records-found` prop which,
when true, hides the entire body content including the TabBar. Since the
TabBar was inside the body slot, it would be hidden whenever the current
tab had no attributes, preventing users from switching tabs.

### The Fix
- Removed the `no-records-found` and `no-records-message` props from
`SettingsLayout`
- Moved the empty state message inline within the body, displayed below
the TabBar
- The TabBar is now always visible regardless of whether there are
attributes in the selected tab

### Key Changes
- Modified `Index.vue` to handle empty state inline while keeping TabBar
accessible

## Type of change

- [X] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

1. Navigate to Settings > Custom Attributes
2. Ensure only one tab (e.g., Contact) has custom attributes
3. Switch to the empty tab (e.g., Conversation)
4. Verify the TabBar remains visible and the empty state message is
shown
5. Switch back to the tab with attributes
6. Verify attributes are displayed correctly
7. Repeat with both tabs empty and both tabs with attributes
---
 .../routes/dashboard/settings/attributes/Index.vue     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index bf93ffa1f..13b980c75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -150,8 +150,6 @@ const derivedAttributes = computed(() =>
   <SettingsLayout
     :is-loading="uiFlags.isFetching"
     :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
-    :no-records-found="!attributes.length"
-    :no-records-message="$t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404')"
   >
     <template #header>
       <BaseSettingsHeader
@@ -177,7 +175,7 @@ const derivedAttributes = computed(() =>
           class="max-w-xl"
           @tab-changed="onClickTabChange"
         />
-        <div class="grid gap-3">
+        <div v-if="derivedAttributes.length" class="grid gap-3">
           <AttributeListItem
             v-for="attribute in derivedAttributes"
             :key="attribute.id"
@@ -187,6 +185,12 @@ const derivedAttributes = computed(() =>
             @delete="handleDeleteAttribute"
           />
         </div>
+        <p
+          v-else
+          class="flex-1 py-20 text-n-slate-12 flex items-center justify-center text-base"
+        >
+          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
+        </p>
       </div>
     </template>
     <AddAttribute