Dialog and StatusMessage Mechanics Corrections (#799)

Mechanics Corection for Dialog and Status Messages
kyma-project · Aug 21, 2024 · e6b854c · e6b854c
1 parent d4f0c4e
commit e6b854c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 56 deletions.
diff --git a/ui/src/components/ServiceInstancesDetailsView.tsx b/ui/src/components/ServiceInstancesDetailsView.tsx
@@ -4,23 +4,34 @@ import {
   ApiError,
   ServiceInstance,
 } from "../shared/models";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import ServiceBindingsList from "./ServiceBindingsList";
 import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
 import CreateBindingForm from "./CreateBindingForm";
 
-
-function ServiceInstancesDetailsView(props: any) {
+const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
   const [loading, setLoading] = useState(true);
   const [error] = useState<ApiError>();
 
   const [instance, setInstance] = useState<ServiceInstance>();
   const dialogRef = useRef(null);
 
+  useImperativeHandle(ref, () => ({
+
+    open() {
+      if (dialogRef.current) {
+        // @ts-ignore
+        dialogRef.current.show();
+      }
+    }
+
+  }));
 
   const handleClose = () => {
-    // @ts-ignoren
-    dialogRef.current.close();
+    if (dialogRef.current) {
+      // @ts-ignore
+      dialogRef.current.close();
+    }
   };
 
   useEffect(() => {
@@ -32,7 +43,6 @@ function ServiceInstancesDetailsView(props: any) {
 
     setLoading(true)
 
-
     setLoading(false)
 
   }, [props.instance]);
@@ -53,7 +63,6 @@ function ServiceInstancesDetailsView(props: any) {
 
     return (
       <ui5.Dialog
-        open={true}
         style={{ width: "50%" }}
         ref={dialogRef}
         header={
@@ -93,15 +102,14 @@ function ServiceInstancesDetailsView(props: any) {
         </ui5.Panel>
 
         <ui5.Panel headerLevel="H2" headerText="Create Binding">
-          <CreateBindingForm instanceId={props.instance.id}></CreateBindingForm>
-
+          <CreateBindingForm instanceId={props.instance.id} instanceName={props.instance.name}></CreateBindingForm>
         </ui5.Panel>
 
       </ui5.Dialog>
     )
   }
   // @ts-ignore
   return <>{renderData()}</>;
-}
+})
 
 export default ServiceInstancesDetailsView;
diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
@@ -1,19 +1,22 @@
 import * as ui5 from "@ui5/webcomponents-react";
-import { ServiceInstances } from "../shared/models";
+import { ServiceInstance, ServiceInstances } from "../shared/models";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import api from "../shared/api";
 import Ok from "../shared/validator";
 import serviceInstancesData from '../test-data/serivce-instances.json';
 import ServiceInstancesDetailsView from "./ServiceInstancesDetailsView";
 import { useParams } from "react-router-dom";
+import StatusMessage from "./StatusMessage";
 
 function ServiceInstancesView() {
   const [serviceInstances, setServiceInstances] = useState<ServiceInstances>();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [portal, setPortal] = useState<JSX.Element>();
+  const [selectedInstance, setSelectedInstance] = useState<ServiceInstance>(new ServiceInstance());
+  const dialogRef = useRef();
+  const [success, setSuccess] = useState("");
 
   let { id } = useParams();
 
@@ -53,29 +56,28 @@ function ServiceInstancesView() {
     />
   }
 
-  if (error) {
-    return <ui5.IllustratedMessage name="UnableToLoad" />
-  }
-
   function openPortal(instance: any) {
-    console.log("Row clicked")
-    const instanceView = <ServiceInstancesDetailsView key={instance.id} instance={instance} />
-    const portal = createPortal(instanceView, document.getElementById("App")!!)
-    setPortal(portal)
+    setSelectedInstance(instance)
+    //@ts-ignore
+    dialogRef.current.open()
   }
 
   function deleteInstance(id: string): boolean {
     setLoading(true);
-
     axios
-    .delete(api("service-instances") + "/" + id)
-    .then((response) => {
-      setLoading(false);
-    })
-    .catch((error) => {
-      setLoading(false);
-      setError(error);
-    });
+      .delete(api("service-instances") + "/" + id)
+      .then((response) => {
+        serviceInstances!!.items = serviceInstances!!.items.filter(instance => instance.id !== id)
+        setServiceInstances(serviceInstances);
+        setSuccess("Service instance deleted successfully")
+        setError(null)
+        setLoading(false);
+
+      })
+      .catch((error) => {
+        setLoading(false);
+        setError(error);
+      });
 
     return true;
   }
@@ -110,9 +112,11 @@ function ServiceInstancesView() {
                 <ui5.Button
                   design="Default"
                   icon="delete"
-                  onClick={function _a(e: any) { 
+                  onClick={function _a(e: any) {
+                    e.preventDefault();
                     e.stopPropagation();
-                    return deleteInstance(instance.id); 
+                    deleteInstance(instance.id);
+                    return true;
                   }}
                 >
                 </ui5.Button>
@@ -128,30 +132,34 @@ function ServiceInstancesView() {
 
   return (
     <>
-        <ui5.Card>
 
-          <ui5.Table
-            columns={
-              <>
-                <ui5.TableColumn>
-                  <ui5.Label>Service Instance</ui5.Label>
-                </ui5.TableColumn>
+        <StatusMessage 
+         error={error ?? undefined} success={success} />
 
-                <ui5.TableColumn>
-                  <ui5.Label>Service Namespace</ui5.Label>
-                </ui5.TableColumn>
+      <ui5.Card>
 
-                <ui5.TableColumn>
-                  <ui5.Label>Action</ui5.Label>
-                </ui5.TableColumn>
 
-              </>
-            }
-          >
-            {renderData()}
-          </ui5.Table>
-        </ui5.Card>
-      {portal != null && portal}
+        <ui5.Table
+          columns={
+            <>
+              <ui5.TableColumn>
+                <ui5.Label>Service Instance</ui5.Label>
+              </ui5.TableColumn>
+
+              <ui5.TableColumn>
+                <ui5.Label>Service Namespace</ui5.Label>
+              </ui5.TableColumn>
+
+              <ui5.TableColumn>
+                <ui5.Label>Action</ui5.Label>
+              </ui5.TableColumn>
+            </>
+          }
+        >
+          {renderData()}
+        </ui5.Table>
+      </ui5.Card>
+      {createPortal(<ServiceInstancesDetailsView instance={selectedInstance} ref={dialogRef} />, document.getElementById("App")!!)}
     </>
   );
 }

diff --git a/ui/src/components/StatusMessage.tsx b/ui/src/components/StatusMessage.tsx
@@ -32,23 +32,19 @@ function StatusMessage(props: StatusMessageProps) {
 
         if (props.error) {
             return (
-                <ui5.FormItem>
                     <ui5.MessageStrip
                         design="Negative"
                         onClose={function _a() { }}>
                         {message}
                     </ui5.MessageStrip>
-                </ui5.FormItem>
             );
         } else if (props.success) {
             return (
-                <ui5.FormItem>
                     <ui5.MessageStrip
                         design="Information"
                         onClose={function _a() { }}>
                         {props.success}
                     </ui5.MessageStrip>
-                </ui5.FormItem>
             );
         }
     };