fix(duplication): make duplication UI aligned with BE user permissions

- users need to be instructor to duplicate to a new course in the destination tenant
- add alert for non-instructors in current tenant to request instructor role
- only valid target instances will be selectable, FE will disable new course duplication if no valid targets
- create types for duplication state reducer based on BE response

Author: adi-herwana-nus

app/controllers/course/duplications_controller.rb

@@ -17,11 +17,8 @@ def create
 
   def authorize_duplication
     authorize!(:duplicate_from, current_course)
-    return if instance_params == current_tenant.id
 
     destination_tenant = Instance.find(instance_params)
-
-    authorize!(:duplicate_across_instances, current_tenant)
     authorize!(:duplicate_across_instances, destination_tenant)
   end
 

app/controllers/course/object_duplications_controller.rb

@@ -69,15 +69,13 @@ def load_videos_component_data
   def load_destination_instances_data
     @destination_instances = if current_user.administrator?
                                Instance.all
-                             elsif can?(:duplicate_across_instances, current_tenant)
+                             else
                                instance_ids = InstanceUser.unscope(where: :instance_id).
                                               where(user_id: current_user.id,
                                                     role: [InstanceUser.roles[:instructor],
                                                            InstanceUser.roles[:administrator]]).
                                               pluck(:instance_id)
                                Instance.where(id: instance_ids)
-                             else
-                               Instance.where(id: current_tenant.id)
                              end
   end
 

app/views/course/object_duplications/new.json.jbuilder

@@ -24,8 +24,8 @@ json.destinationInstances sorted_destination_instances do |instance|
 end
 
 json.metadata do
-  json.canDuplicateToAnotherInstance can?(:duplicate_across_instances, current_tenant)
   json.currentInstanceId current_tenant.id
+  json.currentInstanceHost current_tenant.host
 end
 
 json.partial! 'course_duplication_data'

client/app/bundles/course/courses/pages/CoursesIndex/index.tsx

