GitLab UX Team, 6 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: How to edit GitLab UI text

Description

A quick tutorial on how to edit UI text in GitLab using VS Code and GDK (https://gitlab.com/gitlab-org/gitlab-development-kit).

Documentation:
- Externalization: https://docs.gitlab.com/ee/development/i18n/externalization.html
- Pajamas, GitLab Design System - Voice and tone for UI: https://design.gitlab.com/content/voice-tone

A

Hi uh this is martin and I will show quickly how to change ui text in gitlab. If you want to edit it me start sharing my screen right. So in this example, we want to look at group settings at the application page.

A

So I've already started my jdk and let me go to any group and as the administrator user I can get into settings there.

A

And let's click applications, so this is the page I want to edit now the process is like that. I find a string that I want to edit. So let's say I I want to change something in the the main description.

A

Let me copy it.

A

And now I'll go to vs code that I have open. I have loaded different gitlab projects. Most importantly, the gitlab project.

A

And let's paste the string into the search bar now, I already see that the the main thing that I'm looking for is here, but there's also a lot of unnecessary, irrelevant uh results for mostly from translation files. So it's good to have some some some folders or file file names or file types in the exclude uh field.

A

uh So I have this collection. Most importantly here we want the locale folder and this will exclude the translation files.

A

So we only get this and so it's a ham file and we found the the string we were looking for now. Now we can.

A

We can modify it, how we want. I saved the file and, let's refresh gdk right, so this is this was what I was looking for now. Another example is this description under the text box, so let's say I want to add a period under at the end, so the process is the same.

A

I copy the the string go to search for it and it shows up in another file, as is often the case with uh settings pages now, it shows up twice once the app views, admin, application, applications, folder and then once it's something with door keeper. So for me I don't know which one it is.

A

But again I will modify one of them.

A

uh Save the file and see after refresh, if it shows up- and it did so- I wouldn't have guessed that it's a door keeper thing, but it was that so let me undo that make the change. I wanted.

A

And refresh again right and we have the period at the end, um and so I would do that with all the files. Like all the other strings that I want to change, it gets a bit more tricky for fields named like name, because I imagine there's many of them in the code base.

A

But usually, if you go into the explorer review, maybe you can look around next close to the file that you found something else in now when you, uh when you change strings that are formatted like this, which means that they are externalized for translation.

A

uh You need to regenerate the gitlab.pot file and you do it by running the the command that they don't. Remember. The get text command that you can see in my terminal right now, and this will re regenerate the gitlab pod file, which is a collection of strings from all over the code base.

A

um One more thing to to try uh when you're changing settings text is sometimes there is a spec file or a test file for for that specific file. And uh you can you know you can push your changes, um open, a merge request and wait for the pipeline to fail um and tell you what to fix, or uh you can search for this pac file.

A

Now I have this extension um called go to spank this code, expansion extension and when you're in a file- um and I press ctrl, shift, p or command shift p on mac and when you type spec or go to spank, you can see this command in this case it doesn't do anything, but very often it found a file for me that that I had to modify to fix the tests and that's it.