refactor: Clean up formatting and improve readability in LongTextViewer and WorkflowElement components

Common/Models/DatabaseModels/Probe.ts

@@ -40,7 +40,7 @@ export enum ProbeConnectionStatus {
 
 @EnableDocumentation()
 @EnableWorkflow({
-  read: true
+  read: true,
 })
 @TableBillingAccessControl({
   create: PlanType.Growth,

Common/UI/Components/LongText/LongTextViewer.tsx

@@ -2,37 +2,39 @@ import React, { FunctionComponent, ReactElement, useState } from "react";
 import Button, { ButtonStyleType } from "../Button/Button";
 
 export interface ComponentProps {
-    text: string;
-    disableTruncation?: boolean;
+  text: string;
+  disableTruncation?: boolean;
 }
 
 const LongTextViewer: FunctionComponent<ComponentProps> = (
-    props: ComponentProps,
+  props: ComponentProps,
 ): ReactElement => {
-    const [showFullText, setShowFullText] = useState<boolean>(false);
-    const characterLimit = 100;
+  const [showFullText, setShowFullText] = useState<boolean>(false);
+  const characterLimit: number = 100;
 
-    const shouldTruncate = !props.disableTruncation && props.text.length > characterLimit;
-    const displayText = shouldTruncate && !showFullText
-        ? `${props.text.substring(0, characterLimit)}...`
-        : props.text;
+  const shouldTruncate: boolean =
+    !props.disableTruncation && props.text.length > characterLimit;
+  const displayText: string =
+    shouldTruncate && !showFullText
+      ? `${props.text.substring(0, characterLimit)}...`
+      : props.text;
 
-    return (
-        <div className="max-w-2xl break-words">
-            <div className="whitespace-pre-wrap">{displayText}</div>
+  return (
+    <div className="max-w-2xl break-words">
+      <div className="whitespace-pre-wrap">{displayText}</div>
 
-            {shouldTruncate && (
-                <Button
-                    className="-mt-1 -ml-3"
-                    onClick={() => {
-                        return setShowFullText(!showFullText);
-                    }}
-                    title={showFullText ? "Show less" : "Show more"}
-                    buttonStyle={ButtonStyleType.SECONDARY_LINK}
-                />
-            )}
-        </div>
-    );
+      {shouldTruncate && (
+        <Button
+          className="-mt-1 -ml-3"
+          onClick={() => {
+            return setShowFullText(!showFullText);
+          }}
+          title={showFullText ? "Show less" : "Show more"}
+          buttonStyle={ButtonStyleType.SECONDARY_LINK}
+        />
+      )}
+    </div>
+  );
 };
 
 export default LongTextViewer;

Common/UI/Components/Table/TableRow.tsx

@@ -148,9 +148,11 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                       ) : (
                         column.noValueMessage || "0%"
                       )
-                    ): column.type === FieldType.LongText ? (
+                    ) : column.type === FieldType.LongText ? (
                       props.item[column.key] ? (
-                        <LongTextViewer text={props.item[column.key] as string} />
+                        <LongTextViewer
+                          text={props.item[column.key] as string}
+                        />
                       ) : (
                         column.noValueMessage || ""
                       )

Dashboard/src/Components/Workflow/WorkflowElement.tsx

@@ -13,16 +13,16 @@ export interface ComponentProps {
 const WorkflowElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (
-    props.workflow._id
-  ) {
+  if (props.workflow._id) {
     const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
     return (
       <AppLink
         onNavigateComplete={props.onNavigateComplete}
         className="hover:underline"
         to={
-          new Route(`/dashboard/${projectId?.toString()}/workflows/${props.workflow._id}`)
+          new Route(
+            `/dashboard/${projectId?.toString()}/workflows/${props.workflow._id}`,
+          )
         }
       >
         <span>{props.workflow.name}</span>