-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Implement message truncation
- Loading branch information
Showing
11 changed files
with
214 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import JSONTree from 'react-json-tree'; | ||
|
|
||
| import theme from './theme'; | ||
|
|
||
| interface MessageContentProps { | ||
| message: string; | ||
| } | ||
|
|
||
| const MessageContent: React.FC<MessageContentProps> = ({ message }) => { | ||
| const [isFolded, setIsFolded] = React.useState(message.length > 250); | ||
| let fullMessage: Record<string, string> | string; | ||
| const cutMessage = `${message.slice(0, 250)}...`; | ||
| try { | ||
| fullMessage = JSON.parse(message); | ||
| } catch (e) { | ||
| fullMessage = message; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="is-flex is-flex-direction-column is-align-items-center"> | ||
| {isFolded ? ( | ||
| <p className="has-content-overflow-ellipsis">{cutMessage}</p> | ||
| ) : ( | ||
| <JSONTree | ||
| data={fullMessage} | ||
| theme={theme} | ||
| shouldExpandNode={() => true} | ||
| hideRoot | ||
| /> | ||
| )} | ||
| {isFolded && ( | ||
| <button | ||
| type="button" | ||
| className="button is-small mt-2" | ||
| onClick={() => setIsFolded((state) => !state)} | ||
| title="Expand to JSON" | ||
| > | ||
| <span className="icon is-small"> | ||
| <i className="fas fa-chevron-down" /> | ||
| </span> | ||
| </button> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MessageContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
...i-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageContent.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { shallow } from 'enzyme'; | ||
| import React from 'react'; | ||
| import MessageContent from 'components/Topics/Topic/Details/Messages/MessageContent'; | ||
|
|
||
| import { messageContent } from './fixtures'; | ||
|
|
||
| describe('MessageContent', () => { | ||
| const component = shallow(<MessageContent message={messageContent} />); | ||
| describe('when it is folded', () => { | ||
| it('matches the snapshot', () => { | ||
| expect(component).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('when it is unfolded', () => { | ||
| it('matches the snapshot', () => { | ||
| component.find('button').simulate('click'); | ||
| expect(component).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
...ponents/Topics/Topic/Details/Messages/__test__/__snapshots__/MessageContent.spec.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`MessageContent when it is folded matches the snapshot 1`] = ` | ||
| <div | ||
| className="is-flex is-flex-direction-column is-align-items-center" | ||
| > | ||
| <p | ||
| className="has-content-overflow-ellipsis" | ||
| > | ||
| { | ||
| "_id": "609fab8aed527f514f4e648d", | ||
| "name": "in nostrud", | ||
| "desc": "Dolore nostrud commodo magna velit ut magna voluptate sint aute. Excepteur aute culpa culpa dolor ipsum. Tempor est ut officia tempor laborum consectetur. | ||
| Amet officia eu veni... | ||
| </p> | ||
| <button | ||
| className="button is-small mt-2" | ||
| onClick={[Function]} | ||
| title="Expand to JSON" | ||
| type="button" | ||
| > | ||
| <span | ||
| className="icon is-small" | ||
| > | ||
| <i | ||
| className="fas fa-chevron-down" | ||
| /> | ||
| </span> | ||
| </button> | ||
| </div> | ||
| `; | ||
| exports[`MessageContent when it is unfolded matches the snapshot 1`] = ` | ||
| <div | ||
| className="is-flex is-flex-direction-column is-align-items-center" | ||
| > | ||
| <JSONTree | ||
| collectionLimit={50} | ||
| data="{ | ||
| \\"_id\\": \\"609fab8aed527f514f4e648d\\", | ||
| \\"name\\": \\"in nostrud\\", | ||
| \\"desc\\": \\"Dolore nostrud commodo magna velit ut magna voluptate sint aute. Excepteur aute culpa culpa dolor ipsum. Tempor est ut officia tempor laborum consectetur. | ||
| Amet officia eu veniam Lorem enim aliqua aute voluptate elit do sunt in magna occaecat. Nisi sit non est adipisicing adipisicing consequat duis duis tempor consequat deserunt ea quis ad. Veniam sunt culpa nostrud adipisicing cillum voluptate non est cupidatat. Eiusmod tempor officia irure et deserunt est ex laboris occaecat adipisicing occaecat in aliquip aliqua. Do laboris culpa cupidatat cillum non. Ullamco excepteur mollit voluptate anim in nisi anim elit culpa aute. Ad officia sunt proident ut ullamco officia ea fugiat culpa cillum et fugiat aliquip. | ||
| Amet non labore anim in ipsum. Et Lorem velit dolor ipsum. Irure id proident excepteur aliquip deserunt id officia dolor deserunt amet in sint. Aute in nostrud nulla ut laboris Lorem commodo nulla ipsum. Aliqua nulla commodo Lorem labore magna esse proident id ea in pariatur consectetur sint Lorem. | ||
| Cupidatat deserunt mollit tempor aliqua. Fugiat ullamco magna pariatur quis nulla magna. Esse duis labore ipsum nisi ullamco qui aute duis duis amet est laborum adipisicing magna. Est aliquip quis qui do aliquip nisi elit tempor ex aliquip. Excepteur aliquip ea deserunt amet adipisicing voluptate eiusmod sit sint exercitation exercitation. Id labore amet mollit ex commodo. Proident ex adipisicing deserunt esse Lorem tempor laborum nostrud commodo incididunt ea id. | ||
| \\", | ||
| \\"semster\\": \\"spring19\\", | ||
| \\"profile\\": \\"cs\\", | ||
| \\"degree\\": \\"bachelor\\", | ||
| \\"degreee\\": \\"master\\", | ||
| \\"degreeeee\\": \\"bachelor\\" | ||
| }" | ||
| getItemString={[Function]} | ||
| hideRoot={true} | ||
| invertTheme={true} | ||
| isCustomNode={[Function]} | ||
| keyPath={ | ||
| Array [ | ||
| "root", | ||
| ] | ||
| } | ||
| labelRenderer={[Function]} | ||
| postprocessValue={[Function]} | ||
| shouldExpandNode={[Function]} | ||
| theme={ | ||
| Object { | ||
| "author": "seth wright (http://sethawright.com)", | ||
| "base00": "#1d1f21", | ||
| "base01": "#282a2e", | ||
| "base02": "#373b41", | ||
| "base03": "#969896", | ||
| "base04": "#b4b7b4", | ||
| "base05": "#c5c8c6", | ||
| "base06": "#e0e0e0", | ||
| "base07": "#ffffff", | ||
| "base08": "#CC342B", | ||
| "base09": "#F96A38", | ||
| "base0A": "#FBA922", | ||
| "base0B": "#198844", | ||
| "base0C": "#3971ED", | ||
| "base0D": "#3971ED", | ||
| "base0E": "#A36AC7", | ||
| "base0F": "#3971ED", | ||
| "scheme": "google", | ||
| } | ||
| } | ||
| valueRenderer={[Function]} | ||
| /> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/theme.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| const theme = { | ||
| scheme: 'google', | ||
| author: 'seth wright (http://sethawright.com)', | ||
| base00: '#1d1f21', | ||
| base01: '#282a2e', | ||
| base02: '#373b41', | ||
| base03: '#969896', | ||
| base04: '#b4b7b4', | ||
| base05: '#c5c8c6', | ||
| base06: '#e0e0e0', | ||
| base07: '#ffffff', | ||
| base08: '#CC342B', | ||
| base09: '#F96A38', | ||
| base0A: '#FBA922', | ||
| base0B: '#198844', | ||
| base0C: '#3971ED', | ||
| base0D: '#3971ED', | ||
| base0E: '#A36AC7', | ||
| base0F: '#3971ED', | ||
| }; | ||
|
|
||
| export default theme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters