Fix merge conflict & rename props

website/src/components/Survey/LabelRadioGroup.tsx

@@ -5,7 +5,7 @@ import { colors } from "src/styles/Theme/colors";
 interface LabelRadioGroupProps {
   labelIDs: Array<string>;
   onChange: (sliderValues: number[]) => unknown;
-  isDisabled?: boolean;
+  isEditable?: boolean;
 }
 
 export const LabelRadioGroup = (props: LabelRadioGroupProps) => {
@@ -30,7 +30,7 @@ export const LabelRadioGroup = (props: LabelRadioGroupProps) => {
             { text: "No", value: 0 },
             { text: "Yes", value: 1 },
           ]}
-          isDisabled={props.isDisabled}
+          isEditable={props.isEditable}
           interactionFlag={interactionFlag}
         />
       ))}
@@ -49,7 +49,7 @@ interface LabelRadioItemProps {
   labelValue: number;
   clickHandler: (newVal: number) => unknown;
   states: ButtonState[];
-  isDisabled: boolean;
+  isEditable: boolean;
   interactionFlag: boolean;
 }
 
@@ -69,7 +69,7 @@ const LabelRadioItem = (props: LabelRadioItemProps) => {
         {props.states.map((item, idx) => (
           <Button
             colorScheme={item.value === props.labelValue && props.interactionFlag ? item.colorScheme || "blue" : "gray"}
-            isDisabled={props.isDisabled}
+            isDisabled={!props.isEditable}
             size="lg"
             key={idx}
             onClick={() => props.clickHandler(item.value)}

website/src/components/Survey/LabelSliderGroup.tsx

@@ -6,10 +6,10 @@ import { colors } from "styles/Theme/colors";
 interface LabelSliderGroupProps {
   labelIDs: Array<string>;
   onChange: (sliderValues: number[]) => unknown;
-  isDisabled?: boolean;
+  isEditable?: boolean;
 }
 
-export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSliderGroupProps) => {
+export const LabelSliderGroup = ({ labelIDs, onChange, isEditable }: LabelSliderGroupProps) => {
   const [sliderValues, setSliderValues] = useState<number[]>(Array.from({ length: labelIDs.length }).map(() => 0));
 
   return (
@@ -25,7 +25,7 @@ export const LabelSliderGroup = ({ labelIDs, onChange, isDisabled }: LabelSlider
             onChange(sliderValues);
             setSliderValues(newState);
           }}
-          isDisabled={isDisabled}
+          isEditable={isEditable}
         />
       ))}
     </Grid>
@@ -36,7 +36,7 @@ function CheckboxSliderItem(props: {
   labelId: string;
   sliderValue: number;
   sliderHandler: (newVal: number) => unknown;
-  isDisabled: boolean;
+  isEditable: boolean;
 }) {
   const id = useId();
   const { colorMode } = useColorMode();
@@ -49,7 +49,7 @@ function CheckboxSliderItem(props: {
         {/* TODO: display real text instead of just the id */}
         <span className={labelTextClass}>{props.labelId}</span>
       </label>
-      <Slider defaultValue={0} isDisabled={props.isDisabled} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
+      <Slider defaultValue={0} isDisabled={!props.isEditable} onChangeEnd={(val) => props.sliderHandler(val / 100)}>
         <SliderTrack>
           <SliderFilledTrack />
           <SliderThumb />

website/src/components/Tasks/LabelTask.tsx

@@ -67,9 +67,9 @@ export const LabelTask = ({
           )}
         </>
         {valid_labels.length === 1 ? (
-          <LabelRadioGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+          <LabelRadioGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
         ) : (
-          <LabelSliderGroup labelIDs={task.valid_labels} isDisabled={isDisabled} onChange={onSliderChange} />
+          <LabelSliderGroup labelIDs={task.valid_labels} isEditable={isEditable} onChange={onSliderChange} />
         )}
       </TwoColumnsWithCards>
     </div>