From e3eacfefe675e93507aa25b5532815560a5a967b Mon Sep 17 00:00:00 2001
From: Jean-Michel FRANCOIS <jeanmichel.francois@qlik.com>
Date: Thu, 11 Jul 2024 15:06:06 +0200
Subject: [PATCH] chore: migrate to css module

---
 .../src/app/components/App/App.component.js   |  72 +++++-----
 .../App/{App.scss => App.module.scss}         |   0
 .../src/app/components/Menu/Menu.component.js | 128 +++++++++---------
 .../Menu/{Menu.scss => Menu.module.scss}      |   0
 .../src/main/frontend/src/app/index.js        |  11 +-
 .../src/main/frontend/src/index.scss          |  22 ---
 6 files changed, 106 insertions(+), 127 deletions(-)
 rename component-tools-webapp/src/main/frontend/src/app/components/App/{App.scss => App.module.scss} (100%)
 rename component-tools-webapp/src/main/frontend/src/app/components/Menu/{Menu.scss => Menu.module.scss} (100%)
 delete mode 100644 component-tools-webapp/src/main/frontend/src/index.scss

diff --git a/component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js b/component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js
index 420a8ef0aca70..efe844662cec8 100644
--- a/component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js
+++ b/component-tools-webapp/src/main/frontend/src/app/components/App/App.component.js
@@ -17,52 +17,52 @@
 import React from "react";
 
 import {
-	IconsProvider,
-	HeaderBar,
-	Layout,
-	Notification,
+  IconsProvider,
+  HeaderBar,
+  Layout,
+  Notification,
 } from "@talend/react-components";
 
 import Menu from "../Menu";
 import Detail from "../Detail";
 
-import theme from "./App.scss";
+import theme from "./App.module.scss";
 
 class App extends React.Component {
-	constructor(props) {
-		super(props);
-		this.notificationLeaveFn = this.notificationLeaveFn.bind(this);
-	}
+  constructor(props) {
+    super(props);
+    this.notificationLeaveFn = this.notificationLeaveFn.bind(this);
+  }
 
-	notificationLeaveFn(notification) {
-		this.props.removeNotification(notification);
-	}
+  notificationLeaveFn(notification) {
+    this.props.removeNotification(notification);
+  }
 
-	render() {
-		const header = (
-			<HeaderBar
-				logo={{ isFull: true }}
-				brand={{
-					id: "header-brand",
-					label: "Talend Component Kit Web Tester",
-				}}
-			/>
-		);
-		const menu = <Menu />;
+  render() {
+    const header = (
+      <HeaderBar
+        logo={{ isFull: true }}
+        brand={{
+          id: "header-brand",
+          label: "Talend Component Kit Web Tester",
+        }}
+      />
+    );
+    const menu = <Menu />;
 
-		return (
-			<div className={theme.App}>
-				<IconsProvider />
-				<Layout mode={"TwoColumns"} header={header} one={menu}>
-					<Detail saga="Detail::start" />
-				</Layout>
-				<Notification
-					notifications={this.props.notifications}
-					leaveFn={this.notificationLeaveFn}
-				/>
-			</div>
-		);
-	}
+    return (
+      <div className={theme.App}>
+        <IconsProvider />
+        <Layout mode={"TwoColumns"} header={header} one={menu}>
+          <Detail saga="Detail::start" />
+        </Layout>
+        <Notification
+          notifications={this.props.notifications}
+          leaveFn={this.notificationLeaveFn}
+        />
+      </div>
+    );
+  }
 }
 
 export default App;
diff --git a/component-tools-webapp/src/main/frontend/src/app/components/App/App.scss b/component-tools-webapp/src/main/frontend/src/app/components/App/App.module.scss
similarity index 100%
rename from component-tools-webapp/src/main/frontend/src/app/components/App/App.scss
rename to component-tools-webapp/src/main/frontend/src/app/components/App/App.module.scss
diff --git a/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.component.js b/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.component.js
index 767a3280df316..489533f9e2cbb 100644
--- a/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.component.js
+++ b/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.component.js
@@ -18,77 +18,77 @@ import React from "react";
 import { CircularProgress, TreeView, Toggle } from "@talend/react-components";
 import { Modal } from "@talend/design-system";
 
