Dynamically display input folder in the checkbox text

Author: andrii-i

src/components/input-folder-checkbox.tsx

@@ -1,17 +1,29 @@
 import React, { ChangeEvent } from 'react';
 
-import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import { Box, Checkbox, FormControlLabel, FormGroup } from '@mui/material';
+import FolderIcon from '@mui/icons-material/Folder';
 
 export function PackageInputFolderControl(props: {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  inputFile: string;
 }): JSX.Element {
+  const inputFilePath = props.inputFile.split('/');
+  inputFilePath.pop();
+  const inputFolder = inputFilePath.join('/');
   return (
     <FormGroup>
       <FormControlLabel
         control={
           <Checkbox onChange={props.onChange} name={'packageInputFolder'} />
         }
-        label="Package input folder"
+        label={
+          <Box display="flex" alignItems="center" gap={1}>
+            <span>Include all files under</span>
+            <FolderIcon fontSize="small" sx={{ color: 'action.active' }} />
+            <span>/</span>
+            <span>{inputFolder}</span>
+          </Box>
+        }
       />
     </FormGroup>
   );

src/mainviews/create-job.tsx

@@ -507,7 +507,10 @@ export function CreateJob(props: ICreateJobProps): JSX.Element {
             environmentList={environmentList}
             value={props.model.environment}
           />
-          <PackageInputFolderControl onChange={handleInputChange} />
+          <PackageInputFolderControl
+            onChange={handleInputChange}
+            inputFile={props.model.inputFile}
+          />
           <OutputFormatPicker
             label={trans.__('Output formats')}
             name="outputFormat"