change download modal

Signed-off-by: shevijacobson <[email protected]>

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -16,10 +16,12 @@ import {
   DropdownItem,
   Modal,
   Tooltip,
-  FormGroup,
+  ModalVariant,
+  FormSelect,
+  FormSelectOption,
+  TextContent,
 } from "@patternfly/react-core";
 import {
-  CodeIcon,
   PencilAltIcon,
   TagIcon,
   WarningTriangleIcon,
@@ -157,7 +159,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 +180,17 @@ 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: "select one", label: "Select one", disabled: true },
+    { value: "json", label: "JSON", disabled: false },
+    { value: "yaml", label: "YAML", disabled: false },
+  ];
 
   const [
     saveApplicationsCredentialsModalState,
@@ -1365,31 +1378,40 @@ export const ApplicationsTable: React.FC = () => {
         />
       </div>
       <Modal
+        variant={ModalVariant.small}
+        title={t("actions.download", { what: "analysis details" })}
         isOpen={isDownloadModalOpen}
-        variant="small"
-        title={t("actions.download", { what: "analysis details reports" })}
         onClose={() => setIsDownloadModalOpen(false)}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleDownload}>
+            Download
+          </Button>,
+          <Button
+            key="cancel"
+            variant="link"
+            onClick={() => setIsDownloadModalOpen(false)}
+          >
+            Cancel
+          </Button>,
+        ]}
       >
-        <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>
   );