Skip to content

Code Insights: Unbind creation and edit UI pages and insight models

Warren Gifford requested to merge vk/connect-ui-and-compute-insight-mutation into main

Created by: vovakulikov

Preparation for https://github.com/sourcegraph/sourcegraph/issues/37965

Background

Prior to this PR, we had creation and edit UI forms in which we had explicit binding between the insight model and its permissions and UI itself. This was a problem because we couldn't freely reuse UI across different creation UI forms. This PR bubbles up all common parts and unbinds permissions calls from the creation UI forms.

Main idea

Instead of having big god like components that combine UI and permissions calls like this

const Form = props => {
   const isEditMode = mode === 'edit'
   const { licensed, insight: insightFeatures } = useUiFeatures()

   const creationPermission = useObservable(
       useMemo(
           () =>
               isEditMode && insight
                   ? insightFeatures.getEditPermissions(insight)
                   : insightFeatures.getCreationPermissions(),
           [insightFeatures, isEditMode, insight]
       )
   )
   
  return (/*... UI that depends on creation permissions ... */)
}

In this PR we unify form UI that this UI doesn't know anything about its possible consumers and lift all dependent logic to the specific page level (creation or edit UI pages)

// creation UI
const creationPermission = useObservable(useMemo(() => getCreationPermissions(), []))

return (
 <LangStatsInsightCreationContent
   initialValues={initialFormValues}
   touched={false}
 >
      {form => (
           <CodeInsightsCreationActions
                  mode={CodeInsightCreationMode.Creation} 
                  available={creationPermission?.available}
                  submitting={form.submitting}
                  { ... }
            />
       )}
 </LangStatsInsightCreationContent>
)

// edit UI page
const creationPermission = useObservable(useMemo(() => getEditPermissions(), []))

return (
 <LangStatsInsightCreationContent
   initialValues={initialFormValues}
   touched={true}
 >
      {form => (
           <CodeInsightsCreationActions
                  mode={CodeInsightCreationMode.Edit} 
                  available={editPermission?.available}
                  submitting={form.submitting}
                  { ... }
            />
       )}
 </LangStatsInsightCreationContent>
)

Test plan

  • Make sure that all creation and edit UI pages don't have any visual and creation flow regressions
  • Make sure that all creation and edit pages are rendered properly in limited access mode

App preview:

Check out the client app preview documentation to learn more.

Merge request reports