From 4eff2bad87a91b3bc6ef5b5cebd5992a21f21179 Mon Sep 17 00:00:00 2001
From: Bipul Adhikari <badhikar@redhat.com>
Date: Thu, 28 Dec 2023 13:51:48 +0545
Subject: [PATCH] Updates Onboarding modal to connect with provider proxy

Signed-off-by: Bipul Adhikari <badhikar@redhat.com>
---
 locales/en/plugin__odf-console.json           |  2 +-
 .../storage-consumers/onboarding-modal.tsx    | 37 ++++++++++++++++---
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/locales/en/plugin__odf-console.json b/locales/en/plugin__odf-console.json
index d8439da22..6c169c5ba 100644
--- a/locales/en/plugin__odf-console.json
+++ b/locales/en/plugin__odf-console.json
@@ -965,6 +965,7 @@
   "Generate client onboarding token": "Generate client onboarding token",
   "Data Foundation version sync": "Data Foundation version sync",
   "Client onboarding token": "Client onboarding token",
+  "Copy to clipboard": "Copy to clipboard",
   "Raw Capacity": "Raw Capacity",
   "Add Capacity": "Add Capacity",
   "Cluster details": "Cluster details",
@@ -1212,7 +1213,6 @@
   "Message": "Message",
   "No conditions found": "No conditions found",
   "Copied": "Copied",
-  "Copy to clipboard": "Copy to clipboard",
   "View documentation": "View documentation",
   "Oh no! Something went wrong.": "Oh no! Something went wrong.",
   "Copied to clipboard": "Copied to clipboard",
diff --git a/packages/odf/components/storage-consumers/onboarding-modal.tsx b/packages/odf/components/storage-consumers/onboarding-modal.tsx
index 34b0dc5df..30acb608a 100644
--- a/packages/odf/components/storage-consumers/onboarding-modal.tsx
+++ b/packages/odf/components/storage-consumers/onboarding-modal.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { LoadingBox } from '@odf/shared';
 import { ModalBody, ModalTitle } from '@odf/shared/generic/ModalTitle';
 import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook';
+import { consoleFetch } from '@openshift-console/dynamic-plugin-sdk';
 import { ModalComponent } from '@openshift-console/dynamic-plugin-sdk/lib/app/modal-support/ModalProvider';
 import {
   Modal,
@@ -23,22 +25,45 @@ export const ClientOnBoardingModal: ClientOnBoardingModalProps = ({
 }) => {
   const { t } = useCustomTranslation();
   const MODAL_TITLE = t('Client onboarding token');
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [ticket, _setTicket] = React.useState('dummy--text');
-  // Todo(bipuladh): Add a HTTP request to proxy to get ticket
+  const [ticket, setTicket] = React.useState('');
 
   const onCopyToClipboard = () => {
     navigator.clipboard.writeText(ticket);
   };
 
+  React.useEffect(() => {
+    consoleFetch(
+      '/api/proxy/plugin/odf-console/provider-proxy/onboarding-tokens',
+      {
+        method: 'post',
+      }
+    )
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Network response is not ok!');
+        }
+        return response.text();
+      })
+      .then((text) => {
+        setTicket(text);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Provider proxy is not working as expected', error);
+      });
+  }, []);
+
   return (
     <Modal isOpen={isOpen} onClose={closeModal} variant={ModalVariant.small}>
       <ModalTitle>{MODAL_TITLE}</ModalTitle>
       <ModalBody>
         <Flex direction={{ default: 'column' }}>
           <FlexItem grow={{ default: 'grow' }}>
-            <div className="odf-onboarding-modal__text-area">{ticket}</div>
+            {ticket ? (
+              <div className="odf-onboarding-modal__text-area">{ticket}</div>
+            ) : (
+              <LoadingBox />
+            )}
           </FlexItem>
           <FlexItem>
             <Button
@@ -48,7 +73,7 @@ export const ClientOnBoardingModal: ClientOnBoardingModalProps = ({
               className="pf-m-link--align-left odf-onboarding-modal__clipboard"
             >
               <ClipboardIcon />
-              Copy to Clipboard
+              {t('Copy to clipboard')}
             </Button>
           </FlexItem>
           <FlexItem>