Merge pull request #5006 from SDA-SE/feat/userouteparams

Introduce `useRouteRefParams` to `core-api` to retrieve typed route params

plugins/catalog-react/src/hooks/useEntityCompoundName.ts

@@ -13,12 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useParams } from 'react-router';
+import { useRouteRefParams } from '@backstage/core';
+import { entityRouteRef } from '../routes';
 
 /**
  * Grabs entity kind, namespace, and name from the location
  */
 export const useEntityCompoundName = () => {
-  const { kind, namespace, name } = useParams();
+  const { kind, namespace, name } = useRouteRefParams(entityRouteRef);
   return { kind, namespace, name };
 };

plugins/github-actions/src/components/WorkflowRunDetails/useWorkflowRunsDetails.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useApi } from '@backstage/core';
-import { useParams } from 'react-router-dom';
+import { useApi, useRouteRefParams } from '@backstage/core';
 import { useAsync } from 'react-use';
 import { githubActionsApiRef } from '../../api';
+import { buildRouteRef } from '../../plugin';
 
 export const useWorkflowRunsDetails = ({
   hostname,
@@ -28,7 +28,7 @@ export const useWorkflowRunsDetails = ({
   repo: string;
 }) => {
   const api = useApi(githubActionsApiRef);
-  const { id } = useParams();
+  const { id } = useRouteRefParams(buildRouteRef);
   const details = useAsync(async () => {
     return repo && owner
       ? api.getWorkflowRun({

plugins/github-actions/src/plugin.ts

@@ -33,6 +33,7 @@ export const rootRouteRef = createRouteRef({
 
 export const buildRouteRef = createRouteRef({
   path: ':id',
+  params: ['id'],
   title: 'GitHub Actions Workflow Run',
 });
 

plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -13,25 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { useParams } from 'react-router-dom';
-import { Breadcrumbs, Content, Link } from '@backstage/core';
+import { Breadcrumbs, Content, Link, useRouteRefParams } from '@backstage/core';
 import {
   Box,
-  Typography,
-  Paper,
-  TableContainer,
-  Table,
-  TableRow,
-  TableCell,
-  TableBody,
   Link as MaterialLink,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import ExternalLinkIcon from '@material-ui/icons/Launch';
+import React from 'react';
+import { buildRouteRef } from '../../plugin';
+import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
 import { useBuildWithSteps } from '../useBuildWithSteps';
 import { useProjectSlugFromEntity } from '../useProjectSlugFromEntity';
-import { JenkinsRunStatus } from '../BuildsPage/lib/Status';
-import ExternalLinkIcon from '@material-ui/icons/Launch';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({
 
 const BuildWithStepsView = () => {
   const projectName = useProjectSlugFromEntity();
-  const { branch, buildNumber } = useParams();
+  const { branch, buildNumber } = useRouteRefParams(buildRouteRef);
   const classes = useStyles();
   const buildPath = `${projectName}/${branch}/${buildNumber}`;
   const [{ value }] = useBuildWithSteps(buildPath);

plugins/jenkins/src/plugin.ts

@@ -15,14 +15,14 @@
  */
 
 import {
-  createPlugin,
-  createRouteRef,
   createApiFactory,
-  discoveryApiRef,
-  createRoutableExtension,
   createComponentExtension,
+  createPlugin,
+  createRoutableExtension,
+  createRouteRef,
+  discoveryApiRef,
 } from '@backstage/core';
-import { jenkinsApiRef, JenkinsApi } from './api';
+import { JenkinsApi, jenkinsApiRef } from './api';
 
 export const rootRouteRef = createRouteRef({
   path: '',
@@ -31,6 +31,7 @@ export const rootRouteRef = createRouteRef({
 
 export const buildRouteRef = createRouteRef({
   path: 'run/:branch/:buildNumber',
+  params: ['branch', 'buildNumber'],
   title: 'Jenkins run',
 });