From 011bbf84e6fdfd3aad96595f8b593b6c6c640169 Mon Sep 17 00:00:00 2001
From: HyunJin <102955516+xxxjinn@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:36:26 +0900
Subject: [PATCH] =?UTF-8?q?[view]=20=EC=83=81=EB=8B=A8=20branch=EB=AA=85?=
 =?UTF-8?q?=20=EA=B8=B8=EC=9D=B4=20=EA=B4=80=EB=A0=A8=20suffix=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#721)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: edit author bar chart width (200 to 250)

* style: edit select-box styling

* feat: change select box from select tag to mui select

* style: edit style branch select dropdown (add marginTop)

* feat: edit branch-list fake-assets for branch name length test

* feat: add BranchSelector.const file for branch name slice length

* feat: add suffix (...) to branch name

* refactor(view): edit branch-list fake-assets
---
 .../src/components/BranchSelector/BranchSelector.const.ts    | 1 +
 .../view/src/components/BranchSelector/BranchSelector.tsx    | 5 ++++-
 packages/view/src/fake-assets/branch-list.json               | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 packages/view/src/components/BranchSelector/BranchSelector.const.ts

diff --git a/packages/view/src/components/BranchSelector/BranchSelector.const.ts b/packages/view/src/components/BranchSelector/BranchSelector.const.ts
new file mode 100644
index 00000000..a444b877
--- /dev/null
+++ b/packages/view/src/components/BranchSelector/BranchSelector.const.ts
@@ -0,0 +1 @@
+export const SLICE_LENGTH = 15;
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
index 3792e576..5425f30f 100644
--- a/packages/view/src/components/BranchSelector/BranchSelector.tsx
+++ b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -8,6 +8,8 @@ import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
 import { useLoadingStore } from "store";
 
+import { SLICE_LENGTH } from "./BranchSelector.const";
+
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
   const { setLoading } = useLoadingStore((state) => state);
@@ -53,8 +55,9 @@ const BranchSelector = () => {
             <MenuItem
               key={option}
               value={option}
+              title={option}
             >
-              {option}
+              {option.length <= SLICE_LENGTH ? option : `${option.slice(0, SLICE_LENGTH)}...`}
             </MenuItem>
           ))}
         </Select>
diff --git a/packages/view/src/fake-assets/branch-list.json b/packages/view/src/fake-assets/branch-list.json
index b8a91dc6..94dbe1d5 100644
--- a/packages/view/src/fake-assets/branch-list.json
+++ b/packages/view/src/fake-assets/branch-list.json
@@ -1,4 +1,4 @@
 {
-  "branchList": ["main", "develop", "release", "origin/HEAD"],
+  "branchList": ["main", "develop", "release", "origin/HEAD", "feature/SelectedClusterGroup"],
   "head": "main"
 }