refactor: Hide File Download Request if capability is not present

- Hide the File Download Request form if the device does not have the
right capabilities.
- Limit the File Destination Types based on the device capabilities

Signed-off-by: Omar <omar.brbutovic@secomind.com>

Author: OmarBrbutovic

frontend/src/components/DeviceTabs/FilesUploadTab.tsx

@@ -56,7 +56,10 @@ import { RECORDS_TO_LOAD_FIRST } from "@/constants";
 import type { FileDownloadRequestFormValues } from "@/forms/ManualFileDownloadRequestForm";
 import ManualFileDownloadRequestForm from "@/forms/ManualFileDownloadRequestForm";
 import ManualFileDownloadRequestFromRepositoryForm from "@/forms/ManualFileDownloadRequestFromRepositoryForm";
-import type { ManualFileDownloadRequestFromRepositoryData } from "@/forms/validation";
+import type {
+  FileDestinationType,
+  ManualFileDownloadRequestFromRepositoryData,
+} from "@/forms/validation";
 import { computeDigest, createTarGzArchive } from "@/lib/files";
 
 // We use graphql fields below in columns configuration
@@ -190,6 +193,11 @@ const FILE_DOWNLOAD_REQUEST_UPDATED_SUBSCRIPTION = graphql`
   }
 `;
 
