refactor: convert masquerade UI widgets to TypeScript

src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Input } from '@openedx/paragon';
+
+import { MasqueradeStatus, Payload } from './data/api';
+import messages from './messages';
+
+interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSubmit' | 'onError'> {
+  onError: (error: string) => void;
+  onSubmit: (payload: Payload) => Promise<MasqueradeStatus>;
+}
+
+export const MasqueradeUserNameInput: React.FC<Props> = ({ onSubmit, onError, ...otherProps }) => {
+  const intl = useIntl();
+
+  const handleSubmit = React.useCallback((userIdentifier: string) => {
+    const payload: Payload = {
+      role: 'student',
+      user_name: userIdentifier, // user name or email
+    };
+    onSubmit(payload).then((data) => {
+      if (data && data.success) {
+        global.location.reload();
+      } else {
+        const error = (data && data.error) || '';
+        onError(error);
+      }
+    }).catch(() => {
+      const message = intl.formatMessage(messages.genericError);
+      onError(message);
+    });
+    return true;
+  }, [onError]);
+
+  const handleKeyPress = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      return handleSubmit(event.currentTarget.value);
+    }
+    return true;
+  }, [handleSubmit]);
+
+  return (
+    <Input
+      aria-labelledby="masquerade-search-label"
+      label={intl.formatMessage(messages.userNameLabel)}
+      onKeyPress={handleKeyPress}
+      type="text"
+      {...otherProps}
+    />
+  );
+};

src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.jsx → src/instructor-toolbar/masquerade-widget/MasqueradeWidget.test.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { getAllByRole } from '@testing-library/dom';
 import { act } from '@testing-library/react';
 import { getConfig } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MasqueradeWidget from './MasqueradeWidget';
+import { MasqueradeWidget } from './MasqueradeWidget';
 import {
   render, screen, fireEvent, initializeTestStore, waitFor, logUnhandledRequests,
 } from '../../setupTest';
@@ -96,11 +95,11 @@ describe('Masquerade Widget Dropdown', () => {
       axiosMock.onGet(masqueradeUrl).reply(200, mockResponse);
 
       const { container } = render(<MasqueradeWidget {...mockData} />);
-      const dropdownToggle = container.querySelector('.dropdown-toggle');
+      const dropdownToggle = container.querySelector('.dropdown-toggle')!;
       await act(async () => {
         await fireEvent.click(dropdownToggle);
       });
-      const dropdownMenu = container.querySelector('.dropdown-menu');
+      const dropdownMenu = container.querySelector('.dropdown-menu') as HTMLElement;
       getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => {
         if (button.textContent === option.name) {
           expect(button).toHaveClass('active');
@@ -115,11 +114,11 @@ describe('Masquerade Widget Dropdown', () => {
     const { container } = render(<MasqueradeWidget {...mockData} />);
     await waitFor(() => expect(axiosMock.history.get).toHaveLength(1));
 
-    const dropdownToggle = container.querySelector('.dropdown-toggle');
+    const dropdownToggle = container.querySelector('.dropdown-toggle')!;
     await act(async () => {
       await fireEvent.click(dropdownToggle);
     });
-    const dropdownMenu = container.querySelector('.dropdown-menu');
+    const dropdownMenu = container.querySelector('.dropdown-menu') as HTMLElement;
     const studentOption = getAllByRole(dropdownMenu, 'button', { hidden: true }).filter(
       button => (button.textContent === 'Specific Student...'),
     )[0];