Fixed bug with grouped rows; Alignment fixes for steps/tasks

Netflix · Dec 15, 2023 · 877fca5 · 877fca5
1 parent 63a1374
commit 877fca5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/components/Timeline/TaskListLabel.tsx b/src/components/Timeline/TaskListLabel.tsx
@@ -89,7 +89,7 @@ const TaskListLabel: React.FC<Props> = (props) => {
                 tasksTotal === tasksVisible ? tasksTotal : `${tasksVisible}/${tasksTotal}`
               }`}
             >
-              {props.item.step_name}
+              <StepNameWithCount>{props.item.step_name}</StepNameWithCount>
               {!!tasksTotal && (
                 <>
                   {' '}
@@ -129,6 +129,7 @@ const RowLabel = styled.div<{ type: 'step' | 'task'; isOpen?: boolean; group?: b
   font-weight: ${(p) => (p.type === 'step' ? '600' : 'normal')};
   line-height: 1.6875rem;
   border-left: ${(p) => p.theme.border.thinLight};
+  padding-left: ${(p) => (p.type === 'task' ? '0.5rem' : undefined)};
 
   a {
     display: flex;
@@ -158,6 +159,7 @@ const RowStepName = styled.span<{ bigName: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
 `;
 
 const RowDuration = styled.span`
@@ -170,8 +172,8 @@ const StepCount = styled.span`
 `;
 
 const RowLabelContent = styled.div<{ type?: 'step' }>`
-  // In case of step row, lets remove icon width from total width so it aligns nicely
-  width: ${(p) => (p.type === 'step' ? 'calc(100% - 30px)' : '100%')};
+  // In case of step row, lets remove icon and caret width from total width so it aligns nicely
+  width: ${(p) => (p.type === 'step' ? 'calc(100% - 60px)' : 'calc(100% - 30px)')};
   display: flex;
   justify-content: space-between;
 `;
@@ -217,3 +219,9 @@ const StepLabel = styled.div<{ isLoading: boolean }>`
 const Padding = styled.div`
   width: 2.5rem;
 `;
+
+const StepNameWithCount = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+`;
diff --git a/src/components/Timeline/useTaskData.ts b/src/components/Timeline/useTaskData.ts
@@ -152,6 +152,7 @@ export function rowDataReducer(state: RowDataModel, action: RowDataAction): RowD
           }
 
           const newEndTime = !row.finished_at || endTime > row.finished_at ? endTime : row.finished_at;
+
           return {
             ...obj,
             [key]: {
@@ -164,16 +165,19 @@ export function rowDataReducer(state: RowDataModel, action: RowDataAction): RowD
           };
         }
         // New step entry
+
+        const data = grouped[key].reduce<Record<number, Task[]>>((dataobj, item) => {
+          return { ...dataobj, [item.task_id]: makeTasksForStep(dataobj, item) };
+        }, {});
+
         return {
           ...obj,
           [key]: {
             isOpen: true,
-            status: getStepStatus(grouped),
+            status: getStepStatus(data),
             finished_at: endTime,
             duration: startTime ? endTime - startTime : 0,
-            data: grouped[key].reduce<Record<number, Task[]>>((dataobj, item) => {
-              return { ...dataobj, [item.task_id]: makeTasksForStep(dataobj, item) };
-            }, {}),
+            data,
           },
         };
       }, state);