DEVPROD-1969 Refactor BuildBaronTable and remove antd table dependency (

evergreen-ci#2163)

src/analytics/task/useAnnotationAnalytics.ts

@@ -1,6 +1,5 @@
 import { useQuery } from "@apollo/client";
-import get from "lodash/get";
-import { useParams, useLocation } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
 import {
   BuildBaronQuery,
@@ -9,10 +8,9 @@ import {
   AnnotationEventDataQueryVariables,
 } from "gql/generated/types";
 import { ANNOTATION_EVENT_DATA, BUILD_BARON } from "gql/queries";
+import { useQueryParam } from "hooks/useQueryParam";
 import { RequiredQueryParams } from "types/task";
-import { queryString } from "utils";
 
-const { parseQueryString } = queryString;
 type Action =
   | { name: "Click Jira Summary Link" }
   | { name: "Build Baron File Ticket" }
@@ -29,10 +27,8 @@ type Action =
 
 export const useAnnotationAnalytics = () => {
   const { id } = useParams<{ id: string }>();
+  const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
 
-  const location = useLocation();
-  const parsed = parseQueryString(location.search);
-  const execution = Number(parsed[RequiredQueryParams.Execution]);
   const { data: eventData } = useQuery<
     AnnotationEventDataQuery,
     AnnotationEventDataQueryVariables
@@ -49,16 +45,12 @@ export const useAnnotationAnalytics = () => {
     }
   );
 
-  const annotation = get(eventData, "task.annotation", undefined);
-  const bbConfigured = get(
-    bbData,
-    "buildBaron.buildBaronConfigured",
-    undefined
-  );
+  const { annotation } = eventData?.task || {};
+  const { buildBaronConfigured } = bbData?.buildBaron || {};
 
   return useAnalyticsRoot<Action>("Annotations", {
     taskId: id,
     annotation,
-    bbConfigured,
+    bbConfigured: buildBaronConfigured,
   });
 };

src/gql/mocks/getSpruceConfig.ts

@@ -1,6 +1,8 @@
 import {
   SpruceConfigQuery,
   SpruceConfigQueryVariables,
+  UserSettingsQuery,
+  UserSettingsQueryVariables,
 } from "gql/generated/types";
 import { SPRUCE_CONFIG } from "gql/queries";
 import { ApolloMock } from "types/gql";
@@ -38,7 +40,11 @@ export const getSpruceConfigMock: ApolloMock<
             location: "/path/to/key",
           },
         ],
-        jira: { host: "jira.mongodb.org", __typename: "JiraConfig" },
+        jira: {
+          host: "jira.mongodb.org",
+          __typename: "JiraConfig",
+          email: "[email protected]",
+        },
         providers: {
           aws: {
             maxVolumeSizePerUser: 1500,
@@ -61,3 +67,43 @@ export const getSpruceConfigMock: ApolloMock<
     },
   },
 };
+
+export const getUserSettingsMock: ApolloMock<
+  UserSettingsQuery,
+  UserSettingsQueryVariables
+> = {
+  request: {
+    query: SPRUCE_CONFIG,
+    variables: null,
+  },
+  result: {
+    data: {
+      userSettings: {
+        __typename: "UserSettings",
+        dateFormat: "MM/DD/YYYY",
+        githubUser: {
+          lastKnownAs: "user",
+          __typename: "GithubUser",
+        },
+        notifications: {
+          __typename: "Notifications",
+          buildBreak: "",
+          patchFinish: "",
+          patchFirstFailure: "",
+          spawnHostExpiration: "",
+          spawnHostOutcome: "",
+        },
+        region: "us-east-1",
+        slackMemberId: "1234",
+        slackUsername: "user",
+        timezone: "America/New_York",
+        useSpruceOptions: {
+          __typename: "UseSpruceOptions",
+          hasUsedMainlineCommitsBefore: true,
+          spruceV1: true,
+          hasUsedSpruceBefore: true,
+        },
+      },
+    },
+  },
+};

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

@@ -5,7 +5,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { Metadata } from "./index";
 
 export default {
-  title: "Pages/Task/Metadata",
   component: Metadata,
 } satisfies CustomMeta<typeof Metadata>;
 

src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx

@@ -3,7 +3,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { ExecutionTasksTable } from "./ExecutionTasksTable";
 
 export default {
-  title: "Pages/Task/Table/Execution Tasks Table",
   component: ExecutionTasksTable,
 } satisfies CustomMeta<typeof ExecutionTasksTable>;
 

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

@@ -13,7 +13,6 @@ const files = [
 ];
 
 export default {
-  title: "Pages/Task/table/GroupedFileTable",
   component: GroupedFileTable,
 } satisfies CustomMeta<typeof GroupedFileTable>;
 

