From 22bf2da9342ce24c0ce7eaf8dcc3a2ae5f0b7165 Mon Sep 17 00:00:00 2001 From: WarlenRodrigues Date: Thu, 18 Nov 2021 21:48:00 -0300 Subject: [PATCH] Fied Link components usage. Now, all links use the Backstage's Link component Signed-off-by: WarlenRodrigues --- .../src/components/Button/Button.stories.tsx | 4 ++-- .../DismissableBanner.stories.tsx | 4 ++-- .../WarningPanel/WarningPanel.stories.tsx | 4 ++-- .../src/layout/ErrorPage/ErrorPage.tsx | 6 +++--- .../src/layout/HeaderLabel/HeaderLabel.tsx | 4 ++-- plugins/catalog/src/components/Router.tsx | 6 +++--- .../BuildsPage/lib/CITable/CITable.tsx | 6 +++--- .../cloudbuild/src/components/Cards/Cards.tsx | 5 +++-- .../src/components/Cards/Cards.tsx | 4 ++-- .../components/ClusterTable/ClusterTable.tsx | 5 ++--- .../BuildsPage/lib/CITable/CITable.tsx | 18 +++++++++--------- plugins/jenkins/src/components/Cards/Cards.tsx | 5 +++-- .../components/AuditList/AuditListTable.tsx | 9 +++++++-- .../User/UserProfileCard/UserProfileCard.tsx | 10 +++++++--- .../components/TemplateList/TemplateList.tsx | 5 +++-- .../SearchResult/SearchResult.stories.tsx | 5 +++-- .../src/components/ErrorCell/ErrorCell.tsx | 5 +++-- .../components/SonarQubeCard/RatingCard.tsx | 5 +++-- 18 files changed, 62 insertions(+), 48 deletions(-) diff --git a/packages/core-components/src/components/Button/Button.stories.tsx b/packages/core-components/src/components/Button/Button.stories.tsx index 32c3a98bcc..ca95316ee8 100644 --- a/packages/core-components/src/components/Button/Button.stories.tsx +++ b/packages/core-components/src/components/Button/Button.stories.tsx @@ -18,13 +18,13 @@ import { Button } from './Button'; import { useLocation } from 'react-router-dom'; import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api'; import Divider from '@material-ui/core/Divider'; -import Link from '@material-ui/core/Link'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import Typography from '@material-ui/core/Typography'; import MaterialButton from '@material-ui/core/Button'; import { wrapInTestApp } from '@backstage/test-utils'; +import { Link } from '../Link'; const routeRef = createRouteRef({ id: 'storybook.test-route', @@ -45,7 +45,7 @@ export default { A collection of buttons that should be used in the Backstage interface. These leverage the properties inherited from{' '} - + Material-UI Button , but include an opinionated set that align to the Backstage design. diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx index 5487d2e7b5..b08549539b 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx @@ -16,7 +16,6 @@ import React from 'react'; import { DismissableBanner } from './DismissableBanner'; -import Link from '@material-ui/core/Link'; import Typography from '@material-ui/core/Typography'; import { WebStorage } from '@backstage/core-app-api'; import { @@ -25,6 +24,7 @@ import { StorageApi, } from '@backstage/core-plugin-api'; import { TestApiProvider } from '@backstage/test-utils'; +import { Link } from '../Link'; export default { title: 'Feedback/DismissableBanner', @@ -83,7 +83,7 @@ export const WithLink = () => ( message={ This is a dismissable banner with a link:{' '} - + example.com diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx index 838cb02a76..2a8918c055 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx @@ -17,8 +17,8 @@ import React from 'react'; import { WarningPanel } from './WarningPanel'; import Button from '@material-ui/core/Button'; -import Link from '@material-ui/core/Link'; import Typography from '@material-ui/core/Typography'; +import { Link } from '../Link'; export default { title: 'Feedback/Warning Panel', @@ -32,7 +32,7 @@ export const Default = () => ( <> This example entity is missing an annotation. If this is unexpected, please make sure you have set up everything correctly by following{' '} - this guide. + this guide. } /> diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index 3d55307c81..db747e3808 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx @@ -16,13 +16,13 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import Link from '@material-ui/core/Link'; import Grid from '@material-ui/core/Grid'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; import { MicDrop } from './MicDrop'; import { useNavigate } from 'react-router'; import { useSupportConfig } from '../../hooks'; +import { Link } from '../../components/Link'; interface IErrorPageProps { status: string; @@ -80,11 +80,11 @@ export function ErrorPage(props: IErrorPageProps) { Looks like someone dropped the mic! - navigate(-1)}> + Go back ... or please{' '} - + contact support {' '} if you think this is a bug. diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index b4576a27a9..73c46a1ddc 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -15,10 +15,10 @@ */ import { makeStyles } from '@material-ui/core/styles'; -import Link from '@material-ui/core/Link'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import React from 'react'; +import { Link } from '../../components/Link'; /** @public */ export type HeaderLabelClassKey = 'root' | 'label' | 'value'; @@ -74,7 +74,7 @@ export function HeaderLabel(props: HeaderLabelProps) { {label} - {url ? {content} : content} + {url ? {content} : content} ); diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx index 2a0eacf074..fc70297b70 100644 --- a/plugins/catalog/src/components/Router.tsx +++ b/plugins/catalog/src/components/Router.tsx @@ -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 = () => ( @@ -38,7 +38,7 @@ const DefaultEntityPage = () => ( To override this component with your custom implementation, read docs on{' '} - + backstage.io/docs diff --git a/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx b/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx index 53cbc754cf..caf54a4fe4 100644 --- a/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx +++ b/plugins/circleci/src/components/BuildsPage/lib/CITable/CITable.tsx @@ -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 }) => { {source?.branchName} {source?.commit?.url !== undefined ? ( - + {source?.commit.shortHash} ) : ( @@ -169,7 +169,7 @@ const generatedColumns: TableColumn[] = [ field: 'buildName', highlight: true, render: (row: Partial) => ( - + diff --git a/plugins/cloudbuild/src/components/Cards/Cards.tsx b/plugins/cloudbuild/src/components/Cards/Cards.tsx index a1c9b3c076..b016518b1c 100644 --- a/plugins/cloudbuild/src/components/Cards/Cards.tsx +++ b/plugins/cloudbuild/src/components/Cards/Cards.tsx @@ -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: ( - + See more on Google{' '} diff --git a/plugins/github-actions/src/components/Cards/Cards.tsx b/plugins/github-actions/src/components/Cards/Cards.tsx index 6f6531044e..0cb5d1e089 100644 --- a/plugins/github-actions/src/components/Cards/Cards.tsx +++ b/plugins/github-actions/src/components/Cards/Cards.tsx @@ -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: ( - + See more on GitHub{' '} diff --git a/plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.tsx b/plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.tsx index 28c4bb65f3..3230f8500c 100644 --- a/plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.tsx +++ b/plugins/gitops-profiles/src/components/ClusterTable/ClusterTable.tsx @@ -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) => ( - + {componentData.name} ), diff --git a/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx b/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx index a959ba39c9..a7a0686593 100644 --- a/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx +++ b/plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx @@ -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) => ( <>

- + {row.lastBuild?.source?.branchName}

@@ -154,7 +154,7 @@ const generatedColumns: TableColumn[] = [ <>

{row.lastBuild?.tests && ( - + {row.lastBuild?.tests.passed} / {row.lastBuild?.tests.total}{' '} passed + See more on Jenkins{' '} diff --git a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx index 10f29f3fd5..541bc0e22d 100644 --- a/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx +++ b/plugins/lighthouse/src/components/AuditList/AuditListTable.tsx @@ -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[] = [ diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx index 30709fe68b..298819ed09 100644 --- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx +++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx @@ -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 = ({ - {profile.email} + {profile.email} )} diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx index 9b66a0a9b6..2ac0def547 100644 --- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -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 && ( No templates found that match your filter. Learn more about{' '} - + adding templates . diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx index bf83b8b1ad..aebaecb8b4 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -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 ( - + {document.title} - {document.text} diff --git a/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx b/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx index d2da63f01f..015cf96ed1 100644 --- a/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx +++ b/plugins/sentry/src/components/ErrorCell/ErrorCell.tsx @@ -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 (

- + {stripText(issueType, 28)} diff --git a/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx b/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx index e5bcfe4f86..547c3008c0 100644 --- a/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx +++ b/plugins/sonarqube/src/components/SonarQubeCard/RatingCard.tsx @@ -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 ( - +