Merge pull request #3 from Tekiter/improve-ux

Tekiter · web-flow · commit 8fe1e6ff6cb8 · 2022-10-11T11:13:56.000+09:00
feat: UI 개선
diff --git a/electron/main/index.ts b/electron/main/index.ts
@@ -5,6 +5,8 @@ import { autoUpdater } from "electron-updater";
 import { release } from "os";
 import { join } from "path";
 
+import { version } from "../../package.json";
+
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith("6.1")) app.disableHardwareAcceleration();
 
@@ -39,7 +41,7 @@ const indexHtml = join(ROOT_PATH.dist, "index.html");
 
 async function createWindow() {
   win = new BrowserWindow({
-    title: "RunTC",
+    title: "RunTC - " + version,
     icon: join(ROOT_PATH.public, "favicon.svg"),
     autoHideMenuBar: true,
     webPreferences: {
diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <title>RunTC</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@vitejs/plugin-react": "^2.0.1",
     "allotment": "^1.17.0",
     "await-to-js": "^3.0.0",
+    "compare-versions": "^5.0.1",
     "electron": "^20.0.2",
     "electron-builder": "^23.3.3",
     "electron-log": "^4.4.8",
diff --git a/src/components/sidePanel/testcaseList/SelectTestcaseItem.tsx b/src/components/sidePanel/testcaseList/SelectTestcaseItem.tsx
@@ -36,10 +36,13 @@ const StyledItem = styled.div<{ selected: boolean }>`
   grid-template-columns: 10px minmax(16px, 1fr) max-content;
   align-items: center;
 
+  height: 40px;
+  line-height: 40px;
+
   cursor: pointer;
   border-radius: 6px;
   margin: 0 10px;
-  padding: 10px 15px;
+  padding: 0 15px;
 
   ${(props) =>
     props.selected &&
diff --git a/src/components/testcase/TerminalOutput.tsx b/src/components/testcase/TerminalOutput.tsx
@@ -26,6 +26,8 @@ const TerminalOutput: FC<OutputProps> = ({ content }) => {
 
     const term = new Terminal({
       fontFamily: "consolas",
+      convertEol: true,
+      disableStdin: true,
     });
     const fitAddon = new FitAddon();
 
diff --git a/src/components/testcase/TestcaseInfo.tsx b/src/components/testcase/TestcaseInfo.tsx
@@ -1,11 +1,16 @@
-import { Button, Editable, EditableInput, EditablePreview } from "@chakra-ui/react";
+import { Button, Editable, EditableInput, EditablePreview, useEditableControls } from "@chakra-ui/react";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
+import { MdDelete, MdEdit, MdPlayArrow } from "react-icons/md";
 import { useRecoilValue } from "recoil";
 
 import useTestcaseCommand from "@/commands/useTestcaseCommand";
 import useTestcaseRunner from "@/commands/useTestcaseRunner";
 import { testcaseFamily } from "@/states/testcase";
+import { TestcaseResult, testcaseResultFamily } from "@/states/testcaseResult";
+
+import { getResultColor, getResultDescription } from "../common/renderResultUtil";
 
 interface TestcaseInfoProps {
   testcaseId: string;
@@ -15,29 +20,110 @@ const TestcaseInfo: FC<TestcaseInfoProps> = ({ testcaseId }) => {
   const command = useTestcaseCommand();
   const runner = useTestcaseRunner();
   const testcase = useRecoilValue(testcaseFamily(testcaseId));
+  const result = useRecoilValue(testcaseResultFamily(testcaseId));
 
   return (
     <StyledTestcaseInfo>
-      <Name value={testcase.name} onChange={(name) => command.changeValue(testcaseId, { name })} fontSize={20}>
-        <EditablePreview />
-        <EditableInput />
-      </Name>
-      <Button onClick={() => runner.run(testcaseId)}>Run</Button>
-      <Button onClick={() => command.remove(testcaseId)}>삭제</Button>
+      <NameBox>
+        <Name
+          value={testcase.name}
+          placeholder="이름 없음"
+          onChange={(name) => command.changeValue(testcaseId, { name })}
+          fontSize={20}>
+          <WithEditButton>
+            <EditablePreview
+              overflow="hidden"
+              textOverflow="ellipsis"
+              whiteSpace="nowrap"
+              display="block"
+              justifySelf="normal"
+            />
+          </WithEditButton>
+          <EditableInput />
+        </Name>
+      </NameBox>
+      <ActionBox>
+        <ActionBoxLeft>
+          <Button
+            onClick={() => runner.run(testcaseId)}
+            variant="outline"
+            size="sm"
+            leftIcon={<MdPlayArrow />}
+            colorScheme="teal"
+            isLoading={result === "running"}>
+            실행
+          </Button>
+          <Result status={result}>{getResultDescription(result)}</Result>
+        </ActionBoxLeft>
+        <Spacer />
+        <Button
+          onClick={() => command.remove(testcaseId)}
+          variant="outline"
+          size="sm"
+          leftIcon={<MdDelete />}
+          colorScheme="red">
+          삭제
+        </Button>
+      </ActionBox>
     </StyledTestcaseInfo>
   );
 };
 
 export default TestcaseInfo;
 
-const StyledTestcaseInfo = styled.div`
+const StyledTestcaseInfo = styled.div``;
+
+const NameBox = styled.div`
+  margin-top: 10px;
+  height: 40px;
+`;
+
+const ActionBox = styled.div`
   display: flex;
-  height: 3.5rem;
+  margin: 0 8px;
 `;
 
-const Name = styled(Editable)`
+const ActionBoxLeft = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Result = styled.div<{ status: TestcaseResult }>`
+  margin-left: 0.8rem;
+  font-size: 0.85rem;
+
+  ${(props) => css`
+    color: ${getResultColor(props.status)};
+  `}
+`;
+
+const Spacer = styled.div`
   flex-grow: 1;
+`;
+
+const Name = styled(Editable)`
   font-weight: 500;
   align-self: center;
   margin: 0 10px;
 `;
+
+const WithEditButton = ({ children }: { children: ReactNode }) => {
+  const { isEditing, getEditButtonProps } = useEditableControls();
+
+  return isEditing ? (
+    <></>
+  ) : (
+    <StyledWithEditButton>
+      {children}
+      <Button size="sm" variant="link" {...getEditButtonProps()}>
+        <MdEdit />
+      </Button>
+    </StyledWithEditButton>
+  );
+};
+
+const StyledWithEditButton = styled.div`
+  display: grid;
+  grid-template-columns: max-content 20px 1fr;
+  align-items: center;
+`;
diff --git a/src/states/executableTarget.ts b/src/states/executableTarget.ts
@@ -13,6 +13,8 @@ export const executableTargetFilenameSelector = selector<string | null>({
       return null;
     }
 
-    return path.split("\\").at(-1) ?? null;
+    const matches = path.match(/.+[\\/\\]([^\\/\\]+)/);
+
+    return matches?.[1] ?? null;
   },
 });
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,6 +20,7 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
+
   "include": ["src"],
   "exclude": ["src/**/*.test.ts"],
   "references": [{ "path": "./tsconfig.node.json" }],

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@ export const executableTargetFilenameSelector = selector<string \| null>({`
`13`	`13`	`return null;`
`14`	`14`	`}`
`15`	`15`
`16`		`- return path.split("\\").at(-1) ?? null;`
	`16`	`+ const matches = path.match(/.+[\\/\\]([^\\/\\]+)/);`
	`17`	`+`
	`18`	`+ return matches?.[1] ?? null;`
`17`	`19`	`},`
`18`	`20`	`});`