feat: Improve commit yaml error messaging

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx

@@ -47,7 +47,7 @@ function UploadsCard() {
             <Card.Title size="base">Coverage reports history</Card.Title>
             {/* @ts-expect-error */}
             <A onClick={() => setShowYAMLModal(true)} hook="open yaml modal">
-              <span className="text-xs">view YAML file</span>
+              <span className="text-xs text-red-700">view YAML file</span>
             </A>
           </div>
           <Card.Description className="text-ds-gray-quinary">

src/pages/CommitDetailPage/CommitCoverage/YamlErrorBanner/YamlErrorBanner.jsx

@@ -1,3 +1,4 @@
+import A from 'ui/A'
 import Banner from 'ui/Banner'
 import BannerContent from 'ui/Banner/BannerContent'
 import BannerHeading from 'ui/Banner/BannerHeading'
@@ -6,11 +7,20 @@ function YamlErrorBanner() {
   return (
     <Banner variant="warning">
       <BannerHeading>
-        <p className="font-semibold">Commit YAML is invalid</p>
+        <p className="font-semibold">
+          <A to="" isExternal={true}>
+            YAML
+          </A>{' '}
+          is invalid
+        </p>
       </BannerHeading>
       <BannerContent>
         Coverage data is unable to be displayed, as the commit YAML appears to
-        be invalid.
+        be invalid. The{' '}
+        <A to="" isExternal={true}>
+          yaml validator
+        </A>{' '}
+        can help determine its validation.
       </BannerContent>
     </Banner>
   )

src/pages/CommitDetailPage/CommitCoverage/YamlModal/YamlModalErrorBanner.jsx

@@ -7,12 +7,15 @@ function YamlModalErrorBanner() {
   return (
     <Banner variant="warning">
       <BannerHeading>
-        <div className="font-semibold">Commit YAML is invalid</div>
+        <div className="font-semibold"><A to="">YAML</A> is invalid</div>
       </BannerHeading>
       <BannerContent>
-        When the commit-level YAML is invalid, we use the last valid repo YAML.
+        Coverage data is unable to be displayed, as the yaml appears to be invalid. 
+        The <A to="" isExternal={true}>yaml validator</A> can help determine its validation.
+
+        {/* When the commit-level YAML is invalid, we use the last valid repo YAML.
         To determine if your YAML is valid, please follow the steps{' '}
-        <A to={{ pageName: 'repoYaml' }}>here.</A>
+        <A to={{ pageName: 'repoYaml' }}>here.</A> */}
       </BannerContent>
     </Banner>
   )

src/pages/CommitDetailPage/Dropdowns/CommitCoverageDropdown.tsx

@@ -1,6 +1,7 @@
 import { useParams } from 'react-router-dom'
 
 import { useCommitCoverageDropdownSummary } from 'services/commit/useCommitCoverageDropdownSummary'
+import Icon from 'ui/Icon'
 import SummaryDropdown from 'ui/SummaryDropdown'
 
 interface URLParams {
@@ -21,6 +22,13 @@ const CoverageMessage: React.FC = () => {
   const comparison = data?.commit?.compareWithParent
   const uploadErrorCount = data?.uploadErrorCount
 
+  return (
+    <>
+      data unavailable due to invalid yaml{' '}
+      <Icon name="exclamationTriangle" className="fill-ds-primary-red" />
+    </>
+  )
+
   if (!!uploadErrorCount) {
     if (uploadErrorCount === 1) {
       return (