Skip to content

feat(crud): add UUID type editing support in document editor COMPASS-10194 #7768

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
ivandevp wants to merge 12 commits into
base: main
Choose a base branch
from
Open

feat(crud): add UUID type editing support in document editor COMPASS-10194 #7768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
65cef72
feat(crud): add UUID type editing support in document editor COMPASS-…
ivandevp Feb 4, 2026
6f5f206
fix: add UUID types to UNCASTED_EMPTY_TYPE_VALUE
ivandevp Feb 4, 2026
ce6d905
fix: remove unused UUID_REGEX import
ivandevp Feb 4, 2026
d36e711
fix: update test fixtures to use $uuid format for Binary subtype 04
ivandevp Feb 4, 2026
918793e
Merge branch 'main' into COMPASS-10194/edit-uuid
ivandevp Feb 5, 2026
382a64c
refactor: extract UUID byte reversal logic into shared utilities
ivandevp Feb 5, 2026
348e60d
perf: memoize UUID input style to prevent unnecessary re-renders
ivandevp Feb 5, 2026
118b901
fix: properly convert between UUID types in changeType
ivandevp Feb 6, 2026
66986d3
fix: use Object.create(null) for UUID_TYPE_TO_ENCODING record
ivandevp Feb 6, 2026
824f830
refactor: use shared UUID utilities from hadron-type-checker in bson-…
ivandevp Feb 6, 2026
18847e4
feat: enable editing of legacy UUID values in document editor
ivandevp Feb 9, 2026
0b76b6c
refactor: move displayType to Element property and fix table view UUI…
ivandevp Feb 10, 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
6 changes: 3 additions & 3 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 @@ -192,7 +192,7 @@ describe('BSONValue', function () {
);

expect(container.querySelector('.element-value')?.textContent).to.eq(
'LegacyJavaUUID("efcdab89-6745-2301-efcd-ab8967452301")'
"LegacyJavaUUID('efcdab89-6745-2301-efcd-ab8967452301')"
);
});

Expand All @@ -204,7 +204,7 @@ describe('BSONValue', function () {
);

expect(container.querySelector('.element-value')?.textContent).to.eq(
'LegacyCSharpUUID("67452301-ab89-efcd-0123-456789abcdef")'
"LegacyCSharpUUID('67452301-ab89-efcd-0123-456789abcdef')"
);
});

Expand All @@ -216,7 +216,7 @@ describe('BSONValue', function () {
);

expect(container.querySelector('.element-value')?.textContent).to.eq(
'LegacyPythonUUID("01234567-89ab-cdef-0123-456789abcdef")'
"LegacyPythonUUID('01234567-89ab-cdef-0123-456789abcdef')"
);
});

Expand Down
169 changes: 116 additions & 53 deletions packages/compass-components/src/components/bson-value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React, { useMemo } from 'react';
import type { TypeCastMap } from 'hadron-type-checker';
import {
uuidHexToString,
reverseJavaUUIDBytes,
reverseCSharpUUIDBytes,
} from 'hadron-type-checker';
import { Binary } from 'bson';
import type { DBRef } from 'bson';
import { variantColors } from '@leafygreen-ui/code';
Expand Down Expand Up @@ -125,69 +130,21 @@ const ObjectIdValue: React.FunctionComponent<PropsByValueType<'ObjectId'>> = ({
);
};

const toUUIDWithHyphens = (hex: string): string => {
return (
hex.substring(0, 8) +
'-' +
hex.substring(8, 12) +
'-' +
hex.substring(12, 16) +
'-' +
hex.substring(16, 20) +
'-' +
hex.substring(20, 32)
);
};

const toLegacyJavaUUID = ({ value }: PropsByValueType<'Binary'>) => {
// Get the hex representation from the buffer.
const hex = Buffer.from(value.buffer).toString('hex');
// Reverse byte order for Java legacy UUID format (reverse all bytes).
let msb = hex.substring(0, 16);
let lsb = hex.substring(16, 32);
// Reverse pairs of hex characters (bytes).
msb =
msb.substring(14, 16) +
msb.substring(12, 14) +
msb.substring(10, 12) +
msb.substring(8, 10) +
msb.substring(6, 8) +
msb.substring(4, 6) +
msb.substring(2, 4) +
msb.substring(0, 2);
lsb =
lsb.substring(14, 16) +
lsb.substring(12, 14) +
lsb.substring(10, 12) +
lsb.substring(8, 10) +
lsb.substring(6, 8) +
lsb.substring(4, 6) +
lsb.substring(2, 4) +
lsb.substring(0, 2);
const uuid = msb + lsb;
return 'LegacyJavaUUID("' + toUUIDWithHyphens(uuid) + '")';
const reversedHex = reverseJavaUUIDBytes(hex);
return "LegacyJavaUUID('" + uuidHexToString(reversedHex) + "')";
};

