From 0536fd6b29f60236a5339771d0b60af28705106a Mon Sep 17 00:00:00 2001
From: dan <dan.du@leidos.com>
Date: Thu, 15 Feb 2024 09:33:54 -0500
Subject: [PATCH] rename variables

---
 .../src/components/ros2_rosbag/ROS2ROSBagFilter.js |  6 +++---
 .../components/ros2_rosbag/ROS2ROSBagFilterForm.js | 12 ++++++------
 .../ros2_rosbag/ROS2RosbagControlsItem.js          | 14 +++++++-------
 .../ros2_rosbag/ROS2RosbagDescriptionDialog.js     | 10 +++++-----
 .../components/ros2_rosbag/ROS2RosbagRowItem.js    |  8 ++++----
 .../src/components/ros2_rosbag/ROS2RosbagTable.js  |  8 ++++----
 .../ros2_rosbag/ROS2RosbagUploadDialog.js          | 10 +++++-----
 .../ros2_rosbag/ROS2RosbagUploadPreviewTableRow.js | 10 +++++-----
 .../web_app/client/src/pages/ROS2RosbagPage.js     |  6 +++---
 9 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilter.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilter.js
index f3c8f345..1db450fe 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilter.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilter.js
@@ -22,8 +22,8 @@ import React from "react";
 import ROS2ROSBagFilterForm from "./ROS2ROSBagFilterForm";
 
 const ROS2ROSBagFilter = (props) => {
-  const SearchROS2RosbagsHandler = (filteredEventList) => {
-    props.onSearchROS2Rosbags(filteredEventList);
+  const SearchHandler = (filteredEventList) => {
+    props.onSearch(filteredEventList);
   };
 
   return (
@@ -32,7 +32,7 @@ const ROS2ROSBagFilter = (props) => {
         <Card>
           <CardHeader sx={{ color: "#000", backgroundColor: "#eee", padding: 1 }} title="Filter ROS2 Rosbags" titleTypographyProps={{ variant: "title" }} />
           <CardContent>
-            <ROS2ROSBagFilterForm eventInfoList={props.eventInfoList} onSearchROS2Rosbags={SearchROS2RosbagsHandler} uploadStatusList={props.uploadStatusList} processingStatusList={props.processingStatusList} onRefresh={() => props.onFresh()} filterROS2RosbagList={() => props.filterROS2RosbagList()} onUpload={formdata => props.onUpload(formdata)} />
+            <ROS2ROSBagFilterForm eventInfoList={props.eventInfoList} onSearch={SearchHandler} uploadStatusList={props.uploadStatusList} processingStatusList={props.processingStatusList} onRefresh={() => props.onFresh()} filter={() => props.filter()} onUpload={formdata => props.onUpload(formdata)} />
           </CardContent>
         </Card>
       </Box>
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilterForm.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilterForm.js
index 248cbe43..0aa12c03 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilterForm.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2ROSBagFilterForm.js
@@ -61,7 +61,7 @@ const ROS2ROSBagFilterForm = memo((props) => {
   };
 
   const filterROS2RosbagListHandler = () => {
-    props.filterROS2RosbagList();
+    props.filter();
   };
 
   const refreshHandler = () => {
@@ -87,12 +87,12 @@ const ROS2ROSBagFilterForm = memo((props) => {
     <Grid container>
       <Grid xs={10} item>
         <FormControl sx={{ minWidth: 450, margin: 1 }}>
-          <TextField fullWidth value={inputText} label="Search by ROS2 Rosbag name or description" InputProps={{ startAdornment: (<InputAdornment position="start"> <SearchIcon /></InputAdornment>) }} onChange={handleInputTextChange} id="searchROS2rRosbagLabelId"  ></TextField>
+          <TextField fullWidth value={inputText} label="Search by name or description" InputProps={{ startAdornment: (<InputAdornment position="start"> <SearchIcon /></InputAdornment>) }} onChange={handleInputTextChange} id="searchROS2rRosbagLabelId"  ></TextField>
         </FormControl>
 
         <FormControl sx={{ minWidth: 200, margin: 1 }}>
           <InputLabel id="uploadStatusLabelId" sx={{ paddingLeft: "20px" }}>Upload Status</InputLabel>
-          <Select labelId="uploadStatusLabelId" id="uploadStatusStr" value={uploadStatusStr} label="Upload Status" inputProps={{ name: uploadStatusRef.current, id: uploadStatusRef.current }} IconComponent={FilterAltIcon} sx={{ paddingLeft: "20px", "& .MuiSvgIcon-root": { left: "5px" } }} onChange={handleUploadStatusChange}>
+          <Select labelId="uploadStatusId" id="uploadStatusStr" value={uploadStatusStr} label="Upload Status" inputProps={{ name: uploadStatusRef.current, id: uploadStatusRef.current }} IconComponent={FilterAltIcon} sx={{ paddingLeft: "20px", "& .MuiSvgIcon-root": { left: "5px" } }} onChange={handleUploadStatusChange}>
             {
               props.uploadStatusList !== undefined && props.uploadStatusList.map((uploadStatus) => (
                 <MenuItem key={uploadStatus} value={uploadStatus}>  {uploadStatus}  </MenuItem>
@@ -101,8 +101,8 @@ const ROS2ROSBagFilterForm = memo((props) => {
         </FormControl>
 
         <FormControl sx={{ minWidth: 200, margin: 1 }}>
-          <InputLabel id="processingStatusStrLabelId" sx={{ paddingLeft: "20px" }}>Processing Status</InputLabel>
-          <Select labelId="processingStatusStrLabelId" value={processingStatusStr} inputProps={{ name: processingStatusStrRef.current, id: processingStatusStrRef.current }} IconComponent={FilterAltIcon} sx={{ paddingLeft: "20px", "& .MuiSvgIcon-root": { left: "5px" } }} label="processingStatus"
+          <InputLabel id="processingStatusLabelId" sx={{ paddingLeft: "20px" }}>Processing Status</InputLabel>
+          <Select labelId="processingStatusId" value={processingStatusStr} inputProps={{ name: processingStatusStrRef.current, id: processingStatusStrRef.current }} IconComponent={FilterAltIcon} sx={{ paddingLeft: "20px", "& .MuiSvgIcon-root": { left: "5px" } }} label="processingStatus"
             onChange={handleProcessingStatusChange} >
             {
               props.processingStatusList !== undefined && props.processingStatusList.map((processingStatus) => (
@@ -112,7 +112,7 @@ const ROS2ROSBagFilterForm = memo((props) => {
         </FormControl>
         
         <FormControl sx={{ paddingTop: "10px" }}>
-          <CustomizedRefreshButton title="Reset filters and refresh ROS2 Rosbags table" onClick={refreshHandler} ></CustomizedRefreshButton>
+          <CustomizedRefreshButton title="Reset filters and refresh table" onClick={refreshHandler} ></CustomizedRefreshButton>
         </FormControl>
       </Grid>
       {
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagControlsItem.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagControlsItem.js
index a9ea6057..620e3ecc 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagControlsItem.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagControlsItem.js
@@ -32,16 +32,16 @@ const ROS2RosbagControlsItem = (props) => {
     setOpen(true);
   };
 
-  const handleProcessROS2RosbagReq = () => {
-    props.onProcessROS2RosbagReq(props.ROS2RosbagRow);
+  const handleProcessReq = () => {
+    props.onProcessReq(props.ROS2RosbagRow);
   };
   
   const closeHandler = () => {
     setOpen(false);
   };
 
-  const saveRos2RosbagDescriptionHandler = (UpdatedFileInfo) => {
-    props.onSaveRos2RosbagDescription(UpdatedFileInfo);
+  const saveDescHandler = (UpdatedFileInfo) => {
+    props.onSaveDescription(UpdatedFileInfo);
   };
 
   return (
@@ -49,12 +49,12 @@ const ROS2RosbagControlsItem = (props) => {
       {
         authCtx.role !== USER_ROLES.VIEWER && authCtx.role !== undefined && authCtx.role !== null && authCtx.role !== "" && (
           <TableCell key={`controls-${props.ROS2RosbagRow.id}`}>
-            <ROS2RosbagDescriptionDialog open={open} onClose={closeHandler} title={`Edit ROS2 Rosbag (${props.ROS2RosbagRow.original_filename}) Description`} ROS2RosbagRow={props.ROS2RosbagRow} OnDescriptionSave={saveRos2RosbagDescriptionHandler}></ROS2RosbagDescriptionDialog>
-            <CustomizedOutlinedButton title={"Edit ROS2 Rosbag description"} key={`edit-ROS2Rosbag-${props.ROS2RosbagRow.id}`} onClick={openHandler}><EditIcon /></CustomizedOutlinedButton>
+            <ROS2RosbagDescriptionDialog open={open} onClose={closeHandler} title={`Edit (${props.ROS2RosbagRow.original_filename}) Description`} ROS2RosbagRow={props.ROS2RosbagRow} OnDescriptionSave={saveDescHandler}></ROS2RosbagDescriptionDialog>
+            <CustomizedOutlinedButton title={"Edit description"} key={`edit-Rosbag-${props.ROS2RosbagRow.id}`} onClick={openHandler}><EditIcon /></CustomizedOutlinedButton>
 
             {
               props.ROS2RosbagRow !== undefined && props.ROS2RosbagRow.upload_status === UPLOAD_STATUS.COMPLETED && props.ROS2RosbagRow.process_status !== PROCESSING_STATUS.COMPLETED && (
-                <CustomizedOutlinedButton title={"Process ROS2 Rosbag"} key={`process-ROS2Rosbag-${props.ROS2RosbagRow.id}`} onClick={handleProcessROS2RosbagReq}><RunningWithErrorsIcon /></CustomizedOutlinedButton>
+                <CustomizedOutlinedButton title={"Process ROS2 Rosbag"} key={`process-Rosbag-${props.ROS2RosbagRow.id}`} onClick={handleProcessReq}><RunningWithErrorsIcon /></CustomizedOutlinedButton>
               )}
           </TableCell>
         )}
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagDescriptionDialog.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagDescriptionDialog.js
index 4f3ad5f5..61018ddc 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagDescriptionDialog.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagDescriptionDialog.js
@@ -52,7 +52,7 @@ function ROS2RosbagDescriptionDialog(props) {
     clearErrors();
     resetField("description");
   };
-  const handleDescriptionChange = (event) => {
+  const handleDescChange = (event) => {
     setDescription(event.target.value);
   };
 
@@ -67,7 +67,7 @@ function ROS2RosbagDescriptionDialog(props) {
     );
   }, [props]);
 
-  const saveRos2RosbagDescriptionHandler = (event) => {
+  const saveDescHandler = (event) => {
     let localUpdatedFile = {
       content_location: props.ROS2RosbagRow.content_location,
       created_at: props.ROS2RosbagRow.created_at,
@@ -97,12 +97,12 @@ function ROS2RosbagDescriptionDialog(props) {
       <DialogContent>
         <DialogContentText>  Update description for file (<b>{props.ROS2RosbagRow.original_filename}</b>)  and click "SAVE". </DialogContentText>
         <FormControl fullWidth>
-          <TextField {...register("description")} error={errors.description ? true : false} margin="dense" id="description" label="Description*" variant="standard" value={description} onChange={handleDescriptionChange} sx={{ marginBottom: 5 }} />
+          <TextField {...register("description")} error={errors.description ? true : false} margin="dense" id="description" label="Description*" variant="standard" value={description} onChange={handleDescChange} sx={{ marginBottom: 5 }} />
         </FormControl>
       </DialogContent>
       <DialogActions>
-        <CustomizedOutlinedButton onClick={onCloseHandler}>  Cancel   </CustomizedOutlinedButton>
-        <CustomizedButton onClick={handleSubmit(saveRos2RosbagDescriptionHandler)}>Save </CustomizedButton>
+        <CustomizedOutlinedButton onClick={onCloseHandler}>Cancel</CustomizedOutlinedButton>
+        <CustomizedButton onClick={handleSubmit(saveDescHandler)}>Save </CustomizedButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagRowItem.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagRowItem.js
index d2fe86f1..ae820590 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagRowItem.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagRowItem.js
@@ -26,8 +26,8 @@ import AuthContext from "../../context/auth-context";
 
 const ROS2RosbagRowItem = (props) => {
   const authCtx = React.useContext(AuthContext);
-  const saveRos2RosbagDescriptionHandler = (UpdatedFileInfo) => {
-    props.onSaveRos2RosbagDescription(UpdatedFileInfo);
+  const saveDescHandler = (UpdatedFileInfo) => {
+    props.onSaveDescription(UpdatedFileInfo);
   };
 
   return (
@@ -66,8 +66,8 @@ const ROS2RosbagRowItem = (props) => {
       {
         authCtx.role !== USER_ROLES.VIEWER && authCtx.role !== undefined && authCtx.role !== null && authCtx.role !== "" && (
           <ROS2RosbagControlsItem ROS2RosbagRow={props.ROS2RosbagRow}
-            onSaveRos2RosbagDescription={saveRos2RosbagDescriptionHandler}
-            onProcessROS2RosbagReq={(ROS2RosBagInfo) => props.onProcessROS2RosbagReq(ROS2RosBagInfo)} />
+          onSaveDescription={saveDescHandler}
+          onProcessReq={(ROS2RosBagInfo) => props.onProcessReq(ROS2RosBagInfo)} />
         )}
     </TableRow>
   )
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagTable.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagTable.js
index 858f2a7e..7c8a5bdb 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagTable.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagTable.js
@@ -88,8 +88,8 @@ export default function ROS2RosbagTable(props) {
     setPage(0);
   };
 
-  const saveRos2RosbagDescriptionHandler = (UpdatedFileInfo) => {
-    props.onSaveRos2RosbagDescription(UpdatedFileInfo);
+  const saveDescHandler = (UpdatedFileInfo) => {
+    props.onSaveDescription(UpdatedFileInfo);
   };
 
   return (
@@ -110,8 +110,8 @@ export default function ROS2RosbagTable(props) {
             {props.ROS2RosbagList !== undefined && Array.isArray(props.ROS2RosbagList) && props.ROS2RosbagList.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
               return (
                 <ROS2RosbagRowItem key={row.id} ROS2RosbagRow={row} columns={columns} ROS2RosbagList={props.ROS2RosbagList}
-                  onSaveRos2RosbagDescription={saveRos2RosbagDescriptionHandler}
-                  onProcessROS2RosbagReq={(ROS2RosBagInfo) => props.onProcessROS2RosbagReq(ROS2RosBagInfo)} />
+                  onSaveDescription={saveDescHandler}
+                  onProcessReq={(ROS2RosBagInfo) => props.onProcessReq(ROS2RosBagInfo)} />
               );
             })}
           </TableBody>
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadDialog.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadDialog.js
index d3ba679f..e4ee4f2d 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadDialog.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadDialog.js
@@ -58,14 +58,14 @@ const ROS2RosbagUploadDialog = (props) => {
     setSelectedFilesForm(formData);
   };
 
-  const confirmRemovalHandler = (filename) => {
+  const confirmHandler = (filename) => {
     let newForm = new FormData();
     newForm["files"] = selectedfilesForm["files"].filter((item) => item.name !== filename);
     newForm["fields"] = selectedfilesForm["fields"].filter((item) => item.filename !== filename);
     setSelectedFilesForm(newForm);
   };
 
-  const updateDescriptionHandler = (updatedROS2RosbagInfo) => {
+  const updateDescHandler = (updatedROS2RosbagInfo) => {
     let newForm = new FormData();
     newForm["files"] = selectedfilesForm["files"];
     newForm["fields"] = [...selectedfilesForm["fields"].filter((item) => item.filename !== updatedROS2RosbagInfo.filename), updatedROS2RosbagInfo];
@@ -73,7 +73,7 @@ const ROS2RosbagUploadDialog = (props) => {
     setSelectedFilesForm(newForm);
   };
 
-  const uploadAndProcessROS2RosbagsHandler = () => {
+  const uploadAndProcessHandler = () => {
     props.onUpload(selectedfilesForm);
     closeHandler();
   }
@@ -96,12 +96,12 @@ const ROS2RosbagUploadDialog = (props) => {
           </div>
         </FormControl>
         <FormControl fullWidth>
-          <ROS2RosbagUploadPreviewTable previewFiles={selectedfilesForm} onConfirm={confirmRemovalHandler} onUpdateDescription={updateDescriptionHandler} />
+          <ROS2RosbagUploadPreviewTable previewFiles={selectedfilesForm} onConfirm={confirmHandler} onUpdateDescription={updateDescHandler} />
         </FormControl>
       </DialogContent>
       <DialogActions>
         <CustomizedOutlinedButton onClick={closeHandler}> Cancel </CustomizedOutlinedButton>
-        <CustomizedButton onClick={uploadAndProcessROS2RosbagsHandler}>Process</CustomizedButton>
+        <CustomizedButton onClick={uploadAndProcessHandler}>Process</CustomizedButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadPreviewTableRow.js b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadPreviewTableRow.js
index e75db102..74085807 100644
--- a/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadPreviewTableRow.js
+++ b/telematic_system/telematic_apps/web_app/client/src/components/ros2_rosbag/ROS2RosbagUploadPreviewTableRow.js
@@ -39,13 +39,13 @@ const ROS2RosbagUploadPreviewTableRow = (props) => {
 
   return (
     <TableRow>
-      <TableCell scope="row" key={`preview-file-fields-filename-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>{props.previewFileFields.filename}</TableCell>
-      <TableCell scope="row" key={`preview-file-fields-description-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>
-        <TextField key={`preview-file-fields-description-input-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}
+      <TableCell scope="row" key={`preview-filename-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>{props.previewFileFields.filename}</TableCell>
+      <TableCell scope="row" key={`preview-description-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>
+        <TextField key={`preview-description-input-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}
           inputProps={{ maxLength: 255 }} fullWidth value={description} onChange={descriptionChangeHandler}></TextField>
       </TableCell>
-      <TableCell scope="row" key={`preview-file-fields-filesize-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>{props.previewFileFields.filesize}</TableCell>
-      <TableCell scope="row" key={`preview-file-fields-control-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>
+      <TableCell scope="row" key={`preview-filesize-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>{props.previewFileFields.filesize}</TableCell>
+      <TableCell scope="row" key={`preview-control-${props.previewFileFields.filesize}-${props.previewFileFields.filename}`}>
         <CustomizedIcon title={`Remove file`} onClick={openHandler}> <DeleteIcon /> </CustomizedIcon>
         <WarningDialog title={`Are you sure to remove file: ${props.previewFileFields.filename}`} onConfirm={() => { props.onConfirm(props.previewFileFields.filename); }} onCloseWarning={closeHandler} ></WarningDialog>
       </TableCell>
diff --git a/telematic_system/telematic_apps/web_app/client/src/pages/ROS2RosbagPage.js b/telematic_system/telematic_apps/web_app/client/src/pages/ROS2RosbagPage.js
index a83440f7..e96b947e 100644
--- a/telematic_system/telematic_apps/web_app/client/src/pages/ROS2RosbagPage.js
+++ b/telematic_system/telematic_apps/web_app/client/src/pages/ROS2RosbagPage.js
@@ -52,7 +52,7 @@ const ROS2RosbagPage = React.memo(() => {
     });
   };
 
-  const saveRos2RosbagDescriptionHandler = (UpdatedFileInfo) => {
+  const saveDescriptionHandler = (UpdatedFileInfo) => {
     updateROS2RosbagDescription(UpdatedFileInfo).then((data) => {
       if (data.errCode !== undefined && data.errMsg !== undefined) {
         setAlertStatus({
@@ -226,9 +226,9 @@ const ROS2RosbagPage = React.memo(() => {
         <Grid container columnSpacing={2} rowSpacing={1}>
           <PageAvatar icon={<WorkHistorySharpIcon />} title="ROS2 Rosbag" />
           <Grid item xs={4}></Grid>
-          <ROS2ROSBagFilter uploadStatusList={uploadStatusList} processingStatusList={processingStatusList} onFresh={RefreshHandler} filterROS2RosbagList={filterROS2RosbagListHandler} onUpload={uploadAndProcessReqHandler} />
+          <ROS2ROSBagFilter uploadStatusList={uploadStatusList} processingStatusList={processingStatusList} onFresh={RefreshHandler} filter={filterROS2RosbagListHandler} onUpload={uploadAndProcessReqHandler} />
           <Grid container item xs={12}>
-            <ROS2RosbagTable ROS2RosbagList={ROS2RosbagList} onSaveRos2RosbagDescription={saveRos2RosbagDescriptionHandler} onProcessROS2RosbagReq={(ROS2RosBagInfo) => processROS2RosbagReqHandler(ROS2RosBagInfo)} />
+            <ROS2RosbagTable ROS2RosbagList={ROS2RosbagList} onSaveDescription={saveDescriptionHandler} onProcessReq={(ROS2RosBagInfo) => processROS2RosbagReqHandler(ROS2RosBagInfo)} />
           </Grid>
         </Grid>
       )}