diff --git a/frontend/pages/labels/components/LabelForm/LabelForm.tests.tsx b/frontend/pages/labels/components/LabelForm/LabelForm.tests.tsx
index 9bc0c2fcbb..63d03b352d 100644
--- a/frontend/pages/labels/components/LabelForm/LabelForm.tests.tsx
+++ b/frontend/pages/labels/components/LabelForm/LabelForm.tests.tsx
@@ -66,4 +66,77 @@ describe("LabelForm", () => {
true
);
});
+
+ it("should not render immutable help text when no immutable fields are provided (ManualLabelForm without team)", () => {
+ render(
+
+ );
+
+ // Help text container should not be in the document
+ expect(
+ screen.queryByText(
+ /are immutable\. To make changes, delete this label and create a new one\./
+ )
+ ).not.toBeInTheDocument();
+ });
+
+ it("should render correct immutable help text for a single field (ManualLabelForm with team)", () => {
+ render(
+
+ );
+
+ expect(
+ screen.getByText(
+ "Label teams are immutable. To make changes, delete this label and create a new one."
+ )
+ ).toBeInTheDocument();
+ });
+
+ it("should render correct immutable help text for two fields (DynamicLabelForm without team)", () => {
+ const immutableFields = ["queries", "platforms"];
+
+ render(
+
+ );
+
+ expect(
+ screen.getByText(
+ "Label queries and platforms are immutable. To make changes, delete this label and create a new one."
+ )
+ ).toBeInTheDocument();
+
+ expect(immutableFields.length).toBe(2);
+ });
+
+ it("should render correct immutable help text for three fields (DynamicLabelForm with team)", () => {
+ render(
+
+ );
+
+ expect(
+ screen.getByText(
+ "Label teams, queries, and platforms are immutable. To make changes, delete this label and create a new one."
+ )
+ ).toBeInTheDocument();
+ });
});
diff --git a/frontend/pages/labels/components/LabelForm/LabelForm.tsx b/frontend/pages/labels/components/LabelForm/LabelForm.tsx
index 044c8c74b7..c0dd1bfcc2 100644
--- a/frontend/pages/labels/components/LabelForm/LabelForm.tsx
+++ b/frontend/pages/labels/components/LabelForm/LabelForm.tsx
@@ -33,11 +33,19 @@ const generateDescriptionHelpText = (immutableFields: string[]) => {
const SUFFIX =
"are immutable. To make changes, delete this label and create a new one.";
- return immutableFields.length === 1
- ? `Label ${immutableFields[0]} ${SUFFIX}`
- : `Label ${immutableFields
- .slice(0, -1)
- .join(", ")} and ${immutableFields.pop()} ${SUFFIX}`;
+ if (immutableFields.length === 1) {
+ return `Label ${immutableFields[0]} ${SUFFIX}`;
+ }
+
+ if (immutableFields.length === 2) {
+ // No comma for two items: "queries and platforms"
+ return `Label ${immutableFields[0]} and ${immutableFields[1]} ${SUFFIX}`;
+ }
+
+ // 3+ items: Oxford comma before "and"
+ const allButLast = immutableFields.slice(0, -1).join(", ");
+ const last = immutableFields.slice(-1);
+ return `Label ${allButLast}, and ${last} ${SUFFIX}`;
};
const LabelForm = ({