PADV-1158 - Truncate class/course title with an ellipsis at the end

src/features/Dashboard/DashboardPage/_test_/index.test.jsx

@@ -64,7 +64,7 @@ describe('DashboardPage component', () => {
   );
 
   test('renders components', () => {
-    const { getByText } = component;
+    const { getByText, getAllByText } = component;
 
     expect(getByText('This week')).toBeInTheDocument();
     expect(getByText('Last month')).toBeInTheDocument();
@@ -73,8 +73,8 @@ describe('DashboardPage component', () => {
     expect(getByText('Classes scheduled')).toBeInTheDocument();
     expect(getByText('License inventory')).toBeInTheDocument();
     expect(getByText('Instructor assignment')).toBeInTheDocument();
-    expect(getByText('ccx 1')).toBeInTheDocument();
-    expect(getByText('Demo Course 1')).toBeInTheDocument();
+    expect(getAllByText('ccx 1')[0]).toBeInTheDocument();
+    expect(getAllByText('Demo Course 1')[0]).toBeInTheDocument();
     expect(getByText('License Name 1')).toBeInTheDocument();
     expect(getByText('Class schedule')).toBeInTheDocument();
     expect(getByText('No classes scheduled at this time')).toBeInTheDocument();

src/features/Dashboard/DashboardPage/index.scss

@@ -23,6 +23,10 @@
   min-height: 426px;
 }
 
+.responsive {
+  display: none;
+}
+
 .schedule-section {
   margin-bottom: 2rem;
 }
@@ -53,4 +57,12 @@
   .instructor-assign-section {
     min-height: 200px;
   }
+
+  .no-responsive {
+    display: none;
+  }
+
+  .responsive {
+    display: block;
+  }
 }

src/features/Dashboard/InstructorAssignSection/ClassCard.jsx

@@ -7,6 +7,9 @@ import { Button } from 'react-paragon-topaz';
 import { formatDateRange } from 'helpers';
 import { useInstitutionIdQueryParam } from 'hooks';
 
+import EllipsisText from 'features/Dashboard/InstructorAssignSection/EllipsisText';
+import { textLength } from 'features/constants';
+
 import 'features/Dashboard/InstructorAssignSection/index.scss';
 
 const ClassCard = ({ data }) => {
@@ -19,8 +22,23 @@ const ClassCard = ({ data }) => {
 
   return (
     <div className="class-card-container">
-      <h4>{data?.className}</h4>
-      <p className="course-name">{data?.masterCourseName}</p>
+      <div className="no-responsive">
+        {data?.className.length > textLength ? (
+          <EllipsisText title={data?.className} type="className" />
+        ) : (
+          <h4>{data?.className}</h4>
+        )}
+        {data?.masterCourseName.length > textLength ? (
+          <EllipsisText title={data?.masterCourseName} type="courseName" />
+        ) : (
+          <p className="course-name">{data?.masterCourseName}</p>
+        )}
+      </div>
+      <div className="responsive">
+        <h4>{data?.className}</h4>
+        <p className="course-name">{data?.masterCourseName}</p>
+      </div>
+
       <p className="date"><i className="fa-sharp fa-regular fa-calendar-day" />{formatDateRange(data.startDate, data?.endDate)}</p>
       <Button variant="outline-primary" size="sm" onClick={handleManageButton}>
         <i className="fa-regular fa-chalkboard-user" />

src/features/Dashboard/InstructorAssignSection/EllipsisText.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import { Tooltip, OverlayTrigger } from '@edx/paragon';
+
+import { textLength } from 'features/constants';
+
+const EllipsisText = ({ title, type }) => (
+  <OverlayTrigger
+    placement={type === 'className' ? 'top' : 'bottom'}
+    overlay={
+    (
+      <Tooltip>
+        {title}
+      </Tooltip>
+    )
+    }
+    trigger={['hover', 'focus']}
+    show={undefined}
+  >
+    {type === 'className' ? (
+      <h4>{title.substring(0, textLength)}...</h4>
+    ) : (
+      <p className="course-name">{title.substring(0, textLength)}...</p>
+    )}
+  </OverlayTrigger>
+);
+
+EllipsisText.propTypes = {
+  title: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+export default EllipsisText;

src/features/Dashboard/InstructorAssignSection/_test_/index.test.jsx

@@ -33,12 +33,12 @@ describe('Instructor Assign component', () => {
   );
 
   test('renders components', () => {
-    const { getByText } = component;
+    const { getByText, getAllByText } = component;
 
     expect(getByText('Instructor assignment')).toBeInTheDocument();
-    expect(getByText('ccx 1')).toBeInTheDocument();
-    expect(getByText('Demo Course 1')).toBeInTheDocument();
-    expect(getByText('Jan 23, 2024')).toBeInTheDocument();
+    expect(getAllByText('ccx 1')[0]).toBeInTheDocument();
+    expect(getAllByText('Demo Course 1')[0]).toBeInTheDocument();
+    expect(getAllByText('Jan 23, 2024')[0]).toBeInTheDocument();
     expect(getByText('Manage instructor')).toBeInTheDocument();
   });
 });

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;