SM UI 3 (#734)

plan details
kyma-project · Jun 21, 2024 · fd39848 · fd39848
1 parent 02879d7
commit fd39848
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 31 deletions.
diff --git a/Makefile b/Makefile
@@ -212,18 +212,6 @@ ui: ## Run the ui
 webapp: ## Run App and UI
 	 @$(MAKE) -j ui app
 
-.PHONY: clean-ports
-clean-ports: ## Clean the ports
-	@echo "Cleaning ports"
-	$(echo $(kill -9 $(lsof -i tcp:8081 -t)))
-	$(echo $(lsof -i tcp:8081 -t))
-	$(echo $(kill -9 $(lsof -i tcp:3005 -t)))
-	$(echo $(lsof -i tcp:3005 -t))
-	@echo "Ports cleaned"
-
-.PHONE: webapp-dev
-webapp-dev: clean-ports webapp ## Run webapp for development
-
 .PHONY: ui-build
 ui-build: ## Build the UI
 	cd ui && npm install && npm run build
diff --git a/ui/src/components/SecretsView.tsx b/ui/src/components/SecretsView.tsx
@@ -4,7 +4,6 @@ import {useEffect, useState} from "react";
 import {Secrets} from "../shared/models";
 import Ok from "../shared/validator";
 import api from "../shared/api";
-import ServiceOfferingsView from "./ServiceOfferingsView";
 
 function SecretsView(props: any) {
     const [secrets, setSecrets] = useState<Secrets>();
@@ -21,7 +20,6 @@ function SecretsView(props: any) {
                 if (Ok(response.data) && Ok(response.data.items)) {
                     const secret = formatSecretText(response.data.items[0].name, response.data.items[0].namespace)
                     props.handler(secret);
-                    props.setPageContent(<ServiceOfferingsView secret={secret}/>);
                 } else {
                     props.handler(formatSecretText("", ""));
                 }
@@ -62,23 +60,16 @@ function SecretsView(props: any) {
     };
 
     return (
-        <div>
             <>
-                <div>
                     <ui5.Select
                         style={{width: "20vw"}}
                         onChange={(e) => {
-                            // @ts-ignore
-                            const secret = e.target.value;
-                            props.handler(secret);
-                            props.setPageContent(<ServiceOfferingsView secret={secret}/>);
+                            props.handler(e.target.value);
                         }}
                     >
                         {renderData()}
                     </ui5.Select>
-                </div>
             </>
-        </div>
     );
 }
 

diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx
@@ -127,16 +127,18 @@ function ServiceOfferingsDetailsView(props: any) {
               )}
             </ui5.Form>
           </ui5.Panel>
-
           <ui5.Panel headerLevel="H2" headerText="Plan Details">
             <ui5.Form>
               <ui5.FormItem label="Plan Name">
                 <ui5.Select id="selectOption" onChange={onChangeSelect}>
                   {details?.plans.map(
-                    (plan: ServiceOfferingPlan, index: number) => {
+                    (value: ServiceOfferingPlan, index: number) => {
+                      if (!Ok(plan) && index === 0) {
+                        setPlan(details?.plans[0]);
+                      }
                       return (
-                        <ui5.Option key={index} data-id={plan.name} >
-                          {plan.name}
+                        <ui5.Option key={index} data-id={value.name} >
+                          {value.name}
                         </ui5.Option>
                       );
                     }
@@ -148,7 +150,6 @@ function ServiceOfferingsDetailsView(props: any) {
               </ui5.FormItem>
             </ui5.Form>
           </ui5.Panel>
-
           <ui5.Panel accessibleRole="Form" headerLevel="H2" headerText="Create">
             <ui5.Form>
               <ui5.FormItem label="Name">

diff --git a/ui/src/components/View.tsx b/ui/src/components/View.tsx
@@ -10,6 +10,7 @@ function Overview(props: any) {
 
     function handler(s: any) {
         setSecret(s);
+        setPageContent(<ServiceOfferings secret={s}/>);
     }
 
     return (
@@ -24,9 +25,7 @@ function Overview(props: any) {
                 endContent={<span>SAP BTP, Kyma runtime</span>}
                 startContent={<span>Select your credentials:</span>}
             >
-                <Secrets handler={(e: any) => handler(e)} style={{width: "100vw"}}
-                         setPageContent={(e: any) => setPageContent(e)}
-                />
+                <Secrets handler={(e: any) => handler(e)} style={{width: "100vw"}} />
             </ui5.Bar>
             <>
                 <div>
@@ -65,7 +64,6 @@ function Overview(props: any) {
                         </ui5.Page>
                     </ui5.FlexBox>
                 </div>
-
             </>
         </>
     );