Merge pull request #6036 from SDA-SE/feat/button-link

Use the Backstage `Link` component in the `Button`

.changeset/honest-rabbits-divide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fix the link to the documentation page when no owned documents are displayed

.changeset/yellow-schools-matter.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core': patch
+'@backstage/core-components': patch
+---
+
+Use the Backstage `Link` component in the `Button`

packages/core-components/src/components/Button/Button.tsx

@@ -14,17 +14,19 @@
  * limitations under the License.
  */
 
-import React, { ComponentProps } from 'react';
-import { Button as MaterialButton } from '@material-ui/core';
-import { Link as RouterLink } from 'react-router-dom';
+import {
+  Button as MaterialButton,
+  ButtonProps as MaterialButtonProps,
+} from '@material-ui/core';
+import React from 'react';
+import { Link, LinkProps } from '../Link';
 
-type Props = ComponentProps<typeof MaterialButton> &
-  ComponentProps<typeof RouterLink>;
+type Props = MaterialButtonProps & Omit<LinkProps, 'variant' | 'color'>;
 
 /**
  * Thin wrapper on top of material-ui's Button component
  * Makes the Button to utilise react-router
  */
 export const Button = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialButton ref={ref} component={RouterLink} {...props} />
+  <MaterialButton ref={ref} component={Link} {...props} />
 ));

packages/core/src/components/Button/Button.tsx

@@ -14,17 +14,19 @@
  * limitations under the License.
  */
 
-import React, { ComponentProps } from 'react';
-import { Button as MaterialButton } from '@material-ui/core';
-import { Link as RouterLink } from 'react-router-dom';
+import {
+  Button as MaterialButton,
+  ButtonProps as MaterialButtonProps,
+} from '@material-ui/core';
+import React from 'react';
+import { Link, LinkProps } from '../Link';
 
-type Props = ComponentProps<typeof MaterialButton> &
-  ComponentProps<typeof RouterLink>;
+type Props = MaterialButtonProps & Omit<LinkProps, 'variant' | 'color'>;
 
 /**
  * Thin wrapper on top of material-ui's Button component
  * Makes the Button to utilise react-router
  */
 export const Button = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialButton ref={ref} component={RouterLink} {...props} />
+  <MaterialButton ref={ref} component={Link} {...props} />
 ));

plugins/techdocs/src/home/components/DocsTable.tsx

@@ -111,7 +111,6 @@ export const DocsTable = ({
           action={
             <Button
               color="primary"
-              href="#"
               to="https://backstage.io/docs/features/techdocs/getting-started"
               variant="contained"
             >