feat: Add ability to map OIDC attributes and ignore username

Closes #554

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -24,6 +24,7 @@ const AccountPane = React.memo(
     organization,
     language,
     isLocked,
+    isUsernameLocked,
     isAvatarUpdating,
     usernameUpdateForm,
     emailUpdateForm,
@@ -104,7 +105,7 @@ const AccountPane = React.memo(
           value={language || 'auto'}
           onChange={handleLanguageChange}
         />
-        {!isLocked && (
+        {(!isLocked || !isUsernameLocked) && (
           <>
             <Divider horizontal section>
               <Header as="h4">
@@ -113,56 +114,62 @@ const AccountPane = React.memo(
                 })}
               </Header>
             </Divider>
-            <div className={styles.action}>
-              <UserUsernameEditPopup
-                usePasswordConfirmation
-                defaultData={usernameUpdateForm.data}
-                username={username}
-                isSubmitting={usernameUpdateForm.isSubmitting}
-                error={usernameUpdateForm.error}
-                onUpdate={onUsernameUpdate}
-                onMessageDismiss={onUsernameUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editUsername', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserUsernameEditPopup>
-            </div>
-            <div className={styles.action}>
-              <UserEmailEditPopup
-                usePasswordConfirmation
-                defaultData={emailUpdateForm.data}
-                email={email}
-                isSubmitting={emailUpdateForm.isSubmitting}
-                error={emailUpdateForm.error}
-                onUpdate={onEmailUpdate}
-                onMessageDismiss={onEmailUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editEmail', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserEmailEditPopup>
-            </div>
-            <div className={styles.action}>
-              <UserPasswordEditPopup
-                usePasswordConfirmation
-                defaultData={passwordUpdateForm.data}
-                isSubmitting={passwordUpdateForm.isSubmitting}
-                error={passwordUpdateForm.error}
-                onUpdate={onPasswordUpdate}
-                onMessageDismiss={onPasswordUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editPassword', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserPasswordEditPopup>
-            </div>
+            {!isUsernameLocked && (
+              <div className={styles.action}>
+                <UserUsernameEditPopup
+                  defaultData={usernameUpdateForm.data}
+                  username={username}
+                  isSubmitting={usernameUpdateForm.isSubmitting}
+                  error={usernameUpdateForm.error}
+                  usePasswordConfirmation={!isLocked} // FIXME: hack
+                  onUpdate={onUsernameUpdate}
+                  onMessageDismiss={onUsernameUpdateMessageDismiss}
+                >
+                  <Button className={styles.actionButton}>
+                    {t('action.editUsername', {
+                      context: 'title',
+                    })}
+                  </Button>
+                </UserUsernameEditPopup>
+              </div>
+            )}
+            {!isLocked && (
+              <>
+                <div className={styles.action}>
+                  <UserEmailEditPopup
+                    usePasswordConfirmation
+                    defaultData={emailUpdateForm.data}
+                    email={email}
+                    isSubmitting={emailUpdateForm.isSubmitting}
+                    error={emailUpdateForm.error}
+                    onUpdate={onEmailUpdate}
+                    onMessageDismiss={onEmailUpdateMessageDismiss}
+                  >
+                    <Button className={styles.actionButton}>
+                      {t('action.editEmail', {
+                        context: 'title',
+                      })}
+                    </Button>
+                  </UserEmailEditPopup>
+                </div>
+                <div className={styles.action}>
+                  <UserPasswordEditPopup
+                    usePasswordConfirmation
+                    defaultData={passwordUpdateForm.data}
+                    isSubmitting={passwordUpdateForm.isSubmitting}
+                    error={passwordUpdateForm.error}
+                    onUpdate={onPasswordUpdate}
+                    onMessageDismiss={onPasswordUpdateMessageDismiss}
+                  >
+                    <Button className={styles.actionButton}>
+                      {t('action.editPassword', {
+                        context: 'title',
+                      })}
+                    </Button>
+                  </UserPasswordEditPopup>
+                </div>
+              </>
+            )}
           </>
         )}
       </Tab.Pane>
@@ -179,6 +186,7 @@ AccountPane.propTypes = {
   organization: PropTypes.string,
   language: PropTypes.string,
   isLocked: PropTypes.bool.isRequired,
+  isUsernameLocked: PropTypes.bool.isRequired,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,