wip

Co-authored-by: blam <ben@blam.sh> Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2022-07-11 16:54:51 +02:00
parent 6339d94337
commit c7b1c0385a
6 changed files with 800 additions and 750 deletions
@@ -76,6 +76,8 @@
    "react-dom": "^17.0.2",
    "react-router": "6.0.0-beta.0",
    "react-router-dom": "6.0.0-beta.0",
+    "react-router-stable": "npm:react-router@^6.3.0",
+    "react-router-dom-stable": "npm:react-router-dom@^6.3.0",
    "react-use": "^17.2.4",
    "zen-observable": "^0.8.15"
  },
@@ -145,20 +145,20 @@ const AppRouter = app.getRouter();

 const routes = (
  <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route element={<Navigate to="catalog" />} />
    {/* TODO(rubenl): Move this to / once its more mature and components exist */}
-    <Route path="/home" element={<HomepageCompositionRoot />}>
+    <Route path="home" element={<HomepageCompositionRoot />}>
      {homePage}
    </Route>
-    <Route path="/catalog" element={<CatalogIndexPage />} />
+    <Route path="catalog" element={<CatalogIndexPage />} />
    <Route
-      path="/catalog/:namespace/:kind/:name"
+      path="catalog/:namespace/:kind/:name"
      element={<CatalogEntityPage />}
    >
      {entityPage}
    </Route>
    <Route
-      path="/catalog-import"
+      path="catalog-import"
      element={
        <RequirePermission permission={catalogEntityCreatePermission}>
          <CatalogImportPage />
@@ -166,7 +166,7 @@ const routes = (
      }
    />
    <Route
-      path="/catalog-graph"
+      path="catalog-graph"
      element={
        <CatalogGraphPage
          initialState={{
@@ -187,9 +187,9 @@ const routes = (
        />
      }
    />
-    <Route path="/docs" element={<TechDocsIndexPage />} />
+    <Route path="docs" element={<TechDocsIndexPage />} />
    <Route
-      path="/docs/:namespace/:kind/:name/*"
+      path="docs/:namespace/:kind/:name/*"
      element={<TechDocsReaderPage />}
    >
      {techDocsPage}
@@ -200,7 +200,7 @@ const routes = (
      </TechDocsAddons>
    </Route>
    <Route
-      path="/create"
+      path="create"
      element={
        <ScaffolderPage
          defaultPreviewTemplate={defaultPreviewTemplate}
@@ -219,7 +219,7 @@ const routes = (
      </ScaffolderFieldExtensions>
    </Route>
    <Route
-      path="/create/next"
+      path="create/next"
      element={
        <NextScaffolderPage
          groups={[
@@ -236,35 +236,35 @@ const routes = (
        <DelayingComponentFieldExtension />
      </ScaffolderFieldExtensions>
    </Route>
-    <Route path="/explore" element={<ExplorePage />} />
+    <Route path="explore" element={<ExplorePage />} />
    <Route
-      path="/tech-radar"
+      path="tech-radar"
      element={<TechRadarPage width={1500} height={800} />}
    />
-    <Route path="/graphiql" element={<GraphiQLPage />} />
-    <Route path="/lighthouse" element={<LighthousePage />} />
-    <Route path="/api-docs" element={<ApiExplorerPage />} />
-    <Route path="/gcp-projects" element={<GcpProjectsPage />} />
-    <Route path="/newrelic" element={<NewRelicPage />} />
-    <Route path="/search" element={<SearchPage />}>
+    <Route path="graphiql" element={<GraphiQLPage />} />
+    <Route path="lighthouse" element={<LighthousePage />} />
+    <Route path="api-docs" element={<ApiExplorerPage />} />
+    <Route path="gcp-projects" element={<GcpProjectsPage />} />
+    <Route path="newrelic" element={<NewRelicPage />} />
+    <Route path="search" element={<SearchPage />}>
      {searchPage}
    </Route>
-    <Route path="/cost-insights" element={<CostInsightsPage />} />
+    <Route path="cost-insights" element={<CostInsightsPage />} />
    <Route
-      path="/cost-insights/investigating-growth"
+      path="cost-insights/investigating-growth"
      element={<CostInsightsProjectGrowthInstructionsPage />}
    />
    <Route
-      path="/cost-insights/labeling-jobs"
+      path="cost-insights/labeling-jobs"
      element={<CostInsightsLabelDataflowInstructionsPage />}
    />
-    <Route path="/settings" element={<UserSettingsPage />}>
-      <UserSettingsTab path="/advanced" title="Advanced">
+    <Route path="settings" element={<UserSettingsPage />}>
+      <UserSettingsTab path="advanced" title="Advanced">
        <AdvancedSettings />
      </UserSettingsTab>
    </Route>
-    <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
-    <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
+    <Route path="azure-pull-requests" element={<AzurePullRequestsPage />} />
+    <Route path="apache-airflow" element={<ApacheAirflowPage />} />
  </FlatRoutes>
 );

@@ -58,6 +58,7 @@ import { pluginCollector } from '../plugins/collectors';
 import {
  featureFlagCollector,
  routingV1Collector,
+  routingV2Collector,
 } from '../routing/collectors';
 import { RoutingProvider } from '../routing/RoutingProvider';
 import { RouteTracker } from '../routing/RouteTracker';
@@ -221,9 +222,9 @@ export class AppManager implements BackstageApp {
      const { routing, featureFlags, routeBindings } = useMemo(() => {
        const result = traverseElementTree({
          root: children,
-          discoverers: [childDiscoverer, routeElementDiscoverer],
+          discoverers: [childDiscoverer],
          collectors: {
-            routing: routingV1Collector,
+            routing: routingV2Collector,
            collectedPlugins: pluginCollector,
            featureFlags: featureFlagCollector,
          },
@@ -128,12 +128,16 @@ export const routingV2Collector = createCollector(
      }

      if (elementProp) {
-        const [{ routeRef, plugin }, ...others] = collectSubTree(elementProp);
+        const [extension, ...others] = collectSubTree(elementProp);
        if (others.length > 0) {
          throw new Error(
            'Route element may not contain multiple routable extensions',
          );
        }
+        if (!extension) {
+          return ctx;
+        }
+        const { routeRef, plugin } = extension;

        const newObj = {
          path,
@@ -13459,6 +13459,8 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
    react-dom "^17.0.2"
    react-router "6.0.0-beta.0"
    react-router-dom "6.0.0-beta.0"
+    react-router-dom-stable "npm:react-router-dom@^6.3.0"
+    react-router-stable "npm:react-router@^6.3.0"
    react-use "^17.2.4"
    zen-observable "^0.8.15"

@@ -22400,6 +22402,14 @@ react-resize-detector@^6.6.3:
    lodash "^4.17.21"
    resize-observer-polyfill "^1.5.1"

+"react-router-dom-stable@npm:react-router-dom@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
 react-router-dom@6.0.0-beta.0:
  version "6.0.0-beta.0"
  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz#9dcc8555365f22f7fbd09f26b6b82543f3eb97d6"
@@ -22408,6 +22418,13 @@ react-router-dom@6.0.0-beta.0:
    prop-types "^15.7.2"
    react-router "6.0.0-beta.0"

+"react-router-stable@npm:react-router@^6.3.0", react-router@6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react-router@6.0.0-beta.0:
  version "6.0.0-beta.0"
  resolved "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz#3e11f39b6ded4412c2fed9e4f989dd4c8156724d"