Skip to content

Commit c6824df

Browse files
debsmita1debsmita1
authored
fix(lightspeed): fixed notebooks empty state backgroundColor (#3060)
1 parent 8c129da commit c6824df

12 files changed

Lines changed: 158 additions & 99 deletions

File tree

‎workspaces/lightspeed/.changeset/rotten-geese-fetch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
3+
---
4+
5+
fixed notebooks empty state backgroundColor

‎workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@ export const lightspeedTranslationRef: TranslationRef<
223223
readonly 'notebooks.updated.yesterday': string;
224224
readonly 'notebooks.updated.days': string;
225225
readonly 'notebooks.updated.on': string;
226+
readonly 'notebooks.card.openAria': string;
226227
readonly 'notebook.view.title': string;
227228
readonly 'notebook.view.close': string;
228229
readonly 'notebook.view.documents.count': string;

‎workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,8 @@ const useStyles = makeStyles(theme => ({
187187
flex: 1,
188188
minHeight: 0,
189189
overflowY: 'auto',
190+
backgroundColor:
191+
'var(--pf-t--global--background--color--floating--default)',
190192
},
191193
notebooksHeader: {
192194
display: 'flex',
@@ -315,10 +317,15 @@ const useStyles = makeStyles(theme => ({
315317
paddingRight: theme.spacing(1.5),
316318
},
317319
footer: {
320+
backgroundColor:
321+
'var(--pf-t--global--background--color--floating--default)',
318322
'&>.pf-chatbot__footer-container': {
319323
width: '95% !important',
320324
maxWidth: 'unset !important',
321325
},
326+
'& .pf-chatbot__message-bar': {
327+
backgroundColor: theme.palette.grey[300],
328+
},
322329
},
323330
sortDropdown: {
324331
padding: 0,
@@ -353,6 +360,10 @@ const useStyles = makeStyles(theme => ({
353360
overflowY: 'auto',
354361
WebkitOverflowScrolling: 'touch',
355362
},
363+
chatbotContentScrollNewChat: {
364+
backgroundColor:
365+
'var(--pf-t--global--background--color--floating--default)',
366+
},
356367
toastAlertGroup: {
357368
'--pf-v6-c-alert-group--m-toast--InsetInlineEnd': `${theme.spacing(2.5)}px`,
358369
'--pf-v6-c-alert-group--m-toast--InsetBlockStart': `${theme.spacing(2.5)}px`,
@@ -1531,7 +1542,14 @@ export const LightspeedChat = ({
15311542
hasChatContentOverflow ? classes.chatbotContentHasOverflow : ''
15321543
}`}
15331544
>
1534-
<div ref={contentScrollRef} className={classes.chatbotContentScroll}>
1545+
<div
1546+
ref={contentScrollRef}
1547+
className={`${classes.chatbotContentScroll}${
1548+
welcomePrompts.length > 0
1549+
? ` ${classes.chatbotContentScrollNewChat}`
1550+
: ''
1551+
}`}
1552+
>
15351553
{welcomePrompts.length > 0 && (
15361554
<div className={classes.chatbotContentSpacer} aria-hidden />
15371555
)}

‎workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/NotebookCard.test.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const mockNotebook: NotebookSession = {
3434

3535
const mockClasses: Record<string, string> = {
3636
notebookCard: 'notebookCard',
37+
notebookCardMenuOpen: 'notebookCardMenuOpen',
3738
notebookCardHeader: 'notebookCardHeader',
3839
notebookDropdownMenu: 'notebookDropdownMenu',
3940
notebookMenuButton: 'notebookMenuButton',
@@ -81,10 +82,8 @@ describe('NotebookCard', () => {
8182

8283
it('should call onClick with notebook when card is clicked', () => {
8384
render(<NotebookCard {...defaultProps} />);
84-
const card = screen
85-
.getByText('My Notebook')
86-
.closest('[class*="notebookCard"]');
87-
fireEvent.click(card!);
85+
const card = screen.getByLabelText(/Open notebook My Notebook/i);
86+
fireEvent.click(card);
8887
expect(onClick).toHaveBeenCalledWith(mockNotebook);
8988
});
9089

‎workspaces/lightspeed/plugins/lightspeed/src/components/notebooks/NotebookCard.tsx‎

Lines changed: 102 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -54,95 +54,108 @@ export const NotebookCard = ({
5454
onRename,
5555
onDelete,
5656
t,
57-
}: NotebookCardProps) => (
58-
<Card
59-
className={classes.notebookCard}
60-
isSelectable
61-
isClickable
62-
onClick={() => onClick(notebook)}
63-
>
64-
<CardHeader
65-
className={classes.notebookCardHeader}
66-
actions={{
67-
actions: (
68-
<Dropdown
69-
className={classes.notebookDropdownMenu}
70-
isOpen={openNotebookMenuId === notebook.session_id}
71-
popperProps={{
72-
position: 'end',
73-
preventOverflow: true,
74-
}}
75-
onOpenChange={isOpen =>
76-
setOpenNotebookMenuId(isOpen ? notebook.session_id : null)
77-
}
78-
toggle={toggleRef => (
79-
<MenuToggle
80-
ref={toggleRef}
81-
variant="plain"
82-
className={classes.notebookMenuButton}
83-
aria-label={t('aria.options.label')}
84-
isExpanded={openNotebookMenuId === notebook.session_id}
85-
onClick={event => {
86-
event.stopPropagation();
87-
setOpenNotebookMenuId(current =>
88-
current === notebook.session_id
89-
? null
90-
: notebook.session_id,
91-
);
92-
}}
93-
>
94-
<EllipsisVIcon />
95-
</MenuToggle>
96-
)}
97-
>
98-
<DropdownList className={classes.notebookDropdownList}>
99-
<DropdownItem
100-
className={classes.notebookDropdownItem}
101-
onClick={event => {
102-
event.stopPropagation();
103-
onRename(notebook.session_id);
104-
setOpenNotebookMenuId(null);
105-
}}
106-
>
107-
{t('notebooks.actions.rename')}
108-
</DropdownItem>
109-
<DropdownItem
110-
className={classes.notebookDropdownItem}
111-
onClick={event => {
112-
event.stopPropagation();
113-
onDelete(notebook.session_id);
114-
setOpenNotebookMenuId(null);
115-
}}
116-
>
117-
{t('notebooks.actions.delete')}
118-
</DropdownItem>
119-
</DropdownList>
120-
</Dropdown>
121-
),
122-
className: classes.notebookCardHeaderActions,
123-
}}
57+
}: NotebookCardProps) => {
58+
const isMenuOpen = openNotebookMenuId === notebook.session_id;
59+
60+
const handleCardKeyDown = (e: React.KeyboardEvent) => {
61+
if (e.key === 'Enter' || e.key === ' ') {
62+
e.preventDefault();
63+
onClick(notebook);
64+
}
65+
};
66+
67+
return (
68+
<Card
69+
className={classes.notebookCard}
70+
component="div"
71+
tabIndex={0}
72+
aria-label={t('notebooks.card.openAria' as any, { name: notebook.name })}
73+
onClick={() => onClick(notebook)}
74+
onKeyDown={handleCardKeyDown}
12475
>
125-
<CardTitle className={classes.notebookTitle}>
126-
<CatalogIcon />
127-
<Typography component="span" className={classes.notebookTitleText}>
128-
{notebook.name}
129-
</Typography>
130-
</CardTitle>
131-
</CardHeader>
132-
<div className={classes.notebookCardDivider} />
133-
<CardBody className={classes.notebookCardBody}>
134-
<div>
135-
<div className={classes.notebookDocuments}>
136-
<Typography variant="body2">
137-
{notebook.document_count ?? 0} {t('notebooks.documents')}
76+
<CardHeader
77+
className={classes.notebookCardHeader}
78+
actions={{
79+
actions: (
80+
<Dropdown
81+
className={classes.notebookDropdownMenu}
82+
isOpen={isMenuOpen}
83+
popperProps={{
84+
position: 'end',
85+
preventOverflow: true,
86+
}}
87+
onOpenChange={isOpen =>
88+
setOpenNotebookMenuId(isOpen ? notebook.session_id : null)
89+
}
90+
toggle={toggleRef => (
91+
<MenuToggle
92+
ref={toggleRef}
93+
variant="plain"
94+
className={classes.notebookMenuButton}
95+
aria-label={t('aria.options.label')}
96+
isExpanded={isMenuOpen}
97+
onClick={event => {
98+
event.stopPropagation();
99+
setOpenNotebookMenuId(current =>
100+
current === notebook.session_id
101+
? null
102+
: notebook.session_id,
103+
);
104+
}}
105+
>
106+
<EllipsisVIcon />
107+
</MenuToggle>
108+
)}
109+
>
110+
<DropdownList className={classes.notebookDropdownList}>
111+
<DropdownItem
112+
className={classes.notebookDropdownItem}
113+
onClick={event => {
114+
event.stopPropagation();
115+
onRename(notebook.session_id);
116+
setOpenNotebookMenuId(null);
117+
}}
118+
>
119+
{t('notebooks.actions.rename')}
120+
</DropdownItem>
121+
<DropdownItem
122+
className={classes.notebookDropdownItem}
123+
onClick={event => {
124+
event.stopPropagation();
125+
onDelete(notebook.session_id);
126+
setOpenNotebookMenuId(null);
127+
}}
128+
>
129+
{t('notebooks.actions.delete')}
130+
</DropdownItem>
131+
</DropdownList>
132+
</Dropdown>
133+
),
134+
className: classes.notebookCardHeaderActions,
135+
}}
136+
>
137+
<CardTitle className={classes.notebookTitle}>
138+
<CatalogIcon />
139+
<Typography component="span" className={classes.notebookTitleText}>
140+
{notebook.name}
138141
</Typography>
142+
</CardTitle>
143+
</CardHeader>
144+
<div className={classes.notebookCardDivider} />
145+
<CardBody className={classes.notebookCardBody}>
146+
<div>
147+
<div className={classes.notebookDocuments}>
148+
<Typography variant="body2">
149+
{notebook.document_count ?? 0} {t('notebooks.documents')}
150+
</Typography>
151+
</div>
152+
<div className={classes.notebookUpdated}>
153+
<Typography variant="caption">
154+
{formatUpdatedLabel(notebook.updated_at, t)}
155+
</Typography>
156+
</div>
139157
</div>
140-
<div className={classes.notebookUpdated}>
141-
<Typography variant="caption">
142-
{formatUpdatedLabel(notebook.updated_at, t)}
143-
</Typography>
144-
</div>
145-
</div>
146-
</CardBody>
147-
</Card>
148-
);
158+
</CardBody>
159+
</Card>
160+
);
161+
};

‎workspaces/lightspeed/plugins/lightspeed/src/components/notebooks/NotebookView.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,7 @@ const useStyles = makeStyles(theme => ({
113113
minHeight: 0,
114114
},
115115
drawerContentBody: {
116-
backgroundColor:
117-
'var(--pf-t--global--background--color--secondary--default)',
116+
backgroundColor: 'var(--pf-t--global--background--color--primary--default)',
118117
height: '100%',
119118
},
120119
contentColumn: {
@@ -148,6 +147,16 @@ const useStyles = makeStyles(theme => ({
148147
flex: 1,
149148
minHeight: 0,
150149
overflow: 'auto',
150+
backgroundColor:
151+
'var(--pf-t--global--background--color--floating--default)',
152+
},
153+
notebookEmptyUpload: {
154+
flex: 1,
155+
display: 'flex',
156+
flexDirection: 'column',
157+
minHeight: 0,
158+
backgroundColor:
159+
'var(--pf-t--global--background--color--floating--default)',
151160
},
152161
notebookContentArea: {
153162
width: '95%',
@@ -179,10 +188,14 @@ const useStyles = makeStyles(theme => ({
179188
padding: `0 0 ${theme.spacing(1)}px`,
180189
},
181190
footer: {
191+
backgroundColor: theme.palette.background.paper,
182192
'&>.pf-chatbot__footer-container': {
183193
width: '95% !important',
184194
maxWidth: 'unset !important',
185195
},
196+
'& .pf-chatbot__message-bar': {
197+
backgroundColor: theme.palette.grey[300],
198+
},
186199
},
187200
chatContent: {
188201
minHeight: 0,
@@ -489,7 +502,11 @@ export const NotebookView = ({
489502

490503
const renderMainContent = () => {
491504
if (!hasDocuments && messages.length === 0) {
492-
return <UploadResourceScreen onUploadClick={handleOpenUploadModal} />;
505+
return (
506+
<Typography component="span" className={classes.notebookEmptyUpload}>
507+
<UploadResourceScreen onUploadClick={handleOpenUploadModal} />
508+
</Typography>
509+
);
493510
}
494511
if (messages.length > 0) {
495512
return (
@@ -600,7 +617,7 @@ export const NotebookView = ({
600617
}
601618
position="right"
602619
>
603-
<span>
620+
<Typography component="span">
604621
<Button
605622
variant="plain"
606623
className={classes.addIconButton}
@@ -612,7 +629,7 @@ export const NotebookView = ({
612629
>
613630
<AddCircleFilledIcon disabled={isAddDisabled} />
614631
</Button>
615-
</span>
632+
</Typography>
616633
</Tooltip>
617634
</div>
618635
)}

‎workspaces/lightspeed/plugins/lightspeed/src/translations/de.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const lightspeedTranslationDe = createTranslationMessages({
5454
'notebooks.updated.yesterday': 'Vor 1 Tag aktualisiert',
5555
'notebooks.updated.days': 'Vor {{days}} Tagen aktualisiert',
5656
'notebooks.updated.on': 'Aktualisiert am',
57+
'notebooks.card.openAria': 'Notizbuch {{name}} öffnen',
5758

5859
// Notebook view
5960
'notebook.view.title': 'Unbenanntes Notizbuch',

‎workspaces/lightspeed/plugins/lightspeed/src/translations/es.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const lightspeedTranslationEs = createTranslationMessages({
5454
'notebooks.updated.yesterday': 'Actualizado hace 1 día',
5555
'notebooks.updated.days': 'Actualizado hace {{days}} días',
5656
'notebooks.updated.on': 'Actualizado el',
57+
'notebooks.card.openAria': 'Abrir el cuaderno {{name}}',
5758

5859
// Notebook view
5960
'notebook.view.title': 'Cuaderno sin título',

‎workspaces/lightspeed/plugins/lightspeed/src/translations/fr.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const lightspeedTranslationFr = createTranslationMessages({
5454
'notebooks.updated.yesterday': 'Mis à jour il y a 1 jour',
5555
'notebooks.updated.days': 'Mis à jour il y a {{days}} jours',
5656
'notebooks.updated.on': 'Mis à jour le',
57+
'notebooks.card.openAria': 'Ouvrir le carnet {{name}}',
5758

5859
// Notebook view
5960
'notebook.view.title': 'Carnet sans titre',

‎workspaces/lightspeed/plugins/lightspeed/src/translations/it.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const lightspeedTranslationIt = createTranslationMessages({
5555
'notebooks.updated.yesterday': 'Aggiornato 1 giorno fa',
5656
'notebooks.updated.days': 'Aggiornato {{days}} giorni fa',
5757
'notebooks.updated.on': 'Aggiornato il',
58+
'notebooks.card.openAria': 'Apri il taccuino {{name}}',
5859

5960
// Notebook view
6061
'notebook.view.title': 'Quaderno senza titolo',

0 commit comments

Comments
 (0)