const toLegacyCSharpUUID = ({ value }: PropsByValueType<'Binary'>) => {
// Get the hex representation from the buffer.
const hex = Buffer.from(value.buffer).toString('hex');
// Reverse byte order for C# legacy UUID format (first 3 groups only).
const a =
hex.substring(6, 8) +
hex.substring(4, 6) +
hex.substring(2, 4) +
hex.substring(0, 2);
const b = hex.substring(10, 12) + hex.substring(8, 10);
const c = hex.substring(14, 16) + hex.substring(12, 14);
const d = hex.substring(16, 32);
const uuid = a + b + c + d;
return 'LegacyCSharpUUID("' + toUUIDWithHyphens(uuid) + '")';
const reversedHex = reverseCSharpUUIDBytes(hex);
return "LegacyCSharpUUID('" + uuidHexToString(reversedHex) + "')";
};

const toLegacyPythonUUID = ({ value }: PropsByValueType<'Binary'>) => {
// Get the hex representation from the buffer.
const hex = Buffer.from(value.buffer).toString('hex');
return 'LegacyPythonUUID("' + toUUIDWithHyphens(hex) + '")';
return "LegacyPythonUUID('" + uuidHexToString(hex) + "')";
};

// Binary sub_type 3.
Expand Down Expand Up @@ -227,6 +184,100 @@ const LegacyUUIDValue: React.FunctionComponent<PropsByValueType<'Binary'>> = (
);
};

// UUID value component for UUID type (Binary subtype 4)
const UUIDValue: React.FunctionComponent<PropsByValueType<'UUID'>> = ({
value,
}) => {
const stringifiedValue = useMemo(() => {
// During editing, value might be a string
if (typeof value === 'string') {
return value;
}
if (!value || !value.buffer) {
return String(value);
}
try {
return value.toUUID().toString();
} catch {
return Buffer.from(value.buffer).toString('hex');
Copy link
Collaborator

@addaleax addaleax Feb 10, 2026

Choose a reason for hiding this comment

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

What kind of situation is this catch intended to cover?

}
}, [value]);

return (
<BSONValueContainer type="Binary" title={stringifiedValue}>
<span className={nonSelectable}>UUID(&apos;</span>
{stringifiedValue}
<span className={nonSelectable}>&apos;)</span>
</BSONValueContainer>
);
};

// Legacy Java UUID value component
const LegacyJavaUUIDValue: React.FunctionComponent<
PropsByValueType<'LegacyJavaUUID'>
> = ({ value }) => {
const stringifiedValue = useMemo(() => {
// During editing, value might be a string
if (typeof value === 'string') {
return `LegacyJavaUUID('${value}')`;
}
if (!value || !value.buffer) {
return String(value);
}
return toLegacyJavaUUID({ value });
}, [value]);

return (
<BSONValueContainer type="Binary" title={stringifiedValue}>
{stringifiedValue}
</BSONValueContainer>
);
};

// Legacy C# UUID value component
const LegacyCSharpUUIDValue: React.FunctionComponent<
PropsByValueType<'LegacyCSharpUUID'>
> = ({ value }) => {
const stringifiedValue = useMemo(() => {
// During editing, value might be a string
if (typeof value === 'string') {
return `LegacyCSharpUUID('${value}')`;
}
if (!value || !value.buffer) {
return String(value);
}
return toLegacyCSharpUUID({ value });
}, [value]);

return (
<BSONValueContainer type="Binary" title={stringifiedValue}>
{stringifiedValue}
</BSONValueContainer>
);
};

