VKT(Frontend): OPHKIOS-92 UI-parannuksia

backend/vkt/src/main/java/fi/oph/vkt/service/aws/S3Service.java

@@ -3,9 +3,11 @@
 import fi.oph.vkt.util.exception.APIException;
 import fi.oph.vkt.util.exception.APIExceptionType;
 import java.time.Duration;
+import java.time.Instant;
 import java.time.LocalDate;
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
+import java.time.temporal.ChronoField;
 import java.util.HashMap;
 import java.util.Map;
 import lombok.RequiredArgsConstructor;
@@ -68,7 +70,7 @@ public Map<String, String> getPresignedPostRequest(String key, String extension)
     S3PostObjectRequest.Builder requestBuilder = S3PostObjectRequest
       .builder()
       .bucket(s3Config.getBucketName())
-      .expiration(POST_POLICY_VALID_FOR_ONE_MIN)
+      .expiration(Instant.now().with(ChronoField.MICRO_OF_SECOND, 1).plus(POST_POLICY_VALID_FOR_ONE_MIN))
       .withCondition(Conditions.keyStartsWith(key))
       .withCondition(Conditions.contentLengthRange(0, MAX_SIZE_100_MB))
       .withCondition(Conditions.contentTypeHeaderEquals(contentType))

frontend/package.json

@@ -75,7 +75,7 @@
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
-    "cypress": "^13.4.0",
+    "cypress": "^13.13.3",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-webpack": "^0.13.8",

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.8] - 2024-08-26
+
+### Changed
+- Include a file drop zone by default on desktop with the file upload component
+
 ## [1.10.7] - 2024-08-07
 
 ### Added

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/FileUpload/FileUpload.scss

@@ -2,24 +2,30 @@
 @use '../../styles/abstracts/colors';
 @use '../../styles/abstracts/maps';
 
-.custom-fileupload input {
-  width: fit-content;
-  border: 1px dashed colors.$color-secondary;
-  font-size: 120%;
-  display: none;
-}
-
-.custom-fileupload.file-upload-error input {
-  border: 1px dashed colors.$color-red-500;
-}
+.custom-fileupload {
+  input {
+    display: none;
+  }
 
-.custom-fileupload.file-upload-error input::file-selector-button {
-  background: colors.$color-red-500;
-}
+  &.file-upload-error {
+    .file-dropzone {
+      border-top: 1px dashed colors.$color-red-500;
+      border-right: 1px dashed colors.$color-red-500;
+      border-bottom: 1px dashed colors.$color-red-500;
+      p {
+        color: colors.$color-red-500;
+      }
+    }
+  }
 
-.custom-fileupload input::file-selector-button {
-  background: colors.$color-secondary;
-  border: 1px solid colors.$color-primary;
-  color: colors.$color-primary;
-  padding: 10px;
+  .file-dropzone {
+    align-content: center;
+    height: 100%;
+    border-top: 1px dashed colors.$color-secondary;
+    border-right: 1px dashed colors.$color-secondary;
+    border-bottom: 1px dashed colors.$color-secondary;
+    padding-left: 1vw;
+    padding-right: 10vw;
+    cursor: copy;
+  }
 }

frontend/packages/shared/src/components/FileUpload/FileUpload.tsx

@@ -1,48 +1,68 @@
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { Button } from '@mui/material';
-import { ChangeEvent, FC } from 'react';
+import { ChangeEvent, DragEvent, FC } from 'react';
+
 import './FileUpload.scss';
+import { Text } from '../../components';
 import { Color, Variant } from '../../enums';
+import { useWindowProperties } from '../../hooks';
 
 type FileUploadProps = {
   accept?: string;
   error?: boolean;
   onChange: (files: FileList) => void;
-  labelText: string;
+  buttonText: string;
+  dropZoneText: string;
 };
 
 export const FileUpload: FC<FileUploadProps> = ({
   accept,
   onChange,
   error,
-  labelText,
+  buttonText,
+  dropZoneText,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       onChange(event.target.files);
     }
   };
+  const { isPhone } = useWindowProperties();
 
   return (
     <div
-      className={
-        error ? 'custom-fileupload file-upload-error' : 'custom-fileupload'
-      }
+      className={`columns custom-fileupload ${
+        error ? 'file-upload-error' : ''
+      }`}
     >
       <Button
         component="label"
         variant={Variant.Contained}
         color={error ? Color.Error : Color.Secondary}
         startIcon={<FileUploadIcon />}
       >
-        {labelText}
+        {buttonText}
         <input
           id="custom-fileupload"
           accept={accept}
           type="file"
           onChange={handleChange}
         />
       </Button>
+      {!isPhone && (
+        <div
+          className="file-dropzone"
+          onDragOver={(e: DragEvent<HTMLDivElement>) => {
+            e.preventDefault();
+          }}
+          onDrop={(e: DragEvent<HTMLDivElement>) => {
+            e.preventDefault();
+            onChange(e.dataTransfer.files);
+          }}
+        >
+          <Text>{dropZoneText}</Text>
+        </div>
+      )}
     </div>
   );
 };

frontend/packages/vkt/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].7"
+    "shared": "npm:@opetushallitus/[email protected].8"
   }
 }

frontend/packages/vkt/public/i18n/fi-FI/common.json

@@ -108,7 +108,7 @@
         }
       },
       "info": {
-        "previousEnrollment": "Voit suorittaa suullisen ja kirjallisen taidon tutkinnot joko samalla kertaa tai osissa eri suorituskertojen aikana. Jos suoritat tutkinnon osissa, sinulla on kolme vuotta aikaa suorittaa koko tutkinto loppuun. Aika lasketaan ensimmäisen osan suorittamispäivästä alkaen.",
+        "previousEnrollment": "<0>Voit suorittaa suullisen ja kirjallisen taidon tutkinnot joko samalla kertaa tai osissa eri suorituskertojen aikana.</0> Jos suoritat tutkinnon osissa, <1>sinulla on kolme vuotta aikaa suorittaa koko tutkinto loppuun.</1> Aika lasketaan ensimmäisen osan suorittamispäivästä alkaen.",
         "selectExam": "Kun olet suorittanut hyväksytysti suullisen ja kirjallisen taidon tutkinnot, saat todistukseen merkinnän myös ymmärtämisen taidon tutkinnon suorittamisesta."
       },
       "languageFilter": {
@@ -144,6 +144,7 @@
         "clerkExamOverview": "Virkailija tutkintosivu",
         "clerkHomepage": "Virkailija",
         "contactDetails": "Ilmoittautuminen - täytä yhteystietosi",
+        "educationDetails": "Ilmoittautuminen - koulutustiedot",
         "done": "Ilmoittautuminen - valmis",
         "frontPage": "Etusivu",
         "logoutSuccess": "Uloskirjautuminen onnnistui",