Skip to content

feat(crud): show object elements in document view COMPASS-6707 #8167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mabaasit wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat(crud): show object elements in document view COMPASS-6707 #8167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4176631
show object fields
mabaasit Jun 23, 2026
152a8b4
fix language
mabaasit Jun 23, 2026
054bb18
clean up
mabaasit Jun 23, 2026
7885847
fix(compass-components): compute original value without stale memo
Copilot Jun 23, 2026
552b167
test(compass-components): cover Object BSONValue rendering
Copilot Jun 23, 2026
22e19fa
add single record test
mabaasit Jun 23, 2026
8bb6d4c
remove element(s) from text
mabaasit Jun 26, 2026
5300096
reformat
mabaasit Jun 26, 2026
163ca03
Merge branch 'main' into COMPASS-6707-show-object-element-count
mabaasit Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/compass-components/src/components/bson-value.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@ describe('BSONValue', function () {
{ type: 'Boolean', value: true, expected: 'true' },
{ type: 'Array', value: [1, 2, 3], expected: 'Array (3)' },
{ type: 'Array', value: [], expected: 'Array (empty)' },
{ type: 'Object', value: {}, expected: 'Object (empty)' },
{ type: 'Object', value: { a: 1 }, expected: 'Object (1)' },
{ type: 'Object', value: { a: 1, b: 2 }, expected: 'Object (2)' },
];

valuesToRender.forEach(function ({ expected, ...props }) {
Expand Down
17 changes: 16 additions & 1 deletion packages/compass-components/src/components/bson-value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,6 +530,21 @@ const ArrayValue: React.FunctionComponent<PropsByValueType<'Array'>> = ({
);
};

const ObjectValue: React.FunctionComponent<PropsByValueType<'Object'>> = ({
value,
}) => {
const lengthString = useMemo(() => {
const keys = Object.keys(value ?? {});
Comment thread
mabaasit marked this conversation as resolved.
return `(${keys.length === 0 ? 'empty' : keys.length})`;
}, [value]);

return (
<BSONValueContainer title={`Object ${lengthString}`}>
Object {lengthString}
</BSONValueContainer>
);
};

const BSONValue: React.FunctionComponent<ValueProps> = (props) => {
switch (props.type) {
case 'ObjectId':
Expand Down Expand Up @@ -574,7 +589,7 @@ const BSONValue: React.FunctionComponent<ValueProps> = (props) => {
case 'Array':
return <ArrayValue value={props.value}></ArrayValue>;
case 'Object':
return <UnknownValue type={props.type} value={props.type}></UnknownValue>;
return <ObjectValue value={props.value}></ObjectValue>;
default:
return (
<UnknownValue type={props.type} value={props.value}></UnknownValue>
Expand Down
15 changes: 13 additions & 2 deletions packages/compass-components/src/components/document-list/element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,18 @@ function useHadronElement(el: HadronElementType) {

const isValid = el.isCurrentTypeValid();

const originalValue =
el.currentType === 'Array'
? [...(el.elements || [])]
: el.currentType === 'Object'
? Object.fromEntries(
Array.from(el.elements || []).map((e) => [
e.currentKey,
e.currentValue,
])
)
: el.currentValue;

return {
id: el.uuid,
key: {
Expand All @@ -129,8 +141,7 @@ function useHadronElement(el: HadronElementType) {
},
value: {
value: editor.value(),
originalValue:
el.currentType === 'Array' ? [...(el.elements || [])] : el.currentValue,
originalValue,
change(newVal: string) {
editor.edit(newVal);
},
Expand Down
30 changes: 15 additions & 15 deletions packages/compass-components/src/components/guide-cue/guide-cue-service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ describe('GuideCueService', function () {
groupId: 'group-one',
isIntersecting: true,
};
guideCueService.addCue(cue as any);
guideCueService.addCue(cue);

expect((guideCueService as any)._cues).to.deep.equal([
{
Expand All @@ -138,7 +138,7 @@ describe('GuideCueService', function () {
};
guideCueStorage.markCueAsVisited(cue.cueId, cue.groupId);

guideCueService.addCue(cue as any);
guideCueService.addCue(cue);
expect((guideCueService as any)._cues).to.deep.equal([
{
...cue,
Expand All @@ -156,7 +156,7 @@ describe('GuideCueService', function () {
};
const dispatchEventSpy = Sinon.spy(guideCueService, 'dispatchEvent');

guideCueService.addCue(cue as any);
guideCueService.addCue(cue);

expect(dispatchEventSpy.calledOnce).to.be.true;

Expand Down Expand Up @@ -198,9 +198,9 @@ describe('GuideCueService', function () {
// Add cue3. As its added, we already have an active cue and it
// also fires an event for same cue (cue1).

guideCueService.addCue(cue2 as any);
guideCueService.addCue(cue1 as any);
guideCueService.addCue(cue3 as any);
guideCueService.addCue(cue2);
guideCueService.addCue(cue1);
guideCueService.addCue(cue3);

expect(spy.callCount).to.be.equal(2);

Expand Down Expand Up @@ -249,15 +249,15 @@ describe('GuideCueService', function () {
step: 2,
groupId: 'group-two',
isIntersecting: true,
} as any);
});
expect(guideCueService.getCountOfSteps('group-two')).to.equal(1);

guideCueService.addCue({
cueId: 'one',
step: 1,
groupId: 'group-two',
isIntersecting: true,
} as any);
});
expect(guideCueService.getCountOfSteps('group-two')).to.equal(2);
});

Expand Down Expand Up @@ -369,7 +369,7 @@ describe('GuideCueService', function () {
let markCueAsVisited: Sinon.SinonSpy;
beforeEach(function () {
markCueAsVisited = Sinon.spy(guideCueStorage, 'markCueAsVisited');
guideCueService.addCue(cue as any);
guideCueService.addCue(cue);
guideCueService.markCueAsVisited(cue.cueId, cue.groupId);
});

Expand Down Expand Up @@ -505,9 +505,9 @@ describe('GuideCueService', function () {

beforeEach(function () {
markCueAsVisited = Sinon.spy(guideCueStorage, 'markCueAsVisited');
guideCueService.addCue(cue1 as any);
guideCueService.addCue(cue2 as any);
guideCueService.addCue(cue3 as any);
guideCueService.addCue(cue1);
guideCueService.addCue(cue2);
guideCueService.addCue(cue3);
guideCueService.markAllCuesAsVisited();
});

Expand Down Expand Up @@ -548,9 +548,9 @@ describe('GuideCueService', function () {
const cue3 = { cueId: 'three', step: 1, isIntersecting: true };

beforeEach(function () {
guideCueService.addCue(cue1 as any);
guideCueService.addCue(cue2 as any);
guideCueService.addCue(cue3 as any);
guideCueService.addCue(cue1);
guideCueService.addCue(cue2);
guideCueService.addCue(cue3);

expect((guideCueService as any)._activeCue).to.deep.equal({
...cue1,
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/components/index-keys-badge.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('IndexKeysBadge Component', function () {
value: 'text',
},
];
render(<IndexKeysBadge keys={keys as any} />);
render(<IndexKeysBadge keys={keys} />);

const keysList = screen.getByRole('list');

Expand Down
2 changes: 1 addition & 1 deletion packages/compass-components/src/hooks/use-sort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export function useSortedItems<T extends Record<string, unknown>>(
}
// Otherwise use default sort method based on the value type
if (typeof a[name] === 'string') {
return sortString(a[name] as string, b[name] as string, order);
return sortString(a[name], b[name] as string, order);

@alenakhineika alenakhineika Jun 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Is there a reason why the first argument cast was removed but the second was kept?

@mabaasit mabaasit Jul 2, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

No, all of these changes (removing ts cast) are due to reformat.

}
return sortUnknown(a[name], b[name], order);
});
Expand Down
Loading