refactor: refactoring after review

src/course-unit/CourseUnit.jsx

@@ -124,7 +124,7 @@ const CourseUnit = ({ courseId }) => {
             <Layout.Element>
               <Stack gap={3}>
                 <Sidebar blockId={blockId} data-testid="course-unit-sidebar" />
-                <Sidebar isDisplayUnitLocation data-testid="course-unit-location-sidebar" />
+                <Sidebar displayUnitLocation data-testid="course-unit-location-sidebar" />
               </Stack>
             </Layout.Element>
           </Layout>

src/course-unit/CourseUnit.scss

@@ -1,5 +1,5 @@
 @import "./breadcrumbs/Breadcrumbs";
 @import "./course-sequence/CourseSequence";
 @import "./add-component/AddComponent";
-@import "./course-xblock/CourseXblock";
+@import "./course-xblock/CourseXBlock";
 @import "./sidebar/Sidebar";

src/course-unit/CourseUnit.test.jsx

@@ -51,7 +51,7 @@ const courseId = '123';
 const blockId = '567890';
 const unitDisplayName = courseUnitIndexMock.metadata.display_name;
 const mockedUsedNavigate = jest.fn();
-const userName = 'edx';
+const userName = 'openedx';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -719,7 +719,7 @@ describe('<CourseUnit />', () => {
     expect(discardChangesBtn).not.toBeInTheDocument();
   });
 
-  it('checks whether xblock is removed when the corresponding delete button is clicked and sidebar is the updated', async () => {
+  it('checks whether xblock is removed when the corresponding delete button is clicked and the sidebar is the updated', async () => {
     const {
       getByText,
       getAllByLabelText,

src/course-unit/__mocks__/courseVerticalChildren.js

@@ -2,12 +2,12 @@ module.exports = {
   children: [
     {
       name: 'Discussion',
-      block_id: 'block-v1:edX+L153+3T2023+type@discussion+block@fecd20842dd24f50bdc06643e791b013',
+      block_id: 'block-v1:OpenedX+L153+3T2023+type@discussion+block@fecd20842dd24f50bdc06643e791b013',
       block_type: 'discussion',
     },
     {
       name: 'Drag and Drop',
-      block_id: 'block-v1:edX+L153+3T2023+type@drag-and-drop-v2+block@b33cf1f6df4c41639659bc91132eeb02',
+      block_id: 'block-v1:OpenedX+L153+3T2023+type@drag-and-drop-v2+block@b33cf1f6df4c41639659bc91132eeb02',
       block_type: 'drag-and-drop-v2',
     },
   ],

src/course-unit/constants.js

@@ -58,7 +58,7 @@ export const UNIT_VISIBILITY_STATES = {
   ready: 'ready',
 };
 
-export const COLORS = {
+export const ICON_COLOR_VARIANTS = {
   BLACK: '#000',
   GREEN: '#0D7D4D',
 };

src/course-unit/sidebar/components/SidebarBody.jsx

@@ -8,7 +8,7 @@ import { getPublishInfo } from '../utils';
 import messages from '../messages';
 import ReleaseInfoComponent from './ReleaseInfoComponent';
 
-const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => {
+const SidebarBody = ({ releaseLabel, displayUnitLocation, locationId }) => {
   const intl = useIntl();
   const {
     editedOn,
@@ -21,7 +21,7 @@ const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => {
   return (
     <Card.Body className="course-unit-sidebar-date">
       <Stack>
-        {isDisplayUnitLocation ? (
+        {displayUnitLocation ? (
           <span>
             <h5 className="course-unit-sidebar-date-stage m-0">
               {intl.formatMessage(messages.unitLocationTitle)}
@@ -53,12 +53,12 @@ const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => {
 
 SidebarBody.propTypes = {
   releaseLabel: PropTypes.string.isRequired,
-  isDisplayUnitLocation: PropTypes.bool,
+  displayUnitLocation: PropTypes.bool,
   locationId: PropTypes.string,
 };
 
 SidebarBody.defaultProps = {
-  isDisplayUnitLocation: false,
+  displayUnitLocation: false,
   locationId: null,
 };
 

src/course-unit/sidebar/components/SidebarHeader.jsx

@@ -7,22 +7,22 @@ import { getCourseUnitData } from '../../data/selectors';
 import { getIconVariant } from '../utils';
 import messages from '../messages';
 
-const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => {
+const SidebarHeader = ({ title, visibilityState, displayUnitLocation }) => {
   const intl = useIntl();
   const { hasChanges, published } = useSelector(getCourseUnitData);
   const { iconSrc, colorVariant } = getIconVariant(visibilityState, published, hasChanges);
 
   return (
     <Stack className="course-unit-sidebar-header" direction="horizontal">
-      {!isDisplayUnitLocation && (
+      {!displayUnitLocation && (
         <Icon
           className="course-unit-sidebar-header-icon"
           svgAttrs={{ color: colorVariant }}
           src={iconSrc}
         />
       )}
       <h3 className="course-unit-sidebar-header-title m-0">
-        {isDisplayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}
+        {displayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}
       </h3>
     </Stack>
   );
@@ -31,11 +31,11 @@ const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => {
 SidebarHeader.propTypes = {
   title: PropTypes.string.isRequired,
   visibilityState: PropTypes.string.isRequired,
-  isDisplayUnitLocation: PropTypes.bool,
+  displayUnitLocation: PropTypes.bool,
 };
 
 SidebarHeader.defaultProps = {
-  isDisplayUnitLocation: false,
+  displayUnitLocation: false,
 };
 
 export default SidebarHeader;

src/course-unit/sidebar/components/sidebar-footer/index.jsx

@@ -12,14 +12,14 @@ const SidebarFooter = ({
   handlePublishing,
   openDiscardModal,
   visibleToStaffOnly,
-  isDisplayUnitLocation,
+  displayUnitLocation,
 }) => {
   const intl = useIntl();
 
   return (
     <Card.Footer className="course-unit-sidebar-footer" orientation="horizontal">
       <Stack className="course-unit-sidebar-visibility">
-        {isDisplayUnitLocation ? (
+        {displayUnitLocation ? (
           <small className="course-unit-sidebar-location-description">
             {intl.formatMessage(messages.unitLocationDescription, { id: locationId })}
           </small>
@@ -42,15 +42,15 @@ const SidebarFooter = ({
 
 SidebarFooter.propTypes = {
   locationId: PropTypes.string,
-  isDisplayUnitLocation: PropTypes.bool,
+  displayUnitLocation: PropTypes.bool,
   openDiscardModal: PropTypes.func.isRequired,
   openVisibleModal: PropTypes.func.isRequired,
   handlePublishing: PropTypes.func.isRequired,
   visibleToStaffOnly: PropTypes.bool.isRequired,
 };
 
 SidebarFooter.defaultProps = {
-  isDisplayUnitLocation: false,
+  displayUnitLocation: false,
   locationId: null,
 };
 

src/course-unit/sidebar/index.jsx

@@ -13,7 +13,7 @@ import { SidebarBody, SidebarFooter, SidebarHeader } from './components';
 import useCourseUnitData from './hooks';
 import messages from './messages';
 
-const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
+const Sidebar = ({ blockId, displayUnitLocation, ...props }) => {
   const {
     title,
     locationId,
@@ -23,8 +23,8 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
   } = useCourseUnitData(useSelector(getCourseUnitData));
   const intl = useIntl();
   const dispatch = useDispatch();
-  const [isOpenDiscardModal, openDiscardModal, closeDiscardModal] = useToggle(false);
-  const [isOpenVisibleModal, openVisibleModal, closeVisibleModal] = useToggle(false);
+  const [isDiscardModalOpen, openDiscardModal, closeDiscardModal] = useToggle(false);
+  const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false);
 
   const handleCourseUnitVisibility = () => {
     closeVisibleModal();
@@ -50,24 +50,24 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
       <SidebarHeader
         title={title}
         visibilityState={visibilityState}
-        isDisplayUnitLocation={isDisplayUnitLocation}
+        displayUnitLocation={displayUnitLocation}
       />
       <SidebarBody
         locationId={locationId}
         releaseLabel={releaseLabel}
-        isDisplayUnitLocation={isDisplayUnitLocation}
+        displayUnitLocation={displayUnitLocation}
       />
       <SidebarFooter
         locationId={locationId}
         openDiscardModal={openDiscardModal}
         openVisibleModal={openVisibleModal}
-        isDisplayUnitLocation={isDisplayUnitLocation}
+        displayUnitLocation={displayUnitLocation}
         handlePublishing={handleCourseUnitPublish}
         visibleToStaffOnly={visibleToStaffOnly}
       />
       <ModalNotification
         title={intl.formatMessage(messages.modalDiscardUnitChangesTitle)}
-        isOpen={isOpenDiscardModal}
+        isOpen={isDiscardModalOpen}
         actionButtonText={intl.formatMessage(messages.modalDiscardUnitChangesActionButtonText)}
         cancelButtonText={intl.formatMessage(messages.modalDiscardUnitChangesCancelButtonText)}
         handleAction={handleCourseUnitDiscardChanges}
@@ -77,7 +77,7 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
       />
       <ModalNotification
         title={intl.formatMessage(messages.modalMakeVisibilityTitle)}
-        isOpen={isOpenVisibleModal}
+        isOpen={isVisibleModalOpen}
         actionButtonText={intl.formatMessage(messages.modalMakeVisibilityActionButtonText)}
         cancelButtonText={intl.formatMessage(messages.modalMakeVisibilityCancelButtonText)}
         handleAction={handleCourseUnitVisibility}
@@ -91,12 +91,12 @@ const Sidebar = ({ blockId, isDisplayUnitLocation, ...props }) => {
 
 Sidebar.propTypes = {
   blockId: PropTypes.string,
-  isDisplayUnitLocation: PropTypes.bool,
+  displayUnitLocation: PropTypes.bool,
 };
 
 Sidebar.defaultProps = {
   blockId: null,
-  isDisplayUnitLocation: false,
+  displayUnitLocation: false,
 };
 
 export default Sidebar;

src/course-unit/sidebar/utils.js

@@ -4,7 +4,7 @@ import {
   InfoOutline as InfoOutlineIcon,
 } from '@openedx/paragon/icons';
 
-import { COLORS, UNIT_VISIBILITY_STATES } from '../constants';
+import { ICON_COLOR_VARIANTS, UNIT_VISIBILITY_STATES } from '../constants';
 import messages from './messages';
 
 /**
@@ -79,11 +79,11 @@ export const getVisibilityTitle = (intl, releasedToStudents, published, hasChang
  */
 export const getIconVariant = (visibilityState, published, hasChanges) => {
   const iconVariants = {
-    [UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
-    [UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: COLORS.GREEN },
-    publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: COLORS.BLACK },
-    publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
-    default: { iconSrc: InfoOutlineIcon, colorVariant: COLORS.BLACK },
+    [UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    [UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: ICON_COLOR_VARIANTS.GREEN },
+    publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    default: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
   };
   if (visibilityState in iconVariants) {
     return iconVariants[visibilityState];