Merge pull request #5502 from mozilla/mntor-3925

Add feature flag to conditionally show data broker removal attempts

Author: flozia

src/app/components/client/exposure_card/ExposureCard.stories.tsx

@@ -87,7 +87,10 @@ export const DataBrokerRequestedRemoval: Story = {
   args: {
     exposureImg: FamilyTreeImage,
     exposureData: ScanMockItemRequestedRemoval,
-    enabledFeatureFlags: ["AdditionalRemovalStatuses"],
+    enabledFeatureFlags: [
+      "AdditionalRemovalStatuses",
+      "DataBrokerRemovalAttempts",
+    ],
   },
 };
 

src/app/components/client/exposure_card/ExposureCard.test.tsx

@@ -150,7 +150,7 @@ describe("ScanResultCard", () => {
     expect(innerDescription).toBeInTheDocument();
   });
 
-  it("shows an additional note for “requested removal” status label", () => {
+  it("shows an additional note for “requested removal” status label if the feature flag `DataBrokerRemovalAttempts` is enabled", () => {
     const ComposedProgressCard = composeStory(DataBrokerRequestedRemoval, Meta);
     render(<ComposedProgressCard />);
     const statusLabel = screen.getByText("Requested removal");
@@ -162,6 +162,22 @@ describe("ScanResultCard", () => {
     expect(labelNote).toBeInTheDocument();
   });
 
+  it("does not show an additional note for “requested removal” status label if the feature flag `DataBrokerRemovalAttempts` is not enabled", () => {
+    const ComposedProgressCard = composeStory(DataBrokerRequestedRemoval, Meta);
+    render(
+      <ComposedProgressCard
+        enabledFeatureFlags={["AdditionalRemovalStatuses"]}
+      />,
+    );
+    const statusLabel = screen.getByText("Requested removal");
+    const statusLabelParent = statusLabel.parentElement as HTMLElement;
+    const labelNote = within(statusLabelParent).queryByText("Attempt", {
+      exact: false,
+    });
+
+    expect(labelNote).not.toBeInTheDocument();
+  });
+
   it("hides the dt element if its dd counterpart has hideonmobile", () => {
     const ComposedProgressCard = composeStory(DataBrokerInProgress, Meta);
     render(<ComposedProgressCard />);

src/app/components/client/exposure_card/ScanResultCard.tsx

@@ -217,6 +217,7 @@ export const ScanResultCard = (props: ScanResultCardProps) => {
   const attemptCount = scanResult.optout_attempts ?? 0;
   const statusPillNote =
     props.enabledFeatureFlags?.includes("AdditionalRemovalStatuses") &&
+    props.enabledFeatureFlags?.includes("DataBrokerRemovalAttempts") &&
     !scanResult.manually_resolved &&
     scanResult.status === "waiting_for_verification" &&
     attemptCount >= 1

src/db/tables/featureFlags.ts

@@ -57,6 +57,7 @@ export const featureFlagNames = [
   "LandingPageRedesign",
   "EnableRemovalUnderMaintenanceStep",
   "CirrusV2",
+  "DataBrokerRemovalAttempts",
 ] as const;
 export type FeatureFlagName = (typeof featureFlagNames)[number];