Bring Code Quality and Security to your CI/CD pipeline

I will first present myself. Myself and Tibor, so we are both developers from the Sonar Source company or now we call it Sonar and we are both developers of the JavaScript analyzers and today we will be speaking about how you can use the products developed by Sonar for bringing code quality and security into your project CI. We will see this with the Sonar cloud and Sonar Linux. I'm not sure if you heard of this product but definitely you will learn about it soon.

I will show you the plan. Let's say it's one hour and a half but that's a rough estimation. Maybe it will be faster. It depends on how things are going. So here is the plan. I will not just go over it but you have an understanding that there will be eight models. Each model is a baby step on setting up the pipe of your project quality analysis and we will go one by one.

I will stop sharing these slides. Now let's start slowly with the products which we're going to discuss today. So Sonar is a company which provides code quality tools. This is, let's say, an ecosystem. SonarLint is an extension for the IDE, which gives you instant feedback while you're coding. SonarQube is a self-managed tool, so you will need to host it yourself. And SonarCloud is a cloud-based tool which is hosted by Sonar. So you just buy a subscription there or it is free for open source projects and you just use it. So today for the simplicity, we will use SonarCloud, of course, so that we don't need to take care of setting up the SonarQube.

So let's start and I will ask you in the next slide, on the slide number six. There is a link. So this is, I have it open already, that's the fork of the simple small project. This is a project from MDN, I forked it and I changed it a tiny bit to have it more appropriate for our purposes. So, could you please now fork this repository to your organization? So you have this fork button over here. I will not do it, because I have already have two. You fork it into your organization where you have rights. And so you press here and you should see the organization here and you need to press it. As soon as you have forked it, please open it, so you should see your, I don't know, John slash todo react. And now you should, you can clone this project locally. You can copy the SSH link to it. And you can clone the repository locally with git clone and insert this link. So I just have my some empty directory which I created for our workshop for devop.js and I just clone it in there. So we have cloned the wrapper and now let's go to VS Code.

So VS Code is one of the ideas which is supported by Sonor lint. I picked it up because it's the most common idea for the JS development. Also JetBrains ideas are supported, Eclipse, Visual Studio. I think that's it. So let's open our project into this. We'll just use the menu here. Open folder. And I will open this project here. So let's open the file source. I don't know where I got the file name. So let's open the file source slash app. So this will be the file we will be focusing today. So you might ignore the rest. So that's a Simple React project, which does the addition of to-do items, so your, I don't know, daily tasks or whatever. So it's a small demo project based on YouTube's yarn. So you can install yarn dependencies, while it's not in fact so much required now. And now let's install the Sunerlint extension.

So in this extensions tab in VS Code, where these four squares, you can just type Sunerlint and it's on the top and you will click on the install button. And it is installing and here it is. And instantly we are getting some underlined code. So this is sunerlint telling us that there are some problems in the code, or things to improve for the maintainability purposes. For example, there is a commented code here which might be confusing for maintainers. Here you have an import from React two times so you can merge these imports to be more concise, etc. So we have different issues here. In the VS Code at the bottom you have this warning, at the bottom in this tab you see the Sonor Lint reporting you the problems in the code. So there are warnings. Okay, I'm not sure what does this icon meaning. In Sonor Lint you can configure the rules. So if you open this explorer tab, the first tab where you see the files at the bottom there is a Sonor Lint rules tab. It's not super handy but that's what VS Code gives us. So you have the list of rules here and for them, those rules which are activated have on and those which are deactivated have off. So we have this default set of rules, which is running by default, which we expect will satisfy everybody, but for sure you might want to disable something. For example, here we have like, okay you don't need to create this variable, just directly return this rule or this expression. So you might want to disable the variable, the rule and you just can click it from here. Also for each rule you have a description. You can also access it from this bulb, and you have here description of the rule and examples examples of good and bad code, and the last thing we're gonna do now is let's find in this list of the rules the rule about shorthand syntax.

So, here it is object literal shorthand syntax should be used, so this rule is not activated you have off here, so let's say that I want activated and we instantly have a new issue so and here we can instead of writing name column name we can just write name and by the way we have quick fixes just currently in the sprint, so we should have quick fixes available here super soon.

So here it is the Sonar Lint, so we are done with our first model so we clone the wrapper we installed Sonar Lint extension in the VS Code and we looked how we can enable, disable the rules, how we can browse the issues, etcetera. Okay, so I hope that everybody managed that to work and now let's go to the next step that will be, I believe, a bit more interesting. I hope so.