src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx

@@ -12,7 +12,7 @@ import {
 } from "gql/generated/types";
 import { EDIT_ANNOTATION_NOTE } from "gql/mutations";
 import { useDateFormat } from "hooks";
-import { ButtonWrapper, NonTableWrapper } from "./BBComponents";
+import { ButtonWrapper } from "./BBComponents";
 
 interface Props {
   note: Note;
@@ -63,7 +63,7 @@ const AnnotationNote: React.FC<Props> = ({
   };
 
   return (
-    <NonTableWrapper>
+    <>
       <TextArea
         aria-labelledby="annotation-note-input"
         rows={4}
@@ -97,7 +97,7 @@ const AnnotationNote: React.FC<Props> = ({
       >
         You are not authorized to edit failure details
       </Tooltip>
-    </NonTableWrapper>
+    </>
   );
 };
 

src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx

@@ -2,7 +2,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { AnnotationTicketRow } from "./AnnotationTicketRow";
 
 export default {
-  title: "Pages/Task/BuildBaron/AnnotationTicketRow",
   component: AnnotationTicketRow,
 } satisfies CustomMeta<typeof AnnotationTicketRow>;
 

src/pages/task/taskTabs/buildBaronAndAnnotations/BBComponents.tsx

@@ -1,60 +1,6 @@
 import styled from "@emotion/styled";
-import Badge from "@leafygreen-ui/badge";
-import { Disclaimer, Subtitle, SubtitleProps } from "@leafygreen-ui/typography";
-import { useAnnotationAnalytics } from "analytics";
-import { StyledLink } from "components/styles";
-import { getJiraTicketUrl } from "constants/externalResources";
+import { Subtitle, SubtitleProps } from "@leafygreen-ui/typography";
 import { size } from "constants/tokens";
-import { TicketFields } from "gql/generated/types";
-import { useSpruceConfig, useDateFormat } from "hooks";
-
-interface JiraTicketRowProps {
-  jiraKey: string;
-  fields: TicketFields;
-}
-export const JiraTicketRow: React.FC<JiraTicketRowProps> = ({
-  fields,
-  jiraKey,
-}) => {
-  const annotationAnalytics = useAnnotationAnalytics();
-  const getDateCopy = useDateFormat();
-  const spruceConfig = useSpruceConfig();
-  const jiraHost = spruceConfig?.jira?.host;
-  const url = getJiraTicketUrl(jiraHost, jiraKey);
-  const { assigneeDisplayName, created, status, summary, updated } =
-    fields ?? {};
-  return (
-    <div>
-      <JiraSummaryLink
-        href={url}
-        data-cy={jiraKey}
-        onClick={() =>
-          annotationAnalytics.sendEvent({ name: "Click Jira Summary Link" })
-        }
-      >
-        {jiraKey}: {summary} {"   "}
-      </JiraSummaryLink>
-
-      <Badge data-cy={`${jiraKey}-badge`} variant="lightgray">
-        {status.name}
-      </Badge>
-
-      <BottomMetaDataWrapper data-cy={`${jiraKey}-metadata`}>
-        <Disclaimer>
-          Created: {getDateCopy(created, { dateOnly: true })}{" "}
-        </Disclaimer>
-        <Disclaimer>
-          Updated: {getDateCopy(updated, { dateOnly: true })}{" "}
-        </Disclaimer>
-        <Disclaimer>
-          {assigneeDisplayName
-            ? `Assignee: ${assigneeDisplayName}`
-            : "Unassigned"}{" "}
-        </Disclaimer>
-      </BottomMetaDataWrapper>
-    </div>
-  );
-};
 
 export const TicketsTitle = styled(Subtitle)<
   SubtitleProps & { margin?: boolean }
@@ -65,35 +11,6 @@ export const TicketsTitle = styled(Subtitle)<
   font-weight: bold;
 `;
 
-const JiraSummaryLink = styled(StyledLink)`
-  font-weight: bold;
-  margin-right: ${size.s};
-`;
-
-export const BottomMetaDataWrapper = styled.div`
-  margin-top: ${size.xs};
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  gap: ${size.xs};
-  grid-template-rows: 1fr;
-  grid-row-gap: 0px;
-  width: 80%;
-`;
-
-export const TopMetaDataWrapper = styled.div`
-  margin-bottom: ${size.xs};
-  display: grid;
-  grid-template-columns: 1fr 4fr;
-  gap: ${size.xs};
-  grid-template-rows: 1fr;
-  grid-row-gap: 0px;
-  width: 80%;
-`;
-
-export const NonTableWrapper = styled.div`
-  margin-left: ${size.s};
-`;
-
 export const ButtonWrapper = styled.div`
   margin-right: ${size.xs};
   padding-top: ${size.s};