mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:11:49 +00:00
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:
parent
e9c6dc68eb
commit
d5fbcbe7f9
@ -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 {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user