From f1462655f9ce8c06ce7b286d3b16c90e7acb8275 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Wed, 23 Dec 2020 14:28:11 -0500
Subject: [PATCH] Display links properly in label instructions

---
 .../LabelDataflowInstructionsPage.tsx         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx b/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx
index 3442de49fc..ba5a22e932 100644
--- a/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx
+++ b/plugins/cost-insights/src/components/LabelDataflowInstructionsPage/LabelDataflowInstructionsPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Typography, Link } from '@material-ui/core';
 import { CodeSnippet } from '@backstage/core';
 import { AlertInstructionsLayout } from '../AlertInstructionsLayout';
 
@@ -31,10 +31,10 @@ export const LabelDataflowInstructionsPage = () => {
       </Typography>
       <Typography paragraph>
         In Cloud Dataflow, labels can be added to a job either programmatically
-        or via the command-line when launching a job. Note that GCP has
-        <a href="https://cloud.google.com/compute/docs/labeling-resources#restrictions">
+        or via the command-line when launching a job. Note that GCP has{' '}
+        <Link href="https://cloud.google.com/compute/docs/labeling-resources#restrictions">
           restrictions
-        </a>{' '}
+        </Link>{' '}
         on the length and characters that can be used in labels.
       </Typography>
       <Typography paragraph>
@@ -46,9 +46,9 @@ export const LabelDataflowInstructionsPage = () => {
         <Typography variant="h3">DataflowPipelineOptions</Typography>
         <Typography paragraph>
           Dataflow jobs using Beam's{' '}
-          <a href="https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html">
+          <Link href="https://beam.apache.org/releases/javadoc/2.3.0/org/apache/beam/runners/dataflow/options/DataflowPipelineOptions.html">
             DataflowPipelineOptions
-          </a>{' '}
+          </Link>{' '}
           directly can use the <b>setLabels</b> function to add one or more
           labels:
           <CodeSnippet
@@ -79,13 +79,13 @@ sc.optionsAs[DataflowPipelineOptions].setLabels(Map("job-id" -> "my-dataflow-job
         </Typography>
         <Typography paragraph>
           For more information on specifying options, see the{' '}
-          <a href="https://cloud.google.com/dataflow/docs/guides/specifying-exec-params">
+          <Link href="https://cloud.google.com/dataflow/docs/guides/specifying-exec-params">
             Dataflow documentation
-          </a>{' '}
+          </Link>{' '}
           or{' '}
-          <a href="https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html">
+          <Link href="https://spotify.github.io/scio/api/com/spotify/scio/ScioContext.html">
             Scio Scaladoc
-          </a>
+          </Link>
           .
         </Typography>
       </Box>