Skip to content

feat(calendar): Add actionable empty state with Create Event CTA #39931

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

Open
VedantGupta-DTU wants to merge 1 commit into
base: develop
Choose a base branch
from
+10 −2
Open

feat(calendar): Add actionable empty state with Create Event CTA #39931

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
12 changes: 10 additions & 2 deletions apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, ButtonGroup, Button, Throbber } from '@rocket.chat/fuselage';
import { Box, States, StatesIcon, StatesTitle, StatesSubtitle, StatesAction, StatesActions, ButtonGroup, Button, Throbber } from '@rocket.chat/fuselage';
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
import {
VirtualizedScrollbars,
Expand Down Expand Up @@ -65,7 +65,15 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps): Re
{!calendarListResult.isPending && total === 0 && (
<States>
<StatesIcon name='calendar' />
<StatesTitle>{t('No_history')}</StatesTitle>
<StatesTitle>{t('No_events_for_today')}</StatesTitle>
<StatesSubtitle>{t('Take_a_break_or_create_an_event_to_get_started')}</StatesSubtitle>
Comment on lines +68 to +69
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for the new translation keys in the codebase
echo "=== Checking No_events_for_today ==="
rg -l "No_events_for_today" --type json

echo "=== Checking Take_a_break_or_create_an_event_to_get_started ==="
rg -l "Take_a_break_or_create_an_event_to_get_started" --type json

echo "=== Checking Create_Event ==="
rg -l "Create_Event" --type json

echo "=== Sample content if found ==="
rg '"No_events_for_today"' --type json -C1
rg '"Take_a_break_or_create_an_event_to_get_started"' --type json -C1
rg '"Create_Event"' --type json -C1

Repository: RocketChat/Rocket.Chat

Length of output: 228

🏁 Script executed:

# Check if en.i18n.json exists and search for the specific keys
echo "=== Checking en.i18n.json for the keys ==="
if [ -f "packages/i18n/src/locales/en.i18n.json" ]; then
  echo "File found. Searching for keys..."
  rg "No_events_for_today|Take_a_break_or_create_an_event_to_get_started|Create_Event" packages/i18n/src/locales/en.i18n.json
else
  echo "File not found at expected location"
fi

echo ""
echo "=== Verify OutlookEventsList.tsx exists ==="
find . -name "OutlookEventsList.tsx" -type f

echo ""
echo "=== Check the relevant lines in the file ==="
if [ -f "apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx" ]; then
  sed -n '65,75p' apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx
fi

Repository: RocketChat/Rocket.Chat

Length of output: 800

Add missing translation keys to en.i18n.json.

The keys No_events_for_today, Take_a_break_or_create_an_event_to_get_started, and Create_Event are used in the code but missing from packages/i18n/src/locales/en.i18n.json. Add these keys with appropriate English values to the translation file.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx`
around lines 68 - 69, Add the missing translation keys used in
OutlookEventsList.tsx by updating packages/i18n/src/locales/en.i18n.json: add
"No_events_for_today", "Take_a_break_or_create_an_event_to_get_started", and
"Create_Event" with appropriate English values (e.g., "No events for today",
"Take a break or create an event to get started", "Create Event") so the calls
to t('No_events_for_today'), t('Take_a_break_or_create_an_event_to_get_started')
and t('Create_Event') resolve correctly.

{outlookUrl && (
<StatesActions>
<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot Mar 28, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: New external-link CTA opens a _blank window without noopener/noreferrer, allowing opener access (reverse-tabnabbing risk) for configurable Outlook URLs.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx, line 72:

<comment>New external-link CTA opens a `_blank` window without `noopener`/`noreferrer`, allowing opener access (reverse-tabnabbing risk) for configurable Outlook URLs.</comment>

<file context>
@@ -65,7 +65,15 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps): Re
+							<StatesSubtitle>{t('Take_a_break_or_create_an_event_to_get_started')}</StatesSubtitle>
+							{outlookUrl && (
+								<StatesActions>
+									<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
+										{t('Create_Event')}
+									</StatesAction>
</file context>
Suggested change
<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank', 'noopener,noreferrer')}>
Fix with Cubic

{t('Create_Event')}
</StatesAction>
</StatesActions>
)}
Comment on lines +70 to +76
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add noopener,noreferrer to window.open for security.

Using window.open(url, '_blank') without specifying noopener allows the opened page to access window.opener, which can be exploited for phishing (reverse tabnabbing). The same pattern exists at line 99.

🔒 Proposed fix 
-							<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
+							<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank', 'noopener,noreferrer')}>
								{t('Create_Event')}
							</StatesAction>

Also apply to line 99:

-					<Button icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
+					<Button icon='new-window' onClick={() => window.open(outlookUrl, '_blank', 'noopener,noreferrer')}>
						{t('Open_Outlook')}
					</Button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{outlookUrl && (
<StatesActions>
<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank')}>
{t('Create_Event')}
</StatesAction>
</StatesActions>
)}
{outlookUrl && (
<StatesActions>
<StatesAction icon='new-window' onClick={() => window.open(outlookUrl, '_blank', 'noopener,noreferrer')}>
{t('Create_Event')}
</StatesAction>
</StatesActions>
)}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx`
around lines 70 - 76, The onClick handlers in the OutlookEventsList component
call window.open(outlookUrl, '_blank') (inside the StatesAction in
OutlookEventsList.tsx) which leaves window.opener exposed; update these calls to
include the noopener and noreferrer flags by calling window.open(outlookUrl,
'_blank', 'noopener,noreferrer') (and apply the same change to the other
window.open call around line 99) so the opened tab cannot access the opener and
referrer is suppressed.

</States>
)}
{calendarListResult.isSuccess && calendarListResult.data.length > 0 && (
Expand Down