refactor: refactoring after review

package.json

@@ -87,8 +87,7 @@
     "regenerator-runtime": "0.13.7",
     "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",
-    "yup": "0.31.1",
-    "querystring": "0.2.1"
+    "yup": "0.31.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
@@ -103,15 +102,15 @@
     "@testing-library/user-event": "^13.2.1",
     "axios": "^0.27.2",
     "axios-mock-adapter": "1.22.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
     "jest-expect-message": "^1.1.3",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
-    "ts-loader": "^9.5.0",
-    "copy-webpack-plugin": "^11.0.0"
+    "ts-loader": "^9.5.0"
   },
   "peerDependencies": {
     "decode-uri-component": ">=0.2.2"

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -17,18 +17,18 @@ import { COURSE_BLOCK_NAMES } from '../../constants';
 import {
   getCanEdit,
   getCourseId,
-  getXBlockIframeHtmlAndResources,
+  getXBlockIFrameHtmlAndResources,
 } from '../data/selectors';
 import {
   copyToClipboard,
-  fetchXBlockIframeHtmlAndResourcesQuery,
 } from '../../generic/data/thunks';
+import { getHandlerUrl } from '../data/api';
+import { fetchXBlockIFrameHtmlAndResourcesQuery } from '../data/thunk';
 import { COMPONENT_TYPES } from '../constants';
 import XBlockMessages from './xblock-messages/XBlockMessages';
 import RenderErrorAlert from './render-error-alert';
 import { XBlockContent } from './xblock-content';
 import messages from './messages';
-import { getHandlerUrl } from './utils';
 
 const CourseXBlock = ({
   id, title, type, unitXBlockActions, shouldScroll, userPartitionInfo,
@@ -42,15 +42,15 @@ const CourseXBlock = ({
   const courseId = useSelector(getCourseId);
   const canEdit = useSelector(getCanEdit);
   const intl = useIntl();
-  const xblockIframeHtmlAndResources = useSelector(getXBlockIframeHtmlAndResources);
-  const xblockInstanceHtmlAndResources = find(xblockIframeHtmlAndResources, { xblockId: id });
+  const xblockIFrameHtmlAndResources = useSelector(getXBlockIFrameHtmlAndResources);
+  const xblockInstanceHtmlAndResources = find(xblockIFrameHtmlAndResources, { xblockId: id });
 
   const visibilityMessage = userPartitionInfo.selectedGroupsLabel
     ? intl.formatMessage(messages.visibilityMessage, { selectedGroupsLabel: userPartitionInfo.selectedGroupsLabel })
     : null;
 
   useEffect(() => {
-    dispatch(fetchXBlockIframeHtmlAndResourcesQuery(id));
+    dispatch(fetchXBlockIFrameHtmlAndResourcesQuery(id));
   }, []);
 
   const currentItemData = {

src/course-unit/course-xblock/CourseXBlock.test.jsx

@@ -323,14 +323,14 @@ describe('<CourseXBlock />', () => {
     const errorAlertDescription = renderErrorAlertMessages.alertRenderErrorDescription.defaultMessage;
     const errorAlertMessage = renderErrorAlertMessages.alertRenderErrorMessage.defaultMessage
       .replace('{message}', renderErrorMessage);
-    const contentIframe = queryByTestId('content-iframe-test-id');
+    const contentIFrame = queryByTestId('content-iframe-test-id');
 
     expect(getByText(errorAlertTitle)).toBeInTheDocument();
     expect(getByText(errorAlertDescription)).toBeInTheDocument();
     expect(getByText(errorAlertMessage)).toBeInTheDocument();
     expect(getByText(name)).toBeInTheDocument();
     expect(getByLabelText(messages.blockAltButtonEdit.defaultMessage)).toBeInTheDocument();
     expect(getByLabelText(messages.blockActionsDropdownAlt.defaultMessage)).toBeInTheDocument();
-    expect(contentIframe).not.toBeInTheDocument();
+    expect(contentIFrame).not.toBeInTheDocument();
   });
 });

src/course-unit/course-xblock/xblock-content/XBlockContent.jsx

@@ -9,22 +9,13 @@ import { wrapBlockHtmlForIFrame } from './iframe-wrapper';
 
 ensureConfig(['STUDIO_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'studio xblock component');
 
-/**
- * React component that displays an XBlock in a sandboxed IFrame.
- *
- * The IFrame is resized responsively so that it fits the content height.
- *
- * We use an IFrame so that the XBlock code, including user-authored HTML,
- * cannot access things like the user's cookies, nor can it make GET/POST
- * requests as the user. However, it is allowed to call any XBlock handlers.
- */
 const XBlockContent = ({
   view, type, getHandlerUrl, onBlockNotification,
 }) => {
   const iframeRef = useRef(null);
   const [html, setHtml] = useState(null);
-  const [iFrameHeight, setIFrameHeight] = useState(0);
-  const [iframeKey, setIframeKey] = useState(0);
+  const [iframeHeight, setIFrameHeight] = useState(0);
+  const [iframeKey, setIFrameKey] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -40,7 +31,7 @@ const XBlockContent = ({
         // Load the XBlock HTML into the IFrame:
         // iframe will only re-render in React when its property changes (key here)
         setHtml(newHtml);
-        setIframeKey(prevKey => prevKey + 1);
+        setIFrameKey(prevKey => prevKey + 1);
       }
     };
 
@@ -75,7 +66,7 @@ const XBlockContent = ({
         if (onBlockNotification) {
           // This is a notification from the XBlock's frontend via 'runtime.notify(event, args)'
           onBlockNotification({
-            eventType: method.substr(7), // Remove the 'xblock:' prefix that we added in iframe-wrapper.ts
+            eventType: method.substr('xblock'.length), // Remove the 'xblock:' prefix that we added in iframe-wrapper.ts
             ...args,
           });
         }
@@ -106,7 +97,7 @@ const XBlockContent = ({
         </div>
       )}
       <div
-        style={{ height: `${iFrameHeight}px` }}
+        style={{ height: `${iframeHeight}px` }}
         className="xblock-content"
       >
         <iframe

src/course-unit/course-xblock/xblock-content/iframe-wrapper/iframe-wrapper.js

@@ -62,7 +62,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/debug_toolbar/css/toolbar.css">
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/vendor/html5-input-polyfills/number-polyfill.css">
       <link rel="stylesheet" href="${studioBaseUrl}/static/studio/css/WordCloudBlockDisplay.css">
-      <link rel="stylesheet" href="XBlockIframe.css">
+      <link rel="stylesheet" href="XBlockIFrame.css">
 
       <!-- JS scripts that can be used by XBlocks -->
       <!-- gettext & XBlock JS i18n code -->

src/course-unit/course-xblock/xblock-content/iframe-wrapper/tools/iframe-connector.js

@@ -216,8 +216,8 @@ export function xblockIFrameConnector() {
 
   let lastHeight = -1;
   function checkFrameHeight() {
-    const visibleIframeContent = document.querySelector('.xblock-render');
-    const newHeight = visibleIframeContent.scrollHeight;
+    const visibleIFrameContent = document.querySelector('.xblock-render');
+    const newHeight = visibleIFrameContent.scrollHeight;
 
     if (newHeight !== lastHeight) {
       postMessageToParent({ method: 'update_frame_height', height: newHeight });

src/course-unit/data/api.js

@@ -169,9 +169,15 @@ export async function setXBlockOrderList(blockId, children) {
  * @param {string} itemId - The ID of the XBlock item.
  * @returns {Promise<Object>} A Promise that resolves with the XBlock iframe data.
  */
-export async function getXBlockIframeData(itemId) {
+export async function getXBlockIFrameData(itemId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getXBlockContainerPreview(itemId));
 
   return camelCaseObject(data);
 }
+
+export const getHandlerUrl = async (blockId) => {
+  const baseUrl = getConfig().STUDIO_BASE_URL;
+
+  return `${baseUrl}/xblock/${blockId}/handler/handler_name`;
+};

src/course-unit/data/selectors.js

@@ -14,7 +14,7 @@ export const getCourseId = (state) => state.courseDetail.courseId;
 export const getSequenceId = (state) => state.courseUnit.sequenceId;
 export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;
 const getLoadingStatuses = (state) => state.courseUnit.loadingStatus;
-export const getXBlockIframeHtmlAndResources = (state) => state.courseUnit.xblockIframeHtmlAndResources;
+export const getXBlockIFrameHtmlAndResources = (state) => state.courseUnit.xblockIFrameHtmlAndResources;
 export const getIsLoading = createSelector(
   [getLoadingStatuses],
   loadingStatus => Object.values(loadingStatus)

src/course-unit/data/slice.js

@@ -20,7 +20,7 @@ const slice = createSlice({
     courseSectionVertical: {},
     courseVerticalChildren: {},
     staticFileNotices: {},
-    xblockIframeHtmlAndResources: [],
+    xblockIFrameHtmlAndResources: [],
   },
   reducers: {
     fetchCourseItemSuccess: (state, { payload }) => {
@@ -112,8 +112,8 @@ const slice = createSlice({
       // This avoids the need to copy the array beforehand
       state.courseVerticalChildren.children.sort((a, b) => (indexMap.get(a.id) || 0) - (indexMap.get(b.id) || 0));
     },
-    fetchXBlockIframeResources: (state, { payload }) => {
-      state.xblockIframeHtmlAndResources.push(payload);
+    fetchXBlockIFrameResources: (state, { payload }) => {
+      state.xblockIFrameHtmlAndResources.push(payload);
     },
   },
 });
@@ -137,7 +137,7 @@ export const {
   duplicateXBlock,
   fetchStaticFileNoticesSuccess,
   reorderXBlockList,
-  fetchXBlockIframeResources,
+  fetchXBlockIFrameResources,
 } = slice.actions;
 
 export const {

src/course-unit/data/thunk.js

@@ -19,7 +19,7 @@ import {
   deleteUnitItem,
   duplicateUnitItem,
   setXBlockOrderList,
-  getXBlockIframeData,
+  getXBlockIFrameData,
 } from './api';
 import {
   updateLoadingCourseUnitStatus,
@@ -38,7 +38,7 @@ import {
   duplicateXBlock,
   fetchStaticFileNoticesSuccess,
   reorderXBlockList,
-  fetchXBlockIframeResources,
+  fetchXBlockIFrameResources,
 } from './slice';
 import { getNotificationMessage } from './utils';
 
@@ -270,14 +270,14 @@ export function setXBlockOrderListQuery(blockId, xblockListIds, restoreCallback)
   };
 }
 
-export function fetchXBlockIframeHtmlAndResourcesQuery(xblockId) {
+export function fetchXBlockIFrameHtmlAndResourcesQuery(xblockId) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));
 
     try {
-      const xblockIframeData = await getXBlockIframeData(xblockId);
-      dispatch(fetchXBlockIframeResources({ xblockId, ...xblockIframeData }));
+      const xblockIFrameData = await getXBlockIFrameData(xblockId);
+      dispatch(fetchXBlockIFrameResources({ xblockId, ...xblockIFrameData }));
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));

webpack.dev.config.js

@@ -24,7 +24,7 @@ config.plugins.push(
       },
       {
         context: path.resolve(__dirname, 'src/course-unit/course-xblock/xblock-content/iframe-wrapper/static'),
-        from: 'XBlockIframe.css',
+        from: 'XBlockIFrame.css',
       },
     ],
   }),

webpack.prod.config.js

@@ -24,7 +24,7 @@ config.plugins.push(
       },
       {
         context: path.resolve(__dirname, 'src/course-unit/course-xblock/xblock-content/iframe-wrapper/static'),
-        from: 'XBlockIframe.css',
+        from: 'XBlockIFrame.css',
       },
     ],
   }),