refactor: migrate to text inputs to primer

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/routes/LoginWithOAuthApp.test.tsx

@@ -73,11 +73,9 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
       clientSecret: '!@£INVALID-.1' as ClientSecret,
     };
     expect(validateForm(values).hostname).toBe('Hostname format is invalid');
-    expect(validateForm(values).clientId).toBe(
-      'Client ID format is invalid (must be 20 characters long)',
-    );
+    expect(validateForm(values).clientId).toBe('Client ID format is invalid');
     expect(validateForm(values).clientSecret).toBe(
-      'Client Secret format is invalid (must be 40 characters long)',
+      'Client Secret format is invalid',
     );
   });
 
@@ -173,17 +171,10 @@ describe('renderer/routes/LoginWithOAuthApp.tsx', () => {
 
     fireEvent.click(screen.getByTestId('login-submit'));
 
+    expect(screen.getByTestId('login-errors')).toBeTruthy();
     expect(screen.getByText('Hostname format is invalid')).toBeTruthy();
-    expect(
-      screen.getByText(
-        'Client ID format is invalid (must be 20 characters long)',
-      ),
-    ).toBeTruthy();
-    expect(
-      screen.getByText(
-        'Client Secret format is invalid (must be 40 characters long)',
-      ),
-    ).toBeTruthy();
+    expect(screen.getByText('Client ID format is invalid')).toBeTruthy();
+    expect(screen.getByText('Client Secret format is invalid')).toBeTruthy();
   });
 
   it('should open help docs in the browser', async () => {

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -60,15 +60,13 @@ export const validateForm = (values: IFormData): IFormErrors => {
   if (!values.clientId) {
     errors.clientId = 'Client ID is required';
   } else if (!isValidClientId(values.clientId)) {
-    errors.clientId =
-      'Client ID format is invalid (must be 20 characters long)';
+    errors.clientId = 'Client ID format is invalid';
   }
 
   if (!values.clientSecret) {
     errors.clientSecret = 'Client Secret is required';
   } else if (!isValidToken(values.clientSecret as unknown as Token)) {
-    errors.clientSecret =
-      'Client Secret format is invalid (must be 40 characters long)';
+    errors.clientSecret = 'Client Secret format is invalid';
   }
 
   return errors;
@@ -148,6 +146,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
                 </Stack>
               </Text>
             }
+            data-testid="login-errors"
           />
         )}
         <Stack direction="vertical" gap="normal">

src/renderer/routes/LoginWithPersonalAccessToken.test.tsx

@@ -63,9 +63,7 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
       token: '!@£INVALID-.1',
     };
     expect(validateForm(values).hostname).toBe('Hostname format is invalid');
-    expect(validateForm(values).token).toBe(
-      'Token format is invalid (must be 40 characters long)',
-    );
+    expect(validateForm(values).token).toBe('Token format is invalid');
   });
 
   describe("'Generate a PAT' button", () => {
@@ -192,10 +190,9 @@ describe('renderer/routes/LoginWithPersonalAccessToken.tsx', () => {
 
     fireEvent.click(screen.getByTestId('login-submit'));
 
-    expect(screen.getByText('Hostname format is invalid')).toBeDefined();
-    expect(
-      screen.getByText('Token format is invalid (must be 40 characters long)'),
-    ).toBeDefined();
+    expect(screen.getByTestId('login-errors')).toBeTruthy();
+    expect(screen.getByText('Hostname format is invalid')).toBeTruthy();
+    expect(screen.getByText('Token format is invalid')).toBeTruthy();
   });
 
   it('should open help docs in the browser', async () => {

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -58,7 +58,7 @@ export const validateForm = (values: IFormData): IFormErrors => {
   if (!values.token) {
     errors.token = 'Token is required';
   } else if (!isValidToken(values.token)) {
-    errors.token = 'Token format is invalid (must be 40 characters long)';
+    errors.token = 'Token format is invalid';
   }
 
   return errors;
@@ -142,6 +142,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
                 </Stack>
               </Text>
             }
+            data-testid="login-errors"
           />
         )}
         <Stack direction="vertical" gap="normal">