Code Insights: Simplify insight creation loading flow (#45917)

* Simplify insight creation loading flow

* Fix save insight as new view flow
This commit is contained in:
Vova Kulikov 2022-12-22 16:22:10 -03:00 committed by GitHub
parent e9c6dc68eb
commit d5fbcbe7f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 46 deletions

View File

@ -1,7 +1,6 @@
import { Series } from '@sourcegraph/wildcard'
import {
InsightDashboard,
CaptureGroupInsight,
LangStatsInsight,
InsightsDashboardOwner,
@ -80,7 +79,7 @@ export type CreationInsightInput =
export interface InsightCreateInput {
insight: CreationInsightInput
dashboard: InsightDashboard | null
dashboardId: string | null
}
export interface InsightUpdateInput {

View File

@ -9,7 +9,7 @@ import {
InsightViewNode,
PieChartSearchInsightInput,
} from '../../../../../../../graphql-operations'
import { InsightDashboard, InsightType, isVirtualDashboard } from '../../../../types'
import { InsightType } from '../../../../types'
import {
InsightCreateInput,
MinimalCaptureGroupInsightData,
@ -25,13 +25,13 @@ import { getInsightCreateGqlInput, getLangStatsInsightCreateInput } from './seri
* Main handler to create insight with GQL api. It absorbs all implementation details around GQL api.
*/
export const createInsight = (apolloClient: ApolloClient<object>, input: InsightCreateInput): Observable<unknown> => {
const { insight, dashboard } = input
const { insight, dashboardId } = input
switch (insight.type) {
case InsightType.CaptureGroup:
case InsightType.Compute:
case InsightType.SearchBased: {
return createSearchBasedInsight(apolloClient, insight, dashboard)
return createSearchBasedInsight(apolloClient, insight, dashboardId)
}
case InsightType.LangStats: {
@ -46,7 +46,7 @@ export const createInsight = (apolloClient: ApolloClient<object>, input: Insight
}
}
`,
variables: { input: getLangStatsInsightCreateInput(insight, dashboard) },
variables: { input: getLangStatsInsightCreateInput(insight, dashboardId) },
})
)
}
@ -61,9 +61,9 @@ type CreationSeriesInsightData =
function createSearchBasedInsight(
apolloClient: ApolloClient<object>,
insight: CreationSeriesInsightData,
dashboard: InsightDashboard | null
dashboardId: string | null
): Observable<unknown> {
const input = getInsightCreateGqlInput(insight, dashboard)
const input = getInsightCreateGqlInput(insight, dashboardId)
return from(
apolloClient.mutate<CreateSearchBasedInsightResult>({
@ -85,7 +85,7 @@ function createSearchBasedInsight(
return
}
searchInsightCreationOptimisticUpdate(cache, data.createLineChartSearchInsight.view, dashboard)
searchInsightCreationOptimisticUpdate(cache, data.createLineChartSearchInsight.view, dashboardId)
},
})
)
@ -98,12 +98,12 @@ function createSearchBasedInsight(
export function searchInsightCreationOptimisticUpdate(
cache: ApolloCache<unknown>,
createdView: InsightViewNode,
dashboard: InsightDashboard | null
dashboardId: string | null
): void {
if (dashboard && !isVirtualDashboard(dashboard)) {
if (dashboardId) {
const cachedDashboardQuery = cache.readQuery<GetDashboardInsightsResult, GetDashboardInsightsVariables>({
query: GET_DASHBOARD_INSIGHTS_GQL,
variables: { id: dashboard.id },
variables: { id: dashboardId },
})
if (!cachedDashboardQuery) {
@ -122,7 +122,7 @@ export function searchInsightCreationOptimisticUpdate(
cache.writeQuery<GetDashboardInsightsResult>({
query: GET_DASHBOARD_INSIGHTS_GQL,
variables: { id: dashboard.id },
variables: { id: dashboardId },
data: {
insightsDashboards: {
...cachedDashboardQuery.insightsDashboards,

View File

@ -5,7 +5,7 @@ import {
TimeIntervalStepUnit,
} from '../../../../../../../graphql-operations'
import { parseSeriesDisplayOptions } from '../../../../../components/insights-view-grid/components/backend-insight/components/drill-down-filters-panel/drill-down-filters/utils'
import { InsightDashboard, InsightType, isVirtualDashboard } from '../../../../types'
import { InsightType } from '../../../../types'
import {
CreationInsightInput,
MinimalCaptureGroupInsightData,
@ -22,23 +22,23 @@ type CreateInsightInput = LineChartSearchInsightInput | PieChartSearchInsightInp
*/
export function getInsightCreateGqlInput(
insight: CreationInsightInput,
dashboard: InsightDashboard | null
dashboardId: string | null
): CreateInsightInput {
switch (insight.type) {
case InsightType.SearchBased:
return getSearchInsightCreateInput(insight, dashboard)
return getSearchInsightCreateInput(insight, dashboardId)
case InsightType.CaptureGroup:
return getCaptureGroupInsightCreateInput(insight, dashboard)
return getCaptureGroupInsightCreateInput(insight, dashboardId)
case InsightType.Compute:
return getComputeInsightCreateInput(insight, dashboard)
return getComputeInsightCreateInput(insight, dashboardId)
case InsightType.LangStats:
return getLangStatsInsightCreateInput(insight, dashboard)
return getLangStatsInsightCreateInput(insight, dashboardId)
}
}
export function getCaptureGroupInsightCreateInput(
insight: MinimalCaptureGroupInsightData,
dashboard: InsightDashboard | null
dashboardId: string | null
): LineChartSearchInsightInput {
const [unit, value] = getStepInterval(insight.step)
@ -64,8 +64,8 @@ export function getCaptureGroupInsightCreateInput(
},
}
if (dashboard && !isVirtualDashboard(dashboard)) {
input.dashboards = [dashboard.id]
if (dashboardId) {
input.dashboards = [dashboardId]
}
return input
@ -73,7 +73,7 @@ export function getCaptureGroupInsightCreateInput(
export function getSearchInsightCreateInput(
insight: MinimalSearchBasedInsightData,
dashboard: InsightDashboard | null
dashboardId: string | null
): LineChartSearchInsightInput {
const repositories = insight.repositories
@ -100,8 +100,8 @@ export function getSearchInsightCreateInput(
},
}
if (dashboard && !isVirtualDashboard(dashboard)) {
input.dashboards = [dashboard.id]
if (dashboardId) {
input.dashboards = [dashboardId]
}
return input
@ -109,7 +109,7 @@ export function getSearchInsightCreateInput(
export function getLangStatsInsightCreateInput(
insight: MinimalLangStatsInsightData,
dashboard: InsightDashboard | null
dashboardId: string | null
): PieChartSearchInsightInput {
const input: PieChartSearchInsightInput = {
// Query do not exist as setting for this type of insight, it's predefined
@ -123,8 +123,8 @@ export function getLangStatsInsightCreateInput(
},
}
if (dashboard && !isVirtualDashboard(dashboard)) {
input.dashboards = [dashboard.id]
if (dashboardId) {
input.dashboards = [dashboardId]
}
return input
@ -132,7 +132,7 @@ export function getLangStatsInsightCreateInput(
export function getComputeInsightCreateInput(
insight: MinimalComputeInsightData,
dashboard: InsightDashboard | null
dashboardId: string | null
): LineChartSearchInsightInput {
const input: LineChartSearchInsightInput = {
dataSeries: insight.series.map<LineChartSearchInsightDataSeriesInput>(series => ({
@ -158,8 +158,8 @@ export function getComputeInsightCreateInput(
},
}
if (dashboard && !isVirtualDashboard(dashboard)) {
input.dashboards = [dashboard.id]
if (dashboardId) {
input.dashboards = [dashboardId]
}
return input

View File

@ -69,7 +69,7 @@ export function useSaveInsightAsNewView(props: useSaveInsightAsNewViewProps): Us
return
}
searchInsightCreationOptimisticUpdate(cache, data.saveInsightAsNewView.view, dashboard)
searchInsightCreationOptimisticUpdate(cache, data.saveInsightAsNewView.view, dashboard?.id ?? null)
},
}
)

View File

@ -3,10 +3,9 @@ import { FC, useContext } from 'react'
import { useHistory } from 'react-router'
import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
import { LoadingSpinner } from '@sourcegraph/wildcard'
import { useExperimentalFeatures } from '../../../../../stores'
import { CodeInsightsBackendContext, CreationInsightInput, useInsightDashboard } from '../../../core'
import { CodeInsightsBackendContext, CreationInsightInput } from '../../../core'
import { useQueryParameters } from '../../../hooks'
import { CaptureGroupCreationPage } from './capture-group'
@ -34,41 +33,35 @@ export const InsightCreationPage: FC<InsightCreationPageProps> = props => {
const history = useHistory()
const { createInsight } = useContext(CodeInsightsBackendContext)
const { dashboardId } = useQueryParameters(['dashboardId'])
const { dashboard, loading } = useInsightDashboard({ id: dashboardId })
const { dashboardId = null } = useQueryParameters(['dashboardId'])
const { codeInsightsCompute } = useExperimentalFeatures()
if (dashboard === undefined || loading) {
return <LoadingSpinner inline={false} />
}
const handleInsightCreateRequest = async (event: InsightCreateEvent): Promise<unknown> => {
const { insight } = event
return createInsight({ insight, dashboard }).toPromise()
return createInsight({ insight, dashboardId }).toPromise()
}
const handleInsightSuccessfulCreation = (): void => {
if (!dashboard) {
if (!dashboardId) {
// Navigate to the dashboard page with new created dashboard
history.push('/insights/all')
return
}
history.push(`/insights/dashboards/${dashboard.id}`)
history.push(`/insights/dashboards/${dashboardId}`)
}
const handleCancel = (): void => {
if (!dashboard) {
if (!dashboardId) {
history.push('/insights/all')
return
}
history.push(`/insights/dashboards/${dashboard.id}`)
history.push(`/insights/dashboards/${dashboardId}`)
}
if (mode === InsightCreationPageType.CaptureGroup) {