diff --git a/changelog/unreleased/issue-19058.toml b/changelog/unreleased/issue-19058.toml new file mode 100644 index 000000000000..b673bf48a302 --- /dev/null +++ b/changelog/unreleased/issue-19058.toml @@ -0,0 +1,5 @@ +type = "fixed" +message = "Fixing highlighting of message in message table by id." + +issues = ["19058"] +pulls = ["21389"] diff --git a/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx b/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx index d3ded2899371..31c1a7229376 100644 --- a/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx +++ b/graylog2-web-interface/src/views/components/messagelist/MessageTableEntry.tsx @@ -18,7 +18,7 @@ import * as React from 'react'; import { useCallback, useContext, useMemo } from 'react'; import PropTypes from 'prop-types'; import * as Immutable from 'immutable'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { AdditionalContext } from 'views/logic/ActionContext'; import { useStore } from 'stores/connect'; @@ -52,11 +52,11 @@ export const TableBody = styled.tbody<{ $expanded?: boolean, $highlighted?: bool && { border-top: 0; - ${$expanded ? css` + ${$expanded ? ` border-left: 7px solid ${theme.colors.variant.light.info}; ` : ''} - ${$highlighted ? css` + ${$highlighted ? ` border-left: 7px solid ${theme.colors.variant.light.success}; ` : ''} } @@ -100,19 +100,19 @@ type Props = { message: Message, selectedFields?: Immutable.OrderedSet, showMessageRow?: boolean, - toggleDetail: (string) => void, + toggleDetail: (messageId: string) => void, }; -const isDecoratedField = (field, decorationStats) => decorationStats +const isDecoratedField = (field: string | number, decorationStats: Message['decoration_stats']) => decorationStats && (decorationStats.added_fields[field] !== undefined || decorationStats.changed_fields[field] !== undefined); -const fieldType = (fieldName, { decoration_stats: decorationStats }: { - decoration_stats?: any -}, fields) => (isDecoratedField(fieldName, decorationStats) - ? FieldType.Decorated - : ((fields && fields.find((f) => f.name === fieldName)) || { type: FieldType.Unknown }).type); +const fieldType = (fieldName: string, { decoration_stats: decorationStats }: Message, fields: FieldTypeMappingsList) => ( + isDecoratedField(fieldName, decorationStats) + ? FieldType.Decorated + : ((fields?.find((f) => f.name === fieldName)) ?? { type: FieldType.Unknown }).type +); -const Strong = ({ children, strong = false }: React.PropsWithChildren<{ strong: boolean }>) => (strong +const Strong = ({ children = undefined, strong }: React.PropsWithChildren<{ strong: boolean }>) => (strong ? {children} : <>{children});