fix: highlight Data Input link

[keita-determined]

Ticket

ET-638

Description

Blue color link instead of white link for Data Input card to let users know its clickable

Test Plan

• Data Input card should have blue link in the experiment detail page
• Data Input instead of Data input

Checklist

• Changes have been manually QA'd
• New features have been approved by the corresponding PM
• User-facing API changes have the "User-facing API Change" label
• Release notes have been added as a separate file under docs/release-notes/
  See Release Note for details.
• Licenses have been included for new code which was copied and/or modified from any external code

[netlify]

✅ Deploy Preview for determined-ui ready!

Name	Link
🔨 Latest commit	5d5c258
🔍 Latest deploy log	https://app.netlify.com/sites/determined-ui/deploys/6699740f9f0c9b00082d12f5
😎 Deploy Preview	https://deploy-preview-9676--determined-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[johnkim-det]

can we just use a Link or something in OverviewStats when it has an onClick value? and remove style attribute usage from here and "Resource Allocation"?

[keita-determined]

can we just use a Link or something in OverviewStats when it has an onClick value? and remove style attribute usage from here and "Resource Allocation"?

fixed

[codecov]

Codecov Report

Attention: Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 48.70%. Comparing base (274d763) to head (5d5c258).
Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9676      +/-   ##
==========================================
- Coverage   53.32%   48.70%   -4.63%     
==========================================
  Files        1254      931     -323     
  Lines      152655   123420   -29235     
  Branches     3244     3242       -2     
==========================================
- Hits        81398    60106   -21292     
+ Misses      71105    63162    -7943     
  Partials      152      152              

Flag	Coverage Δ
harness	?
web	51.55% <75.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
webui/react/src/components/OverviewStats.tsx	100.00% <100.00%> (ø)
...ebui/react/src/pages/TrialDetails/TrialInfoBox.tsx	89.16% <50.00%> (+1.81%)	⬆️

... and 323 files with indirect coverage changes

[johnkim-det]

does Link not work?

[keita-determined]

determined/webui/react/src/components/OverviewStats.tsx

Lines 17 to 32 in e956f28

	const OverviewStats: React.FC<Props> = (props: Props) => {
	const column = (
	<Column>
	<Row>
	<Label size={TypographySize.XS} truncate={{ tooltip: true }}>
	{props.title}
	</Label>
	</Row>
	<Row width="fill">
	<Label strong truncate={{ tooltip: true }}>
	{props.children}
	</Label>
	</Row>
	</Column>
	);
	return <Card>{props.onClick ? <Link onClick={props.onClick}>{column}</Link> : column}</Card>;

it works in terms of the appearance, but that might cause nested anchor tag (<a>) which is forbidden.

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

there must be no interactive content descendant

[johnkim-det]

honestly it's kind of weird we have a link for a specific line within a clickable card in the first place, but I'd prefer to use Link, partially because it also has the hover styling.

I think the nested <a> is only happening because the card content is also unnecessarily wrapped in a Link when instead it should be using the Card's onClick (which also adds hover styling to the card itself)

suggestion:

   return (
    <Card onClick={props.onClick}>
      <Column>
        <Row>
          <Label size={TypographySize.XS} truncate={{ tooltip: true }}>
            {props.title}
          </Label>
        </Row>
        <Row width="fill">
          <Label strong truncate={{ tooltip: true }}>
            {props.onClick ? (
              <Link>
                {props.children}
              </Link>
            ) : props.children}
          </Label>
        </Row>
      </Column>
    </Card>
  );

[keita-determined]

fixed it. also unwraped <Link> in card content

[johnkim-det]

I think we should probably still have onClick on Card?

[keita-determined]

imo only blue text should be clickable. otherwise nested anchor issue would happen

[johnkim-det]

if product agrees, sure. my suggestion was to avoid removing functionality.

[keita-determined]

product agreed with only text link (Slack)