feat: convert to exported App

Makefile

@@ -13,6 +13,7 @@ build:
 	rm -rf ./dist
 	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
+	@rm -rf dist/*.test.jsx
 	@rm -rf dist/**/*.test.jsx
 	@rm -rf dist/**/__snapshots__
 	@rm -rf dist/__mocks__

package.json

@@ -11,6 +11,9 @@
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "fedx-scripts jest --coverage"
   },
+  "files": [
+    "/dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-component-ai-translations.git"
@@ -33,18 +36,19 @@
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "10.4.9",
+    "@testing-library/user-event": "^14.5.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
     "husky": "8.0.3",
     "jest": "29.7.0",
-    "jest-chain": "1.1.6",
-    "prop-types": "15.8.1"
+    "jest-chain": "1.1.6"
   },
   "dependencies": {
     "@edx/frontend-platform": "6.0.1",
     "@edx/paragon": "21.5.3",
     "@reduxjs/toolkit": "^1.9.7",
     "babel-polyfill": "6.26.0",
+    "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",

src/App.jsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import {
+  ActionRow, Collapsible, Icon, IconButton, Image,
+} from '@edx/paragon';
+import { ChevronLeft, ChevronRight, Close } from '@edx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import XpertLogo from './XpertLogo';
+
+const App = ({ setIsAiTranslations, closeTranscriptSettings }) => {
+  const googleTranslateImage = 'https://prod-edx-ai-translations-assets.s3.amazonaws.com/google-translate.png';
+  const [appState, setAppState] = useState({
+    selectedLanguages: [],
+    translationsError: false,
+    view: '',
+  });
+
+  const handleAppState = (updatedData) => {
+    setAppState((previousState) => ({ ...previousState, ...updatedData }));
+  };
+
+  const handleViewClick = () => {
+    handleAppState({ view: 'request' });
+    setIsAiTranslations(true);
+  };
+
+  const handleBackButton = () => {
+    if (appState.view === 'request') {
+      setIsAiTranslations(false);
+      setAppState({ ...appState, view: '' });
+    }
+  };
+
+  return (
+    <div>
+      {!appState.view && (
+        <Collapsible.Advanced
+          onOpen={handleViewClick}
+          key="ai-translation-btn"
+        >
+          <Collapsible.Trigger
+            className="row m-0 justify-content-between align-items-center mt-4"
+            data-testid="app-entry-btn"
+            onClick={handleViewClick}
+          >
+            <div className=" d-flex flex-column justify-content-center">
+              <XpertLogo />
+              Get free translations
+              <Image
+                src={googleTranslateImage}
+                className="flex-grow-0"
+                width="122px"
+                height="14px"
+              />
+            </div>
+            <Icon src={ChevronRight} />
+          </Collapsible.Trigger>
+        </Collapsible.Advanced>
+      )}
+      {appState.view && (
+        <>
+          <ActionRow
+            className="custom-arrow-row mb-3"
+            data-testid="action-row-btns"
+            key="ai-action-btns"
+          >
+            <IconButton
+              data-testid="action-row-back-btn"
+              key="back-button"
+              size="sm"
+              iconAs={Icon}
+              src={ChevronLeft}
+              alt="back button to main transcript settings view"
+              onClick={handleBackButton}
+            />
+            <ActionRow.Spacer />
+            <IconButton
+              size="sm"
+              iconAs={Icon}
+              onClick={() => {
+                closeTranscriptSettings();
+                setIsAiTranslations(false);
+              }}
+              src={Close}
+              alt="close settings"
+              data-testid="action-row-close-btn"
+            />
+          </ActionRow>
+          <div className="d-flex flex-column" key="ai-translations-views">
+            Translations is not available
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+App.propTypes = {
+  setIsAiTranslations: PropTypes.func.isRequired,
+  closeTranscriptSettings: PropTypes.func.isRequired,
+};
+
+export default App;

src/App.test.jsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { act, render, screen } from '@testing-library/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import userEvent from '@testing-library/user-event';
+
+import App from './App';
+
+const courseId = 'Fake-ID';
+
+describe('App', () => {
+  it('renders collapsible button', () => {
+    const onSetIsAiTranslations = jest.fn();
+    render(
+      <App
+        setIsAiTranslations={onSetIsAiTranslations}
+        closeTranscriptSettings={() => {}}
+        courseId={courseId}
+      />,
+    );
+
+    expect(
+      screen.getByText(/Get free translations/),
+    ).toBeInTheDocument();
+  });
+
+  it('renders App component', async () => {
+    const onSetIsAiTranslations = jest.fn();
+
+    render(
+      <App
+        setIsAiTranslations={onSetIsAiTranslations}
+        closeTranscriptSettings={() => {}}
+      />,
+    );
+
+    userEvent.click(screen.getByTestId('app-entry-btn'));
+    expect(await screen.findByTestId('action-row-btns')).toBeTruthy();
+  });
+
+  it('goes back to previous view', async () => {
+    const onSetIsAiTranslations = jest.fn();
+    render(
+      <App
+        setIsAiTranslations={onSetIsAiTranslations}
+        closeTranscriptSettings={() => {}}
+      />,
+    );
+
+    userEvent.click(
+      screen.getByText(/Get free translations/),
+    );
+    expect(await screen.findByText(/Translations is not available/)).toBeInTheDocument();
+    expect(await screen.findByTestId('action-row-back-btn')).toBeInTheDocument();
+
+    await act(async () => {
+      userEvent.click(screen.queryByTestId('action-row-back-btn'));
+    });
+
+    expect(onSetIsAiTranslations).toHaveBeenCalled();
+    expect(await screen.findByText(/Get free translations/)).toBeInTheDocument();
+    expect(screen.queryByText(/Get free translations is not available/)).not.toBeInTheDocument();
+  });
+
+  it('calls closeTranscriptSettings when close button is clicked', async () => {
+    const onSetIsAiTranslations = jest.fn();
+    const onCloseTranscriptSettings = jest.fn();
+    render(
+      <App
+        setIsAiTranslations={onSetIsAiTranslations}
+        closeTranscriptSettings={onCloseTranscriptSettings}
+      />,
+    );
+
+    userEvent.click(
+      screen.getByText(/Get free translations/),
+    );
+    expect(await screen.findByText(/Translations is not available/)).toBeInTheDocument();
+    expect(await screen.findByTestId('action-row-close-btn')).toBeInTheDocument();
+
+    await userEvent.click(screen.queryByTestId('action-row-close-btn'));
+
+    expect(onCloseTranscriptSettings).toHaveBeenCalled();
+  });
+});

src/XpertLogo.jsx

@@ -0,0 +1,46 @@
+const XpertLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="24"
+    viewBox="0 0 80 24"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M39.0844 20.9448L41.8339 8.01958H79.8119L77.1245 20.9448H39.0844Z"
+      fill="#F0CC00"
+    />
+    <path
+      d="M10.8893 8.42C10.7007 8.20104 10.4661 8.02747 10.1864 7.89963C9.9064 7.77178 9.58071 7.70784 9.20963 7.70784C8.83216 7.70784 8.4793 7.77498 8.15071 7.90888C7.82216 8.04283 7.52394 8.23304 7.2561 8.47947C6.98825 8.7259 6.75718 9.02126 6.56219 9.36487C6.36721 9.70881 6.21219 10.0905 6.09684 10.5105H11.4371C11.4432 10.4801 11.4477 10.4238 11.4509 10.3417C11.4537 10.2596 11.4553 10.179 11.4553 10.0997C11.4553 9.77719 11.408 9.4713 11.3137 9.18204C11.2194 8.89342 11.0779 8.63931 10.8893 8.42Z"
+      fill="#00262B"
+    />
+    <path
+      d="M21.0003 8.47051C20.7871 8.23624 20.5285 8.05499 20.2242 7.92744C19.9199 7.7996 19.576 7.73565 19.1928 7.73565C18.6875 7.73565 18.2189 7.84848 17.787 8.0735C17.3549 8.29886 16.9807 8.61213 16.6642 9.01392C16.3478 9.41571 16.0982 9.89484 15.9157 10.4516C15.7332 11.0085 15.6418 11.6187 15.6418 12.2819C15.6418 12.6958 15.7012 13.0762 15.8198 13.423C15.9384 13.7699 16.1043 14.0668 16.3171 14.3132C16.53 14.5597 16.7857 14.7515 17.0839 14.8883C17.3821 15.0251 17.7139 15.0938 18.0789 15.0938C18.5899 15.0938 19.063 14.9736 19.4983 14.7332C19.9333 14.4929 20.3121 14.1643 20.6349 13.7475C20.9574 13.3307 21.2099 12.8407 21.3924 12.2778C21.5749 11.7149 21.6663 11.1079 21.6663 10.4565C21.6663 10.0364 21.6085 9.65924 21.4928 9.3246C21.3774 8.98931 21.2131 8.70483 21.0003 8.47051Z"
+      fill="#00262B"
+    />
+    <path
+      d="M27.2975 3.93639L28.1202 0H3.96206L0 18.9244H20.1986L19.086 24H38.4344L42.7026 3.93607H27.2975V3.93639ZM13.0892 10.6431C13.0832 10.7742 13.0739 10.9081 13.0618 11.0449C13.0496 11.1817 13.0374 11.316 13.0253 11.4467C13.0132 11.5774 12.9978 11.6887 12.9796 11.7798H5.88684C5.88074 11.8651 5.87596 11.9473 5.87311 12.0262C5.86991 12.1055 5.86863 12.1876 5.86863 12.2726C5.86863 12.7777 5.94148 13.2082 6.08754 13.5643C6.2336 13.9204 6.42381 14.211 6.65809 14.4363C6.89236 14.6617 7.15573 14.8244 7.44789 14.9247C7.74 15.0251 8.03502 15.0756 8.33324 15.0756C8.98432 15.0756 9.50751 14.9631 9.90324 14.7377C10.2986 14.5127 10.6 14.2084 10.8068 13.8248H12.4775C12.3739 14.2023 12.2035 14.5552 11.9664 14.8838C11.7289 15.2124 11.4294 15.4969 11.0673 15.7373C10.7052 15.9776 10.2852 16.1662 9.80765 16.3033C9.3298 16.4401 8.80499 16.5086 8.23287 16.5086C7.68502 16.5086 7.16788 16.4187 6.68108 16.2391C6.19397 16.0598 5.76953 15.7948 5.40771 15.4448C5.0456 15.0948 4.75954 14.6642 4.54953 14.1531C4.33953 13.6417 4.2347 13.0545 4.2347 12.3909C4.2347 11.4841 4.36095 10.6582 4.61343 9.91241C4.86597 9.16702 5.21755 8.52806 5.66788 7.99522C6.11826 7.46269 6.65838 7.05036 7.28839 6.7582C7.91835 6.46604 8.60748 6.31998 9.35604 6.31998C9.86101 6.31998 10.3405 6.4082 10.7937 6.58493C11.2469 6.7614 11.6442 7.01837 11.9849 7.35626C12.3257 7.6941 12.5964 8.10933 12.7974 8.60219C12.9982 9.0951 13.0988 9.66116 13.0988 10.3001C13.0985 10.3983 13.0953 10.5124 13.0892 10.6431ZM20.5438 16.335L20.8267 14.9931H20.6806C20.3214 15.4617 19.871 15.8315 19.3296 16.1023C18.7878 16.373 18.2036 16.5086 17.5771 16.5086C17.0842 16.5086 16.6217 16.4155 16.1896 16.2301C15.7575 16.0447 15.3787 15.7782 15.053 15.4314C14.7273 15.0845 14.4703 14.6645 14.2818 14.1717C14.0932 13.6785 13.9989 13.1277 13.9989 12.5191C13.9989 11.9287 14.058 11.3642 14.1769 10.8256C14.2955 10.287 14.4646 9.78807 14.6835 9.32844C14.9025 8.8688 15.1658 8.45358 15.4733 8.08246C15.7805 7.71138 16.1215 7.39491 16.4958 7.13312C16.87 6.87167 17.2747 6.67063 17.7097 6.53063C18.1447 6.39062 18.5999 6.32058 19.0745 6.32058C19.4274 6.32058 19.7636 6.36951 20.0832 6.46668C20.4029 6.56415 20.6918 6.69938 20.9504 6.87295C21.209 7.04652 21.4311 7.25653 21.6168 7.50296C21.8025 7.74939 21.9377 8.01886 22.023 8.31102H22.1691L23.383 2.58718H24.9805L22.0595 16.3356H20.5438V16.335ZM36.3614 21.4135H32.825L30.5125 16.3382H30.2236L25.9439 21.4135H22.4286L29.0976 13.5119L26.0081 6.52261H29.6125L31.6677 11.3345H31.8588L35.7451 6.52261H39.3083L32.9417 13.8622L36.3614 21.4135Z"
+      fill="#00262B"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M45.108 4.60736C45.053 4.57955 44.9958 4.56547 44.9369 4.56547H44.3773V5.73147H44.5812V5.31283H44.9015L45.1204 5.73177H45.3477L45.0992 5.26857C45.1001 5.26807 45.1011 5.26757 45.102 5.26706C45.1592 5.23665 45.2065 5.19245 45.2441 5.13516C45.2816 5.07788 45.3004 5.00971 45.3004 4.93066C45.3004 4.85158 45.2821 4.78503 45.2458 4.7306C45.2091 4.67651 45.1635 4.63522 45.108 4.60736ZM44.5812 5.15308H44.8704C44.9242 5.15308 44.9719 5.13388 45.015 5.09549C45.0577 5.0571 45.079 5.00203 45.079 4.93032C45.079 4.85866 45.0577 4.80389 45.015 4.77223C44.9724 4.74054 44.9259 4.72484 44.8751 4.72484H44.5812V5.15308Z"
+      fill="#00262B"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M44.3142 6.32936C44.4669 6.39466 44.6311 6.4273 44.8056 6.4273C44.9809 6.4273 45.1443 6.39466 45.2974 6.32936C45.4501 6.26405 45.5845 6.17349 45.7001 6.05763C45.8161 5.94173 45.9065 5.80732 45.9718 5.65464C46.0371 5.50197 46.0699 5.33808 46.0699 5.16336C46.0699 4.98859 46.0371 4.8247 45.9718 4.67203C45.9065 4.51936 45.8161 4.38495 45.7001 4.26909C45.5845 4.15321 45.4501 4.06263 45.2974 3.99733C45.1443 3.93204 44.9805 3.8994 44.8056 3.8994C44.6311 3.8994 44.4669 3.93204 44.3142 3.99733C44.1619 4.06263 44.0271 4.15321 43.9115 4.26909C43.7954 4.38495 43.705 4.51936 43.6397 4.67203C43.5745 4.8247 43.5416 4.98859 43.5416 5.16336C43.5416 5.33808 43.5745 5.50197 43.6397 5.65464C43.705 5.80732 43.7954 5.94173 43.9115 6.05763C44.0271 6.17349 44.1614 6.26405 44.3142 6.32936ZM45.323 6.05281C45.1677 6.14529 44.995 6.1917 44.8056 6.1917C44.6157 6.1917 44.4434 6.14563 44.2881 6.05281C44.1324 5.95999 44.0087 5.83611 43.9157 5.68058C43.8232 5.52501 43.7771 5.3528 43.7771 5.16302C43.7771 4.97324 43.8232 4.80069 43.9157 4.64546C44.0087 4.48993 44.1324 4.36605 44.2881 4.27323C44.4438 4.18074 44.6162 4.13432 44.8056 4.13432C44.995 4.13432 45.1677 4.18042 45.323 4.27323C45.4787 4.36605 45.6028 4.49023 45.6954 4.64546C45.788 4.80103 45.8345 4.97324 45.8345 5.16302C45.8345 5.3528 45.7884 5.52535 45.6954 5.68058C45.6028 5.83611 45.4783 5.95999 45.323 6.05281Z"
+      fill="#00262B"
+    />
+    <path
+      d="M48.7189 13.61L49.8182 11.3941H51.2191L49.4787 14.459L51.2618 17.5748H49.8694L48.7356 15.3249L47.6064 17.5748H46.1975L47.9801 14.459L46.244 11.3941H47.6363L48.7189 13.61ZM52.9779 15.2796V17.5748H51.8304V11.4892H54.2124C54.5255 11.4892 54.7976 11.5413 55.0297 11.6457C55.2613 11.7442 55.4528 11.8775 55.6034 12.0456C55.76 12.2078 55.876 12.3962 55.9511 12.6107C56.0321 12.8193 56.0731 13.0338 56.0731 13.254V13.4627C56.0731 13.6887 56.0321 13.9118 55.9511 14.1321C55.876 14.3465 55.76 14.5407 55.6034 14.7146C55.4528 14.8826 55.2613 15.0188 55.0297 15.1232C54.7976 15.2275 54.5255 15.2796 54.2124 15.2796H52.9779ZM52.9779 14.1842H54.0993C54.3544 14.1842 54.5545 14.1147 54.6991 13.9756C54.8501 13.8365 54.9252 13.6568 54.9252 13.4366V13.3323C54.9252 13.112 54.8501 12.9323 54.6991 12.7932C54.5545 12.6541 54.3544 12.5846 54.0993 12.5846H52.9779V14.1842ZM57.0666 11.4892H60.9091V12.5846H58.214V13.9756H60.8051V15.071H58.214V16.4794H61.0136V17.5748H57.0666V11.4892ZM66.2238 17.5748H65.0763V15.7491C65.0763 15.61 65.0388 15.497 64.9633 15.4101C64.8938 15.3231 64.7747 15.2796 64.6067 15.2796H63.2851V17.5748H62.1377V11.4892H64.4676C64.7807 11.4892 65.0559 11.5326 65.2935 11.6196C65.5311 11.7065 65.7281 11.8282 65.8847 11.9847C66.0472 12.1354 66.1688 12.3122 66.2498 12.515C66.3369 12.7179 66.3804 12.9352 66.3804 13.1671V13.3757C66.3804 13.6249 66.3138 13.8597 66.1803 14.0799C66.0472 14.2943 65.8412 14.4596 65.5631 14.5755V14.732C65.7661 14.7551 65.9252 14.8334 66.0412 14.9667C66.1628 15.1 66.2238 15.2681 66.2238 15.4709V17.5748ZM63.2851 14.1842H64.3806C64.6591 14.1842 64.8703 14.1205 65.0153 13.993C65.1604 13.8597 65.2329 13.6742 65.2329 13.4366V13.3323C65.2329 13.1294 65.1604 12.9555 65.0153 12.8106C64.8703 12.6599 64.6591 12.5846 64.3806 12.5846H63.2851V14.1842ZM67.0352 11.4892H71.4165V12.5846H69.7998V17.5748H68.6519V12.5846H67.0352V11.4892Z"
+      fill="#00262B"
+    />
+  </svg>
+);
+
+export default XpertLogo;

src/index.jsx

@@ -1,34 +1,3 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
-import {
-  APP_INIT_ERROR,
-  APP_READY,
-  subscribe,
-  initialize,
-} from '@edx/frontend-platform';
+import App from './App';
 
-import { Route, Routes } from 'react-router-dom';
-import initializeStore from './store';
-
-const Hello = () => <div>Hello world!</div>;
-
-subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={initializeStore()}>
-      <Routes>
-        <Route path="" element={<Hello />} />
-      </Routes>
-    </AppProvider>,
-    document.getElementById('root'),
-  );
-});
-
-subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
-});
-
-initialize({
-  messages: [],
-  requireAuthenticatedUser: false,
-});
+export default App;

src/setupTest.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';