EVG-20807 Expose Parsley link for task files. (#2111)

src/analytics/task/useTaskAnalytics.ts

@@ -64,6 +64,10 @@ type Action =
       parsleyAvailable: boolean;
       fileName: string;
     }
+  | {
+      name: "Click Task File Parsley Link";
+      fileName: string;
+    }
   | { name: "Click Trace Link" }
   | { name: "Click Trace Metrics Link" }
   | { name: "Submit Previous Commit Selector"; type: CommitType };
@@ -80,6 +84,7 @@ export const useTaskAnalytics = () => {
   const {
     failedTestCount,
     latestExecution,
+    project: { identifier } = { identifier: null },
     status: taskStatus,
   } = eventData?.task || {};
   const isLatestExecution = latestExecution === execution;
@@ -90,5 +95,6 @@ export const useTaskAnalytics = () => {
     isLatestExecution: isLatestExecution.toString(),
     taskId: id,
     failedTestCount,
+    projectIdentifier: identifier,
   });
 };

src/gql/generated/types.ts

@@ -8132,6 +8132,7 @@ export type TaskFilesQuery = {
           __typename?: "File";
           link: string;
           name: string;
+          urlParsley?: string | null;
         }> | null;
       }>;
     };

src/gql/queries/task-files.graphql

@@ -7,6 +7,7 @@ query TaskFiles($taskId: String!, $execution: Int) {
         files {
           link
           name
+          urlParsley
         }
         taskName
       }

src/pages/task/metadata/Metadata.test.tsx

@@ -3,7 +3,7 @@ import { addMilliseconds } from "date-fns";
 import { getUserMock } from "gql/mocks/getUser";
 import { taskQuery } from "gql/mocks/taskData";
 import { renderWithRouterMatch as render, screen, userEvent } from "test_utils";
-import { Metadata } from "./index";
+import { Metadata } from ".";
 
 const wrapper = ({ children }) => (
   <MockedProvider mocks={[getUserMock]}>{children}</MockedProvider>

src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx

@@ -1,6 +1,8 @@
 import { useMemo, useRef } from "react";
 import styled from "@emotion/styled";
+import Button from "@leafygreen-ui/button";
 import { useLeafyGreenTable, LGColumnDef } from "@leafygreen-ui/table/new";
+import Tooltip from "@leafygreen-ui/tooltip";
 import { Subtitle } from "@leafygreen-ui/typography";
 import { useTaskAnalytics } from "analytics";
 import { StyledLink } from "components/styles";
@@ -17,24 +19,53 @@ const columns = (
   {
     accessorKey: "name",
     header: "Name",
-    size: 60,
+    size: 100,
     enableSorting: true,
-    cell: (value) => (
-      <StyledLink
-        href={value.row.original.link}
-        data-cy="file-link"
-        target="_blank"
-        onClick={() => {
-          taskAnalytics.sendEvent({
-            name: "Click Task File Link",
-            parsleyAvailable: false,
-            fileName: value.getValue() as GroupedFilesFile["name"],
-          });
-        }}
-      >
-        {value.getValue()}
-      </StyledLink>
-    ),
+    cell: (value) => {
+      const fileName = value.getValue() as GroupedFilesFile["name"];
+      return (
+        <CellContainer>
+          <StyledLink
+            href={value.row.original.link}
+            data-cy="file-link"
+            target="_blank"
+            onClick={() => {
+              taskAnalytics.sendEvent({
+                name: "Click Task File Link",
+                parsleyAvailable: value.row.original.urlParsley !== null,
+                fileName,
+              });
+            }}
+          >
+            {fileName}
+          </StyledLink>
+          <Tooltip
+            trigger={
+              <Button
+                href={value.row.original.urlParsley}
+                data-cy="parsley-link"
+                target="_blank"
+                disabled={value.row.original.urlParsley === null}
+                size="small"
+                onClick={() => {
+                  taskAnalytics.sendEvent({
+                    name: "Click Task File Parsley Link",
+                    fileName,
+                  });
+                }}
+              >
+                Parsley
+              </Button>
+            }
+            enabled={value.row.original.urlParsley === null}
+            align="top"
+            justify="middle"
+          >
+            Only plain text files can be opened in Parsley.
+          </Tooltip>
+        </CellContainer>
+      );
+    },
   },
 ];
 
@@ -70,4 +101,11 @@ const GroupedFileTable: React.FC<GroupedFileTableProps> = ({
 const Container = styled.div`
   margin-bottom: ${size.m};
 `;
+
+const CellContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
 export default GroupedFileTable;