Remove/convert to utility classes non-page specific styles for profile 2
What does this MR do and why?
A second MR continuing on from Remove/convert to utility classes non-page spec... (!141728 - merged)
Part of the page-specific-scss migration effort.
Removes classes from profile.scss. Some were unused, and some could be easily converted to utility classes.
See screenshots for details.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Admin -> Settings -> General -> Account & Limit
Replace usage of custom .help-block class (from profile.scss) with .gl-text-secondary
| Before | After |
|---|---|
 |
 |
Profile -> Edit profile -> Notifications
Replace usage of custom .help-block class (from profile.scss) with .gl-text-secondary
I wasn't sure which situations caused help text to show there so was manually editing
app/views/profiles/notifications/_email_settings.html.haml line 3 with some hardcoded text to make it show up
| Before | After |
|---|---|
 |
 |
Project -> Settings -> Repository -> Mirroring repositories -> Add New
Replace 2x usages of custom .help-block class (from profile.scss) with .gl-text-secondary
| Before | After |
|---|---|
 |
 |
 |
 |
Move .gitlab-slack-slack-logo into the component.
There is only a single usage of the class, and it does not rely on any SCSS variables or other SCSS that would mean it's better for this class to remain in an SCSS file.
Testing GitLab Slack App
If you do not have the Slack App configured, you can "fake it" without setting up an actual slack instance. From the rails console:
project = Project.find_by_full_path(...)
integration = project.find_or_initialize_integration('gitlab_slack_application')
integration.assign_attributes(active: true)
integration.save!(context: :manual_change)
# Create a mock SlackIntegration record, which normally happens when someone goes through the Slack
# app installation flow, authorizing with their Slack workspace:
SlackIntegration.create(integration: integration, team_id: 'foo', team_name: "Foo Slack Workspace", alias: project.full_path, user_id: 'foo')Now visit URL to view the slack app:
http://gdk.test:3000/-/profile/slack/edit
(Note slack app will not function, but you can see the logo)
| Before | After |
|---|---|
 |
 |
Edit Profile -> Account -> Service sign-in
Migrated social provider styles into page specific bundle.
Setup google
Instructions for enabling google oauth in GDK can be found here:
https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/howto/google-oauth2.md
Or, if you can't get it fully working like me, the conditions in app/views/profiles/accounts/_providers.html.haml can be hardcoded to force the various states to show in order to verify styles.
| Before | After |
|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
Profile -> Applications -> Edit
Converted .oauth-application-show .scopes-list custom style to utility class.
| Before | After |
|---|---|
 |
 (2px difference in padding-left....) |
profile.scss .user-callout styles - I believe these styles are all unused. Searching for .user-callout throughout the codebase shows a bunch of usages within promotions (e.g. ultimate trial callout promotion), but promotions.scss has its own styles defined for .user-callout. I couldn't see any usages that would be impacted by removal of the styles in profile.scss
How to set up and validate locally
See screenshots above for the various places impacted by this MR.
I'm not super familiar with some of the areas impacted so appreciate any extra sanity testing for other places I've unintentionally changed
Related to #239863 (closed)