From efde83bed4b7b391aded5f10f4ac2e9c8a1a3164 Mon Sep 17 00:00:00 2001
From: Zackary Santana <64446617+ZackarySantana@users.noreply.github.com>
Date: Thu, 21 Mar 2024 09:36:45 -0400
Subject: [PATCH] fix: wrap stepback in metadata item

---
 src/components/MetadataCard.tsx      |  9 ++++++++-
 src/pages/task/metadata/Stepback.tsx | 25 +++++++++++++++----------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/MetadataCard.tsx b/src/components/MetadataCard.tsx
index c6bbc9031c..81ba02ffb9 100644
--- a/src/components/MetadataCard.tsx
+++ b/src/components/MetadataCard.tsx
@@ -1,5 +1,6 @@
 import { ApolloError } from "@apollo/client";
 import styled from "@emotion/styled";
+import { PolymorphicAs } from "@leafygreen-ui/polymorphic";
 import { Body, BodyProps } from "@leafygreen-ui/typography";
 import { Skeleton } from "antd";
 import { ErrorWrapper } from "components/ErrorWrapper";
@@ -39,14 +40,20 @@ export const MetadataTitle: React.FC<{ children: React.ReactNode }> = ({
 );
 
 interface ItemProps {
+  as?: PolymorphicAs;
   children: React.ReactNode;
   "data-cy"?: string;
 }
 
 export const MetadataItem: React.FC<ItemProps> = ({
+  as = "p",
   children,
   "data-cy": dataCy,
-}) => <Item data-cy={dataCy}>{children}</Item>;
+}) => (
+  <Item data-cy={dataCy} as={as}>
+    {children}
+  </Item>
+);
 
 const Title = styled(Body)<BodyProps>`
   font-size: 15px;
diff --git a/src/pages/task/metadata/Stepback.tsx b/src/pages/task/metadata/Stepback.tsx
index fac0cc0e22..3d8554a0ce 100644
--- a/src/pages/task/metadata/Stepback.tsx
+++ b/src/pages/task/metadata/Stepback.tsx
@@ -3,6 +3,7 @@ import Badge from "@leafygreen-ui/badge";
 import { InfoSprinkle } from "@leafygreen-ui/info-sprinkle";
 import { Skeleton } from "@leafygreen-ui/skeleton-loader";
 import { BaseFontSize } from "@leafygreen-ui/tokens";
+import { MetadataItem } from "components/MetadataCard";
 import { size } from "constants/tokens";
 import { TaskQuery } from "gql/generated/types";
 import { useBreakingTask } from "hooks/useBreakingTask";
@@ -44,16 +45,20 @@ export const Stepback: React.FC<Props> = ({ taskId }) => {
   const finished = breakingTask !== undefined || isBreakingTask;
 
   return (
-    <StepbackWrapper>
-      Stepback:
-      <InfoSprinkle baseFontSize={BaseFontSize.Body1}>
-        When Stepback is completed you can access the breaking commit via the
-        relevant commits dropdown.
-      </InfoSprinkle>
-      {loading && <Skeleton size="small" />}
-      {!loading && !finished && <Badge variant="lightgray">In progress</Badge>}
-      {!loading && finished && <Badge variant="green">Complete</Badge>}
-    </StepbackWrapper>
+    <MetadataItem as="div">
+      <StepbackWrapper>
+        Stepback:
+        <InfoSprinkle baseFontSize={BaseFontSize.Body1}>
+          When Stepback is completed you can access the breaking commit via the
+          relevant commits dropdown.
+        </InfoSprinkle>
+        {loading && <Skeleton size="small" />}
+        {!loading && !finished && (
+          <Badge variant="lightgray">In progress</Badge>
+        )}
+        {!loading && finished && <Badge variant="green">Complete</Badge>}
+      </StepbackWrapper>
+    </MetadataItem>
   );
 };