From 9fcc68eb5d660efc4bd4740c2a70b20c49973fb3 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:38:49 +0200
Subject: [PATCH 1/9] Flexible Column Layout for Offerings and Instances

---
 ui/src/components/CreateBindingForm.tsx       |  4 +-
 ui/src/components/ServiceBindingsList.tsx     |  1 -
 .../ServiceInstancesDetailsView.tsx           | 50 +----------
 ui/src/components/ServiceInstancesView.tsx    | 90 ++++++++++++-------
 .../ServiceOfferingsDetailsView.tsx           | 44 ++-------
 ui/src/components/ServiceOfferingsView.tsx    | 50 ++++++++---
 ui/src/components/StatusMessage.tsx           |  7 +-
 ui/src/index.css                              | 18 ++--
 8 files changed, 123 insertions(+), 141 deletions(-)

diff --git a/ui/src/components/CreateBindingForm.tsx b/ui/src/components/CreateBindingForm.tsx
index fc1a41b00..76d464b39 100644
--- a/ui/src/components/CreateBindingForm.tsx
+++ b/ui/src/components/CreateBindingForm.tsx
@@ -18,6 +18,7 @@ function CreateBindingForm(props: any) {
   const [success, setSuccess] = useState("");
 
   const handleCreate = (e: any): boolean => {
+    setLoading(true)
     e.preventDefault();
     e.stopPropagation();
 
@@ -28,7 +29,6 @@ function CreateBindingForm(props: any) {
 
     createdBinding.service_instance_id = props.instanceId ?? ""
 
-    setLoading(true)
     axios
       .post<ServiceInstanceBinding>(api("service-bindings"), {
         name: createdBinding.name,
@@ -70,6 +70,7 @@ function CreateBindingForm(props: any) {
   }
 
   useEffect(() => {
+    setLoading(true)
     if (!Ok(props.instanceId)) {
       return;
     }
@@ -82,7 +83,6 @@ function CreateBindingForm(props: any) {
       return;
     }
 
-    setLoading(true)
 
     setLoading(false)
     setError(undefined)
diff --git a/ui/src/components/ServiceBindingsList.tsx b/ui/src/components/ServiceBindingsList.tsx
index 20b495ed5..d06b5e50e 100644
--- a/ui/src/components/ServiceBindingsList.tsx
+++ b/ui/src/components/ServiceBindingsList.tsx
@@ -95,7 +95,6 @@ const ServiceBindingsList = forwardRef((props: any, ref) => {
           setError(error);
           setLoading(false);
         });
-      setLoading(false)
     } else {
       setServiceInstanceBindings(serviceInstancesData)
       setLoading(false);
diff --git a/ui/src/components/ServiceInstancesDetailsView.tsx b/ui/src/components/ServiceInstancesDetailsView.tsx
index fd07fa602..2174012b4 100644
--- a/ui/src/components/ServiceInstancesDetailsView.tsx
+++ b/ui/src/components/ServiceInstancesDetailsView.tsx
@@ -16,27 +16,8 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
   const [error] = useState<ApiError>();
 
   const [instance, setInstance] = useState<ServiceInstance>();
-  const dialogRef = useRef(null);
   const listRef = useRef(null);
 
-  useImperativeHandle(ref, () => ({
-
-    open() {
-      if (dialogRef.current) {
-        // @ts-ignore
-        dialogRef.current.show();
-      }
-    }
-
-  }));
-
-  const handleClose = () => {
-    if (dialogRef.current) {
-      // @ts-ignore
-      dialogRef.current.close();
-      setInstance(undefined);
-    }
-  };
 
   const onBindingAdded = (binding: ServiceInstanceBinding) => {
     // @ts-ignore
@@ -44,6 +25,7 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
   }
 
   useEffect(() => {
+    setLoading(true);
     if (!Ok(props.instance)) {
       return;
     }
@@ -74,33 +56,7 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
     }
 
     return (
-      <ui5.Dialog
-        style={{ width: "50%" }}
-        ref={dialogRef}
-        onAfterClose={handleClose}
-        header={
-          <ui5.Bar
-            design="Header"
-            startContent={
-              <>
-                <ui5.Title level="H5">
-                  Create {instance?.name} Service Instance
-                </ui5.Title>
-              </>
-            }
-          />
-        }
-        footer={
-          <ui5.Bar
-            design="Footer"
-            endContent={
-              <>
-                <ui5.Button onClick={handleClose}>Close</ui5.Button>
-              </>
-            }
-          />
-        }
-      >
+    <>
         <ui5.Panel headerLevel="H2" headerText="Service Details">
           <ui5.Form>
             <ui5.FormItem label="Name">
@@ -116,8 +72,8 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
         <ui5.Panel headerLevel="H2" headerText="Create Binding">
           <CreateBindingForm secret={secret} onCreate={(binding: ServiceInstanceBinding) => onBindingAdded(binding)} instanceId={props.instance.id} instanceName={props.instance.name} />
         </ui5.Panel>
+    </>
 
-      </ui5.Dialog>
     )
   }
   // @ts-ignore
diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
index fa1df033f..c0790b668 100644
--- a/ui/src/components/ServiceInstancesView.tsx
+++ b/ui/src/components/ServiceInstancesView.tsx
@@ -10,6 +10,7 @@ import ServiceInstancesDetailsView from "./ServiceInstancesDetailsView";
 import { useParams } from "react-router-dom";
 import StatusMessage from "./StatusMessage";
 import { splitSecret } from "../shared/common";
+import { FCLLayout, FlexibleColumnLayout } from "@ui5/webcomponents-react";
 
 function ServiceInstancesView(props: any) {
   const [serviceInstances, setServiceInstances] = useState<ServiceInstances>();
@@ -19,6 +20,7 @@ function ServiceInstancesView(props: any) {
   const [selectedInstance, setSelectedInstance] = useState<ServiceInstance>(new ServiceInstance());
   const dialogRef = useRef();
   const [success, setSuccess] = useState("");
+  const [layout, setLayout] = useState(FCLLayout.OneColumn);
 
   let { id } = useParams();
 
@@ -65,7 +67,7 @@ function ServiceInstancesView(props: any) {
             setLoading(false);
             setError(error);
           });
-      } 
+      }
     } else {
       setLoading(true)
       setServiceInstances(serviceInstancesData)
@@ -73,7 +75,7 @@ function ServiceInstancesView(props: any) {
     }
   }, [id, props, props.secret]);
 
-    
+
   if (loading) {
     return <ui5.BusyIndicator
       active
@@ -113,12 +115,12 @@ function ServiceInstancesView(props: any) {
   }
 
   const renderData = () => {
-    
+
     // @ts-ignore
     if (!Ok(serviceInstances) || !Ok(serviceInstances.items)) {
       return <ui5.IllustratedMessage name="NoEntries" />
     }
-    
+
     return serviceInstances?.items.map((instance, index) => {
 
 
@@ -127,7 +129,8 @@ function ServiceInstancesView(props: any) {
           <ui5.TableRow
             selected={id === instance.id}
             onClick={() => {
-              openPortal(instance)
+              setSelectedInstance(instance)
+              setLayout(FCLLayout.TwoColumnsMidExpanded)
             }}
           >
 
@@ -164,34 +167,57 @@ function ServiceInstancesView(props: any) {
 
   return (
     <>
+      <FlexibleColumnLayout id="fcl" layout={layout}>
+
+      <div  selection-mode="Single" slot="startColumn" className="margin-wrapper">
 
-        <StatusMessage 
-         error={error ?? undefined} success={success} />
-
-      <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>
-
-              <ui5.TableColumn>
-                <ui5.Label>Action</ui5.Label>
-              </ui5.TableColumn>
-            </>
-          }
-        >
-          {renderData()}
-        </ui5.Table>
-      </ui5.Card>
-      {createPortal(<ServiceInstancesDetailsView secret={secret} instance={selectedInstance} ref={dialogRef} />, document.getElementById("App")!!)}
+        <StatusMessage
+          error={error ?? undefined} success={success} />
+
+        <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>
+
+                <ui5.TableColumn>
+                  <ui5.Label>Action</ui5.Label>
+                </ui5.TableColumn>
+              </>
+            }
+          >
+            {renderData()}
+          </ui5.Table>
+        </ui5.Card>
+
+      </div>
+
+
+        <div slot="midColumn" >
+          <ui5.Bar>
+            <div className="icons-container" slot="endContent">
+              <ui5.Button design="Transparent" icon="full-screen" onClick={() => {
+                if (layout === FCLLayout.MidColumnFullScreen) {
+                  setLayout(FCLLayout.TwoColumnsMidExpanded)
+                } else {
+                  setLayout(FCLLayout.MidColumnFullScreen)
+                }
+              }}></ui5.Button>
+              <ui5.Button icon="decline" design="Transparent" onClick={() => {
+                setLayout(FCLLayout.OneColumn)
+              }}></ui5.Button>
+            </div>
+          </ui5.Bar>
+          <ServiceInstancesDetailsView secret={secret} instance={selectedInstance} />
+        </div>
+
+      </FlexibleColumnLayout>
 
     </>
   );
diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx
index 1ba52a102..70dd867b2 100644
--- a/ui/src/components/ServiceOfferingsDetailsView.tsx
+++ b/ui/src/components/ServiceOfferingsDetailsView.tsx
@@ -35,6 +35,7 @@ function ServiceOfferingsDetailsView(props: any) {
   };
 
   useEffect(() => {
+    setLoading(true);
     if (!Ok(props.offering)) {
       return;
     }
@@ -44,7 +45,6 @@ function ServiceOfferingsDetailsView(props: any) {
     }
 
     setSecret(props.secret);
-    setLoading(true);
     axios
       .get<ServiceOfferingDetails>(api(`service-offerings/${props.offering.id}`),
       {
@@ -59,16 +59,13 @@ function ServiceOfferingsDetailsView(props: any) {
         setDetails(response.data);
         setPlan(response.data?.plans[0])
         setOffering(props.offering);
-        // @ts-ignore
-        dialogRef.current.show();
+        setError(null)
       })
       .catch((error) => {
         setLoading(false);
         setError(error);
       });
-    setLoading(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [props.offering, props.secret]);
 
   const renderData = () => {
     if (loading) {
@@ -84,34 +81,8 @@ function ServiceOfferingsDetailsView(props: any) {
     }
 
     return (
-      <>
-        <ui5.Dialog
-          style={{ width: "50%" }}
-          ref={dialogRef}
-          header={
-            <ui5.Bar
-              design="Header"
-              startContent={
-                <>
-                  <ui5.Title level="H5">
-                    Create {offering?.metadata.displayName} Service Instance
-                  </ui5.Title>
-                </>
-              }
-            />
-          }
-          footer={
-            <ui5.Bar
-              design="Footer"
-              endContent={
-                <>
-                  <ui5.Button onClick={handleClose}>Close</ui5.Button>
-                </>
-              }
-            />
-          }
-        >
-          <ui5.Panel headerLevel="H2" headerText="Service Instance Details">
+        <div slot="midColumn">
+          <ui5.Panel  headerLevel="H2" headerText="Service Instance Details">
             <ui5.Form>
               <ui5.FormItem label="Name">
                 <ui5.Text>{offering?.metadata.displayName}</ui5.Text>
@@ -172,10 +143,9 @@ function ServiceOfferingsDetailsView(props: any) {
           <ui5.Panel accessibleRole="Form" headerLevel="H2" headerText="Create">
             <CreateInstanceForm secret={secret} plan={plan} offering={props.offering} />
           </ui5.Panel>
-        </ui5.Dialog>
-      </>
+      </div>
     )}
-  // @ts-ignore
+  
   return <>{renderData()}</>;
 }
 
diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
index 748a450df..0f1f0e7ed 100644
--- a/ui/src/components/ServiceOfferingsView.tsx
+++ b/ui/src/components/ServiceOfferingsView.tsx
@@ -1,7 +1,7 @@
 import * as ui5 from "@ui5/webcomponents-react";
 import { useEffect, useState } from "react";
 import axios from "axios";
-import { Secret, ServiceOfferings } from "../shared/models";
+import { Secret, ServiceOffering, ServiceOfferings } from "../shared/models";
 import api from "../shared/api";
 import "@ui5/webcomponents-icons/dist/AllIcons.js"
 import "@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js"
@@ -10,16 +10,18 @@ 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";
+import { FCLLayout, FlexibleColumnLayout, ResponsiveGridLayout, Title } from "@ui5/webcomponents-react";
 import { splitSecret } from "../shared/common";
 
 function ServiceOfferingsView(props: any) {
     const greyImg = "data:image/svg+xml;base64,PHN2ZyBpZD0icGxhY2Vob2xkZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2IDU2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzVhN2E5NDt9LmNscy0ye2ZpbGw6IzA0OTFkMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnBsYWNlaG9sZGVyPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni45NTMsMjAuNTg4YTQuMzYzLDQuMzYzLDAsMCwwLTEuODM3LS40NTksMy4yOTEsMy4yOTEsMCwwLDAtMy40LDMuMzc2LDQuMDg0LDQuMDg0LDAsMCwwLC45LDIuNjI1LDMuMDExLDMuMDExLDAsMCwwLDIuNSwxLjEyNiwzLjA4NSwzLjA4NSwwLDAsMCwxLjQ2Mi0uMzc1LDcuNTEyLDcuNTEyLDAsMCwwLDEuMzItLjg5MSwxMC4xMzUsMTAuMTM1LDAsMCwxLDEuMjI2LS44OTEsMi4yNywyLjI3LDAsMCwxLDEuMTc5LS4zNzVBMS41LDEuNSwwLDAsMSw1MiwyNi40MTJWMzkuMDcxYTIuODQzLDIuODQzLDAsMCwxLS41NzYsMiwyLjkyNiwyLjkyNiwwLDAsMS0yLjE1OS42MjZxLTIuOTIzLDAtNC4zODUuMDQ3dC0yLjEyMi4wNDdINDEuOTFhMy4zMjEsMy4zMjEsMCwwLDAsLjYuNjQ0LDUuNzE3LDUuNzE3LDAsMCwxLDIuMDc0LDQuMjIsNS4wNTQsNS4wNTQsMCwwLDEtMS42NSwzLjc1MUE1LjMzMSw1LjMzMSwwLDAsMSwzOS4xMTgsNTJhNS42LDUuNiwwLDAsMS00LjA1NS0xLjU0Nyw1LjA3MSw1LjA3MSwwLDAsMS0xLjYtMy44LDQuODYyLDQuODYyLDAsMCwxLC41MTktMi4zLDExLjQwNywxMS40MDcsMCwwLDEsMS41MTYtMS45NywyLjMzMywyLjMzMywwLDAsMCwuNDc1LS42OUgyOC4zM2ExLjM5NCwxLjM5NCwwLDAsMS0xLjA4NC0uNDY5LDIuMDExLDIuMDExLDAsMCwxLS41MTktMS4wMzJWMTUuOTA5YTEuOCwxLjgsMCwwLDEsLjQyNC0xLjE3MiwxLjQ0NCwxLjQ0NCwwLDAsMSwxLjE3OS0uNTE2aDcuNzMzYTEuOTQ5LDEuOTQ5LDAsMCwwLS4zNzctLjU2MmwtLjgtMS4xNzFhOC43ODgsOC43ODgsMCwwLDEtLjg0Ny0xLjUsNC43ODMsNC43ODMsMCwwLDEtLjQwNi0xLjY3NkE1LjM0OCw1LjM0OCwwLDAsMSwzOS4wODEsNGE1LjU1Miw1LjU1MiwwLDAsMSwzLjc5LDEuNTUzQTQuNjM1LDQuNjM1LDAsMCwxLDQ0LjU1LDkuMzQ1Yy0uMDI4LDEuNjg4LTIuMDIzLDQuMTI1LTIuMjQxLDQuMzc1YTEuNTc2LDEuNTc2LDAsMCwwLS4zLjVoNy4yNjFBMi42NSwyLjY1LDAsMCwxLDUyLDE2Ljg0N3Y0LjEyNnEwLDEuNzgyLTEuNywxLjc4MmExLjc0MywxLjc0MywwLDAsMS0xLjMxOS0uNTQ5QTEzLjE1MiwxMy4xNTIsMCwwLDAsNDYuOTUzLDIwLjU4OFpNMjguMzMsMzkuMDcxYS41ODIuNTgyLDAsMCwwLC42Ni42NTdoNy4xNjdhMS41NzksMS41NzksMCwwLDEsMS43OTIsMS43ODEsMi4yMzgsMi4yMzgsMCwwLDEtLjM4NywxLjI1NGMtLjI4My40MDgtLjU4Mi44MTMtLjksMS4yMTlzLS42MTMuODMtLjksMS4yNjZhMi41NDYsMi41NDYsMCwwLDAtLjQyNCwxLjQwNywzLjExNSwzLjExNSwwLDAsMCwxLjEzMSwyLjUzMiw0LjAyMiw0LjAyMiwwLDAsMCwyLjY0MS45MzgsMy43NzYsMy43NzYsMCwwLDAsMi40NTItLjkzOEEzLjExNSwzLjExNSwwLDAsMCw0Mi43LDQ2LjY1NWEyLjU0NiwyLjU0NiwwLDAsMC0uNDI0LTEuNDA3LDEyLjUxMywxMi41MTMsMCwwLDAtLjk0My0xLjI2NnEtLjUxOS0uNjA5LS45NDMtMS4xNzJhMi4yNjEsMi4yNjEsMCwwLDEtLjQ2Mi0xLjMsMS42MTQsMS42MTQsMCwwLDEsLjU2Ni0xLjMxMywyLjAwNiwyLjAwNiwwLDAsMSwxLjMyLS40NjhoNy40NXEuOTQyLDAsLjk0My0uNjU3VjI2LjUwNmExLjYwOSwxLjYwOSwwLDAsMC0uNzA3LjQyMnEtLjUxOS40MjEtMS4xNzkuODlhMTEuMDY5LDExLjA2OSwwLDAsMS0xLjUwOS44OTEsMy43NywzLjc3LDAsMCwxLTEuNy40MjIsNS40NSw1LjQ1LDAsMCwxLTMuNjc4LTEuNSw0LjI1LDQuMjUsMCwwLDEtMS4yMjYtMS44NzYsNy4wNTMsNy4wNTMsMCwwLDEtLjM3Ny0yLjI1LDUuMTY2LDUuMTY2LDAsMCwxLDEuNi0zLjcsNS4wMDksNS4wMDksMCwwLDEsMy42NzgtMS42NDEsNC44ODQsNC44ODQsMCwwLDEsMi4zNTcuNTE1QTcuNTg3LDcuNTg3LDAsMCwxLDQ5LjUxOCwyMC4yYy41MDYuNTg4Ljc4NS42MjQuNzg1LjYyNFYxNi44NDdhLjU0NC41NDQsMCwwLDAtLjMzMS0uNDY5LDEuNDIyLDEuNDIyLDAsMCwwLS43MDctLjE4N2gtNy40NWEyLjE0NywyLjE0NywwLDAsMS0xLjMyLS40MjIsMS41ODcsMS41ODcsMCwwLDEtLjU2Ni0xLjM2LDIuMDY3LDIuMDY3LDAsMCwxLC40MjUtMS4xNzJxLjQyNS0uNjA5Ljk0My0xLjIxOWExMi4yMjIsMTIuMjIyLDAsMCwwLC45NDMtMS4yNjYsMi41NDEsMi41NDEsMCwwLDAsLjQyNC0xLjQwNywzLjExOCwzLjExOCwwLDAsMC0xLjEzMi0yLjUzMiwzLjc3MSwzLjc3MSwwLDAsMC0yLjQ1MS0uOTM4LDMuODM5LDMuODM5LDAsMCwwLTIuNTk0LjkzOEEzLjE3OCwzLjE3OCwwLDAsMCwzNS40LDkuMzQ1YTIuNzc2LDIuNzc2LDAsMCwwLC40MjQsMS40NTQsMTAuMDM3LDEwLjAzNywwLDAsMCwuOSwxLjI2NWwuODQ5LDEuMjJhMi45MDksMi45MDksMCwwLDEsLjQ3MSwxLjEyNSwxLjYyNSwxLjYyNSwwLDAsMS0uNTE4LDEuMzYsMS45NTYsMS45NTYsMCwwLDEtMS4yNzQuNDIySDI5LjA4NHEtLjc1NSwwLS43NTQuNjU2Wm0yMy42NywwYTIuNywyLjcsMCwwLDEtLjU3NiwyLDIuNjc1LDIuNjc1LDAsMCwxLTIuMTU5LjYyNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM3LjE0NywzMS4wNzRhMy4zMjgsMy4zMjgsMCwwLDAtMi44NzgtMS4zNiw0LjQ0NSw0LjQ0NSwwLDAsMC0yLjEyLjQyMiw2LjE4NSw2LjE4NSwwLDAsMC0xLjE3OC44OTFxLS41NjcuNDcxLTEuMTMyLjg5MWMtLjM3My4yNzgtLjgwOC43NzMtMS4zLjc3NkgyNi43MjdWMTYuNDZhMy4zMzUsMy4zMzUsMCwwLDAtLjM3Ny0xLjUsMS40MzYsMS40MzYsMCwwLDAtMS40MTUtLjc1MUgxOS4yNzdjLS41LDAtLjc1NC4yNTEtLjc1NC44NDRhMS45MDcsMS45MDcsMCwwLDAsLjM3NywxLjEyNiw5LjE0Niw5LjE0NiwwLDAsMCwuOTQzLDEuMTI1LDUuMzQxLDUuMzQxLDAsMCwxLC45NDMsMS4yNjYsMy4yMzYsMy4yMzYsMCwwLDEsLjM3NywxLjU0Nyw0LjQ1NCw0LjQ1NCwwLDAsMS0xLjI3MywzLjE0MSw0LjA0OSw0LjA0OSwwLDAsMS0zLjA2NSwxLjM2LDMuOSwzLjksMCwwLDEtMy4wMTgtMS4zNiw0LjU0Nyw0LjU0NywwLDAsMS0xLjIyNS0zLjE0MSwyLjkzNiwyLjkzNiwwLDAsMSwuNDI0LTEuNTQ3LDEzLjU0OCwxMy41NDgsMCwwLDEsLjktMS4zMTNjLjMxNC0uNDA2LjYyNy0uNzgxLjk0My0xLjEyNWExLjU4OCwxLjU4OCwwLDAsMCwuNDcxLTEuMDc5cTAtLjg0My0xLjAzNy0uODQ0SDUuN2ExLjU4NywxLjU4NywwLDAsMC0xLjIyNi41MTZBMS44MDYsMS44MDYsMCwwLDAsNCwxNS45OTFWMzkuOWExLjgsMS44LDAsMCwwLC40NzEsMS4yNjYsMS41ODMsMS41ODMsMCwwLDAsMS4yMjYuNTE2aDguNDg4Yy42OTEsMCwxLjAzNS4yMzgsMS4wMzcuNzVhMS41NDcsMS41NDcsMCwwLDEtLjQyMi45NDRMMTMuODA3LDQ0LjVhNi41NDksNi41NDksMCwwLDAtLjk5LDEuMjY2LDMuMTE2LDMuMTE2LDAsMCwwLS40MjQsMS42NDEsNC4yMzcsNC4yMzcsMCwwLDAsMS4zNjcsMy40Nyw0Ljc5MSw0Ljc5MSwwLDAsMCw2LjIyNC0uMDQ3LDQuNTE3LDQuNTE3LDAsMCwwLDEuNDQ1LTMuMjgzLDMuNjMxLDMuNjMxLDAsMCwwLS41MTQtMS44ODljLS4yMTUtLjMwNy0uOTc4LTEuMTU4LS45NzgtMS4xNThMMTguOSw0My4zNzNhMS40OTIsMS40OTIsMCwwLDEtLjM3Ny0uOTM4cTAtLjc1Ljg0OC0uNzVoNS42NThxMS4yMjYsMCwxLjctMS41VjM1LjM0MUgyOC4zNWMuNTU3LDAsMS4wNTQuNTE5LDEuNDg5LjhhMTIuMjkxLDEyLjI5MSwwLDAsMSwxLjIyNi44OTFxLjU2NS40NjksMS4xNzkuODlhMy43ODYsMy43ODYsMCwwLDAsMS44MTYuNDIyLDMuMjU2LDMuMjU2LDAsMCwwLDMuMDg3LTEuNDA2LDUuMTE5LDUuMTE5LDAsMCwwLC45OS0zQTQuNzg4LDQuNzg4LDAsMCwwLDM3LjE0NywzMS4wNzRaIi8+PC9zdmc+"
     const [offerings, setOfferings] = useState<ServiceOfferings>();
+    const [selectedOffering, setSelectedOffering] = useState<ServiceOffering>();
     const [secret, setSecret] = useState<Secret>();
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [portal, setPortal] = useState<JSX.Element>();
+    const [layout, setLayout] = useState(FCLLayout.OneColumn);
 
     useEffect(() => {
         setLoading(true);
@@ -44,12 +46,12 @@ function ServiceOfferingsView(props: any) {
                     api(
                         `service-offerings`
                     ), {
-                        params:
-                        {
-                          sm_secret_name: secret.name,
-                          sm_secret_namespace: secret.namespace
-                        }
-                      }
+                    params:
+                    {
+                        sm_secret_name: secret.name,
+                        sm_secret_namespace: secret.namespace
+                    }
+                }
                 )
                 .then((response) => {
                     setLoading(false);
@@ -93,9 +95,11 @@ function ServiceOfferingsView(props: any) {
             // @ts-ignore
             return (
                 <ui5.Card
+                    selection-mode="Single"
                     key={index}
                     onClick={() => {
-                        setPortal(createPortal(<ServiceOfferingsDetailsView secret={secret} offering={offering} />, document.getElementById("App")!!, window.crypto.randomUUID()))
+                        setSelectedOffering(offering)
+                        setLayout(FCLLayout.TwoColumnsMidExpanded)
                     }}
                     header={
                         <ui5.CardHeader
@@ -117,9 +121,8 @@ function ServiceOfferingsView(props: any) {
 
         return <>
 
-            <div className="margin-wrapper">
-
-                <ResponsiveGridLayout
+            <FlexibleColumnLayout id="fcl" layout={layout}>
+                <ResponsiveGridLayout selection-mode="Single" slot="startColumn" className="margin-wrapper"
                     columnsXL={3}
                     columnsL={2}
                     columnsM={1}
@@ -127,11 +130,30 @@ function ServiceOfferingsView(props: any) {
                 >
                     {cards}
                 </ResponsiveGridLayout>
-            </div>
-            {portal != null && portal}
+
+                <div slot="midColumn" >
+                    <ui5.Bar>
+                        <div className="icons-container" slot="endContent">
+                            <ui5.Button design="Transparent" icon="full-screen" onClick={() => {
+                                if(layout === FCLLayout.MidColumnFullScreen) {
+                                    setLayout(FCLLayout.TwoColumnsMidExpanded)
+                                } else {
+                                    setLayout(FCLLayout.MidColumnFullScreen)
+                                }
+                            }}></ui5.Button>
+                            <ui5.Button icon="decline" design="Transparent" onClick={() => { 
+                                setLayout(FCLLayout.OneColumn)
+                            }}></ui5.Button>
+                        </div>
+                    </ui5.Bar>
+                    <ServiceOfferingsDetailsView secret={secret} offering={selectedOffering} />
+                </div>
+            </FlexibleColumnLayout>
         </>
     };
 
+
+
     return <>{renderData()}</>;
 }
 
diff --git a/ui/src/components/StatusMessage.tsx b/ui/src/components/StatusMessage.tsx
index eec131201..08b933c99 100644
--- a/ui/src/components/StatusMessage.tsx
+++ b/ui/src/components/StatusMessage.tsx
@@ -34,18 +34,19 @@ function StatusMessage(props: StatusMessageProps) {
             return (
                     <ui5.MessageStrip
                         design="Negative"
-                        onClose={function _a() { }}>
+                        >
                         {message}
                     </ui5.MessageStrip>
             );
         } else if (props.success) {
             return (
                     <ui5.MessageStrip
-                        design="Information"
-                        onClose={function _a() { }}>
+                        design="Information">
                         {props.success}
                     </ui5.MessageStrip>
             );
+        } else {
+            <div></div>
         }
     };
 
diff --git a/ui/src/index.css b/ui/src/index.css
index ba8a590d5..aad016406 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -48,7 +48,7 @@ code {
   height: 100%;
 }
 
-.margin-wrapper {
+.margin-wrapper, ui5-panel {
   margin: 0.5rem 0.5rem 0 0.5rem;
   padding: 0.5rem 0.5rem 0 0.5rem;
 }
@@ -97,10 +97,6 @@ header[data-component-name="ObjectPageTopHeader"] {
   display: inline !important;
 }
 
-div[data-component-name="ObjectPageContent"] {
-  padding-top: 1rem;
-}
-
 header[data-component-name="ObjectPageTopHeader"]:has(ui5-illustrated-message) {
   height: 100%;
 }
@@ -108,4 +104,16 @@ header[data-component-name="ObjectPageTopHeader"]:has(ui5-illustrated-message) {
 ui5-busy-indicator {
   padding-top: 1rem;
   display: block;
+}
+
+div[data-component-name="ObjectPageContent"] {
+  padding-inline: 0;
+}
+
+ui5-flexible-column-layout {
+  height: 100%;
+}
+
+.icons-container {
+  display: flex;
 }
\ No newline at end of file

From 5222e9988bec978ddbcd5cc08f331adf31ebad98 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:44:29 +0200
Subject: [PATCH 2/9] Updated PR Number

---
 docs/contributor/09-10-ui.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/contributor/09-10-ui.md b/docs/contributor/09-10-ui.md
index 40f8828dc..8c9c44a1c 100644
--- a/docs/contributor/09-10-ui.md
+++ b/docs/contributor/09-10-ui.md
@@ -30,7 +30,7 @@ Follow the steps below to run BTP Manager with UI:
     ```
 3. Set the **IMG** environment variable to the image of BTP Manager with UI.
     ```shell
-    export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-844
+    export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-850
     ```
 4. Run `deploy` makefile rule to deploy BTP Manager with UI.
     ```shell
@@ -42,7 +42,7 @@ Follow the steps below to run BTP Manager with UI:
     ```
     If you encounter the following error during Pod creation due to Warden's admission webhook:
     ```
-    Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-844 validation failed
+    Error creating: admission webhook "validation.webhook.warden.kyma-project.io" denied the request: Pod images europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-850 validation failed
     ```
     you must scale the BTP Manager deployment to 0 replicas, delete the webhook, and then scale the deployment back to 1 replica.
     ```shell

From 109da9db56e88966e5b78fc2a4b5482eb550d60b Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:51:09 +0200
Subject: [PATCH 3/9] Unnecessary DialogRef and OpenPortal

---
 ui/src/components/ServiceInstancesView.tsx        | 10 ++--------
 ui/src/components/ServiceOfferingsDetailsView.tsx |  6 ------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
index c0790b668..405dfab34 100644
--- a/ui/src/components/ServiceInstancesView.tsx
+++ b/ui/src/components/ServiceInstancesView.tsx
@@ -18,7 +18,6 @@ function ServiceInstancesView(props: any) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [selectedInstance, setSelectedInstance] = useState<ServiceInstance>(new ServiceInstance());
-  const dialogRef = useRef();
   const [success, setSuccess] = useState("");
   const [layout, setLayout] = useState(FCLLayout.OneColumn);
 
@@ -57,7 +56,8 @@ function ServiceInstancesView(props: any) {
             if (id) {
               const instance = response.data.items.find((instance) => instance.id === id);
               if (instance) {
-                openPortal(instance);
+                setSelectedInstance(instance)
+                setLayout(FCLLayout.TwoColumnsMidExpanded)
               }
             }
             setLoading(false);
@@ -84,12 +84,6 @@ function ServiceInstancesView(props: any) {
     />
   }
 
-  function openPortal(instance: any) {
-    setSelectedInstance(instance)
-    //@ts-ignore
-    dialogRef.current.open()
-  }
-
   function deleteInstance(id: string): boolean {
     setLoading(true);
     axios
diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx
index 70dd867b2..ff86db9ae 100644
--- a/ui/src/components/ServiceOfferingsDetailsView.tsx
+++ b/ui/src/components/ServiceOfferingsDetailsView.tsx
@@ -18,12 +18,6 @@ function ServiceOfferingsDetailsView(props: any) {
   const [error, setError] = useState(null);
   const [offering, setOffering] = useState<ServiceOffering>();
   const [details, setDetails] = useState<ServiceOfferingDetails>();
-  const dialogRef = useRef(null);
-
-  const handleClose = () => {
-    // @ts-ignore
-    dialogRef.current.close();
-  };
 
   const onChangeSelect = (e: any) => {
     // @ts-ignore

From 1d5518496b8b7ff0d0958d134e9dcbbf04a0e598 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:58:04 +0200
Subject: [PATCH 4/9] Corrected Border Radius and Error Message Margin

Main object page was displaied with rounder bottom corners, which is not compliant with how Busola displays it. Additionally, error message was rendered just at the top of its component withouth any margins.
---
 ui/src/index.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index aad016406..284bd27c4 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -88,7 +88,7 @@ ui5-select {
 
 /* corrected margins on object page */
 div[data-component-name="ObjectPage"] {
-  border-radius: 0.5em;
+  border-radius: 0.5em 0.5em 0 0;
 }
 
 /* corrected margins on object page */
@@ -116,4 +116,8 @@ ui5-flexible-column-layout {
 
 .icons-container {
   display: flex;
+}
+
+ui5-message-strip {
+  margin-bottom: 1rem;
 }
\ No newline at end of file

From 4c77edde805363327b25cd9f14d4fc2e85c13dc8 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 12:58:34 +0200
Subject: [PATCH 5/9] Removed Unused Imports

---
 ui/src/components/ServiceInstancesView.tsx        | 3 +--
 ui/src/components/ServiceOfferingsDetailsView.tsx | 2 +-
 ui/src/components/ServiceOfferingsView.tsx        | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
index 405dfab34..b74d8d625 100644
--- a/ui/src/components/ServiceInstancesView.tsx
+++ b/ui/src/components/ServiceInstancesView.tsx
@@ -1,8 +1,7 @@
 import * as ui5 from "@ui5/webcomponents-react";
 import { Secret, ServiceInstance, ServiceInstances } from "../shared/models";
 import axios from "axios";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
 import api from "../shared/api";
 import Ok from "../shared/validator";
 import serviceInstancesData from '../test-data/serivce-instances.json';
diff --git a/ui/src/components/ServiceOfferingsDetailsView.tsx b/ui/src/components/ServiceOfferingsDetailsView.tsx
index ff86db9ae..a9f8c8186 100644
--- a/ui/src/components/ServiceOfferingsDetailsView.tsx
+++ b/ui/src/components/ServiceOfferingsDetailsView.tsx
@@ -6,7 +6,7 @@ import {
   ServiceOfferingDetails,
   ServiceOfferingPlan,
 } from "../shared/models";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
 import api from "../shared/api";
 import CreateInstanceForm from "./CreateInstanceForm";
diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
index 0f1f0e7ed..8b822cc84 100644
--- a/ui/src/components/ServiceOfferingsView.tsx
+++ b/ui/src/components/ServiceOfferingsView.tsx
@@ -8,7 +8,6 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js"
 import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js"
 import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";
 import Ok from "../shared/validator";
-import { createPortal } from "react-dom";
 import ServiceOfferingsDetailsView from "./ServiceOfferingsDetailsView";
 import { FCLLayout, FlexibleColumnLayout, ResponsiveGridLayout, Title } from "@ui5/webcomponents-react";
 import { splitSecret } from "../shared/common";

From 3181854eeceb6823ed43291c2e9f7dc35330a9c9 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:00:51 +0200
Subject: [PATCH 6/9] UnableToLoad Page Corrections

Copied the same mechanics from offerings view for displaying error message when secret data is not able to load hiding main view. Previously, the view for service instances was rendered without any data. Not it is hidden behind error banner.

Added additional error message to UnableToLoad banner to show more detailed message of what has gone wrong.
---
 ui/src/components/ServiceInstancesView.tsx | 127 ++++++++++++---------
 ui/src/components/ServiceOfferingsView.tsx |  13 ++-
 2 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
index b74d8d625..39cce363c 100644
--- a/ui/src/components/ServiceInstancesView.tsx
+++ b/ui/src/components/ServiceInstancesView.tsx
@@ -74,7 +74,6 @@ function ServiceInstancesView(props: any) {
     }
   }, [id, props, props.secret]);
 
-
   if (loading) {
     return <ui5.BusyIndicator
       active
@@ -107,7 +106,7 @@ function ServiceInstancesView(props: any) {
     return true;
   }
 
-  const renderData = () => {
+  const renderTableData = () => {
 
     // @ts-ignore
     if (!Ok(serviceInstances) || !Ok(serviceInstances.items)) {
@@ -158,62 +157,86 @@ function ServiceInstancesView(props: any) {
     });
   };
 
-  return (
-    <>
-      <FlexibleColumnLayout id="fcl" layout={layout}>
-
-      <div  selection-mode="Single" slot="startColumn" className="margin-wrapper">
-
-        <StatusMessage
-          error={error ?? undefined} success={success} />
+  const renderData = () => {
+    if (loading) {
+      return <ui5.BusyIndicator
+        active
+        delay={1}
+        size="Medium"
+      />
+    }
 
-        <ui5.Card>
-          <ui5.Table
-            columns={
-              <>
-                <ui5.TableColumn>
-                  <ui5.Label>Service Instance</ui5.Label>
-                </ui5.TableColumn>
+    if (error) {
 
-                <ui5.TableColumn>
-                  <ui5.Label>Service Namespace</ui5.Label>
-                </ui5.TableColumn>
+      return <>
+          <div className="margin-wrapper">
+              <StatusMessage error={error ?? undefined} success={undefined} />
+              <ui5.IllustratedMessage name="UnableToLoad" />
+          </div>
+      </>
+  }
+    return (
+      <>
+        <FlexibleColumnLayout id="fcl" layout={layout}>
+
+          <div selection-mode="Single" slot="startColumn" className="margin-wrapper">
+
+            <StatusMessage
+              error={error ?? undefined} success={success} />
+
+            <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>
+
+                    <ui5.TableColumn>
+                      <ui5.Label>Action</ui5.Label>
+                    </ui5.TableColumn>
+                  </>
+                }
+              >
+                {renderTableData()}
+              </ui5.Table>
+            </ui5.Card>
+
+          </div>
+
+
+          <div slot="midColumn" >
+            <ui5.Bar>
+              <div className="icons-container" slot="endContent">
+                <ui5.Button design="Transparent" icon="full-screen" onClick={() => {
+                  if (layout === FCLLayout.MidColumnFullScreen) {
+                    setLayout(FCLLayout.TwoColumnsMidExpanded)
+                  } else {
+                    setLayout(FCLLayout.MidColumnFullScreen)
+                  }
+                }}></ui5.Button>
+                <ui5.Button icon="decline" design="Transparent" onClick={() => {
+                  setLayout(FCLLayout.OneColumn)
+                }}></ui5.Button>
+              </div>
+            </ui5.Bar>
+            <ServiceInstancesDetailsView secret={secret} instance={selectedInstance} />
+          </div>
+
+        </FlexibleColumnLayout>
+
+      </>
+    );
 
-                <ui5.TableColumn>
-                  <ui5.Label>Action</ui5.Label>
-                </ui5.TableColumn>
-              </>
-            }
-          >
-            {renderData()}
-          </ui5.Table>
-        </ui5.Card>
+  };
 
-      </div>
+  return <>{renderData()}</>;
 
 
-        <div slot="midColumn" >
-          <ui5.Bar>
-            <div className="icons-container" slot="endContent">
-              <ui5.Button design="Transparent" icon="full-screen" onClick={() => {
-                if (layout === FCLLayout.MidColumnFullScreen) {
-                  setLayout(FCLLayout.TwoColumnsMidExpanded)
-                } else {
-                  setLayout(FCLLayout.MidColumnFullScreen)
-                }
-              }}></ui5.Button>
-              <ui5.Button icon="decline" design="Transparent" onClick={() => {
-                setLayout(FCLLayout.OneColumn)
-              }}></ui5.Button>
-            </div>
-          </ui5.Bar>
-          <ServiceInstancesDetailsView secret={secret} instance={selectedInstance} />
-        </div>
-
-      </FlexibleColumnLayout>
-
-    </>
-  );
 }
 
 
diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
index 8b822cc84..181e2e3f6 100644
--- a/ui/src/components/ServiceOfferingsView.tsx
+++ b/ui/src/components/ServiceOfferingsView.tsx
@@ -11,6 +11,7 @@ import Ok from "../shared/validator";
 import ServiceOfferingsDetailsView from "./ServiceOfferingsDetailsView";
 import { FCLLayout, FlexibleColumnLayout, ResponsiveGridLayout, Title } from "@ui5/webcomponents-react";
 import { splitSecret } from "../shared/common";
+import StatusMessage from "./StatusMessage";
 
 function ServiceOfferingsView(props: any) {
     const greyImg = "data:image/svg+xml;base64,PHN2ZyBpZD0icGxhY2Vob2xkZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2IDU2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzVhN2E5NDt9LmNscy0ye2ZpbGw6IzA0OTFkMDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPnBsYWNlaG9sZGVyPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00Ni45NTMsMjAuNTg4YTQuMzYzLDQuMzYzLDAsMCwwLTEuODM3LS40NTksMy4yOTEsMy4yOTEsMCwwLDAtMy40LDMuMzc2LDQuMDg0LDQuMDg0LDAsMCwwLC45LDIuNjI1LDMuMDExLDMuMDExLDAsMCwwLDIuNSwxLjEyNiwzLjA4NSwzLjA4NSwwLDAsMCwxLjQ2Mi0uMzc1LDcuNTEyLDcuNTEyLDAsMCwwLDEuMzItLjg5MSwxMC4xMzUsMTAuMTM1LDAsMCwxLDEuMjI2LS44OTEsMi4yNywyLjI3LDAsMCwxLDEuMTc5LS4zNzVBMS41LDEuNSwwLDAsMSw1MiwyNi40MTJWMzkuMDcxYTIuODQzLDIuODQzLDAsMCwxLS41NzYsMiwyLjkyNiwyLjkyNiwwLDAsMS0yLjE1OS42MjZxLTIuOTIzLDAtNC4zODUuMDQ3dC0yLjEyMi4wNDdINDEuOTFhMy4zMjEsMy4zMjEsMCwwLDAsLjYuNjQ0LDUuNzE3LDUuNzE3LDAsMCwxLDIuMDc0LDQuMjIsNS4wNTQsNS4wNTQsMCwwLDEtMS42NSwzLjc1MUE1LjMzMSw1LjMzMSwwLDAsMSwzOS4xMTgsNTJhNS42LDUuNiwwLDAsMS00LjA1NS0xLjU0Nyw1LjA3MSw1LjA3MSwwLDAsMS0xLjYtMy44LDQuODYyLDQuODYyLDAsMCwxLC41MTktMi4zLDExLjQwNywxMS40MDcsMCwwLDEsMS41MTYtMS45NywyLjMzMywyLjMzMywwLDAsMCwuNDc1LS42OUgyOC4zM2ExLjM5NCwxLjM5NCwwLDAsMS0xLjA4NC0uNDY5LDIuMDExLDIuMDExLDAsMCwxLS41MTktMS4wMzJWMTUuOTA5YTEuOCwxLjgsMCwwLDEsLjQyNC0xLjE3MiwxLjQ0NCwxLjQ0NCwwLDAsMSwxLjE3OS0uNTE2aDcuNzMzYTEuOTQ5LDEuOTQ5LDAsMCwwLS4zNzctLjU2MmwtLjgtMS4xNzFhOC43ODgsOC43ODgsMCwwLDEtLjg0Ny0xLjUsNC43ODMsNC43ODMsMCwwLDEtLjQwNi0xLjY3NkE1LjM0OCw1LjM0OCwwLDAsMSwzOS4wODEsNGE1LjU1Miw1LjU1MiwwLDAsMSwzLjc5LDEuNTUzQTQuNjM1LDQuNjM1LDAsMCwxLDQ0LjU1LDkuMzQ1Yy0uMDI4LDEuNjg4LTIuMDIzLDQuMTI1LTIuMjQxLDQuMzc1YTEuNTc2LDEuNTc2LDAsMCwwLS4zLjVoNy4yNjFBMi42NSwyLjY1LDAsMCwxLDUyLDE2Ljg0N3Y0LjEyNnEwLDEuNzgyLTEuNywxLjc4MmExLjc0MywxLjc0MywwLDAsMS0xLjMxOS0uNTQ5QTEzLjE1MiwxMy4xNTIsMCwwLDAsNDYuOTUzLDIwLjU4OFpNMjguMzMsMzkuMDcxYS41ODIuNTgyLDAsMCwwLC42Ni42NTdoNy4xNjdhMS41NzksMS41NzksMCwwLDEsMS43OTIsMS43ODEsMi4yMzgsMi4yMzgsMCwwLDEtLjM4NywxLjI1NGMtLjI4My40MDgtLjU4Mi44MTMtLjksMS4yMTlzLS42MTMuODMtLjksMS4yNjZhMi41NDYsMi41NDYsMCwwLDAtLjQyNCwxLjQwNywzLjExNSwzLjExNSwwLDAsMCwxLjEzMSwyLjUzMiw0LjAyMiw0LjAyMiwwLDAsMCwyLjY0MS45MzgsMy43NzYsMy43NzYsMCwwLDAsMi40NTItLjkzOEEzLjExNSwzLjExNSwwLDAsMCw0Mi43LDQ2LjY1NWEyLjU0NiwyLjU0NiwwLDAsMC0uNDI0LTEuNDA3LDEyLjUxMywxMi41MTMsMCwwLDAtLjk0My0xLjI2NnEtLjUxOS0uNjA5LS45NDMtMS4xNzJhMi4yNjEsMi4yNjEsMCwwLDEtLjQ2Mi0xLjMsMS42MTQsMS42MTQsMCwwLDEsLjU2Ni0xLjMxMywyLjAwNiwyLjAwNiwwLDAsMSwxLjMyLS40NjhoNy40NXEuOTQyLDAsLjk0My0uNjU3VjI2LjUwNmExLjYwOSwxLjYwOSwwLDAsMC0uNzA3LjQyMnEtLjUxOS40MjEtMS4xNzkuODlhMTEuMDY5LDExLjA2OSwwLDAsMS0xLjUwOS44OTEsMy43NywzLjc3LDAsMCwxLTEuNy40MjIsNS40NSw1LjQ1LDAsMCwxLTMuNjc4LTEuNSw0LjI1LDQuMjUsMCwwLDEtMS4yMjYtMS44NzYsNy4wNTMsNy4wNTMsMCwwLDEtLjM3Ny0yLjI1LDUuMTY2LDUuMTY2LDAsMCwxLDEuNi0zLjcsNS4wMDksNS4wMDksMCwwLDEsMy42NzgtMS42NDEsNC44ODQsNC44ODQsMCwwLDEsMi4zNTcuNTE1QTcuNTg3LDcuNTg3LDAsMCwxLDQ5LjUxOCwyMC4yYy41MDYuNTg4Ljc4NS42MjQuNzg1LjYyNFYxNi44NDdhLjU0NC41NDQsMCwwLDAtLjMzMS0uNDY5LDEuNDIyLDEuNDIyLDAsMCwwLS43MDctLjE4N2gtNy40NWEyLjE0NywyLjE0NywwLDAsMS0xLjMyLS40MjIsMS41ODcsMS41ODcsMCwwLDEtLjU2Ni0xLjM2LDIuMDY3LDIuMDY3LDAsMCwxLC40MjUtMS4xNzJxLjQyNS0uNjA5Ljk0My0xLjIxOWExMi4yMjIsMTIuMjIyLDAsMCwwLC45NDMtMS4yNjYsMi41NDEsMi41NDEsMCwwLDAsLjQyNC0xLjQwNywzLjExOCwzLjExOCwwLDAsMC0xLjEzMi0yLjUzMiwzLjc3MSwzLjc3MSwwLDAsMC0yLjQ1MS0uOTM4LDMuODM5LDMuODM5LDAsMCwwLTIuNTk0LjkzOEEzLjE3OCwzLjE3OCwwLDAsMCwzNS40LDkuMzQ1YTIuNzc2LDIuNzc2LDAsMCwwLC40MjQsMS40NTQsMTAuMDM3LDEwLjAzNywwLDAsMCwuOSwxLjI2NWwuODQ5LDEuMjJhMi45MDksMi45MDksMCwwLDEsLjQ3MSwxLjEyNSwxLjYyNSwxLjYyNSwwLDAsMS0uNTE4LDEuMzYsMS45NTYsMS45NTYsMCwwLDEtMS4yNzQuNDIySDI5LjA4NHEtLjc1NSwwLS43NTQuNjU2Wm0yMy42NywwYTIuNywyLjcsMCwwLDEtLjU3NiwyLDIuNjc1LDIuNjc1LDAsMCwxLTIuMTU5LjYyNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTM3LjE0NywzMS4wNzRhMy4zMjgsMy4zMjgsMCwwLDAtMi44NzgtMS4zNiw0LjQ0NSw0LjQ0NSwwLDAsMC0yLjEyLjQyMiw2LjE4NSw2LjE4NSwwLDAsMC0xLjE3OC44OTFxLS41NjcuNDcxLTEuMTMyLjg5MWMtLjM3My4yNzgtLjgwOC43NzMtMS4zLjc3NkgyNi43MjdWMTYuNDZhMy4zMzUsMy4zMzUsMCwwLDAtLjM3Ny0xLjUsMS40MzYsMS40MzYsMCwwLDAtMS40MTUtLjc1MUgxOS4yNzdjLS41LDAtLjc1NC4yNTEtLjc1NC44NDRhMS45MDcsMS45MDcsMCwwLDAsLjM3NywxLjEyNiw5LjE0Niw5LjE0NiwwLDAsMCwuOTQzLDEuMTI1LDUuMzQxLDUuMzQxLDAsMCwxLC45NDMsMS4yNjYsMy4yMzYsMy4yMzYsMCwwLDEsLjM3NywxLjU0Nyw0LjQ1NCw0LjQ1NCwwLDAsMS0xLjI3MywzLjE0MSw0LjA0OSw0LjA0OSwwLDAsMS0zLjA2NSwxLjM2LDMuOSwzLjksMCwwLDEtMy4wMTgtMS4zNiw0LjU0Nyw0LjU0NywwLDAsMS0xLjIyNS0zLjE0MSwyLjkzNiwyLjkzNiwwLDAsMSwuNDI0LTEuNTQ3LDEzLjU0OCwxMy41NDgsMCwwLDEsLjktMS4zMTNjLjMxNC0uNDA2LjYyNy0uNzgxLjk0My0xLjEyNWExLjU4OCwxLjU4OCwwLDAsMCwuNDcxLTEuMDc5cTAtLjg0My0xLjAzNy0uODQ0SDUuN2ExLjU4NywxLjU4NywwLDAsMC0xLjIyNi41MTZBMS44MDYsMS44MDYsMCwwLDAsNCwxNS45OTFWMzkuOWExLjgsMS44LDAsMCwwLC40NzEsMS4yNjYsMS41ODMsMS41ODMsMCwwLDAsMS4yMjYuNTE2aDguNDg4Yy42OTEsMCwxLjAzNS4yMzgsMS4wMzcuNzVhMS41NDcsMS41NDcsMCwwLDEtLjQyMi45NDRMMTMuODA3LDQ0LjVhNi41NDksNi41NDksMCwwLDAtLjk5LDEuMjY2LDMuMTE2LDMuMTE2LDAsMCwwLS40MjQsMS42NDEsNC4yMzcsNC4yMzcsMCwwLDAsMS4zNjcsMy40Nyw0Ljc5MSw0Ljc5MSwwLDAsMCw2LjIyNC0uMDQ3LDQuNTE3LDQuNTE3LDAsMCwwLDEuNDQ1LTMuMjgzLDMuNjMxLDMuNjMxLDAsMCwwLS41MTQtMS44ODljLS4yMTUtLjMwNy0uOTc4LTEuMTU4LS45NzgtMS4xNThMMTguOSw0My4zNzNhMS40OTIsMS40OTIsMCwwLDEtLjM3Ny0uOTM4cTAtLjc1Ljg0OC0uNzVoNS42NThxMS4yMjYsMCwxLjctMS41VjM1LjM0MUgyOC4zNWMuNTU3LDAsMS4wNTQuNTE5LDEuNDg5LjhhMTIuMjkxLDEyLjI5MSwwLDAsMSwxLjIyNi44OTFxLjU2NS40NjksMS4xNzkuODlhMy43ODYsMy43ODYsMCwwLDAsMS44MTYuNDIyLDMuMjU2LDMuMjU2LDAsMCwwLDMuMDg3LTEuNDA2LDUuMTE5LDUuMTE5LDAsMCwwLC45OS0zQTQuNzg4LDQuNzg4LDAsMCwwLDM3LjE0NywzMS4wNzRaIi8+PC9zdmc+"
@@ -83,7 +84,13 @@ function ServiceOfferingsView(props: any) {
         }
 
         if (error) {
-            return <ui5.IllustratedMessage name="UnableToLoad" />
+
+            return <>
+                <div className="margin-wrapper">
+                    <StatusMessage error={error ?? undefined} success={undefined} />
+                    <ui5.IllustratedMessage name="UnableToLoad" />
+                </div>
+            </>
         }
 
         // @ts-ignore
@@ -134,13 +141,13 @@ function ServiceOfferingsView(props: any) {
                     <ui5.Bar>
                         <div className="icons-container" slot="endContent">
                             <ui5.Button design="Transparent" icon="full-screen" onClick={() => {
-                                if(layout === FCLLayout.MidColumnFullScreen) {
+                                if (layout === FCLLayout.MidColumnFullScreen) {
                                     setLayout(FCLLayout.TwoColumnsMidExpanded)
                                 } else {
                                     setLayout(FCLLayout.MidColumnFullScreen)
                                 }
                             }}></ui5.Button>
-                            <ui5.Button icon="decline" design="Transparent" onClick={() => { 
+                            <ui5.Button icon="decline" design="Transparent" onClick={() => {
                                 setLayout(FCLLayout.OneColumn)
                             }}></ui5.Button>
                         </div>

From f49a0d69fdabb657c5b76f886530ce8386765908 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:05:09 +0200
Subject: [PATCH 7/9] Unused Import

---
 ui/src/components/ServiceInstancesDetailsView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/ServiceInstancesDetailsView.tsx b/ui/src/components/ServiceInstancesDetailsView.tsx
index 2174012b4..b87a0703c 100644
--- a/ui/src/components/ServiceInstancesDetailsView.tsx
+++ b/ui/src/components/ServiceInstancesDetailsView.tsx
@@ -5,7 +5,7 @@ import {
   ServiceInstance,
   ServiceInstanceBinding,
 } from "../shared/models";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import ServiceBindingsList from "./ServiceBindingsList";
 import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
 import CreateBindingForm from "./CreateBindingForm";

From af1ef47cdcb11a2588ae01bebe83ae11de07c1d6 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:06:11 +0200
Subject: [PATCH 8/9] Unused Import

---
 ui/src/components/ServiceOfferingsView.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/components/ServiceOfferingsView.tsx b/ui/src/components/ServiceOfferingsView.tsx
index 181e2e3f6..4bb420f80 100644
--- a/ui/src/components/ServiceOfferingsView.tsx
+++ b/ui/src/components/ServiceOfferingsView.tsx
@@ -9,7 +9,7 @@ import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js"
 import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";
 import Ok from "../shared/validator";
 import ServiceOfferingsDetailsView from "./ServiceOfferingsDetailsView";
-import { FCLLayout, FlexibleColumnLayout, ResponsiveGridLayout, Title } from "@ui5/webcomponents-react";
+import { FCLLayout, FlexibleColumnLayout, ResponsiveGridLayout } from "@ui5/webcomponents-react";
 import { splitSecret } from "../shared/common";
 import StatusMessage from "./StatusMessage";
 
@@ -20,7 +20,6 @@ function ServiceOfferingsView(props: any) {
     const [secret, setSecret] = useState<Secret>();
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const [portal, setPortal] = useState<JSX.Element>();
     const [layout, setLayout] = useState(FCLLayout.OneColumn);
 
     useEffect(() => {

From 1e238ddd17439fd974a15dcff8e89a72b70e4c07 Mon Sep 17 00:00:00 2001
From: ralikio <74771103+ralikio@users.noreply.github.com>
Date: Thu, 29 Aug 2024 14:00:40 +0200
Subject: [PATCH 9/9] Closing Panel on Selected Secret Change

---
 ui/src/components/ServiceInstancesView.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/src/components/ServiceInstancesView.tsx b/ui/src/components/ServiceInstancesView.tsx
index 39cce363c..dc4f0064e 100644
--- a/ui/src/components/ServiceInstancesView.tsx
+++ b/ui/src/components/ServiceInstancesView.tsx
@@ -28,6 +28,9 @@ function ServiceInstancesView(props: any) {
     // disable selection when page refresh is done
     setSelectedInstance(new ServiceInstance());
 
+    // close side panel
+    setLayout(FCLLayout.OneColumn)
+
     if (!Ok(props.setTitle)) {
       return;
     }