release: v0.9.0 (#29)

* feat: Access management dialog (#27)

* feat: Add access management dialog to dialogs context

* feat(ui): Add access management dialog to the ui

* chore(deps): Add shadcn scroll area

* feat: Access management dialog

* refactor: Create callbacks to add and remove users from the ui

* fix(a11y): Solve button-in-button error

* feat: Download file (#28)

* build: Update nginx config (#31)

---------

Co-authored-by: Miguel Mateo Mendoza Rojas <115849391+MiguelMRojas@users.noreply.github.com>

Author: PedroChaparro

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+e2e

CHANGELOG.md

@@ -1,45 +1,45 @@
-# [0.7.0](https://github.com/PedroChaparro/unofficial-frontend-react/compare/v0.6.1...v0.7.0) (2023-10-20)
+# [0.9.0](https://github.com/PedroChaparro/alternative-frontend-react/compare/v0.8.0...v0.9.0) (2023-10-21)
 
 
 ### Features
 
-* Create folder ([#24](https://github.com/PedroChaparro/unofficial-frontend-react/issues/24)) ([54dc7c1](https://github.com/PedroChaparro/unofficial-frontend-react/commit/54dc7c15c36fa3b19bad68caed62a6c45e8ccb54))
+* Download file ([#28](https://github.com/PedroChaparro/alternative-frontend-react/issues/28)) ([b55be6c](https://github.com/PedroChaparro/alternative-frontend-react/commit/b55be6cec070a0e50d94c5062eab408d9d9c0e31))
 
 
 
-## [0.6.1](https://github.com/PedroChaparro/unofficial-frontend-react/compare/v0.6.0...v0.6.1) (2023-10-20)
+# [0.8.0](https://github.com/PedroChaparro/alternative-frontend-react/compare/v0.7.0...v0.8.0) (2023-10-21)
 
 
-### Bug Fixes
+### Features
 
-* Go back button in folders navigation ([#23](https://github.com/PedroChaparro/unofficial-frontend-react/issues/23)) ([07edb44](https://github.com/PedroChaparro/unofficial-frontend-react/commit/07edb442b2524bd739bf7f0d6ea13f536b1a62b9))
+* Access management dialog ([#27](https://github.com/PedroChaparro/alternative-frontend-react/issues/27)) ([24e4048](https://github.com/PedroChaparro/alternative-frontend-react/commit/24e40482f1c44e21ab25a52a758b1acf8cf7ef37))
 
 
 
-# [0.6.0](https://github.com/PedroChaparro/unofficial-frontend-react/compare/v0.5.0...v0.6.0) (2023-10-20)
+# [0.7.0](https://github.com/PedroChaparro/alternative-frontend-react/compare/v0.6.1...v0.7.0) (2023-10-20)
 
 
 ### Features
 
-* Move files ([#21](https://github.com/PedroChaparro/unofficial-frontend-react/issues/21)) ([3a470e9](https://github.com/PedroChaparro/unofficial-frontend-react/commit/3a470e97df16f038658bb2e13019c2adda4a5e0a))
+* Create folder ([#24](https://github.com/PedroChaparro/alternative-frontend-react/issues/24)) ([54dc7c1](https://github.com/PedroChaparro/alternative-frontend-react/commit/54dc7c15c36fa3b19bad68caed62a6c45e8ccb54))
 
 
 
-# [0.5.0](https://github.com/PedroChaparro/unofficial-frontend-react/compare/v0.4.0...v0.5.0) (2023-10-20)
+## [0.6.1](https://github.com/PedroChaparro/alternative-frontend-react/compare/v0.6.0...v0.6.1) (2023-10-20)
 
 
-### Features
+### Bug Fixes
 
-* Home page ([#20](https://github.com/PedroChaparro/unofficial-frontend-react/issues/20)) ([36a272a](https://github.com/PedroChaparro/unofficial-frontend-react/commit/36a272ad72732e2eb8b21c8a18a9dfab7d72c837))
+* Go back button in folders navigation ([#23](https://github.com/PedroChaparro/alternative-frontend-react/issues/23)) ([07edb44](https://github.com/PedroChaparro/alternative-frontend-react/commit/07edb442b2524bd739bf7f0d6ea13f536b1a62b9))
 
 
 
-# [0.4.0](https://github.com/PedroChaparro/unofficial-frontend-react/compare/v0.3.0...v0.4.0) (2023-10-17)
+# [0.6.0](https://github.com/PedroChaparro/alternative-frontend-react/compare/v0.5.0...v0.6.0) (2023-10-20)
 
 
 ### Features
 
-* Rename files ([#18](https://github.com/PedroChaparro/unofficial-frontend-react/issues/18)) ([bbc6f61](https://github.com/PedroChaparro/unofficial-frontend-react/commit/bbc6f611b9f8dd9526d67e55bc79aabc1a9acdb2))
+* Move files ([#21](https://github.com/PedroChaparro/alternative-frontend-react/issues/21)) ([3a470e9](https://github.com/PedroChaparro/alternative-frontend-react/commit/3a470e97df16f038658bb2e13019c2adda4a5e0a))
 
 
 

Dockerfile

@@ -2,19 +2,23 @@
 FROM node:20.5.1-alpine3.18 AS builder
 WORKDIR /app
 
+RUN npm install -g npm@latest
 RUN npm install -g pnpm
 
 COPY package.json pnpm-lock.yaml ./
 RUN pnpm install
 
+ENV VITE_PROXY_BASE_URL=http://capyfile1.bucaramanga.upb.edu.co/api/python
+
 COPY . .
 RUN pnpm build
 
 # --- Run stage ---
-FROM nginx:1-alpine3.18-slim AS runner
+FROM nginx:mainline-alpine3.18-slim AS runner
+RUN rm /etc/nginx/conf.d/default.conf
 
-COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /app/dist /var/www/capyfile/html
+COPY nginx.conf /etc/nginx/conf.d
+COPY --from=builder /app/dist /usr/share/nginx/html
 
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

config/nginx.conf

@@ -0,0 +1,67 @@
+import { faker } from "@faker-js/faker";
+import { expect, test } from "@playwright/test";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+test.describe.serial("Users can download files", () => {
+  const username = faker.internet.userName();
+  const password = faker.internet.password({ length: 8 });
+
+  test("Register test user", async ({ page }) => {
+    await page.goto("/register");
+
+    await page.getByLabel("Username").fill(username);
+    await page.getByLabel("Password", { exact: true }).fill(password);
+    await page.getByLabel("Confirm Password", { exact: true }).fill(password);
+    await page.getByRole("button", { name: "Submit", exact: true }).click();
+
+    await expect(page.getByText("Account created successfully")).toBeVisible();
+    await page.waitForURL(/\/files$/);
+  });
+
+  test("Upload test file", async ({ page }) => {
+    // Login with the registered user
+    await page.goto("/login");
+    await page.getByLabel("Username").fill(username);
+    await page.getByLabel("Password", { exact: true }).fill(password);
+    await page.getByRole("button", { name: "Submit", exact: true }).click();
+    await page.waitForURL(/\/files$/);
+
+    // Open the upload modal
+    await page.getByRole("button", { name: "Upload file" }).click();
+    await expect(page.getByRole("dialog")).toBeVisible();
+
+    // Upload a file
+    const filesInput = page.getByLabel("Choose files to upload", {
+      exact: true
+    });
+    await filesInput.setInputFiles(path.join(__dirname, "data/in/yellow.jpg"));
+    await page.getByRole("button", { name: "Upload", exact: true }).click();
+
+    // Assert file is shown
+    await expect(page.getByText("yellow.jpg")).toBeVisible();
+  });
+
+  test("Download file", async ({ page }) => {
+    // Login with the registered user
+    await page.goto("/login");
+    await page.getByLabel("Username").fill(username);
+    await page.getByLabel("Password", { exact: true }).fill(password);
+    await page.getByRole("button", { name: "Submit", exact: true }).click();
+    await page.waitForURL(/\/files$/);
+
+    // Assert file is shown
+    const fileCard = page.getByRole("button", { name: "yellow.jpg card" });
+    await expect(fileCard).toBeVisible();
+
+    // Download the file
+    const downloadPromise = page.waitForEvent("download");
+    await fileCard.click();
+
+    const download = await downloadPromise;
+    await download.saveAs(path.join(__dirname, "data/out/yellow.jpg"));
+  });
+});

e2e/files/data/blue.jpg renamed to e2e/files/data/in/blue.jpg

@@ -40,7 +40,7 @@ test.describe.serial("Users can move a file", () => {
     const filesInput = page.getByLabel("Choose files to upload", {
       exact: true
     });
-    await filesInput.setInputFiles(path.join(__dirname, "data/yellow.jpg"));
+    await filesInput.setInputFiles(path.join(__dirname, "data/in/yellow.jpg"));
     await page.getByRole("button", { name: "Upload", exact: true }).click();
 
     // Assert file is shown

e2e/files/data/red.jpg renamed to e2e/files/data/in/red.jpg

@@ -39,7 +39,7 @@ test.describe.serial("Users can rename files", () => {
     const filesInput = page.getByLabel("Choose files to upload", {
       exact: true
     });
-    await filesInput.setInputFiles(path.join(__dirname, "data/yellow.jpg"));
+    await filesInput.setInputFiles(path.join(__dirname, "data/in/yellow.jpg"));
     await page.getByRole("button", { name: "Upload", exact: true }).click();
 
     // Assert file is shown

e2e/files/data/yellow.jpg renamed to e2e/files/data/in/yellow.jpg

@@ -40,9 +40,9 @@ test.describe.serial("Users can upload files", () => {
       exact: true
     });
     await filesInput.setInputFiles([
-      path.join(__dirname, "data/yellow.jpg"),
-      path.join(__dirname, "data/blue.jpg"),
-      path.join(__dirname, "data/red.jpg")
+      path.join(__dirname, "data/in/yellow.jpg"),
+      path.join(__dirname, "data/in/blue.jpg"),
+      path.join(__dirname, "data/in/red.jpg")
     ]);
 
     // Submit the form
@@ -73,7 +73,9 @@ test.describe.serial("Users can upload files", () => {
     const filesInput = page.getByLabel("Choose files to upload", {
       exact: true
     });
-    await filesInput.setInputFiles([path.join(__dirname, "data/yellow.jpg")]);
+    await filesInput.setInputFiles([
+      path.join(__dirname, "data/in/yellow.jpg")
+    ]);
 
     // Submit the form
     await page.getByRole("button", { name: "Upload", exact: true }).click();

e2e/files/data/out/.gitkeep

@@ -0,0 +1,10 @@
+server {
+  listen 80;
+  listen [::]:80;
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html; 
+    try_files $uri $uri/ /index.html;
+  }
+}

e2e/files/download-file.spec.tsx

@@ -1,7 +1,7 @@
 {
   "name": "unofficial-frontend-react",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,6 +20,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "axios": "1.5.1",

e2e/files/move-file.spec.tsx

@@ -3,7 +3,7 @@
 import { FilesDialogsContext } from "@/context/index";
 import { File } from "@/types/entities";
 import { Dialogs } from "@/types/enums";
-import { MoreVertical, PenBox, Truck } from "lucide-react";
+import { Download, Key, MoreVertical, PenBox, Truck } from "lucide-react";
 import { useContext } from "react";
 
 import { Button } from "../ui/button";
@@ -39,31 +39,30 @@ export const DropDown = ({ file }: { file: File }) => {
           Move {file.isFile ? "file" : "directory"}
         </DropdownMenuItem>
         {/*
-        <DropdownMenuItem>
+          <DropdownMenuItem>
+            <Trash2 className="mr-2 h-4 w-4" />
+            Remove {file.isFile ? "file" : "directory"}
+          </DropdownMenuItem>
+        */}
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            openDialog(Dialogs.ACCESS_MANAGEMENT, file);
+          }}
+        >
           <Key className="mr-2 h-4 w-4" />
           Manage access
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => openDialog(Dialogs.RENAME_FILE, file)}>
-          <PenBox className="mr-2 h-4 w-4" />
-          Rename {file.isFile ? "file" : "directory"}
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Trash2 className="mr-2 h-4 w-4" />
-          Remove {file.isFile ? "file" : "directory"}
-        </DropdownMenuItem>
-    */}
       </>
     );
 
     if (file.isFile) {
       return (
         <DropdownMenuContent className="w-48">
-          {/*
           <DropdownMenuItem>
             <Download className="mr-2 h-4 w-4" />
             Download file
           </DropdownMenuItem>
-          */}
           {sharedActions}
         </DropdownMenuContent>
       );