In your slides you have a link to the SonarCloud, so this is a link to the login page. So you can use here this GitHub login, so you can simply click on here and you're logged in, so you will not see anything super interesting here, because you have an empty account. But you can already explore projects here, on the right with this I'm not sure how to say it in English, binocular icon. And in here you can see the projects which are already analyzed on SonarCloud, there are some featured projects, and so you can get some kind of understanding what is it like, so you can filter by size, language and, okay, there is a project name filter. So this is SonarCloud. So this is a platform where you track the quality of your project, so it contains many things. So you get bugs, vulnerabilities, maintainability issues, code smells, code coverage, duplications, plenty of metrics, their evolution with time, and many other great things. Some of them we will consider today. But what we want to do now is to add a new organization.

So we press on this plus on the left top corner and we press and create new organization. So here we will press on this let's say default option which is suggested, import an organization from github because that's how we logged in, and you will be asked which organization you want to install. I have several so I just picked my personal one. And here you will be asked which repositories you want to select. You can select all or only the one which we forked. I will select the one which we forked, so it is to do here and I will install it. We need a password and so here there is a key for the organization which is created. So the organization on Sonar Cloud is the same organization as you would have on GitHub, so where you can start the projects and configure them, share the configurations between the projects, etc. So, I continue... So, as I said, there is a free plan for the open source, for public projects, so these projects will be available for browsing everybody, under this binocular sign. Or you can have it paid, then it will be invisible. And the price depends on the number of lines of code. And so, here we are. We have our organization. So, this organization has only one member, who is me. And all people. But of course, you can have the whole team under one organization. And you can have different access rights, et cetera. So, as soon as we have the organization, we can create the project. Under it, so, I pressed on this. We can press on the plus. It doesn't matter. So, Suner Cloud suggests me to add this. To-do project. So, I agree with it. And pressing on set up button will automatically add the project to Suner Cloud and trigger the first analysis. So, now analysis is running. So, that's the first initial analysis of the project. It will take some time. I don't know, maybe a couple of minutes. Okay, so I see somebody said that I created. Matthias created it. Finished. Import. I have one bug. Oh, I'm sorry. I'm sorry for you.

Yeah. I did my best to put this bug. Indeed this project had so little code and it was done so nicely that it didn't have any bugs. So you can see here that it's me who committed it. Committed it like yesterday. So, yeah so. So, indeed, so now you see your project. If you open the main branch you see the overview of the things of the issues. So you can see the same issues which we overviewed in the sonar lint. So this React import, commented code, etc. But we don't see the issue with the name shorthand, the object property. Because this rule was activated only in sonar lint, so it was local configuration, this configuration is not available on sonar cloud. Sonar cloud doesn't know about it. But on sonar cloud, there is also a way to configure your rule set. And that's where we stop at our second model.

So you guys should open now your organization, which by default probably has your name. And in the organization on the top, you have Quality Profile. You see you have Quality Profile for each language. I think I didn't say that yet, but sonar cloud supports many languages. So you see here, so probably almost every modern language, not even modern. We have Kobol and I don't know what else. ABAP. Yeah, ABAP is on the top. Those languages are supported by Sonar Cloud. And those profiles, all these profiles, they're called Sonar Way. So this is default profiles. This is the same profile you have on Sonar LINT. And of course, if you want some just a profile as we did on Sonar LINT, you should create your own one. So we click on the create button on the right top and we will have a, I don't know, for example, DevOps.js, we don't need Apop in JavaScript. So we'll find JavaScript on the list and we need to pick Sonar Way as a parent because that will make it inherit all the rules there, which is great for the start because you don't need to click all the rules you want, but you already have something by default. And this is also great because if in one month we add 10 more rules to the platform, you will get those rules activated automatically. So I press create and here's my profile. So that's a profile in the organization. That means that you can make it available for every project in your organization, and that makes it super good in sharing the coding practices across the company or team. So currently we see here that no projects are explicitly associated to this profile because by default, default profile is used. And we can change this and in all projects we can pick our to-do project and now we see that this to-do project is using this profile. Or you can even on this settings button here, you can set it as default. That means that every new project which you will add to the Sonar Cloud under this organization will use this profile. Okay, so I hope that was all good now. Those two profiles, so default profile and our DevOps.js profile are identical. And you see here that, here you see the inheritance. It's all the same. So let's activate more rules. And in the slide, you see the rule key which I wanted us to activate. So it is Javascript. And 66. So you can search by rule key or you can search by the title. It's in parentheses. So this is a rule about two nested if statements which you can easily refactor. So you can activate it from here or from the list here. So you activate it in DOM.js with some severity. And here we are. So now if we go into the profiles, okay, I need to go for, okay, here we are. So now we see that DevOps.js profile has one more rule. But if we go into our project, we still see the same number of issues. So we don't have new issues for this rule because sonar.cloud got triggered because the analysis only for each push. So let's go to the VS code, and for example, let's fix this React import or you can do whatever else you want. It doesn't matter. We just need to put something. Let me go to repo. Okay, so we'll commit this import duplicate and I will push it. You can push with VS code or with terminal, whatever you want. So you see now that as soon as I push, there is a tab here that analysis progress. It tells you that it's up to 30 minutes, but that's really like the top because there are sometimes big projects, but it should take, you already know how much it will take, you already have one up. Okay, so that's it, we have our results.

