Missing FormItems for Status Messages, API Model Naming Conventions a…

…nd Fixes for List Addition/Removal (#803) * Review Remarks * Renamed API Fields * Corrected Status Message Placement * Renamed Properties to Match API Data --------- Co-authored-by: Marcin Szwed <[email protected]>
kyma-project · Aug 21, 2024 · 812052e · 812052e
1 parent f378e27
commit 812052e
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 44 deletions.
diff --git a/ui/src/components/CreateBindingForm.tsx b/ui/src/components/CreateBindingForm.tsx
@@ -10,7 +10,6 @@ import axios from "axios";
 import StatusMessage from "./StatusMessage";
 import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
 
-
 function CreateBindingForm(props: any) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<ApiError>();
@@ -27,25 +26,36 @@ function CreateBindingForm(props: any) {
       return false;
     }
 
-    createdBinding.serviceInstanceId = props.instanceId ?? ""
+    createdBinding.service_instance_id = props.instanceId ?? ""
 
     setLoading(true)
     axios
       .post<ServiceInstanceBinding>(api("service-bindings"), {
         name: createdBinding.name,
-        service_instance_id: createdBinding.serviceInstanceId,
-        secret_name: createdBinding.secretName,
-        secret_namespace: createdBinding.secretNamespace
+        service_instance_id: createdBinding.service_instance_id,
+        secret_name: createdBinding.secret_name,
+        secret_namespace: createdBinding.secret_namespace
       })
       .then((response) => {
-        setLoading(false);
-        setSuccess("Item with id " + response.data.name + " created, redirecting to instances page...");
-        setCreatedBinding(new ServiceInstanceBinding());
+
+        // propagate the created binding
+        props.onCreate(response.data);
+
+        // reset binding
+        const binding = new ServiceInstanceBinding()
+        binding.name = props.instanceName
+        binding.secret_name = props.instanceName
+        binding.secret_namespace = "default"
+
+        setSuccess("Item with id " + response.data.name + " created.");
+        setCreatedBinding(binding);
         setError(undefined);
+        setLoading(false);
       })
       .catch((error: ApiError) => {
         setLoading(false);
         setError(error);
+        setSuccess("");
       });
 
     e.preventDefault();
@@ -58,17 +68,21 @@ function CreateBindingForm(props: any) {
       return;
     }
 
+    if (!Ok(props.onCreate)) {
+      return;
+    }
+
     setLoading(true)
 
     setLoading(false)
     setError(undefined)
 
     createdBinding.name = props.instanceName
-    createdBinding.secretName = props.instanceName
-    createdBinding.secretNamespace = "default"
+    createdBinding.secret_name = props.instanceName
+    createdBinding.secret_namespace = "default"
     setCreatedBinding(createdBinding)
 
-  }, [createdBinding, props.instanceId, props.instanceName]);
+  }, [createdBinding, props.instanceId, props.instanceName, props.onCreate]);
 
   const renderData = () => {
 
@@ -83,7 +97,9 @@ function CreateBindingForm(props: any) {
     return (
       <ui5.Form
         onSubmit={handleCreate}>
-        <StatusMessage error={error ?? undefined} success={success} />
+        <ui5.FormItem>
+          <StatusMessage error={error ?? undefined} success={success} />
+        </ui5.FormItem>
         <ui5.FormItem label={<ui5.Label required>Name</ui5.Label>}>
           <ui5.Input
             style={{ width: "100%" }}
@@ -100,9 +116,9 @@ function CreateBindingForm(props: any) {
           <ui5.Input
             style={{ width: "100%" }}
             required
-            value={createdBinding?.secretName ?? ''}
+            value={createdBinding?.secret_name ?? ''}
             onChange={(e) => { // defaulted to service instance name
-              createdBinding!!.secretName = e.target.value
+              createdBinding!!.secret_name = e.target.value
               setCreatedBinding(createdBinding)
             }}
           />
@@ -112,9 +128,9 @@ function CreateBindingForm(props: any) {
           <ui5.Input
             style={{ width: "100%" }}
             required // default to "default"
-            value={createdBinding?.secretNamespace ?? ''}
+            value={createdBinding?.secret_namespace ?? ''}
             onChange={(e) => {
-              createdBinding!!.secretNamespace = e.target.value
+              createdBinding!!.secret_namespace = e.target.value
               setCreatedBinding(createdBinding)
             }}
           />

diff --git a/ui/src/components/CreateInstanceForm.tsx b/ui/src/components/CreateInstanceForm.tsx
@@ -115,7 +115,9 @@ function CreateInstanceForm(props: any) {
             <>
                 <ui5.Form
                     onSubmit={handleCreate}>
-                    <StatusMessage error={error ?? undefined} success={success} />
+                    <ui5.FormItem>
+                        <StatusMessage error={error ?? undefined} success={success} />
+                    </ui5.FormItem>
                     <ui5.FormItem label={<ui5.Label required>Name</ui5.Label>}>
                         <ui5.Input
                             style={{ width: "100%" }}

diff --git a/ui/src/components/ServiceBindingsList.tsx b/ui/src/components/ServiceBindingsList.tsx
@@ -1,20 +1,32 @@
 import * as ui5 from "@ui5/webcomponents-react";
-import { ApiError, ServiceInstanceBindings } from "../shared/models";
+import { ApiError, ServiceInstanceBinding, ServiceInstanceBindings } from "../shared/models";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import api from "../shared/api";
 import Ok from "../shared/validator";
 import serviceInstancesData from '../test-data/service-bindings.json';
 import StatusMessage from "./StatusMessage";
 
-function ServiceBindingsList(props: any) {
+const ServiceBindingsList= forwardRef((props: any, ref) => {
   const [bindings, setServiceInstanceBindings] = useState<ServiceInstanceBindings>();
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<ApiError>();
   const [portal] = useState<JSX.Element>();
   const [success] = useState("");
 
+  useImperativeHandle(ref, () => ({
+
+    add(binding : ServiceInstanceBinding) {
+      bindings?.items.push(binding);
+      console.log(bindings)
+      const newbindings = new ServiceInstanceBindings();
+      newbindings.items = bindings?.items ?? [];
+      setServiceInstanceBindings(newbindings);
+    }
+
+  }));
+
   function deleteBinding(id: string): boolean {
     setLoading(true);
 
@@ -24,6 +36,7 @@ function ServiceBindingsList(props: any) {
         bindings!!.items = bindings!!.items.filter(instance=> instance.id !== id)
         setServiceInstanceBindings(bindings);
         setLoading(false);
+        setError(undefined);
       })
       .catch((error) => {
         setLoading(false);
@@ -48,6 +61,7 @@ function ServiceBindingsList(props: any) {
         .then((response) => {
           setServiceInstanceBindings(response.data);
           setLoading(false);
+          setError(undefined);
         })
         .catch((error) => {
           setLoading(false);
@@ -76,7 +90,6 @@ function ServiceBindingsList(props: any) {
     }
     return bindings?.items.map((binding, index) => {
       return (
-        <>
           <ui5.TableRow>
 
             <ui5.TableCell>
@@ -88,11 +101,11 @@ function ServiceBindingsList(props: any) {
             </ui5.TableCell>
 
             <ui5.TableCell>
-              <ui5.Label>{binding.secretName}</ui5.Label>
+              <ui5.Label>{binding.secret_name}</ui5.Label>
             </ui5.TableCell>
 
             <ui5.TableCell>
-              <ui5.Label>{binding.secretNamespace}</ui5.Label>
+              <ui5.Label>{binding.secret_namespace}</ui5.Label>
             </ui5.TableCell>
 
             <ui5.TableCell>
@@ -108,16 +121,15 @@ function ServiceBindingsList(props: any) {
             </ui5.TableCell>
 
           </ui5.TableRow>
-        </>
       );
     });
   };
 
   return (
     <>
       <ui5.Form>
-      <StatusMessage error={error ?? undefined} success={success} />
-</ui5.Form>
+        <StatusMessage error={error ?? undefined} success={success} />
+      </ui5.Form>
 
       {
 
@@ -154,6 +166,6 @@ function ServiceBindingsList(props: any) {
 
     </>
   );
-}
+});
 
 export default ServiceBindingsList;
diff --git a/ui/src/components/ServiceInstancesDetailsView.tsx b/ui/src/components/ServiceInstancesDetailsView.tsx
@@ -3,6 +3,7 @@ import Ok from "../shared/validator";
 import {
   ApiError,
   ServiceInstance,
+  ServiceInstanceBinding,
 } from "../shared/models";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import ServiceBindingsList from "./ServiceBindingsList";
@@ -15,6 +16,7 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
 
   const [instance, setInstance] = useState<ServiceInstance>();
   const dialogRef = useRef(null);
+  const listRef = useRef(null);
 
   useImperativeHandle(ref, () => ({
 
@@ -34,6 +36,11 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
     }
   };
 
+  const onBindingAdded = (binding: ServiceInstanceBinding) => {
+    // @ts-ignore
+    listRef.current.add(binding)
+  }
+
   useEffect(() => {
     if (!Ok(props.instance)) {
       return;
@@ -82,7 +89,6 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
             design="Footer"
             endContent={
               <>
-                <ui5.Button>Create</ui5.Button>
                 <ui5.Button onClick={handleClose}>Close</ui5.Button>
               </>
             }
@@ -98,11 +104,11 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
         </ui5.Panel>
 
         <ui5.Panel accessibleRole="Form" headerLevel="H2" headerText="Bindings">
-          <ServiceBindingsList instance={props.instance} />
+          <ServiceBindingsList ref={listRef} instance={props.instance} />
         </ui5.Panel>
 
         <ui5.Panel headerLevel="H2" headerText="Create Binding">
-          <CreateBindingForm instanceId={props.instance.id} instanceName={props.instance.name}></CreateBindingForm>
+          <CreateBindingForm onCreate={(binding: ServiceInstanceBinding) => onBindingAdded(binding) } instanceId={props.instance.id} instanceName={props.instance.name}></CreateBindingForm>
         </ui5.Panel>
 
       </ui5.Dialog>

diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
@@ -29,7 +29,7 @@ function ServiceOfferingsView(props: any) {
             axios
                 .get<ServiceOfferings>(
                     api(
-                        `service-offerings/${secretText.namespace}/${secretText.secretName}`
+                        `service-offerings/${secretText.namespace}/${secretText.secret_name}`
                     )
                 )
                 .then((response) => {
@@ -121,10 +121,10 @@ function splitSecret(secret: string) {
         return {};
     }
     const secretParts = secret.split(" ");
-    const secretName = secretParts[0];
+    const secret_name = secretParts[0];
     let namespace = secretParts[2].replace("(", "");
     namespace = namespace.replace(")", "");
-    return {secretName, namespace};
+    return {secret_name, namespace};
 }
 
 function formatStatus(i: number, j: number) {

diff --git a/ui/src/shared/models.tsx b/ui/src/shared/models.tsx
@@ -76,14 +76,14 @@ export class ServiceInstance {
   serviceBindings: ServiceInstanceBinding[] = [];
 }
 
-export interface ServiceInstanceBindings {
-  items: ServiceInstanceBinding[];
+export class ServiceInstanceBindings {
+  items: ServiceInstanceBinding[] = [];
 }
 
 export class ServiceInstanceBinding {
   id: string = "";
-  serviceInstanceId: string = "";
+  service_instance_id: string = "";
   name: string = "";
-  secretName: string = "";
-  secretNamespace: string = "";
+  secret_name: string = "";
+  secret_namespace: string = "";
 }
diff --git a/ui/src/test-data/service-bindings.json b/ui/src/test-data/service-bindings.json
@@ -2,19 +2,19 @@
     "items": [
         {
             "id": "1",
-            "serviceInstanceId": "1",
+            "service_instance_id": "1",
             "name": "Test Service Binding 1",
             "namespace": "",
-            "secretName": "",
-            "secretNamespace": ""
+            "secret_name": "",
+            "secret_namespace": ""
         },
         {
             "id": "2",
-            "serviceInstanceId": "2",
+            "service_instance_id": "2",
             "name": "Test Service Binding 2",
             "namespace": "",
-            "secretName": "",
-            "secretNamespace": ""
+            "secret_name": "",
+            "secret_namespace": ""
         }
     ]
 }