refactor: change readOnly to isEditable to keep consistency

Author: bra-i-am

src/advanced-settings/AdvancedSettings.tsx

@@ -70,11 +70,9 @@ const AdvancedSettings = () => {
 
   const isLoading = isPendingSettingsStatus || (isAuthzEnabled && isLoadingUserPermissions);
 
-  // Determine if UI should be read-only (has VIEW but not MANAGE)
-  const isReadOnly = isAuthzEnabled
-    && !isLoadingUserPermissions
-    && !!canViewAdvancedSettings
-    && !canManageAdvancedSettings;
+  const isEditable = !isAuthzEnabled
+    || isLoadingUserPermissions
+    || !!canManageAdvancedSettings;
 
   const updateSettingsButtonState = {
     labels: {
@@ -218,7 +216,7 @@ const AdvancedSettings = () => {
               />
               <article>
                 <div>
-                  <section className="setting-items-policies" aria-disabled={isReadOnly || undefined}>
+                  <section className="setting-items-policies" aria-disabled={!isEditable || undefined}>
                     <div className="small">
                       <FormattedMessage
                         id="course-authoring.advanced-settings.policies.description"
@@ -260,7 +258,7 @@ const AdvancedSettings = () => {
                             handleBlur={handleSettingBlur}
                             isEditableState={isEditableState}
                             setIsEditableState={setIsEditableState}
-                            readOnly={isReadOnly}
+                            isEditable={isEditable}
                           />
                         );
                       })}

src/advanced-settings/setting-card/SettingCard.test.jsx

@@ -92,14 +92,13 @@ describe('<SettingCard />', () => {
       expect(handleBlur).toHaveBeenCalled();
     });
   });
-  it('renders in readOnly mode with disabled input', () => {
-    render(<RootWrapper readOnly />);
+  it('renders in read-only mode with disabled input', () => {
+    render(<RootWrapper isEditable={false} />);
     const input = screen.getByLabelText(/Setting Name/i);
     expect(input).toBeDisabled();
   });
 
-  it('renders enabled by default when readOnly is not specified (default false)', () => {
-    // readOnly defaults to false - input should be enabled
+  it('renders enabled by default when isEditable is not specified (default true)', () => {
     render(<RootWrapper />);
     const input = screen.getByLabelText(/Setting Name/i);
     expect(input).not.toBeDisabled();

src/advanced-settings/setting-card/SettingCard.tsx

@@ -25,7 +25,7 @@ const SettingCard = ({
   saveSettingsPrompt,
   isEditableState,
   setIsEditableState,
-  readOnly = false,
+  isEditable = true,
 }) => {
   const intl = useIntl();
   const { deprecated, help, displayName } = settingData;
@@ -100,7 +100,7 @@ const SettingCard = ({
                 onChange={handleSettingChange}
                 aria-label={displayName}
                 onBlur={handleCardBlur}
-                disabled={readOnly}
+                disabled={!isEditable}
               />
             </Form.Group>
           </Card.Section>
@@ -135,7 +135,7 @@ SettingCard.propTypes = {
   saveSettingsPrompt: PropTypes.bool.isRequired,
   isEditableState: PropTypes.bool.isRequired,
   setIsEditableState: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool,
+  isEditable: PropTypes.bool,
 };
 
 export default SettingCard;