So I will open the main branch, that's more handier for us now and if you open codes now, here is it, here is our new issue, merged with statement on line 55 on these objects. So this rule was not in the profile, you can go to the rule here and see the description of the rule, some recommendation how to fix the issue and you can disclose it. Here it is, so here we are.

So we finished with this profile configuring analysis rules. Now here is the situation that you have your SonarLink, you have SonarCloud, we activated one rule here, one rule there, so they're not in sync, that's not great for the user experience and clearly you would like here to have the synchronization between the rule sets. That's where we can have the connection between them.

So to connect them, okay first I wanted you to show that in this line 55 that we don't have this issue for the collapsible if-statement because this rule is not in the default profile and it's activated only on Smart Cloud. So now, let's open the settings. So you can go to the code preferences settings and you have a hotkey here which you can use for the future. So it's a comma for mock users and either you can search for SonarLint and you will see here the properties available or you can just find it under extensions. So here you can set up connection to SonarCloud. First, you need this property. So we can press edit and settings and here you'll see the... I'm not sure everybody is aware of how settings for VS code are working but this is basically a JSON file which is just nicely displayed. So we already have here SonarLint configuration so you can also do it manually here if you want. But what we need now is that we need SonarLint connected mode to Sonar Cloud. So you can start typing this property and just, and so this code should suggest you the full property and you didn't just click it. And then you should create this, you should pick the last one with organization key and token. It just said you should wrap it into array so that it's not complaining. So now we need to fill these two properties here, organization key and token. For the organization key, you can click on your organization, Sonar Cloud and you have your key on the right, or maybe you just remember it from the moment you set it up. And for the token, it's a bit trickier. So you can click on the link in the slides, or you can just go directly from Sonar Cloud, you click on your account and you open Security Tab. Security tab, so as you wish. So here you generate the token, so you put whatever name. So I will put DevOpsJS workshop Sonar Limit. So now this token appears at the bottom, and I copy it and put it in my VS Code. So now we have this connection to the Sonar cloud, but we still need connection to the project. So that's on the next slide number 10. So we search for SonarLink Connected-Mode Project and we pick this single one, Single Property Project Key. So to get the project key, we go to our project and you can find it under the Information tab. And it's active in the Organization key here. Or you can also find it in the Url. So it's id="this-is-the-project-key". So here we are, we're almost there. So now you need to reload the extension. And the node will send the command to reload the extension. So I think the best way would be just to close the VS Code and reopen it again. Okay, the txt-link. To have the proper startups for the versioner link. And ta-da, we have our issue with the merge of if statements available because, for the analysis, we used the profile from SonarCloud. Now I will show you one more trick. I hope it will work. So when syncing the projects between SonarCloud and SonarLint, the rule set is what we already have looked at. But also what you might want to sync is the issues resolution. So let's open our issues. And, okay, let's say that, okay, here is the commented out code issue. Here it is in SonarLint. And let's say I don't want to fix it. I think that's great that this code is commented here and that makes it only better.

