refactor: reorder arguments in web ui

frontend/src/components/common/AutoRefreshControl.tsx

@@ -25,14 +25,14 @@ import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
 import React, { useState } from "react";
 
 interface AutoRefreshControlProps {
-    intervals: AutoRefreshInterval[];
     currentInterval: number;
+    intervals: AutoRefreshInterval[];
     onIntervalChange: (interval: number) => void;
 }
 
 export default function AutoRefreshControl({
-    intervals,
     currentInterval,
+    intervals,
     onIntervalChange,
 }: AutoRefreshControlProps): React.JSX.Element | null {
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -46,25 +46,25 @@ export default function AutoRefreshControl({
     return <>
         <Tooltip title="Auto-refresh">
             <IconButton
-                size="small"
                 aria-label="Auto-refresh"
-                onClick={event => setAnchorEl(event.currentTarget)}
                 color={enabled ? "primary" : "default"}
+                onClick={event => setAnchorEl(event.currentTarget)}
+                size="small"
             >
                 {enabled ? <TimerIcon fontSize="small" /> : <TimerOffIcon fontSize="small" />}
             </IconButton>
         </Tooltip>
         <Menu
             anchorEl={anchorEl}
-            open={Boolean(anchorEl)}
             onClose={() => setAnchorEl(null)}
+            open={Boolean(anchorEl)}
         >
             <MenuItem
-                selected={!enabled}
                 onClick={() => {
                     onIntervalChange(0);
                     setAnchorEl(null);
                 }}
+                selected={!enabled}
             >
                 <ListItemIcon>
                     {!enabled && <CheckIcon fontSize="small" />}
@@ -74,11 +74,11 @@ export default function AutoRefreshControl({
             {intervals.map(interval =>
                 <MenuItem
                     key={interval.interval}
-                    selected={enabled && interval.interval === currentInterval}
                     onClick={() => {
                         onIntervalChange(interval.interval);
                         setAnchorEl(null);
                     }}
+                    selected={enabled && interval.interval === currentInterval}
                 >
                     <ListItemIcon>
                         {enabled && interval.interval === currentInterval && <CheckIcon fontSize="small" />}

frontend/src/components/common/CodeBlock.tsx

@@ -46,27 +46,24 @@ export default function CodeBlock({
 
     return <Box sx={{ position: "relative" }}>
         <Box
-            ref={preRef}
             onScroll={onScroll}
+            ref={preRef}
             sx={{ overflow: "auto", height }}
         >
             <SyntaxHighlighter
+                customStyle={{
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    fontSize: "0.8rem",
+                    padding: theme.spacing(2),
+                }}
                 language={language}
                 style={mode === "dark" ? vs2015 : githubGist}
                 wrapLongLines
-                customStyle={{
-                    padding: theme.spacing(2),
-                    borderRadius: `${theme.shape.borderRadius}px`,
-                    fontSize: "0.8rem",
-                    fontFamily: "monospace",
-                    margin: 0,
-                    minHeight: "100%",
-                }}
             >
                 {content}
             </SyntaxHighlighter>
         </Box>
-        {content && <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+        {content && <Box sx={{ position: "absolute", right: 8, top: 8 }}>
             <CopyButton text={content} />
         </Box>}
     </Box>;

frontend/src/components/common/CopyButton.tsx

@@ -40,7 +40,7 @@ export default function CopyButton({ text }: CopyButtonProps): React.JSX.Element
     };
 
     return <Tooltip title={copied ? "Copied!" : "Copy"}>
-        <IconButton size="small" aria-label={copied ? "Copied" : "Copy"} onClick={() => void handleCopy()}>
+        <IconButton aria-label={copied ? "Copied" : "Copy"} onClick={() => void handleCopy()} size="small">
             {copied ? <CheckIcon fontSize="small" /> : <ContentCopyIcon fontSize="small" />}
         </IconButton>
     </Tooltip>;

frontend/src/components/common/DialogHeader.tsx

@@ -28,7 +28,7 @@ interface DialogHeaderProps {
 }
 
 export default function DialogHeader({ children, onClose, sx }: DialogHeaderProps): React.JSX.Element {
-    return <DialogTitle sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", ...sx }}>
+    return <DialogTitle sx={{ alignItems: "center", display: "flex", justifyContent: "space-between", ...sx }}>
         {children}
         <IconButton aria-label="Close" onClick={onClose} size="small" sx={{ color: "inherit" }}>
             <CloseIcon />

frontend/src/components/common/NotificationItem.tsx

@@ -35,12 +35,12 @@ export default function NotificationItem({ notification, onClose }: Notification
     }, []);
 
     return (
-        <Slide direction="down" in={show} mountOnEnter unmountOnExit onExited={() => onClose(notification.id)}>
+        <Slide direction="down" in={show} mountOnEnter onExited={() => onClose(notification.id)} unmountOnExit>
             <Alert
                 onClose={() => setShow(false)}
                 severity={notification.severity}
-                variant="filled"
                 sx={{ width: "100%", pointerEvents: "auto" }}
+                variant="filled"
             >
                 <strong>{notification.title}</strong>
                 {notification.message && ` - ${notification.message}`}

frontend/src/components/common/RepositorySelect.tsx

@@ -30,9 +30,9 @@ export default function RepositorySelect({
     return <FormControl fullWidth margin="normal">
         <InputLabel>repository</InputLabel>
         <Select
-            value={repositorySelect.selectedKey || (currentRepository?.key ?? "")}
             label="repository"
             onChange={event => repositorySelect.setSelectedKey(event.target.value)}
+            value={repositorySelect.selectedKey || (currentRepository?.key ?? "")}
         >
             {repositories.map(repository =>
                 <MenuItem key={repository.key} value={repository.key}>