From 365ec0965a21d8b9c6de28f62b6026f06a5cac44 Mon Sep 17 00:00:00 2001
From: shevijacobson <shevijacob@gmail.com>
Date: Mon, 4 Nov 2024 12:35:25 +0200
Subject: [PATCH] change download modal

Signed-off-by: shevijacobson <shevijacob@gmail.com>
---
 .../applications-table/applications-table.tsx | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
index b856d2301..16b5aa3b9 100644
--- a/client/src/app/pages/applications/applications-table/applications-table.tsx
+++ b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -16,10 +16,11 @@ import {
   DropdownItem,
   Modal,
   Tooltip,
-  FormGroup,
+  FormSelect,
+  FormSelectOption,
+  TextContent,
 } from "@patternfly/react-core";
 import {
-  CodeIcon,
   PencilAltIcon,
   TagIcon,
   WarningTriangleIcon,
@@ -157,7 +158,7 @@ export const ApplicationsTable: React.FC = () => {
 
   const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
 
-  const [selectedFormat, setSelectedFormat] = useState<"json" | "yaml">("json");
+  const [selectedFormat, setSelectedFormat] = useState<string>("json");
 
   const [assessmentToEdit, setAssessmentToEdit] = useState<Assessment | null>(
     null
@@ -178,6 +179,16 @@ export const ApplicationsTable: React.FC = () => {
   const [endOfAppImportPeriod, setEndOfAppImportPeriod] = useState<dayjs.Dayjs>(
     dayjs()
   );
+  const onChange = (
+    _event: React.FormEvent<HTMLSelectElement>,
+    value: string
+  ) => {
+    setSelectedFormat(value);
+  };
+  const formats = [
+    { value: "json", label: "JSON", disabled: false },
+    { value: "yaml", label: "YAML", disabled: false },
+  ];
 
   const [
     saveApplicationsCredentialsModalState,
@@ -1365,31 +1376,28 @@ export const ApplicationsTable: React.FC = () => {
         />
       </div>
       <Modal
-        isOpen={isDownloadModalOpen}
         variant="small"
         title={t("actions.download", { what: "analysis details reports" })}
+        isOpen={isDownloadModalOpen}
         onClose={() => setIsDownloadModalOpen(false)}
       >
-        <FormGroup label="Select Format" fieldId="format-select">
-          <div>
-            <Button
-              variant={selectedFormat === "json" ? "primary" : "secondary"}
-              onClick={() => setSelectedFormat("json")}
-            >
-              {<CodeIcon />} JSON
-            </Button>
-            <Button
-              variant={selectedFormat === "yaml" ? "primary" : "secondary"}
-              onClick={() => setSelectedFormat("yaml")}
-            >
-              {<CodeIcon />} YAML
-            </Button>
-          </div>
-          <p>Selected Format: {selectedFormat}</p>
-        </FormGroup>
-        <Button variant="primary" onClick={handleDownload}>
-          {t("actions.download")}
-        </Button>
+        <TextContent>{"Select format"}</TextContent>
+
+        <FormSelect
+          value={selectedFormat}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+          ouiaId="BasicFormSelect"
+        >
+          {formats.map((option, index) => (
+            <FormSelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              label={option.label}
+            />
+          ))}
+        </FormSelect>
       </Modal>
     </ConditionalRender>
   );