Added a link "Raw" to open raw artifact file in a new tab (#6622)

Author: bilalabbad

changelog/6513.added.md

@@ -0,0 +1 @@
+- On artifact details page, added a link "Raw" to open raw artifact file in a new tab.

frontend/app/src/entities/artifacts/ui/artifact-file-button.tsx

@@ -0,0 +1,16 @@
+import { focusVisibleStyle } from "@/shared/components/style-rac";
+import { classNames } from "@/shared/utils/common";
+import { Button as AriaButton, ButtonProps as AriaButtonProps } from "react-aria-components";
+
+export function ArtifactFileButton({ className, ...props }: AriaButtonProps) {
+  return (
+    <AriaButton
+      className={classNames(
+        focusVisibleStyle,
+        "border border-transparent p-1 hover:bg-neutral-600 rounded-lg text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}

frontend/app/src/entities/artifacts/ui/artifact-file-copy.tsx

@@ -1,21 +1,13 @@
-import { focusVisibleStyle } from "@/shared/components/style-rac";
+import { ArtifactFileButton } from "@/entities/artifacts/ui/artifact-file-button";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
-import { classNames } from "@/shared/utils/common";
 import { CopyCheckIcon, CopyIcon } from "lucide-react";
-import { Button } from "react-aria-components";
 
 export function ArtifactFileCopy({ value }: { value: string }) {
   const { isCopied, copyToClipboard } = useCopyToClipboard();
 
   return (
-    <Button
-      onPress={() => copyToClipboard(value)}
-      className={classNames(
-        focusVisibleStyle,
-        "border border-transparent p-1 hover:bg-neutral-600 rounded-lg"
-      )}
-    >
+    <ArtifactFileButton onPress={() => copyToClipboard(value)}>
       {isCopied ? <CopyCheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-    </Button>
+    </ArtifactFileButton>
   );
 }

frontend/app/src/entities/artifacts/ui/artifact-file-download.tsx

@@ -1,19 +1,13 @@
+import { ArtifactFileButton } from "@/entities/artifacts/ui/artifact-file-button";
 import { Download, DownloadProps } from "@/shared/components/download";
-import { focusVisibleStyle } from "@/shared/components/ui/style";
-import { classNames } from "@/shared/utils/common";
 import { DownloadIcon } from "lucide-react";
 
 export const ArtifactFileDownload = ({ className, ...props }: DownloadProps) => {
   return (
-    <Download
-      className={classNames(
-        focusVisibleStyle,
-        "border border-transparent p-1 hover:bg-neutral-600 rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      <DownloadIcon className="size-4" />
+    <Download className="inline-flex" {...props}>
+      <ArtifactFileButton className={className}>
+        <DownloadIcon className="size-4" />
+      </ArtifactFileButton>
     </Download>
   );
 };

frontend/app/src/entities/artifacts/ui/artifact-file.tsx

@@ -1,4 +1,5 @@
 import { ArtifactContentType } from "@/entities/artifacts/types";
+import { ArtifactFileButton } from "@/entities/artifacts/ui/artifact-file-button";
 import { ArtifactFileCopy } from "@/entities/artifacts/ui/artifact-file-copy";
 import { ArtifactFileDownload } from "@/entities/artifacts/ui/artifact-file-download";
 import { fetchStream } from "@/shared/api/rest/fetch";
@@ -44,12 +45,14 @@ function FileLayout({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
 export interface FileHeaderProps extends HTMLAttributes<HTMLDivElement> {
   artifactId: string;
   fileContent: string;
+  fileUrl: string;
   contentType: ArtifactContentType;
 }
 
 function FileHeader({
   artifactId,
   fileContent,
+  fileUrl,
   contentType = "text/plain",
   className,
   ...props
@@ -59,6 +62,9 @@ function FileHeader({
   return (
     <div className={classNames("flex items-center gap-1", className)} {...props}>
       <span className="grow font-medium px-1">{config.label}</span>
+      <a href={fileUrl} target="_blank" rel="noopener noreferrer">
+        <ArtifactFileButton className="leading-4">Raw</ArtifactFileButton>
+      </a>
       <ArtifactFileDownload
         contentType={contentType}
         fileName={`${artifactId}.${config.extension}`}
@@ -143,7 +149,12 @@ export const ArtifactFile = ({ artifactId, url, contentType }: ArtifactFileProps
 
   return (
     <FileLayout>
-      <FileHeader artifactId={artifactId} fileContent={fileContent} contentType={contentType} />
+      <FileHeader
+        artifactId={artifactId}
+        fileUrl={url}
+        fileContent={fileContent}
+        contentType={contentType}
+      />
       <FileContent contentType={contentType} fileContent={fileContent} />
     </FileLayout>
   );