LegacyDataTag

LegacyDataTag

LegacyDataTag renders a purple Carbon Design System tag that indicates a record originated in the legacy system. Clicking it opens the corresponding legacy URL in a new tab.

Rationale

Use LegacyDataTag when displaying records that have not yet been migrated to the new system. It provides a consistent visual signal and deep-links back to the source record in the legacy application, helping users identify provenance without ambiguity.

Source References

• Source: frontend/src/components/core/Tags/LegacyDataTag/index.tsx
• Tests: frontend/src/components/core/Tags/LegacyDataTag/index.unit.test.tsx

Public Interface

Props

Name	Type	Required	Default	Description
url	string	Yes	—	Relative path appended to VITE_LEGACY_BASE_URL to form the full link URL.
label	string	No	'Legacy data'	Override text for the tag label.

Behavior

• Concatenates env.VITE_LEGACY_BASE_URL with url to produce the final href.
• Always opens in a new tab (target="_blank") with rel="noopener noreferrer".
• Wraps the tag in a Carbon Tooltip with a fixed description: "This data originates from a legacy system. Click to view the source record."
• Tooltip aligns to the bottom.
• Tag uses Carbon type="purple" and renders a Box icon.

Examples

Happy path: link to a known reporting unit in the legacy system

import LegacyDataTag from '@/components/core/Tags/LegacyDataTag';

<LegacyDataTag url="/waste101ReportUnitDetailsAction.do?dataBean.p_reporting_unit_id=12345" />

Edge case: custom label for a different record type

<LegacyDataTag
  url="/legacyClientRecord.do?id=9876"
  label="Legacy client"
/>

Known Constraints

• url must be a path-only or query-only string relative to VITE_LEGACY_BASE_URL; the component performs no validation or encoding.
• The legacy base URL is resolved from env.VITE_LEGACY_BASE_URL at render time; the component does not support per-instance base URL overrides.
• The tooltip label is hardcoded and cannot be customized via props.

Security Notes

• Uses rel="noopener noreferrer" to prevent tab-napping for all new-tab links.

Change Impact

• codes/frontend/Components.md — catalog entry for core tags section.
• codes/frontend/core/Tags/TagWrapper.md — TagWrapper is used alongside LegacyDataTag in ReportingUnitDetailsPage to position this tag next to the page title.
• pages/ReportingUnitDetails — primary consumer of this component.

See Also

• TagWrapper
• UnderConstructionTag
• Components