UI Corrections (#774)

* UI Unification * UI Corrections * API Fields Corrections
kyma-project · Aug 21, 2024 · d0445f4 · d0445f4
1 parent fb56e99
commit d0445f4
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 101 deletions.
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -6,7 +6,6 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>React App</title>
   </head>
-  <body>
-    <div id="root"></div>
+  <body id="root" class="ui5-content-native-scrollbars ui5-content-density-compact">
   </body>
 </html>
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -1,6 +1,3 @@
-.App {
-  text-align: center;
-}
 
 .App-logo {
   height: 40vmin;
@@ -13,16 +10,6 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
 
 .App-link {
   color: #61dafb;
@@ -40,8 +27,3 @@
 html {
   background-color: #D6D9DC;
 }
-
-body {
-  margin: 0px auto;
-  width: 100vw;
-}
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -3,10 +3,8 @@ import View from "./components/View";
 
 function App() {
   return (
-    <div id="App" className="App">
-      <div className="ui5-content-density-compact">
+    <div id="App" className="App html-wrap flex-container flex-column">
         <View />
-      </div>
     </div>
   );
 }

diff --git a/ui/src/components/CreateInstanceForm.tsx b/ui/src/components/CreateInstanceForm.tsx
@@ -23,7 +23,7 @@ function CreateInstanceForm(props: any) {
         setLoading(true)
         axios
             .post<ServiceInstance>(api("service-instances"), 
-            {name: name, planID: planId})
+            {name: name, service_plan_id: planId})
             .then((response) => {
                 setLoading(false);
                 // setServiceInstances(response.data);
@@ -45,7 +45,7 @@ function CreateInstanceForm(props: any) {
 
         setName(generateServiceInstanceName(
             props.plan?.name,
-            props.offering?.catalogName
+            props.offering?.catalog_name
         ))
 
         setPlanId(props.plan.id)
@@ -59,7 +59,7 @@ function CreateInstanceForm(props: any) {
                 <ui5.Form>
                     <ui5.FormItem label={<ui5.Label required>Name</ui5.Label>}>
                         <ui5.Input
-                            style={{ width: "100vw" }}
+                            style={{ width: "100%" }}
                             required
                             value={name}
                         />

diff --git a/ui/src/components/SecretsView.tsx b/ui/src/components/SecretsView.tsx
@@ -62,7 +62,7 @@ function SecretsView(props: any) {
     return (
             <>
                     <ui5.Select
-                        style={{width: "20vw"}}
+                        style={{width: "20%"}}
                         onChange={(e) => {
                             props.handler(e.target.value);
                         }}

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
@@ -15,7 +15,7 @@ function ServiceInstancesView() {
   const [portal, setPortal] = useState<JSX.Element>();
 
   useEffect(() => {
-    var useTestData = process.env.REACT_APP_USE_TEST_DATA
+    var useTestData = process.env.REACT_APP_USE_TEST_DATA === "true"
     if (!useTestData) {
       setLoading(true)
       axios
@@ -55,7 +55,8 @@ function ServiceInstancesView() {
           <ui5.TableRow 
           onClick={() => {
             console.log("Row clicked")
-            const instanceView = <ServiceInstancesDetailsView key={instance.id} instance={instance} open={true} />
+            const instanceView = <ServiceInstancesDetailsView 
+            key={instance.id} instance={instance} open={true} />
             const portal = createPortal( instanceView, document.getElementById("App")!!)
             setPortal(portal)
           }}
@@ -78,18 +79,25 @@ function ServiceInstancesView() {
   return (
     <>
     {
+      <ui5.Card>
+
+        <ui5.Table
+          columns={
+            <>
+              <ui5.TableColumn>
+                <ui5.Label>Service Instance</ui5.Label>
+              </ui5.TableColumn>
+
+              <ui5.TableColumn>
+                <ui5.Label>Service Namespace</ui5.Label>
+              </ui5.TableColumn>
+            </>
+          }
+        >
+          {renderData()}
+        </ui5.Table>
+      </ui5.Card>
 
-      <ui5.Table
-        columns={
-          <>
-            <ui5.TableColumn>
-              <ui5.Label>Service Instance</ui5.Label>
-            </ui5.TableColumn>
-          </>
-        }
-       >
-        {renderData()}
-      </ui5.Table>
     }
     {portal != null && portal}
 

diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx
@@ -76,7 +76,7 @@ function ServiceOfferingsDetailsView(props: any) {
               startContent={
                 <>
                   <ui5.Title level="H5">
-                    Create {offering?.catalogName} Service Instance
+                    Create {offering?.metadata.displayName} Service Instance
                   </ui5.Title>
                 </>
               }
@@ -96,7 +96,7 @@ function ServiceOfferingsDetailsView(props: any) {
           <ui5.Panel headerLevel="H2" headerText="Service Instance Details">
             <ui5.Form>
               <ui5.FormItem label="Name">
-                <ui5.Text>{offering?.catalogName}</ui5.Text>
+                <ui5.Text>{offering?.metadata.displayName}</ui5.Text>
               </ui5.FormItem>
               <ui5.FormItem label="Description">
                 <ui5.Text>{offering?.description}</ui5.Text>

diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
@@ -10,9 +10,10 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";
 import Ok from "../shared/validator";
 import {createPortal} from "react-dom";
 import ServiceOfferingsDetailsView from "./ServiceOfferingsDetailsView";
+import { ResponsiveGridLayout } from "@ui5/webcomponents-react";
 
 function ServiceOfferingsView(props: any) {
-    const greyImg = "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
+    const greyImg = "data:image/svg+xml;base64,PHN2ZyBpZD0icGxhY2Vob2xkZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2IDU2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzVhN2E5NDt9LmNscy0ye2ZpbGw6IzA0OTFkMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnBsYWNlaG9sZGVyPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni45NTMsMjAuNTg4YTQuMzYzLDQuMzYzLDAsMCwwLTEuODM3LS40NTksMy4yOTEsMy4yOTEsMCwwLDAtMy40LDMuMzc2LDQuMDg0LDQuMDg0LDAsMCwwLC45LDIuNjI1LDMuMDExLDMuMDExLDAsMCwwLDIuNSwxLjEyNiwzLjA4NSwzLjA4NSwwLDAsMCwxLjQ2Mi0uMzc1LDcuNTEyLDcuNTEyLDAsMCwwLDEuMzItLjg5MSwxMC4xMzUsMTAuMTM1LDAsMCwxLDEuMjI2LS44OTEsMi4yNywyLjI3LDAsMCwxLDEuMTc5LS4zNzVBMS41LDEuNSwwLDAsMSw1MiwyNi40MTJWMzkuMDcxYTIuODQzLDIuODQzLDAsMCwxLS41NzYsMiwyLjkyNiwyLjkyNiwwLDAsMS0yLjE1OS42MjZxLTIuOTIzLDAtNC4zODUuMDQ3dC0yLjEyMi4wNDdINDEuOTFhMy4zMjEsMy4zMjEsMCwwLDAsLjYuNjQ0LDUuNzE3LDUuNzE3LDAsMCwxLDIuMDc0LDQuMjIsNS4wNTQsNS4wNTQsMCwwLDEtMS42NSwzLjc1MUE1LjMzMSw1LjMzMSwwLDAsMSwzOS4xMTgsNTJhNS42LDUuNiwwLDAsMS00LjA1NS0xLjU0Nyw1LjA3MSw1LjA3MSwwLDAsMS0xLjYtMy44LDQuODYyLDQuODYyLDAsMCwxLC41MTktMi4zLDExLjQwNywxMS40MDcsMCwwLDEsMS41MTYtMS45NywyLjMzMywyLjMzMywwLDAsMCwuNDc1LS42OUgyOC4zM2ExLjM5NCwxLjM5NCwwLDAsMS0xLjA4NC0uNDY5LDIuMDExLDIuMDExLDAsMCwxLS41MTktMS4wMzJWMTUuOTA5YTEuOCwxLjgsMCwwLDEsLjQyNC0xLjE3MiwxLjQ0NCwxLjQ0NCwwLDAsMSwxLjE3OS0uNTE2aDcuNzMzYTEuOTQ5LDEuOTQ5LDAsMCwwLS4zNzctLjU2MmwtLjgtMS4xNzFhOC43ODgsOC43ODgsMCwwLDEtLjg0Ny0xLjUsNC43ODMsNC43ODMsMCwwLDEtLjQwNi0xLjY3NkE1LjM0OCw1LjM0OCwwLDAsMSwzOS4wODEsNGE1LjU1Miw1LjU1MiwwLDAsMSwzLjc5LDEuNTUzQTQuNjM1LDQuNjM1LDAsMCwxLDQ0LjU1LDkuMzQ1Yy0uMDI4LDEuNjg4LTIuMDIzLDQuMTI1LTIuMjQxLDQuMzc1YTEuNTc2LDEuNTc2LDAsMCwwLS4zLjVoNy4yNjFBMi42NSwyLjY1LDAsMCwxLDUyLDE2Ljg0N3Y0LjEyNnEwLDEuNzgyLTEuNywxLjc4MmExLjc0MywxLjc0MywwLDAsMS0xLjMxOS0uNTQ5QTEzLjE1MiwxMy4xNTIsMCwwLDAsNDYuOTUzLDIwLjU4OFpNMjguMzMsMzkuMDcxYS41ODIuNTgyLDAsMCwwLC42Ni42NTdoNy4xNjdhMS41NzksMS41NzksMCwwLDEsMS43OTIsMS43ODEsMi4yMzgsMi4yMzgsMCwwLDEtLjM4NywxLjI1NGMtLjI4My40MDgtLjU4Mi44MTMtLjksMS4yMTlzLS42MTMuODMtLjksMS4yNjZhMi41NDYsMi41NDYsMCwwLDAtLjQyNCwxLjQwNywzLjExNSwzLjExNSwwLDAsMCwxLjEzMSwyLjUzMiw0LjAyMiw0LjAyMiwwLDAsMCwyLjY0MS45MzgsMy43NzYsMy43NzYsMCwwLDAsMi40NTItLjkzOEEzLjExNSwzLjExNSwwLDAsMCw0Mi43LDQ2LjY1NWEyLjU0NiwyLjU0NiwwLDAsMC0uNDI0LTEuNDA3LDEyLjUxMywxMi41MTMsMCwwLDAtLjk0My0xLjI2NnEtLjUxOS0uNjA5LS45NDMtMS4xNzJhMi4yNjEsMi4yNjEsMCwwLDEtLjQ2Mi0xLjMsMS42MTQsMS42MTQsMCwwLDEsLjU2Ni0xLjMxMywyLjAwNiwyLjAwNiwwLDAsMSwxLjMyLS40NjhoNy40NXEuOTQyLDAsLjk0My0uNjU3VjI2LjUwNmExLjYwOSwxLjYwOSwwLDAsMC0uNzA3LjQyMnEtLjUxOS40MjEtMS4xNzkuODlhMTEuMDY5LDExLjA2OSwwLDAsMS0xLjUwOS44OTEsMy43NywzLjc3LDAsMCwxLTEuNy40MjIsNS40NSw1LjQ1LDAsMCwxLTMuNjc4LTEuNSw0LjI1LDQuMjUsMCwwLDEtMS4yMjYtMS44NzYsNy4wNTMsNy4wNTMsMCwwLDEtLjM3Ny0yLjI1LDUuMTY2LDUuMTY2LDAsMCwxLDEuNi0zLjcsNS4wMDksNS4wMDksMCwwLDEsMy42NzgtMS42NDEsNC44ODQsNC44ODQsMCwwLDEsMi4zNTcuNTE1QTcuNTg3LDcuNTg3LDAsMCwxLDQ5LjUxOCwyMC4yYy41MDYuNTg4Ljc4NS42MjQuNzg1LjYyNFYxNi44NDdhLjU0NC41NDQsMCwwLDAtLjMzMS0uNDY5LDEuNDIyLDEuNDIyLDAsMCwwLS43MDctLjE4N2gtNy40NWEyLjE0NywyLjE0NywwLDAsMS0xLjMyLS40MjIsMS41ODcsMS41ODcsMCwwLDEtLjU2Ni0xLjM2LDIuMDY3LDIuMDY3LDAsMCwxLC40MjUtMS4xNzJxLjQyNS0uNjA5Ljk0My0xLjIxOWExMi4yMjIsMTIuMjIyLDAsMCwwLC45NDMtMS4yNjYsMi41NDEsMi41NDEsMCwwLDAsLjQyNC0xLjQwNywzLjExOCwzLjExOCwwLDAsMC0xLjEzMi0yLjUzMiwzLjc3MSwzLjc3MSwwLDAsMC0yLjQ1MS0uOTM4LDMuODM5LDMuODM5LDAsMCwwLTIuNTk0LjkzOEEzLjE3OCwzLjE3OCwwLDAsMCwzNS40LDkuMzQ1YTIuNzc2LDIuNzc2LDAsMCwwLC40MjQsMS40NTQsMTAuMDM3LDEwLjAzNywwLDAsMCwuOSwxLjI2NWwuODQ5LDEuMjJhMi45MDksMi45MDksMCwwLDEsLjQ3MSwxLjEyNSwxLjYyNSwxLjYyNSwwLDAsMS0uNTE4LDEuMzYsMS45NTYsMS45NTYsMCwwLDEtMS4yNzQuNDIySDI5LjA4NHEtLjc1NSwwLS43NTQuNjU2Wm0yMy42NywwYTIuNywyLjcsMCwwLDEtLjU3NiwyLDIuNjc1LDIuNjc1LDAsMCwxLTIuMTU5LjYyNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM3LjE0NywzMS4wNzRhMy4zMjgsMy4zMjgsMCwwLDAtMi44NzgtMS4zNiw0LjQ0NSw0LjQ0NSwwLDAsMC0yLjEyLjQyMiw2LjE4NSw2LjE4NSwwLDAsMC0xLjE3OC44OTFxLS41NjcuNDcxLTEuMTMyLjg5MWMtLjM3My4yNzgtLjgwOC43NzMtMS4zLjc3NkgyNi43MjdWMTYuNDZhMy4zMzUsMy4zMzUsMCwwLDAtLjM3Ny0xLjUsMS40MzYsMS40MzYsMCwwLDAtMS40MTUtLjc1MUgxOS4yNzdjLS41LDAtLjc1NC4yNTEtLjc1NC44NDRhMS45MDcsMS45MDcsMCwwLDAsLjM3NywxLjEyNiw5LjE0Niw5LjE0NiwwLDAsMCwuOTQzLDEuMTI1LDUuMzQxLDUuMzQxLDAsMCwxLC45NDMsMS4yNjYsMy4yMzYsMy4yMzYsMCwwLDEsLjM3NywxLjU0Nyw0LjQ1NCw0LjQ1NCwwLDAsMS0xLjI3MywzLjE0MSw0LjA0OSw0LjA0OSwwLDAsMS0zLjA2NSwxLjM2LDMuOSwzLjksMCwwLDEtMy4wMTgtMS4zNiw0LjU0Nyw0LjU0NywwLDAsMS0xLjIyNS0zLjE0MSwyLjkzNiwyLjkzNiwwLDAsMSwuNDI0LTEuNTQ3LDEzLjU0OCwxMy41NDgsMCwwLDEsLjktMS4zMTNjLjMxNC0uNDA2LjYyNy0uNzgxLjk0My0xLjEyNWExLjU4OCwxLjU4OCwwLDAsMCwuNDcxLTEuMDc5cTAtLjg0My0xLjAzNy0uODQ0SDUuN2ExLjU4NywxLjU4NywwLDAsMC0xLjIyNi41MTZBMS44MDYsMS44MDYsMCwwLDAsNCwxNS45OTFWMzkuOWExLjgsMS44LDAsMCwwLC40NzEsMS4yNjYsMS41ODMsMS41ODMsMCwwLDAsMS4yMjYuNTE2aDguNDg4Yy42OTEsMCwxLjAzNS4yMzgsMS4wMzcuNzVhMS41NDcsMS41NDcsMCwwLDEtLjQyMi45NDRMMTMuODA3LDQ0LjVhNi41NDksNi41NDksMCwwLDAtLjk5LDEuMjY2LDMuMTE2LDMuMTE2LDAsMCwwLS40MjQsMS42NDEsNC4yMzcsNC4yMzcsMCwwLDAsMS4zNjcsMy40Nyw0Ljc5MSw0Ljc5MSwwLDAsMCw2LjIyNC0uMDQ3LDQuNTE3LDQuNTE3LDAsMCwwLDEuNDQ1LTMuMjgzLDMuNjMxLDMuNjMxLDAsMCwwLS41MTQtMS44ODljLS4yMTUtLjMwNy0uOTc4LTEuMTU4LS45NzgtMS4xNThMMTguOSw0My4zNzNhMS40OTIsMS40OTIsMCwwLDEtLjM3Ny0uOTM4cTAtLjc1Ljg0OC0uNzVoNS42NThxMS4yMjYsMCwxLjctMS41VjM1LjM0MUgyOC4zNWMuNTU3LDAsMS4wNTQuNTE5LDEuNDg5LjhhMTIuMjkxLDEyLjI5MSwwLDAsMSwxLjIyNi44OTFxLjU2NS40NjksMS4xNzkuODlhMy43ODYsMy43ODYsMCwwLDAsMS44MTYuNDIyLDMuMjU2LDMuMjU2LDAsMCwwLDMuMDg3LTEuNDA2LDUuMTE5LDUuMTE5LDAsMCwwLC45OS0zQTQuNzg4LDQuNzg4LDAsMCwwLDM3LjE0NywzMS4wNzRaIi8+PC9zdmc+"
     const [offerings, setOfferings] = useState<ServiceOfferings>();
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -66,12 +67,8 @@ function ServiceOfferingsView(props: any) {
         const cards = offerings?.items.map((offering, index) => {
             // @ts-ignore
             return (
-                <>
                     <ui5.Card
                         key={index}
-                        style={{
-                            width: '600px',
-                        }}
                         onClick={() => {
                             setPortal(createPortal( <ServiceOfferingsDetailsView offering={offering} />, document.getElementById("App")!!, window.crypto.randomUUID()))
                         }}
@@ -82,22 +79,29 @@ function ServiceOfferingsView(props: any) {
                                         <img alt="" src={getImg(offering.metadata.imageUrl)}></img>
                                     </ui5.Avatar>
                                 }
-                                style={{
-                                    width: "100%"
-                                }}
-                                subtitleText={offering.description}
-                                titleText={offering.catalogName}
+                                subtitleText={offering.catalog_name}
+                                titleText={offering.metadata.displayName}
                                 status={formatStatus(index, offerings?.numItems)}
                                 interactive
-                            />
+                            /> 
                         }
-                    />
-                </>
+                    > 
+                    </ui5.Card>
             );
         });
 
         return <>
-            {cards}
+
+            <ResponsiveGridLayout 
+                columnsXL={3}
+                columnsL={2}
+                columnsM={1}
+                columnsS={1}
+            >
+                {/* <React.Fragment key=".0"> */}
+                {cards}
+                {/* </React.Fragment> */}
+            </ResponsiveGridLayout>
             {portal != null && portal}
         </>
     };

diff --git a/ui/src/components/View.tsx b/ui/src/components/View.tsx
@@ -18,57 +18,49 @@ function Overview(props: any) {
 
     return (
         <>
-            <ui5.Page
-                header={<ui5.Bar design="Header">Service Management UI</ui5.Bar>}
-            >
-                <ui5.Title level="H1">Service Marketplace</ui5.Title>
-            </ui5.Page>
+
             <ui5.Bar
                 design="Header"
                 endContent={<span>SAP BTP, Kyma runtime</span>}
                 startContent={<span>Select your credentials:</span>}
             >
-                <Secrets handler={(e: any) => handler(e)} style={{width: "100vw"}} />
+                <Secrets handler={(e: any) => handler(e)} style={{width: "100%"}} />
             </ui5.Bar>
+
+
+            <div className="flex-container flex-row">
+
+
+
             <>
-                <div>
-                    <ui5.FlexBox
-                        style={{
-                            height: "100vh",
-                            width: "100vw",
-                        }}
-                    >
-                        <ui5.SideNavigation
-                            style={{
-                                width: "10%",
-                                height: "90vh",
-                            }}
-                        >
-                            <ui5.SideNavigationItem
-                                text="Marketplace"
-                                selected
-                                onClick={() => {
-                                    setPageContent(<ServiceOfferings secret={secret}/>);
-                                }}
-                            />
-                            <ui5.SideNavigationItem
-                                text="Service Instances"
-                                onClick={() => {
-                                    setPageContent(<ServiceInstancesView/>);
-                                }}
-                            />
-                        </ui5.SideNavigation>
-                        <ui5.Page
-                            backgroundDesign="Solid"
-                            style={{
-                                width: "90%",
-                            }}
-                        >
+                        <div className="margin-wrapper">
+
+                            <ui5.SideNavigation>
+                                <ui5.SideNavigationItem
+                                    text="Marketplace"
+                                    icon="puzzle"
+                                    selected
+                                    onClick={() => {
+                                        setPageContent(<ServiceOfferings secret={secret}/>);
+                                    }}
+                                />
+                                <ui5.SideNavigationItem
+                                    text="Service Instances"
+                                    icon="connected"
+                                    onClick={() => {
+                                        setPageContent(<ServiceInstancesView/>);
+                                    }}
+                                />
+                            </ui5.SideNavigation>
+                        </div>
+
+
+                        <div className="margin-wrapper scrollable">
                             {pageContent}
-                        </ui5.Page>
-                    </ui5.FlexBox>
-                </div>
+                        </div>
             </>
+        </div>
+
         </>
     );
 }

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -5,9 +5,56 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+* {
+  box-sizing: border-box;
+}
+
+#root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+}
+
+.flex-container {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+  width: 100%;
+}
+
+.flex-row {
+  flex-direction: row;
+  height: 100%;
+}
+
+
+#App {
+  display: flex;
+  min-height: 0;
+  position: relative;
+  height: 100%;
+}
+
+.margin-wrapper {
+  margin: 0.5rem 0.5rem 0 0.5rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+}
+
+.scrollable {
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,9 +1,10 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { ThemeProvider } from "@ui5/webcomponents-react";
 
+import '@ui5/webcomponents-react/dist/Assets';
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );