[8.16] Fixes session timeout toast countdown (#198266) (#198344)

# Backport

This will backport the following commits from `main` to `8.16`:
- [Fixes session timeout toast countdown
(#198266)](https://github.com/elastic/kibana/pull/198266)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jeramy
Soucy","email":"jeramy.soucy@elastic.co"},"sourceCommit":{"committedDate":"2024-10-30T12:04:35Z","message":"Fixes
session timeout toast countdown (#198266)\n\n## Summary\r\n\r\nA
regression was introduced when upgrading to react-intl v6, and
the\r\n`FormattedRelative` component was replaced by
the\r\n`FormattedRelativeTime` component. The new component requires
an\r\naddition property be specified in order to have the same behavior
as the\r\nprevious - formatting seconds > 60 as minutes, and counting
down when\r\nbelow 1 minute.\r\n\r\nThis PR adds the
`updateIntervalInSeconds` property to the\r\n`FormattedRelativeTime`
component of the session expiration toast. This\r\nPR also adds a unit
test case to check the time format when > 60s\r\nremain.\r\n\r\n###
Testing\r\n\r\n1. Add the following Kibana configuration
setting\r\n```\r\nxpack.security.session.idleTimeout: \"2m\" # can be
anything over 1m, shorter is better for testing\r\n```\r\n2. Start ES &
Kibana, log in\r\n3. Verify the session expiration toast appears and
first displays\r\nminutes. Leave the toast open.\r\n4. Verify that after
1 minute, the toast begins counting down seconds\r\n5. Repeat the test
from main and verify that the toast only shows the\r\ninitial number of
seconds\r\n\r\n## Release Note\r\nA bug was fixed that caused the
session expiration toast to incorrectly\r\nrender the remaining
time.","sha":"e3c080750ca703f8240f6d47be0285c46f6e1632","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Security","v9.0.0","backport:prev-minor","backport:prev-major","v8.15.4"],"title":"Fixes
session timeout toast
countdown","number":198266,"url":"https://github.com/elastic/kibana/pull/198266","mergeCommit":{"message":"Fixes
session timeout toast countdown (#198266)\n\n## Summary\r\n\r\nA
regression was introduced when upgrading to react-intl v6, and
the\r\n`FormattedRelative` component was replaced by
the\r\n`FormattedRelativeTime` component. The new component requires
an\r\naddition property be specified in order to have the same behavior
as the\r\nprevious - formatting seconds > 60 as minutes, and counting
down when\r\nbelow 1 minute.\r\n\r\nThis PR adds the
`updateIntervalInSeconds` property to the\r\n`FormattedRelativeTime`
component of the session expiration toast. This\r\nPR also adds a unit
test case to check the time format when > 60s\r\nremain.\r\n\r\n###
Testing\r\n\r\n1. Add the following Kibana configuration
setting\r\n```\r\nxpack.security.session.idleTimeout: \"2m\" # can be
anything over 1m, shorter is better for testing\r\n```\r\n2. Start ES &
Kibana, log in\r\n3. Verify the session expiration toast appears and
first displays\r\nminutes. Leave the toast open.\r\n4. Verify that after
1 minute, the toast begins counting down seconds\r\n5. Repeat the test
from main and verify that the toast only shows the\r\ninitial number of
seconds\r\n\r\n## Release Note\r\nA bug was fixed that caused the
session expiration toast to incorrectly\r\nrender the remaining
time.","sha":"e3c080750ca703f8240f6d47be0285c46f6e1632"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198266","number":198266,"mergeCommit":{"message":"Fixes
session timeout toast countdown (#198266)\n\n## Summary\r\n\r\nA
regression was introduced when upgrading to react-intl v6, and
the\r\n`FormattedRelative` component was replaced by
the\r\n`FormattedRelativeTime` component. The new component requires
an\r\naddition property be specified in order to have the same behavior
as the\r\nprevious - formatting seconds > 60 as minutes, and counting
down when\r\nbelow 1 minute.\r\n\r\nThis PR adds the
`updateIntervalInSeconds` property to the\r\n`FormattedRelativeTime`
component of the session expiration toast. This\r\nPR also adds a unit
test case to check the time format when > 60s\r\nremain.\r\n\r\n###
Testing\r\n\r\n1. Add the following Kibana configuration
setting\r\n```\r\nxpack.security.session.idleTimeout: \"2m\" # can be
anything over 1m, shorter is better for testing\r\n```\r\n2. Start ES &
Kibana, log in\r\n3. Verify the session expiration toast appears and
first displays\r\nminutes. Leave the toast open.\r\n4. Verify that after
1 minute, the toast begins counting down seconds\r\n5. Repeat the test
from main and verify that the toast only shows the\r\ninitial number of
seconds\r\n\r\n## Release Note\r\nA bug was fixed that caused the
session expiration toast to incorrectly\r\nrender the remaining
time.","sha":"e3c080750ca703f8240f6d47be0285c46f6e1632"}},{"branch":"8.15","label":"v8.15.4","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"url":"https://github.com/elastic/kibana/pull/198310","number":198310,"branch":"8.x","state":"OPEN"}]}]
BACKPORT-->

Co-authored-by: Jeramy Soucy <jeramy.soucy@elastic.co>

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,
     });
 

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} />,
       }}
     />
   );