refactor: [AXIMST-507] Course unit - Changed Paste unit UI (#186)

* refactor: [AXIMST-507] changed Paste unit UI * refactor: code refactoring
raccoongang · Apr 1, 2024 · 4243553 · 4243553
1 parent 82f18dd
commit 4243553
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 35 deletions.
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -1165,7 +1165,7 @@ describe('<CourseUnit />', () => {
 
     it('should copy a unit, paste it as a new unit, and update the course section vertical data', async () => {
       const {
-        getAllByTestId, getByTestId, getByRole, getByText,
+        getAllByTestId, getByRole,
       } = render(<RootWrapper />);
 
       axiosMock
@@ -1189,9 +1189,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
 
-      userEvent.click(getByTestId('dropdown-paste-unit'));
-
-      userEvent.click(getByText(courseSequenceMessages.pasteAsNewUnitLink.defaultMessage));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
       let units = null;
       const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
@@ -1228,7 +1226,7 @@ describe('<CourseUnit />', () => {
 
     it('displays a notification about new files after pasting a component', async () => {
       const {
-        queryByTestId, getByTestId, getByRole, getByText,
+        queryByTestId, getByTestId, getByRole,
       } = render(<RootWrapper />);
 
       axiosMock
@@ -1252,9 +1250,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
 
-      userEvent.click(getByTestId('dropdown-paste-unit'));
-
-      userEvent.click(getByText(courseSequenceMessages.pasteAsNewUnitLink.defaultMessage));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
       const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
       const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -1293,7 +1289,7 @@ describe('<CourseUnit />', () => {
 
     it('displays a notification about conflicting errors after pasting a component', async () => {
       const {
-        queryByTestId, getByTestId, getByRole, getByText,
+        queryByTestId, getByTestId, getByRole,
       } = render(<RootWrapper />);
 
       axiosMock
@@ -1317,9 +1313,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
 
-      userEvent.click(getByTestId('dropdown-paste-unit'));
-
-      userEvent.click(getByText(courseSequenceMessages.pasteAsNewUnitLink.defaultMessage));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
       const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
       const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
@@ -1358,7 +1352,7 @@ describe('<CourseUnit />', () => {
 
     it('displays a notification about error files after pasting a component', async () => {
       const {
-        queryByTestId, getByTestId, getByRole, getByText,
+        queryByTestId, getByTestId, getByRole,
       } = render(<RootWrapper />);
 
       axiosMock
@@ -1382,9 +1376,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
 
-      userEvent.click(getByTestId('dropdown-paste-unit'));
-
-      userEvent.click(getByText(courseSequenceMessages.pasteAsNewUnitLink.defaultMessage));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
 
       const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
       const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];

diff --git a/src/course-unit/course-sequence/CourseSequence.scss b/src/course-unit/course-sequence/CourseSequence.scss
@@ -35,7 +35,7 @@
     min-width: 0;
   }
 
-  .sequence-navigation-tabs .btn:not(.sequence-navigation-tabs-new-unit-btn) {
+  .sequence-navigation-tabs .btn:not(.sequence-navigation-tabs-action-btn) {
     flex-basis: 100%;
     min-width: 2rem;
   }
@@ -63,7 +63,7 @@
 
   .sequence-navigation-prev-btn,
   .sequence-navigation-next-btn,
-  .sequence-navigation-tabs-new-unit-btn {
+  .sequence-navigation-tabs-action-btn {
     min-width: 12.5rem;
   }
 

diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -1,8 +1,8 @@
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useNavigate } from 'react-router-dom';
-import { Button, Dropdown } from '@openedx/paragon';
-import { Plus as PlusIcon } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+import { Plus as PlusIcon, ContentPasteGo as ContentPasteGoIcon } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { changeEditTitleFormOpen, updateQueryPendingStatus } from '../../data/slice';
@@ -59,28 +59,22 @@ const SequenceNavigationTabs = ({
             />
           ))}
           <Button
-            className="sequence-navigation-tabs-new-unit-btn"
+            className="sequence-navigation-tabs-action-btn"
             variant="outline-primary"
             iconBefore={PlusIcon}
             onClick={handleAddNewSequenceUnit}
           >
             {intl.formatMessage(messages.newUnitBtnText)}
           </Button>
           {showPasteUnit && (
-            <Dropdown>
-              <Dropdown.Toggle
-                id="sequence-navigation-paste-unit"
-                as={Button}
-                variant="outline-primary"
-                className="d-block"
-                data-testid="dropdown-paste-unit"
-              />
-              <Dropdown.Menu>
-                <Dropdown.Item onClick={handlePasteNewSequenceUnit}>
-                  {intl.formatMessage(messages.pasteAsNewUnitLink)}
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
+            <Button
+              className="sequence-navigation-tabs-action-btn"
+              variant="outline-primary"
+              iconBefore={ContentPasteGoIcon}
+              onClick={handlePasteNewSequenceUnit}
+            >
+              {intl.formatMessage(messages.pasteAsNewUnitLink)}
+            </Button>
           )}
         </div>
       </div>