Cleanup snippet header component
The following discussions from !147451 (merged) should be addressed:
-
@pgascouvaillancourt started a discussion: (+2 comments) Do we need the
.snippet-box
class? I couldn't find any styles associated to it.class="has-tooltip gl-display-flex gl-align-self-center gl-mr-2"
-
@pgascouvaillancourt started a discussion: (+2 comments) Oof, I did comment on the
.sr-only
class here, but I missed the bigger issue:{{ s__(
VisibilityLevel|${visibility}) }}
doesn't help us much in terms of internationalization because we are using string interpolation in here. This prevents the i18n strings collector from catching this and making the string available for translation. This is probably something we should lint against with our ESLint plugin: https://gitlab.com/gitlab-org/frontend/eslint-plugin/-/blob/main/docs/rules/require-valid-i18n-helpers.md.What we would need to do here would probably involve creating a map of
visibilityLevel => externalized label
so that all possible labels are defined statically and can therefore be picked up when runningtooling/bin/gettext_extractor
.With that said, I wonder if we could simply print
snippetVisibilityLevelDescription
here🤔 <span class="gl-sr-only">{{ snippetVisibilityLevelDescription }}</span>
This issue was here before anyways, so I don't mind moving this to a follow-up.
-
@pgascouvaillancourt started a discussion: Oof, I'm not too thrilled about the absolute positioning in here. It would be great if we could revisit this with a simpler approach. This was not added in this MR though, so let's proceed.
/cc @seggenberger