fix(intelligent-assistant): restore IA UI styling for RHDHBUGS-3733

workspaces/intelligent-assistant/.changeset/fix-ia-pf-style-override.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-intelligent-assistant': patch
+---
+
+Restore Intelligent Assistant UI styling after PatternFly updates: plain icon buttons, chat shell borders and message bar alignment, MCP settings/modal layout, notebook sidebar dividers, and related e2e test selectors.

workspaces/intelligent-assistant/e2e-tests/lightspeed.mcp.test.ts

@@ -37,6 +37,7 @@ import {
   openMcpSettingsPanel,
   closeMcpSettingsPanel,
   mcpConfigureModalSaveButton,
+  mcpConfigureModalCloseButton,
   mcpCredentialConfigureModal,
   mcpEditServerButton,
   mcpPersonalAccessTokenInput,
@@ -402,11 +403,7 @@ test.describe('Intelligent assistant MCP', () => {
             ).toBeVisible();
           }
 
-          await modal
-            .getByRole('button', {
-              name: translations['mcp.settings.closeConfigureModalAriaLabel'],
-            })
-            .click();
+          await mcpConfigureModalCloseButton(sharedPage, translations).click();
           await mcpToken.closeMcpPanel();
         });
 

workspaces/intelligent-assistant/e2e-tests/pages/LightspeedPage.ts

@@ -22,6 +22,11 @@ import {
   type McpServersListMock,
 } from '../fixtures/responses';
 import { waitForChatbotVisible } from '../utils/testHelper';
