Fix failing E2E tests

Change Settings to Edit profile as per UI

app/assets/stylesheets/framework/header.scss

@@ -516,28 +516,8 @@
     left: auto;
     max-height: $dropdown-max-height-lg;
-    li.current-user {
-      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-
-      .user-name {
-        display: block;
-      }
-
-      .user-status {
-        margin-right: 0;
-        max-width: 240px;
-        font-size: $gl-font-size-small;
-
-        gl-emoji {
-          font-size: $gl-font-size-small;
-        }
-
-        .user-status-emoji {
-          gl-emoji {
-            font-size: $gl-font-size;
-          }
-        }
-      }
+    .user-status {
+      max-width: 240px;
     }
     svg {

app/views/layouts/header/_current_user_dropdown.html.haml

@@ -2,18 +2,12 @@
 %ul
   %li.current-user
-    .user-name.gl-font-weight-bold
-      = current_user.name
-      - if current_user&.status && user_status_set_to_busy?(current_user.status)
-        %span.gl-font-weight-normal.gl-text-gray-500= s_("UserProfile|(Busy)")
-    = current_user.to_reference
-    - if current_user.status
-      .user-status.d-flex.align-items-center.gl-mt-2.has-tooltip{ title: current_user.status.message_html, data: { html: 'true', placement: 'bottom' } }
-        - if show_status_emoji?(current_user.status)
-          .user-status-emoji.d-flex.align-items-center
-            = emoji_icon current_user.status.emoji
-        %span.user-status-message.str-truncated
-          = current_user.status.message_html.html_safe
+    - if current_user_menu?(:profile)
+      = link_to current_user, class: 'gl-line-height-20!', data: { user: current_user.username, testid: 'user-profile-link' } do
+        = render 'layouts/header/current_user_dropdown_item'
+    - else
+      .gl-py-3.gl-px-4
+        = render 'layouts/header/current_user_dropdown_item'
   %li.divider
   - if can?(current_user, :update_user_status, current_user)
     %li
@@ -22,9 +16,6 @@
           = s_('SetStatusModal|Edit status')
         - else
           = s_('SetStatusModal|Set status')
-  - if current_user_menu?(:profile)
-    %li
-      = link_to s_("CurrentUser|Profile"), current_user, class: 'profile-link', data: { user: current_user.username }
   - if current_user_menu?(:start_trial)
     %li
       %a.trial-link{ href: trials_link_url }
@@ -32,7 +23,9 @@
         = emoji_icon('rocket')
   - if current_user_menu?(:settings)
     %li
-      = link_to s_("CurrentUser|Settings"), profile_path, data: { qa_selector: 'settings_link' }
+      = link_to s_("CurrentUser|Edit profile"), profile_path, data: { qa_selector: 'edit_profile_link' }
+    %li
+      = link_to s_("CurrentUser|Preferences"), profile_preferences_path
   = render_if_exists 'layouts/header/buy_pipeline_minutes', project: @project, namespace: @group
   = render_if_exists 'layouts/header/upgrade'

app/views/layouts/header/_current_user_dropdown_item.html.haml

+.gl-font-weight-bold
+  = current_user.name
+  - if current_user&.status && user_status_set_to_busy?(current_user.status)
+    %span.gl-font-weight-normal.gl-text-gray-500= s_("UserProfile|(Busy)")
+= current_user.to_reference
+- if current_user.status
+  .user-status.d-flex.align-items-center.gl-mt-2.gl-mr-0.gl-font-sm.has-tooltip{ title: current_user.status.message_html, data: { html: 'true', placement: 'bottom' } }
+    - if show_status_emoji?(current_user.status)
+      .user-status-emoji.d-flex.align-items-center
+        = emoji_icon current_user.status.emoji
+    %span.user-status-message.str-truncated
+      = current_user.status.message_html.html_safe

changelogs/unreleased/271530-improve-user-menu.yml

+---
+title: Improve user dropdown items
+merge_request: 53175
+author:
+type: changed

doc/README.md

@@ -80,7 +80,7 @@ Learn more about GitLab account management:
 |:-----------------------------------------------------------|:------------|
 | [User account](user/profile/index.md)                      | Manage your account. |
 | [Authentication](topics/authentication/index.md)           | Account security with two-factor authentication, set up your SSH keys, and deploy keys for secure access to your projects. |
-| [Profile settings](user/profile/index.md#profile-settings) | Manage your profile settings, two factor authentication, and more. |
+| [User settings](user/profile/index.md#user-settings) | Manage your user settings, two factor authentication, and more. |
 | [User permissions](user/permissions.md)                    | Learn what each role in a project can do. |
 ### Git and GitLab

doc/administration/troubleshooting/debug.md

@@ -235,7 +235,7 @@ separate Rails process to debug the issue:
 1. Log in to your GitLab account.
 1. Copy the URL that is causing problems (e.g. `https://gitlab.com/ABC`).
-1. Create a Personal Access Token for your user (Profile Settings -> Access Tokens).
+1. Create a Personal Access Token for your user (User Settings -> Access Tokens).
 1. Bring up the [GitLab Rails console.](../operations/rails_console.md#starting-a-rails-console-session)
 1. At the Rails console, run:

doc/api/avatar.md

@@ -10,7 +10,7 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 ## Get a single avatar URL
-Get a single [avatar](../user/profile/index.md#profile-settings) URL for a user with the given email address.
+Get a single [avatar](../user/profile/index.md#user-settings) URL for a user with the given email address.
 If:

doc/integration/github.md

@@ -179,7 +179,9 @@ If you're getting the message `Signing in using your GitHub account without a pr
 GitLab account is not allowed. Create a GitLab account first, and then connect it to your
 GitHub account` when signing in, in GitLab:
-1. Go to your **Profile > Account**.
-1. Under the "Social sign-in" section, click **Connect** near the GitHub icon.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Account**.
+1. In the **Social sign-in** section, select **Connect to GitHub**.
 After that, you should be able to sign in via GitHub successfully.

doc/integration/gitlab.md

@@ -12,11 +12,9 @@ To enable the GitLab.com OmniAuth provider you must register your application wi
 GitLab.com generates an application ID and secret key for you to use.
 1. Sign in to GitLab.com.
-
-1. On the upper right corner, click on your avatar and go to your **Settings**.
-
-1. Select **Applications** in the left menu.
-
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Applications**.
 1. Provide the required details for **Add new application**.
    - Name: This can be anything. Consider something like `<Organization>'s GitLab` or `<Your Name>'s GitLab` or something else descriptive.
    - Redirect URI:
@@ -29,10 +27,8 @@ GitLab.com generates an application ID and secret key for you to use.
    The first link is required for the importer and second for the authorization.
 1. Select **Save application**.
-
 1. You should now see an **Application ID** and **Secret**. Keep this page open as you continue
    configuration.
-
 1. On your GitLab server, open the configuration file.
    For Omnibus package:
@@ -50,10 +46,9 @@ GitLab.com generates an application ID and secret key for you to use.
    ```
 1. See [Initial OmniAuth Configuration](omniauth.md#initial-omniauth-configuration) for initial settings.
-
 1. Add the provider configuration:
-   For Omnibus package:
+   For Omnibus installations:
    ```ruby
    gitlab_rails['omniauth_providers'] = [
@@ -76,16 +71,13 @@ GitLab.com generates an application ID and secret key for you to use.
    ```
 1. Change `'YOUR_APP_ID'` to the Application ID from the GitLab.com application page.
-
 1. Change `'YOUR_APP_SECRET'` to the secret from the GitLab.com application page.
-
 1. Save the configuration file.
-
 1. Based on how GitLab was installed, implement these changes by using
    the appropriate method:
-   - Omnibus GitLab: [Reconfigure GitLab](../administration/restart_gitlab.md#omnibus-gitlab-reconfigure).
-   - Source: [Restart GitLab](../administration/restart_gitlab.md#installations-from-source).
+   - Omnibus GitLab: [reconfigure GitLab](../administration/restart_gitlab.md#omnibus-gitlab-reconfigure).
+   - Source: [restart GitLab](../administration/restart_gitlab.md#installations-from-source).
 On the sign-in page, there should now be a GitLab.com icon following the
 regular sign-in form. Select the icon to begin the authentication process.

doc/integration/gitpod.md

@@ -33,7 +33,9 @@ To learn more about Gitpod, see their [features](https://www.gitpod.io/features/
 With the Gitpod integration enabled for your GitLab instance, to enable it for yourself:
-1. Select your avatar in the top-right corner, then select **Settings > Preferences**.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Account**.
 1. Under **Integrations**, locate the **Gitpod** section.
 1. Check the **Enable Gitpod integration** checkbox and select the **Save changes** button.

doc/integration/jenkins.md

@@ -70,9 +70,10 @@ Grant a GitLab user access to the select GitLab projects.
 Create a personal access token to authorize Jenkins' access to GitLab.
-1. Log in to GitLab as the user to be used with Jenkins.
-1. Click your avatar, then **Settings**.
-1. Click **Access Tokens** in the sidebar.
+1. Sign in to GitLab as the user to be used with Jenkins.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Access Tokens**.
 1. Create a personal access token with the **API** scope checkbox checked. For more details, see
    [Personal access tokens](../user/profile/personal_access_tokens.md).
 1. Record the personal access token's value, because it's required in [Configure the Jenkins server](#configure-the-jenkins-server) section.

doc/integration/jira_development_panel.md

@@ -77,10 +77,10 @@ To ensure that regular user account maintenance doesn't impact your integration,
 create and use a single-purpose `jira` user in GitLab.
 1. In GitLab, create a new application to allow Jira to connect with your GitLab account.
-
 1. Sign in to the GitLab account that you want Jira to use to connect to GitLab.
-1. In the top right corner, click your profile avatar.
-1. Click **Settings > Applications** to display the form to create a new application.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Applications**.
 1. In the **Name** field, enter a descriptive name for the integration, such as `Jira`.
 1. In the **Redirect URI** field, enter `https://<gitlab.example.com>/login/oauth/callback`,
    replacing `<gitlab.example.com>` with your GitLab instance domain. For example, if you are using GitLab.com,
@@ -94,8 +94,7 @@ create and use a single-purpose `jira` user in GitLab.
    ![GitLab application setup](img/jira_dev_panel_gl_setup_1.png)
-1. Check **API** in the Scopes section, and uncheck any other checkboxes.
-
+1. Check **API** in the **Scopes** section, and clear any other checkboxes.
 1. Click **Save application**. GitLab displays the generated **Application ID**
    and **Secret** values. Copy these values, which you use in Jira.

doc/integration/kerberos.md

@@ -115,9 +115,10 @@ existing GitLab account. To do so:
 If you're not an administrator:
-1. Select your avatar in the upper-right corner, and select **Settings**.
-1. Select Account. In the **Social sign-in** section, select
-   **Connect Kerberos SPNEGO**.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Account**.
+1. In the **Social sign-in** section, select **Connect Kerberos SPNEGO**.
    If you don't see a **Social sign-in** Kerberos option, follow the
    requirements in [Enable single sign-on](#enable-single-sign-on).

doc/integration/oauth_provider.md

@@ -43,16 +43,17 @@ levels. The default callback URL is `http://your-gitlab.example.com/users/auth/g
 ## Add an application through the profile
-To add a new application via your profile, select your avatar in the top right, and then select
-**Settings > Applications**. You can then enter a **Name**, **Redirect URI** and
-OAuth 2 scopes as defined in [Authorized Applications](#authorized-applications).
-- The **Redirect URI** is the URL where users are sent after they authorize with GitLab.
-When you select **Save application**, GitLab displays:
-
-- Application ID: OAuth 2 Client ID.
-- Secret: OAuth 2 Client Secret.
+To add a new application via your profile:
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Applications**.
+1. Enter a **Name**, **Redirect URI** and OAuth 2 scopes as defined in [Authorized Applications](#authorized-applications).
+   The **Redirect URI** is the URL where users are sent after they authorize with GitLab.
+1. Select **Save application**. GitLab displays:
+   - Application ID: OAuth 2 Client ID.
+   - Secret: OAuth 2 Client Secret.
 ## OAuth applications in the Admin Area

doc/integration/omniauth.md

@@ -138,9 +138,10 @@ provider such as Twitter can be enabled. Follow the steps below to enable an
 OmniAuth provider for an existing user.
 1. Sign in normally - whether standard sign in, LDAP, or another OmniAuth provider.
-1. Go to profile settings (the silhouette icon in the top right corner).
-1. Select the "Account" tab.
-1. Under "Connected Accounts" select the desired OmniAuth provider, such as Twitter.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Account**.
+1. In the **Connected Accounts** section, select the desired OmniAuth provider, such as Twitter.
 1. The user is redirected to the provider. After the user authorizes GitLab,
    they are redirected back to GitLab.

doc/integration/sourcegraph.md

@@ -87,9 +87,12 @@ You can skip this step if you already have your GitLab repositories searchable i
 If a GitLab administrator has enabled Sourcegraph, you can enable this feature in your user preferences.
-1. In GitLab, click your avatar in the top-right corner, then click **Settings**. On the left-hand nav, click **Preferences**.
-1. Under **Integrations**, find the **Sourcegraph** section.
-1. Check **Enable Sourcegraph**.
+In GitLab:
+
+1. In the top-right corner, select your avatar.
+1. Select **Preferences**.
+1. In the **Integrations** section, select the checkbox under **Sourcegraph**.
+1. Select **Save changes**.
 ![Sourcegraph user preferences](img/sourcegraph_user_preferences_v12_5.png)

doc/integration/trello_power_up.md

@@ -38,8 +38,11 @@ If your instance's URL is `https://example.com`, your API URL is `https://exampl
 Your GitLab personal access token enables your GitLab account to be accessed
 from Trello.
-> Find it in GitLab by clicking on your avatar (upright corner), from which you access
-your user **Settings** > **Access Tokens**.
+To find it in GitLab:
+
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Access Tokens**.
 Learn more about generating a personal access token in the
 [Personal Access Token Documentation](../user/profile/personal_access_tokens.md).

doc/integration/vault.md

@@ -18,12 +18,15 @@ The following assumes you already have Vault installed and running.
 1. **Get the OpenID Connect client ID and secret from GitLab:**
-   First you must create a GitLab application to obtain an application ID and secret for authenticating into Vault. To do this, sign in to GitLab and follow these steps:
-
-   1. On GitLab, click your avatar on the top-right corner, and select your user **Settings > Applications**.
-   1. Fill out the application **Name** and [**Redirect URI**](https://www.vaultproject.io/docs/auth/jwt#redirect-uris),
-      making sure to select the **OpenID** scope.
-   1. Save application.
+   First you must create a GitLab application to obtain an application ID and secret for authenticating into Vault.
+   To do this, sign in to GitLab and follow these steps:
+
+   1. In the top-right corner, select your avatar.
+   1. Select **Edit profile**.
+   1. In the left sidebar, select **Applications**.
+   1. Fill out the application **Name** and [**Redirect URI**](https://www.vaultproject.io/docs/auth/jwt#redirect-uris).
+   1. Select the **OpenID** scope.
+   1. Select **Save application**.
    1. Copy client ID and secret, or keep the page open for reference.
    ![GitLab OAuth provider](img/gitlab_oauth_vault_v12_6.png)

doc/raketasks/features.md

@@ -15,7 +15,13 @@ This command enables the namespaces feature introduced in GitLab 4.0. It moves e
 The **repository location changes as part of this task**, so you must **update all your Git URLs** to
 point to the new location.
-The username can be changed at **Profile > Account**.
+To change your username:
+
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **Account**.
+1. In the **Change username** section, type the new username.
+1. Select **Update username**.
 For example:

doc/ssh/README.md

@@ -182,8 +182,9 @@ Now you can copy the SSH key you created to your GitLab account.
    If you're using an RSA key, substitute accordingly.
 1. Navigate to `https://gitlab.com` or your local GitLab instance URL and sign in.
-1. Select your avatar in the upper right corner, and click **Settings**
-1. Click **SSH Keys**.
+1. In the top-right corner, select your avatar.
+1. Select **Edit profile**.
+1. In the left sidebar, select **SSH Keys**.
 1. Paste the public key that you copied into the **Key** text box.
 1. Make sure your key includes a descriptive name in the **Title** text box, such as _Work Laptop_ or
    _Home Workstation_.