// Legacy Python UUID value component
const LegacyPythonUUIDValue: React.FunctionComponent<
PropsByValueType<'LegacyPythonUUID'>
> = ({ value }) => {
const stringifiedValue = useMemo(() => {
// During editing, value might be a string
if (typeof value === 'string') {
return `LegacyPythonUUID('${value}')`;
}
if (!value || !value.buffer) {
return String(value);
}
return toLegacyPythonUUID({ value });
}, [value]);

return (
<BSONValueContainer type="Binary" title={stringifiedValue}>
{stringifiedValue}
</BSONValueContainer>
);
};

const BinaryValue: React.FunctionComponent<PropsByValueType<'Binary'>> = ({
value,
}) => {
Expand Down Expand Up @@ -486,6 +537,18 @@ const BSONValue: React.FunctionComponent<ValueProps> = (props) => {
return <LegacyUUIDValue value={props.value}></LegacyUUIDValue>;
}
return <BinaryValue value={props.value}></BinaryValue>;
case 'UUID':
return <UUIDValue value={props.value}></UUIDValue>;
case 'LegacyJavaUUID':
return <LegacyJavaUUIDValue value={props.value}></LegacyJavaUUIDValue>;
case 'LegacyCSharpUUID':
return (
<LegacyCSharpUUIDValue value={props.value}></LegacyCSharpUUIDValue>
);
case 'LegacyPythonUUID':
return (
<LegacyPythonUUIDValue value={props.value}></LegacyPythonUUIDValue>
);
case 'Int32':
case 'Double':
return <NumberValue type={props.type} value={props.value}></NumberValue>;
Expand Down
65 changes: 65 additions & 0 deletions packages/compass-components/src/components/document-list/element-editors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ import { documentTypography } from './typography';
import { Icon, Tooltip } from '../leafygreen';
import { useDarkMode } from '../../hooks/use-theme';

const UUID_TYPES = [
'UUID',
'LegacyJavaUUID',
'LegacyCSharpUUID',
'LegacyPythonUUID',
] as const;

const maxWidth = css({
maxWidth: '100%',
overflowX: 'hidden',
Expand Down Expand Up @@ -162,6 +169,29 @@ const editorTextarea = css({
color: 'inherit',
});

// UUID editor container that shows: UUID(" <input> ")
const uuidEditorContainer = css({
display: 'inline-flex',
alignItems: 'center',
maxWidth: '100%',
});

const uuidEditorInput = css({
display: 'inline-block',
whiteSpace: 'nowrap',
verticalAlign: 'top',
color: 'inherit',
});

const uuidEditorLabel = css({
userSelect: 'none',
whiteSpace: 'nowrap',
});

function isUUIDType(type: string): boolean {
Copy link
Collaborator

@addaleax addaleax Feb 10, 2026

Choose a reason for hiding this comment

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

Suggested change
function isUUIDType(type: string): boolean {
type UUIDType = typeof UUID_TYPES[number];
function isUUIDType(type: string): type is UUIDType {

return (UUID_TYPES as readonly string[]).includes(type);
}

export const ValueEditor: React.FunctionComponent<{
editing?: boolean;
onEditStart(): void;
Expand Down Expand Up @@ -220,6 +250,11 @@ export const ValueEditor: React.FunctionComponent<{
return { width: `${Math.max(val.length, 1)}ch` };
}, [val, type]);

const uuidInputStyle = useMemo(() => {
// UUID format is 36 characters (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)
return { width: `${Math.max(val.length, 36)}ch` };
}, [val]);

return (
<>
{editing ? (
Expand Down Expand Up @@ -268,6 +303,36 @@ export const ValueEditor: React.FunctionComponent<{
{...(mergedProps as React.HTMLProps<HTMLTextAreaElement>)}
></textarea>
</BSONValueContainer>
) : isUUIDType(type) ? (
<div className={uuidEditorContainer}>
<span className={uuidEditorLabel}>{type}(&apos;</span>
<input
type="text"
data-testid="hadron-document-value-editor"
value={val}
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
onChange={(evt) => {
onChange(evt.currentTarget.value);
}}
// See ./element.tsx
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}
className={cx(
editorReset,
editorOutline,
uuidEditorInput,
!valid && editorInvalid,
!valid &&
(darkMode
? editorInvalidDarkMode
: editorInvalidLightMode)
)}
spellCheck="false"
style={uuidInputStyle}
{...(mergedProps as React.HTMLProps<HTMLInputElement>)}
></input>
<span className={uuidEditorLabel}>&apos;)</span>
</div>
) : (
<input
type="text"
Expand Down
Loading
Loading