So you can change the status of the issue. Resolve is won't fix that means that you just don't want to fix it for whatever reason. So I like this comment and I want to keep it. So now this issue is not anymore open. You will not see it on your overview page, so you see here, it is 14 instead of 15. And also it's, Songrelint should be able to load this resolution and not display this issue anymore. But for that, you need to update the connection. And of course, you can restart. VS code, that will definitely work. But also you can, you should be able to update the binding to the project. So for that, in the view Common Palette, maybe you know the hotkey for Common Palette already. And you can update the binding. And everything disappears. Sometimes you need to edit the code to make the Summary Link trigger the issue. And nothing is working. Yeah, that happens when you want to show somebody something. Tick, tick, tick. Okay, guys, I will just... You can just close and open the VSCode. Or try to reload Windows. So that's kind of a soft restart of the VSCode. And... It doesn't work as well. Sorry for that. Okay, let's restart the VSCode. Okay, here we are. I'm sorry for that. So... And you see that we have a lot of issues, but this command is not underlined anymore because the status of the... resolution of the issue was pulled from the Sonar Cloud. So this way you don't need to leave any comments here, like, yes, Lint, I don't know what, ignore, whatever. All those things are on the server and available on the Sonar Cloud. So, here it is the connected mode of Sonar Lint to Sonar Cloud. You can the same way connect it to Sonar Cube and you will have the same setup for your IDE as in the... on your Continuous Integration.

Okay, so we are done with the connected mode and now will be the next step, which is, I believe the most interesting and the most difficult one. So I want us to be ready for it. It would be great if... Maybe I will just mention one thing because there was one interesting question. So basically the question was how you can configure Sonar Lint differently for different projects? And using Connected Mode is actually a way to do that because in the Connected Mode you have a quality profile which you can define per project. So if you're in Connected Mode you can have different quality profile for different projects. So this is the way how you can have different configuration for different projects. And also the advantage is that you can share the configuration in the team. So Sonar Cloud can be a central place where you configure your clean thing basically. Okay. And also if you don't use Connected Mode to have different configurations. So these are user settings but it's also possible in VS Code to have workspace settings. So if you open this, there is a workspace. It's currently empty, but this is the same way you can configure it. So you see it's created in my project and you can commit it and this will be specific to the projects. So now, let's go to the Sonar Cloud.

So as we in the Automatic Analysis, which is done by Sonar Cloud to have these issues, we don't execute tests there as, for JavaScript that's not always trivial and we don't have coverage. That's not possible to have this coverage with the Automatic Analysis. But we gonna have a GitHub action, which will run this for us. And we're gonna have a coverage pretty soon.

So for that, let's go onto the Administration tab. So Administration at the bottom left and here you have Analysis Method. So we have this Sonar Cloud Automatic Analysis on because that's was the default when we were editing the project. And let's turn it off because we will not be using it anymore. And let's follow the tutorial on GitHub Actions. So again, Sonar Cloud Automatic Analysis would trigger analysis on each push to the branch or on pull requests. So now we're going to create a GitHub Action, which will basically do the same thing, but it will be there, we will be able to add more steps and we will be able to add a test execution.

So first, you need to go to your GitHub repository. There is a link here. And you need to click here on the new repository secret, and you copy the value and name. So it will be so now token, let me just put it here. So just simple copy paste both values from this tutorial to this two fields. And let's edit, here it is, so now it's available. Let's continue, I hope that works for everybody who's doing that.

Now we need to create a built YAML file, so here it says create a date, but as we don't have any we will create it. So you can copy the path, I think it will be even handier here. So we have JavaScript, so you click on the right, then you can copy the path. And in the VS code, from the root of the project you can create on the new file and just insert it, VS code will automatically create all the directories which are required. So this is the default location for GitHub actions, so GitHub will automatically know that, okay, this is the file I should treat as a GitHub action. And you can copy this file here. So here you have everything to have the same setup, set up the same analysis that we used to have. So we now continue, and you need to create one more file which will contain the configuration of the analysis. So this file called Smart Project properties. You also created in the root, and you copy the content of it. You can drop all this comment and stuff. So, it says you are done, and indeed if we push this we will have analysis, but we will not have coverage. So in order to have the coverage, I will ask you to open the slides. Okay, I'm a bit far. So here it is, so you please add these two lines to the server project properties. So this will set the project version, and this will set the location of the coverage report. So the coverage report should be in the ALCOV format. In my project we have here just test executor, and we use here the results processor, just sort of reporter, which will convert to the ALCOV. So it will already generate it in ALCOV format. So we are almost there. Now we need to add more steps to the STM32V1, build YAML because we need to run the tests. So we do it between these two steps, between the checkout of the project and between the SonarCloud scan. Be careful here, because this indentation is important to the format. So this dashes should be aligned and the width and uses, et cetera, they should be aligned. So we use here another option available, which has Yarn. Here we install dependencies and here we run Yarn tests, which will generate coverage for us. Okay, Tibor, somebody is asking for the link to the slides. I don't hear you Tibor, you're muted. Sorry, I will share the link again. Okay, thank you. Okay, I will try to be slower. Sorry guys.

