Merge pull request #493 from RolnickLab/fix/controlled-checkboxes

Make all checkboxes controlled

Author: annavik

ui/src/design-system/components/checkbox/checkbox.stories.tsx

@@ -10,9 +10,9 @@ export default {
 
 export const Default: Meta = {
   args: {
+    checked: true,
     label: 'Lorem ipsum',
     id: 'checkbox',
     theme: CheckboxTheme.Default,
-    defaultChecked: true,
   },
 }

ui/src/design-system/components/checkbox/checkbox.tsx

@@ -11,8 +11,7 @@ export enum CheckboxTheme {
 }
 
 interface CheckboxProps {
-  checked?: boolean | 'indeterminate'
-  defaultChecked?: boolean
+  checked: boolean | 'indeterminate'
   id?: string
   label?: string
   theme?: CheckboxTheme
@@ -21,7 +20,6 @@ interface CheckboxProps {
 
 export const Checkbox = ({
   checked,
-  defaultChecked,
   id,
   label,
   theme = CheckboxTheme.Default,
@@ -33,7 +31,6 @@ export const Checkbox = ({
       className={classNames(styles.checkboxRoot, {
         [styles.neutral]: theme === CheckboxTheme.Neutral,
       })}
-      defaultChecked={defaultChecked}
       id={id}
       onCheckedChange={onCheckedChange}
     >

ui/src/design-system/components/table/column-settings/column-settings.tsx

@@ -35,6 +35,7 @@ export const ColumnSettings = ({
           {columns.map((column) => (
             <Checkbox
               key={column.id}
+              checked={columnSettings[column.id]}
               id={column.id}
               label={column.name}
               onCheckedChange={(checked) => {
@@ -43,7 +44,6 @@ export const ColumnSettings = ({
                   [column.id]: checked,
                 })
               }}
-              defaultChecked={columnSettings[column.id]}
             />
           ))}
         </div>

ui/src/pages/job-details/job-details-form/job-details-form.tsx

@@ -144,9 +144,9 @@ export const JobDetailsForm = ({
               config={config.pipeline}
               render={({ field }) => (
                 <Checkbox
+                  checked={field.value ?? false}
                   id={field.name}
                   label={config[field.name].label}
-                  defaultChecked={field.value}
                   onCheckedChange={field.onChange}
                 />
               )}