Skip to content

Add first version of code insights creation UI

Warren Gifford requested to merge vk/code-insights-creation-ui into main

Created by: vovakulikov

This PR is the first out of three PR for creation UI.

  1. This Pull Request.
  2. Introduction page for creation UI. https://github.com/sourcegraph/sourcegraph/pull/20482
  3. Creation UI for lang stats insights

This PR is about to add the first implementation of code insight creation UI.

Compare to the existing approach users can go to the creation page and create code insight by filling form inputs and therefore modify the user or organization settings (the existing approach assumes that the user has to edit that settings configuration manually). You can see the creation form for search-code-insight on a screenshot below.

image

How to test

  1. Open dev tools and set enableCodeInsightCreationUI field in local storage to true.
  2. Go to /insights and click configure insight.
  3. You must see /insights/create page with insight creation form.

Tech and UX details

  • For form validation and form management these changes use react-final-form-hooks
  • In case if a user tried to submit the form with invalid inputs we focus first on invalid input and by that force to fill all invalid parts of the creation form.
  • All styles for creation form were written in CSS modules approach.

Existing UX problems which will be solved in next iterations

  • Poor repositories input
  • Support case when a user was included in two or more organizations (add select or some part of UI)

Merge request reports