feat: add hideShowMoreMessageButton prop to WorkerStatus and ShowMoreText components for better control over message display

Author: AbhishekA1509

src/Shared/Components/CICDHistory/BuildAndTaskSummaryTooltipCard.tsx

@@ -45,6 +45,7 @@ const BuildAndTaskSummaryTooltipCard = memo(
                         workerMessageContainerClassName="cn-7 fs-12 fw-4 lh-18"
                         titleClassName="cn-9 fs-12 fw-4 lh-20"
                         viewWorkerPodClassName="fs-12"
+                        hideShowMoreMessageButton
                     />
                 </div>
 

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -139,6 +139,7 @@ export const WorkerStatus = React.memo(
         workerMessageContainerClassName,
         titleClassName = 'cn-9 fs-13 fw-4 lh-20',
         viewWorkerPodClassName = 'fs-13',
+        hideShowMoreMessageButton = false,
     }: WorkerStatusType): JSX.Element | null => {
         if (!message && !podStatus) {
             return null
@@ -191,6 +192,7 @@ export const WorkerStatus = React.memo(
                             key={message}
                             textClass="cn-7"
                             containerClass={workerMessageContainerClassName}
+                            hideShowMore={hideShowMoreMessageButton}
                         />
                     )}
                 </div>

src/Shared/Components/CICDHistory/types.tsx

@@ -348,6 +348,10 @@ export interface WorkerStatusType
     workerMessageContainerClassName?: string
     titleClassName?: string
     viewWorkerPodClassName?: string
+    /**
+     * @default false
+     */
+    hideShowMoreMessageButton?: boolean
 }
 
 export type FinishedType = { artifact: string; type: HistoryComponentType } & (

src/Shared/Components/ShowMoreText/ShowMoreText.tsx

@@ -21,15 +21,16 @@ interface ShowMoreTextProps {
     text: string
     textClass?: string
     containerClass?: string
+    hideShowMore?: boolean
 }
 
-const ShowMoreText = ({ text, textClass, containerClass = 'min-w-385 pr-20' }: ShowMoreTextProps) => {
+const ShowMoreText = ({ text, textClass, containerClass = 'min-w-385 pr-20', hideShowMore }: ShowMoreTextProps) => {
     const ellipsisText = useRef(null)
     const [showToggle, setShowToggle] = useState(false)
     const [showAllText, setShowAllText] = useState(false)
 
     useEffect(() => {
-        if (ellipsisText.current?.offsetHeight && ellipsisText.current?.scrollHeight) {
+        if (!hideShowMore && ellipsisText.current?.offsetHeight && ellipsisText.current?.scrollHeight) {
             if (ellipsisText.current.offsetHeight === ellipsisText.current?.scrollHeight) {
                 setShowToggle(false)
             } else {
@@ -46,7 +47,7 @@ const ShowMoreText = ({ text, textClass, containerClass = 'min-w-385 pr-20' }: S
         <div className={containerClass}>
             <span
                 ref={ellipsisText}
-                className={`${textClass || ''} ${!showAllText ? 'dc__truncate' : ''} dc__word-break`}
+                className={`${textClass || ''} ${hideShowMore ? 'dc__truncate--clamp-3' : ''} ${!showAllText ? 'dc__truncate' : ''} dc__word-break`}
             >
                 {text}
             </span>