Merge pull request Netflix#12 from outerbounds/status-color

Copied over status color changes from OSS
valayDave · Jan 18, 2024 · bde70de · bde70de
2 parents d148ea3 + e6c3d5e
commit bde70de
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 13 deletions.
diff --git a/src/components/Form/Checkbox.tsx b/src/components/Form/Checkbox.tsx
@@ -11,7 +11,8 @@ type CheckboxFieldProps = {
   label: string;
   checked: boolean;
   className?: string;
-  onChange: () => void;
+  onChange?: () => void;
+  disabled?: boolean;
   'data-testid'?: string;
 };
 
@@ -22,8 +23,11 @@ type CheckboxFieldProps = {
 export const CheckboxField: React.FC<CheckboxFieldProps> = ({
   label,
   checked = false,
-  onChange,
+  onChange = () => {
+    /*empty*/
+  },
   className,
+  disabled = false,
   ...rest
 }) => {
   const [id] = useState(uuid());
@@ -34,6 +38,7 @@ export const CheckboxField: React.FC<CheckboxFieldProps> = ({
       data-testid={testid}
       className={className}
       onClick={() => onChange !== undefined && onChange()}
+      disabled={disabled}
     >
       <span className={`checkbox ${id}`}>{checked && <Icon name="check" />}</span>
       <label htmlFor={id}>{label}</label>
@@ -45,12 +50,12 @@ export const CheckboxField: React.FC<CheckboxFieldProps> = ({
 // Style
 //
 
-const CheckboxWrapper = styled.div<{ checked: boolean }>`
+const CheckboxWrapper = styled.div<{ checked: boolean; disabled: boolean }>`
   display: flex;
   align-items: center;
   width: auto;
   position: relative;
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? 'not-allowed' : 'pointer')};
 
   label {
     display: inline-block;

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`
@@ -210,10 +212,16 @@ const StepLabel = styled.div<{ isLoading: boolean }>`
   }
 
   svg path {
-    fill: ${(p) => (p.isLoading ? '#717171' : '#fff')};
+    fill: ${(p) => (p.isLoading ? '#717171' : undefined)};
   }
 `;
 
 const Padding = styled.div`
   width: 1.875rem;
 `;
+
+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);

diff --git a/src/hooks/useResource/__tests__/useResource.test.cypress.tsx b/src/hooks/useResource/__tests__/useResource.test.cypress.tsx
@@ -73,7 +73,6 @@ describe('useResource hook', () => {
   // Without subscribeToEvents hook should just fetch data initially
   //
   it('useResource - Basic fetch', () => {
-    console.log(server.url);
     mount(<ResourceListComponent />);
     cy.waitUntil(() => connected, {}).then(() => {
       // Check that content was fetched

diff --git a/src/pages/Debug/index.tsx b/src/pages/Debug/index.tsx
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import ContentHeader from '../../components/Content/ContentHeader';
 import { ItemRow } from '../../components/Structure';
-import StatusIndicator from '../../components/Status';
 import { BigButton } from '../../components/Button';
 import FEATURE_FLAGS, { FeatureFlags } from '../../utils/FEATURE';
 import useLogger from '../../hooks/useLogger';
+import { CheckboxField } from '../../components/Form/Checkbox';
 
 const DebugPage: React.FC = () => {
   const { t } = useTranslation();
@@ -53,7 +53,7 @@ const FeatureFlagItem: React.FC<{ flag: string; active: boolean }> = ({ flag, ac
   return (
     <DebugSectionContainer>
       <DebugSectionTitle>
-        <StatusIndicator status={active ? 'completed' : 'failed'} />
+        <CheckboxField label={''} checked={active} disabled />
         {flag}
       </DebugSectionTitle>