From 7119620f6e965f9cbdad97926f58f68e8f84aa30 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 24 Jul 2022 16:37:31 +0200 Subject: [PATCH 01/18] start loading work --- .../sidebar-left/panels/asset-manager.tsx | 50 ++++++++++++++++--- .../sidebar-left/panels/components/image.tsx | 14 ++++-- .../app/shared/design-system/index.ts | 1 + 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index cbda921c0e..3033a75372 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -1,13 +1,52 @@ import { ImageIcon } from "~/shared/icons"; import { Button, Flex, Grid, Heading } from "~/shared/design-system"; -import { useRef } from "react"; +import { ChangeEvent, useEffect, useRef, useState } from "react"; import { Form, useSubmit } from "@remix-run/react"; import type { Asset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; -export const TabContent = ({ assets }: { assets: Array }) => { +const readImages = async (fileList: FileList) => { + const images = []; + for (const file of fileList) { + const path = await new Promise((resolve) => { + const reader = new FileReader(); + reader.addEventListener("load", (event) => { + resolve(event?.target?.result); + }); + reader.readAsDataURL(file); + }); + + images.push({ path, name: file.name, size: file.size, uploading: true }); + } + + return images; +}; + +export const TabContent = ({ + assets: baseAssets, +}: { + assets: Array; +}) => { const inputRef = useRef(null); const submit = useSubmit(); + const [assets, setAssets] = useState(baseAssets); + + useEffect(() => { + if (baseAssets.length === assets.length) { + setAssets(baseAssets); + } + }, [baseAssets, assets.length]); + + const onFormChange = async (event: ChangeEvent) => { + const newFiles = inputRef?.current?.files; + if (newFiles) { + submit(event.currentTarget); + const parsedFiles = await readImages(newFiles); + setAssets((assets) => [...parsedFiles, ...assets]); + + //event.currentTarget.reset(); + } + }; return ( @@ -16,12 +55,7 @@ export const TabContent = ({ assets }: { assets: Array }) => {
{ - if (inputRef.current?.files) { - submit(event.currentTarget); - event.currentTarget.reset(); - } - }} + onChange={onFormChange} > { }; export const AssetManagerImage = ({ - asset: { path, alt }, + asset: { path, alt, uploading }, }: { asset: Asset; }) => { @@ -27,12 +27,20 @@ export const AssetManagerImage = ({ + > + + ); }; diff --git a/apps/designer/app/shared/design-system/index.ts b/apps/designer/app/shared/design-system/index.ts index d94c0e1062..9c912df80b 100644 --- a/apps/designer/app/shared/design-system/index.ts +++ b/apps/designer/app/shared/design-system/index.ts @@ -39,6 +39,7 @@ export { Tooltip } from "./components/tooltip"; export { Button } from "./components/button"; export { IconButton } from "./components/icon-button"; export { Box } from "./components/box"; +export { ProgressBar } from "./components/progress-bar"; export { Popover, PopoverContent, From b4754bbb7f5a8949080a92cd257d6f5ebc5907e3 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 24 Jul 2022 17:40:22 +0200 Subject: [PATCH 02/18] cleanup --- .../sidebar-left/panels/asset-manager.tsx | 48 ++++++++++++------- .../sidebar-left/panels/components/image.tsx | 29 ++++++++--- 2 files changed, 54 insertions(+), 23 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 3033a75372..480ff5525e 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -4,6 +4,7 @@ import { ChangeEvent, useEffect, useRef, useState } from "react"; import { Form, useSubmit } from "@remix-run/react"; import type { Asset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; +import ObjectID from "bson-objectid"; const readImages = async (fileList: FileList) => { const images = []; @@ -11,43 +12,49 @@ const readImages = async (fileList: FileList) => { const path = await new Promise((resolve) => { const reader = new FileReader(); reader.addEventListener("load", (event) => { - resolve(event?.target?.result); + const dataUri = event?.target?.result; + + resolve(dataUri); }); reader.readAsDataURL(file); }); - images.push({ path, name: file.name, size: file.size, uploading: true }); + images.push({ + path: path as string, + name: file.name, + id: ObjectID.toString(), + }); } return images; }; -export const TabContent = ({ - assets: baseAssets, -}: { - assets: Array; -}) => { +type ParsedFiles = { + path: string; + name?: string; + id?: string; +}[]; + +export const TabContent = ({ assets }: { assets: Array }) => { const inputRef = useRef(null); const submit = useSubmit(); - const [assets, setAssets] = useState(baseAssets); - - useEffect(() => { - if (baseAssets.length === assets.length) { - setAssets(baseAssets); - } - }, [baseAssets, assets.length]); + const [uploadedImages, setUploadedImages] = useState([]); const onFormChange = async (event: ChangeEvent) => { const newFiles = inputRef?.current?.files; if (newFiles) { submit(event.currentTarget); const parsedFiles = await readImages(newFiles); - setAssets((assets) => [...parsedFiles, ...assets]); + setUploadedImages(parsedFiles); - //event.currentTarget.reset(); + event.currentTarget.reset(); } }; + useEffect(() => { + setUploadedImages([]); + }, [assets?.length]); + return ( @@ -71,8 +78,15 @@ export const TabContent = ({ + {uploadedImages.map((asset) => ( + + ))} {assets.map((asset) => ( - + ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index f1ecb611da..5b2d1e2418 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,4 +1,3 @@ -import { Asset } from "@webstudio-is/prisma-client"; import { useEffect, useState } from "react"; import { Box, ProgressBar } from "~/shared/design-system"; import placholderImage from "~/shared/images/image-placeholder.svg"; @@ -18,18 +17,30 @@ const useImageWithFallback = ({ path }: { path: string }) => { }; export const AssetManagerImage = ({ - asset: { path, alt, uploading }, + path, + alt, + uploading, }: { - asset: Asset; + path: string; + alt?: string; + uploading?: boolean; }) => { const src = useImageWithFallback({ path }); + const [progressBarPercentage, setProgressBarPercentage] = useState(0); + + useEffect(() => { + setInterval(() => { + if (progressBarPercentage < 60) { + setProgressBarPercentage((percentage) => percentage + 1); + } + }, 100); + }, []); + return ( - + {uploading && ( + + )} ); }; From 3dddda21ed77ce4b6981737039a8c87e5d6c4fa7 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 24 Jul 2022 17:41:56 +0200 Subject: [PATCH 03/18] always pass alt --- .../features/sidebar-left/panels/asset-manager.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 480ff5525e..f0726989eb 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -31,8 +31,8 @@ const readImages = async (fileList: FileList) => { type ParsedFiles = { path: string; - name?: string; - id?: string; + name: string; + id: string; }[]; export const TabContent = ({ assets }: { assets: Array }) => { @@ -83,10 +83,15 @@ export const TabContent = ({ assets }: { assets: Array }) => { key={asset.id} path={asset.path} uploading={true} + alt={asset.name} /> ))} {assets.map((asset) => ( - + ))}
From 59e339c59b11e5d21917bb63c22b2cc6904195d6 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Sun, 24 Jul 2022 17:45:01 +0200 Subject: [PATCH 04/18] clean on newImages --- .../features/sidebar-left/panels/asset-manager.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index f0726989eb..6dc23b7eda 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -1,7 +1,7 @@ import { ImageIcon } from "~/shared/icons"; import { Button, Flex, Grid, Heading } from "~/shared/design-system"; import { ChangeEvent, useEffect, useRef, useState } from "react"; -import { Form, useSubmit } from "@remix-run/react"; +import { Form, useActionData, useSubmit } from "@remix-run/react"; import type { Asset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; import ObjectID from "bson-objectid"; @@ -36,6 +36,7 @@ type ParsedFiles = { }[]; export const TabContent = ({ assets }: { assets: Array }) => { + const newImages = useActionData(); const inputRef = useRef(null); const submit = useSubmit(); const [uploadedImages, setUploadedImages] = useState([]); @@ -52,8 +53,10 @@ export const TabContent = ({ assets }: { assets: Array }) => { }; useEffect(() => { - setUploadedImages([]); - }, [assets?.length]); + if (newImages?.assets.length) { + setUploadedImages([]); + } + }, [newImages]); return ( From c7178aed7eef2bdb8fc3f39449bec4563a1a965b Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 00:32:42 +0200 Subject: [PATCH 05/18] more work on image loading --- .../sidebar-left/panels/asset-manager.tsx | 94 +++++-------------- .../panels/components/add-an-asset-form.tsx | 73 ++++++++++++++ .../sidebar-left/panels/components/image.tsx | 18 ++-- packages/prisma-client/src/prisma.ts | 3 +- 4 files changed, 106 insertions(+), 82 deletions(-) create mode 100644 apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 6dc23b7eda..8a26d00c6b 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -1,60 +1,27 @@ import { ImageIcon } from "~/shared/icons"; -import { Button, Flex, Grid, Heading } from "~/shared/design-system"; -import { ChangeEvent, useEffect, useRef, useState } from "react"; -import { Form, useActionData, useSubmit } from "@remix-run/react"; -import type { Asset } from "@webstudio-is/prisma-client"; +import { Flex, Grid, Heading } from "~/shared/design-system"; +import { useEffect, useState } from "react"; +import { useActionData } from "@remix-run/react"; +import { Asset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; -import ObjectID from "bson-objectid"; -const readImages = async (fileList: FileList) => { - const images = []; - for (const file of fileList) { - const path = await new Promise((resolve) => { - const reader = new FileReader(); - reader.addEventListener("load", (event) => { - const dataUri = event?.target?.result; +import { AddAnAssetForm } from "./components/add-an-asset-form"; - resolve(dataUri); - }); - reader.readAsDataURL(file); - }); - - images.push({ - path: path as string, - name: file.name, - id: ObjectID.toString(), - }); - } - - return images; -}; - -type ParsedFiles = { - path: string; - name: string; - id: string; -}[]; - -export const TabContent = ({ assets }: { assets: Array }) => { +export const TabContent = ({ + assets: baseAssets, +}: { + assets: Array; +}) => { const newImages = useActionData(); - const inputRef = useRef(null); - const submit = useSubmit(); - const [uploadedImages, setUploadedImages] = useState([]); - const onFormChange = async (event: ChangeEvent) => { - const newFiles = inputRef?.current?.files; - if (newFiles) { - submit(event.currentTarget); - const parsedFiles = await readImages(newFiles); - setUploadedImages(parsedFiles); - - event.currentTarget.reset(); - } - }; + const [assets, setAsssets] = useState(baseAssets); useEffect(() => { if (newImages?.assets.length) { - setUploadedImages([]); + setAsssets((currentAssets) => [ + ...newImages.assets, + ...currentAssets.filter((a) => !a.uploading), + ]); } }, [newImages]); @@ -62,38 +29,19 @@ export const TabContent = ({ assets }: { assets: Array }) => { Assets -
- - -
+ ) => + setAsssets((assets) => [...uploadedAssets, ...assets]) + } + /> - {uploadedImages.map((asset) => ( - - ))} {assets.map((asset) => ( ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx new file mode 100644 index 0000000000..1ad682cb46 --- /dev/null +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx @@ -0,0 +1,73 @@ +import { Form, useParams, useSubmit } from "@remix-run/react"; +import { Asset, Decimal, Location } from "@webstudio-is/prisma-client"; +import ObjectID from "bson-objectid"; +import { ChangeEvent, useRef } from "react"; +import { Button } from "~/shared/design-system"; + +const readImages = async (fileList: FileList, projectId: string) => { + const images = []; + for (const file of fileList) { + const path = await new Promise((resolve) => { + const reader = new FileReader(); + reader.addEventListener("load", (event) => { + const dataUri = event?.target?.result; + + resolve(dataUri); + }); + reader.readAsDataURL(file); + }); + + images.push({ + path: path as string, + name: file.name, + id: ObjectID().toString(), + width: 0 as unknown as Decimal, + height: 0 as unknown as Decimal, + projectId, + size: file.size, + format: file.type, + createdAt: new Date(), + location: "FS" as Location, + alt: "", + uploading: true, + }); + } + + return images; +}; + +export const AddAnAssetForm = ({ + onSubmit, +}: { + onSubmit: (uploadedAssets: Array) => void; +}) => { + const submit = useSubmit(); + const inputRef = useRef(null); + const { id } = useParams(); + + const onFormChange = async (event: ChangeEvent) => { + const newFiles = inputRef?.current?.files; + if (newFiles && id) { + submit(event.currentTarget); + const parsedFiles = await readImages(newFiles, id); + onSubmit(parsedFiles); + event.currentTarget.reset(); + } + }; + + return ( +
+ + +
+ ); +}; diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 5b2d1e2418..475b310def 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,10 +1,10 @@ import { useEffect, useState } from "react"; import { Box, ProgressBar } from "~/shared/design-system"; -import placholderImage from "~/shared/images/image-placeholder.svg"; +import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; const useImageWithFallback = ({ path }: { path: string }) => { - const [src, setSrc] = useState(placholderImage); + const [src, setSrc] = useState(placeholderImage); useEffect(() => { const newImage = new Image(); @@ -29,12 +29,14 @@ export const AssetManagerImage = ({ const [progressBarPercentage, setProgressBarPercentage] = useState(0); useEffect(() => { - setInterval(() => { - if (progressBarPercentage < 60) { - setProgressBarPercentage((percentage) => percentage + 1); - } - }, 100); - }, []); + if (uploading) { + setInterval(() => { + setProgressBarPercentage((percentage) => + percentage < 60 ? percentage + 1 : percentage + ); + }, 100); + } + }, [progressBarPercentage, uploading]); return ( Date: Mon, 25 Jul 2022 00:40:41 +0200 Subject: [PATCH 06/18] clean up ts --- .../sidebar-left/panels/asset-manager.tsx | 11 ++++++---- .../panels/components/add-an-asset-form.tsx | 22 ++++++------------- .../designer/features/sidebar-left/types.ts | 8 +++++++ 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 8a26d00c6b..f0b15cdcfc 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -6,11 +6,12 @@ import { Asset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; import { AddAnAssetForm } from "./components/add-an-asset-form"; +import { UploadingAsset } from "../types"; export const TabContent = ({ assets: baseAssets, }: { - assets: Array; + assets: Array; }) => { const newImages = useActionData(); @@ -20,7 +21,9 @@ export const TabContent = ({ if (newImages?.assets.length) { setAsssets((currentAssets) => [ ...newImages.assets, - ...currentAssets.filter((a) => !a.uploading), + ...currentAssets.filter( + (asset) => "uploading" in asset && !asset.uploading + ), ]); } }, [newImages]); @@ -30,7 +33,7 @@ export const TabContent = ({ Assets ) => + onSubmit={(uploadedAssets: Array) => setAsssets((assets) => [...uploadedAssets, ...assets]) } /> @@ -41,7 +44,7 @@ export const TabContent = ({ key={asset.id} path={asset.path} alt={asset.alt || asset.name} - uploading={asset.uploading} + uploading={"uploading" in asset && asset.uploading} /> ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx index 1ad682cb46..a5f191a378 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx @@ -1,10 +1,10 @@ -import { Form, useParams, useSubmit } from "@remix-run/react"; -import { Asset, Decimal, Location } from "@webstudio-is/prisma-client"; +import { Form, useSubmit } from "@remix-run/react"; import ObjectID from "bson-objectid"; import { ChangeEvent, useRef } from "react"; import { Button } from "~/shared/design-system"; +import { UploadingAsset } from "../../types"; -const readImages = async (fileList: FileList, projectId: string) => { +const readImages = async (fileList: FileList) => { const images = []; for (const file of fileList) { const path = await new Promise((resolve) => { @@ -21,15 +21,8 @@ const readImages = async (fileList: FileList, projectId: string) => { path: path as string, name: file.name, id: ObjectID().toString(), - width: 0 as unknown as Decimal, - height: 0 as unknown as Decimal, - projectId, - size: file.size, - format: file.type, - createdAt: new Date(), - location: "FS" as Location, - alt: "", uploading: true, + alt: file.name, }); } @@ -39,17 +32,16 @@ const readImages = async (fileList: FileList, projectId: string) => { export const AddAnAssetForm = ({ onSubmit, }: { - onSubmit: (uploadedAssets: Array) => void; + onSubmit: (uploadedAssets: Array) => void; }) => { const submit = useSubmit(); const inputRef = useRef(null); - const { id } = useParams(); const onFormChange = async (event: ChangeEvent) => { const newFiles = inputRef?.current?.files; - if (newFiles && id) { + if (newFiles) { submit(event.currentTarget); - const parsedFiles = await readImages(newFiles, id); + const parsedFiles = await readImages(newFiles); onSubmit(parsedFiles); event.currentTarget.reset(); } diff --git a/apps/designer/app/designer/features/sidebar-left/types.ts b/apps/designer/app/designer/features/sidebar-left/types.ts index dc658bb5f1..b5c95c5310 100644 --- a/apps/designer/app/designer/features/sidebar-left/types.ts +++ b/apps/designer/app/designer/features/sidebar-left/types.ts @@ -1,3 +1,11 @@ import { panels } from "./panels"; export type TabName = keyof typeof panels | "none"; + +export type UploadingAsset = { + id: string; + uploading: boolean; + name: string; + path: string; + alt: string; +}; From 833ce68ddd38f3f525b2354ded20b852f395e9eb Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 00:49:30 +0200 Subject: [PATCH 07/18] add blue to images uploading --- .../sidebar-left/panels/asset-manager.tsx | 4 +--- .../sidebar-left/panels/components/image.tsx | 19 +++++++++++++++---- packages/asset-uploader/src/db/create.ts | 6 +++++- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index f0b15cdcfc..e7523db089 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -21,9 +21,7 @@ export const TabContent = ({ if (newImages?.assets.length) { setAsssets((currentAssets) => [ ...newImages.assets, - ...currentAssets.filter( - (asset) => "uploading" in asset && !asset.uploading - ), + ...currentAssets.filter((asset) => !("uploading" in asset)), ]); } }, [newImages]); diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 475b310def..882965928a 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -43,16 +43,27 @@ export const AssetManagerImage = ({ title={alt || ""} css={{ aspectRatio: "1/1", - backgroundImage: `url(${src})`, - backgroundSize: "contain", - backgroundRepeat: "no-repeat", - backgroundPosition: "center", display: "flex", justifyContent: "center", alignItems: "center", padding: "0 $2", + position: "relative", }} > + {uploading && ( Date: Mon, 25 Jul 2022 00:49:53 +0200 Subject: [PATCH 08/18] remove useless export --- packages/prisma-client/src/prisma.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/prisma-client/src/prisma.ts b/packages/prisma-client/src/prisma.ts index bf58739c56..e56bcdb8cf 100644 --- a/packages/prisma-client/src/prisma.ts +++ b/packages/prisma-client/src/prisma.ts @@ -1,5 +1,4 @@ import { PrismaClient, Prisma } from "@prisma/client"; -import { Decimal } from "@prisma/client/runtime"; import { PrismaClientKnownRequestError } from "@prisma/client/runtime"; declare global { @@ -15,4 +14,4 @@ export const prisma = global.prisma || new PrismaClient(); if (process.env.NODE_ENV !== "production") global.prisma = prisma; -export { Prisma, PrismaClientKnownRequestError, Decimal }; +export { Prisma, PrismaClientKnownRequestError }; From a4425e7e9ef45bc11c51b04af2332c6c71691813 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 16:12:07 +0200 Subject: [PATCH 09/18] small fixes --- .../sidebar-left/panels/asset-manager.tsx | 5 ++--- .../sidebar-left/panels/components/image.tsx | 20 +++++++++---------- apps/designer/app/routes/designer/$id.tsx | 4 +--- .../asset-uploader/src/targets/disk/upload.ts | 2 +- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index e7523db089..5d726af86f 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -18,14 +18,13 @@ export const TabContent = ({ const [assets, setAsssets] = useState(baseAssets); useEffect(() => { - if (newImages?.assets.length) { + if (newImages?.length) { setAsssets((currentAssets) => [ - ...newImages.assets, + ...newImages, ...currentAssets.filter((asset) => !("uploading" in asset)), ]); } }, [newImages]); - return ( diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 882965928a..29c4b4e21e 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import { Box, ProgressBar } from "~/shared/design-system"; +import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; @@ -28,15 +29,14 @@ export const AssetManagerImage = ({ const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); - useEffect(() => { - if (uploading) { - setInterval(() => { - setProgressBarPercentage((percentage) => - percentage < 60 ? percentage + 1 : percentage - ); - }, 100); - } - }, [progressBarPercentage, uploading]); + useInterval( + () => { + setProgressBarPercentage((percentage) => + percentage < 60 ? percentage + 1 : percentage + ); + }, + uploading ? 100 : null + ); return ( { projectId: params.id, dirname: __dirname, }); - return { - assets, - }; + return assets; } catch (error) { if (error instanceof Error) { return { diff --git a/packages/asset-uploader/src/targets/disk/upload.ts b/packages/asset-uploader/src/targets/disk/upload.ts index 98fb57d26d..ebb0fd6b01 100644 --- a/packages/asset-uploader/src/targets/disk/upload.ts +++ b/packages/asset-uploader/src/targets/disk/upload.ts @@ -29,5 +29,5 @@ export const uploadToDisk = async ({ return newAsset; }); - await Promise.all(allInfo); + return await Promise.all(allInfo); }; From c8112d7e8ab6c2e1761f16f2f3f3fb2e0b51bf07 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 16:20:57 +0200 Subject: [PATCH 10/18] fix ts --- .../features/sidebar-left/panels/asset-manager.tsx | 3 ++- .../panels/components/add-an-asset-form.tsx | 3 ++- .../features/sidebar-left/panels/components/image.tsx | 6 ++++-- .../app/designer/features/sidebar-left/types.ts | 11 ++++++----- apps/designer/app/routes/designer/$id.tsx | 5 ++++- packages/prisma-client/src/types.ts | 5 ++++- 6 files changed, 22 insertions(+), 11 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 5d726af86f..0a1b836f2a 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -25,6 +25,7 @@ export const TabContent = ({ ]); } }, [newImages]); + return ( @@ -41,7 +42,7 @@ export const TabContent = ({ key={asset.id} path={asset.path} alt={asset.alt || asset.name} - uploading={"uploading" in asset && asset.uploading} + status={asset.status} /> ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx index a5f191a378..a19c673c17 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/add-an-asset-form.tsx @@ -1,4 +1,5 @@ import { Form, useSubmit } from "@remix-run/react"; +import { Asset } from "@webstudio-is/prisma-client"; import ObjectID from "bson-objectid"; import { ChangeEvent, useRef } from "react"; import { Button } from "~/shared/design-system"; @@ -21,7 +22,7 @@ const readImages = async (fileList: FileList) => { path: path as string, name: file.name, id: ObjectID().toString(), - uploading: true, + status: "uploading" as Asset["status"], alt: file.name, }); } diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 29c4b4e21e..70c2fd6c7a 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -3,6 +3,7 @@ import { Box, ProgressBar } from "~/shared/design-system"; import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; +import { Asset } from "@webstudio-is/prisma-client"; const useImageWithFallback = ({ path }: { path: string }) => { const [src, setSrc] = useState(placeholderImage); @@ -20,12 +21,13 @@ const useImageWithFallback = ({ path }: { path: string }) => { export const AssetManagerImage = ({ path, alt, - uploading, + status, }: { path: string; alt?: string; - uploading?: boolean; + status?: Asset["status"]; }) => { + const uploading = status === "uploading"; const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); diff --git a/apps/designer/app/designer/features/sidebar-left/types.ts b/apps/designer/app/designer/features/sidebar-left/types.ts index b5c95c5310..31e75cb3e1 100644 --- a/apps/designer/app/designer/features/sidebar-left/types.ts +++ b/apps/designer/app/designer/features/sidebar-left/types.ts @@ -1,11 +1,12 @@ +import { Asset } from "@webstudio-is/prisma-client"; import { panels } from "./panels"; export type TabName = keyof typeof panels | "none"; export type UploadingAsset = { - id: string; - uploading: boolean; - name: string; - path: string; - alt: string; + id: Asset["id"]; + status: Asset["status"]; + name: Asset["name"]; + path: Asset["path"]; + alt: Asset["alt"]; }; diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index 4ad2ae362e..322389f433 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -42,7 +42,10 @@ export const action: ActionFunction = async ({ request, params }) => { projectId: params.id, dirname: __dirname, }); - return assets; + return assets.map((asset: Asset) => ({ + ...asset, + status: "uploaded", + })); } catch (error) { if (error instanceof Error) { return { diff --git a/packages/prisma-client/src/types.ts b/packages/prisma-client/src/types.ts index 6fe42524f1..31a1a8dcc8 100644 --- a/packages/prisma-client/src/types.ts +++ b/packages/prisma-client/src/types.ts @@ -2,5 +2,8 @@ import type { Asset as DbAsset } from "@prisma/client"; export { Location } from "@prisma/client"; export type { InstanceProps, Project, User, Breakpoints } from "@prisma/client"; -export type Asset = DbAsset & { path: string }; +export type Asset = DbAsset & { + path: string; + status: "uploading" | "uploaded"; +}; export type { DbAsset }; From 204520b472a1156bb1a1ca125a269c00ce66118d Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 16:25:09 +0200 Subject: [PATCH 11/18] fix ts --- .../app/designer/features/sidebar-left/types.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/types.ts b/apps/designer/app/designer/features/sidebar-left/types.ts index 31e75cb3e1..29fd62a28d 100644 --- a/apps/designer/app/designer/features/sidebar-left/types.ts +++ b/apps/designer/app/designer/features/sidebar-left/types.ts @@ -3,10 +3,7 @@ import { panels } from "./panels"; export type TabName = keyof typeof panels | "none"; -export type UploadingAsset = { - id: Asset["id"]; - status: Asset["status"]; - name: Asset["name"]; - path: Asset["path"]; - alt: Asset["alt"]; -}; +export type UploadingAsset = Pick< + Asset, + "id" | "status" | "name" | "path" | "alt" +>; From b0520eb9048f7e0fea6a7819d967a75ab25b8837 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 22:24:50 +0200 Subject: [PATCH 12/18] ts fix --- .../features/sidebar-left/panels/asset-manager.tsx | 8 ++++---- packages/prisma-client/src/types.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 0a1b836f2a..80db7345aa 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -15,13 +15,13 @@ export const TabContent = ({ }) => { const newImages = useActionData(); - const [assets, setAsssets] = useState(baseAssets); + const [assets, setAssets] = useState(baseAssets); useEffect(() => { if (newImages?.length) { - setAsssets((currentAssets) => [ + setAssets((currentAssets) => [ ...newImages, - ...currentAssets.filter((asset) => !("uploading" in asset)), + ...currentAssets.filter((asset) => asset.status !== "uploading"), ]); } }, [newImages]); @@ -32,7 +32,7 @@ export const TabContent = ({ Assets ) => - setAsssets((assets) => [...uploadedAssets, ...assets]) + setAssets((assets) => [...uploadedAssets, ...assets]) } /> diff --git a/packages/prisma-client/src/types.ts b/packages/prisma-client/src/types.ts index 31a1a8dcc8..fbaabd8d76 100644 --- a/packages/prisma-client/src/types.ts +++ b/packages/prisma-client/src/types.ts @@ -4,6 +4,6 @@ export type { InstanceProps, Project, User, Breakpoints } from "@prisma/client"; export type Asset = DbAsset & { path: string; - status: "uploading" | "uploaded"; + status?: "uploading" | "uploaded"; }; export type { DbAsset }; From 8cfc34b27bf757d118866433c458adecf9edc6a6 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 22:28:06 +0200 Subject: [PATCH 13/18] rename worker url env to CDN url --- apps/designer/.env.example | 3 ++- .../asset-uploader/src/helpers/get-asset-path.test.ts | 4 ++-- packages/asset-uploader/src/helpers/get-asset-path.ts | 8 ++++---- packages/asset-uploader/src/schema.ts | 4 ++-- packages/asset-uploader/src/targets/s3/handler.ts | 4 ++-- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/designer/.env.example b/apps/designer/.env.example index 354ce8b964..c04c47f861 100644 --- a/apps/designer/.env.example +++ b/apps/designer/.env.example @@ -11,9 +11,10 @@ FILE_UPLOAD_PATH="uploads" # S3 envs S3_BUCKET= S3_REGION= +S3_ACL="public-read" S3_ENDPOINT= S3_ACCESS_KEY_ID= S3_SECRET_ACCESS_KEY= # if using r2 this your worker url -WORKER_URL= \ No newline at end of file +ASSET_CDN_URL= \ No newline at end of file diff --git a/packages/asset-uploader/src/helpers/get-asset-path.test.ts b/packages/asset-uploader/src/helpers/get-asset-path.test.ts index 4c56a26a43..0701701e96 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.test.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.test.ts @@ -22,7 +22,7 @@ describe("getAssetPath", () => { ...OLD_ENV, S3_ACCESS_KEY_ID: "testid", S3_SECRET_ACCESS_KEY: "testkey", - WORKER_URL: "", + ASSET_CDN_URL: "", }; }); @@ -87,7 +87,7 @@ describe("getAssetPath", () => { process.env.S3_ENDPOINT = "https://userid.r2.cloudflarestorage.com"; process.env.S3_BUCKET = "bucket"; process.env.S3_REGION = "auto"; - process.env.WORKER_URL = "https://worker-test.workers.dev"; + process.env.ASSET_CDN_URL = "https://worker-test.workers.dev"; const { getAssetPath } = require("./get-asset-path"); expect( getAssetPath({ diff --git a/packages/asset-uploader/src/helpers/get-asset-path.ts b/packages/asset-uploader/src/helpers/get-asset-path.ts index 9a69969b63..168fdc6c52 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.ts @@ -13,10 +13,10 @@ export const getAssetPath = (asset: DbAsset) => { if (asset.location === Location.REMOTE && s3Envs.success) { const s3Url = new URL(s3Envs.data.S3_ENDPOINT); - if (s3Envs.data.WORKER_URL) { - const r2Url = new URL(s3Envs.data.WORKER_URL); - r2Url.pathname = asset.name; - return r2Url.toString(); + if (s3Envs.data.ASSET_CDN_URL) { + const cndUrl = new URL(s3Envs.data.ASSET_CDN_URL); + cndUrl.pathname = asset.name; + return cndUrl.toString(); } s3Url.hostname = `${s3Envs.data.S3_BUCKET}.${s3Url.hostname}`; s3Url.pathname = asset.name; diff --git a/packages/asset-uploader/src/schema.ts b/packages/asset-uploader/src/schema.ts index 0a8e3a2301..45399df529 100644 --- a/packages/asset-uploader/src/schema.ts +++ b/packages/asset-uploader/src/schema.ts @@ -20,8 +20,8 @@ export const s3EnvVariables = z.object({ S3_ACCESS_KEY_ID: z.string(), S3_SECRET_ACCESS_KEY: z.string(), S3_BUCKET: z.string(), - S3_ACL: z.string().optional().default("public-read"), - WORKER_URL: z.string().optional(), + S3_ACL: z.string().optional(), + ASSET_CDN_URL: z.string().optional(), }); export const fsEnvVariables = z.object({ diff --git a/packages/asset-uploader/src/targets/s3/handler.ts b/packages/asset-uploader/src/targets/s3/handler.ts index ab99c93665..a2573ff9c1 100644 --- a/packages/asset-uploader/src/targets/s3/handler.ts +++ b/packages/asset-uploader/src/targets/s3/handler.ts @@ -43,8 +43,8 @@ export const s3UploadHandler: S3UploadHandler = async ({ const [name, extension] = getFilenameAndExtension(filename); const key = encodeURI(`${name}_${Date.now()}.${extension}`); - // r2 does not have ACL support so in that case we pass nothing there - const ACL = s3Envs.WORKER_URL ? {} : { ACL: s3Envs.S3_ACL }; + // if there is no ACL passed we do not default since some providers do not support it + const ACL = s3Envs.S3_ACL ? { ACL: s3Envs.S3_ACL } : {}; const params: PutObjectCommandInput = { Bucket: s3Envs.S3_BUCKET, From 494244aa7efb429522721c563ab7c0e5b1b294f5 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 23:21:57 +0200 Subject: [PATCH 14/18] use only the first four charecters in AUTH_SECRET --- apps/designer/app/services/auth.server.ts | 2 +- apps/designer/docs/test-cases.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/designer/app/services/auth.server.ts b/apps/designer/app/services/auth.server.ts index 05c08e740d..0e07fe3d77 100644 --- a/apps/designer/app/services/auth.server.ts +++ b/apps/designer/app/services/auth.server.ts @@ -55,7 +55,7 @@ if (process.env.DEV_LOGIN === "true") { new FormStrategy(async ({ form }) => { const secret = form.get("secret"); - if (secret === process.env.AUTH_SECRET) { + if (secret === process.env.AUTH_SECRET?.slice(0, 4)) { try { const user = await db.user.createOrLoginWithDev(); return user; diff --git a/apps/designer/docs/test-cases.md b/apps/designer/docs/test-cases.md index fb4c81f185..b991c78e17 100644 --- a/apps/designer/docs/test-cases.md +++ b/apps/designer/docs/test-cases.md @@ -64,7 +64,7 @@ - Open the login page when logged in to make sure you are redirected to the dashboard - Ensure you can view a built site in an incognito tab - Ensure you can view a forked site in an incognito tab - - Click on dev login, add the AUTH_SECRET value in the `.env` value and make sure user is authenticated and redirected to the dashboard + - Click on dev login, add the first four characters in AUTH_SECRET value in the `.env` value and make sure user is authenticated and redirected to the dashboard - Click on dev login and write a wrong value to make sure you get an error message and stay in the login page. - Click on login with GitHub and make sure that you are redirected to the dashboard - Click on login with Google and make sure that you are redirected to the dashboard From af9093e66d51d8ed3ceb64ea167b807378102bde Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 25 Jul 2022 23:24:11 +0200 Subject: [PATCH 15/18] update pull request template --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4061709a56..cef4574ccc 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,7 +14,7 @@ ## Before merging -- [ ] tested locally and on preview environment +- [ ] tested locally and on preview environment (preview dev login: 5de6e) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `designer/env-check.js` if mandatory From 222409f1888191847ef34c0828c0cf3a1fc32abf Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 07:38:22 +0200 Subject: [PATCH 16/18] Update apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx Co-authored-by: Oleg Isonen --- .../designer/features/sidebar-left/panels/components/image.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 70c2fd6c7a..cb17f54626 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -31,6 +31,7 @@ export const AssetManagerImage = ({ const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); + @todo rewrite this fake indication to show real progress useInterval( () => { setProgressBarPercentage((percentage) => From 1216113d1a7da899ad4e330790e387490be37e26 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 26 Jul 2022 11:54:01 +0200 Subject: [PATCH 17/18] Apply suggestions from code review comment fix --- .../designer/features/sidebar-left/panels/components/image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index cb17f54626..45abf039d7 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -31,7 +31,7 @@ export const AssetManagerImage = ({ const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); - @todo rewrite this fake indication to show real progress + // @todo rewrite this fake indication to show real progress useInterval( () => { setProgressBarPercentage((percentage) => From 4cfecd3c88c8c0a8e7086f6e421a57f55f2cab06 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 11:54:39 +0200 Subject: [PATCH 18/18] PR fixes --- .../features/sidebar-left/panels/components/image.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index cb17f54626..369b850e82 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -27,18 +27,18 @@ export const AssetManagerImage = ({ alt?: string; status?: Asset["status"]; }) => { - const uploading = status === "uploading"; + const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); - @todo rewrite this fake indication to show real progress + // @todo rewrite this fake indication to show real progress useInterval( () => { setProgressBarPercentage((percentage) => percentage < 60 ? percentage + 1 : percentage ); }, - uploading ? 100 : null + isUploading ? 100 : null ); return ( @@ -64,10 +64,10 @@ export const AssetManagerImage = ({ position: "absolute", left: 0, top: 0, - ...(uploading ? { filter: "blur(1px)", opacity: 0.7 } : {}), + ...(isUploading ? { filter: "blur(1px)", opacity: 0.7 } : {}), }} > - {uploading && ( + {isUploading && (