Fix suffix generating and secret recreate UI state changes (#856)

* Auto generate suffix for binding name

* Revert auto name suffix

* Suggest binding name

* Fix state when input blocked

* Bump

* Fix disabled input field when applying the restore

* Generate suffix when creating another binding

* Fix spacing

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-854
+    export IMG=europe-docker.pkg.dev/kyma-project/dev/btp-manager:PR-856
     ```
 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-854 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-856 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

ui/src/components/CreateBindingForm.tsx

@@ -22,11 +22,12 @@ function CreateBindingForm(props: any) {
       const suffix = "-" + generateRandom5CharString()
 
       const binding = new ServiceInstanceBinding()
-      binding.name = props.instanceName
+      binding.name = props.instanceName + suffix
       binding.secret_name = props.instanceName + suffix
       binding.secret_namespace = "default"
 
       setCreatedBinding(binding);
+      props.setSecretRestoreButtonPressedState(false);
       setError(undefined);
       setLoading(false);
       return response;
@@ -128,11 +129,11 @@ function CreateBindingForm(props: any) {
     if (props.buttonPressed) {
         currentBinding.id = props.binding.id
         currentBinding.name = props.binding.name
-        currentBinding.secret_name = props.binding.name + suffix
+        currentBinding.secret_name = props.binding.name
         currentBinding.secret_namespace = "default"
       setCreatedBinding(currentBinding)
     } else {
-        currentBinding.name = props.instanceName
+        currentBinding.name = props.instanceName + suffix
         currentBinding.secret_name = props.instanceName + suffix
         currentBinding.secret_namespace = "default"
       setCreatedBinding(currentBinding)

ui/src/components/ServiceInstancesDetailsView.tsx

@@ -17,7 +17,6 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
 
   const [instance, setInstance] = useState<ServiceInstance>();
   const [binding, setBinding] = useState<ServiceInstanceBinding>(new ServiceInstanceBinding());
-  const [secretRestoreButtonPressed, setSecretRestoreButtonPressed] = useState(false);
   const listRef = useRef(null);
 
 
@@ -30,9 +29,6 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
     setBinding(sb);
   }
 
-  function setSecretRestoreButtonPressedState(pressed: boolean) {
-    setSecretRestoreButtonPressed(pressed)
-  }
 
   function onSecretRestore(sb: ServiceInstanceBinding) {
     // @ts-ignore
@@ -86,11 +82,11 @@ const ServiceInstancesDetailsView = forwardRef((props: any, ref) => {
         </ui5.Panel>
 
         <ui5.Panel accessibleRole="Form" headerLevel="H2" headerText="Bindings">
-          <ServiceBindingsList secret={secret} ref={listRef} instance={props.instance} setServiceBinding={setServiceBinding} setSecretRestoreButtonPressedState={setSecretRestoreButtonPressedState} />
+          <ServiceBindingsList secret={secret} ref={listRef} instance={props.instance} setServiceBinding={setServiceBinding} setSecretRestoreButtonPressedState={props.setSecretRestoreButtonPressedState} />
         </ui5.Panel>
 
         <ui5.Panel headerLevel="H2" headerText="Create Binding">
-          <CreateBindingForm secret={secret} binding={binding} onCreate={(binding: ServiceInstanceBinding) => onBindingAdded(binding)} instanceId={props.instance.id} instanceName={props.instance.name} buttonPressed={secretRestoreButtonPressed} onSecretRestore={(binding: ServiceInstanceBinding) => onSecretRestore(binding)} />
+          <CreateBindingForm secret={secret} binding={binding} onCreate={(binding: ServiceInstanceBinding) => onBindingAdded(binding)} instanceId={props.instance.id} instanceName={props.instance.name} setSecretRestoreButtonPressedState={props.setSecretRestoreButtonPressedState} buttonPressed={props.secretRestoreButtonPressed} onSecretRestore={(binding: ServiceInstanceBinding) => onSecretRestore(binding)} />
         </ui5.Panel>
     </>
 

ui/src/components/ServiceInstancesView.tsx

@@ -20,9 +20,14 @@ function ServiceInstancesView(props: any) {
   const [selectedInstance, setSelectedInstance] = useState<ServiceInstance>(new ServiceInstance());
   const [success, setSuccess] = useState("");
   const [layout, setLayout] = useState(FCLLayout.OneColumn);
+  const [secretRestoreButtonPressed, setSecretRestoreButtonPressed] = useState(false);
 
   let { id } = useParams();
 
+  function setSecretRestoreButtonPressedState(pressed: boolean) {
+    setSecretRestoreButtonPressed(pressed)
+  }
+
   useEffect(() => {
     setLoading(true)
 
@@ -133,6 +138,7 @@ function ServiceInstancesView(props: any) {
             onClick={() => {
               setSelectedInstance(instance)
               setLayout(FCLLayout.TwoColumnsMidExpanded)
+              setSecretRestoreButtonPressed(false);
             }}
           >
 
@@ -243,7 +249,7 @@ function ServiceInstancesView(props: any) {
                 }}></ui5.Button>
               </div>
             </ui5.Bar>
-            <ServiceInstancesDetailsView secret={secret} instance={selectedInstance} />
+            <ServiceInstancesDetailsView secret={secret} instance={selectedInstance} setSecretRestoreButtonPressedState={setSecretRestoreButtonPressedState} secretRestoreButtonPressed={secretRestoreButtonPressed} />
           </div>
 
         </FlexibleColumnLayout>