Skip to content

Commit

Permalink
Fixes session timeout toast countdown (elastic#198266)
Browse files Browse the repository at this point in the history
## Summary

A regression was introduced when upgrading to react-intl v6, and the
`FormattedRelative` component was replaced by the
`FormattedRelativeTime` component. The new component requires an
addition property be specified in order to have the same behavior as the
previous - formatting seconds > 60 as minutes, and counting down when
below 1 minute.

This PR adds the `updateIntervalInSeconds` property to the
`FormattedRelativeTime` component of the session expiration toast. This
PR also adds a unit test case to check the time format when > 60s
remain.

### Testing

1. Add the following Kibana configuration setting
```
xpack.security.session.idleTimeout: "2m" # can be anything over 1m, shorter is better for testing
```
2. Start ES & Kibana, log in
3. Verify the session expiration toast appears and first displays
minutes. Leave the toast open.
4. Verify that after 1 minute, the toast begins counting down seconds
5. Repeat the test from main and verify that the toast only shows the
initial number of seconds

## Release Note
A bug was fixed that caused the session expiration toast to incorrectly
render the remaining time.
  • Loading branch information
jeramysoucy authored Oct 30, 2024
1 parent 05efaaa commit e3c0807
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,25 @@ describe('createSessionExpirationToast', () => {
});

describe('SessionExpirationToast', () => {
it('renders session expiration time', () => {
it('renders session expiration time in minutes when >= 60s remaining', () => {
const sessionState$ = of<SessionState>({
lastExtensionTime: Date.now(),
expiresInMs: 60 * 1000,
expiresInMs: 60 * 2000,
canBeExtended: true,
});

const { getByText } = render(
<I18nProvider>
<SessionExpirationToast sessionState$={sessionState$} onExtend={jest.fn()} />
</I18nProvider>
);
getByText(/You will be logged out in [0-9]+ minutes/);
});

it('renders session expiration time in seconds when < 60s remaining', () => {
const sessionState$ = of<SessionState>({
lastExtensionTime: Date.now(),
expiresInMs: 60 * 900,
canBeExtended: true,
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const SessionExpirationToast: FunctionComponent<SessionExpirationToastPro
id="xpack.security.sessionExpirationToast.body"
defaultMessage="You will be logged out {timeout}."
values={{
timeout: <FormattedRelativeTime value={timeoutSeconds} />,
timeout: <FormattedRelativeTime value={timeoutSeconds} updateIntervalInSeconds={1} />,
}}
/>
);
Expand Down

0 comments on commit e3c0807

Please sign in to comment.