FIX: Bring back empty state message when appropriate (#1446)

The Today section was added always, but a side-effect was that we hid the empty state component. This commit brings back the empty state
This commit is contained in:
Mark VanLandingham 2025-06-18 17:34:08 -05:00 committed by GitHub
parent cea8fd423e
commit cd14b0c0be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 2 deletions

View File

@ -84,6 +84,13 @@ export default class AiConversationsSidebarManager extends Service {
); );
} }
addEmptyStateClass() {
document.body.classList.toggle(
"has-empty-ai-conversations-sidebar",
!this.topics.length
);
}
forceCustomSidebar() { forceCustomSidebar() {
document.body.classList.add("has-ai-conversations-sidebar"); document.body.classList.add("has-ai-conversations-sidebar");
if (!this.sidebarState.isForcingSidebar) { if (!this.sidebarState.isForcingSidebar) {
@ -100,6 +107,7 @@ export default class AiConversationsSidebarManager extends Service {
// don't render sidebar multiple times // don't render sidebar multiple times
if (this._didInit) { if (this._didInit) {
this.addEmptyStateClass();
return true; return true;
} }
@ -107,6 +115,7 @@ export default class AiConversationsSidebarManager extends Service {
this.fetchMessages().then(() => { this.fetchMessages().then(() => {
this.sidebarState.setPanel(AI_CONVERSATIONS_PANEL); this.sidebarState.setPanel(AI_CONVERSATIONS_PANEL);
this.addEmptyStateClass();
}); });
return true; return true;
@ -140,6 +149,7 @@ export default class AiConversationsSidebarManager extends Service {
stopForcingCustomSidebar() { stopForcingCustomSidebar() {
document.body.classList.remove("has-ai-conversations-sidebar"); document.body.classList.remove("has-ai-conversations-sidebar");
document.body.classList.remove("has-empty-ai-conversations-sidebar");
const isAdmin = this.sidebarState.currentPanel?.key === ADMIN_PANEL; const isAdmin = this.sidebarState.currentPanel?.key === ADMIN_PANEL;
if (this.sidebarState.isForcingSidebar && !isAdmin) { if (this.sidebarState.isForcingSidebar && !isAdmin) {

View File

@ -23,8 +23,20 @@ body.has-ai-conversations-sidebar {
} }
} }
// we always have the "today" section rendered at the top of the sidebar but hide it when empty // When the sidebar is empty, we want to hide the "Today" header
.sidebar-section[data-section-name="today"]:has(.ai-bot-sidebar-empty-state) { // and only show the empty state component
&.has-empty-ai-conversations-sidebar
.sidebar-section[data-section-name="today"]
.sidebar-section-header-wrapper {
display: none;
}
// When the sidebar isn't empty, BUT "today" is empty, hide
// the entire section
&:not(.has-empty-ai-conversations-sidebar)
.sidebar-section[data-section-name="today"]:has(
.ai-bot-sidebar-empty-state
) {
display: none; display: none;
} }

View File

@ -226,6 +226,22 @@ RSpec.describe "AI Bot - Homepage", type: :system do
expect(sidebar).to have_section_link(pm.title) expect(sidebar).to have_section_link(pm.title)
end end
it "shows empty state when no PMs exist" do
pm.destroy!
visit "/"
header.click_bot_button
expect(page).to have_css(".sidebar-section .ai-bot-sidebar-empty-state", visible: true)
end
it "doesn't show empty state when a PM exists" do
visit "/"
header.click_bot_button
expect(page).to have_no_css(".sidebar-section .ai-bot-sidebar-empty-state")
end
it "displays last_7_days label in the sidebar" do it "displays last_7_days label in the sidebar" do
pm.update!(last_posted_at: Time.zone.now - 5.days) pm.update!(last_posted_at: Time.zone.now - 5.days)
visit "/" visit "/"