From 27831677174af8f13237d4a981a1a070806f30e5 Mon Sep 17 00:00:00 2001 From: Dylan Decrulle Date: Fri, 22 Nov 2024 16:25:35 +0100 Subject: [PATCH] wip --- web/src/ui/i18n/resources/de.tsx | 31 +-- web/src/ui/i18n/resources/en.tsx | 34 ++- web/src/ui/i18n/resources/es.tsx | 34 ++- web/src/ui/i18n/resources/fi.tsx | 34 ++- web/src/ui/i18n/resources/fr.tsx | 35 ++- web/src/ui/i18n/resources/it.tsx | 34 ++- web/src/ui/i18n/resources/nl.tsx | 34 ++- web/src/ui/i18n/resources/no.tsx | 34 ++- web/src/ui/i18n/resources/zh-CN.tsx | 34 ++- .../ui/pages/myFiles/Explorer/Explorer.tsx | 33 ++- web/src/ui/pages/myFiles/MyFiles.tsx | 4 +- .../MyFilesCreateFolderDialog.stories.tsx | 2 +- .../myFiles/ShareFile/SelectTime.stories.tsx | 2 +- .../myFiles/ShareFile/ShareDialog.stories.tsx | 77 +++--- .../pages/myFiles/ShareFile/ShareDialog.tsx | 238 ++++++++++-------- 15 files changed, 335 insertions(+), 325 deletions(-) diff --git a/web/src/ui/i18n/resources/de.tsx b/web/src/ui/i18n/resources/de.tsx index db59c5bc2..afa9f98e2 100644 --- a/web/src/ui/i18n/resources/de.tsx +++ b/web/src/ui/i18n/resources/de.tsx @@ -318,26 +318,19 @@ export const translations: Translations<"de"> = { title: "Ihre Daten teilen", close: "Schließen", "create and copy link": "Link erstellen und kopieren", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Ihre Datei ist öffentlich, jeder mit dem Link kann sie herunterladen."; - case "private": - return "Ihre Datei ist derzeit privat."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "Um den Zugriff einzuschränken, ändern Sie den Freigabestatus Ihrer Datei."; - case "private": - return "Um Ihre Datei freizugeben und Zugriff zu gewähren, ändern Sie den Freigabestatus oder erstellen Sie einen temporären Zugriffslink."; - } - }, + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Ihre Datei ist öffentlich, jeder mit dem Link kann sie herunterladen." + : "Ihre Datei ist derzeit privat.", + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Um den Zugriff einzuschränken, ändern Sie den Freigabestatus Ihrer Datei." + : "Um Ihre Datei freizugeben und Zugriff zu gewähren, ändern Sie den Freigabestatus oder erstellen Sie einen temporären Zugriffslink.", + "hint link access": params => - params.policy === "private" - ? `Dieser Link gewährt für ${params.expiration} Zugriff auf Ihre Daten.` - : "Ihr Link ist verfügbar, solange die Datei öffentlich ist", + params.isPublic + ? "Ihr Link ist verfügbar, solange die Datei öffentlich ist" + : `Dieser Link gewährt für ${params.expiration} Zugriff auf Ihre Daten.`, "label input link": "Zugriffslink" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/en.tsx b/web/src/ui/i18n/resources/en.tsx index 75da911f2..65ead3816 100644 --- a/web/src/ui/i18n/resources/en.tsx +++ b/web/src/ui/i18n/resources/en.tsx @@ -307,26 +307,20 @@ export const translations: Translations<"en"> = { title: "Share your data", close: "Close", "create and copy link": "Create and copy link", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Your file is public, anyone with the link can download it."; - case "private": - return "Your file is currently private."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "To restrict its access, change your file's sharing status."; - case "private": - return "To share and provide access to your file, change the sharing status or create a temporary access link."; - } - }, - "hint link access": params => - params.policy === "private" - ? `This link will grant access to your data for ${params.expiration}.` - : "Your link is available as long as the file is public", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Your file is public, anyone with the link can download it." + : "Your file is currently private.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "To restrict its access, change your file's sharing status." + : "To share and provide access to your file, change the sharing status or create a temporary access link.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Your link is available as long as the file is public." + : `This link will grant access to your data for ${expiration}.`, "label input link": "Access link" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/es.tsx b/web/src/ui/i18n/resources/es.tsx index 8c7615f9b..c9374444f 100644 --- a/web/src/ui/i18n/resources/es.tsx +++ b/web/src/ui/i18n/resources/es.tsx @@ -319,26 +319,20 @@ export const translations: Translations<"en"> = { title: "Compartir tus datos", close: "Cerrar", "create and copy link": "Crear y copiar enlace", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Tu archivo es público, cualquier persona con el enlace puede descargarlo."; - case "private": - return "Tu archivo está actualmente privado."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "Para restringir su acceso, cambia el estado de difusión de tu archivo."; - case "private": - return "Para compartir y dar acceso a tu archivo, cambia el estado de difusión o crea un enlace de acceso temporal."; - } - }, - "hint link access": params => - params.policy === "private" - ? `Este enlace otorgará acceso a tus datos durante ${params.expiration}.` - : "Tu enlace está disponible mientras el archivo sea público", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Tu archivo es público, cualquier persona con el enlace puede descargarlo." + : "Tu archivo está actualmente privado.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Para restringir su acceso, cambia el estado de difusión de tu archivo." + : "Para compartir y dar acceso a tu archivo, cambia el estado de difusión o crea un enlace de acceso temporal.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Tu enlace está disponible mientras el archivo sea público." + : `Este enlace otorgará acceso a tus datos durante ${expiration}.`, "label input link": "Enlace de acceso" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/fi.tsx b/web/src/ui/i18n/resources/fi.tsx index e51b21c1d..1215c58e2 100644 --- a/web/src/ui/i18n/resources/fi.tsx +++ b/web/src/ui/i18n/resources/fi.tsx @@ -315,26 +315,20 @@ export const translations: Translations<"fi"> = { title: "Jaa tietosi", close: "Sulje", "create and copy link": "Luo ja kopioi linkki", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Tiedostosi on julkinen, kuka tahansa linkin omistava voi ladata sen."; - case "private": - return "Tiedostosi on tällä hetkellä yksityinen."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "Rajoittaaksesi pääsyä muuta tiedostosi jakamisen tilaa."; - case "private": - return "Jaa tiedosto ja anna pääsy muuttamalla jakamisen tilaa tai luomalla väliaikainen linkki."; - } - }, - "hint link access": params => - params.policy === "private" - ? `Tämä linkki antaa pääsyn tietoihisi ${params.expiration} ajaksi.` - : "Linkkisi on käytettävissä niin kauan kuin tiedosto on julkinen", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Tiedostosi on julkinen, kuka tahansa linkin omistava voi ladata sen." + : "Tiedostosi on tällä hetkellä yksityinen.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Rajoittaaksesi pääsyä muuta tiedostosi jakamisen tilaa." + : "Jaa tiedosto ja anna pääsy muuttamalla jakamisen tilaa tai luomalla väliaikainen linkki.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Linkkisi on käytettävissä niin kauan kuin tiedosto on julkinen." + : `Tämä linkki antaa pääsyn tietoihisi ${expiration} ajaksi.`, "label input link": "Pääsylinkki" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/fr.tsx b/web/src/ui/i18n/resources/fr.tsx index 0a53f5826..804205323 100644 --- a/web/src/ui/i18n/resources/fr.tsx +++ b/web/src/ui/i18n/resources/fr.tsx @@ -321,27 +321,20 @@ export const translations: Translations<"fr"> = { title: "Partager vos données", close: "Fermer", "create and copy link": "Créer et copier le lien", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return `Votre fichier est public, toute personne ayant le lien peut télécharger votre fichier.`; - case "private": - return "Votre fichier est actuellement privé."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return `Pour restreindre son accès, changez le statut de diffusion de - votre fichier.`; - case "private": - return `Pour partager et donner accès à votre fichier, changez le statut de diffusion ou créez un lien d’accès temporaire.`; - } - }, - "hint link access": params => - params.policy === "private" - ? `Ce lien donnera un accès à vos données pendant ${params.expiration}.` - : "Votre lien est disponible tant que le fichier est publique", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Votre fichier est public, toute personne ayant le lien peut télécharger votre fichier." + : "Votre fichier est actuellement privé.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Pour restreindre son accès, changez le statut de diffusion de votre fichier." + : "Pour partager et donner accès à votre fichier, changez le statut de diffusion ou créez un lien d’accès temporaire.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Votre lien est disponible tant que le fichier est public." + : `Ce lien donnera un accès à vos données pendant ${expiration}.`, "label input link": "Lien d'accès" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/it.tsx b/web/src/ui/i18n/resources/it.tsx index 50aaf4b8d..0123323c7 100644 --- a/web/src/ui/i18n/resources/it.tsx +++ b/web/src/ui/i18n/resources/it.tsx @@ -316,26 +316,20 @@ export const translations: Translations<"it"> = { title: "Condividi i tuoi dati", close: "Chiudi", "create and copy link": "Crea e copia il link", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Il tuo file è pubblico, chiunque abbia il link può scaricarlo."; - case "private": - return "Il tuo file è attualmente privato."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "Per limitare l'accesso, modifica lo stato di condivisione del tuo file."; - case "private": - return "Per condividere e dare accesso al tuo file, modifica lo stato di condivisione o crea un link di accesso temporaneo."; - } - }, - "hint link access": params => - params.policy === "private" - ? `Questo link garantirà l'accesso ai tuoi dati per ${params.expiration}.` - : "Il tuo link è disponibile finché il file è pubblico", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Il tuo file è pubblico, chiunque abbia il link può scaricarlo." + : "Il tuo file è attualmente privato.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Per limitare l'accesso, modifica lo stato di condivisione del tuo file." + : "Per condividere e dare accesso al tuo file, modifica lo stato di condivisione o crea un link di accesso temporaneo.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Il tuo link è disponibile finché il file è pubblico." + : `Questo link garantirà l'accesso ai tuoi dati per ${expiration}.`, "label input link": "Link di accesso" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/nl.tsx b/web/src/ui/i18n/resources/nl.tsx index 7b2a64036..7db823a4c 100644 --- a/web/src/ui/i18n/resources/nl.tsx +++ b/web/src/ui/i18n/resources/nl.tsx @@ -318,26 +318,20 @@ export const translations: Translations<"nl"> = { title: "Deel je gegevens", close: "Sluiten", "create and copy link": "Link maken en kopiëren", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Je bestand is openbaar, iedereen met de link kan het downloaden."; - case "private": - return "Je bestand is momenteel privé."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "Om toegang te beperken, verander de deelstatus van je bestand."; - case "private": - return "Om toegang te geven tot je bestand, verander de deelstatus of maak een tijdelijke toegangslink."; - } - }, - "hint link access": params => - params.policy === "private" - ? `Deze link geeft toegang tot je gegevens gedurende ${params.expiration}.` - : "Je link is beschikbaar zolang het bestand openbaar is", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Je bestand is openbaar, iedereen met de link kan het downloaden." + : "Je bestand is momenteel privé.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "Om toegang te beperken, verander de deelstatus van je bestand." + : "Om toegang te geven tot je bestand, verander de deelstatus of maak een tijdelijke toegangslink.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Je link is beschikbaar zolang het bestand openbaar is." + : `Deze link geeft toegang tot je gegevens gedurende ${expiration}.`, "label input link": "Toegangslink" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/no.tsx b/web/src/ui/i18n/resources/no.tsx index 9d201ea3e..fe529ea69 100644 --- a/web/src/ui/i18n/resources/no.tsx +++ b/web/src/ui/i18n/resources/no.tsx @@ -314,26 +314,20 @@ export const translations: Translations<"no"> = { title: "Del dataene dine", close: "Lukk", "create and copy link": "Opprett og kopier lenke", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "Filen din er offentlig, alle med lenken kan laste den ned."; - case "private": - return "Filen din er for øyeblikket privat."; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "For å begrense tilgangen, endre delingsstatusen til filen din."; - case "private": - return "For å dele og gi tilgang til filen din, endre delingsstatusen eller opprett en midlertidig tilgangslenke."; - } - }, - "hint link access": params => - params.policy === "private" - ? `Denne lenken gir tilgang til dataene dine i ${params.expiration}.` - : "Lenken din er tilgjengelig så lenge filen er offentlig", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "Filen din er offentlig, alle med lenken kan laste den ned." + : "Filen din er for øyeblikket privat.", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "For å begrense tilgangen, endre delingsstatusen til filen din." + : "For å dele og gi tilgang til filen din, endre delingsstatusen eller opprett en midlertidig tilgangslenke.", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "Lenken din er tilgjengelig så lenge filen er offentlig." + : `Denne lenken gir tilgang til dataene dine i ${expiration}.`, "label input link": "Tilgangslenke" }, MySecrets: { diff --git a/web/src/ui/i18n/resources/zh-CN.tsx b/web/src/ui/i18n/resources/zh-CN.tsx index a0be9f202..68df0d79b 100644 --- a/web/src/ui/i18n/resources/zh-CN.tsx +++ b/web/src/ui/i18n/resources/zh-CN.tsx @@ -285,26 +285,20 @@ export const translations: Translations<"zh-CN"> = { title: "分享您的数据", close: "关闭", "create and copy link": "创建并复制链接", - "paragraph current policy": ({ policy }) => { - switch (policy) { - case "public": - return "您的文件是公开的，任何拥有链接的人都可以下载。"; - case "private": - return "您的文件当前是私密的。"; - } - }, - "paragraph change policy": ({ policy }) => { - switch (policy) { - case "public": - return "要限制访问，请更改文件的共享状态。"; - case "private": - return "要分享并提供对文件的访问，请更改共享状态或创建一个临时访问链接。"; - } - }, - "hint link access": params => - params.policy === "private" - ? `此链接将在 ${params.expiration} 内提供对您的数据的访问权限。` - : "只要文件是公开的，您的链接就可用", + "paragraph current policy": ({ isPublic }) => + isPublic + ? "您的文件是公开的，任何拥有链接的人都可以下载。" + : "您的文件当前是私密的。", + + "paragraph change policy": ({ isPublic }) => + isPublic + ? "要限制访问，请更改文件的共享状态。" + : "要分享并提供对文件的访问，请更改共享状态或创建一个临时访问链接。", + + "hint link access": ({ isPublic, expiration }) => + isPublic + ? "只要文件是公开的，您的链接就可用。" + : `此链接将在 ${expiration} 内提供对您的数据的访问权限。`, "label input link": "访问链接" }, MySecrets: { diff --git a/web/src/ui/pages/myFiles/Explorer/Explorer.tsx b/web/src/ui/pages/myFiles/Explorer/Explorer.tsx index 50bf5a756..cef9b7e78 100644 --- a/web/src/ui/pages/myFiles/Explorer/Explorer.tsx +++ b/web/src/ui/pages/myFiles/Explorer/Explorer.tsx @@ -44,6 +44,8 @@ import { import type { Item } from "../shared/types"; import { ViewMode } from "../shared/types"; import { isDirectory } from "../shared/tools"; +import { ShareDialog } from "../ShareFile/ShareDialog"; +import { ShareView } from "core/usecases/fileExplorer"; export type ExplorerProps = { /** @@ -73,9 +75,9 @@ export type ExplorerProps = { onCreateDirectory: (params: { basename: string }) => void; onCopyPath: (params: { path: string }) => void; scrollableDivRef: RefObject; - pathMinDepth: number; onOpenFile: (params: { basename: string }) => void; + shareState: ShareView | undefined; //To modify } & Pick; //NOTE: TODO only defined when explorer type is s3 export const Explorer = memo((props: ExplorerProps) => { @@ -100,7 +102,8 @@ export const Explorer = memo((props: ExplorerProps) => { pathMinDepth, onViewModeChange, viewMode, - onShareFile + onShareFile, + shareState } = props; const [items] = useMemo( @@ -281,12 +284,6 @@ export const Explorer = memo((props: ExplorerProps) => { } ); - const onShareDialogOpen = useConstCallback( - async ({ fileBasename }: Param0) => { - onShareFile({ fileBasename }); - } - ); - const itemsOnDeleteItems = useConstCallback( async ( { items }: Parameters[0], @@ -314,10 +311,21 @@ export const Explorer = memo((props: ExplorerProps) => { } ); - const [isUploadModalOpen, setIsUploadModalOpen] = useState(false); + const [isUploadModalOpen, setIsUploadModalOpen] = useState(false); const onUploadModalClose = useConstCallback(() => setIsUploadModalOpen(false)); const onDragOver = useConstCallback(() => setIsUploadModalOpen(true)); + const [isShareModalOpen, setIsShareModalOpen] = useState(false); + + const onShareDialogOpen = useConstCallback( + async ({ fileBasename }: Param0) => { + setIsShareModalOpen(true); + onShareFile({ fileBasename }); + } + ); + + const onShareDialogClose = useConstCallback(() => setIsShareModalOpen(false)); + return ( <>
{ } /> - {/* */} + {/* */}
); diff --git a/web/src/ui/pages/myFiles/ShareFile/MyFilesCreateFolderDialog.stories.tsx b/web/src/ui/pages/myFiles/ShareFile/MyFilesCreateFolderDialog.stories.tsx index 980db64d0..a7298c1ff 100644 --- a/web/src/ui/pages/myFiles/ShareFile/MyFilesCreateFolderDialog.stories.tsx +++ b/web/src/ui/pages/myFiles/ShareFile/MyFilesCreateFolderDialog.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react"; import { MyFilesCreateFolderDialog } from "./MyFilesCreateFolderDialog"; const meta: Meta = { - title: "Pages/MyFiles/NewComponents/MyFilesCreateFolderDialog", + title: "Pages/MyFiles/ShareFile/MyFilesCreateFolderDialog", component: MyFilesCreateFolderDialog }; diff --git a/web/src/ui/pages/myFiles/ShareFile/SelectTime.stories.tsx b/web/src/ui/pages/myFiles/ShareFile/SelectTime.stories.tsx index fb073152a..0e167d5c3 100644 --- a/web/src/ui/pages/myFiles/ShareFile/SelectTime.stories.tsx +++ b/web/src/ui/pages/myFiles/ShareFile/SelectTime.stories.tsx @@ -3,7 +3,7 @@ import { SelectTime } from "./SelectTime"; import { useState } from "react"; const meta: Meta = { - title: "Pages/MyFiles/NewComponents/SelectTime", + title: "Pages/MyFiles/ShareFile/SelectTime", component: SelectTime }; diff --git a/web/src/ui/pages/myFiles/ShareFile/ShareDialog.stories.tsx b/web/src/ui/pages/myFiles/ShareFile/ShareDialog.stories.tsx index 2d06f0b17..0534b3162 100644 --- a/web/src/ui/pages/myFiles/ShareFile/ShareDialog.stories.tsx +++ b/web/src/ui/pages/myFiles/ShareFile/ShareDialog.stories.tsx @@ -16,27 +16,44 @@ export const Public: Story = { args: { isOpen: true, onClose: action("onClose"), - isRequestingUrl: false, - onRequestUrl: (params: { expirationTime: number }) => - action(`onRequestUrl ${params.expirationTime}`), + isPublic: true, file: { kind: "file", + policy: "public", basename: "photo.png", size: 2048000, // en bytes lastModified: new Date("2023-09-15"), - policy: "public", isBeingDeleted: false, isPolicyChanging: false, isBeingCreated: false }, - url: "https://minio.lab.sspcloud.fr/onyxia-datalab/public/photo.png", - validityDurationSecondOptions: [3600, 7200, 10800] + url: "https://minio.lab.sspcloud.fr/onyxia-datalab/public/photo.png" } }; -export const Private: Story = { - render: args => { - const [url, setUrl] = useState(args.url); +export const Private = { + args: { + isOpen: true, + isPublic: false, + onClose: action("onClose"), + file: { + policy: "private", + kind: "file", + basename: "photo.png", + size: 2048000, // in bytes + lastModified: new Date("2023-09-15"), + isBeingDeleted: false, + isPolicyChanging: false, + isBeingCreated: false + }, + url: undefined, + isRequestingUrl: false, + validityDurationSecondOptions: [3600, 7200, 10800], + validityDurationSecond: 3600, + onRequestUrl: action("onRequestUrl") + }, + render: () => { + const [url, setUrl] = useState(undefined); const [isRequestingUrl, setIsRequestingUrl] = useState(false); const handleRequestUrl = (params: { expirationTime: number }) => { @@ -53,33 +70,27 @@ export const Private: Story = { return ( { + action("onClose")(); + }} + file={{ + policy: "private", + kind: "file", + basename: "photo.png", + size: 2048000, // in bytes + lastModified: new Date("2023-09-15"), + isBeingDeleted: false, + isPolicyChanging: false, + isBeingCreated: false + }} url={url} isRequestingUrl={isRequestingUrl} onRequestUrl={handleRequestUrl} + validityDurationSecondOptions={[3600, 7200, 10800]} + validityDurationSecond={3600} /> ); - }, - args: { - isOpen: true, - onClose: action("onClose"), - isRequestingUrl: false, - file: { - kind: "file", - basename: "photo.png", - size: 2048000, // in bytes - lastModified: new Date("2023-09-15"), - policy: "private", - isBeingDeleted: false, - isPolicyChanging: false, - isBeingCreated: false - }, - url: undefined, - validityDurationSecondOptions: [3600, 7200, 10800], - onRequestUrl: (params: { expirationTime: number }) => { - action( - `onRequestUrl triggered with expirationTime: ${params.expirationTime}` - )(); - } } -}; +} satisfies Story; diff --git a/web/src/ui/pages/myFiles/ShareFile/ShareDialog.tsx b/web/src/ui/pages/myFiles/ShareFile/ShareDialog.tsx index 3ba4ce043..e8b42e8fc 100644 --- a/web/src/ui/pages/myFiles/ShareFile/ShareDialog.tsx +++ b/web/src/ui/pages/myFiles/ShareFile/ShareDialog.tsx @@ -11,114 +11,64 @@ import { SelectTime } from "./SelectTime"; import { FileItem } from "../shared/types"; import TextField from "@mui/material/TextField"; import { CopyToClipboardIconButton } from "ui/shared/CopyToClipboardIconButton"; -import { CircularProgress } from "@mui/material"; - -type ShareDialogProps = { - isOpen: boolean; - onClose: () => void; - file: FileItem; - url: string | undefined; //undefined if file.policy is public - isRequestingUrl: boolean; - validityDurationSecondOptions: number[]; - onRequestUrl: (params: { expirationTime: number }) => void; -}; +import { assert } from "tsafe/assert"; +import { CircularProgress } from "onyxia-ui/CircularProgress"; + +export type ShareDialogProps = ShareDialogProps.Close | ShareDialogProps.Open; +export namespace ShareDialogProps { + type Common = { + onClose: () => void; + }; + + export type Close = Common & { + isOpen: false; + }; + + export type Open = Common & { + isOpen: true; + file: FileItem; + } & BodyProps; + + export type BodyProps = BodyProps.PrivateFileProps | BodyProps.PublicFileProps; + + export namespace BodyProps { + export type PrivateFileProps = { + isPublic: false; // Clé discriminante + url: string | undefined; + isRequestingUrl: boolean; + validityDurationSecondOptions: number[]; + validityDurationSecond: number; + onRequestUrl: (params: { expirationTime: number }) => void; + }; + + export type PublicFileProps = { + isPublic: true; // Clé discriminante + url: string; + }; + } +} export const ShareDialog = memo((props: ShareDialogProps) => { - const { - file, - url, - isOpen, - onClose, - isRequestingUrl, - onRequestUrl, - validityDurationSecondOptions - } = props; + const { isOpen, onClose } = props; const { t } = useTranslation({ ShareDialog }); const { classes } = useStyles(); - const [valueExpirationTime, setValueExpirationTime] = useState( - validityDurationSecondOptions[0] - ); - const isPublic = file.policy === "public"; - return ( - - {t("paragraph current policy", { policy: file.policy })} - - - - {t("paragraph change policy", { policy: file.policy })} - - - {url === undefined ? ( -
- -
- - {isRequestingUrl && ( - - )} -
-
- ) : ( - - ) - } - }} - helperText={t("hint link access", { - policy: file.policy, - expiration: valueExpirationTime.toLocaleString() //TODO - })} - variant="standard" - value={url} - /> - )} - - } + body={isDialogOpen(props) ? : null} title={t("title")} subtitle={ - + isOpen && ( + + ) } buttons={ + {props.isRequestingUrl && ( + + )} + + + ); + })() + : (() => { + assert(url !== undefined); // Assure TypeScript que url est défini ici + return ( + + ) + } + }} + helperText={t("hint link access", { + isPublic, + expiration: undefined // TODO improve + })} + variant="standard" + value={url} + /> + ); + })()} + + ); +}); + +function isDialogOpen(props: ShareDialogProps): props is ShareDialogProps.Open { + return props.isOpen; +} + +function isPrivateFileProps( + props: ShareDialogProps.BodyProps +): props is ShareDialogProps.BodyProps.PrivateFileProps { + return !props.isPublic; +} + const useStyles = tss.withName({ ShareDialog }).create(({ theme }) => ({ body: { display: "flex", @@ -151,17 +186,22 @@ const useStyles = tss.withName({ ShareDialog }).create(({ theme }) => ({ }, createLinkProgress: { position: "absolute" + }, + createLinkButton: { + display: "inline-flex", + alignItems: "center", + justifyContent: "center" } })); const { i18n } = declareComponentKeys< | "title" | "close" | "create and copy link" - | { K: "paragraph current policy"; P: { policy: FileItem["policy"] } } - | { K: "paragraph change policy"; P: { policy: FileItem["policy"] } } + | { K: "paragraph current policy"; P: { isPublic: boolean } } + | { K: "paragraph change policy"; P: { isPublic: boolean } } | { K: "hint link access"; - P: { policy: FileItem["policy"]; expiration: string | undefined }; + P: { isPublic: boolean; expiration: string | undefined }; } | "label input link" >()({