Skip to content

[release-4.19] OLS-2892: Use separate menu for the Ask/Troubleshooting mode #1867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-bot merged 1 commit into from
Apr 24, 2026
+75 −62
Merged

[release-4.19] OLS-2892: Use separate menu for the Ask/Troubleshooting mode #1867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions locales/en/plugin__lightspeed-console-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"Approve": "Approve",
"Are you sure you want to erase the current chat conversation and start a new chat? This action cannot be undone.": "Are you sure you want to erase the current chat conversation and start a new chat? This action cannot be undone.",
"Ask": "Ask",
"Ask a question...": "Ask a question...",
"Attach": "Attach",
"Attach cluster info": "Attach cluster info",
"Bad response": "Bad response",
Expand All @@ -31,6 +32,7 @@
"Copy to clipboard": "Copy to clipboard",
"Currently viewing": "Currently viewing",
"Denial failed:": "Denial failed:",
"Describe the issue you're troubleshooting...": "Describe the issue you're troubleshooting...",
"Diagnosing issues and finding solutions": "Diagnosing issues and finding solutions",
"Dismiss": "Dismiss",
"Do not include personal information or other sensitive information in your feedback. Feedback may be used to improve Red Hat's products or services.": "Do not include personal information or other sensitive information in your feedback. Feedback may be used to improve Red Hat's products or services.",
Expand Down Expand Up @@ -103,12 +105,10 @@
"Red Hat OpenShift Lightspeed": "Red Hat OpenShift Lightspeed",
"Refresh": "Refresh",
"Reject": "Reject",
"Remove Troubleshooting mode": "Remove Troubleshooting mode",
"Restore": "Restore",
"Revert to original": "Revert to original",
"Review required": "Review required",
"Save": "Save",
"Send a message...": "Send a message...",
"Status": "Status",
"Stay": "Stay",
"Structured content": "Structured content",
Expand Down
109 changes: 62 additions & 47 deletions src/components/Prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,13 @@ import { MessageBar } from '@patternfly/chatbot';
import {
Alert,
AlertActionCloseButton,
Divider,
DropdownItem,
DropdownList,
Label,
MenuToggle,
Select,
SelectList,
SelectOption,
Spinner,
Title,
Tooltip,
Expand All @@ -26,7 +29,7 @@ import {
FileCodeIcon,
FileUploadIcon,
InfoCircleIcon,
OutlinedQuestionCircleIcon,
OutlinedCommentIcon,
PlusIcon,
TaskIcon,
WrenchIcon,
Expand Down Expand Up @@ -130,6 +133,7 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
const [isLogModalOpen, , openLogModal, closeLogModal] = useBoolean(false);
const [isLoading, , setLoading, setLoaded] = useBoolean(false);
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const [isModeMenuOpen, setIsModeMenuOpen] = React.useState<boolean>(false);
const [streamController, setStreamController] = React.useState(new AbortController());
const [validated, setValidated] = React.useState<'default' | 'error'>('default');

Expand Down Expand Up @@ -294,34 +298,13 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
<DropdownItem icon={<FileUploadIcon />} key="upload" value={AttachmentTypes.YAMLUpload}>
{t('Upload from computer')}
</DropdownItem>
<Divider key="divider-1" />
{isTroubleshooting ? (
<DropdownItem
description={t('Expert guidance and clear answers')}
icon={<OutlinedQuestionCircleIcon />}
id="ask"
value="ask"
>
{t('Ask')}
</DropdownItem>
) : (
<DropdownItem
description={t('Diagnosing issues and finding solutions')}
icon={<WrenchIcon />}
id="troubleshooting"
value="troubleshooting"
>
{t('Troubleshooting')}
</DropdownItem>
)}
</DropdownList>,
],
[
events.length,
isEventsLoading,
isLoading,
isResourceContext,
isTroubleshooting,
kind,
name,
namespace,
Expand All @@ -335,17 +318,7 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
(_ev: React.MouseEvent, attachmentType: string | number) => {
setIsOpen(false);

if (attachmentType === 'ask') {
// Delay update until menu fade out is complete
requestAnimationFrame(() => {
setTimeout(() => dispatch(setIsTroubleshooting(false)), 0);
});
} else if (attachmentType === 'troubleshooting') {
// Delay update until menu fade out is complete
requestAnimationFrame(() => {
setTimeout(() => dispatch(setIsTroubleshooting(true)), 0);
});
} else if (attachmentType === AttachmentTypes.Events) {
if (attachmentType === AttachmentTypes.Events) {
openEventsModal();
} else if (attachmentType === AttachmentTypes.Log) {
openLogModal();
Expand Down Expand Up @@ -765,23 +738,61 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
[dispatch, streamController, streamingResponseID],
);

const modeMenuToggle = React.useCallback(
(toggleRef: React.Ref<HTMLButtonElement>) => (
<MenuToggle
data-test="ols-plugin__mode-toggle"
icon={isTroubleshooting ? <WrenchIcon /> : <OutlinedCommentIcon />}
isExpanded={isModeMenuOpen}
onClick={() => setIsModeMenuOpen(!isModeMenuOpen)}
ref={toggleRef}
variant="plainText"
>
{isTroubleshooting ? t('Troubleshooting') : t('Ask')}
</MenuToggle>
),
[isModeMenuOpen, isTroubleshooting, t],
);

const onModeMenuSelect = React.useCallback(
(_ev: React.MouseEvent, value: string | number) => {
dispatch(setIsTroubleshooting(value === 'troubleshooting'));
setIsModeMenuOpen(false);
},
[dispatch],
);

return (
<div>
{/* @ts-expect-error: TS2786 */}
<MessageBar
additionalActions={
isTroubleshooting ? (
<Label
closeBtnAriaLabel={t('Remove Troubleshooting mode')}
onClose={() => dispatch(setIsTroubleshooting(false))}
>
{t('Troubleshooting')}
</Label>
) : (
// TODO: Workaround for PatternFly bug that causes attach menu to move. Remove once
// issue is addressed in PatternFly.
<div></div>
)
<Select
isOpen={isModeMenuOpen}
onOpenChange={setIsModeMenuOpen}
onSelect={onModeMenuSelect}
selected={isTroubleshooting ? 'troubleshooting' : 'ask'}
toggle={modeMenuToggle}
>
<SelectList>
<SelectOption
description={t('Expert guidance and clear answers')}
icon={<OutlinedCommentIcon />}
isSelected={!isTroubleshooting}
value="ask"
>
{t('Ask')}
</SelectOption>
<SelectOption
description={t('Diagnosing issues and finding solutions')}
icon={<WrenchIcon />}
isSelected={isTroubleshooting}
value="troubleshooting"
>
{t('Troubleshooting')}
</SelectOption>
</SelectList>
</Select>
}
alwayShowSendButton
attachButtonPosition="start"
Expand All @@ -806,7 +817,11 @@ const Prompt: React.FC<PromptProps> = ({ scrollIntoView }) => {
isSendButtonDisabled={!query || query.trim().length === 0}
onChange={(e) => onChange(e, e.target.value)}
onSendMessage={onSubmit}
placeholder={t('Send a message...')}
placeholder={
isTroubleshooting
? t("Describe the issue you're troubleshooting...")
: t('Ask a question...')
}
validated={validated}
value={query}
/>
Expand Down
24 changes: 11 additions & 13 deletions tests/tests/lightspeed-install.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const modal = '.ols-plugin__modal';
const promptArea = `${popover} .ols-plugin__prompt`;
const attachButton = `${promptArea} .pf-chatbot__button--attach`;
const promptInput = `${promptArea} textarea`;
const troubleshootingLabel = `${popover} [aria-label="Remove Troubleshooting mode"]`;
const modeToggle = `${popover} [data-test="ols-plugin__mode-toggle"]`;

const podNamePrefix = 'console';

Expand Down Expand Up @@ -361,34 +361,32 @@ spec:
cy.get(promptInput).should('contain', PROMPT_NOT_SUBMITTED);
});

it('Test Troubleshooting mode label persists after reopening the UI', () => {
it('Test Troubleshooting mode persists after reopening the UI', () => {
cy.visit('/search/all-namespaces');
cy.get('h1').contains('Search').should('exist');
cy.get(mainButton).click();
cy.get(popover).should('exist');

cy.get(troubleshootingLabel).should('not.exist');
cy.get(attachButton).click();
cy.get(attachMenu).find('button').contains('Troubleshooting').click();
cy.get(troubleshootingLabel).should('exist');
cy.get(popover).should('include.text', 'Troubleshooting');
cy.get(modeToggle).should('include.text', 'Ask');
cy.get(modeToggle).click();
cy.contains('[role="option"]', 'Troubleshooting').click();
cy.get(modeToggle).should('include.text', 'Troubleshooting');

cy.get(minimizeButton).click();
cy.get(popover).should('not.exist');
cy.get(mainButton).click();
cy.get(popover).should('exist');
cy.get(troubleshootingLabel).should('exist');
cy.get(popover).should('include.text', 'Troubleshooting');
cy.get(modeToggle).should('include.text', 'Troubleshooting');

cy.get(attachButton).click();
cy.get(attachMenu).find('button').contains('Ask').click();
cy.get(troubleshootingLabel).should('not.exist');
cy.get(modeToggle).click();
cy.contains('[role="option"]', 'Ask').click();
cy.get(modeToggle).should('include.text', 'Ask');

cy.get(minimizeButton).click();
cy.get(popover).should('not.exist');
cy.get(mainButton).click();
cy.get(popover).should('exist');
cy.get(troubleshootingLabel).should('not.exist');
cy.get(modeToggle).should('include.text', 'Ask');
});

describe('Streamed response', { tags: ['@response'] }, () => {
Expand Down