feat: Library Content Block Editor

package.json

@@ -47,6 +47,7 @@
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.26.0",

src/editors/Editor.test.jsx

@@ -10,10 +10,6 @@ jest.mock('./hooks', () => ({
   initializeApp: jest.fn(),
 }));
 
-jest.mock('./containers/TextEditor', () => 'TextEditor');
-jest.mock('./containers/VideoEditor', () => 'VideoEditor');
-jest.mock('./containers/ProblemEditor', () => 'ProblemEditor');
-
 const initData = {
   blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
   blockType: blockTypes.html,
@@ -39,7 +35,7 @@ describe('Editor', () => {
     });
     test.each(Object.values(blockTypes))('renders %p editor when ref is ready', (blockType) => {
       el = shallow(<Editor {...props} blockType={blockType} />);
-      expect(el.shallowWrapper.props.children.props.children.type).toBe(supportedEditors[blockType]);
+      expect(el.children().children().at(0).name()).toBe(supportedEditors[blockType].displayName);
     });
   });
   describe('behavior', () => {

src/editors/__snapshots__/Editor.test.jsx.snap

@@ -27,7 +27,7 @@ exports[`Editor render snapshot: renders correct editor given blockType (html ->
     className="pgn__modal-fullscreen h-100"
     role="dialog"
   >
-    <TextEditor
+    <injectIntl(ShimmedIntlComponent)
       onClose={[MockFunction props.onClose]}
       returnFunction={null}
     />

src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap

@@ -58,7 +58,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-0 mb-6"
+    className="pb-6 min-vh-100"
   >
     <h1>
       My test content
@@ -139,7 +139,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-0 mb-6"
+    className="pb-6 min-vh-100"
   />
   <injectIntl(ShimmedIntlComponent)
     disableSave={true}

src/editors/containers/EditorContainer/index.jsx

@@ -66,7 +66,7 @@ export const EditorContainer = ({
           />
         </div>
       </ModalDialog.Header>
-      <ModalDialog.Body className="pb-0 mb-6">
+      <ModalDialog.Body className="pb-6 min-vh-100">
         {isInitialized && children}
       </ModalDialog.Body>
       <EditorFooter

src/editors/containers/LibraryContentEditor/BlocksSelector.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import { CheckboxControl, DataTable, Form } from '@edx/paragon';
+
+import { modes } from './constants';
+import { selectors } from '../../data/redux';
+import { useBlocksSelectorHook } from './hooks';
+import messages from './messages';
+
+export const SELECT_ONE_TEST_ID = 'selectOne';
+
+export const RowCheckbox = ({ row }) => {
+  const {
+    indeterminate,
+    checked,
+    ...toggleRowSelectedProps
+  } = row.getToggleRowSelectedProps();
+
+  return (
+    <div className="text-center">
+      <CheckboxControl
+        {...toggleRowSelectedProps}
+        title="Toggle row selected"
+        checked={checked}
+        isIndeterminate={false}
+        data-testid={SELECT_ONE_TEST_ID}
+      />
+    </div>
+  );
+};
+
+export const BlocksSelector = ({
+  // redux
+  blocks,
+  mode,
+  candidates,
+  libraries,
+  savedLibraryId,
+  selectedLibraryId,
+  v1BlockRequests,
+}) => {
+  const {
+    tableDataLoaded,
+    data,
+    initialRows,
+    onSelectedRowsChanged,
+  } = useBlocksSelectorHook({
+    blocks,
+    candidates,
+    libraries,
+    savedLibraryId,
+    selectedLibraryId,
+    v1BlockRequests,
+  });
+
+  const columns = [
+    {
+      Header: 'Name',
+      accessor: 'display_name',
+    },
+    {
+      Header: 'Block Type',
+      accessor: 'block_type',
+    },
+  ];
+
+  const selectColumn = {
+    id: 'selection',
+    Header: () => null,
+    Cell: RowCheckbox,
+    disableSortBy: true,
+  };
+
+  if (selectedLibraryId === null || mode !== modes.selected.value || !tableDataLoaded) {
+    return null;
+  }
+
+  return (
+    <div className="mb-5 pt-3 border-top">
+      <Form.Label>
+        <FormattedMessage {...messages.tableInstructionLabel} />
+      </Form.Label>
+      <DataTable
+        key={selectedLibraryId}
+        columns={columns}
+        data={data}
+        itemCount={data.length}
+        isSelectable
+        isPaginated
+        isSortable
+        initialState={{ selectedRowIds: initialRows }}
+        manualSelectColumn={selectColumn}
+        onSelectedRowsChanged={onSelectedRowsChanged}
+      >
+        <DataTable.TableControlBar />
+        <DataTable.Table />
+        <DataTable.EmptyTable content="No blocks found." />
+        <DataTable.TableFooter />
+      </DataTable>
+    </div>
+  );
+};
+
+RowCheckbox.defaultProps = {
+  row: {},
+};
+
+RowCheckbox.propTypes = {
+  row: PropTypes.shape({
+    getToggleRowSelectedProps: PropTypes.func.isRequired,
+  }),
+};
+
+BlocksSelector.defaultProps = {
+  blocks: [],
+  candidates: [],
+  libraries: [],
+  mode: '',
+  savedLibraryId: null,
+  selectedLibraryId: null,
+  v1BlockRequests: [],
+};
+
+BlocksSelector.propTypes = {
+  // redux
+  blocks: PropTypes.arrayOf(PropTypes.shape({})),
+  candidates: PropTypes.shape([]),
+  libraries: PropTypes.shape([]),
+  mode: PropTypes.string,
+  savedLibraryId: PropTypes.string,
+  selectedLibraryId: PropTypes.string,
+  v1BlockRequests: PropTypes.shape({}),
+};
+
+export const mapStateToProps = (state) => ({
+  blocks: selectors.library.blocks(state),
+  candidates: selectors.library.candidates(state),
+  libraries: selectors.library.libraries(state),
+  mode: selectors.library.mode(state),
+  savedLibraryId: selectors.library.savedLibraryId(state),
+  selectedLibraryId: selectors.library.selectedLibraryId(state),
+  v1BlockRequests: selectors.library.v1BlockRequests(state),
+});
+
+export const mapDispatchToProps = {};
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(BlocksSelector));

src/editors/containers/LibraryContentEditor/BlocksSelector.test.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { BlocksSelector, RowCheckbox, SELECT_ONE_TEST_ID } from './BlocksSelector';
+
+jest.unmock('@edx/paragon');
+jest.unmock('@edx/paragon/icons');
+
+jest.mock('./hooks', () => ({
+  useBlocksSelectorHook: jest.fn().mockReturnValue({
+    tableDataLoaded: true,
+    data: [
+      { id: 1, display_name: 'Block 1', block_type: 'Type A' },
+      { id: 2, display_name: 'Block 2', block_type: 'Type B' },
+    ],
+    initialRows: {},
+    onSelectedRowsChanged: jest.fn(),
+  }),
+}));
+
+function renderComponent(props) {
+  return render(
+    <IntlProvider locale="en">
+      <BlocksSelector {...props} />
+    </IntlProvider>,
+  );
+}
+
+const mockProps = {
+  initialRows: {},
+  mode: 'selected',
+  setCandidatesForLibrary: jest.fn(),
+  selectedLibraryId: 'exampleLibraryId',
+};
+const mockOnChange = jest.fn();
+const defaultToggleRowSelectedProps = {
+  indeterminate: false,
+  checked: false,
+  onChange: mockOnChange,
+};
+const mockToggleRowSelectedProps = jest.fn(() => defaultToggleRowSelectedProps);
+const defaultRow = {
+  id: 'foo',
+  getToggleRowSelectedProps: mockToggleRowSelectedProps,
+};
+const checkedRow = {
+  ...defaultRow,
+  getToggleRowSelectedProps: jest.fn(() => ({
+    ...defaultToggleRowSelectedProps,
+    checked: true,
+  })),
+};
+
+describe('BlocksSelector', () => {
+  it('renders when selectedLibraryId is not null', () => {
+    const { queryByText } = renderComponent(mockProps);
+
+    // make sure that the relevant columns are there
+    expect(queryByText('Name')).toBeTruthy();
+    expect(queryByText('Block Type')).toBeTruthy();
+    // make sure that the relevant rows are there
+  });
+
+  it('does not render when selectedLibraryId is null', () => {
+    const { container } = renderComponent({ ...mockProps, selectedLibraryId: null });
+    expect(container.firstChild).toBeFalsy();
+  });
+
+  it('renders when mode is selected', () => {
+    const { queryByText } = renderComponent(mockProps);
+    expect(queryByText('Name')).toBeTruthy();
+  });
+
+  it('does not render when mode is not selected', () => {
+    const { container } = renderComponent({ ...mockProps, mode: 'soMeThingElse' });
+    expect(container.firstChild).toBeFalsy();
+  });
+});
+
+describe('RowCheckbox', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a checkbox', () => {
+    render(<RowCheckbox contextKey="emails" row={defaultRow} />);
+    const checkbox = screen.getByTestId(SELECT_ONE_TEST_ID);
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toHaveProperty('checked', false);
+  });
+
+  it('renders a selected checkbox', () => {
+    render(
+      <RowCheckbox contextKey="emails" row={checkedRow} />,
+    );
+    const checkbox = screen.getByTestId(SELECT_ONE_TEST_ID);
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).toHaveProperty('checked', true);
+  });
+
+  it('deselects the row when selected checkbox is checked', () => {
+    render(
+      <RowCheckbox contextKey="emails" row={defaultRow} />,
+    );
+    const checkbox = screen.getByTestId(SELECT_ONE_TEST_ID);
+    userEvent.click(checkbox);
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
+});