From 6cd05b7f9fc94162572fa9b388b15cab027be0f3 Mon Sep 17 00:00:00 2001
From: Sheng Chen <sheche@microsoft.com>
Date: Tue, 14 May 2024 13:17:59 +0800
Subject: [PATCH 1/2] Add format section into the project setting page.

- Click the formatter from nav side will open a new window for formatter page.
- Move the project select to the top level of the page.
- Move the apply button to the top level of the page.
---
 .../features/ClasspathConfigurationView.tsx   | 52 ++++++++-----------
 .../classpath/features/components/Hint.tsx    | 51 ++++++++++++++++++
 .../features/components/JdkRuntime.tsx        |  4 +-
 .../components/UnmanagedFolderSources.tsx     |  2 +-
 .../assets/classpath/style.scss               | 13 ++---
 .../assets/classpath/utils.ts                 |  4 ++
 .../mainpage/features/ProjectSettingView.tsx  | 30 +++++------
 .../features/component}/Footer.tsx            | 36 ++-----------
 .../features/component}/ProjectSelector.tsx   |  8 +++
 .../mainpage/features/component/SideBar.tsx   | 43 +++++++++++++++
 .../assets/mainpage/style.scss                | 17 +++++-
 src/project-settings/assets/vscode/utils.ts   | 16 +++---
 .../classpath/ClasspathPanelHandler.ts        | 11 ----
 src/project-settings/projectSettingsView.ts   | 19 ++++++-
 14 files changed, 194 insertions(+), 112 deletions(-)
 create mode 100644 src/project-settings/assets/classpath/features/components/Hint.tsx
 rename src/project-settings/assets/{classpath/features/components => mainpage/features/component}/Footer.tsx (59%)
 rename src/project-settings/assets/{classpath/features/components => mainpage/features/component}/ProjectSelector.tsx (94%)
 create mode 100644 src/project-settings/assets/mainpage/features/component/SideBar.tsx

diff --git a/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx b/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
index be9d475d..889a940f 100644
--- a/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
+++ b/src/project-settings/assets/classpath/features/ClasspathConfigurationView.tsx
@@ -5,7 +5,6 @@ import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Dispatch } from "@reduxjs/toolkit";
 import Output from "./components/Output";
-import ProjectSelector from "./components/ProjectSelector";
 import Sources from "./components/Sources";
 import Libraries from "./components/Libraries";
 import Exception from "./components/Exception";
