feat: add name property to share (#462)

* add name property to share

* refactor: run formatter

* tests: adapt system tests

* tests: adapt second system test

frontend/src/components/account/showShareInformationsModal.tsx

@@ -17,13 +17,9 @@ const showShareInformationsModal = (
   const t = translateOutsideContext();
   const link = `${appUrl}/s/${share.id}`;
 
-  let shareSize: number = 0;
-  for (let file of share.files as FileMetaData[])
-    shareSize += parseInt(file.size);
-
-  const formattedShareSize = byteToHumanSizeString(shareSize);
+  const formattedShareSize = byteToHumanSizeString(share.size);
   const formattedMaxShareSize = byteToHumanSizeString(maxShareSize);
-  const shareSizeProgress = (shareSize / maxShareSize) * 100;
+  const shareSizeProgress = (share.size / maxShareSize) * 100;
 
   const formattedCreatedAt = moment(share.createdAt).format("LLL");
   const formattedExpiration =
@@ -42,12 +38,18 @@ const showShareInformationsModal = (
           </b>
           {share.id}
         </Text>
+        <Text size="sm">
+          <b>
+            <FormattedMessage id="account.shares.table.name" />:{" "}
+          </b>
+          {share.name || "-"}
+        </Text>
 
         <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.description" />:{" "}
           </b>
-          {share.description || "No description"}
+          {share.description || "-"}
         </Text>
 
         <Text size="sm">
@@ -75,15 +77,15 @@ const showShareInformationsModal = (
         </Text>
 
         <Flex align="center" justify="center">
-          {shareSize / maxShareSize < 0.1 && (
+          {share.size / maxShareSize < 0.1 && (
             <Text size="xs" style={{ marginRight: "4px" }}>
               {formattedShareSize}
             </Text>
           )}
           <Progress
             value={shareSizeProgress}
-            label={shareSize / maxShareSize >= 0.1 ? formattedShareSize : ""}
-            style={{ width: shareSize / maxShareSize < 0.1 ? "70%" : "80%" }}
+            label={share.size / maxShareSize >= 0.1 ? formattedShareSize : ""}
+            style={{ width: share.size / maxShareSize < 0.1 ? "70%" : "80%" }}
             size="xl"
             radius="xl"
           />

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -92,11 +92,16 @@ const CreateUploadModalBody = ({
       .matches(new RegExp("^[a-zA-Z0-9_-]*$"), {
         message: t("upload.modal.link.error.invalid"),
       }),
+    name: yup
+      .string()
+      .transform((value) => value || undefined)
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .max(30, t("common.error.too-long", { length: 30 })),
     password: yup
       .string()
       .transform((value) => value || undefined)
-      .min(3)
-      .max(30),
+      .min(3, t("common.error.too-short", { length: 3 }))
+      .max(30, t("common.error.too-long", { length: 30 })),
     maxViews: yup
       .number()
       .transform((value) => value || undefined)
@@ -105,6 +110,7 @@ const CreateUploadModalBody = ({
 
   const form = useForm({
     initialValues: {
+      name: undefined,
       link: generatedLink,
       recipients: [] as string[],
       password: undefined,
@@ -154,6 +160,7 @@ const CreateUploadModalBody = ({
       uploadCallback(
         {
           id: values.link,
+          name: values.name,
           expiration: expirationString,
           recipients: values.recipients,
           description: values.description,
@@ -308,14 +315,21 @@ const CreateUploadModalBody = ({
           <Accordion>
             <Accordion.Item value="description" sx={{ borderBottom: "none" }}>
               <Accordion.Control>
-                <FormattedMessage id="upload.modal.accordion.description.title" />
+                <FormattedMessage id="upload.modal.accordion.name-and-description.title" />
               </Accordion.Control>
               <Accordion.Panel>
                 <Stack align="stretch">
+                  <TextInput
+                    variant="filled"
+                    placeholder={t(
+                      "upload.modal.accordion.name-and-description.name.placeholder",
+                    )}
+                    {...form.getInputProps("name")}
+                  />
                   <Textarea
                     variant="filled"
                     placeholder={t(
-                      "upload.modal.accordion.description.placeholder",
+                      "upload.modal.accordion.name-and-description.description.placeholder",
                     )}
                     {...form.getInputProps("description")}
                   />