Rollout: `use_css_language_classes` feature flag

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Summary

This issue is to roll out the feature on production, that is currently behind the use_css_language_classes feature flag.

Owners

  • Most appropriate Slack channel to reach out to: #g_source_code
  • Best individual to reach out to: @JoFletcher

Expectations

What are we expecting to happen?

The GLFM markdown engine outputs language information for code blocks using CSS classes (language-*) on the <code> element instead of the lang attribute on the <pre> element. This prepares for the transition to valid, accessible HTML (WCAG compliance).

What can go wrong and how would we detect it?

Code block syntax highlighting could break or language classes could be missing/malformed. Monitor error rates and check that code blocks render correctly with proper syntax highlighting after enabling.

Rollout Steps

Note: Please make sure to run the chatops commands in the Slack channel that gets impacted by the command.

Rollout on non-production environments

  • Verify the MR with the feature flag is merged to master and has been deployed to non-production environments with /chatops gitlab run auto_deploy status <merge-commit-of-your-feature>

  • Deploy the feature flag at a percentage (recommended percentage: 50%) with /chatops gitlab run feature set use_css_language_classes <rollout-percentage> --actors --dev --pre --staging --staging-ref

  • Monitor that the error rates did not increase (repeat with a different percentage as necessary).

  • Enable the feature globally on non-production environments with /chatops gitlab run feature set use_css_language_classes true --dev --pre --staging --staging-ref

  • Verify that the feature works as expected. The best environment to validate the feature in is staging-canary as this is the first environment deployed to. Make sure you are configured to use canary.

  • If the feature flag causes end-to-end tests to fail, disable the feature flag on staging to avoid blocking deployments.

Before production rollout

  • If the change is significant and you wanted to announce in #whats-happening-at-gitlab, it best to do it before rollout to gitlab-org/gitlab-com.

Specific rollout on production

For visibility, all /chatops commands that target production must be executed in the #production Slack channel and cross-posted (with the command results) to the responsible team's Slack channel.

  • Ensure that the feature MRs have been deployed to both production and canary with /chatops gitlab run auto_deploy status <merge-commit-of-your-feature>
  • Enable for all internal users first: /chatops gitlab run feature set --feature-group=gitlab_team_members use_css_language_classes true
  • Verify that the feature works for the specific actors.

Preparation before global rollout

  • Set a milestone to this rollout issue to signal for enabling and removing the feature flag when it is stable.
  • Check if the feature flag change needs to be accompanied with a change management issue. Cross link the issue here if it does.
  • Ensure that you or a representative in development can be available for at least 2 hours after feature flag updates in production.
  • Ensure that documentation exists for the feature, and the version history text has been updated.
  • Notify the #support_gitlab-com Slack channel and your team channel.

Global rollout on production

For visibility, all /chatops commands that target production must be executed in the #production Slack channel and cross-posted (with the command results) to the responsible team's Slack channel.

  • Incrementally roll out the feature on production.
    • Example: /chatops gitlab run feature set use_css_language_classes <rollout-percentage> --actors
    • Between every step wait for at least 15 minutes and monitor the appropriate graphs on https://dashboards.gitlab.net.
  • After the feature has been 100% enabled, wait for at least one day before releasing the feature.

Release the feature

  • Create a merge request to remove the use_css_language_classes feature flag. The MR should include:
    • Remove all references to the feature flag from the codebase.
    • Remove the YAML definition from the repository.
  • Ensure that the cleanup MR has been included in the release package.
  • Close the feature issue to indicate the feature will be released in the current milestone.
  • Once the cleanup MR has been deployed to production, clean up the feature flag from all environments: /chatops gitlab run feature delete use_css_language_classes --dev --pre --staging --staging-ref --production
  • Close this rollout issue.

Rollback Steps

  • This feature can be disabled on production by running the following Chatops command:
/chatops gitlab run feature set use_css_language_classes false
  • Disable the feature flag on non-production environments:
/chatops gitlab run feature set use_css_language_classes false --dev --pre --staging --staging-ref
  • Delete feature flag from all environments:
/chatops gitlab run feature delete use_css_language_classes --dev --pre --staging --staging-ref --production
Edited by 🤖 GitLab Bot 🤖