fix: rewriting to remove warnings (#8119)

config-ui/README.md

@@ -14,6 +14,7 @@ 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.
 -->
+
 # DevLake - Configuration UI
 
 The **Config-UI Application** is a **React.js** SPA (Single-Page-Application) that manages the setup and configuration of a **DevLake** Instance.

config-ui/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "packageManager": "yarn@3.4.1",
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "vite build",

config-ui/public/onboard/step-1/github.md

@@ -22,7 +22,7 @@ limitations under the License.
    ![1](/onboard/assets/github/1.png)
 
 2. What is the turnaround time for your Code Review process?
-   
+
    ![2](/onboard/assets/github/2.png)
 
 3. How effective is your CI/CD pipeline?

config-ui/public/onboard/step-3/azuredevops.md

@@ -31,4 +31,4 @@ Yes, data transformations can be applied by setting up a Scope Config for the se
 
 ##### Q4. How often is the data synchronized?
 
-Data synchronization occurs daily. This frequency can be modified on the project details page as needed.
+Data synchronization occurs daily. This frequency can be modified on the project details page as needed.

config-ui/src/index.css

@@ -71,7 +71,6 @@ p {
   height: 100vh;
 }
 
-
 .ant-tour-title {
   padding-right: 28px;
-}
+}

config-ui/src/main.tsx

@@ -16,7 +16,7 @@
  *
  */
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { ConfigProvider } from 'antd';
@@ -27,7 +27,9 @@ import { store } from './app/store';
 import { router } from './app/routrer';
 import './index.css';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
   <ConfigProvider
     theme={{
       token: {
@@ -39,5 +41,4 @@ ReactDOM.render(
       <RouterProvider router={router} fallbackElement={<PageLoading />} />
     </Provider>
   </ConfigProvider>,
-  document.getElementById('root'),
 );

config-ui/src/plugins/components/scope-config-form/index.tsx

@@ -150,7 +150,7 @@ export const ScopeConfigForm = ({
               title="Data Entities"
               description={
                 <>
-                  Select the data entities you wish to collect for the Data Scope. 
+                  Select the data entities you wish to collect for the Data Scope.
                   <ExternalLink link="{DOC_URL.DATA_ENTITIES}">Learn about data entities</ExternalLink>
                 </>
               }