Skip to content

Conversation

@travjenkins
Copy link
Member

@travjenkins travjenkins commented Jan 27, 2026

Issues

#1243

Changes

1243

  • Replace JSON viewer with Monaco

Misc

  • Replace some component with hooks for translate

Tests

Manually tested

  • scenarios you manually tested

Automated tests

  • unit testing covered

Playwright tests ran locally

  • Admin
  • Captures
  • Collections
  • HomePage
  • Login
  • Materialization

Screenshots

Large docs in data preview show this warning
image

Switching to using monaco editor
image

@travjenkins travjenkins added the change:planned This is a planned change label Jan 28, 2026
Comment on lines +58 to +65
if (error === null && data) {
return data.documents.reduce(
(acc, record) => {
acc[buildRecordKey(record)] = record;
return acc;
},
{} as Record<string, JournalRecord<Record<string, any>>>
);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No big change just trying to get a tiny perf boost.

Comment on lines +71 to +79
const rows = useMemo(
() => Object.keys(rowsByKey).map((k) => ({ key: k, id: k })),
[rowsByKey]
);

const selectedRecordJson = useMemo(
() => stringifyJSON(rowsByKey[selectedKey]),
[rowsByKey, selectedKey]
);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These memos only really help when the data is larger but shouldn't add a bunch of overhead for smaller data sets 🤷

'journals.tooManyBytes.title': `Large documents`,
'journals.tooManyBytes.message': `Exceeded the maximum bytes before reaching the desired number of documents. This probably means that your documents are large.`,
'journals.tooManyBytesAndNoDocuments.title': `Read limit reached`,
'journals.tooManyBytesAndNoDocuments.message': `We reached the limit of how much data a web browser can comfortably read, and didn't find even reach the end of one document! This probably means that your documents are huge.`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This message was worded very odd so changed it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

intl component -> hook.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was FRUSTRATING and I just got it working and moved on. Commented with a todo even though it isn't a true todo but something we need to research in the future.

}}
>
<Box
// TODO (monaco resize)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Marking this because this is close but not exactly the same as the other wrapper.

@travjenkins travjenkins marked this pull request as ready for review January 28, 2026 21:12
@travjenkins travjenkins requested a review from a team as a code owner January 28, 2026 21:12
@travjenkins travjenkins requested review from GregorShear and removed request for kiahna-tucker January 29, 2026 18:09
Copy link
Contributor

@GregorShear GregorShear left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested on my local and all looks good.

A minor styling change to consider - row highlighting is enough, no need to change typography variant (also compensate left padding for thick border on selected rows)

@GregorShear
Copy link
Contributor

Screen.Recording.2026-01-30.at.1.41.59.PM.mov

@GregorShear
Copy link
Contributor

Screen.Recording.2026-01-30.at.1.41.33.PM.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:planned This is a planned change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants