fix: address comments

Pearson-Advance · Oct 25, 2024 · 323b818 · 323b818
1 parent 386cddb
commit 323b818
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx b/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx
@@ -7,7 +7,8 @@ import { Button } from 'react-paragon-topaz';
 import { formatDateRange } from 'helpers';
 import { useInstitutionIdQueryParam } from 'hooks';
 
-import ToolTip from 'features/Dashboard/InstructorAssignSection/ToolTip';
+import EllipsisText from 'features/Dashboard/InstructorAssignSection/EllipsisText';
+import { textLength } from 'features/constants';
 
 import 'features/Dashboard/InstructorAssignSection/index.scss';
 
@@ -19,19 +20,16 @@ const ClassCard = ({ data }) => {
     history.push(addQueryParam(`/manage-instructors/${encodeURIComponent(data?.masterCourseId)}/${encodeURIComponent(data?.classId)}?previous=dashboard`));
   };
 
-  const classElement = 'className';
-  const courseElement = 'courseName';
-
   return (
     <div className="class-card-container">
       <div className="no-responsive">
-        {data?.className.length > 20 ? (
-          <ToolTip title={data?.className} type={classElement} />
+        {data?.className.length > textLength ? (
+          <EllipsisText title={data?.className} type="className" />
         ) : (
           <h4>{data?.className}</h4>
         )}
-        {data?.masterCourseName.length > 20 ? (
-          <ToolTip title={data?.masterCourseName} type={courseElement} />
+        {data?.masterCourseName.length > textLength ? (
+          <EllipsisText title={data?.masterCourseName} type="courseName" />
         ) : (
           <p className="course-name">{data?.masterCourseName}</p>
         )}

diff --git a/...board/InstructorAssignSection/ToolTip.jsx → .../InstructorAssignSection/EllipsisText.jsx b/...board/InstructorAssignSection/ToolTip.jsx → .../InstructorAssignSection/EllipsisText.jsx
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import { Tooltip, OverlayTrigger } from '@edx/paragon';
 
-const ToolTip = ({ title, type }) => (
+import { textLength } from 'features/constants';
+
+const EllipsisText = ({ title, type }) => (
   <OverlayTrigger
     placement={type === 'className' ? 'top' : 'bottom'}
     overlay={
@@ -15,16 +17,16 @@ const ToolTip = ({ title, type }) => (
     show={undefined}
   >
     {type === 'className' ? (
-      <h4>{title.substring(0, 20)}...</h4>
+      <h4>{title.substring(0, textLength)}...</h4>
     ) : (
-      <p className="course-name">{title.substring(0, 20)}...</p>
+      <p className="course-name">{title.substring(0, textLength)}...</p>
     )}
   </OverlayTrigger>
 );
 
-ToolTip.propTypes = {
+EllipsisText.propTypes = {
   title: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
 };
 
-export default ToolTip;
+export default EllipsisText;
diff --git a/src/features/constants.js b/src/features/constants.js
@@ -82,3 +82,10 @@ export const cookieText = 'This website uses cookies to ensure you get the best
  * @constant {string}
  */
 export const unauthorizedText = 'You do not have access to CertPREP Manager. If you believe you should have access then please contact your sales rep.';
+
+/**
+ * Constant for text length.
+ * @readonly
+ * @number
+ */
+export const textLength = 20;