Create wrapper component for sytanx-highlighter component

ui/src/components/ActiveTasksTable.tsx

@@ -22,8 +22,7 @@ import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import Typography from "@material-ui/core/Typography";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import {
   listActiveTasksAsync,
   cancelActiveTaskAsync,
@@ -326,7 +325,7 @@ function Row(props: RowProps) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/ArchivedTasksTable.tsx

@@ -24,8 +24,7 @@ import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import { AppState } from "../store";
 import {
   batchDeleteArchivedTasksAsync,
@@ -385,7 +384,7 @@ function Row(props: RowProps) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/DeadTasksTable.tsx

@@ -24,8 +24,7 @@ import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import { AppState } from "../store";
 import {
   batchDeleteArchivedTasksAsync,
@@ -375,7 +374,7 @@ function Row(props: RowProps) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/PendingTasksTable.tsx

@@ -20,7 +20,6 @@ import Typography from "@material-ui/core/Typography";
 import TableFooter from "@material-ui/core/TableFooter";
 import TablePagination from "@material-ui/core/TablePagination";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import TablePaginationActions, {
   defaultPageSize,
   rowsPerPageOptions,
@@ -189,7 +188,7 @@ function Row(props: { task: PendingTask }) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/RetryTasksTable.tsx

@@ -25,7 +25,6 @@ import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import {
   batchDeleteRetryTasksAsync,
   batchRunRetryTasksAsync,
@@ -430,7 +429,7 @@ function Row(props: RowProps) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/ScheduledTasksTable.tsx

@@ -25,8 +25,7 @@ import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import Typography from "@material-ui/core/Typography";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import {
   batchDeleteScheduledTasksAsync,
   batchRunScheduledTasksAsync,
@@ -424,7 +423,7 @@ function Row(props: RowProps) {
               <Typography variant="h6" gutterBottom component="div">
                 Payload
               </Typography>
-              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+              <SyntaxHighlighter language="json">
                 {JSON.stringify(task.payload, null, 2)}
               </SyntaxHighlighter>
             </Box>

ui/src/components/SchedulerEntriesTable.tsx

@@ -14,10 +14,9 @@ import Tooltip from "@material-ui/core/Tooltip";
 import HistoryIcon from "@material-ui/icons/History";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import { SortDirection, SortableTableColumn } from "../types/table";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
+import SyntaxHighlighter from "./SyntaxHighlighter";
 import { SchedulerEntry } from "../api";
 import { timeAgo, durationBefore } from "../utils";
 import SchedulerEnqueueEventsTable from "./SchedulerEnqueueEventsTable";
@@ -288,12 +287,12 @@ function Row(props: RowProps) {
         {entry.task_type}
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>
-        <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+        <SyntaxHighlighter language="json">
           {JSON.stringify(entry.task_payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>
-        <SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
+        <SyntaxHighlighter language="go">
           {entry.options.length > 0 ? entry.options.join(", ") : "No options"}
         </SyntaxHighlighter>
       </TableCell>

ui/src/components/ServersTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
-import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Box from "@material-ui/core/Box";
 import Collapse from "@material-ui/core/Collapse";
@@ -18,9 +18,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "./SyntaxHighlighter";
-import syntaxHighlightStyleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
-import syntaxHighlightStyleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
 import { ServerInfo } from "../api";
 import { SortDirection, SortableTableColumn } from "../types/table";
 import { timeAgo, uuidPrefix } from "../utils";
@@ -216,8 +214,6 @@ const useRowStyles = makeStyles((theme) => ({
 
 function Row(props: RowProps) {
   const classes = useRowStyles();
-  const theme = useTheme<Theme>();
-  const isDarkTheme = theme.palette.type === "dark";
   const { server } = props;
   const [open, setOpen] = useState<boolean>(false);
   const qnames = Object.keys(server.queue_priorities);
@@ -284,11 +280,6 @@ function Row(props: RowProps) {
                         <TableCell>
                           <SyntaxHighlighter
                             language="json"
-                            style={
-                              isDarkTheme
-                                ? syntaxHighlightStyleDark
-                                : syntaxHighlightStyleLight
-                            }
                             customStyle={{ margin: 0 }}
                           >
                             {JSON.stringify(worker.task.payload)}

ui/src/components/SyntaxHighlighter.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useTheme, Theme } from "@material-ui/core/styles";
+import ReactSyntaxHighlighter from "react-syntax-highlighter";
+import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
+import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
+
+interface Props {
+  language: string;
+  children: string;
+  customStyle?: object;
+}
+
+// Theme aware syntax-highlighter component.
+export default function SyntaxHighlighter(props: Props) {
+  const theme = useTheme<Theme>();
+  const style = theme.palette.type === "dark" ? styleDark : styleLight;
+  return (
+    <ReactSyntaxHighlighter
+      language={props.language}
+      style={style}
+      customStyle={props.customStyle}
+    >
+      {props.children}
+    </ReactSyntaxHighlighter>
+  );
+}

ui/src/views/RedisInfoView.tsx

@@ -1,16 +1,14 @@
 import React from "react";
 import { connect, ConnectedProps } from "react-redux";
 import Container from "@material-ui/core/Container";
-import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Alert from "@material-ui/lab/Alert";
 import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter from "../components/SyntaxHighlighter";
-import syntaxHighlightStyleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
-import syntaxHighlightStyleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
 import { getRedisInfoAsync } from "../actions/redisInfoActions";
 import { usePolling } from "../hooks";
 import { AppState } from "../store";
@@ -41,8 +39,6 @@ type Props = ConnectedProps<typeof connector>;
 function RedisInfoView(props: Props) {
   const classes = useStyles();
   const { pollInterval, getRedisInfoAsync, redisInfo, redisInfoRaw } = props;
-  const theme = useTheme<Theme>();
-  const isDarkTheme = theme.palette.type === "dark";
   usePolling(getRedisInfoAsync, pollInterval);
 
   // Metrics to show
@@ -156,14 +152,7 @@ function RedisInfoView(props: Props) {
                   <Typography variant="h6" color="textSecondary">
                     INFO Command Output
                   </Typography>
-                  <SyntaxHighlighter
+                  <SyntaxHighlighter language="yaml">
-                    language="yaml"
-                    style={
-                      isDarkTheme
-                        ? syntaxHighlightStyleDark
-                        : syntaxHighlightStyleLight
-                    }
-                  >
                     {redisInfoRaw}
                   </SyntaxHighlighter>
                 </Grid>