fix: using readOnly to hide the edit button for the email instead of …

…disabling edit button
jwplayer · Dec 5, 2022 · 96f6da3 · 96f6da3
1 parent 239a741
commit 96f6da3
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 17 deletions.
diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -150,7 +150,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
             }),
           canSave: (values) => !!(values.email && values.confirmationPassword),
           editButton: t('account.edit_account'),
-          isDisabled: !canUpdateEmail,
+          readOnly: !canUpdateEmail,
           content: (section) => (
             <>
               <TextField

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -33,7 +33,6 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       class="_controls_1c1c63"
     >
       <button
-        aria-disabled="false"
         class="_button_f8f296 _default_f8f296 _outlined_f8f296"
         type="button"
       >

diff --git a/src/components/Form/FormSection.tsx b/src/components/Form/FormSection.tsx
@@ -27,7 +27,7 @@ export interface FormSectionProps<TData extends GenericFormValues, TErrors> {
   onSubmit?: (values: TData) => Promise<{ errors?: string[] }> | Promise<void> | void;
   content: (args: FormSectionContentArgs<TData, TErrors>) => ReactNode;
   children?: never;
-  isDisabled?: boolean;
+  readOnly?: boolean;
 }
 
 export function FormSection<TData extends GenericFormValues>({
@@ -40,7 +40,7 @@ export function FormSection<TData extends GenericFormValues>({
   canSave,
   onSubmit,
   content,
-  isDisabled,
+  readOnly = false,
 }: FormSectionProps<TData, string[]>): ReactElement<FormSectionProps<TData, string[]>> | null {
   const sectionId = useOpaqueId(label);
   const {
@@ -169,11 +169,12 @@ export function FormSection<TData extends GenericFormValues>({
               {cancelButton && <Button label={cancelButton} type="reset" variant="text" onClick={onCancel} />}
             </>
           ) : (
+            !readOnly &&
             editButton &&
             (typeof editButton === 'object' ? (
               (editButton as ReactElement)
             ) : (
-              <Button label={editButton as string} type="button" onClick={onEdit} disabled={isLoading || isDisabled} />
+              <Button label={editButton as string} type="button" onClick={onEdit} disabled={isLoading} />
             ))
           )}
         </div>

diff --git a/src/pages/User/__snapshots__/User.test.tsx.snap b/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -130,18 +130,7 @@ exports[`User Component tests > Account Page 1`] = `
         </div>
         <div
           class="_controls_1c1c63"
-        >
-          <button
-            aria-disabled="true"
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296 _disabled_f8f296"
-            disabled=""
-            type="button"
-          >
-            <span>
-              account.edit_account
-            </span>
-          </button>
-        </div>
+        />
       </div>
       <div
         class="_panel_e9c5ca"