From d7babf2747b92a2f098b3b40d074802dc702aa15 Mon Sep 17 00:00:00 2001
From: Jeramy Soucy <jeramy.soucy@elastic.co>
Date: Wed, 30 Oct 2024 13:04:35 +0100
Subject: [PATCH] Fixes session timeout toast countdown (#198266)

## 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.

(cherry picked from commit e3c080750ca703f8240f6d47be0285c46f6e1632)
---
 .../session/session_expiration_toast.test.tsx | 19 +++++++++++++++++--
 .../session/session_expiration_toast.tsx      |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security/public/session/session_expiration_toast.test.tsx b/x-pack/plugins/security/public/session/session_expiration_toast.test.tsx
index f2f1f6ff92f79..46b733c535ec4 100644
--- a/x-pack/plugins/security/public/session/session_expiration_toast.test.tsx
+++ b/x-pack/plugins/security/public/session/session_expiration_toast.test.tsx
@@ -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,
     });
 
diff --git a/x-pack/plugins/security/public/session/session_expiration_toast.tsx b/x-pack/plugins/security/public/session/session_expiration_toast.tsx
index de0c460f0f3e1..f38638a77bc33 100644
--- a/x-pack/plugins/security/public/session/session_expiration_toast.tsx
+++ b/x-pack/plugins/security/public/session/session_expiration_toast.tsx
@@ -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} />,
       }}
     />
   );