I just noticed that we already spent an hour and that's why I was trying to be a bit faster. Okay, so we have here, so we added so far two files. Built.yaml, which is the Configuration of GitHub Action and Sonra Project Properties. That's properties for the analysis. There is nothing fancy here. Project Key, Organization Key, that's what we already saw with you on Sonra Insight, Project Version. It's not required, but that will be useful for us a bit in the next step and link to the, not link, the relative path to the reports. So of course this relative path should be there during the CI step, not on YOLO call.

So as soon as you have, if you are ready with these two files, you can commit it to the master. Set up Sonra Cloud analysis. So now I'm ready to push. So as soon as I will push, GitHub will create GitHub Actions. If you open the project now, there are some GitHub Actions which are old, which I did like 20 hours ago when I was preparing but you probably have nothing there. As soon as I will push, you should have a new GitHub Action running. Maybe I can just show you how it would look like. As soon as you push, you're going to have here this item appearing in this Action tab. You're going to have this sonar cloud here with these steps, which is, first it builds the GitHub Actions, then it checks out all dependencies, generates coverage report and scans and executes the scan on the sonar cloud. With this GitHub Actions analysis, you're able to see all the logs of the analysis. If something goes wrong, you are able to see it. You see what is taken, how much time, etc. And, as soon as we have this set up, we will also see the sonar cloud analysis in GitHub. So, you will see something like this after you will have this GitHub Action executed, so you will see the coverage of your project, and if you click on it, you will see the drop-down on which files have which coverage, and you can open it and see the green lines, which are covered, red lines which are not covered, et cetera. So, this way, you might add not only coverage, but also, for example, in part of external issues if you are using some other tool to link your projects, and you can add external issues. So, you can add in your GitHub Action one more step on running your, Yes, Link for example, in here, and in the sort of project properties, you can set this path to this, yes link issues report. Okay, so I see that, guys, people are writing that it's not working. So, while it's not working, I will go to another module about security hotspots. So, in the title of this workshop, you see that it's not only about code quality, but also about security. So, SonarCloud provides you with many security rules. For this project, we don't have any, but we have two security hotspots. So, I'm going to show you, what is this? So, for security, it's not always an OEM. Easy to say that you have a problem here, that you are vulnerable here, you can have some places which are dangerous and which require a manual review. So, in our project, we have two security hotspots. So, those security hotspots are not just simple issues, because you can just review them manually and say that, okay, I just had a look, I understand what is it about and it's safe. So, for each security hotspot, you have a description of it. And there is a tab, where you can read how you can understand if you are at risk. So, if this is really dangerous for you. And also you have a tab, about how to fix this. So, here I have a HTTP, not HTTPS protocol used for my URL. And I, let's say that, okay, I reviewed it here, there is no danger for me to use unsafe protocol. And I say that it is safe. So, as soon as it is safe, it will not be any more displayed. Um, so, do not be anymore displayed under the security hotspots. And there is another one, security hotspot, where you create, where you load the script from the internet and you are not checking the integrity of it. Here, let's say I reviewed it, I read the description, I say that, okay, in fact, I'm at risk. It's an external resource, I can not be sure that this is what I expect there and I have to put some integrity here. So, I have here some examples, I should put a SHA number for this script in my code. So, that's when I will need to fix this in my code. But, that will also need me to push something and I cannot still push. Nope. So, okay, I know that's not great, but unfortunately I don't have a better idea, so let's pretend that I will be able to push.

So, in your code, you will open this security hotspot, so it's in line 111. I already prepared you with the fix. So here, you have the script.integrity, and here it has the function which turns the integrity. And, I would push it normally and open EPR and merge it. And then, when it is merged, I will say that, okay, this is fixed and I can change the status of this hotspot as fixed. I will not do it in case this will eventually work so that we can really do that together. And here, you see that we have a security hotspot status between 50% and these all impacts your quality of your project.

