Get rid of usages of the old Button

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/quiet-ghosts-float.md

@@ -0,0 +1,12 @@
+---
+'@backstage/plugin-entity-validation': patch
+'@backstage/core-components': patch
+'@backstage/plugin-kubernetes': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-explore': patch
+---
+
+Switch to using `LinkButton` instead of the deprecated `Button`

packages/core-components/api-report.md

@@ -131,7 +131,7 @@ export type BreadcrumbsStyledBoxClassKey = 'root';
 export function BrokenImageIcon(props: IconComponentProps): JSX.Element;
 
 // @public @deprecated (undocumented)
-export const Button: (props: ButtonProps) => JSX.Element;
+export const Button: (props: LinkButtonProps) => JSX.Element;
 
 // @public @deprecated (undocumented)
 export type ButtonProps = LinkButtonProps;
@@ -631,7 +631,7 @@ export function LinearGauge(props: Props_11): JSX.Element | null;
 export const Link: (props: LinkProps) => JSX.Element;
 
 // @public
-export const LinkButton: (props: ButtonProps) => JSX.Element;
+export const LinkButton: (props: LinkButtonProps) => JSX.Element;
 
 // @public
 export type LinkButtonProps = ButtonProps_2 &

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

@@ -44,9 +44,11 @@ const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
  * @public
  * @remarks
  */
-export const LinkButton = React.forwardRef<any, ButtonProps>((props, ref) => (
-  <MaterialButton ref={ref} component={LinkWrapper} {...props} />
-)) as (props: ButtonProps) => JSX.Element;
+export const LinkButton = React.forwardRef<any, LinkButtonProps>(
+  (props, ref) => (
+    <MaterialButton ref={ref} component={LinkWrapper} {...props} />
+  ),
+) as (props: LinkButtonProps) => JSX.Element;
 
 /**
  * @public

packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -16,7 +16,7 @@
 
 import Typography from '@material-ui/core/Typography';
 import React, { ComponentClass, Component, ErrorInfo } from 'react';
-import { Button } from '../../components/LinkButton';
+import { LinkButton } from '../../components/LinkButton';
 import { ErrorPanel } from '../../components/ErrorPanel';
 
 type SlackChannel = {
@@ -49,9 +49,9 @@ const SlackLink = (props: { slackChannel?: string | SlackChannel }) => {
   }
 
   return (
-    <Button to={slackChannel.href} variant="contained">
+    <LinkButton to={slackChannel.href} variant="contained">
       {slackChannel.name}
-    </Button>
+    </LinkButton>
   );
 };
 

packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx

@@ -22,7 +22,7 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { Button } from '../../components';
+import { LinkButton } from '../../components';
 import { ItemCardGrid } from './ItemCardGrid';
 import { ItemCardHeader } from './ItemCardHeader';
 
@@ -63,9 +63,9 @@ export const Default = () => (
               .join(' ')}
           </CardContent>
           <CardActions>
-            <Button color="primary" to="/catalog">
+            <LinkButton color="primary" to="/catalog">
               Go There!
-            </Button>
+            </LinkButton>
           </CardActions>
         </Card>
       ))}
@@ -99,9 +99,9 @@ export const Styling = () => {
                 .join(' ')}
             </CardContent>
             <CardActions>
-              <Button color="primary" to="/catalog">
+              <LinkButton color="primary" to="/catalog">
                 Go There!
-              </Button>
+              </LinkButton>
             </CardActions>
           </Card>
         ))}

packages/core-components/src/layout/ItemCard/ItemCard.tsx

@@ -21,7 +21,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Chip from '@material-ui/core/Chip';
 import React, { ReactNode } from 'react';
-import { Button } from '../../components';
+import { LinkButton } from '../../components';
 import { ItemCardHeader } from './ItemCardHeader';
 
 type ItemCardProps = {
@@ -80,14 +80,14 @@ export function ItemCard(props: ItemCardProps) {
       </CardContent>
       <CardActions>
         {!href && (
-          <Button to="#" onClick={onClick} color="primary">
+          <LinkButton to="#" onClick={onClick} color="primary">
             {label}
-          </Button>
+          </LinkButton>
         )}
         {href && (
-          <Button to={href} color="primary">
+          <LinkButton to={href} color="primary">
             {label}
-          </Button>
+          </LinkButton>
         )}
       </CardActions>
     </Card>

plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -24,7 +24,7 @@ import LaunchIcon from '@material-ui/icons/Launch';
 import { useBuildWithSteps } from '../../state/useBuildWithSteps';
 import {
   Breadcrumbs,
-  Button,
+  LinkButton,
   InfoCard,
   Progress,
   Link,
@@ -33,9 +33,9 @@ import {
 const BuildName = ({ build }: { build?: BuildWithSteps }) => (
   <Box display="flex" alignItems="center">
     #{build?.build_num} - {build?.subject}
-    <Button to={build?.build_url || '#'}>
+    <LinkButton to={build?.build_url || '#'}>
       <LaunchIcon />
-    </Button>
+    </LinkButton>
   </Box>
 );
 

plugins/entity-validation/src/components/EntityValidationPage/EntityValidationPage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useState } from 'react';
 import { Content, Header, LinkButton, Page } from '@backstage/core-components';
 import { EntityTextArea } from '../EntityTextArea';

plugins/explore/src/components/DomainCard/DomainCard.tsx

@@ -31,7 +31,7 @@ import {
 } from '@material-ui/core';
 import React from 'react';
 
-import { Button, ItemCardHeader } from '@backstage/core-components';
+import { LinkButton, ItemCardHeader } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 /** @public */
@@ -66,9 +66,9 @@ export const DomainCard = (props: { entity: DomainEntity }) => {
         {entity.metadata.description}
       </CardContent>
       <CardActions>
-        <Button to={url} color="primary">
+        <LinkButton to={url} color="primary">
           Explore
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -26,7 +26,7 @@ import {
   makeStyles,
   Typography,
 } from '@material-ui/core';
-import { Button } from '@backstage/core-components';
+import { LinkButton } from '@backstage/core-components';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -97,9 +97,9 @@ export const ToolCard = ({ card, objectFit }: Props) => {
         )}
       </CardContent>
       <CardActions>
