feat/COMPASS-9696 Add actions prop to node, shown in the header (#118)

Author: Anemy

src/components/node/node.stories.tsx

@@ -483,6 +483,23 @@ export const NodeWithDeeplyNestedPreviewFieldsEverywhere: Story = {
   },
 };
 
+export const NodeWithAction: Story = {
+  args: {
+    ...INTERNAL_NODE,
+    data: {
+      title: 'orders',
+      fields: [
+        {
+          name: 'orderId',
+          type: 'string',
+          glyphs: ['key'],
+        },
+      ],
+      actions: <button style={{ marginLeft: 'auto' }}>Action</button>,
+    },
+  },
+};
+
 export const NodeWithSelectedFields: Story = {
   args: {
     ...INTERNAL_NODE,

src/components/node/node.tsx

@@ -102,7 +102,7 @@ export const Node = ({
   type,
   selected,
   isConnectable,
-  data: { title, fields, borderVariant, disabled },
+  data: { actions, title, fields, borderVariant, disabled },
 }: NodeProps<InternalNode>) => {
   const theme = useTheme();
   const { zoom } = useViewport();
@@ -183,6 +183,7 @@ export const Node = ({
                 <Icon fill={theme.node.headerIcon} glyph="Drag" />
               </NodeHeaderIcon>
               <NodeHeaderTitle>{title}</NodeHeaderTitle>
+              {actions}
             </NodeHeader>
             <FieldList nodeId={id} nodeType={type as NodeType} isHovering={isHovering} fields={fields} />
           </NodeWithFields>

src/types/internal.ts

@@ -4,6 +4,7 @@ import { NodeBorderVariant, NodeField } from '@/types/node';
 import { EdgeProps } from '@/types/edge';
 
 export type NodeData = {
+  actions?: React.ReactNode;
   title: string;
   disabled?: boolean;
   fields: NodeField[];

src/types/node.ts

@@ -65,6 +65,12 @@ export interface NodeProps {
    * The title of the node, usually a collection or table name.
    */
   title: string;
+
+  /**
+   * Actions to display in the node header, optional.
+   */
+  actions?: React.ReactNode;
+
   /**
    * Whether the node is disabled.
    */