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)

changed milestone to %Backlog

added Category:User Profile OKR-FE Pajamas Migration Day bugperformance devopsdata stores frontend grouptenant scale sectioncore platform typemaintenance labels

assigned to @elwyn-gitlab

added typebug label and removed typemaintenance label

added 5 commits

• c164dd51 - Replace custom class with utility
• 856e7416 - Replace custom class with utility
• 1a9bfc76 - Replace custom class with utility
• 0bbb4f6b - Remove help-block class as all usages are now replaced
• f3673ae5 - Move gitlab-slack-slack-logo into component

Compare with previous version

added backend label

	1 Warning
	You've made some app changes, but didn't add any tests. That's OK as long as you're refactoring existing code, but please consider adding any of the maintenancepipelines, maintenancerefactor, maintenanceworkflow, documentation, QA labels.

	1 Message
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Category	Reviewer	Maintainer
backend	@Quintasan (UTC+1, 12 hours behind author)	@rzwambag (UTC+1, 12 hours behind author)
frontend	@dstull (UTC-5, 18 hours behind author)	@ntepluhina (UTC+1, 12 hours behind author)
groupimport and integrate (frontend)	@justin_ho (UTC+7, 6 hours behind author)	Maintainer review is optional for groupimport and integrate (frontend)
~"Authentication"	Reviewer review is optional for ~"Authentication"	@bdenkovych (UTC+2, 11 hours behind author)

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added 1 commit

• 9309d5aa - Migrate social provider styles into page specific bundle

Compare with previous version

marked this merge request as draft

changed the description

added 1 commit

• 5b236aee - Migrate social provider styles into page specific bundle

Compare with previous version

added 1 commit

• 30cb8419 - Replace custom class with utility

Compare with previous version

changed the description

added 1 commit

• 89c85435 - Remove remaining profile.scss styles and file

Compare with previous version

deleted the 239863-page-specific-bundles-profile branch. This merge request now targets the master branch

added 1050 commits

• 89c85435...35b7081a - 1039 commits from branch master
• 8bbb55d1 - 1 earlier commit
• 05f25805 - Remove unused class
• c88a4187 - Replace custom class with utility
• 7b9c74ba - Replace custom class with utility
• b7bdf3be - Replace custom class with utility
• 591542e9 - Replace custom class with utility
• 9b610893 - Remove help-block class as all usages are now replaced
• 62baafd0 - Move gitlab-slack-slack-logo into component
• d05b5516 - Migrate social provider styles into page specific bundle
• 7a28eeb0 - Replace custom class with utility
• fce7a41d - Remove remaining profile.scss styles and file

Compare with previous version

Hey @panoskanell, can you please review this MR for test and backend?

EDIT: dangerbot changed its mind, no test review is needed now

marked this merge request as ready

requested review from @panoskanell

Hey @justin_ho, can you please provide the initial frontend + groupimport and integrate reviews for this MR?

requested review from @justin_ho

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 8a2814e1 and 5b2540cd

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.21 MB	4.21 MB	-	0.0 %
mainChunk	3.21 MB	3.21 MB	-	0.0 %

---

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

approved this merge request

requested review from @eduardosanz and removed review request for @justin_ho

@justin_ho, thanks for approving this merge request.

This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break master, a new pipeline will be started shortly.

Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.

added pipeline:mr-approved label

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for 5b2540cd

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Create      | 60     | 0      | 9       | 0     | 69    | ✅     |
| Govern      | 66     | 0      | 0       | 1     | 66    | ✅     |
| Package     | 24     | 0      | 2       | 0     | 26    | ✅     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Plan        | 53     | 0      | 0       | 0     | 53    | ✅     |
| Data Stores | 31     | 0      | 0       | 0     | 31    | ✅     |
| Verify      | 35     | 0      | 1       | 0     | 36    | ✅     |
| Monitor     | 7      | 0      | 0       | 0     | 7     | ✅     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
| Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 283    | 0      | 13      | 1     | 296   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-package-and-test: test report for 5b2540cd

