feat/COMPASS-9792: Add renderName for custom field name rendering (#129)

Author: Anemy

src/components/field/field.tsx

@@ -145,6 +145,7 @@ export const Field = ({
   selectedGroupHeight = 0,
   previewGroupArea,
   glyphSize = LGSpacing[300],
+  renderName,
   spacing = 0,
   selectable = false,
   selected = false,
@@ -168,6 +169,7 @@ export const Field = ({
   const fieldSelectionProps = useMemo(() => {
     return selectable && fieldProps
       ? {
+          'data-testid': `selectable-field-${nodeId}-${typeof id === 'string' ? id : id.join('.')}`,
           selectable: true,
           onClick: (event: ReactMouseEvent) => fieldProps.onClick(event, { id, nodeId }),
         }
@@ -213,7 +215,7 @@ export const Field = ({
     <>
       <FieldName>
         <FieldDepth depth={depth} />
-        <InnerFieldName>{name}</InnerFieldName>
+        <InnerFieldName>{renderName || name}</InnerFieldName>
       </FieldName>
       <FieldType color={getSecondaryTextColor()}>{type}</FieldType>
     </>

src/components/node/node.stories.tsx

@@ -246,6 +246,33 @@ export const NodeWithCustomTypeField: Story = {
   },
 };
 
+export const NodeWithCustomFieldNameRender: Story = {
+  args: {
+    ...INTERNAL_NODE,
+    data: {
+      title: 'orders',
+      fields: [
+        {
+          name: 'customerId',
+          renderName: (
+            <div style={{ background: 'orange', width: '100%' }}>
+              <input
+                type="text"
+                onSubmit={e => e.preventDefault()}
+                defaultValue="Custom name"
+                style={{ marginLeft: 5, marginRight: 5, width: '90px' }}
+              />
+            </div>
+          ),
+          type: 'string',
+          variant: 'default',
+          glyphs: ['key'],
+        },
+      ],
+    },
+  },
+};
+
 export const NodeWithPrimaryField: Story = {
   args: {
     ...INTERNAL_NODE,

src/components/node/node.tsx

@@ -66,7 +66,8 @@ const NodeHeader = styled.div<{ background?: string }>`
   line-height: 20px;
   font-weight: bold;
   min-height: ${DEFAULT_NODE_HEADER_HEIGHT}px;
-  padding: 0px ${spacing[400]}px 0px ${spacing[200]}px;
+  padding: 0px;
+  padding-left: ${spacing[200]}px;
   background: ${props => props.background};
 `;
 
@@ -79,6 +80,7 @@ const NodeHeaderIcon = styled.div`
 export const NodeHeaderTitle = styled.div`
   overflow-wrap: break-word;
   min-width: 0;
+  margin-right: ${spacing[200]}px;
 `;
 
 const NodeHandle = styled(Handle)<{ ['z-index']?: number }>`

src/types/node.ts

@@ -143,6 +143,11 @@ export interface NodeField {
    */
   name: string;
 
+  /**
+   * Optional custom rendering for the field name. If not provided, `name` will be used.
+   */
+  renderName?: React.ReactNode;
+
   /**
    * Unique identifier for the field. Passed in field click events.
    * Defaults to `name` when not supplied.