-import theme from "./Menu.scss";
+import theme from "./Menu.module.scss";
 
 class Menu extends React.Component {
-	constructor(props) {
-		super(props);
-		this.onSelect = this.onSelect.bind(this);
-		this.onToggle = this.onToggle.bind(this);
-		this.onSwitch = this.onSwitch.bind(this);
-		this.noOp = () => {};
-	}
+  constructor(props) {
+    super(props);
+    this.onSelect = this.onSelect.bind(this);
+    this.onToggle = this.onToggle.bind(this);
+    this.onSwitch = this.onSwitch.bind(this);
+    this.noOp = () => {};
+  }
 
-	componentDidMount() {
-		this.props.getComponentsList();
-	}
+  componentDidMount() {
+    this.props.getComponentsList();
+  }
 
-	onToggle(event, node) {
-		this.props.toggleComponent(node);
-	}
+  onToggle(event, node) {
+    this.props.toggleComponent(node);
+  }
 
-	onSelect(event, node) {
-		if (node.$$type === "component" && node.selected) {
-			return;
-		}
-		this.props.selectComponent(node);
-	}
+  onSelect(event, node) {
+    if (node.$$type === "component" && node.selected) {
+      return;
+    }
+    this.props.selectComponent(node);
+  }
 
-	onSwitch() {
-		this.props.getComponentsList({
-			configuration: !this.props.configurationSelected,
-		});
-	}
+  onSwitch() {
+    this.props.getComponentsList({
+      configuration: !this.props.configurationSelected,
+    });
+  }
 
-	render() {
-		if (this.props.isLoading) {
-			return <CircularProgress light />;
-		}
-		return (
-			<div className={theme.menu}>
-				{this.props.error && <p>{this.props.error}</p>}
-				<div className={theme.TreeViewHeader}>
-					<div>Components</div>
-					<Toggle
-						id="index-switch"
-						onChange={this.onSwitch}
-						checked={this.props.configurationSelected}
-					/>
-					<div>Configurations</div>
-				</div>
-				<TreeView
-					id="menu"
-					noHeader={true}
-					className={theme.menu}
-					structure={this.props.categories || []}
-					selectedId={this.props.selectedId}
-					onSelect={this.onSelect}
-					onToggle={this.onToggle}
-					onToggleAllSiblings={this.noOp}
-				/>
-				{this.props.displayDocumentation && (
-					<Modal
-						header={{ title: "Documentation" }}
-						onClose={this.props.onDocumentationModalClose}
-					>
-						<div
-							dangerouslySetInnerHTML={{ __html: this.props.documentation }}
-						/>
-					</Modal>
-				)}
-			</div>
-		);
-	}
+  render() {
+    if (this.props.isLoading) {
+      return <CircularProgress light />;
+    }
+    return (
+      <div className={theme.menu}>
+        {this.props.error && <p>{this.props.error}</p>}
+        <div className={theme.TreeViewHeader}>
+          <div>Components</div>
+          <Toggle
+            id="index-switch"
+            onChange={this.onSwitch}
+            checked={this.props.configurationSelected}
+          />
+          <div>Configurations</div>
+        </div>
+        <TreeView
+          id="menu"
+          noHeader={true}
+          className={theme.menu}
+          structure={this.props.categories || []}
+          selectedId={this.props.selectedId}
+          onSelect={this.onSelect}
+          onToggle={this.onToggle}
+          onToggleAllSiblings={this.noOp}
+        />
+        {this.props.displayDocumentation && (
+          <Modal
+            header={{ title: "Documentation" }}
+            onClose={this.props.onDocumentationModalClose}
+          >
+            <div
+              dangerouslySetInnerHTML={{ __html: this.props.documentation }}
+            />
+          </Modal>
+        )}
+      </div>
+    );
+  }
 }
 
 export default Menu;
diff --git a/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.scss b/component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.module.scss
similarity index 100%
rename from component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.scss
rename to component-tools-webapp/src/main/frontend/src/app/components/Menu/Menu.module.scss
diff --git a/component-tools-webapp/src/main/frontend/src/app/index.js b/component-tools-webapp/src/main/frontend/src/app/index.js
index d43dce5fad7f4..b66c0e794b117 100644
--- a/component-tools-webapp/src/main/frontend/src/app/index.js
+++ b/component-tools-webapp/src/main/frontend/src/app/index.js
@@ -15,15 +15,16 @@
  */
 
 import cmf from "@talend/react-cmf";
-import "@talend/bootstrap-theme";
+import "@talend/bootstrap-theme/dist/bootstrap.css";
+import "./index.scss";
 
 import components from "./components";
 import ComponentForm from "@talend/react-containers/lib/ComponentForm";
 import reducer from "./store/reducers";
 
 cmf.bootstrap({
-	components: { ComponentForm, ...components },
-	reducer,
-	appId: "component-kit-tools-webapp",
-	RootComponent: components.App,
+  components: { ComponentForm, ...components },
+  reducer,
+  appId: "component-kit-tools-webapp",
+  RootComponent: components.App,
 });
diff --git a/component-tools-webapp/src/main/frontend/src/index.scss b/component-tools-webapp/src/main/frontend/src/index.scss
deleted file mode 100644
index 1792887a9ce0e..0000000000000
--- a/component-tools-webapp/src/main/frontend/src/index.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- *  Copyright (C) 2006-2024 Talend Inc. - www.talend.com
- *
- *  Licensed under the Apache License, Version 2.0 (the 'License');
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an 'AS IS' BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-@use "@talend/bootstrap-theme/src/theme/guidelines" as *;
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}