From e2b50a813e5e864975105c8be5a21dbbadaa4d32 Mon Sep 17 00:00:00 2001
From: Bangarraju-Microsoft <v-golib@microsoft.com>
Date: Fri, 11 Apr 2025 16:29:23 +0530
Subject: [PATCH 1/2] UI - User story (#16865) changes

---
 .../components/uploadButton/uploadButton.tsx  | 219 ++++++++++--------
 App/frontend-app/src/vite-env.d.ts            |   1 +
 Deployment/appconfig/frontapp/.env.template   |   3 +-
 3 files changed, 121 insertions(+), 102 deletions(-)

diff --git a/App/frontend-app/src/components/uploadButton/uploadButton.tsx b/App/frontend-app/src/components/uploadButton/uploadButton.tsx
index 96cee722..e46ca62c 100644
--- a/App/frontend-app/src/components/uploadButton/uploadButton.tsx
+++ b/App/frontend-app/src/components/uploadButton/uploadButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import {
   Button,
@@ -24,9 +24,22 @@ import { getFileTypeIconProps } from "@fluentui/react-file-type-icons";
 const UploadDocumentsDialog = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [uploadingFiles, setUploadingFiles] = useState<
-    { name: string; progress: number; status: string; errorMsg:string }[]
+    { name: string; progress: number; status: string; errorMsg: string }[]
   >([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [isUploadBtnVisible, setIsUploadBtnVisible] = useState<boolean>(false);
+
+
+  function toBoolean(value: unknown): boolean {
+    return String(value).toLowerCase() === "true";
+  }
+
+  useEffect(() => {
+    if (import.meta.env.VITE_ENABLE_UPLOAD_BUTTON != undefined){
+        const flag = import.meta.env.VITE_ENABLE_UPLOAD_BUTTON;
+      setIsUploadBtnVisible(toBoolean(flag))
+    }
+  }, [import.meta.env.VITE_ENABLE_UPLOAD_BUTTON])
 
   // Handle file drop and simulate upload
   const onDrop = useCallback(async (acceptedFiles: any[]) => {
@@ -35,7 +48,7 @@ const UploadDocumentsDialog = () => {
       name: file.name,
       progress: 0,
       status: "uploading",
-      errorMsg : ""
+      errorMsg: ""
     }));
     setUploadingFiles((prev) => [...prev, ...newFiles]);
 
@@ -57,7 +70,7 @@ const UploadDocumentsDialog = () => {
               : f
           )
         );
-      } catch (error:any) {
+      } catch (error: any) {
         const errorMessage = error.message.replace(/^Error:\s*/, ""); // Remove "Error: " prefix
         const parsedError = JSON.parse(errorMessage);
 
@@ -65,7 +78,7 @@ const UploadDocumentsDialog = () => {
         setUploadingFiles((prev) =>
           prev.map((f, index) =>
             index === prev.length - acceptedFiles.length + i
-              ? { ...f, progress: 100, status: "error", errorMsg: parsedError.summary}
+              ? { ...f, progress: 100, status: "error", errorMsg: parsedError.summary }
               : f
           )
         );
@@ -80,63 +93,63 @@ const UploadDocumentsDialog = () => {
     noKeyboard: true,
   });
 
-  return (
-    <Dialog open={isOpen} onOpenChange={(event, data) => setIsOpen(data.open)}>
-      <DialogTrigger>
-        <Button icon={<ArrowUpload24Regular />} onClick={() => setIsOpen(true)}>
-          Upload documents
-        </Button>
-      </DialogTrigger>
-
-      <DialogSurface>
-        <DialogBody>
-          <DialogTitle>
-            Upload Documents
-            <Button
-              icon={<DismissRegular />}
-              appearance="subtle"
-              onClick={() => setIsOpen(false)}
-              style={{ position: "absolute", right: 20, top: 20 }}
-            />
-          </DialogTitle>
-
-          <DialogContent>
-            {isUploading ? (
-              <div style={{ textAlign: "center", padding: "40px 0" }}>
-                        <Icon
-                            {...getFileTypeIconProps({ extension: "pdf", size: 32, imageFileType: "svg" })}
-                        />
-                <p style={{ fontSize: "1.25rem" }}>Uploading documents...</p>
-              </div>
-            ) : (
-              <div
-                {...getRootProps()}
-                style={{
-                  border: "2px dashed #ccc",
-                  borderRadius: "4px",
-                  padding: "20px",
-                  textAlign: "center",
-                  marginBottom: "20px",
-                }}
-              >
-                <input {...getInputProps()} />
-                <CloudArrowUp24Regular
+  return (<>
+    {isUploadBtnVisible == true ?
+      <Dialog open={isOpen} onOpenChange={(event, data) => setIsOpen(data.open)}>
+        <DialogTrigger>
+          <Button icon={<ArrowUpload24Regular />} onClick={() => setIsOpen(true)}>
+            Upload documents
+          </Button>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>
+              Upload Documents
+              <Button
+                icon={<DismissRegular />}
+                appearance="subtle"
+                onClick={() => setIsOpen(false)}
+                style={{ position: "absolute", right: 20, top: 20 }}
+              />
+            </DialogTitle>
+
+            <DialogContent>
+              {isUploading ? (
+                <div style={{ textAlign: "center", padding: "40px 0" }}>
+                  <Icon
+                    {...getFileTypeIconProps({ extension: "pdf", size: 32, imageFileType: "svg" })}
+                  />
+                  <p style={{ fontSize: "1.25rem" }}>Uploading documents...</p>
+                </div>
+              ) : (
+                <div
+                  {...getRootProps()}
                   style={{
-                    fontSize: "48px",
-                    color: "#551A8B",
-                    marginBottom: "10px",
+                    border: "2px dashed #ccc",
+                    borderRadius: "4px",
+                    padding: "20px",
+                    textAlign: "center",
+                    marginBottom: "20px",
                   }}
-                />
-                <p>Drag and drop files</p>
-                <p>or</p>
-                <Button appearance="secondary" onClick={open}>
-                  Browse files
-                </Button>
-              </div>
-            )}
+                >
+                  <input {...getInputProps()} />
+                  <CloudArrowUp24Regular
+                    style={{
+                      fontSize: "48px",
+                      color: "#551A8B",
+                      marginBottom: "10px",
+                    }}
+                  />
+                  <p>Drag and drop files</p>
+                  <p>or</p>
+                  <Button appearance="secondary" onClick={open}>
+                    Browse files
+                  </Button>
+                </div>
+              )}
 
-            {/* Upload link section */}
-            {/* <div style={{ marginTop: "20px" }}>
+              {/* Upload link section */}
+              {/* <div style={{ marginTop: "20px" }}>
               <h3>Upload link</h3>
               <div style={{ display: "flex", alignItems: "center" }}>
                 <input
@@ -160,54 +173,58 @@ const UploadDocumentsDialog = () => {
               </div>
             </div> */}
 
-            {/* File progress display */}
-            {uploadingFiles.map((file, index) => (
-              <div
-                key={index}
-                style={{
-                  marginTop: "20px",
-                  border: "1px solid #ccc",
-                  borderRadius: "4px",
-                  padding: "10px",
-                }}
-              >
+              {/* File progress display */}
+              {uploadingFiles.map((file, index) => (
                 <div
+                  key={index}
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
+                    marginTop: "20px",
+                    border: "1px solid #ccc",
+                    borderRadius: "4px",
+                    padding: "10px",
                   }}
                 >
-                  <div style={{ display: "flex", alignItems: "center" }}>
-                      <Icon  {...getFileTypeIconProps({ extension: "pdf", size: 32, imageFileType: "svg" })}/>
-                    <span>{file.name}</span>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <div style={{ display: "flex", alignItems: "center" }}>
+                      <Icon  {...getFileTypeIconProps({ extension: "pdf", size: 32, imageFileType: "svg" })} />
+                      <span>{file.name}</span>
+                    </div>
+                    {file.status === "success" && (
+                      <CheckmarkCircle24Regular style={{ color: "green" }} />
+                    )}
+                    {file.status === "error" && (
+                      <DismissCircle24Regular style={{ color: "red" }} />
+                    )}
                   </div>
-                  {file.status === "success" && (
-                    <CheckmarkCircle24Regular style={{ color: "green" }} />
-                  )}
-                  {file.status === "error" && (
-                    <DismissCircle24Regular style={{ color: "red" }} />
-                  )}
+                  <ProgressBar value={file.progress} />
+                  <span
+                    style={{
+                      color: file.status === "error" ? "red" : "inherit", // Apply red color only for error messages
+                    }}>
+                    {file.status === "uploading"
+                      ? "Uploading..."
+                      : file.status === "success"
+                        ? "Upload complete"
+                        : file.errorMsg}
+                  </span>
+                  <span>{ }</span>
                 </div>
-                <ProgressBar value={file.progress} />
-                <span
-                style={{
-                  color: file.status === "error" ? "red" : "inherit", // Apply red color only for error messages
-                }}>
-                  {file.status === "uploading"
-                    ? "Uploading..."
-                    : file.status === "success"
-                    ? "Upload complete"
-                    : file.errorMsg}
-                </span>
-                <span>{}</span>
-              </div>
-            ))}
-          </DialogContent>
-        </DialogBody>
-      </DialogSurface>
-    </Dialog>
-  );
+              ))}
+            </DialogContent>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog> : <></>
+    }
+  </>
+  )
+
+
 };
 
 export default UploadDocumentsDialog;
