mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
66045dbb26
For #25201. <img width="435" alt="image" src="https://github.com/user-attachments/assets/c499902b-d461-4621-b2fc-7cb845ce71c4" /> # Checklist for submitter If some of the following don't apply, delete the relevant line. <!-- Note that API documentation changes are now addressed by the product design team. --> - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files) for more information. - [x] Input data is properly validated, `SELECT *` is avoided, SQL injection is prevented (using placeholders for values in statements) - [x] Added/updated automated tests - [x] A detailed QA plan exists on the associated ticket (if it isn't there, work with the product group's QA engineer to add it) - [x] Manual QA for all new/changed functionality
82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import React from "react";
|
|
|
|
import Icon from "components/Icon";
|
|
import classnames from "classnames";
|
|
import { Colors } from "styles/var/colors";
|
|
|
|
interface ICustomLinkProps {
|
|
url: string;
|
|
text: string;
|
|
className?: string;
|
|
newTab?: boolean;
|
|
/** Icon wraps on new line with last word */
|
|
multiline?: boolean;
|
|
iconColor?: Colors;
|
|
color?: "core-fleet-blue" | "core-fleet-black" | "core-fleet-white";
|
|
/** Restricts access via keyboard when CustomLink is part of disabled UI */
|
|
disableKeyboardNavigation?: boolean;
|
|
}
|
|
|
|
const baseClass = "custom-link";
|
|
|
|
const CustomLink = ({
|
|
url,
|
|
text,
|
|
className,
|
|
newTab = false,
|
|
multiline = false,
|
|
iconColor = "core-fleet-blue",
|
|
color = "core-fleet-blue",
|
|
disableKeyboardNavigation = false,
|
|
}: ICustomLinkProps): JSX.Element => {
|
|
const customLinkClass = classnames(baseClass, className, {
|
|
[`${baseClass}--black`]: color === "core-fleet-black",
|
|
[`${baseClass}--white`]: color === "core-fleet-white",
|
|
});
|
|
|
|
const target = newTab ? "_blank" : "";
|
|
|
|
const multilineText = text.substring(0, text.lastIndexOf(" ") + 1);
|
|
const lastWord = text.substring(text.lastIndexOf(" ") + 1, text.length);
|
|
|
|
const content = multiline ? (
|
|
<>
|
|
{multilineText}
|
|
<span className={`${baseClass}__no-wrap`}>
|
|
{lastWord}
|
|
{newTab && (
|
|
<Icon
|
|
name="external-link"
|
|
className={`${baseClass}__external-icon`}
|
|
color={iconColor}
|
|
/>
|
|
)}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
{text}
|
|
{newTab && (
|
|
<Icon
|
|
name="external-link"
|
|
className={`${baseClass}__external-icon`}
|
|
color={iconColor}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<a
|
|
href={url}
|
|
target={target}
|
|
rel="noopener noreferrer"
|
|
className={customLinkClass}
|
|
tabIndex={disableKeyboardNavigation ? -1 : 0}
|
|
>
|
|
{content}
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default CustomLink;
|