Change Code Insights url hierarchy

CHANGELOG.md

@@ -26,6 +26,7 @@ All notable changes to Sourcegraph are documented in this file.
 - Search streaming is now permanently enabled and `experimentalFeatures.searchStreaming` setting has been deprecated. [#21522](https://github.com/sourcegraph/sourcegraph/pull/21522)
 - Pings removes the collection of aggregate search filter usage counts and adds a smaller set of aggregate usage counts for query operators, predicates, and pattern counts. [#21320](https://github.com/sourcegraph/sourcegraph/pull/21320)
 - Sourcegraph will now refuse to start if there are unfinished [out-of-band-migrations](https://docs.sourcegraph.com/admin/migrations) that are deprecated in the current version. See the [upgrade documentation](https://docs.sourcegraph.com/admin/updates) for changes to the upgrade process. [#20967](https://github.com/sourcegraph/sourcegraph/pull/20967)
+- Code Insight pages now have new URLs [#21856](https://github.com/sourcegraph/sourcegraph/pull/21856)
 
 ### Fixed
 

client/web/src/insights/InsightsRouter.tsx

@@ -6,27 +6,12 @@ import { AuthenticatedUser } from '../auth'
 import { HeroPage } from '../components/HeroPage'
 import { lazyComponent } from '../util/lazyComponent'
 
+import { CreationRoutes } from './pages/creation/CreationRoutes'
 import { SearchInsightCreationPageProps } from './pages/creation/search-insight/SearchInsightCreationPage'
 import { InsightsPageProps } from './pages/dashboard/InsightsPage'
 import { EditInsightPageProps } from './pages/edit/EditInsightPage'
 
 const InsightsLazyPage = lazyComponent(() => import('./pages/dashboard/InsightsPage'), 'InsightsPage')
-
-const IntroCreationLazyPage = lazyComponent(
-    () => import('./pages/creation/intro/IntroCreationPage'),
-    'IntroCreationPage'
-)
-
-const SearchInsightCreationLazyPage = lazyComponent(
-    () => import('./pages/creation/search-insight/SearchInsightCreationPage'),
-    'SearchInsightCreationPage'
-)
-
-const LangStatsInsightCreationLazyPage = lazyComponent(
-    () => import('./pages/creation/lang-stats/LangStatsInsightCreationPage'),
-    'LangStatsInsightCreationPage'
-)
-
 const EditInsightLazyPage = lazyComponent(() => import('./pages/edit/EditInsightPage'), 'EditInsightPage')
 
 const NotFoundPage: React.FunctionComponent = () => <HeroPage icon={MapSearchIcon} title="404: Not Found" />
@@ -48,7 +33,9 @@ export interface InsightsRouterProps
     authenticatedUser: Pick<AuthenticatedUser, 'id' | 'organizations' | 'username'> | null
 }
 
-/** Main Insight routing component. Main entry point to code insights UI. */
+/**
+ * Main Insight routing component. Main entry point to code insights UI.
+ */
 export const InsightsRouter: React.FunctionComponent<InsightsRouterProps> = props => {
     const { match, ...outerProps } = props
 
@@ -57,34 +44,17 @@ export const InsightsRouter: React.FunctionComponent<InsightsRouterProps> = prop
             <Route render={props => <InsightsLazyPage {...outerProps} {...props} />} path={match.url} exact={true} />
 
             <Route
-                path={`${match.url}/create-search-insight`}
+                path={`${match.url}/create`}
                 render={() => (
-                    <SearchInsightCreationLazyPage
-                        telemetryService={outerProps.telemetryService}
+                    <CreationRoutes
                         platformContext={outerProps.platformContext}
                         authenticatedUser={outerProps.authenticatedUser}
                         settingsCascade={outerProps.settingsCascade}
-                    />
-                )}
-            />
-
-            <Route
-                path={`${match.url}/create-lang-stats-insight`}
-                render={() => (
-                    <LangStatsInsightCreationLazyPage
                         telemetryService={outerProps.telemetryService}
-                        platformContext={outerProps.platformContext}
-                        authenticatedUser={outerProps.authenticatedUser}
-                        settingsCascade={outerProps.settingsCascade}
                     />
                 )}
             />
 
-            <Route
-                path={`${match.url}/create-intro`}
-                render={() => <IntroCreationLazyPage telemetryService={outerProps.telemetryService} />}
-            />
-
             <Route
                 path={`${match.url}/edit/:insightID`}
                 render={(props: RouteComponentProps<{ insightID: string }>) => (

client/web/src/insights/pages/creation/CreationRoutes.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { Switch, Route, useRouteMatch } from 'react-router'
+
+import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context'
+import { SettingsCascadeProps } from '@sourcegraph/shared/src/settings/settings'
+import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+
+import { AuthenticatedUser } from '../../../auth'
+import { lazyComponent } from '../../../util/lazyComponent'
+
+const IntroCreationLazyPage = lazyComponent(() => import('./intro/IntroCreationPage'), 'IntroCreationPage')
+const SearchInsightCreationLazyPage = lazyComponent(
+    () => import('./search-insight/SearchInsightCreationPage'),
+    'SearchInsightCreationPage'
+)
+
+const LangStatsInsightCreationLazyPage = lazyComponent(
+    () => import('./lang-stats/LangStatsInsightCreationPage'),
+    'LangStatsInsightCreationPage'
+)
+
+interface CreationRoutesProps extends TelemetryProps, PlatformContextProps<'updateSettings'>, SettingsCascadeProps {
+    /**
+     * Authenticated user info, Used to decide where code insight will appears
+     * in personal dashboard (private) or in organisation dashboard (public)
+     * */
+    authenticatedUser: Pick<AuthenticatedUser, 'id' | 'organizations' | 'username'> | null
+}
+
+/**
+ * Code insight sub-router for the creation area/routes.
+ * Renders code insights creation routes (insight creation UI pages, creation intro page)
+ */
+export const CreationRoutes: React.FunctionComponent<CreationRoutesProps> = props => {
+    const { telemetryService, platformContext, authenticatedUser, settingsCascade } = props
+
+    const match = useRouteMatch()
+
+    return (
+        <Switch>
+            <Route
+                exact={true}
+                path={`${match.url}`}
+                render={() => <IntroCreationLazyPage telemetryService={telemetryService} />}
+            />
+
+            <Route
+                path={`${match.url}/search`}
+                exact={true}
+                render={() => (
+                    <SearchInsightCreationLazyPage
+                        telemetryService={telemetryService}
+                        platformContext={platformContext}
+                        authenticatedUser={authenticatedUser}
+                        settingsCascade={settingsCascade}
+                    />
+                )}
+            />
+
+            <Route
+                path={`${match.url}/lang-stats`}
+                exact={true}
+                render={() => (
+                    <LangStatsInsightCreationLazyPage
+                        telemetryService={telemetryService}
+                        platformContext={platformContext}
+                        authenticatedUser={authenticatedUser}
+                        settingsCascade={settingsCascade}
+                    />
+                )}
+            />
+        </Switch>
+    )
+}

client/web/src/insights/pages/creation/intro/IntroCreationPage.tsx

@@ -60,7 +60,7 @@ export const IntroCreationPage: React.FunctionComponent<IntroCreationPageProps>
                     </p>
 
                     <Link
-                        to="/insights/create-search-insight"
+                        to="/insights/create/search"
                         onClick={logCreateSearchBasedInsightClick}
                         className={classnames(styles.createIntroPageInsightButton, 'btn', 'btn-primary')}
                     >
@@ -83,7 +83,7 @@ export const IntroCreationPage: React.FunctionComponent<IntroCreationPageProps>
                     <p>Shows language usage in your repository by lines of code.</p>
 
                     <Link
-                        to="/insights/create-lang-stats-insight"
+                        to="/insights/create/lang-stats"
                         onClick={logCreateCodeStatsInsightClick}
                         className={classnames(styles.createIntroPageInsightButton, 'btn', 'btn-primary')}
                     >

client/web/src/insights/pages/dashboard/InsightsPage.tsx

@@ -54,7 +54,7 @@ export const InsightsPage: React.FunctionComponent<InsightsPageProps> = props =>
                     annotation={<FeedbackBadge status="prototype" feedback={{ mailto: 'support@sourcegraph.com' }} />}
                     path={[{ icon: InsightsIcon, text: 'Code insights' }]}
                     actions={
-                        <Link to="/insights/create-intro" onClick={logAddMoreClick} className="btn btn-secondary mr-1">
+                        <Link to="/insights/create" onClick={logAddMoreClick} className="btn btn-secondary mr-1">
                             <PlusIcon className="icon-inline" /> Create new insight
                         </Link>
                     }

client/web/src/integration/insights/create-insights.test.ts

@@ -66,7 +66,7 @@ describe('Code insight create insight page', () => {
             },
         })
 
-        await driver.page.goto(driver.sourcegraphBaseUrl + '/insights/create-lang-stats-insight')
+        await driver.page.goto(driver.sourcegraphBaseUrl + '/insights/create/lang-stats')
 
         // Waiting for all important part of creation form will be rendered.
         await driver.page.waitForSelector('[data-testid="code-stats-insight-creation-page-content"]')
@@ -141,7 +141,7 @@ describe('Code insight create insight page', () => {
             },
         })
 
-        await driver.page.goto(driver.sourcegraphBaseUrl + '/insights/create-search-insight')
+        await driver.page.goto(driver.sourcegraphBaseUrl + '/insights/create/search')
 
         // Waiting for all important part of creation form will be rendered.
         await driver.page.waitForSelector('[data-testid="search-insight-create-page-content"]')