feat(knowledge): Adding create new hub and artifacts experience in knowledge wizard

apps/Standalone/src/knowledge/app/KnowledgeHub.tsx

@@ -13,6 +13,7 @@ import {
   type ConnectionsData,
   clone,
   resolveConnectionsReferences,
+  type UploadFile,
 } from '@microsoft/logic-apps-shared';
 import { useKnowledgeStyles } from './styles';
 import { HttpClient } from '../../designer/app/AzureLogicAppsDesigner/Services/HttpClient';
@@ -25,6 +26,7 @@ import {
 import { addConnectionInJson, addOrUpdateAppSettings } from '../../designer/app/AzureLogicAppsDesigner/Utilities/Workflow';
 import { Spinner } from '@fluentui/react-components';
 import { CustomConnectionParameterEditorService } from '../Services/connectionParameterEditor';
+import { environment } from '../../environments/environment';
 
 const apiVersion = '2020-06-01';
 const httpClient = new HttpClient();
@@ -86,7 +88,7 @@ export const KnowledgeHub = () => {
           <div className={styles.wizardContent}>
             <div className={styles.wizardWrapper}>
               <KnowledgeDataProvider resourceDetails={resourceDetails} services={services} isDarkMode={theme === 'dark'}>
-                <KnowledgeHubWizard />
+                <KnowledgeHubWizard onUploadArtifact={uploadFileToKnowledgeHub} />
               </KnowledgeDataProvider>
             </div>
           </div>
@@ -152,3 +154,73 @@ const getServices = (
     hostService: {} as any, // Placeholder for IHostService, not used in this context
   };
 };
+
+const uploadFileToKnowledgeHub = async (
+  siteResourceId: string,
+  hubName: string,
+  content: { file: UploadFile; name: string; description?: string },
+  setIsLoading: (isLoading: boolean) => void
+): Promise<void> => {
+  const { file, name, description } = content;
+  const contentType = file.file.type || 'application/octet-stream';
+
+  const uri = `https://management.azure.com${siteResourceId}/hostruntime/runtime/webhooks/workflow/api/management/knowledgehubs/${hubName}/knowledgeArtifacts/${name}?api-version=2018-11-01`;
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const base64Content = (reader.result as string).split(',')[1]; // Remove data URL prefix
+
+      const payload = {
+        description: description,
+        payload: {
+          '$content-type': contentType,
+          $content: base64Content,
+        },
+      };
+
+      const xhr = new XMLHttpRequest();
+
+      xhr.onloadstart = () => {
+        setIsLoading(true);
+      };
+
+      xhr.onloadend = () => {
+        setIsLoading(false);
+        file.setProgress?.(1);
+
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(new Error(`Upload failed with status ${xhr.status}: ${xhr.statusText}`));
+        }
+      };
+
+      xhr.onerror = () => {
+        setIsLoading(false);
+        reject(new Error('Upload failed due to network error'));
+      };
+
+      xhr.upload.onprogress = (e) => {
+        if (e.lengthComputable) {
+          file.setProgress?.(e.loaded / e.total);
+        }
+      };
+
+      xhr.open('PUT', uri, true);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('Authorization', `Bearer ${environment.armToken}`);
+      xhr.setRequestHeader('Cache-Control', 'no-cache');
+
+      xhr.send(JSON.stringify(payload));
+    };
+
+    reader.onerror = () => {
+      setIsLoading(false);
+      reject(new Error('Failed to read file'));
+    };
+
+    reader.readAsDataURL(file.file);
+  });
+};