+type DestinationTypeOption = {
+  value: FileDestinationType;
+  label: string;
+};
+
 const formatRelayErrors = (
   errors: ReadonlyArray<{
     fields?: ReadonlyArray<string> | null;
@@ -206,12 +214,14 @@ type ManualFileDownloadRequestFormWrapperProps = {
   setErrorFeedback: (feedback: React.ReactNode) => void;
   deviceId: string;
   showAdvancedOptions: boolean;
+  destinationTypeOptions: DestinationTypeOption[];
 };
 
 const ManualFileDownloadRequestFormWrapper = ({
   setErrorFeedback,
   deviceId,
   showAdvancedOptions,
+  destinationTypeOptions,
 }: ManualFileDownloadRequestFormWrapperProps) => {
   const intl = useIntl();
   const [isUploading, setIsUploading] = useState(false);
@@ -455,6 +465,7 @@ const ManualFileDownloadRequestFormWrapper = ({
       isLoading={isUploading}
       onFileSubmit={handleFileUpload}
       showAdvancedOptions={showAdvancedOptions}
+      destinationTypeOptions={destinationTypeOptions}
     />
   );
 };
@@ -464,13 +475,15 @@ type ManualFileDownloadRequestFromRepositoryFormWrapperProps = {
   repositoriesQueryRef: PreloadedQuery<FilesUploadTab_getRepositories_Query>;
   deviceId: string;
   showAdvancedOptions: boolean;
+  destinationTypeOptions: DestinationTypeOption[];
 };
 
 const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
   setErrorFeedback,
   repositoriesQueryRef,
   deviceId,
   showAdvancedOptions,
+  destinationTypeOptions,
 }: ManualFileDownloadRequestFromRepositoryFormWrapperProps) => {
   const intl = useIntl();
   const [isUploading, setIsUploading] = useState(false);
@@ -588,6 +601,7 @@ const ManualFileDownloadRequestFromRepositoryFormWrapper = ({
       isLoading={isUploading}
       onFileSubmit={handleFileUpload}
       showAdvancedOptions={showAdvancedOptions}
+      destinationTypeOptions={destinationTypeOptions}
     />
   );
 };
@@ -598,7 +612,7 @@ type FilesUploadTabProps = {
 
 const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
   const intl = useIntl();
-  const { deviceId } = useParams();
+  const { deviceId = "" } = useParams();
 
   const [updateMode, setUpdateMode] = useState<"repository" | "file">("file");
 
@@ -624,10 +638,6 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
     [data.fileDownloadRequests],
   );
 
-  const showAdvancedOptions =
-    data.capabilities.includes("POSIX_FILE_TRANSFER_STORAGE") ||
-    data.capabilities.includes("POSIX_FILE_TRANSFER_STREAM");
-
   const [getRepositoriesQuery, getRepositories] =
     useQueryLoader<FilesUploadTab_getRepositories_Query>(
       GET_REPOSITORIES_QUERY,
@@ -644,6 +654,41 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
 
   useEffect(fetchRepositories, [fetchRepositories]);
 
+  const { capabilities } = data;
+
+  const hasStorage =
+    capabilities.includes("POSIX_FILE_TRANSFER_STORAGE") ||
+    capabilities.includes("WINDOWS_FILE_TRANSFER_STORAGE");
+
+  const hasStream =
+    capabilities.includes("POSIX_FILE_TRANSFER_STREAM") ||
+    capabilities.includes("WINDOWS_FILE_TRANSFER_STREAM");
+
+  const showAdvancedOptions =
+    capabilities.includes("POSIX_FILE_TRANSFER_STORAGE") ||
+    capabilities.includes("POSIX_FILE_TRANSFER_STREAM");
+
+  const destinationTypeOptions = useMemo<DestinationTypeOption[]>(() => {
+    const options: DestinationTypeOption[] = [];
+
+    if (hasStorage) {
+      options.push({ value: "STORAGE", label: "Storage" });
+    }
+
+    if (hasStream) {
+      options.push(
+        { value: "STREAMING", label: "Streaming" },
+        { value: "FILESYSTEM", label: "File System" },
+      );
+    }
+
+    return options;
+  }, [hasStorage, hasStream]);
+
+  if (!hasStorage && !hasStream) {
+    return null;
+  }
+
   return (
     <Tab
       eventKey="device-files-upload-tab"
@@ -675,7 +720,7 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
                 type="radio"
                 name="updateMode"
                 value={updateMode}
-                onChange={(mode) => setUpdateMode(mode)}
+                onChange={setUpdateMode}
                 size="sm"
               >
                 <ToggleButton
@@ -709,19 +754,22 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
                 </ToggleButton>
               </ToggleButtonGroup>
             </div>
+
             {updateMode === "file" ? (
               <ManualFileDownloadRequestFormWrapper
                 setErrorFeedback={setErrorFeedback}
-                deviceId={deviceId || ""}
+                deviceId={deviceId}
                 showAdvancedOptions={showAdvancedOptions}
+                destinationTypeOptions={destinationTypeOptions}
               />
             ) : (
               getRepositoriesQuery && (
                 <ManualFileDownloadRequestFromRepositoryFormWrapper
                   repositoriesQueryRef={getRepositoriesQuery}
                   setErrorFeedback={setErrorFeedback}
-                  deviceId={deviceId || ""}
+                  deviceId={deviceId}
                   showAdvancedOptions={showAdvancedOptions}
+                  destinationTypeOptions={destinationTypeOptions}
                 />
               )
             )}
@@ -745,4 +793,6 @@ const FilesUploadTab = ({ deviceRef }: FilesUploadTabProps) => {
   );
 };
 
+export type { DestinationTypeOption };
+
 export default FilesUploadTab;

frontend/src/forms/ManualFileDownloadRequestForm.tsx

@@ -27,20 +27,22 @@ import Select from "react-select";
 import Button from "@/components/Button";
 import Col from "@/components/Col";
 import CollapseItem, { useCollapseToggle } from "@/components/CollapseItem";
+import type { DestinationTypeOption } from "@/components/DeviceTabs/FilesUploadTab";
 import FileDropzone from "@/components/FileDropzone";
 import Form from "@/components/Form";
 import { FormRowWithMargin as FormRow } from "@/components/FormRow";
 import Row from "@/components/Row";
 import Spinner from "@/components/Spinner";
 import FormFeedback from "@/forms/FormFeedback";
-import { fileDownloadRequestFormSchema } from "@/forms/validation";
-
-type FileDestination = "STORAGE" | "STREAMING" | "FILESYSTEM";
+import {
+  fileDownloadRequestFormSchema,
+  type FileDestinationType,
+} from "@/forms/validation";
 
 type FileDownloadRequestFormValues = {
   files: File[];
   archiveName?: string;
-  destinationType: FileDestination;
+  destinationType: FileDestinationType;
   destination: string | null;
   ttlSeconds: number;
   progressTracked: boolean;
@@ -54,19 +56,15 @@ type ManualFileDownloadRequestFormProps = {
   isLoading: boolean;
   onFileSubmit: (values: FileDownloadRequestFormValues) => void;
   showAdvancedOptions?: boolean;
+  destinationTypeOptions: DestinationTypeOption[];
 };
 
-const destinationTypeOptions = [
-  { value: "STORAGE", label: "Storage" },
-  { value: "STREAMING", label: "Streaming" },
-  { value: "FILESYSTEM", label: "File System" },
-];
-
 const ManualFileDownloadRequestForm = ({
   className,
   isLoading,
   onFileSubmit,
   showAdvancedOptions = false,
+  destinationTypeOptions,
 }: ManualFileDownloadRequestFormProps) => {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const { open: advancedOptionsOpen, toggle: toggleAdvancedOptions } =
@@ -84,7 +82,7 @@ const ManualFileDownloadRequestForm = ({
     defaultValues: {
       file: undefined,
       archiveName: "",
-      destinationType: "STORAGE" as FileDestination,
+      destinationType: "STORAGE",
       destination: null,
       ttlSeconds: 0,
       progress: false,
@@ -116,7 +114,7 @@ const ManualFileDownloadRequestForm = ({
           selectedFiles.length > 1 && data.archiveName
             ? data.archiveName
             : undefined,
-        destinationType: data.destinationType as FileDestination,
+        destinationType: data.destinationType,
         destination: data.destination,
         ttlSeconds: data.ttlSeconds,
         progressTracked: data.progress,

frontend/src/forms/ManualFileDownloadRequestFromRepositoryForm.tsx

@@ -35,6 +35,7 @@ import type {
 import Button from "@/components/Button";
 import Col from "@/components/Col";
 import CollapseItem, { useCollapseToggle } from "@/components/CollapseItem";
+import type { DestinationTypeOption } from "@/components/DeviceTabs/FilesUploadTab";
 import FileSelect from "@/components/FileSelect";
 import Form from "@/components/Form";
 import { FormRowWithMargin as FormRow } from "@/components/FormRow";
@@ -85,18 +86,13 @@ const fromRepositoryInitialData: ManualFileDownloadRequestFromRepositoryData = {
   groupId: undefined,
 };
 
-const destinationOptions = [
-  { value: "STORAGE", label: "Storage" },
-  { value: "STREAMING", label: "Streaming" },
-  { value: "FILESYSTEM", label: "File System" },
-];
-
 type ManualFileDownloadRequestFromRepositoryFormProps = {
   className?: string;
   repositoriesData?: ManualFileDownloadRequestFromRepositoryForm_repositories_Fragment$key;
   isLoading: boolean;
   onFileSubmit: (values: ManualFileDownloadRequestFromRepositoryData) => void;
   showAdvancedOptions: boolean;
+  destinationTypeOptions: DestinationTypeOption[];
 };
 
 const ManualFileDownloadRequestFromRepositoryForm = ({
@@ -105,6 +101,7 @@ const ManualFileDownloadRequestFromRepositoryForm = ({
   isLoading,
   onFileSubmit,
   showAdvancedOptions,
+  destinationTypeOptions,
 }: ManualFileDownloadRequestFromRepositoryFormProps) => {
   const intl = useIntl();
   const { open: advancedOptionsOpen, toggle: toggleAdvancedOptions } =
@@ -308,7 +305,7 @@ const ManualFileDownloadRequestFromRepositoryForm = ({
           name="destinationType"
           render={({ field }) => {
             const selectedOption =
-              destinationOptions.find((opt) => opt.value === field.value) ||
+              destinationTypeOptions.find((opt) => opt.value === field.value) ||
               null;
 
             return (
@@ -317,7 +314,7 @@ const ManualFileDownloadRequestFromRepositoryForm = ({
                 onChange={(option) => {
                   field.onChange(option ? option.value : null);
                 }}
-                options={destinationOptions}
+                options={destinationTypeOptions}
               />
             );
           }}

frontend/src/forms/validation.ts

@@ -257,6 +257,8 @@ const fileDestinationTypeSchema = z.enum([
   "FILESYSTEM",
 ]);
 
+type FileDestinationType = z.infer<typeof fileDestinationTypeSchema>;
+
 const nullableDestinationSchema = z.preprocess((value) => {
   if (typeof value !== "string") {
     return value ?? null;
@@ -1062,6 +1064,7 @@ export type {
   RepositoryUpdateFormData,
   FileFormData,
   ManualFileDownloadRequestFromRepositoryData,
+  FileDestinationType,
 };
 
 export {