From cfe5ff035578ede95613b0c545708466da78cbea Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Fri, 18 Mar 2022 18:31:42 -0300
Subject: [PATCH] 16672: Adds font size control to the log viewer.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 src/components/code-snippet/code-snippet.tsx  |  5 +++--
 src/components/icon/icon.tsx                  |  4 ++++
 src/views/process-panel/process-log-card.tsx  | 22 ++++++++++++++++++-
 .../process-log-code-snippet.tsx              |  3 ++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx
index d0cf6ab3..6dc12401 100644
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -25,17 +25,18 @@ export interface CodeSnippetDataProps {
     className?: string;
     apiResponse?: boolean;
     containerClassName?: string;
+    fontSize?: number;
 }
 
 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
 
 export const CodeSnippet = withStyles(styles)(
-    ({ classes, lines, className, containerClassName, apiResponse }: CodeSnippetProps) =>
+    ({ classes, lines, className, containerClassName, apiResponse, fontSize }: CodeSnippetProps) =>
         <Typography
             component="div"
             className={classNames(classes.root, containerClassName, className)}>
                 { lines.map((line: string, index: number) => {
-                    return <Typography key={index} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
+                    return <Typography key={index} style={{ fontSize: fontSize }} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
                 }) }
         </Typography>
     );
\ No newline at end of file
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 7fb74e81..557e22e7 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -66,6 +66,8 @@ import LinkOutlined from '@material-ui/icons/LinkOutlined';
 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
 import Computer from '@material-ui/icons/Computer';
 import WrapText from '@material-ui/icons/WrapText';
+import TextIncrease from '@material-ui/icons/ZoomIn';
+import TextDecrease from '@material-ui/icons/ZoomOut';
 
 // Import FontAwesome icons
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -175,3 +177,5 @@ export const CanWriteIcon: IconType = (props) => <Edit {...props} />;
 export const CanManageIcon: IconType = (props) => <Computer {...props} />;
 export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
 export const WordWrapIcon: IconType = (props) => <WrapText {...props} />;
+export const TextIncreaseIcon: IconType = (props) => <TextIncrease {...props} />;
+export const TextDecreaseIcon: IconType = (props) => <TextDecrease {...props} />;
diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx
index bbb4ff9d..56ac4d92 100644
--- a/src/views/process-panel/process-log-card.tsx
+++ b/src/views/process-panel/process-log-card.tsx
@@ -21,6 +21,8 @@ import {
     CollectionIcon,
     LogIcon,
     MaximizeIcon,
+    TextDecreaseIcon,
+    TextIncreaseIcon,
     WordWrapIcon
 } from 'components/icon/icon';
 import { Process } from 'store/processes/process';
@@ -87,6 +89,10 @@ export const ProcessLogsCard = withStyles(styles)(
     ({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog,
         doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
         const [wordWrapToggle, setWordWrapToggle] = useState<boolean>(true);
+        const [fontSize, setFontSize] = useState<number>(3);
+        const fontBaseSize = 10;
+        const fontStepSize = 1;
+
         return <Grid item className={classes.root} xs={12}>
             <Card className={classes.card}>
                 <CardHeader className={classes.header}
@@ -96,6 +102,20 @@ export const ProcessLogsCard = withStyles(styles)(
                             <ProcessLogForm selectedFilter={selectedFilter}
                                 filters={filters} onChange={onLogFilterChange} />
                         </Grid>
+                        <Grid item>
+                            <Tooltip title="Decrease font size" disableFocusListener>
+                                <IconButton onClick={() => fontSize > 1 && setFontSize(fontSize-1)}>
+                                    <TextDecreaseIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+                        <Grid item>
+                            <Tooltip title="Increase font size" disableFocusListener>
+                                <IconButton onClick={() => fontSize < 5 && setFontSize(fontSize+1)}>
+                                    <TextIncreaseIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
                         <Grid item>
                             <Tooltip title="Toggle word wrapping" disableFocusListener>
                                 <IconButton onClick={() => setWordWrapToggle(!wordWrapToggle)}>
@@ -133,7 +153,7 @@ export const ProcessLogsCard = withStyles(styles)(
                             spacing={24}
                             direction='column'>
                             <Grid className={classes.logViewer} item xs>
-                                <ProcessLogCodeSnippet wordWrap={wordWrapToggle} lines={lines} />
+                                <ProcessLogCodeSnippet fontSize={fontBaseSize+(fontStepSize*fontSize)} wordWrap={wordWrapToggle} lines={lines} />
                             </Grid>
                         </Grid>
                         : <DefaultView
diff --git a/src/views/process-panel/process-log-code-snippet.tsx b/src/views/process-panel/process-log-code-snippet.tsx
index eb3ede6f..1ea83912 100644
--- a/src/views/process-panel/process-log-code-snippet.tsx
+++ b/src/views/process-panel/process-log-code-snippet.tsx
@@ -38,13 +38,14 @@ const theme = createMuiTheme({
 
 interface ProcessLogCodeSnippetProps {
     lines: string[];
+    fontSize: number;
     wordWrap?: boolean;
 }
 
 export const ProcessLogCodeSnippet = withStyles(styles)(
     (props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
         <MuiThemeProvider theme={theme}>
-            <CodeSnippet lines={props.lines}
+            <CodeSnippet lines={props.lines} fontSize={props.fontSize}
                 className={props.wordWrap ? props.classes.wordWrap : undefined}
                 containerClassName={props.classes.codeSnippetContainer} />
         </MuiThemeProvider>);
\ No newline at end of file
-- 
2.30.2