-        <Button color="primary" to={url} disabled={!url}>
+        <LinkButton color="primary" to={url} disabled={!url}>
           Explore
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/kubernetes/src/components/KubernetesDrawer/KubernetesDrawer.tsx

@@ -33,7 +33,7 @@ import { V1ObjectMeta } from '@kubernetes/client-node';
 import { withStyles } from '@material-ui/core/styles';
 import jsYaml from 'js-yaml';
 import {
-  Button as BackstageButton,
+  LinkButton as BackstageButton,
   CodeSnippet,
   StructuredMetadataTable,
   WarningPanel,

plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx

@@ -15,8 +15,8 @@
  */
 
 import {
-  Button,
   ItemCardHeader,
+  LinkButton,
   MarkdownContent,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
@@ -118,13 +118,13 @@ export const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
         </Box>
       </CardContent>
       <CardActions>
-        <Button
+        <LinkButton
           color="primary"
           aria-label={`Choose ${playlist.name}`}
           to={playlistRoute({ playlistId: playlist.id })}
         >
           Choose
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import {
   DEFAULT_NAMESPACE,
   Entity,
@@ -22,9 +23,9 @@ import {
   stringifyEntityRef,
 } from '@backstage/catalog-model';
 import {
-  Button,
   ItemCardHeader,
   Link,
+  LinkButton,
   MarkdownContent,
 } from '@backstage/core-components';
 import {
@@ -291,13 +292,13 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
             </Tooltip>
           ))}
         </div>
-        <Button
+        <LinkButton
           color="primary"
           to={href}
           aria-label={`Choose ${templateProps.title}`}
         >
           Choose
-        </Button>
+        </LinkButton>
       </CardActions>
     </Card>
   );

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Button } from '@backstage/core-components';
+import { LinkButton } from '@backstage/core-components';
 import { lightTheme } from '@backstage/theme';
 import { Grid } from '@material-ui/core';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -66,7 +66,7 @@ export const WithSecondaryAction = () => {
     <DefaultResultListItem
       result={mockSearchResult}
       secondaryAction={
-        <Button
+        <LinkButton
           to="#"
           size="small"
           aria-label="owner"
@@ -75,7 +75,7 @@ export const WithSecondaryAction = () => {
           style={{ textTransform: 'lowercase' }}
         >
           {mockSearchResult.owner}
-        </Button>
+        </LinkButton>
       }
     />
   );

plugins/techdocs/src/home/components/Grids/DocsCardGrid.tsx

@@ -19,7 +19,7 @@ import { toLowerMaybe } from '../../../helpers';
 import { Entity } from '@backstage/catalog-model';
 import { useApi, useRouteRef, configApiRef } from '@backstage/core-plugin-api';
 import {
-  Button,
+  LinkButton,
   ItemCardGrid,
   ItemCardHeader,
 } from '@backstage/core-components';
@@ -58,7 +58,7 @@ export const DocsCardGrid = (props: DocsCardGridProps) => {
               </CardMedia>
               <CardContent>{entity.metadata.description}</CardContent>
               <CardActions>
-                <Button
+                <LinkButton
                   to={getRouteToReaderPageFor({
                     namespace: toLowerMaybe(
                       entity.metadata.namespace ?? 'default',
@@ -71,7 +71,7 @@ export const DocsCardGrid = (props: DocsCardGridProps) => {
                   data-testid="read_docs"
                 >
                   Read Docs
-                </Button>
+                </LinkButton>
               </CardActions>
             </Card>
           ))}

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

@@ -25,7 +25,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { rootDocsRouteRef } from '../../../routes';
 import {
-  Button,
+  LinkButton,
   EmptyState,
   Table,
   TableColumn,
@@ -121,13 +121,13 @@ export const DocsTable = (props: DocsTableProps) => {
           title="No documents to show"
           description="Create your own document. Check out our Getting Started Information"
           action={
-            <Button
+            <LinkButton
               color="primary"
               to="https://backstage.io/docs/features/techdocs/getting-started"
               variant="contained"
             >
               DOCS
-            </Button>
+            </LinkButton>
           }
         />
       )}