[GEN-1717]: Action header-node border width (#1764)

Co-authored-by: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
odigos-io · Nov 17, 2024 · ed0080c · ed0080c
1 parent 34c2c74
commit ed0080c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -123,7 +123,7 @@ export const buildNodesAndEdges = ({
       }),
     ],
     actions: [
-      createNode('action-header', 'header', postions['actions']['x'], 0, {
+      createNode('action-header', 'header', postions['actions']['x'] - (!!actions.length ? 15 : 0), 0, {
         icon: getEntityIcon(OVERVIEW_ENTITY_TYPES.ACTION),
         title: 'Actions',
         tagValue: actions.length,

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
@@ -17,7 +17,7 @@ interface HeaderNodeProps {
 }
 
 const Container = styled.div<{ $nodeWidth: HeaderNodeProps['nodeWidth'] }>`
-  width: ${({ $nodeWidth }) => `${$nodeWidth + 40}px`};
+  width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   padding: 12px 0px 16px 0px;
   gap: 8px;
   display: flex;
@@ -36,6 +36,10 @@ const ActionsWrapper = styled.div`
 
 const HeaderNode = ({ data, nodeWidth }: HeaderNodeProps) => {
   const { title, icon, tagValue } = data;
+  const isSources = title === 'Sources';
+  const isActions = title === 'Actions';
+  const extraWidth = isActions && !!tagValue ? 70 : 40;
+
   const { configuredSources, setConfiguredSources } = useAppStore((state) => state);
   const { sources } = useSourceCRUD();
 
@@ -50,8 +54,7 @@ const HeaderNode = ({ data, nodeWidth }: HeaderNodeProps) => {
   }, [configuredSources]);
 
   const renderActions = () => {
-    if (title !== 'Sources') return null;
-    if (!sources.length) return null;
+    if (!isSources || !sources.length) return null;
 
     const onSelect = (bool: boolean) => {
       if (bool) {
@@ -79,7 +82,7 @@ const HeaderNode = ({ data, nodeWidth }: HeaderNodeProps) => {
   };
 
   return (
-    <Container $nodeWidth={nodeWidth}>
+    <Container $nodeWidth={nodeWidth + extraWidth}>
       <Image src={icon} width={16} height={16} alt={title} />
       <Title size={14}>{title}</Title>
       <Badge label={tagValue} />