using service-bus for MSAL 2.0

Once finished and cleaned up, fixes #13307

sdk/identity/identity/test/manual/src/index.tsx

@@ -6,6 +6,7 @@ import * as ReactDOM from "react-dom";
 
 import { InteractiveBrowserCredential, BrowserLoginStyle } from "@azure/identity";
 import { KeyClient, KeyVaultKey } from "@azure/keyvault-keys";
+import { ServiceBusClient } from "@azure/service-bus"
 
 const getRandomKeyName = () => `key${Math.random()}`.replace(/\./g, "");
 
@@ -14,6 +15,8 @@ interface ClientDetails {
   clientId: string,
   loginStyle: BrowserLoginStyle,
   keyName: string,
+  serviceBusEndpoint: string,
+  messageText: string
 }
 
 interface ClientDetailsEditorProps {
@@ -60,6 +63,20 @@ function ClientDetailsEditor({ clientDetails, onSetClientDetails }: ClientDetail
     });
   }
 
+  const setServiceBusEndpoint = (serviceBusEndpoint: string) => {
+    handleDetailsChange({
+      ...clientDetails,
+      serviceBusEndpoint
+    });
+  }
+
+  const setMessageText = (messageText: string) => {
+    handleDetailsChange({
+      ...clientDetails,
+      messageText
+    });
+  }
+
   return (
     <div>
       <h3>Enter the details of your Azure AD App Registration:</h3>
@@ -189,15 +206,107 @@ const KeyVaultTest = ({ storedVaultName, clientDetails }: KeyVaultTestProps) =>
   );
 }
 
+function useServiceBus(serviceBusEndpoint: string, messageText: string, clientDetails: ClientDetails) {
+  const [running, setRunning] = React.useState(false)
+  const [error, setErrorInner] = React.useState(undefined);
+
+  const setError = (err) => {
+    setRunning(false)
+    setErrorInner(err)
+  }
+
+  React.useEffect(() => {
+    const credential = getCredential(clientDetails);
+    if (serviceBusEndpoint.trim().length === 0) {
+      setError("You must enter a service bus endpoint to send a message.")
+    } else if (credential === undefined) {
+      setError("You must enter client details to fetch keys.")
+    } else if (running) {
+      (async () => {
+        const body = clientDetails.messageText || messageText;
+        const queueName = "partitioned-queue";
+
+        if (body) {
+          console.log({ serviceBusEndpoint });
+          const serviceBusClient = new ServiceBusClient(serviceBusEndpoint, credential);
+
+          try {
+            const sender = serviceBusClient.createSender(queueName);
+            await sender.sendMessages({ body });
+            await sender.close();
+            const receiver = serviceBusClient.createReceiver(queueName);
+            const messages = await receiver.receiveMessages(10);
+            await receiver.close();
+            console.log("Received messages:\n", messages.map(m => m.body.toString()).join("\n"));
+          } catch (e) {
+            console.info(e);
+          } finally {
+            await serviceBusClient.close();
+          }
+        }
+
+        setRunning(false)
+      })().catch(err => setError(err.toString()));
+    } else {
+      setError("")
+    }
+  }, [serviceBusEndpoint, messageText, clientDetails, running])
+
+  return { sendMessage: () => setRunning(true), error }
+}
+
+interface ServiceBusTestProps {
+  storedServiceBusEndpoint?: string,
+  storedMessageText?: string,
+  clientDetails: ClientDetails
+}
+
+const ServiceBusTest = ({ storedServiceBusEndpoint, storedMessageText, clientDetails }: ServiceBusTestProps) => {
+  const [serviceBusEndpoint, setServiceBusEndpoint] = React.useState(storedServiceBusEndpoint || "");
+  const [messageText, setMessageText] = React.useState(storedMessageText || "");
+  const { sendMessage, error } = useServiceBus(serviceBusEndpoint, messageText, clientDetails);
+
+  const handleServiceBusEndpointChange = (newServiceBusEndpoint) => {
+    localStorage.setItem('serviceBusEndpoint', newServiceBusEndpoint);
+    setServiceBusEndpoint(newServiceBusEndpoint);
+  };
+
+  const handleMessageText = (newMessageText) => {
+    localStorage.setItem('messageText', newMessageText);
+    setMessageText(newMessageText);
+  };
+
+  return (
+    <div>
+      <h3>Send Service Bus Endpoint</h3>
+      <form onSubmit={e => { sendMessage(); e.preventDefault(); }}>
+        <label>
+          Service Bus Endpoint:
+          <input type="text" value={serviceBusEndpoint} onChange={({ target }) => handleServiceBusEndpointChange(target.value)} />
+        </label>
+        <label>
+          Message to send:
+          <input type="text" value={messageText} onChange={({ target }) => handleMessageText(target.value)} />
+        </label>
+        <input type="submit" value="Send Message" />
+      </form>
+      {!error ? null : <h3 style={{ color: "red" }}>{error}</h3>}
+    </div>
+  );
+}
+
 function TestPage() {
   const storedVaultName = localStorage.getItem('keyVaultName');
-  const [clientDetails, setClientDetails] = React.useState<ClientDetails>(readClientDetails() || { tenantId: "", clientId: "", loginStyle: "popup", keyName: "" })
+  const storedServiceBusEndpoint = localStorage.getItem('serviceBusEndpoint');
+  const storedMessageText = localStorage.getItem('messageText');
+  const [clientDetails, setClientDetails] = React.useState<ClientDetails>(readClientDetails() || { tenantId: "", clientId: "", loginStyle: "popup", keyName: "", serviceBusEndpoint: "", messageText: "" })
   return (
     <div>
       <h1>Azure SDK Browser Manual Tests</h1>
       <hr />
       <ClientDetailsEditor clientDetails={clientDetails} onSetClientDetails={setClientDetails} />
       <KeyVaultTest storedVaultName={storedVaultName} clientDetails={clientDetails} />
+      <ServiceBusTest storedServiceBusEndpoint={storedServiceBusEndpoint} storedMessageText={storedMessageText} clientDetails={clientDetails} />
     </div>
   );
 }