A significantly big feature of the DeepSource dashboard is the configuration editor - this is the page that allows you to visually craft your .deepsource.toml file, instead of relying on just syntaxes and documentation. Building this allowed engineers the flexibility to quickly craft a configuration file, and then they could either copy + paste the file, or download it and commit to their repository, or (and yes, this is a little bit of magic) if you have the DeepSource app installed on your code hosting provider → you can click a button and the app automatically commits the config file to the root of your repository.

<aside> 🚧 Note that if you’re using GitHub, you’d need to install both the DeepSource app and the Autofix app. Learn more about the Autofix app here ↗

</aside>

The first version of the configuration editor was a decent point to start off but needed some significant upgrades to make it much more usable. before going through the updates, take a look at how our first pass looked when the redesign was shipped in 2021👇

Untitled

At the time, we had undertaken 2 new projects at DeepSource ⎯ Community Analyzers and Monorepo support that required us to overhaul the Configuration editor. Here is what was missing in this crucial part of the software -

• There is no CTA to add Analyzers - you would have had to click on the search box to open the suggestion panel (you’d also see the suggestions when there are no Analyzers added - the suggestions here are based on which language your code is written in) and in scenarios where you know exactly which analyzers you want, your first instinct wouldn’t be to click on search, you’d want something more direct, like a button that says Add Analyzer.

We talked with a bunch of our users and the same confusion was flagged by multiple engineers. Hence, we decided to make it easier to add analyzers without having to rely on search.

• We had a powerful feature called Auto Onboard for enterprise customers that sought to decrease the amount of work you needed to activate a repository. Imagine a scenario where a team has thousands of repositories (as do some of our enterprise customers), manually crafting and adding configuration files would be a losing of a big chunk of their time. Auto Onboard lets you define configuration templates - you can define an Auto Onboard template called Python quality check that you want to be used for all your python-based repositories (which contains the Python analyzer, Secrets analyzer, and the Autopep8 transformer); and then just click on that template while activating a repository and all the information about Analyzers and Transformers would be pre-filled for you.

The catch, however, is there is just a single entry point for using Auto Onboard. If you missed enabling it during the first step of activation of a repository, you cannot use it at any other point in the flow, which made it not super helpful for the engineers.

We wanted the Auto Onboard templates to be available to the users when they are crafting a configuration file.

• The CTA for Add configuration and start analysis was helpful only in the scenario when you had the Autofix app installed, and it had all the necessary permissions to make a commit. We came across multiple users where the user ended up being confused after clicking on the CTA because we were not conveying the messages that were emitted during the click, well enough for them to understand and take actions.

For example - - When the default branch (say main) is protected, the CTA would trigger an action to create a pull request instead, and the user is supposed to go to their code hosting provider and merge the PR. We did not convey this to the user well enough. - We did not let the users know that when the Autofix app is not installed, and they’d either have to install it OR download the file and commit it manually (we understood not everyone wants the [Autofix feature](https://docs.deepsource.com/docs/autofix#:~:text=With Autofix™%2C you can,of DeepSource users swear by.) right away).

While talking to users and trying to putting the jigsaw pieces together for the missing parts, we sneaked in another small quality of life enhancement in the editor. In the visual editor on the left, you add the analyzers and they appear as cards - you can also see the corresponding entries in the .toml file on the right. But there was no way to correlate them visually without the user having to read the .toml file.

We added a small feature that when you hover over an analyzer card on the left, the corresponding lines on the right get highlighted, leaving you in no two minds on which lines in the config file are controlled by that specific card you’re hovering on.

Here is a demo of the code highlighting in action 👇

Untitled

Besides the highlighting, we added a little bit of oomph to inform the users of the errors that might crop up 👇

Untitled

Props to Benji Taylor and his team who built the Family crypto wallet for inspiring this morphing button interaction.

You get a similar interaction when you don’t have the Autofix app installed. This is what that state looks like 👇