Fied Link components usage. Now, all links use the Backstage's Link component

Signed-off-by: WarlenRodrigues <warlen.cesarrodrigues@gmail.com>
This commit is contained in:
WarlenRodrigues
2021-11-18 21:48:00 -03:00
committed by Fredrik Adelöw
parent 9e18e6b025
commit 22bf2da934
18 changed files with 62 additions and 48 deletions
+3 -3
View File
@@ -19,13 +19,13 @@ import {
useEntity,
useEntityFromUrl,
} from '@backstage/plugin-catalog-react';
import { Link, Typography } from '@material-ui/core';
import { Typography } from '@material-ui/core';
import React, { ComponentType, ReactNode } from 'react';
import { Navigate, Route, Routes, useParams } from 'react-router';
import { CatalogPage } from './CatalogPage';
import { EntityNotFound } from './EntityNotFound';
import { EntityPageLayout } from './EntityPageLayout';
import { Content } from '@backstage/core-components';
import { Content, Link } from '@backstage/core-components';
const DefaultEntityPage = () => (
<EntityPageLayout>
@@ -38,7 +38,7 @@ const DefaultEntityPage = () => (
<Typography variant="body1">
To override this component with your custom implementation, read
docs on{' '}
<Link target="_blank" href="https://backstage.io/docs">
<Link target="_blank" to="https://backstage.io/docs">
backstage.io/docs
</Link>
</Typography>
@@ -17,7 +17,6 @@
import React from 'react';
import {
Avatar,
Link,
Typography,
Box,
IconButton,
@@ -37,6 +36,7 @@ import {
StatusRunning,
Table,
TableColumn,
Link,
} from '@backstage/core-components';
import { useRouteRef } from '@backstage/core-plugin-api';
@@ -121,7 +121,7 @@ const SourceInfo = ({ build }: { build: CITableBuildInfo }) => {
<Typography variant="button">{source?.branchName}</Typography>
<Typography variant="body1">
{source?.commit?.url !== undefined ? (
<Link href={source?.commit?.url} target="_blank">
<Link to={source?.commit?.url} target="_blank">
{source?.commit.shortHash}
</Link>
) : (
@@ -169,7 +169,7 @@ const generatedColumns: TableColumn[] = [
field: 'buildName',
highlight: true,
render: (row: Partial<CITableBuildInfo>) => (
<Link href={row?.buildUrl} target="_blank">
<Link to={row?.buildUrl!} target="_blank">
<Box display="flex" alignItems="center">
<LaunchIcon fontSize="small" color="disabled" />
<Box mr={1} />
@@ -19,12 +19,13 @@ import { WorkflowRunsTable } from '../WorkflowRunsTable';
import { Entity } from '@backstage/catalog-model';
import { useEntity } from '@backstage/plugin-catalog-react';
import { WorkflowRunStatus } from '../WorkflowRunStatus';
import { Link, Theme, makeStyles, LinearProgress } from '@material-ui/core';
import { Theme, makeStyles, LinearProgress } from '@material-ui/core';
import ExternalLinkIcon from '@material-ui/icons/Launch';
import { CLOUDBUILD_ANNOTATION } from '../useProjectName';
import {
InfoCard,
Link,
StructuredMetadataTable,
WarningPanel,
} from '@backstage/core-components';
@@ -62,7 +63,7 @@ const WidgetContent = ({
),
message: lastRun.message,
url: (
<Link href={lastRun.googleUrl} target="_blank">
<Link to={lastRun.googleUrl ?? ''} target="_blank">
See more on Google{' '}
<ExternalLinkIcon className={classes.externalLinkIcon} />
</Link>
@@ -18,7 +18,6 @@ import { readGitHubIntegrationConfigs } from '@backstage/integration';
import { useEntity } from '@backstage/plugin-catalog-react';
import {
LinearProgress,
Link,
makeStyles,
Theme,
Typography,
@@ -34,6 +33,7 @@ import { configApiRef, errorApiRef, useApi } from '@backstage/core-plugin-api';
import {
InfoCard,
InfoCardVariants,
Link,
StructuredMetadataTable,
} from '@backstage/core-components';
@@ -71,7 +71,7 @@ const WidgetContent = ({
),
message: lastRun.message,
url: (
<Link href={lastRun.githubUrl} target="_blank">
<Link to={lastRun.githubUrl ?? ''} target="_blank">
See more on GitHub{' '}
<ExternalLinkIcon className={classes.externalLinkIcon} />
</Link>
@@ -14,10 +14,9 @@
* limitations under the License.
*/
import React from 'react';
import { Link } from '@material-ui/core';
import { ClusterStatus } from '../../api';
import { transformStatus } from '../ProfileCatalog/ProfileCatalog';
import { Table, TableColumn } from '@backstage/core-components';
import { Link, Table, TableColumn } from '@backstage/core-components';
const columns: TableColumn[] = [
{
@@ -25,7 +24,7 @@ const columns: TableColumn[] = [
field: 'name',
highlight: true,
render: (componentData: any) => (
<Link href={`/gitops-cluster/${componentData.name}`}>
<Link to={`/gitops-cluster/${componentData.name}`}>
{componentData.name}
</Link>
),
@@ -13,17 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState } from 'react';
import { Progress, Table, TableColumn } from '@backstage/core-components';
import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import { Box, IconButton, Link, Tooltip, Typography } from '@material-ui/core';
import RetryIcon from '@material-ui/icons/Replay';
import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
import { default as React, useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { JenkinsRunStatus } from '../Status';
import { useBuilds } from '../../../useBuilds';
import { buildRouteRef } from '../../../../plugin';
import { Progress, Table, TableColumn } from '@backstage/core-components';
import { Project } from '../../../../api/JenkinsApi';
import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
import { buildRouteRef } from '../../../../plugin';
import { useBuilds } from '../../../useBuilds';
import { JenkinsRunStatus } from '../Status';
const FailCount = ({ count }: { count: number }): JSX.Element | null => {
if (count !== 0) {
@@ -127,7 +127,7 @@ const generatedColumns: TableColumn[] = [
render: (row: Partial<Project>) => (
<>
<p>
<Link href={row.lastBuild?.source?.url || ''} target="_blank">
<Link to={row.lastBuild?.source?.url || ''} target="_blank">
{row.lastBuild?.source?.branchName}
</Link>
</p>
@@ -154,7 +154,7 @@ const generatedColumns: TableColumn[] = [
<>
<p>
{row.lastBuild?.tests && (
<Link href={row.lastBuild?.tests.testUrl || ''} target="_blank">
<Link to={row.lastBuild?.tests.testUrl || ''} target="_blank">
{row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '}
passed
<FailSkippedWidget
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { LinearProgress, Link, makeStyles, Theme } from '@material-ui/core';
import { LinearProgress, makeStyles, Theme } from '@material-ui/core';
import ExternalLinkIcon from '@material-ui/icons/Launch';
import { DateTime, Duration } from 'luxon';
import React from 'react';
@@ -22,6 +22,7 @@ import { ErrorType, useBuilds } from '../useBuilds';
import {
InfoCard,
InfoCardVariants,
Link,
StructuredMetadataTable,
WarningPanel,
} from '@backstage/core-components';
@@ -66,7 +67,7 @@ const WidgetContent = ({
'latest run': displayDate,
duration: displayDuration,
link: (
<Link href={latestRun.lastBuild.url} target="_blank">
<Link to={latestRun.lastBuild.url} target="_blank">
See more on Jenkins{' '}
<ExternalLinkIcon className={classes.externalLinkIcon} />
</Link>
@@ -22,10 +22,15 @@ import {
CATEGORY_LABELS,
buildSparklinesDataForItem,
} from '../../utils';
import { Link, generatePath } from 'react-router-dom';
import { generatePath } from 'react-router-dom';
import AuditStatusIcon from '../AuditStatusIcon';
import { Table, TableColumn, TrendLine } from '@backstage/core-components';
import {
Link,
Table,
TableColumn,
TrendLine,
} from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
const columns: TableColumn[] = [
@@ -22,7 +22,6 @@ import {
import {
Box,
Grid,
Link,
List,
ListItem,
ListItemIcon,
@@ -34,7 +33,12 @@ import GroupIcon from '@material-ui/icons/Group';
import PersonIcon from '@material-ui/icons/Person';
import Alert from '@material-ui/lab/Alert';
import React from 'react';
import { Avatar, InfoCard, InfoCardVariants } from '@backstage/core-components';
import {
Avatar,
InfoCard,
InfoCardVariants,
Link,
} from '@backstage/core-components';
const CardTitle = ({ title }: { title?: string }) =>
title ? (
@@ -83,7 +87,7 @@ export const UserProfileCard = ({
</Tooltip>
</ListItemIcon>
<ListItemText>
<Link href={emailHref}>{profile.email}</Link>
<Link to={emailHref ?? ''}>{profile.email}</Link>
</ListItemText>
</ListItem>
)}
@@ -24,11 +24,12 @@ import {
Content,
ContentHeader,
ItemCardGrid,
Link,
Progress,
WarningPanel,
} from '@backstage/core-components';
import { useEntityListProvider } from '@backstage/plugin-catalog-react';
import { Link, Typography } from '@material-ui/core';
import { Typography } from '@material-ui/core';
import { TemplateCard } from '../TemplateCard';
export type TemplateListProps = {
@@ -73,7 +74,7 @@ export const TemplateList = ({
{!error && !loading && !entities.length && (
<Typography variant="body2">
No templates found that match your filter. Learn more about{' '}
<Link href="https://backstage.io/docs/features/software-templates/adding-templates">
<Link to="https://backstage.io/docs/features/software-templates/adding-templates">
adding templates
</Link>
.
@@ -15,9 +15,10 @@
*/
import React from 'react';
import { List, Link, ListItem } from '@material-ui/core';
import { List, ListItem } from '@material-ui/core';
import { SearchResult, SearchContext, DefaultResultListItem } from '../index';
import { MemoryRouter } from 'react-router';
import { Link } from '@backstage/core-components';
export default {
title: 'Plugins/Search/SearchResult',
@@ -79,7 +80,7 @@ export const Default = () => {
default:
return (
<ListItem>
<Link href={document.location}>
<Link to={document.location}>
{document.title} - {document.text}
</Link>
</ListItem>
@@ -16,9 +16,10 @@
import React from 'react';
import { SentryIssue } from '../../api';
import { Link, Typography } from '@material-ui/core';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { BackstageTheme } from '@backstage/theme';
import { Link } from '@backstage/core-components';
function stripText(text: string, maxLength: number) {
return text.length > maxLength ? `${text.substr(0, maxLength)}...` : text;
@@ -53,7 +54,7 @@ export const ErrorCell = ({ sentryIssue }: { sentryIssue: SentryIssue }) => {
return (
<div className={classes.root}>
<Link href={sentryIssue.permalink}>
<Link to={sentryIssue.permalink}>
<Typography variant="body1" gutterBottom className={classes.text}>
{stripText(issueType, 28)}
</Typography>
@@ -14,7 +14,8 @@
* limitations under the License.
*/
import { Grid, Typography, Link } from '@material-ui/core';
import { Link } from '@backstage/core-components';
import { Grid, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React, { ReactNode } from 'react';
@@ -62,7 +63,7 @@ export const RatingCard = ({
const classes = useStyles();
return (
<Link href={link} color="inherit" underline="none">
<Link to={link} color="inherit" underline="none">
<Grid item className={classes.root}>
<Grid item className={classes.upper}>
<Grid item className={classes.left}>