fix(ui): rename error text token to text-text-error-primary (#10285)

Author: alejandrobailo

ui/components/providers/radio-group-provider.tsx

@@ -176,7 +176,7 @@ export const RadioGroupProvider: FC<RadioGroupProviderProps> = ({
           </div>
 
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/providers/workflow/forms/fields/wizard-input-field.tsx

@@ -163,7 +163,7 @@ export const WizardInputField = <T extends FieldValues>({
                 )}
               </div>
             </FormControl>
-            <FormMessage className="text-text-error max-w-full text-xs" />
+            <FormMessage className="text-text-error-primary max-w-full text-xs" />
           </div>
         );
       }}

ui/components/providers/workflow/forms/fields/wizard-textarea-field.tsx

@@ -87,7 +87,7 @@ export const WizardTextareaField = <T extends FieldValues>({
                 {description}
               </p>
             )}
-            <FormMessage className="text-text-error max-w-full text-xs" />
+            <FormMessage className="text-text-error-primary max-w-full text-xs" />
           </div>
         );
       }}

ui/components/providers/workflow/forms/select-credentials-type/alibabacloud/radio-group-alibabacloud-via-credentials-type-form.tsx

@@ -50,7 +50,7 @@ export const RadioGroupAlibabaCloudViaCredentialsTypeForm = <
               </WizardRadioCard>
             </RadioGroup>
             {errorMessage && (
-              <FormMessage className="text-text-error">
+              <FormMessage className="text-text-error-primary">
                 {errorMessage}
               </FormMessage>
             )}

ui/components/providers/workflow/forms/select-credentials-type/aws/radio-group-aws-via-credentials-type-form.tsx

@@ -43,7 +43,7 @@ export const RadioGroupAWSViaCredentialsTypeForm = ({
             </WizardRadioCard>
           </RadioGroup>
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/providers/workflow/forms/select-credentials-type/cloudflare/radio-group-cloudflare-via-credentials-type-form.tsx

@@ -44,7 +44,7 @@ export const RadioGroupCloudflareViaCredentialsTypeForm = ({
             </WizardRadioCard>
           </RadioGroup>
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/providers/workflow/forms/select-credentials-type/gcp/radio-group-gcp-via-credentials-type-form.tsx

@@ -47,7 +47,7 @@ export const RadioGroupGCPViaCredentialsTypeForm = ({
             </WizardRadioCard>
           </RadioGroup>
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/providers/workflow/forms/select-credentials-type/github/radio-group-github-via-credentials-type-form.tsx

@@ -54,7 +54,7 @@ export const RadioGroupGitHubViaCredentialsTypeForm = ({
             </WizardRadioCard>
           </RadioGroup>
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/providers/workflow/forms/select-credentials-type/m365/radio-group-m365-via-credentials-type-form.tsx

@@ -44,7 +44,7 @@ export const RadioGroupM365ViaCredentialsTypeForm = ({
             </WizardRadioCard>
           </RadioGroup>
           {errorMessage && (
-            <FormMessage className="text-text-error">
+            <FormMessage className="text-text-error-primary">
               {errorMessage}
             </FormMessage>
           )}

ui/components/ui/form/Form.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { describe, expect, it } from "vitest";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "./Form";
+
+interface TestValues {
+  providerUid: string;
+}
+
+function TestFormWithError() {
+  const form = useForm<TestValues>({
+    defaultValues: {
+      providerUid: "",
+    },
+  });
+
+  useEffect(() => {
+    form.setError("providerUid", {
+      type: "manual",
+      message: "Provider ID is required",
+    });
+  }, [form]);
+
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="providerUid"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Provider UID</FormLabel>
+            <FormControl>
+              <input {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+}
+
+describe("Form", () => {
+  it("should use the existing error text token for labels and messages", async () => {
+    // Given
+    render(<TestFormWithError />);
+
+    // When
+    const label = await screen.findByText("Provider UID");
+    const message = await screen.findByText("Provider ID is required");
+
+    // Then
+    expect(label).toHaveClass("text-text-error-primary");
+    expect(message).toHaveClass("text-text-error-primary");
+  });
+});