[8.12] Fix API Key table sorting (#175813) (#175830)

# Backport

This will backport the following commits from `main` to `8.12`:
- [Fix API Key table sorting
(#175813)](https://github.com/elastic/kibana/pull/175813)

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

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

<!--BACKPORT [{"author":{"name":"Larry
Gregory","email":"larry.gregory@elastic.co"},"sourceCommit":{"committedDate":"2024-01-29T18:09:42Z","message":"Fix
API Key table sorting (#175813)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/173862.\r\n\r\nEUI's\r\n[documentation](https://eui.elastic.co/#/tabular-content/in-memory-tables)\r\nfor
the `EuiInMemoryTable` component states:\r\n\r\n> EuiMemoryTable relies
on referential equality of a column's name\r\n> \r\n> EuiMemoryTable
relies on referential equality of a column's name field\r\nwhen sorting
by that column. For example, if a JSX element is created\r\nfor the name
every render it appears different to the table and prevents\r\nsorting.
Instead, that value needs to be lifted outside of the render\r\nmethod
and preserved between renders.\r\n\r\n\r\nOur column names had a mix of
strings and `FormattedMessage` components.\r\nThis PR updates the column
definitions to always use strings, in order\r\nto support the
aforementioned referential equality
checks.\r\n\r\n\r\n79071373-33ff-4d3b-8857-f4ee49022869","sha":"bdb9eabef5e11e91e09ffcde07d6dbf782e308c0","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Security","Feature:Users/Roles/API
Keys","backport:prev-minor","v8.13.0"],"title":"Fix API Key table
sorting","number":175813,"url":"https://github.com/elastic/kibana/pull/175813","mergeCommit":{"message":"Fix
API Key table sorting (#175813)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/173862.\r\n\r\nEUI's\r\n[documentation](https://eui.elastic.co/#/tabular-content/in-memory-tables)\r\nfor
the `EuiInMemoryTable` component states:\r\n\r\n> EuiMemoryTable relies
on referential equality of a column's name\r\n> \r\n> EuiMemoryTable
relies on referential equality of a column's name field\r\nwhen sorting
by that column. For example, if a JSX element is created\r\nfor the name
every render it appears different to the table and prevents\r\nsorting.
Instead, that value needs to be lifted outside of the render\r\nmethod
and preserved between renders.\r\n\r\n\r\nOur column names had a mix of
strings and `FormattedMessage` components.\r\nThis PR updates the column
definitions to always use strings, in order\r\nto support the
aforementioned referential equality
checks.\r\n\r\n\r\n79071373-33ff-4d3b-8857-f4ee49022869","sha":"bdb9eabef5e11e91e09ffcde07d6dbf782e308c0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.13.0","branchLabelMappingKey":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/175813","number":175813,"mergeCommit":{"message":"Fix
API Key table sorting (#175813)\n\n## Summary\r\n\r\nResolves
https://github.com/elastic/kibana/issues/173862.\r\n\r\nEUI's\r\n[documentation](https://eui.elastic.co/#/tabular-content/in-memory-tables)\r\nfor
the `EuiInMemoryTable` component states:\r\n\r\n> EuiMemoryTable relies
on referential equality of a column's name\r\n> \r\n> EuiMemoryTable
relies on referential equality of a column's name field\r\nwhen sorting
by that column. For example, if a JSX element is created\r\nfor the name
every render it appears different to the table and prevents\r\nsorting.
Instead, that value needs to be lifted outside of the render\r\nmethod
and preserved between renders.\r\n\r\n\r\nOur column names had a mix of
strings and `FormattedMessage` components.\r\nThis PR updates the column
definitions to always use strings, in order\r\nto support the
aforementioned referential equality
checks.\r\n\r\n\r\n79071373-33ff-4d3b-8857-f4ee49022869","sha":"bdb9eabef5e11e91e09ffcde07d6dbf782e308c0"}}]}]
BACKPORT-->

Co-authored-by: Larry Gregory <larry.gregory@elastic.co>
This commit is contained in:
Kibana Machine 2024-01-29 14:34:21 -05:00 committed by GitHub
parent 4b1693a381
commit 19e95feb29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -353,12 +353,9 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
},
{
field: 'type',
name: (
<FormattedMessage
id="xpack.security.management.apiKeys.table.typeColumnName"
defaultMessage="Type"
/>
),
name: i18n.translate('xpack.security.management.apiKeys.table.typeColumnName', {
defaultMessage: 'Type',
}),
sortable: true,
render: (type: CategorizedApiKey['type']) => <ApiKeyBadge type={type} />,
}
@ -367,12 +364,9 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
if (canManageApiKeys || usernameFilters.length > 1) {
columns.push({
field: 'username',
name: (
<FormattedMessage
id="xpack.security.management.apiKeys.table.ownerColumnName"
defaultMessage="Owner"
/>
),
name: i18n.translate('xpack.security.management.apiKeys.table.ownerColumnName', {
defaultMessage: 'Owner',
}),
sortable: true,
render: (username: CategorizedApiKey['username']) => <UsernameWithIcon username={username} />,
});
@ -381,12 +375,9 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
columns.push(
{
field: 'creation',
name: (
<FormattedMessage
id="xpack.security.management.apiKeys.table.createdColumnName"
defaultMessage="Created"
/>
),
name: i18n.translate('xpack.security.management.apiKeys.table.createdColumnName', {
defaultMessage: 'Created',
}),
sortable: true,
mobileOptions: {
show: false,
@ -406,12 +397,9 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
},
{
field: 'expiration',
name: (
<FormattedMessage
id="xpack.security.management.apiKeys.table.statusColumnName"
defaultMessage="Status"
/>
),
name: i18n.translate('xpack.security.management.apiKeys.table.statusColumnName', {
defaultMessage: 'Status',
}),
sortable: true,
render: (expiration: number) => <ApiKeyStatus expiration={expiration} />,
}
@ -422,12 +410,9 @@ export const ApiKeysTable: FunctionComponent<ApiKeysTableProps> = ({
width: `${24 + 2 * 8}px`,
actions: [
{
name: (
<FormattedMessage
id="xpack.security.management.apiKeys.table.deleteAction"
defaultMessage="Delete"
/>
),
name: i18n.translate('xpack.security.management.apiKeys.table.deleteAction', {
defaultMessage: 'Delete',
}),
description: i18n.translate('xpack.security.management.apiKeys.table.deleteDescription', {
defaultMessage: 'Delete this API key',
}),