feat: refined ux update a taxonomy by downloading and uploading [FC-0036]

src/assets/scss/_utilities.scss

@@ -2,6 +2,10 @@
   color: $black;
 }
 
+.h-200px {
+  height: 200px;
+}
+
 .mw-300px {
   max-width: 300px;
 }

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -18,7 +18,7 @@ import {
 } from '@edx/paragon';
 import { ContentCopy, InfoOutline } from '@edx/paragon/icons';
 
-import { getFileSizeToClosestByte } from '../generic/utils';
+import { getFileSizeToClosestByte } from '../../utils';
 import messages from './messages';
 
 const FileInfoModalSidebar = ({

src/files-and-videos/files-page/FilesPage.jsx

@@ -27,7 +27,7 @@ import {
   FileTable,
   ThumbnailColumn,
 } from '../generic';
-import { getFileSizeToClosestByte } from '../generic/utils';
+import { getFileSizeToClosestByte } from '../../utils';
 import FileThumbnail from './FileThumbnail';
 import FileInfoModalSidebar from './FileInfoModalSidebar';
 

src/files-and-videos/generic/utils.js

@@ -1,23 +1,4 @@
-export const getFileSizeToClosestByte = (fileSize, numberOfDivides = 0) => {
-  if (fileSize > 1000) {
-    const updatedSize = fileSize / 1000;
-    const incrementNumberOfDivides = numberOfDivides + 1;
-    return getFileSizeToClosestByte(updatedSize, incrementNumberOfDivides);
-  }
-  const fileSizeFixedDecimal = Number.parseFloat(fileSize).toFixed(2);
-  switch (numberOfDivides) {
-  case 1:
-    return `${fileSizeFixedDecimal} KB`;
-  case 2:
-    return `${fileSizeFixedDecimal} MB`;
-  case 3:
-    return `${fileSizeFixedDecimal} GB`;
-  default:
-    return `${fileSizeFixedDecimal} B`;
-  }
-};
-
-export const sortFiles = (files, sortType) => {
+export const sortFiles = (files, sortType) => { // eslint-disable-line import/prefer-default-export
   const [sort, direction] = sortType.split(',');
   let sortedFiles;
   if (sort === 'displayName') {

src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Stack } from '@edx/paragon';
 import { injectIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { getFileSizeToClosestByte } from '../../generic/utils';
+import { getFileSizeToClosestByte } from '../../../utils';
 import { getFormattedDuration } from '../data/utils';
 import messages from './messages';
 

src/generic/loading-button/LoadingButton.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import LoadingButton from '.';
+
+const buttonTitle = 'Button Title';
+
+const RootWrapper = (onClick) => (
+  <LoadingButton onClick={onClick}>
+    {buttonTitle}
+  </LoadingButton>
+);
+
+describe('<LoadingButton />', () => {
+  it('renders the title and doesnt handle the spinner initially', () => {
+    const { getByText, queryByTestId } = render(RootWrapper(() => { }));
+    const titleElement = getByText(buttonTitle);
+    expect(titleElement).toBeInTheDocument();
+    expect(queryByTestId('button-loading-spinner')).not.toBeInTheDocument();
+  });
+
+  it('doesnt render the spinner initially without onClick function', () => {
+    const { getByRole, getByText, queryByTestId } = render(RootWrapper());
+    const titleElement = getByText(buttonTitle);
+    expect(titleElement).toBeInTheDocument();
+    expect(queryByTestId('button-loading-spinner')).not.toBeInTheDocument();
+    const buttonElement = getByRole('button');
+    buttonElement.click();
+    expect(queryByTestId('button-loading-spinner')).not.toBeInTheDocument();
+  });
+
+  it('renders the spinner correctly', () => {
+    const longFunction = () => new Promise((resolve) => {
+      setTimeout(resolve, 1000);
+    });
+    const { getByRole, getByText, getByTestId } = render(RootWrapper(longFunction));
+    const buttonElement = getByRole('button');
+    buttonElement.click();
+    const spinnerElement = getByTestId('button-loading-spinner');
+    expect(spinnerElement).toBeInTheDocument();
+    const titleElement = getByText(buttonTitle);
+    expect(titleElement).toBeInTheDocument();
+    expect(buttonElement).toBeDisabled();
+    setTimeout(() => {
+      expect(buttonElement).toBeEnabled();
+      expect(spinnerElement).not.toBeInTheDocument();
+    }, 2000);
+  });
+
+  it('renders the spinner correctly even with error', () => {
+    const longFunction = () => new Promise((_resolve, reject) => {
+      setTimeout(reject, 1000);
+    });
+    const { getByRole, getByText, getByTestId } = render(RootWrapper(longFunction));
+    const buttonElement = getByRole('button');
+    buttonElement.click();
+    const spinnerElement = getByTestId('button-loading-spinner');
+    expect(spinnerElement).toBeInTheDocument();
+    const titleElement = getByText(buttonTitle);
+    expect(titleElement).toBeInTheDocument();
+    expect(buttonElement).toBeDisabled();
+    setTimeout(() => {
+      expect(buttonElement).toBeEnabled();
+      expect(spinnerElement).not.toBeInTheDocument();
+    }, 2000);
+  });
+});

src/generic/loading-button/index.jsx

@@ -0,0 +1,61 @@
+// @ts-check
+import React, { useState } from 'react';
+
+import {
+  Button,
+  Spinner,
+  Stack,
+} from '@edx/paragon';
+
+/**
+  * A button that shows a loading spinner when clicked.
+  * @param {object} props
+  * @param {React.ReactNode=} props.children
+  * @param {boolean=} props.disabled
+  * @param {function=} props.onClick
+  * @returns {JSX.Element}
+  */
+const LoadingButton = ({
+  onClick,
+  children,
+  disabled,
+  ...props
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadingOnClick = async (e) => {
+    if (!onClick) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await onClick(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      {...props}
+      disabled={!!isLoading || disabled}
+      onClick={loadingOnClick}
+    >
+      <Stack gap={2} direction="horizontal">
+        {children}
+        {isLoading && <Spinner size="sm" animation="border" data-testid="button-loading-spinner" />}
+      </Stack>
+    </Button>
+  );
+};
+
+LoadingButton.propTypes = {
+  ...Button.propTypes,
+};
+
+LoadingButton.defaultProps = {
+  ...Button.defaultProps,
+};
+
+export default LoadingButton;

src/taxonomy/TaxonomyLayout.jsx

@@ -1,32 +1,51 @@
+// @ts-check
 import React, { useMemo, useState } from 'react';
 import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Outlet, ScrollRestoration } from 'react-router-dom';
 import { Toast } from '@edx/paragon';
 
+import AlertMessage from '../generic/alert-message';
 import Header from '../header';
 import { TaxonomyContext } from './common/context';
+import messages from './messages';
 
 const TaxonomyLayout = () => {
+  const intl = useIntl();
   // Use `setToastMessage` to show the toast.
   const [toastMessage, setToastMessage] = useState(null);
+  // Use `setToastMessage` to show the alert.
+  const [alertProps, setAlertProps] = useState(null);
 
   const context = useMemo(() => ({
-    toastMessage, setToastMessage,
+    toastMessage, setToastMessage, alertProps, setAlertProps,
   }), []);
 
   return (
     <TaxonomyContext.Provider value={context}>
       <div className="bg-light-400">
         <Header isHiddenMainMenu />
+        { alertProps && (
+          <AlertMessage
+            data-testid="taxonomy-alert"
+            className="mb-0"
+            dismissible
+            closeLabel={intl.formatMessage(messages.taxonomyDismissLabel)}
+            onClose={() => setAlertProps(null)}
+            // @ts-ignore ToDo: fix object spread type error
+            {...alertProps}
+          />
+        )}
         <Outlet />
         <StudioFooter />
-        <Toast
-          show={toastMessage !== null}
-          onClose={() => setToastMessage(null)}
-          data-testid="taxonomy-toast"
-        >
-          {toastMessage}
-        </Toast>
+        {toastMessage && (
+          <Toast
+            onClose={() => setToastMessage(null)}
+            data-testid="taxonomy-toast"
+          >
+            {toastMessage}
+          </Toast>
+        )}
       </div>
       <ScrollRestoration />
     </TaxonomyContext.Provider>

src/taxonomy/TaxonomyLayout.test.jsx

@@ -1,32 +1,50 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { render, act } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import initializeStore from '../store';
+import { TaxonomyContext } from './common/context';
 import TaxonomyLayout from './TaxonomyLayout';
 
 let store;
 const toastMessage = 'Hello, this is a toast!';
+const alertErrorTitle = 'Error title';
+const alertErrorDescription = 'Error description';
+
+const MockChildComponent = () => {
+  const { setToastMessage, setAlertProps } = useContext(TaxonomyContext);
+
+  return (
+    <div data-testid="mock-content">
+      <button
+        type="button"
+        onClick={() => setToastMessage(toastMessage)}
+        data-testid="taxonomy-show-toast"
+      >
+        Show Toast
+      </button>
+      <button
+        type="button"
+        onClick={() => setAlertProps({ title: alertErrorTitle, description: alertErrorDescription })}
+        data-testid="taxonomy-show-alert"
+      >
+        Show Alert
+      </button>
+    </div>
+  );
+};
+
 jest.mock('../header', () => jest.fn(() => <div data-testid="mock-header" />));
 jest.mock('@edx/frontend-component-footer', () => ({
   StudioFooter: jest.fn(() => <div data-testid="mock-footer" />),
 }));
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
-  Outlet: jest.fn(() => <div data-testid="mock-content" />),
+  Outlet: () => <MockChildComponent />,
   ScrollRestoration: jest.fn(() => <div />),
 }));
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: jest.fn((initial) => {
-    if (initial === null) {
-      return [toastMessage, jest.fn()];
-    }
-    return [initial, jest.fn()];
-  }),
-}));
 
 const RootWrapper = () => (
   <AppProvider store={store}>
@@ -49,18 +67,37 @@ describe('<TaxonomyLayout />', async () => {
     store = initializeStore();
   });
 
-  it('should render page correctly', async () => {
+  it('should render page correctly', () => {
     const { getByTestId } = render(<RootWrapper />);
     expect(getByTestId('mock-header')).toBeInTheDocument();
     expect(getByTestId('mock-content')).toBeInTheDocument();
     expect(getByTestId('mock-footer')).toBeInTheDocument();
   });
 
-  it('should show toast', async () => {
+  it('should show toast', () => {
     const { getByTestId, getByText } = render(<RootWrapper />);
-    act(() => {
-      expect(getByTestId('taxonomy-toast')).toBeInTheDocument();
-      expect(getByText(toastMessage)).toBeInTheDocument();
-    });
+    const button = getByTestId('taxonomy-show-toast');
+    button.click();
+    expect(getByTestId('taxonomy-toast')).toBeInTheDocument();
+    expect(getByText(toastMessage)).toBeInTheDocument();
+  });
+
+  it('should show alert', () => {
+    const {
+      getByTestId,
+      getByText,
+      getByRole,
+      queryByTestId,
+    } = render(<RootWrapper />);
+
+    const button = getByTestId('taxonomy-show-alert');
+    button.click();
+    expect(getByTestId('taxonomy-alert')).toBeInTheDocument();
+    expect(getByText(alertErrorTitle)).toBeInTheDocument();
+    expect(getByText(alertErrorDescription)).toBeInTheDocument();
+
+    const closeAlertButton = getByRole('button', { name: 'Dismiss' });
+    closeAlertButton.click();
+    expect(queryByTestId('taxonomy-alert')).not.toBeInTheDocument();
   });
 });

src/taxonomy/TaxonomyListPage.test.jsx

@@ -39,17 +39,14 @@ const context = {
   toastMessage: null,
   setToastMessage: jest.fn(),
 };
-
 const queryClient = new QueryClient();
 
 const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
       <QueryClientProvider client={queryClient}>
         <TaxonomyContext.Provider value={context}>
-          <QueryClientProvider client={queryClient}>
-            <TaxonomyListPage intl={injectIntl} />
-          </QueryClientProvider>
+          <TaxonomyListPage intl={injectIntl} />
         </TaxonomyContext.Provider>
       </QueryClientProvider>
     </IntlProvider>

src/taxonomy/common/context.js

@@ -2,7 +2,15 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
 
+/**
+ * @typedef AlertProps
+ * @type {Object}
+ * @property {React.ReactNode} title - title of the alert.
+ * @property {React.ReactNode} description - description of the alert.
+ */
 export const TaxonomyContext = React.createContext({
   toastMessage: /** @type{null|string} */ (null),
-  setToastMessage: /** @type{null|function} */ (null),
+  setToastMessage: /** @type{null|React.Dispatch<React.SetStateAction<null|string>>} */ (null),
+  alertProps: /** @type{null|AlertProps} */ (null),
+  setAlertProps: /** @type{null|React.Dispatch<React.SetStateAction<null|AlertProps>>} */ (null),
 });