temp: use deprecated truncate component

Author: dcoa

src/course-outline/card-header/TitleButton.jsx

@@ -39,7 +39,7 @@ const TitleButton = ({
         className="item-card-header__title-btn"
         onClick={onTitleClick}
       >
-        <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+        <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
       </Button>
     </OverlayTrigger>
   );

src/course-outline/card-header/TitleLink.jsx

@@ -14,7 +14,7 @@ const TitleLink = ({
     className="item-card-header__title-btn"
     to={titleLink}
   >
-    <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+    <Truncate.Deprecated lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate.Deprecated>
   </Button>
 );
 

src/course-outline/page-alerts/PageAlerts.jsx

@@ -367,9 +367,9 @@ const PageAlerts = ({
         }
         case API_ERROR_TYPES.serverError: {
           const description = (
-            <Truncate lines={2}>
+            <Truncate.Deprecated lines={2}>
               {v.data || intl.formatMessage(messages.serverErrorAlertBody)}
-            </Truncate>
+            </Truncate.Deprecated>
           );
           return {
             key: k,

src/editors/containers/EditorContainer/components/TitleHeader/index.jsx

@@ -49,9 +49,9 @@ const TitleHeader = ({
   }
   return (
     <div className="d-flex flex-row align-items-center mt-1">
-      <Truncate>
+      <Truncate.Deprecated>
         {title}
-      </Truncate>
+      </Truncate.Deprecated>
       <IconButton
         alt={intl.formatMessage(messages.editTitleLabel)}
         iconAs={Icon}

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -66,7 +66,7 @@ const GalleryCard = ({
         </div>
         <div className="card-text px-3 py-2" style={{ marginTop: '10px' }}>
           <h3 className="text-primary-500">
-            <Truncate>{asset.displayName}</Truncate>
+            <Truncate.Deprecated>{asset.displayName}</Truncate.Deprecated>
           </h3>
           { asset.transcripts && (
             <div style={{ margin: '0 0 5px 0' }}>

src/files-and-videos/files-page/FileInfoModalSidebar.jsx

@@ -57,9 +57,9 @@ const FileInfoModalSidebar = ({
       </div>
       <ActionRow>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1}>
+          <Truncate.Deprecated lines={1}>
             {asset?.portableUrl}
-          </Truncate>
+          </Truncate.Deprecated>
         </div>
         <ActionRow.Spacer />
         <IconButton

src/files-and-videos/generic/DeleteConfirmationModal.jsx

@@ -35,9 +35,9 @@ const DeleteConfirmationModal = ({
         styling="basic"
         title={(
           <h3 className="h5 m-n2">
-            <Truncate lines={1}>
+            <Truncate.Deprecated lines={1}>
               {original.displayName}
-            </Truncate>
+            </Truncate.Deprecated>
           </h3>
         )}
         data-testid={`collapsible-${original.id}`}

src/files-and-videos/generic/InfoModal.jsx

@@ -48,9 +48,9 @@ const InfoModal = ({
       <ModalDialog.Header>
         <ModalDialog.Title>
           <div style={{ wordBreak: 'break-word' }}>
-            <Truncate lines={2} className="font-weight-bold small mt-3">
+            <Truncate.Deprecated lines={2} className="font-weight-bold small mt-3">
               {file?.displayName}
-            </Truncate>
+            </Truncate.Deprecated>
           </div>
         </ModalDialog.Title>
       </ModalDialog.Header>

src/files-and-videos/generic/table-components/GalleryCard.jsx

@@ -67,9 +67,9 @@ const GalleryCard = ({
           />
         </div>
         <div style={{ wordBreak: 'break-word' }}>
-          <Truncate lines={1} className="font-weight-bold mt-2 picture-title">
+          <Truncate.Deprecated lines={1} className="font-weight-bold mt-2 picture-title">
             {original.displayName}
-          </Truncate>
+          </Truncate.Deprecated>
         </div>
       </Card.Section>
       <Card.Footer className="p-3 pt-4 row m-0 flex-row-reverse justify-content-between align-items-center">

src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx

@@ -25,9 +25,9 @@ const UploadProgressList = ({ videosList }) => (
         <Stack role="listitem" gap={2} direction="horizontal" className="mb-3 small" key={id}>
           <span>{bulletNumber}</span>
           <div className="col-5 pl-0">
-            <Truncate>
+            <Truncate.Deprecated>
               {video.name}
-            </Truncate>
+            </Truncate.Deprecated>
           </div>
           <div className="col-6 p-0">
             <span className="row m-0 justify-content-end font-weight-bold">