Okay, I think that I will go to the next part of our workshop, so it will be, unfortunately, it will be all theoretical. But that's still interesting. So, when we are talking about Sonar Cloud, it's not only about checking your issues. This is, let's say, this is not so useful when you want to know about the status of your project if you want to release, deploy, for example. For that, we have a notion of quality gate. Quality gate shows you, here it says like if it is deployable, if it is releaseable. Quality gate is also configurable at the project, so at the organization level. There is a default Sonar way, quality gate. It contains all different conditions on coverage, on the number of issues. Et cetera. You can have your own, of course. And when you have the quality gate green, that means that you are okay to go. If you have a threat, you should fix something. Here you see that for some reason, we don't have our quality gate, why so? Because on Sonar cloud, quality gate concept goes together with a new code concept. It is computed only on new code. What does it mean, new code? So this is, let's say, recent code, the code on which you are focusing. You can think of it maybe as a code which was introduced since latest release, or the code which was added in the last month. There are different ways how to see it. So you can, now you can do this, in fact. So in the new code definition is not set for a project, so let's set it. You can press it right here on the quality gate. Or also administration new code is also available. So new code, let's set it as a previous version. Previous version. And that means that as soon as the version will change, then we will see this. You see now the server view page changed because we have this new code, period set, but it's not yet computed because we didn't have yet the analysis. So, why is it so great to have new code? That means you should not focus on all this, not legacy, but all this depth you have in your project. This is especially great in big projects with long history where you add them to a certain cloud and you have thousands of issues. And of course, it's not possible to fix them all, or maybe that's possible, but that's not rewarding for developers. And that's not effective. And focusing on new code, it's not only making sense for maintaining, for making sure that the new features which are delivered are done nicely. It also lets you, in fact, fix in the overall code quality, because you know probably that most of the time, developers not create new code, but they edit the existing one. That means as soon as you touch the existing code, there are some issues there, and that becomes new code as soon as you co-edit it, and you will fix those issues as they start to be in the new code period. In Sonar Cloud, you have on the right top, help with documentation, and here you also have core concepts. So, let's turn around. So we have these core concepts here, and here you can go through these explanations about new code, maybe they are a bit better than I just explained, but I hope that's clear for you. For pull request, that's a bit different. For pull request, the new code is everything you added in this pull request. So here, let's say, the quality gate for the pull request will pass if there is no issues on the code in this pull request, not since the latest version, and passing the quality gate, of course, it's not about deploying or releasing. It's about merging the pull request to the master. So I wonder if it's all still, oh guys, it's working. Can somebody confirm that they managed to push? Yay, pull great. So now let's go to the GitHub, we don't have much time, but I believe we are nearly there.

So in actions, now we see this action running. So here we have the commit title and inside you have your Sonar Cloud and it's executing, so that's gonna take a couple of minutes. And now we're my project here. You see that we don't have coverage yet. So that coverage which I was showing you was an old project from Tibber. So we need to wait for it and while we are waiting for it I will ask you to do another thing. So please do this fix for the security hotspot. So uncomment the code around the line 103, 105 and 113. And don't just push it to master but create a branch. So git checkout branch fix hotspot. So we need this to be able to create a pull request. So I'm going to push it. Now it's when you're going to create a pull request, please be very, very careful. Don't rush to not to create pull request on the, on your own project, not on the forked project. So when you press and create pull request, please here pick their, your own repository, not my repository, because you will not be able to run Sonar Cloud on another application. So we create a pull request on their own repository, So, okay.

We have Sonar Cloud done. We have our coverage here. There is no history yet, but of course, when we have more analysis, you're gonna see the trend here about the project. And you have on your main branch, you have quality gate green now. You see that everything is zero here because we don't have any new code. So everything, which is part of the initial analysis. This is, let's say your previous life, you start from the new, page and everything is zero. It's not great that coverage is zero though. But, okay. We did uncover that line. But quality gate is green, even with coverage, which is zero, because it's really a little number of lines here.