diff --git a/App/frontend-app/src/vite-env.d.ts b/App/frontend-app/src/vite-env.d.ts
index 42d9da0c..d908d676 100644
--- a/App/frontend-app/src/vite-env.d.ts
+++ b/App/frontend-app/src/vite-env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
     VITE_API_ENDPOINT: string
+    VITE_ENABLE_UPLOAD_BUTTON : string
     // Add other environment variables here
   }
   
diff --git a/Deployment/appconfig/frontapp/.env.template b/Deployment/appconfig/frontapp/.env.template
index 362bd3a1..99969f6e 100644
--- a/Deployment/appconfig/frontapp/.env.template
+++ b/Deployment/appconfig/frontapp/.env.template
@@ -1,2 +1,3 @@
 VITE_API_ENDPOINT={{ backend-fqdn }}
-DISABLE_AUTH=true
\ No newline at end of file
+DISABLE_AUTH=true
+VITE_ENABLE_UPLOAD_BUTTON = false
\ No newline at end of file

From e42153e432d2123a2b02e1613640427ebc3f91e3 Mon Sep 17 00:00:00 2001
From: Prajwal D C <v-dcprajwal@microsoft.com>
Date: Fri, 11 Apr 2025 23:01:08 +0530
Subject: [PATCH 2/2] feat: Added the flag for Upload button

---
 Deployment/appconfig/frontapp/.env.template | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Deployment/appconfig/frontapp/.env.template b/Deployment/appconfig/frontapp/.env.template
index 99969f6e..29c851e4 100644
--- a/Deployment/appconfig/frontapp/.env.template
+++ b/Deployment/appconfig/frontapp/.env.template
@@ -1,3 +1,3 @@
 VITE_API_ENDPOINT={{ backend-fqdn }}
 DISABLE_AUTH=true
-VITE_ENABLE_UPLOAD_BUTTON = false
\ No newline at end of file
+VITE_ENABLE_UPLOAD_BUTTON=false
\ No newline at end of file