@@ -49,7 +49,6 @@ const CoursesIndex: FC = () => {
   const [params] = useSearchParams();
 
   const [isLoading, setIsLoading] = useState(true);
-  const [isRoleRequestDialogOpen, setRoleRequestDialogOpen] = useState(false);
   const courses = useAppSelector(getAllCourseMiniEntities);
 
   const coursesPermissions = useAppSelector(getCoursePermissions);
@@ -67,6 +66,13 @@ const CoursesIndex: FC = () => {
     shouldOpenNewCourseDialog,
   );
 
+  const shouldOpenRoleRequestDialog =
+    Boolean(params.get('request_instructor')) && !coursesPermissions?.canCreate;
+
+  const [isRoleRequestDialogOpen, setRoleRequestDialogOpen] = useState(
+    shouldOpenRoleRequestDialog,
+  );
+
   useEffect(() => {
     dispatch(fetchCourses())
       .finally(() => setIsLoading(false))
@@ -77,6 +83,10 @@ const CoursesIndex: FC = () => {
     setIsNewCourseDialogOpen(shouldOpenNewCourseDialog);
   }, [shouldOpenNewCourseDialog]);
 
+  useEffect(() => {
+    setRoleRequestDialogOpen(shouldOpenRoleRequestDialog);
+  }, [shouldOpenRoleRequestDialog]);
+
   // Adding appropriate button to the header
   const headerToolbars: ReactElement[] = [];
   if (coursesPermissions?.canCreate) {

client/app/bundles/course/duplication/constants.js

@@ -1,7 +1,5 @@
 import mirrorCreator from 'mirror-creator';
 
-export const duplicationModes = mirrorCreator(['OBJECT', 'COURSE']);
-
 // These are mirrored in app/helpers/course/object_duplications_helper.rb
 export const duplicableItemTypes = mirrorCreator([
   'ASSESSMENT',

client/app/bundles/course/duplication/pages/Duplication/DestinationCourseSelector/InstanceDropdown.tsx

@@ -9,10 +9,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import MyLocation from '@mui/icons-material/MyLocation';
 import { Autocomplete, Box, IconButton, Tooltip } from '@mui/material';
 
-import {
-  selectDestinationInstances,
-  selectMetadata,
-} from 'course/duplication/selectors/destinationInstance';
+import { selectDestinationInstances } from 'course/duplication/selectors';
 import TextField from 'lib/components/core/fields/TextField';
 import { formatErrorMessage } from 'lib/components/form/fields/utils/mapError';
 import { useAppSelector } from 'lib/hooks/store';
@@ -40,7 +37,6 @@ const translations = defineMessages({
 const InstanceDropdown: FC<InstanceDropdownProps> = (props) => {
   const { currentInstanceId, disabled, field, fieldState, setValue } = props;
   const instances = useAppSelector(selectDestinationInstances);
-  const metadata = useAppSelector(selectMetadata);
   const instanceIds = useMemo(
     () =>
       Object.keys(instances).toSorted(
@@ -54,7 +50,7 @@ const InstanceDropdown: FC<InstanceDropdownProps> = (props) => {
     <div className="flex">
       <Autocomplete
         {...field}
-        disabled={disabled || !metadata.canDuplicateToAnotherInstance}
+        disabled={disabled || !instanceIds.length}
         fullWidth
         getOptionLabel={(instanceId): string =>
           instances[instanceId]?.name ?? ''
@@ -85,7 +81,7 @@ const InstanceDropdown: FC<InstanceDropdownProps> = (props) => {
       <div className="flex items-end">
         <Tooltip title={t(translations.currentInstance)}>
           <IconButton
-            disabled={disabled}
+            disabled={disabled || !(currentInstanceId in instances)}
             onClick={() =>
               setValue('destination_instance_id', currentInstanceId)
             }

client/app/bundles/course/duplication/pages/Duplication/DestinationCourseSelector/index.jsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import CourseDropdownMenu from 'course/duplication/components/CourseDropdownMenu';
-import { duplicationModes } from 'course/duplication/constants';
 import { duplicateCourse } from 'course/duplication/operations';
 import { courseShape, sourceCourseShape } from 'course/duplication/propTypes';
 import { actions } from 'course/duplication/store';
@@ -116,7 +115,7 @@ class DestinationCourseSelector extends Component {
   render() {
     const { duplicationMode } = this.props;
 
-    return duplicationMode === duplicationModes.COURSE
+    return duplicationMode === 'COURSE'
       ? this.renderNewCourseForm()
       : this.renderExistingCourseForm();
   }
@@ -144,7 +143,9 @@ export default connect(({ duplication }) => ({
   destinationCourseId: duplication.destinationCourseId,
   duplicationMode: duplication.duplicationMode,
   sourceCourse: duplication.sourceCourse,
-  currentInstanceId: duplication.metadata.currentInstanceId,
+  currentInstanceId:
+    duplication.destinationInstances[duplication.metadata.currentInstanceId]
+      ?.id,
   destinationInstances: duplication.destinationInstances,
   isDuplicating: duplication.isDuplicating,
 }))(injectIntl(DestinationCourseSelector));

client/app/bundles/course/duplication/pages/Duplication/__test__/DestinationCourseSelector.test.tsx

@@ -0,0 +1,135 @@
+import { createMockAdapter } from 'mocks/axiosMock';
+import { store } from 'store';
+import { fireEvent, render, screen, waitFor } from 'test-utils';
+
+import CourseAPI from 'api/course';
+import { loadObjectsList } from 'course/duplication/store';
+
+import ObjectDuplication from '../index';
+
+const client = CourseAPI.duplication.client;
+const mock = createMockAdapter(client);
+const url = `/courses/${global.courseId}/object_duplication/new`;
+const defaultInstance = {
+  id: 1,
+  name: 'Default',
+  host: 'example.org',
+};
+
+const baseData = {
+  sourceCourse: {
+    id: 5,
+    title: 'Source Course',
+    start_at: '2024-01-01',
+    duplicationModesAllowed: ['COURSE', 'OBJECT'],
+    enabledComponents: ['ASSESSMENTS'],
+    unduplicableObjectTypes: [],
+  },
+  metadata: { currentInstanceId: 1, currentInstanceHost: 'coursemology.org' },
+  destinationInstances: [defaultInstance],
+  destinationCourses: [],
+  materialsComponent: [],
+  assessmentsComponent: [],
+  surveyComponent: [],
+  achievementsComponent: [],
+  videosComponent: [],
+};
+
+const waitForCombobox = (): Promise<HTMLElement> =>
+  screen.findByRole('combobox', { name: /destination instance/i });
+
+beforeEach(() => {
+  mock.reset();
+  store.dispatch(loadObjectsList(baseData));
+});
+
+describe('<DestinationCourseSelector /> instance dropdown', () => {
+  it('pre-fills instance dropdown with current instance when it is a valid destination', async () => {
+    const testData = {
+      ...baseData,
+      metadata: {
+        currentInstanceId: 1,
+        currentInstanceHost: 'coursemology.org',
+      },
+      destinationInstances: [defaultInstance],
+    };
+    store.dispatch(loadObjectsList(testData));
+    mock.onGet(url).reply(200, testData);
+
+    render(<ObjectDuplication />);
+    const combobox = await waitForCombobox();
+
+    expect(combobox).toHaveValue('Default');
+  });
+
+  it('does not pre-fill instance dropdown when current instance is not a valid destination', async () => {
+    const testData = {
+      ...baseData,
+      metadata: {
+        currentInstanceId: 99,
+        currentInstanceHost: 'other.coursemology.org',
+      },
+      destinationInstances: [defaultInstance],
+    };
+    store.dispatch(loadObjectsList(testData));
+    mock.onGet(url).reply(200, testData);
+
+    render(<ObjectDuplication />);
+    const combobox = await waitForCombobox();
+
+    expect(combobox).toHaveValue('');
+  });
+
+  it('MyLocation button sets the Autocomplete to the current instance', async () => {
+    const testData = {
+      ...baseData,
+      metadata: {
+        currentInstanceId: 1,
+        currentInstanceHost: 'coursemology.org',
+      },
+      destinationInstances: [
+        defaultInstance,
+        { id: 2, name: 'Other', host: 'other.org' },
+      ],
+    };
+    store.dispatch(loadObjectsList(testData));
+    mock.onGet(url).reply(200, testData);
+
+    render(<ObjectDuplication />);
+    const combobox = await waitForCombobox();
+    await waitFor(() => expect(combobox).toHaveValue('Default'));
+
+    // Click MyLocation to confirm it sets the current instance
+    fireEvent.click(
+      screen.getByRole('button', { name: /select current instance/i }),
+    );
+
+    // Combobox should show the current instance name
+    await waitFor(() => expect(combobox).toHaveValue('Default'));
+  });
+
+  /**
+   * The MyLocation IconButton is currently only disabled when `isDuplicating` is true,
+   * but it should also be disabled when the current instance is not a valid destination.
+   */
+  it('disables MyLocation button when current instance is not a valid destination', async () => {
+    const testData = {
+      ...baseData,
+      metadata: {
+        currentInstanceId: 99,
+        currentInstanceHost: 'other.coursemology.org',
+      },
+      destinationInstances: [defaultInstance],
+    };
+    store.dispatch(loadObjectsList(testData));
+    mock.onGet(url).reply(200, testData);
+
+    render(<ObjectDuplication />);
+    await waitForCombobox();
+
+    const locationButton = screen.getByRole('button', {
+      name: /select current instance/i,
+    });
+    expect(locationButton).toBeDisabled();
+  });
+});

client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx

@@ -1,5 +1,5 @@
 import { store } from 'store';
-import { fireEvent, render } from 'test-utils';
+import { fireEvent, render, screen, within } from 'test-utils';
 
 import CourseAPI from 'api/course';
 import { duplicableItemTypes } from 'course/duplication/constants';
@@ -9,7 +9,7 @@ import DuplicateButton from '../DuplicateButton';
 
 const data = {
   sourceCourse: { id: 37 },
-  metadata: { canDuplicateToAnotherInstance: false, currentInstanceId: 0 },
+  metadata: { currentInstanceId: 0 },
   destinationCourseId: 9,
   destinationCourses: [
     {
@@ -21,9 +21,15 @@ const data = {
   ],
   destinationInstances: [{ id: 0, name: 'default', host: 'example.org' }],
   selectedItems: {
-    [duplicableItemTypes.TAB]: { 3: true, 4: true, 5: false },
-    [duplicableItemTypes.CATEGORY]: { 6: false },
-    [duplicableItemTypes.ASSESSMENT]: { 7: true },
+    ASSESSMENT: { 7: true },
+    TAB: { 3: true, 4: true, 5: false },
+    CATEGORY: { 6: false },
+    SURVEY: { 10: true },
+    ACHIEVEMENT: { 11: true, 12: false },
+    FOLDER: { 13: true },
+    MATERIAL: { 14: true },
+    VIDEO: { 15: true },
+    VIDEO_TAB: { 16: true },
   },
   materialsComponent: [],
   assessmentsComponent: [
@@ -54,14 +60,32 @@ const data = {
       ],
     },
   ],
-  videosComponent: [],
+  surveyComponent: [{ id: 10, title: 'Survey 10', published: true }],
+  achievementsComponent: [
+    { id: 11, title: 'Achievement 11', published: true, url: '/badges/11' },
+    { id: 12, title: 'Achievement 12', published: true, url: '/badges/12' },
+  ],
+  videosComponent: [
+    {
+      id: 16,
+      title: 'Video Tab 16',
+      parent_id: null,
+      videos: [{ id: 15, title: 'Video 15', published: true }],
+    },
+  ],
 };
 
 const expectedPayload = {
   object_duplication: {
     items: {
       ASSESSMENT: ['7'],
       TAB: ['3', '4'],
+      SURVEY: ['10'],
+      ACHIEVEMENT: ['11'],
+      FOLDER: ['13'],
+      MATERIAL: ['14'],
+      VIDEO: ['15'],
+      VIDEO_TAB: ['16'],
     },
     destination_course_id: 9,
   },
@@ -79,4 +103,43 @@ describe('<DuplicateButton />', () => {
 
     expect(spy).toHaveBeenCalledWith(data.sourceCourse.id, expectedPayload);
   });
+
+  it('shows only selected items in the confirmation dialog and sends the correct request', async () => {
+    const spy = jest.spyOn(CourseAPI.duplication, 'duplicateItems');
+
+    store.dispatch(loadObjectsList(data));
+    const page = render(<DuplicateButton />);
+
+    fireEvent.click(
+      await page.findByRole('button', { name: /duplicate items/i }),
+    );
+
+    const dialog = await screen.findByRole('dialog');
+    const d = within(dialog);
+
+    // Destination course card
+    expect(d.getByText('destination')).toBeInTheDocument();
+
+    // Selected assessments and tabs appear; unselected ones do not
+    expect(d.getByText('Assessment 7')).toBeInTheDocument();
+    expect(d.getByText('Tab 3')).toBeInTheDocument();
+    expect(d.getByText('Tab 4')).toBeInTheDocument();
+    expect(d.queryByText('Tab 5')).not.toBeInTheDocument();
+    expect(d.queryByText('Category 6')).not.toBeInTheDocument();
+
+    // Selected survey appears
+    expect(d.getByText('Survey 10')).toBeInTheDocument();
+
+    // Selected achievement appears; unselected one does not
+    expect(d.getByText('Achievement 11')).toBeInTheDocument();
+    expect(d.queryByText('Achievement 12')).not.toBeInTheDocument();
+
+    // Selected video and video tab appear
+    expect(d.getByText('Video Tab 16')).toBeInTheDocument();
+    expect(d.getByText('Video 15')).toBeInTheDocument();
+
+    // Clicking Duplicate sends the correct API request
+    fireEvent.click(d.getByRole('button', { name: 'Duplicate' }));
+    expect(spy).toHaveBeenCalledWith(data.sourceCourse.id, expectedPayload);
+  });
 });