expand test summary

+---------------------------------------------------------------------+
|                           suites summary                            |
+----------------+--------+--------+---------+-------+-------+--------+
|                | passed | failed | skipped | flaky | total | result |
+----------------+--------+--------+---------+-------+-------+--------+
| Verify         | 147    | 0      | 30      | 3     | 177   | ✅     |
| Create         | 568    | 0      | 73      | 18    | 641   | ✅     |
| Manage         | 36     | 3      | 11      | 2     | 50    | ❌     |
| Release        | 15     | 0      | 3       | 0     | 18    | ✅     |
| Govern         | 272    | 0      | 19      | 0     | 291   | ✅     |
| Package        | 226    | 0      | 17      | 0     | 243   | ✅     |
| Plan           | 246    | 0      | 13      | 0     | 259   | ✅     |
| Growth         | 0      | 0      | 6       | 0     | 6     | ➖     |
| Fulfillment    | 8      | 0      | 75      | 4     | 83    | ✅     |
| Analytics      | 7      | 0      | 0       | 0     | 7     | ✅     |
| Monitor        | 36     | 0      | 13      | 0     | 49    | ✅     |
| Systems        | 8      | 0      | 0       | 0     | 8     | ✅     |
| ModelOps       | 0      | 0      | 3       | 0     | 3     | ➖     |
| Data Stores    | 119    | 0      | 28      | 1     | 147   | ✅     |
| Configure      | 1      | 0      | 9       | 0     | 10    | ✅     |
| GitLab Metrics | 2      | 0      | 1       | 0     | 3     | ✅     |
| Secure         | 6      | 0      | 3       | 0     | 9     | ✅     |
| Ai-powered     | 0      | 0      | 3       | 0     | 3     | ➖     |
+----------------+--------+--------+---------+-------+-------+--------+
| Total          | 1697   | 3      | 307     | 28    | 2007  | ❌     |
+----------------+--------+--------+---------+-------+-------+--------+

e2e-review-qa: test report for fce7a41d

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Create      | 8      | 0      | 3       | 0     | 11    | ✅     |
| Package     | 0      | 0      | 1       | 0     | 1     | ➖     |
| Govern      | 3      | 0      | 0       | 0     | 3     | ✅     |
| Data Stores | 2      | 0      | 0       | 0     | 2     | ✅     |
| Monitor     | 4      | 0      | 0       | 0     | 4     | ✅     |
| Plan        | 3      | 0      | 1       | 0     | 4     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 20     | 0      | 5       | 0     | 25    | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

approved this merge request

requested review from @bwill

removed review request for @panoskanell

approved this merge request

I verified and approved the changes in apps/view/shared/*.

Great job!

removed review request for @eduardosanz

approved this merge request

removed review request for @bwill

mentioned in issue #443392

added 1 commit

• 5b2540cd - Use classes better suited for form text

Compare with previous version

reset approvals from @justin_ho, @bwill, and @eduardosanz by pushing to the branch

requested review from @eduardosanz

approved this merge request

requested review from @cngo and @justin_ho

removed review request for @eduardosanz

resolved all threads

removed review request for @cngo

enabled an automatic merge when the pipeline for 95a24416 succeeds

merged

mentioned in commit b04ad812

mentioned in incident gitlab-org/quality/engineering-productivity/master-broken-incidents#5389 (closed)

mentioned in issue #443475 (closed)

added workflowstaging-canary label

added workflowcanary label and removed workflowstaging-canary label

added workflowstaging label and removed workflowcanary label

added workflowproduction label and removed workflowstaging label

changed milestone to %16.10

added workflowpost-deploy-db-staging label and removed workflowproduction label

added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label

added releasedcandidate label

added releasedpublished label and removed releasedcandidate label

added pipelinetier-3 label

added devopstenant scale grouporganizations sectioninfrastructure platforms labels and removed devopsdata stores grouptenant scale [DEPRECATED] sectioncore platform labels