@@ -16,7 +15,7 @@ import { ClasspathRequest } from "../../vscode/utils";
 import { VSCodePanelTab, VSCodePanelView, VSCodePanels, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { ProjectType } from "../../../../utils/webview";
 import UnmanagedFolderSources from "./components/UnmanagedFolderSources";
-import Footer from "./components/Footer";
+import Hint from "./components/Hint";
 import "../style.scss";
 import { listProjects, setProjectType } from "../../mainpage/features/commonSlice";
 
@@ -39,35 +38,32 @@ const ClasspathConfigurationView = (): JSX.Element => {
     content = <VSCodeProgressRing></VSCodeProgressRing>;
   } else {
     content = (
-      <div>
-        <div className="mb-12">
-          <ProjectSelector />
-          <VSCodePanels activeid={activeTab} className="setting-panels">
-            <VSCodePanelTab id="source" onClick={() => onClickTab("source")}>Sources</VSCodePanelTab>
-            <VSCodePanelTab id="jdk" onClick={() => onClickTab("jdk")}>JDK Runtime</VSCodePanelTab>
-            <VSCodePanelTab id="libraries" onClick={() => onClickTab("libraries")}>Libraries</VSCodePanelTab>
-            <VSCodePanelView className="setting-panels-view">
-              {[ProjectType.Gradle, ProjectType.Maven].includes(projectType) && (<Sources />)}
-              {projectType !== ProjectType.Gradle && projectType !== ProjectType.Maven && (<UnmanagedFolderSources />)}
-              {projectType === ProjectType.UnmanagedFolder && (<Output />)}
-            </VSCodePanelView>
-            <VSCodePanelView className="setting-panels-view">
-              <JdkRuntime />
-            </VSCodePanelView>
-            <VSCodePanelView className="setting-panels-view">
-              <Libraries />
-            </VSCodePanelView>
-          </VSCodePanels>
-        </div>
-        <Footer />
+      <div className="root">
+        <VSCodePanels activeid={activeTab} className="setting-panels">
+          <VSCodePanelTab id="source" onClick={() => onClickTab("source")}>Sources</VSCodePanelTab>
+          <VSCodePanelTab id="jdk" onClick={() => onClickTab("jdk")}>JDK Runtime</VSCodePanelTab>
+          <VSCodePanelTab id="libraries" onClick={() => onClickTab("libraries")}>Libraries</VSCodePanelTab>
+          <VSCodePanelView className="setting-panels-view">
+            {[ProjectType.Gradle, ProjectType.Maven].includes(projectType) && (<Sources />)}
+            {projectType !== ProjectType.Gradle && projectType !== ProjectType.Maven && (<UnmanagedFolderSources />)}
+            {projectType === ProjectType.UnmanagedFolder && (<Output />)}
+          </VSCodePanelView>
+          <VSCodePanelView className="setting-panels-view">
+            <JdkRuntime />
+          </VSCodePanelView>
+          <VSCodePanelView className="setting-panels-view">
+            <Libraries />
+          </VSCodePanelView>
+        </VSCodePanels>
+        <Hint />
       </div>
     );
   }
 
   const onMessage = (event: any) => {
-    const {data} = event;
+    const { data } = event;
     if (data.command === "classpath.onDidListProjects") {
-      dispatch(initializeProjectsData({projectsNum: data.projectInfo?.length}));
+      dispatch(initializeProjectsData({ projectsNum: data.projectInfo?.length }));
       dispatch(listProjects(data.projectInfo));
     } else if (data.command === "classpath.onDidListVmInstalls") {
       dispatch(listVmInstalls(data.vmInstalls))
@@ -98,11 +94,7 @@ const ClasspathConfigurationView = (): JSX.Element => {
     }
   }, []);
 
-  return (
-    <div className="root">
-      {content}
-    </div>
-  );
+  return content;
 };
 
 export default ClasspathConfigurationView;
diff --git a/src/project-settings/assets/classpath/features/components/Hint.tsx b/src/project-settings/assets/classpath/features/components/Hint.tsx
new file mode 100644
index 00000000..a942713e
--- /dev/null
+++ b/src/project-settings/assets/classpath/features/components/Hint.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+import { VSCodeLink} from "@vscode/webview-ui-toolkit/react";
+import React, { useEffect } from "react";
+import { ProjectInfo } from "../../../../handlers/classpath/types";
+import { useSelector } from "react-redux";
+import { ProjectType } from "../../../../../utils/webview";
+import { updateMaxHeight } from "../../utils";
+import { ClasspathRequest } from "../../../vscode/utils";
+
+const Hint = (): JSX.Element => {
+
+  const activeProjectIndex: number = useSelector((state: any) => state.commonConfig.ui.activeProjectIndex);
+  const projects: ProjectInfo[] = useSelector((state: any) => state.commonConfig.data.projects);
+  const projectType: ProjectType[] = useSelector((state: any) => state.commonConfig.data.projectType);
+
+  let buildFile: string = "";
+  if (projectType[activeProjectIndex] === ProjectType.Maven) {
+    buildFile = "pom.xml";
+  } else if (projectType[activeProjectIndex] === ProjectType.Gradle) {
+    buildFile = "build.gradle";
+  }
+
+  const handleOpenBuildFile = () => {
+    ClasspathRequest.onClickGotoProjectConfiguration(projects[activeProjectIndex].rootPath, projectType[activeProjectIndex]);
+  };
+
+  useEffect(() => {
+    updateMaxHeight();
+    window.addEventListener('resize', updateMaxHeight);
+    return () => {
+      window.removeEventListener("resize", updateMaxHeight);
+    }
+  }, [projectType]);
+
+  return (
+    <div id="hint" className="setting-footer pb-2">
+        {(projectType[activeProjectIndex] === ProjectType.Gradle || projectType[activeProjectIndex] === ProjectType.Maven) &&
+          <div className="mt-1">
+            <span className="setting-section-warning">
+              '{projects[activeProjectIndex].name}' is imported by {projectType[activeProjectIndex]}, changes made to the classpath might be lost after reloading.
+              To make permanent changes, please edit the <VSCodeLink href="" onClick={() => handleOpenBuildFile()}>{buildFile}</VSCodeLink> file.
+            </span>
+          </div>
+        }
+    </div>
+  );
+};
+
+export default Hint;
diff --git a/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx b/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
index 2c04188c..2159e794 100644
--- a/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
+++ b/src/project-settings/assets/classpath/features/components/JdkRuntime.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import React, { Dispatch, useEffect, useState } from "react";
-import { ClasspathRequest } from "../../../vscode/utils";
+import { ClasspathRequest, CommonRequest } from "../../../vscode/utils";
 import { VSCodeDivider, VSCodeDropdown, VSCodeOption, } from "@vscode/webview-ui-toolkit/react";
 import { useDispatch, useSelector } from "react-redux";
 import { VmInstall } from "../../../../handlers/classpath/types";