Now we are done with the GitHub analysis. Sorry, GitHub action analysis. Now, let's go back to the pull request. As we have GitHub action set up, it should trigger the analysis for pull request. And you will see the command left by Sonar Cloud with the quality gate and with the issues, which are reported on this pull request. And maybe some of you noticed that there is a bug here. And we hear we have the function, which does not return anything here, we get in the value of this function. And so in a perfect world where you have Sonar Cloud working on GitHub you will not be able to merge this pull request until okay, in fact that depends on the settings of your project but this button will not be green for the merge, as you will have one issue on your project. Okay, I feel a bit stupid to explain you all this and not be able to show it. Okay, here it is. It started. It started and soon we're gonna be able to see this what I just explained. By the way, I just checked that 16 people forked your report alone. So that's really cool. 16 or 16? 16. 16, there are more people claiming that they're gonna do the well, even on the first step. So this action is running on the phone. Give it one minute. So one minute more and you're gonna have the results here. And it's not that you see this result over here. You also see the pull request on your, sort of cloud. So here you see there is nothing here. I didn't even know about this animation, it's funny.

So as soon as you have the analysis ready, it's gonna appear here. But here we have already a branch. Okay, let's restart. I believe we're almost there. So what's gonna happen next is that we're gonna get this build, you're gonna get this analysis and we're gonna get that back. Then we're gonna fix it. We're gonna put return. And here you can already maybe do it. So we put return in here so that the value is used here is not undefined. Fix. Return. We're not pushing to not break this analysis. I'm not sure how they override each other. Okay, here we are. So here is our back. So I can click on it, see here on SonarCloud that I'm using the output of this function which doesn't return anything. And if I open the PR you see that I can still merge. This is configurable that you can even permit merging but it's not green so you should do something. So I'm going to push this fix to the branch and that should trigger the new analysis. Okay, that's still probably going to take some time.

And the last thing which we didn't do. I'm sorry we're a bit late but that's unfortunate that GitHub was down. So on your local project, let's go to the master. We will not spend time creating pull requests just to see the part. So you have here two files, new file and new file test. So it has just some code so that we see new code in action. So you have some tests, you comment on that. So you have another configuration. So now let's connect directly to the master. Sorry, it's not it, I forgot to tell you that you changed the imitating the new iteration in development. So change version in your project properties to the zero two in this Sonar project properties and uncomment these two files. And let's push it. I was just going in our no pool request. Okay, it's still not triggered the second, the second commit. No, probably even master will not be so quick to get. In fact, nope. Master's working this for me, I'm not sure how's it for you. So people are asking if you can repeat again, what you changed in the Sonar Project Properties file. I changed 01 to 02. Okay, so the new code is defined by the version. This number, yeah. By the number. So this will be, this commit which, where we change this version will be this first analysis in the new code period. And... pull request. Mm-hm, request. Okay, so pull request also started. Sorry, guys, to do this in parallel. So the idea, initial idea was to do that one by one, but to speed up a bit, I'm doing that in parallel. So we have this pull request analysis running, and in parallel we have our master, new code, new code, new version analysis running. So I'll open my project. And as, and probably you notice as soon as we have set up this new code period, we have these two tabs available. You are focusing on new code only, but of course you're able to see overall. Of course for security, you might want to fix securities, even if they are in old code. Security hotspots that might be the same. Okay, so we have our analysis ready. So since 12 minutes ago, I believe that's the timestamp of the commit. And so here it is, our new code with a coverage of 50%. You see that coverage is too low. It's less than 80%. That's the default threshold, which makes the quality gate fail. We have two code smells. So here on our, this code, which we implemented, we have here, this variable assigned to time sooner or and here we have this temporary variable created for no use. And so here you see this coverage, with this condition, which is only covered on one condition, on one branch. So, so here it is with the new code, what I wanted to share with you. With the pull request, we are still waiting. Okay, so here it is, so for me, it's finished. So you see now that we fix the bug, the quality gatepassed, the merge button is green. And I am able to merge. So, okay, I also wanted to show you that you can see the pull request in here.

So here it is, and I believe that's it. I hope those people are still enjoying this workshop and you learned new things. I wanted to disclaim that this is just one way to use it. This is just GitHub, GitHub Actions, and JavaScript. Sonra Cloud supports many languages, many platforms, CI platforms, code revision platforms. So I believe almost everything which is currently available on the market should be possible to have a license on a cloud.

Okay. We have one more person almost there. Great. So in the slides, in the slides, you have the Twitter of Sonor Source, so if you want to follow it, to follow the news, and there is a link to community, SonorSource community, you can, if something is not working for you, if you need some help, you can start a thread there and our developers, me personally, T-Bird personally, we are checking them regularly and answering. Or maybe somebody else from the company or from the community will be able to answer you.