Fix asterisk for custom attributes

Signed-off-by: Adhitya Mamallan <adhitya.mamallan@uber.com>

Author: adhityamamallan

src/views/shared/workflows-list-columns-picker/__tests__/workflows-list-columns-picker.test.tsx

@@ -26,10 +26,10 @@ jest.mock('baseui/popover', () => ({
 }));
 
 const MOCK_ALL_COLUMNS: ColumnDefinition[] = [
-  { id: 'col-1', name: 'Workflow ID' },
-  { id: 'col-2', name: 'Status' },
-  { id: 'col-3', name: 'Start Time' },
-  { id: 'col-4', name: 'End Time' },
+  { id: 'col-1', name: 'Workflow ID', isSystem: true },
+  { id: 'col-2', name: 'Status', isSystem: true },
+  { id: 'col-3', name: 'Start Time', isSystem: false },
+  { id: 'col-4', name: 'End Time', isSystem: false },
 ];
 
 describe(WorkflowsListColumnsPicker.name, () => {
@@ -60,8 +60,8 @@ describe(WorkflowsListColumnsPicker.name, () => {
 
     expect(screen.getByText('Workflow ID')).toBeInTheDocument();
     expect(screen.getByText('Status')).toBeInTheDocument();
-    expect(screen.getByText('Start Time')).toBeInTheDocument();
-    expect(screen.getByText('End Time')).toBeInTheDocument();
+    expect(screen.getByText('*Start Time')).toBeInTheDocument();
+    expect(screen.getByText('*End Time')).toBeInTheDocument();
   });
 
   it('shows selected columns as checked and unselected as unchecked', async () => {
@@ -105,10 +105,10 @@ describe(WorkflowsListColumnsPicker.name, () => {
       'Start'
     );
 
-    expect(screen.getByText('Start Time')).toBeInTheDocument();
+    expect(screen.getByText('*Start Time')).toBeInTheDocument();
     expect(screen.queryByText('Workflow ID')).not.toBeInTheDocument();
     expect(screen.queryByText('Status')).not.toBeInTheDocument();
-    expect(screen.queryByText('End Time')).not.toBeInTheDocument();
+    expect(screen.queryByText('*End Time')).not.toBeInTheDocument();
   });
 
   it('toggles column checked state when checkbox is clicked', async () => {

src/views/shared/workflows-list-columns-picker/workflows-list-columns-picker.tsx

@@ -119,29 +119,39 @@ export default function WorkflowsListColumnsPicker({
           </styled.SubHeader>
           <styled.ColumnsList>
             <List
-              items={displayedColumns.map((entry) => {
-                const col = columnMap.get(entry.id);
-                return (
-                  <styled.ColumnRow key={entry.id}>
-                    <styled.ColumnName>
-                      {col?.name ?? entry.id}
-                    </styled.ColumnName>
-                    <styled.CheckboxContainer
-                      onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                      onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
-                      onTouchStart={(e: React.TouchEvent) =>
-                        e.stopPropagation()
-                      }
-                    >
-                      <Checkbox
-                        checked={entry.checked}
-                        onChange={() => handleToggle(entry.id)}
-                        checkmarkType="toggle"
-                      />
-                    </styled.CheckboxContainer>
-                  </styled.ColumnRow>
-                );
-              })}
+              items={displayedColumns.reduce<React.ReactNode[]>(
+                (acc, entry) => {
+                  const col = columnMap.get(entry.id);
+                  if (!col) return acc;
+
+                  acc.push(
+                    <styled.ColumnRow key={entry.id}>
+                      <styled.ColumnName>
+                        {!col.isSystem ? '*' : ''}
+                        {col.name}
+                      </styled.ColumnName>
+                      <styled.CheckboxContainer
+                        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                        onMouseDown={(e: React.MouseEvent) =>
+                          e.stopPropagation()
+                        }
+                        onTouchStart={(e: React.TouchEvent) =>
+                          e.stopPropagation()
+                        }
+                      >
+                        <Checkbox
+                          checked={entry.checked}
+                          onChange={() => handleToggle(entry.id)}
+                          checkmarkType="toggle"
+                        />
+                      </styled.CheckboxContainer>
+                    </styled.ColumnRow>
+                  );
+
+                  return acc;
+                },
+                []
+              )}
               onChange={handleDragEnd}
               overrides={
                 isDragDisabled

src/views/shared/workflows-list-columns-picker/workflows-list-columns-picker.types.ts

@@ -1,6 +1,7 @@
 export type ColumnDefinition = {
   id: string;
   name: string;
+  isSystem: boolean;
 };
 
 export type ColumnState = { id: string; checked: boolean };