@@ -22,7 +22,7 @@ const JdkRuntime = (): JSX.Element => {
     if (path === "add-new-jdk") {
       ClasspathRequest.onWillAddNewJdk();
     } else if (path === "download-jdk") {
-      ClasspathRequest.onWillExecuteCommand("java.installJdk")
+      CommonRequest.onWillExecuteCommand("java.installJdk")
     } else {
       dispatch(setJdks({
         activeProjectIndex,
diff --git a/src/project-settings/assets/classpath/features/components/UnmanagedFolderSources.tsx b/src/project-settings/assets/classpath/features/components/UnmanagedFolderSources.tsx
index cb395793..13ad3d5c 100644
--- a/src/project-settings/assets/classpath/features/components/UnmanagedFolderSources.tsx
+++ b/src/project-settings/assets/classpath/features/components/UnmanagedFolderSources.tsx
@@ -68,7 +68,7 @@ const UnmanagedFolderSources = (): JSX.Element => {
       <VSCodeDataGridRow className={`${projectType !== ProjectType.UnmanagedFolder ? "inactive" : ""} setting-section-grid-row`} id={`sources-${index}`} onMouseEnter={() => setHoveredRow(`sources-${index}`)} onMouseLeave={() => setHoveredRow(null)}  key={source.path}>
         <VSCodeDataGridCell className="setting-section-grid-cell setting-section-grid-cell-readonly" gridColumn="1">
           <div className="setting-section-grid-cell">
-             <span className={"codicon codicon-folder mr-1"}></span>
+             <span className="codicon codicon-folder mr-1"></span>
              <span>{source.path}</span>
            </div>
           {hoveredRow === `sources-${index}` && projectType === ProjectType.UnmanagedFolder && (
diff --git a/src/project-settings/assets/classpath/style.scss b/src/project-settings/assets/classpath/style.scss
index 435c700d..af1fdf40 100644
--- a/src/project-settings/assets/classpath/style.scss
+++ b/src/project-settings/assets/classpath/style.scss
@@ -1,18 +1,13 @@
 .root {
-  min-width: 560px;
-  margin: 8px 18px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
 }
  
 .setting-header {
   color: var(--vscode-settings-headerForeground);
 }
-
-.setting-footer {
-  position: fixed;
-  bottom: 0;
-  width: 80%;
-  background: var(--background);
-}
  
 .setting-section {
   width: 100%;
diff --git a/src/project-settings/assets/classpath/utils.ts b/src/project-settings/assets/classpath/utils.ts
index 32948b1a..d9934ff9 100644
--- a/src/project-settings/assets/classpath/utils.ts
+++ b/src/project-settings/assets/classpath/utils.ts
@@ -10,6 +10,10 @@ export const updateMaxHeight = () => {
   if (projectSelector) {
     maxHeight -= projectSelector.getBoundingClientRect().height;
   }
+  const hinter = document.getElementById("hint");
+  if (hinter) {
+    maxHeight -= hinter.getBoundingClientRect().height;
+  }
   const footer = document.getElementById("footer");
   if (footer) {
     maxHeight -= footer.getBoundingClientRect().height;
diff --git a/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx b/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
index 32c4ba47..227e1e1b 100644
--- a/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
+++ b/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
@@ -7,6 +7,10 @@ import ClasspathConfigurationView from "../../classpath/features/ClasspathConfig
 import { updateActiveTab } from "../../classpath/features/classpathConfigurationViewSlice";
 import "../style.scss";
 import { updateActiveSection } from "./commonSlice";
+import SideBar from "./component/sideBar";
+import ProjectSelector from "./component/ProjectSelector";
+import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+import Footer from "./component/Footer";
 
 const ProjectSettingView = (): JSX.Element => {
   const activeSection: string = useSelector((state: any) => state.commonConfig.ui.activeSection);
@@ -35,7 +39,7 @@ const ProjectSettingView = (): JSX.Element => {
       if (routes.length > 1) {
         switch (routes[0]) {
           case "classpath":
-            // TODO: sometimes when directly trigger 'COnfigure Java Runtime', the tab won't
+            // TODO: sometimes when directly trigger 'Configure Java Runtime', the tab won't
             // focus to the JDK part, need to investigate
             dispatch(updateActiveTab(routes[1]));
             break;
@@ -46,26 +50,20 @@ const ProjectSettingView = (): JSX.Element => {
     }
   }
 
-  const onClickNavBarItem = (panelId: string) => {
-    dispatch(updateActiveSection(panelId));
-  };
-
   return (
-    <div className="app-container">
-        <div className="app-sidebar">
-          <div className="app-sidebar-content">
-            <div className="mt-2">
-              <div className={`section-link ${activeSection === "classpath" ? "section-link-active" : ""}`} onClick={() => onClickNavBarItem("classpath")}>
-                Classpath
-              </div>
-            </div>
-          </div>
-          <div className="app-sidebar-resizer" />
-        </div>
+    <div className="root">
+      <ProjectSelector />
+      <VSCodeDivider />
+      <div className="app-container">
+        <SideBar />
         <div className="app-frame">
           {getSectionContent()}
         </div>
       </div>
+      <VSCodeDivider />
+      <Footer />
+    </div>
+
   );
 };
 
diff --git a/src/project-settings/assets/classpath/features/components/Footer.tsx b/src/project-settings/assets/mainpage/features/component/Footer.tsx
similarity index 59%
rename from src/project-settings/assets/classpath/features/components/Footer.tsx
rename to src/project-settings/assets/mainpage/features/component/Footer.tsx
index 82ddf12b..8b7fa0f1 100644
--- a/src/project-settings/assets/classpath/features/components/Footer.tsx
+++ b/src/project-settings/assets/mainpage/features/component/Footer.tsx
@@ -1,19 +1,17 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT license.
 
-import { VSCodeButton, VSCodeDivider, VSCodeLink} from "@vscode/webview-ui-toolkit/react";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { Dispatch } from "@reduxjs/toolkit";
 import React, { useEffect } from "react";
 import { ClasspathEntry, ProjectInfo } from "../../../../handlers/classpath/types";
 import { useDispatch, useSelector } from "react-redux";
 import { ProjectType } from "../../../../../utils/webview";
-import { updateMaxHeight } from "../../utils";
-import { updateLoadingState } from "../classpathConfigurationViewSlice";
+import { updateLoadingState } from "../../../classpath/features/classpathConfigurationViewSlice";
 import { ClasspathRequest } from "../../../vscode/utils";
 
 const Footer = (): JSX.Element => {
 
-  const activeProjectIndex: number = useSelector((state: any) => state.commonConfig.ui.activeProjectIndex);
   const projects: ProjectInfo[] = useSelector((state: any) => state.commonConfig.data.projects);
   const sources: ClasspathEntry[][] = useSelector((state: any) => state.classpathConfig.data.sources);
   const defaultOutput: string[] = useSelector((state: any) => state.classpathConfig.data.output);
@@ -24,17 +22,6 @@ const Footer = (): JSX.Element => {
 
   const dispatch: Dispatch<any> = useDispatch();
 
-  let buildFile: string = "";
-  if (projectType[activeProjectIndex] === ProjectType.Maven) {
-    buildFile = "pom.xml";
-  } else if (projectType[activeProjectIndex] === ProjectType.Gradle) {
-    buildFile = "build.gradle";
-  }
-
-  const handleOpenBuildFile = () => {
-    ClasspathRequest.onClickGotoProjectConfiguration(projects[activeProjectIndex].rootPath, projectType[activeProjectIndex]);
-  };
-
   const handleApply = () => {
     ClasspathRequest.onWillUpdateClassPaths(
       projects.map(p => p.rootPath),
@@ -60,25 +47,8 @@ const Footer = (): JSX.Element => {
       }
     }, []);
 
-  useEffect(() => {
-    updateMaxHeight();
-    window.addEventListener('resize', updateMaxHeight);
-    return () => {
-      window.removeEventListener("resize", updateMaxHeight);
-    }
-  }, [projectType]);
-
   return (
-    <div id="footer" className="setting-footer pb-2">
-      <VSCodeDivider/>
-        {(projectType[activeProjectIndex] === ProjectType.Gradle || projectType[activeProjectIndex] === ProjectType.Maven) &&
-          <div className="mb-2 mt-1">
-            <span className="setting-section-warning">
-              '{projects[activeProjectIndex].name}' is imported by {projectType[activeProjectIndex]}, changes made to the classpath might be lost after reloading.
-              To make permanent changes, please edit the <VSCodeLink href="" onClick={() => handleOpenBuildFile()}>{buildFile}</VSCodeLink> file.
-            </span>
-          </div>
-        }
+    <div id="footer" className="pt-1 pb-2">
         {loadingState && <VSCodeButton className="ml-1" disabled>Applying...</VSCodeButton>}
         {!loadingState && <VSCodeButton className="ml-1" appearance="primary" onClick={() => handleApply()}>Apply Settings</VSCodeButton>}
     </div>
diff --git a/src/project-settings/assets/classpath/features/components/ProjectSelector.tsx b/src/project-settings/assets/mainpage/features/component/ProjectSelector.tsx
similarity index 94%
rename from src/project-settings/assets/classpath/features/components/ProjectSelector.tsx
rename to src/project-settings/assets/mainpage/features/component/ProjectSelector.tsx
index fd2705cf..bd7bbc55 100644
--- a/src/project-settings/assets/classpath/features/components/ProjectSelector.tsx
+++ b/src/project-settings/assets/mainpage/features/component/ProjectSelector.tsx
@@ -27,10 +27,18 @@ const ProjectSelector = (): JSX.Element | null => {
   }
 
   useEffect(() => {
+    if (projects.length === 0) {
+      return;
+    }
+
     loadProjectClasspath(projects[activeProjectIndex].rootPath);
   }, [activeProjectIndex, projects]);
 
   const projectSelections = projects.map((project, index) => {
+    if (projects.length === 0) {
+      return null;
+    }
+
     return (
       <VSCodeOption className="setting-section-option" key={project.rootPath} onClick={() => handleActiveProjectChange(index)}>
         {project.name}
diff --git a/src/project-settings/assets/mainpage/features/component/SideBar.tsx b/src/project-settings/assets/mainpage/features/component/SideBar.tsx
new file mode 100644
index 00000000..c0a7e6c1
--- /dev/null
+++ b/src/project-settings/assets/mainpage/features/component/SideBar.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Dispatch } from "@reduxjs/toolkit";
+import { updateActiveSection } from "../commonSlice";
+import { CommonRequest } from "../../../vscode/utils";
+
+const CLASSPATH = "classpath";
+const FORMATTER = "formatter";
+
+const SideBar = (): JSX.Element => {
+
+  const activeSection: string = useSelector((state: any) => state.commonConfig.ui.activeSection);
+  const dispatch: Dispatch<any> = useDispatch();
+
+  const onClickNavBarItem = (panelId: string) => {
+    if (panelId === FORMATTER) {
+      CommonRequest.onWillExecuteCommand("java.formatterSettings");
+      return;
+    }
+    dispatch(updateActiveSection(panelId));
+  };
+
+  return (
+    <div className="app-sidebar">
+      <div className="app-sidebar-content">
+        <div className="mt-2">
+          <div className={`section-link ${activeSection === CLASSPATH ? "section-link-active" : ""} mb-1`} onClick={() => onClickNavBarItem(CLASSPATH)}>
+            Classpath
+          </div>
+          <div className="section-link mb-1" onClick={() => onClickNavBarItem(FORMATTER)}>
+            Formatter <span className="codicon codicon-link-external"></span>
+          </div>
+        </div>
+      </div>
+      <div className="app-sidebar-resizer" />
+    </div>
+  );
+};
+
+export default SideBar;
diff --git a/src/project-settings/assets/mainpage/style.scss b/src/project-settings/assets/mainpage/style.scss
index 1a731445..5511dfa7 100644
--- a/src/project-settings/assets/mainpage/style.scss
+++ b/src/project-settings/assets/mainpage/style.scss
@@ -1,8 +1,8 @@
 .app-container {
-  min-height: 100vh;
+  min-height: calc(100vh - 98px);
   display: flex;
   flex-direction: row;
-  height: 100vh;
+  height: calc(100vh - 98px);
 }
 
 .app-sidebar {
@@ -23,6 +23,10 @@
       &:hover {
         cursor: pointer;
       }
+
+      .codicon {
+        font-size: 12px;
+      }
     }
 
     .section-link-active {
@@ -48,6 +52,15 @@
   height: 100vh;
   max-height: 100%;
   z-index: 1;
+  min-width: 560px;
+  margin: 0 18px;
+}
+
+.app-footer {
+  position: absolute;
+  bottom: 0;
+  width: 80%;
+  background: var(--background);
 }
 
 @import "../utils.scss";
\ No newline at end of file
diff --git a/src/project-settings/assets/vscode/utils.ts b/src/project-settings/assets/vscode/utils.ts
index 6b03eeed..cf557f1b 100644
--- a/src/project-settings/assets/vscode/utils.ts
+++ b/src/project-settings/assets/vscode/utils.ts
@@ -7,6 +7,15 @@ import { ClasspathEntry } from "../../handlers/classpath/types";
 declare function acquireVsCodeApi(): any;
 const vscode = acquireVsCodeApi();
 
+export namespace CommonRequest {
+    export function onWillExecuteCommand(id: string) {
+        vscode.postMessage({
+            command: "common.onWillExecuteCommand",
+            id,
+        });
+    }
+}
+
 export namespace ClasspathRequest {
     export function onWillListProjects() {
         vscode.postMessage({
@@ -85,11 +94,4 @@ export namespace ClasspathRequest {
             projectType,
         });
     }
-
-    export function onWillExecuteCommand(id: string) {
-        vscode.postMessage({
-            command: "classpath.onWillExecuteCommand",
-            id,
-        });
-    }
 }
diff --git a/src/project-settings/handlers/classpath/ClasspathPanelHandler.ts b/src/project-settings/handlers/classpath/ClasspathPanelHandler.ts
index af431724..cdd08e00 100644
--- a/src/project-settings/handlers/classpath/ClasspathPanelHandler.ts
+++ b/src/project-settings/handlers/classpath/ClasspathPanelHandler.ts
@@ -67,9 +67,6 @@ export class ClasspathPanelHandler implements vscode.Disposable {
             case "classpath.onClickGotoProjectConfiguration":
                 this.gotoProjectConfigurationFile(message.rootUri, message.projectType);
                 break;
-            case "classpath.onWillExecuteCommand":
-                this.executeCommand(message.id);
-                break;
             default:
                 break;
         }
@@ -445,14 +442,6 @@ export class ClasspathPanelHandler implements vscode.Disposable {
         }
     });
 
-    private executeCommand = instrumentOperation("classpath.executeCommand", async (operationId: string, commandId: string) => {
-        await vscode.commands.executeCommand(commandId);
-        sendInfo(operationId, {
-            operationName: "classpath.executeCommand",
-            arg: commandId,
-        });
-    });
-
     private selectLibraries = instrumentOperation("classpath.selectLibraries", async (_operationId: string, currentProjectRoot: vscode.Uri) => {
         const jarFiles: vscode.Uri[] | undefined = await vscode.window.showOpenDialog({
             defaultUri: vscode.workspace.workspaceFolders?.[0].uri,
diff --git a/src/project-settings/projectSettingsView.ts b/src/project-settings/projectSettingsView.ts
index e54cb34c..7c9cccda 100644
--- a/src/project-settings/projectSettingsView.ts
+++ b/src/project-settings/projectSettingsView.ts
@@ -3,7 +3,7 @@
 
 import * as path from "path";
 import * as vscode from "vscode";
-import { sendError } from "vscode-extension-telemetry-wrapper";
+import { instrumentOperation, sendError, sendInfo } from "vscode-extension-telemetry-wrapper";
 import { getExtensionContext, getNonce } from "../utils";
 import { ClasspathPanelHandler } from "./handlers/classpath/ClasspathPanelHandler";
 
@@ -56,6 +56,15 @@ class ProjectSettingView {
 
         context.subscriptions.push(
             new ClasspathPanelHandler(projectSettingsPanel.webview),
+            projectSettingsPanel.webview.onDidReceiveMessage(async (message) => {
+                switch (message.command) {
+                    case "common.onWillExecuteCommand":
+                        this.executeCommand(message.id);
+                        break;
+                    default:
+                        break;
+                }
+            }),
         );
 
         projectSettingsPanel.webview.html = this.getHtmlForWebview(projectSettingsPanel.webview, context.asAbsolutePath("./out/assets/project-settings/index.js"));
@@ -83,6 +92,14 @@ class ProjectSettingView {
         </html>
         `;
     }
+
+    private executeCommand = instrumentOperation("projectSetting.executeCommand", async (operationId: string, commandId: string) => {
+        await vscode.commands.executeCommand(commandId);
+        sendInfo(operationId, {
+            operationName: "projectSetting.executeCommand",
+            arg: commandId,
+        });
+    });
 }
 
 export class ProjectSettingsViewSerializer implements vscode.WebviewPanelSerializer {

From 0e07393de0c50d39ff138034c4c1d23386946760 Mon Sep 17 00:00:00 2001
From: Sheng Chen <sheche@microsoft.com>
Date: Tue, 14 May 2024 14:05:08 +0800
Subject: [PATCH 2/2] Fix file case issue

---
 .../assets/mainpage/features/ProjectSettingView.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx b/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
index 227e1e1b..2ba3a99b 100644
--- a/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
+++ b/src/project-settings/assets/mainpage/features/ProjectSettingView.tsx
@@ -7,10 +7,10 @@ import ClasspathConfigurationView from "../../classpath/features/ClasspathConfig
 import { updateActiveTab } from "../../classpath/features/classpathConfigurationViewSlice";
 import "../style.scss";
 import { updateActiveSection } from "./commonSlice";
-import SideBar from "./component/sideBar";
 import ProjectSelector from "./component/ProjectSelector";
 import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
 import Footer from "./component/Footer";
+import SideBar from "./component/SideBar";
 
 const ProjectSettingView = (): JSX.Element => {
   const activeSection: string = useSelector((state: any) => state.commonConfig.ui.activeSection);