Merge branch 'main' into Fake

.github/workflows/e2eTests.yml

@@ -0,0 +1,29 @@
+name: E2E Tests - Playwright
+on:
+  pull_request:
+    branches: [main, master]
+jobs:
+  tests:
+    timeout-minutes: 600
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./packages/view
+    steps:
+      - uses: actions/checkout@v2  # v3 is not available as of my last update in January 2022
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.0
+
+      # Add Playwright GitHub Action
+      - name: Setup Playwright
+        uses: microsoft/playwright-github-action@v1
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: npx playwright install
+        run: npx playwright install
+
+      - name: Run Playwright tests
+        run: npm run test:e2e

packages/view/src/App.tsx

@@ -20,24 +20,24 @@ import type { IDESentEvents } from "types/IDESentEvents";
 const App = () => {
   const initRef = useRef<boolean>(false);
 
-  const { filteredData, fetchAnalyzedData, fetchBranchList, loading, setLoading } = useGlobalData();
+  const { filteredData, handleChangeAnalyzedData, handleChangeBranchList, loading, setLoading } = useGlobalData();
 
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
 
   useEffect(() => {
     if (initRef.current === false) {
       const callbacks: IDESentEvents = {
-        fetchAnalyzedData,
-        fetchBranchList,
+        handleChangeAnalyzedData,
+        handleChangeBranchList,
       };
 
       setLoading(true);
       ideAdapter.addIDESentEventListener(callbacks);
       ideAdapter.sendFetchAnalyzedDataMessage();
-      ideAdapter.sendGetBranchListMessage();
+      ideAdapter.sendFetchBranchListMessage();
       initRef.current = true;
     }
-  }, [fetchBranchList, fetchAnalyzedData, ideAdapter, setLoading]);
+  }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
   if (loading) {
     return (

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -2,12 +2,15 @@ import { type ChangeEventHandler } from "react";
 import "./BranchSelector.scss";
 
 import { useGlobalData } from "hooks";
+import { sendFetchAnalyzedDataCommand } from "services";
 
 const BranchSelector = () => {
-  const { branchList, selectedBranch } = useGlobalData();
+  const { branchList, selectedBranch, setSelectedBranch, setLoading } = useGlobalData();
+
   const handleChangeSelect: ChangeEventHandler<HTMLSelectElement> = (e) => {
-    // TODO - webview로 선택된 branch을 payload에 실어 sendFetchAnalyzedDataCommand 호출
-    console.log(e.target.value);
+    setSelectedBranch(e.target.value);
+    setLoading(true);
+    sendFetchAnalyzedDataCommand(e.target.value);
   };
 
   return (
@@ -18,7 +21,7 @@ const BranchSelector = () => {
         onChange={handleChangeSelect}
         value={selectedBranch}
       >
-        {branchList.map((option) => (
+        {branchList?.map((option) => (
           <option
             key={option}
             value={option}

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -1,22 +1,19 @@
 import "reflect-metadata";
 import cn from "classnames";
-import { container } from "tsyringe";
 import { FiRefreshCcw } from "react-icons/fi";
 
 import { throttle } from "utils";
-import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 
 import "./RefreshButton.scss";
+import { sendRefreshDataCommand } from "services";
 
 const RefreshButton = () => {
-  const { loading, setLoading } = useGlobalData();
+  const { loading, setLoading, selectedBranch } = useGlobalData();
 
   const refreshHandler = throttle(() => {
     setLoading(true);
-
-    const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-    ideAdapter.sendFetchAnalyzedDataMessage();
+    sendRefreshDataCommand(selectedBranch);
   }, 3000);
 
   return (

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.const.ts

@@ -1,9 +1,11 @@
+import type { SVGMargin } from "./ClusterGraph.type";
+
 export const NODE_GAP = 10;
 export const CLUSTER_HEIGHT = 40;
 export const DETAIL_HEIGHT = 220;
 export const GRAPH_WIDTH = 80;
 export const SVG_WIDTH = GRAPH_WIDTH + 4;
-export const SVG_MARGIN = {
+export const SVG_MARGIN: SVGMargin = {
   right: 2,
   left: 2,
   top: 10,

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.hook.tsx

@@ -8,49 +8,9 @@ import type { ClusterNode } from "types";
 import { selectedDataUpdater } from "../VerticalClusterList.util";
 
 import { CLUSTER_HEIGHT, DETAIL_HEIGHT, GRAPH_WIDTH, NODE_GAP, SVG_MARGIN } from "./ClusterGraph.const";
-import type { ClusterGraphElement, SVGElementSelection } from "./ClusterGraph.type";
-import { getClusterPosition } from "./ClusterGraph.util";
-
-const drawClusterBox = (container: SVGElementSelection<SVGGElement>) => {
-  container
-    .append("rect")
-    .attr("class", "cluster-graph__cluster")
-    .attr("width", GRAPH_WIDTH)
-    .attr("height", CLUSTER_HEIGHT);
-};
-
-const drawDegreeBox = (container: SVGElementSelection<SVGGElement>) => {
-  const widthScale = d3.scaleLinear().range([0, GRAPH_WIDTH]).domain([0, 10]);
-  container
-    .append("rect")
-    .attr("class", "cluster-graph__degree")
-    .attr("width", (d) => widthScale(Math.min(d.clusterSize, 10)))
-    .attr("height", CLUSTER_HEIGHT)
-    .attr("x", (d) => (GRAPH_WIDTH - widthScale(Math.min(d.clusterSize, 10))) / 2);
-};
-
-const drawLink = (svgRef: RefObject<SVGSVGElement>, data: ClusterGraphElement[], detailElementHeight: number) => {
-  d3.select(svgRef.current)
-    .selectAll(".cluster-graph__link")
-    .data([
-      {
-        start: SVG_MARGIN.top,
-        end: (CLUSTER_HEIGHT + NODE_GAP) * data.length,
-        selected: {
-          prev: data[0].selected.prev,
-          current: data[0].selected.current,
-        },
-      },
-    ])
-    .join("line")
-    .attr("class", "cluster-graph__link")
-    .attr("x1", SVG_MARGIN.left + GRAPH_WIDTH / 2)
-    .attr("y1", (d) => d.start)
-    .attr("x2", SVG_MARGIN.left + GRAPH_WIDTH / 2)
-    .attr("y2", (d) => d.end + d.selected.prev.length * detailElementHeight)
-    .transition()
-    .attr("y2", (d) => d.end + d.selected.current.length * detailElementHeight);
-};
+import type { ClusterGraphElement } from "./ClusterGraph.type";
+import { destroyClusterGraph, drawClusterBox, drawCommitAmountCluster, drawTotalLine } from "./Draws";
+import { getTranslateAfterSelect } from "./ClusterGraph.util";
 
 const drawClusterGraph = (
   svgRef: RefObject<SVGSVGElement>,
@@ -65,26 +25,24 @@ const drawClusterGraph = (
     .join("g")
     .on("click", onClickCluster)
     .attr("class", "cluster-graph__container")
-    .attr("transform", (d, i) => getClusterPosition(d, i, detailElementHeight, true));
+    .attr("transform", (d, i) => getTranslateAfterSelect(d, i, detailElementHeight, true));
 
-  group.append("title").text((d) => d.clusterSize);
+  group.append("title").text((_, i) => `${i + 1}번째 container`);
 
   group
     .transition()
     .duration(0)
-    .attr("transform", (d, i) => getClusterPosition(d, i, detailElementHeight));
+    .attr("transform", (d, i) => getTranslateAfterSelect(d, i, detailElementHeight));
 
-  drawLink(svgRef, data, detailElementHeight);
-  drawClusterBox(group);
-  drawDegreeBox(group);
+  drawTotalLine(svgRef, data, detailElementHeight, SVG_MARGIN, CLUSTER_HEIGHT, NODE_GAP, GRAPH_WIDTH);
+  drawClusterBox(group, GRAPH_WIDTH, CLUSTER_HEIGHT);
+  drawCommitAmountCluster(group, GRAPH_WIDTH, CLUSTER_HEIGHT);
 };
 
-const destroyClusterGraph = (target: RefObject<SVGElement>) => d3.select(target.current).selectAll("*").remove();
-
 export const useHandleClusterGraph = ({
+  data,
   clusterSizes,
   selectedIndex,
-  data,
   setSelectedData,
 }: {
   clusterSizes: number[];
@@ -111,6 +69,7 @@ export const useHandleClusterGraph = ({
   );
   useEffect(() => {
     drawClusterGraph(svgRef, clusterGraphElements, DETAIL_HEIGHT, handleClickCluster);
+
     prevSelected.current = selectedIndex;
     return () => {
       destroyClusterGraph(svgRef);

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss

@@ -2,25 +2,25 @@
   cursor: pointer;
 
   &:hover {
-    .cluster-graph__cluster {
+    .cluster-graph-container__box {
       stroke-width: 3;
     }
   }
 
-  .cluster-graph__cluster {
+  .cluster-graph-container__box {
     rx: 5;
     stroke-width: 1;
     stroke: var(--primary-color);
     fill: transparent;
   }
 
-  .cluster-graph__degree {
+  .cluster-graph-container__commit-amount-cluster {
     rx: 5;
     fill: var(--primary-color);
   }
 }
 
-.cluster-graph__link {
+.cluster-graph__total-line {
   stroke: var(--primary-color);
   stroke-width: 1;
 }

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.type.ts

@@ -17,3 +17,5 @@ export type SVGElementSelection<T extends BaseType> = Selection<
   SVGSVGElement | null,
   unknown
 >;
+
+export type SVGMargin = { [key: string]: number };

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.test.ts

@@ -1,6 +1,6 @@
 import { fakeFirstClusterNode, fakePrev, fakePrev2, fakePrev3, fakePrev4 } from "../../../../tests/fakeAsset";
 
-import { getClusterSizes, getGraphHeight, getClusterPosition, getSelectedIndex } from "./ClusterGraph.util";
+import { getClusterSizes, getGraphHeight, getTranslateAfterSelect, getSelectedIndex } from "./ClusterGraph.util";
 import type { ClusterGraphElement } from "./ClusterGraph.type";
 
 const getClusterSizesResult = getClusterSizes(fakePrev);
@@ -41,9 +41,9 @@ const fakeClusterGraphElement: ClusterGraphElement = {
 };
 
 test("getClusterPosition", () => {
-  const resultPrev = getClusterPosition(fakeClusterGraphElement, 1, 1, true);
-  const resultCurrent = getClusterPosition(fakeClusterGraphElement, 1, 6, false);
-  const resultDiffI = getClusterPosition(fakeClusterGraphElement, 2, 3, true);
+  const resultPrev = getTranslateAfterSelect(fakeClusterGraphElement, 1, 1, true);
+  const resultCurrent = getTranslateAfterSelect(fakeClusterGraphElement, 1, 6, false);
+  const resultDiffI = getTranslateAfterSelect(fakeClusterGraphElement, 2, 3, true);
   expect(resultPrev).toBe("translate(2, 61)");
   expect(resultCurrent).toBe("translate(2, 60)");
   expect(resultDiffI).toBe("translate(2, 116)");

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.util.ts

@@ -11,7 +11,12 @@ export function getGraphHeight(clusterSizes: number[]) {
   return clusterSizes.length * CLUSTER_HEIGHT + clusterSizes.length * NODE_GAP + NODE_GAP;
 }
 
-export function getClusterPosition(d: ClusterGraphElement, i: number, detailElementHeight: number, isPrev = false) {
+export function getTranslateAfterSelect(
+  d: ClusterGraphElement,
+  i: number,
+  detailElementHeight: number,
+  isPrev = false
+) {
   const selected = isPrev ? d.selected.prev : d.selected.current;
   const selectedLength = selected.filter((selectedIdx) => selectedIdx < i).length;
   const margin = selectedLength * detailElementHeight;

packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/destroyClusterGraph.ts

@@ -0,0 +1,4 @@
+import type { RefObject } from "react";
+import * as d3 from "d3";
+
+export const destroyClusterGraph = (target: RefObject<SVGElement>) => d3.select(target.current).selectAll("*").remove();

packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawClusterBox.ts

@@ -0,0 +1,13 @@
+import type { SVGElementSelection } from "../ClusterGraph.type";
+
+export const drawClusterBox = (
+  container: SVGElementSelection<SVGGElement>,
+  graphWidth: number,
+  clusterHeight: number
+) => {
+  container
+    .append("rect")
+    .attr("class", "cluster-graph-container__box")
+    .attr("width", graphWidth)
+    .attr("height", clusterHeight);
+};

packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawCommitAmountCluster.ts

@@ -0,0 +1,17 @@
+import * as d3 from "d3";
+
+import type { SVGElementSelection } from "../ClusterGraph.type";
+
+export const drawCommitAmountCluster = (
+  container: SVGElementSelection<SVGGElement>,
+  graphHeight: number,
+  clusterHeight: number
+) => {
+  const widthScale = d3.scaleLinear().range([0, graphHeight]).domain([0, 10]);
+  container
+    .append("rect")
+    .attr("class", "cluster-graph-container__commit-amount-cluster")
+    .attr("width", (d) => widthScale(Math.min(d.clusterSize, 10)))
+    .attr("height", clusterHeight)
+    .attr("x", (d) => (graphHeight - widthScale(Math.min(d.clusterSize, 10))) / 2);
+};

packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawTotalLine.ts

@@ -0,0 +1,37 @@
+import type { RefObject } from "react";
+import * as d3 from "d3";
+
+import type { ClusterGraphElement, SVGMargin } from "../ClusterGraph.type";
+
+export const drawTotalLine = (
+  svgRef: RefObject<SVGSVGElement>,
+  data: ClusterGraphElement[],
+  detailElementHeight: number,
+  svgMargin: SVGMargin,
+  clusterHeight: number,
+  nodeGap: number,
+  graphWidth: number
+) => {
+  const lineData = [
+    {
+      start: svgMargin.top,
+      end: (clusterHeight + nodeGap) * data.length,
+      selected: {
+        prev: data[0].selected.prev,
+        current: data[0].selected.current,
+      },
+    },
+  ];
+
+  d3.select(svgRef.current)
+    .selectAll(".cluster-graph__total-line")
+    .data(lineData)
+    .join("line")
+    .attr("class", "cluster-graph__total-line")
+    .attr("x1", svgMargin.left + graphWidth / 2)
+    .attr("y1", (d) => d.start)
+    .attr("x2", svgMargin.left + graphWidth / 2)
+    .attr("y2", (d) => d.end + d.selected.prev.length * detailElementHeight)
+    .transition()
+    .attr("y2", (d) => d.end + d.selected.current.length * detailElementHeight);
+};

packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/index.ts

@@ -0,0 +1,4 @@
+export * from "./drawClusterBox";
+export * from "./drawCommitAmountCluster";
+export * from "./drawTotalLine";
+export * from "./destroyClusterGraph";