+import { chatHistoryMenuButton } from '../utils/chatHistoryDrawer';
+export {
+  openChatHistoryDrawer,
+  closeChatHistoryDrawer,
+} from '../utils/chatHistoryDrawer';
 import {
   LightspeedMessages,
   evaluateMessage,
@@ -57,41 +62,6 @@ export async function selectDisplayMode(
   await page.getByRole('menuitem', { name: modeMap[mode] }).click();
 }
 
-export async function openChatHistoryDrawer(page: Page, t: LightspeedMessages) {
-  const closeButton = page.getByRole('button', {
-    name: t['aria.closeDrawerPanel'],
-  });
-  const chatHistoryMenuButton = page.getByRole('button', {
-    name: t['aria.chatHistoryMenu'],
-  });
-  const expandHistoryButton = page.getByRole('button', {
-    name: t['tooltip.expandHistoryPanel'],
-  });
-
-  if (await closeButton.isVisible().catch(() => false)) {
-    return;
-  }
-
-  await expect(chatHistoryMenuButton.or(expandHistoryButton)).toBeVisible({
-    timeout: 10000,
-  });
-
-  if (await chatHistoryMenuButton.isVisible().catch(() => false)) {
-    await chatHistoryMenuButton.click();
-  } else {
-    await expandHistoryButton.click();
-  }
-
-  await expect(closeButton).toBeVisible({ timeout: 5000 });
-}
-
-export async function closeChatHistoryDrawer(
-  page: Page,
-  t: LightspeedMessages,
-) {
-  await page.getByRole('button', { name: t['aria.closeDrawerPanel'] }).click();
-}
-
 // Legacy app-legacy uses BackstagePage; NFS uses BUI header titles.
 const backstagePageContent = (page: Page) =>
   page.locator('main[class*="BackstagePage-root"], .bui-HeaderTitle').first();
@@ -144,11 +114,9 @@ export async function expectChatbotControlsVisible(
   t: LightspeedMessages,
 ) {
   await expect(page.locator('.pf-chatbot__header')).toBeVisible();
-  const chatHistoryMenuButton = page.getByRole('button', {
-    name: t['aria.chatHistoryMenu'],
-  });
-  if (await chatHistoryMenuButton.isVisible().catch(() => false)) {
-    await expect(chatHistoryMenuButton).toBeVisible();
+  const menu = chatHistoryMenuButton(page, t);
+  if (await menu.isVisible().catch(() => false)) {
+    await expect(menu).toBeVisible();
   }
   await expect(
     page.getByRole('button', { name: t['aria.options.label'] }),
@@ -301,6 +269,15 @@ export function mcpConfigureModalCancelButton(
   });
 }
 
+export function mcpConfigureModalCloseButton(
+  page: Page,
+  t: LightspeedMessages,
+): Locator {
+  return mcpCredentialConfigureModal(page).getByRole('button', {
+    name: t['mcp.settings.closeConfigureModalAriaLabel'],
+  });
+}
+
 /** Validation/helper line under the PAT field after Save (matches i18n `mcp.settings.token.*` copy). */
 export function mcpConfigureModalMessage(
   page: Page,
@@ -318,11 +295,7 @@ export async function expectMcpConfigureModalReady(
   page: Page,
   t: LightspeedMessages,
 ) {
-  await expect(
-    mcpCredentialConfigureModal(page).getByRole('button', {
-      name: t['mcp.settings.closeConfigureModalAriaLabel'],
-    }),
-  ).toBeVisible();
+  await expect(mcpConfigureModalCloseButton(page, t)).toBeVisible();
   await expect(mcpClearTokenInputButton(page, t)).toBeVisible();
   await expect(mcpConfigureModalSaveButton(page, t)).toBeVisible();
   await expect(mcpConfigureModalCancelButton(page, t)).toBeVisible();
@@ -348,7 +321,7 @@ export async function clickMcpServersNameColumn(
 }
 
 function mcpServersSettingsHeading(page: Page, t: LightspeedMessages): Locator {
-  return page.getByRole('heading', {
+  return page.getByRole('button', {
     name: t['mcp.settings.title'],
     exact: true,
   });

workspaces/intelligent-assistant/e2e-tests/utils/chatHistoryDrawer.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Page, expect } from '@playwright/test';
+import { LightspeedMessages } from './translations';
+
+/** Header control in overlay/docked modes (`aria.chatHistoryMenu`). */
+export function chatHistoryMenuButton(page: Page, t: LightspeedMessages) {
+  return page.getByRole('button', { name: t['aria.chatHistoryMenu'] });
+}
+
+/** Drawer panel close control (`aria.closeDrawerPanel`). */
+export function chatHistoryDrawerCloseButton(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  return page.getByRole('button', { name: t['aria.closeDrawerPanel'] });
+}
+
+/** Fullscreen collapsed strip expand control. */
+export function expandChatHistoryButton(page: Page, t: LightspeedMessages) {
+  return page.getByRole('button', { name: t['tooltip.expandHistoryPanel'] });
+}
+
+export async function isChatHistoryDrawerOpen(
+  page: Page,
+  t: LightspeedMessages,
+): Promise<boolean> {
+  return page
+    .getByPlaceholder(t['chatbox.search.placeholder'])
+    .isVisible()
+    .catch(() => false);
+}
+
+export async function openChatHistoryDrawer(page: Page, t: LightspeedMessages) {
+  if (await isChatHistoryDrawerOpen(page, t)) {
+    return;
+  }
+
+  const menu = chatHistoryMenuButton(page, t);
+  const expand = expandChatHistoryButton(page, t);
+
+  await expect(menu.or(expand)).toBeVisible({ timeout: 10_000 });
+
+  if (await menu.isVisible().catch(() => false)) {
+    await menu.click();
+  } else {
+    await expand.click();
+  }
+
+  await expect(
+    page.getByPlaceholder(t['chatbox.search.placeholder']),
+  ).toBeVisible({ timeout: 5000 });
+}
+
+export async function closeChatHistoryDrawer(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  if (!(await isChatHistoryDrawerOpen(page, t))) {
+    return;
+  }
+
+  const drawerClose = chatHistoryDrawerCloseButton(page, t);
+  if (await drawerClose.isVisible().catch(() => false)) {
+    await drawerClose.click();
+  } else {
+    await chatHistoryMenuButton(page, t).click();
+  }
+
+  await expect(
+    page.getByPlaceholder(t['chatbox.search.placeholder']),
+  ).toBeHidden({ timeout: 5000 });
+}

workspaces/intelligent-assistant/e2e-tests/utils/sidebar.ts

@@ -14,6 +14,13 @@
  * limitations under the License.
  */
 import { Page, expect, Locator } from '@playwright/test';
+import {
+  chatHistoryDrawerCloseButton,
+  chatHistoryMenuButton,
+  closeChatHistoryDrawer,
+  isChatHistoryDrawerOpen,
+  openChatHistoryDrawer,
+} from './chatHistoryDrawer';
 import { LightspeedMessages } from './translations';
 
 export async function assertChatDialogInitialState(
@@ -24,17 +31,13 @@ export async function assertChatDialogInitialState(
     translations['chatbox.header.title'],
   );
 
-  const chatHistoryMenuButton = page.getByRole('button', {
-    name: translations['aria.chatHistoryMenu'],
-  });
-  const closeDrawerButton = page.getByRole('button', {
-    name: translations['aria.closeDrawerPanel'],
-  });
+  const menu = chatHistoryMenuButton(page, translations);
+  const drawerClose = chatHistoryDrawerCloseButton(page, translations);
 
-  if (await chatHistoryMenuButton.isVisible().catch(() => false)) {
-    await expect(chatHistoryMenuButton).toBeVisible();
+  if (await menu.isVisible().catch(() => false)) {
+    await expect(menu).toBeVisible();
   } else {
-    await expect(closeDrawerButton).toBeVisible();
+    await expect(drawerClose).toBeVisible();
   }
 
   await assertDrawerState(page, 'open', translations);
@@ -91,41 +94,14 @@ export async function closeChatDrawer(
   page: Page,
   translations: LightspeedMessages,
 ) {
-  const closeButton = page.getByRole('button', {
-    name: translations['aria.closeDrawerPanel'],
-  });
-  await closeButton.click();
+  await closeChatHistoryDrawer(page, translations);
 }
 
 export async function openChatDrawer(
   page: Page,
   translations: LightspeedMessages,
 ) {
-  const closeButton = page.getByRole('button', {
-    name: translations['aria.closeDrawerPanel'],
-  });
-  const chatHistoryMenuButton = page.getByRole('button', {
-    name: translations['aria.chatHistoryMenu'],
-  });
-  const expandHistoryButton = page.getByRole('button', {
-    name: translations['tooltip.expandHistoryPanel'],
-  });
-
-  if (await closeButton.isVisible().catch(() => false)) {
-    return;
-  }
-
-  await expect(chatHistoryMenuButton.or(expandHistoryButton)).toBeVisible({
-    timeout: 10000,
-  });
-
-  if (await chatHistoryMenuButton.isVisible().catch(() => false)) {
-    await chatHistoryMenuButton.click();
-  } else {
-    await expandHistoryButton.click();
-  }
-
-  await expect(closeButton).toBeVisible({ timeout: 5000 });
+  await openChatHistoryDrawer(page, translations);
 }
 
 export async function assertDrawerState(
@@ -138,19 +114,24 @@ export async function assertDrawerState(
     closed: (locator: Locator) => expect(locator).toBeHidden(),
   };
 
-  const checks = [
-    page.getByRole('button', {
-      name: translations['aria.closeDrawerPanel'],
-    }),
-    page.getByPlaceholder(translations['chatbox.search.placeholder']),
-  ];
-
-  for (const locator of checks) {
-    await expectations[state](locator);
-  }
-
+  const search = page.getByPlaceholder(
+    translations['chatbox.search.placeholder'],
+  );
+  const drawerClose = chatHistoryDrawerCloseButton(page, translations);
   const resizeSeparator = page.locator('.pf-v6-c-drawer__splitter');
+
+  await expectations[state](search);
   await expectations[state](resizeSeparator);
+
+  if (state === 'open' && (await isChatHistoryDrawerOpen(page, translations))) {
+    if (await drawerClose.isVisible().catch(() => false)) {
+      await expect(drawerClose).toBeVisible();
+    } else {
+      await expect(chatHistoryMenuButton(page, translations)).toBeVisible();
+    }
+  } else if (state === 'closed') {
+    await expect(drawerClose).toBeHidden();
+  }
 }
 
 export async function verifySidePanelConversation(

workspaces/intelligent-assistant/plugins/intelligent-assistant/package.json

@@ -77,6 +77,7 @@
     "@patternfly/chatbot": "6.9.0-prerelease.2",
     "@patternfly/react-core": "6.6.0",
     "@patternfly/react-icons": "^6.5.0",
+    "@patternfly/react-styles": "^6.6.1",
     "@patternfly/react-table": "^6.4.1",
     "@red-hat-developer-hub/backstage-plugin-app-react": "^1.0.0",
     "@red-hat-developer-hub/backstage-plugin-intelligent-assistant-common": "workspace:^",