From df47f9b0d0d0d290be3b3eff2965d89a068a836d Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 21 Sep 2021 16:26:59 +0200 Subject: [PATCH 01/19] Add flag to context (cherry picked from commit eaf6f0dc0fef35f7cdf5ea2ef1264d536c4d2e6c) --- packages/files-ui/src/Contexts/FilesApiContext.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/src/Contexts/FilesApiContext.tsx b/packages/files-ui/src/Contexts/FilesApiContext.tsx index c438838790..081d9b09b9 100644 --- a/packages/files-ui/src/Contexts/FilesApiContext.tsx +++ b/packages/files-ui/src/Contexts/FilesApiContext.tsx @@ -34,6 +34,7 @@ type FilesApiContext = { validateMasterPassword: (candidatePassword: string) => Promise encryptedEncryptionKey?: string isMasterPasswordSet: boolean + subscriptionInArrears?: boolean } const FilesApiContext = React.createContext(undefined) @@ -62,6 +63,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp // access tokens const [accessToken, setAccessToken] = useState(undefined) const [secured, setSecured] = useState(undefined) + const [subscriptionInArrears, setSubscriptionInArrears] = useState(undefined) const [refreshToken, setRefreshToken] = useState(undefined) const [decodedRefreshToken, setDecodedRefreshToken] = useState< { exp: number; enckey?: string; mps?: string; uuid: string } | undefined @@ -216,7 +218,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp useEffect(() => { if (accessToken && accessToken.token && filesApiClient) { filesApiClient?.setToken(accessToken.token) - const decodedAccessToken = jwtDecode<{ perm: { secured?: string } }>( + const decodedAccessToken = jwtDecode<{ perm: { secured?: string, files?: string } }>( accessToken.token ) if (decodedAccessToken.perm.secured === "true") { @@ -224,6 +226,11 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp } else { setSecured(false) } + if (decodedAccessToken.perm.files === 'restricted') { + setSubscriptionInArrears(true) + } else { + setSubscriptionInArrears(false) + } } }, [accessToken, filesApiClient]) @@ -308,7 +315,8 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp thresholdKeyLogin, secureThresholdKeyAccount, encryptedEncryptionKey: decodedRefreshToken?.enckey, - isMasterPasswordSet: !!decodedRefreshToken?.mps + isMasterPasswordSet: !!decodedRefreshToken?.mps, + subscriptionInArrears }} > {children} From 84b0f1a754b37170537d34c324bf631b597a4054 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Thu, 23 Sep 2021 21:41:19 +0200 Subject: [PATCH 02/19] restrict functions when api returns restricted flag (cherry picked from commit a7ab5673c44709a23da6a611716e40ac25266623) --- .../Modules/FileBrowsers/CSFFileBrowser.tsx | 16 ++++++++--- .../FileBrowsers/SharedFileBrowser.tsx | 28 +++++++++---------- .../FileBrowsers/SharedFoldersOverview.tsx | 3 +- .../Modules/FileBrowsers/views/FilesList.tsx | 12 ++++++-- .../files-ui/src/Contexts/FilesApiContext.tsx | 10 +++---- packages/files-ui/src/UI-components/Menu.tsx | 2 ++ 6 files changed, 43 insertions(+), 28 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index 1727cbb873..2f88958555 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -25,6 +25,7 @@ import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransf const CSFFileBrowser: React.FC = () => { const { downloadFile, uploadFiles, buckets } = useFiles() + const { accountInArrears } = useFilesApi() const { filesApiClient } = useFilesApi() const { addToast } = useToasts() const [loadingCurrentPath, setLoadingCurrentPath] = useState(false) @@ -92,12 +93,11 @@ const CSFFileBrowser: React.FC = () => { const message = `${ itemToDelete.isFolder ? t`Folder` : t`File` } ${t`deleted successfully`}` - const id = addToast({ + addToast({ title: message, type: "success", testId: "deletion-success" }) - console.log(id) } return Promise.resolve() } catch (error) { @@ -176,19 +176,27 @@ const CSFFileBrowser: React.FC = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return + if (accountInArrears) { + addToast({ + type:'error', + title: 'Unable to upload', + subtitle: 'Oops! You need to pay for this month to upload more content.' + }) + return + } const flattenedFiles = await getFilesFromDataTransferItems(fileItems) const paths = [...new Set(flattenedFiles.map(f => f.filepath))] paths.forEach(p => { uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) }) - }, [uploadFiles, bucket]) + }, [uploadFiles, bucket, accountInArrears, addToast]) const viewFolder = useCallback((cid: string) => { const fileSystemItem = pathContents.find(f => f.cid === cid) if (fileSystemItem && fileSystemItem.content_type === CONTENT_TYPES.Directory) { redirect(ROUTE_LINKS.Drive(getUrlSafePathWithFile(currentPath, fileSystemItem.name))) } - }, [currentPath, pathContents, redirect]) + }, [currentPath, pathContents, redirect, ]) const bulkOperations: IBulkOperations = useMemo(() => ({ [CONTENT_TYPES.Directory]: ["download", "move", "delete"], diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx index 2697dd1b98..f59decb16f 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx @@ -18,10 +18,11 @@ import { useFilesApi } from "../../../Contexts/FilesApiContext" import { useUser } from "../../../Contexts/UserContext" import DragAndDrop from "../../../Contexts/DnDContext" import FilesList from "./views/FilesList" +import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems" const SharedFileBrowser = () => { const { downloadFile, uploadFiles, buckets, refreshBuckets, getStorageSummary } = useFiles() - const { filesApiClient } = useFilesApi() + const { filesApiClient, accountInArrears } = useFilesApi() const { addToast } = useToasts() const [loadingCurrentPath, setLoadingCurrentPath] = useState(false) const [pathContents, setPathContents] = useState([]) @@ -179,23 +180,20 @@ const SharedFileBrowser = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return - let hasFolder = false - for (let i = 0; i < files.length; i++) { - if (fileItems[i].webkitGetAsEntry()?.isDirectory) { - hasFolder = true - } - } - if (hasFolder) { + if (accountInArrears) { addToast({ - title: t`Folder uploads are not supported currently`, - type: "error" + type:'error', + title: 'Unable to upload', + subtitle: 'Oops! You need to pay for this month to upload more content.' }) - } else { - uploadFiles(bucket, files, path) - .then(() => refreshContents()) - .catch(console.error) + return } - }, [addToast, uploadFiles, bucket, refreshContents]) + const flattenedFiles = await getFilesFromDataTransferItems(fileItems) + const paths = [...new Set(flattenedFiles.map(f => f.filepath))] + paths.forEach(p => { + uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) + }) + }, [uploadFiles, bucket, accountInArrears, addToast]) const bulkOperations: IBulkOperations = useMemo(() => ({ [CONTENT_TYPES.Directory]: ["download", "move", "delete"], diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 3e6f46d8b9..912a3acf4c 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -108,7 +108,7 @@ type SortingType = "name" | "size" | "date_uploaded" const SharedFolderOverview = () => { const classes = useStyles() - const { filesApiClient } = useFilesApi() + const { filesApiClient, accountInArrears } = useFilesApi() const { buckets, isLoadingBuckets, refreshBuckets } = useFiles() const [createOrEditSharedFolderMode, setCreateOrEditSharedFolderMode] = useState(undefined) const [bucketToEdit, setBucketToEdit] = useState(undefined) @@ -180,6 +180,7 @@ const SharedFolderOverview = () => { setBucketToEdit(undefined) setCreateOrEditSharedFolderMode("create") }} + disabled={accountInArrears} > Create a Shared Folder diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index e46746314f..b7bfb76324 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -53,6 +53,7 @@ import SharedUsers from "../../../Elements/SharedUsers" import Menu from "../../../../UI-components/Menu" import SharingExplainerModal from "../../../SharingExplainerModal" import { useSharingExplainerModalFlag } from "../hooks/useSharingExplainerModalFlag" +import {useFilesApi} from "../../../../Contexts/FilesApiContext" const baseOperations: FileOperation[] = ["download", "info", "preview", "share"] const readerOperations: FileOperation[] = [...baseOperations, "report"] @@ -312,6 +313,7 @@ const FilesList = ({ isShared = false }: Props) => { const [isReportFileModalOpen, setIsReportFileModalOpen] = useState(false) const [isFileInfoModalOpen, setIsFileInfoModalOpen] = useState(false) const [isShareModalOpen, setIsShareModalOpen] = useState(false) + const { accountInArrears } = useFilesApi() const { heading, @@ -626,7 +628,8 @@ const FilesList = ({ isShared = false }: Props) => { ), - onClick: () => setCreateFolderModalOpen(true) + onClick: () => setCreateFolderModalOpen(true), + disabled: accountInArrears }, { contents: ( @@ -637,10 +640,11 @@ const FilesList = ({ isShared = false }: Props) => { ), - onClick: () => setIsUploadModalOpen(true) + onClick: () => setIsUploadModalOpen(true), + disabled: accountInArrears } ], - [classes.menuIcon]) + [classes.menuIcon, accountInArrears]) const onShare = useCallback((fileInfoPath: string, fileIndex: number) => { if(hasSeenSharingExplainerModal) { @@ -719,6 +723,7 @@ const FilesList = ({ isShared = false }: Props) => { onClick={() => setCreateFolderModalOpen(true)} variant="outline" size="large" + disabled={accountInArrears} > @@ -730,6 +735,7 @@ const FilesList = ({ isShared = false }: Props) => { onClick={() => setIsUploadModalOpen(true)} variant="outline" size="large" + disabled={accountInArrears} > diff --git a/packages/files-ui/src/Contexts/FilesApiContext.tsx b/packages/files-ui/src/Contexts/FilesApiContext.tsx index 081d9b09b9..b89c862f6d 100644 --- a/packages/files-ui/src/Contexts/FilesApiContext.tsx +++ b/packages/files-ui/src/Contexts/FilesApiContext.tsx @@ -34,7 +34,7 @@ type FilesApiContext = { validateMasterPassword: (candidatePassword: string) => Promise encryptedEncryptionKey?: string isMasterPasswordSet: boolean - subscriptionInArrears?: boolean + accountInArrears?: boolean } const FilesApiContext = React.createContext(undefined) @@ -63,7 +63,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp // access tokens const [accessToken, setAccessToken] = useState(undefined) const [secured, setSecured] = useState(undefined) - const [subscriptionInArrears, setSubscriptionInArrears] = useState(undefined) + const [accountInArrears, setAccountInArrears] = useState(undefined) const [refreshToken, setRefreshToken] = useState(undefined) const [decodedRefreshToken, setDecodedRefreshToken] = useState< { exp: number; enckey?: string; mps?: string; uuid: string } | undefined @@ -227,9 +227,9 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp setSecured(false) } if (decodedAccessToken.perm.files === 'restricted') { - setSubscriptionInArrears(true) + setAccountInArrears(true) } else { - setSubscriptionInArrears(false) + setAccountInArrears(false) } } }, [accessToken, filesApiClient]) @@ -316,7 +316,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp secureThresholdKeyAccount, encryptedEncryptionKey: decodedRefreshToken?.enckey, isMasterPasswordSet: !!decodedRefreshToken?.mps, - subscriptionInArrears + accountInArrears: accountInArrears }} > {children} diff --git a/packages/files-ui/src/UI-components/Menu.tsx b/packages/files-ui/src/UI-components/Menu.tsx index eca9deb4e6..de15dbe51a 100644 --- a/packages/files-ui/src/UI-components/Menu.tsx +++ b/packages/files-ui/src/UI-components/Menu.tsx @@ -8,6 +8,7 @@ import { CSFTheme } from "../Themes/types" interface Option { contents: ReactNode onClick?: () => void + disabled?: boolean } interface CustomClasses { @@ -78,6 +79,7 @@ export default function Menu({ icon, options, style, testId }: Props) { }} focusVisibleClassName={clsx(style?.focusVisible)} className={classes.options} + disabled={option.disabled} > {option.contents} From 19c4cec8fc0d959943814942f5851102607a062e Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Fri, 24 Sep 2021 01:17:37 +0200 Subject: [PATCH 03/19] fix share modal when restricted (cherry picked from commit 65a5be8ea1b1ca5af94d5d220b14281ece7141f9) --- .../Modules/FileBrowsers/CSFFileBrowser.tsx | 2 +- .../Components/Modules/FileBrowsers/ShareModal.tsx | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index 2f88958555..aebd8afaa4 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -179,7 +179,7 @@ const CSFFileBrowser: React.FC = () => { if (accountInArrears) { addToast({ type:'error', - title: 'Unable to upload', + title: 'Uploads disabled', subtitle: 'Oops! You need to pay for this month to upload more content.' }) return diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx index 7b7bc01bc5..6bece11936 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx @@ -14,6 +14,7 @@ import { useFileBrowser } from "../../../Contexts/FileBrowserContext" import clsx from "clsx" import { useEffect } from "react" import { nameValidator } from "../../../Utils/validationSchema" +import { useFilesApi } from "../../../Contexts/FilesApiContext" const useStyles = makeStyles( ({ breakpoints, constants, palette, typography, zIndex }: CSFTheme) => { @@ -188,6 +189,7 @@ interface IShareFileProps { const ShareModal = ({ close, file, filePath }: IShareFileProps) => { const classes = useStyles() const { handleCreateSharedFolder } = useCreateOrEditSharedFolder() + const { accountInArrears } = useFilesApi() const [sharedFolderName, setSharedFolderName] = useState("") const { sharedFolderReaders, sharedFolderWriters, handleLookupUser, onNewUsers, usersError, resetUsers } = useLookupSharedFolderUser() const [isUsingCurrentBucket, setIsUsingCurrentBucket] = useState(true) @@ -213,14 +215,16 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => { .filter(buck => buck.type === "share" || buck.type === "csf") // filter out the current bucket .filter(buck => buck.id !== bucket?.id) - // all buckets where the user is reader or writer + // all buckets where the user is owner or writer .filter(buck => !!buck.writers.find((w) => w.uuid === profile.userId) || !!buck.owners.find((o) => o.uuid === profile.userId)) + // filter out CSF and share buckets where user is an owner if their account is restricted + .filter(buck => !(!!accountInArrears && (buck.type === 'csf' || !!buck.owners.find(o => o.uuid === profile.userId)))) .map(buck => ({ label: buck.name || t`Home`, value: buck.id })) } - , [bucket, buckets, profile]) + , [bucket, buckets, profile, accountInArrears]) const hasNoSharedBucket = useMemo(() => bucketsOptions.length === 0, [bucketsOptions.length]) @@ -232,10 +236,10 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => { // if the user has no shared bucket, we default to new folder creation useEffect(() => { - if (hasNoSharedBucket) { + if (hasNoSharedBucket && !accountInArrears) { setIsUsingCurrentBucket(false) } - }, [hasNoSharedBucket]) + }, [hasNoSharedBucket, accountInArrears]) const onNameChange = useCallback((value?: string | number) => { if (value === undefined) return From ff9ed270ccbf679362a5aef0e63606e213f9d3ba Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Sat, 25 Sep 2021 22:28:24 +0200 Subject: [PATCH 04/19] add banner (cherry picked from commit e01a13518c85dda378570a4177390ec50d921df1) --- .../src/Components/Layouts/AppWrapper.tsx | 64 +++++++++++++++---- .../Modules/FileBrowsers/views/FilesList.tsx | 17 +++-- 2 files changed, 63 insertions(+), 18 deletions(-) diff --git a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx index e9da33b95c..198dd37b58 100644 --- a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx +++ b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx @@ -1,19 +1,21 @@ import { useFilesApi } from "../../Contexts/FilesApiContext" -import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" +import { createStyles, ITheme, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import React, { useState } from "react" import { ReactNode } from "react" import clsx from "clsx" -import { CssBaseline } from "@chainsafe/common-components" +import { Button, CssBaseline, Typography, useHistory } from "@chainsafe/common-components" import AppHeader from "./AppHeader" import AppNav from "./AppNav" import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" +import {Trans} from "@lingui/macro" +import {ROUTE_LINKS} from "../FilesRoutes" interface IAppWrapper { children: ReactNode | ReactNode[] } const useStyles = makeStyles( - ({ animation, breakpoints, constants }: ITheme) => { + ({ animation, breakpoints, constants, palette }: ITheme) => { return createStyles({ root: { minHeight: "100vh" @@ -24,7 +26,6 @@ const useStyles = makeStyles( padding: "0", "&.active": { // This moves the content areas based on the size of the nav bar - padding: `${0}px ${constants.contentPadding}px ${0}px ${ Number(constants.navWidth) + Number(constants.contentPadding) @@ -34,33 +35,55 @@ const useStyles = makeStyles( [breakpoints.down("md")]: {} }, content: { + height: "initial", [breakpoints.up("md")]: { height: "100%", minHeight: "100vh", transitionDuration: `${animation.translate}ms`, - padding: 0, "&.active": { - height: "initial", padding: `${constants.contentTopPadding}px 0 0` - } + }, + "&.bottomBanner": { + paddingBottom: 80, + }, }, [breakpoints.down("md")]: { minHeight: "100vh", "&.active": { - height: "initial", padding: `${constants.mobileHeaderHeight}px 0 0` - } + }, + "&.bottomBanner": { + paddingBottom: 110, + }, } - } + }, + accountInArrearsNotification: { + position: 'fixed', + bottom: 0, + backgroundColor: palette.additional["gray"][10], + color: palette.additional['gray'][1], + padding: '16px 24px', + marginLeft: 0, + width: '100vw', + [breakpoints.up("md")]: { + marginLeft: `${constants.navWidth}px`, + width:`calc(100vw - ${constants.navWidth}px)`, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center' + } + }, }) } ) const AppWrapper: React.FC = ({ children }: IAppWrapper) => { const classes = useStyles() + const { desktop } = useThemeSwitcher() const [navOpen, setNavOpen] = useState(false) - const { isLoggedIn, secured } = useFilesApi() + const { isLoggedIn, secured, accountInArrears } = useFilesApi() const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey() + const { redirect } = useHistory() return (
@@ -84,18 +107,33 @@ const AppWrapper: React.FC = ({ children }: IAppWrapper) => { setNavOpen={setNavOpen} />
{children}
+ {accountInArrears && +
+ + You've got a payment due. Until you've settled up, we've placed your account in restricted mode + + +
}
) } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index b7bfb76324..0996ad9166 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -83,7 +83,10 @@ const useStyles = makeStyles( minHeight: `calc(100vh - ${Number(constants.contentTopPadding)}px)`, "&.droppable": { borderColor: palette.primary.main - } + }, + "&.bottomBanner": { + minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, + }, } }, header: { @@ -295,7 +298,7 @@ const useStyles = makeStyles( width: 20, marginRight: constants.generalUnit * 1.5, fill: constants.previewModal.menuItemIconColor - } + }, }) } ) @@ -658,9 +661,13 @@ const FilesList = ({ isShared = false }: Props) => { return (
Date: Mon, 27 Sep 2021 22:06:38 +0200 Subject: [PATCH 05/19] lingui --- packages/files-ui/src/locales/de/messages.po | 19 ++++++++++++++-- packages/files-ui/src/locales/en/messages.po | 19 ++++++++++++++-- packages/files-ui/src/locales/es/messages.po | 19 ++++++++++++++-- packages/files-ui/src/locales/fr/messages.po | 23 ++++++++++++++++---- packages/files-ui/src/locales/no/messages.po | 19 ++++++++++++++-- 5 files changed, 87 insertions(+), 12 deletions(-) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 2553156418..8aa4259967 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -58,6 +58,9 @@ msgstr "Es ist ein Fehler aufgetreten:" msgid "Approve" msgstr "Genehmigen" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "Sicherungsgeheimsatz" @@ -184,6 +187,9 @@ msgstr "Ordner erstellen" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Dunkles Farbschema" @@ -301,8 +307,8 @@ msgstr "Ordner" msgid "Folder name is already in use" msgstr "" -msgid "Folder uploads are not supported currently" -msgstr "" +#~ msgid "Folder uploads are not supported currently" +#~ msgstr "" msgid "Folders" msgstr "Ordner" @@ -337,6 +343,9 @@ msgstr "" msgid "Go back" msgstr "Zurück" +msgid "Go to Payments" +msgstr "" + msgid "Got an issue?" msgstr "" @@ -874,6 +883,9 @@ msgstr "Sie haben noch keinen Benutzernamen festgelegt." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "" +msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" +msgstr "" + msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" msgstr "" @@ -912,3 +924,6 @@ msgstr "{0, plural, one {{1} Datei wird verschlüsselt und hochgeladen} other {{ msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {Sie sind dabei, {1} Artikel zu löschen.} other {Sie sind dabei, {2} Artikel zu löschen.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 982b845b94..7d92f8fe89 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -58,6 +58,9 @@ msgstr "An error occurred:" msgid "Approve" msgstr "Approve" +msgid "Back to plan settings" +msgstr "Back to plan settings" + msgid "Backup secret phrase" msgstr "Backup secret phrase" @@ -184,6 +187,9 @@ msgstr "Create folder" msgid "Create your public username in <0>Settings!" msgstr "Create your public username in <0>Settings!" +msgid "Credit card on file" +msgstr "Credit card on file" + msgid "Dark Theme" msgstr "Dark Theme" @@ -304,8 +310,8 @@ msgstr "Folder" msgid "Folder name is already in use" msgstr "Folder name is already in use" -msgid "Folder uploads are not supported currently" -msgstr "Folder uploads are not supported currently" +#~ msgid "Folder uploads are not supported currently" +#~ msgstr "Folder uploads are not supported currently" msgid "Folders" msgstr "Folders" @@ -340,6 +346,9 @@ msgstr "Give view-only permission to:" msgid "Go back" msgstr "Go back" +msgid "Go to Payments" +msgstr "Go to Payments" + msgid "Got an issue?" msgstr "Got an issue?" @@ -877,6 +886,9 @@ msgstr "You haven't set a username yet." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "You will need to sign a message in your wallet to complete sign in." +msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" +msgstr "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" + msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" msgstr "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" @@ -915,3 +927,6 @@ msgstr "{0, plural, one {Encrypting and uploading {1} file} other {Encrypting an msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "{0} of {1} used ({2}%)" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index e0741762b6..8f55976b51 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -59,6 +59,9 @@ msgstr "" msgid "Approve" msgstr "Aprobar" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" @@ -185,6 +188,9 @@ msgstr "Crear Carpeta" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Tema oscuro" @@ -305,8 +311,8 @@ msgstr "Archivo" msgid "Folder name is already in use" msgstr "" -msgid "Folder uploads are not supported currently" -msgstr "" +#~ msgid "Folder uploads are not supported currently" +#~ msgstr "" msgid "Folders" msgstr "Archivos" @@ -341,6 +347,9 @@ msgstr "" msgid "Go back" msgstr "Regresar" +msgid "Go to Payments" +msgstr "" + msgid "Got an issue?" msgstr "" @@ -878,6 +887,9 @@ msgstr "" msgid "You will need to sign a message in your wallet to complete sign in." msgstr "Deberá firmar un mensaje en su billetera para completar el inicio de sesión." +msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" +msgstr "" + msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" msgstr "" @@ -916,3 +928,6 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index f65049a258..3ada4e31b7 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -59,6 +59,9 @@ msgstr "Une erreur s'est produite :" msgid "Approve" msgstr "Accepter" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "Phrase secrète de sauvegarde" @@ -185,6 +188,9 @@ msgstr "Créer un dossier" msgid "Create your public username in <0>Settings!" msgstr "Créez votre nom d'utilisateur public dans <0>Paramètres !" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Thème sombre" @@ -305,8 +311,8 @@ msgstr "Dossier" msgid "Folder name is already in use" msgstr "Le nom du dossier est déjà utilisé" -msgid "Folder uploads are not supported currently" -msgstr "Le téléversement de dossiers n'est pas actuellement pris en charge" +#~ msgid "Folder uploads are not supported currently" +#~ msgstr "Le téléversement de dossiers n'est pas actuellement pris en charge" msgid "Folders" msgstr "Dossiers" @@ -341,6 +347,9 @@ msgstr "Donner l’accès en lecture seule à :" msgid "Go back" msgstr "Retour" +msgid "Go to Payments" +msgstr "" + msgid "Got an issue?" msgstr "Vous avez un problème ?" @@ -446,8 +455,8 @@ msgstr "Suivant" msgid "Nice to see you again!" msgstr "Ravi de te revoir !" -msgid "No file to download." -msgstr "Aucun fichier à télécharger." +msgid "No Card" +msgstr "" msgid "No file to download." msgstr "Aucun fichier à télécharger." @@ -878,6 +887,9 @@ msgstr "Vous n’avez pas encore défini de nom d’utilisateur." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "Vous devrez signer un message avec votre wallet pour terminer la procédure connexion." +msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" +msgstr "" + msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" msgstr "" @@ -916,3 +928,6 @@ msgstr "{0, plural, one {Chiffrement et téléversement de {1} fichier} other {C msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "{0, plural, one {Vous êtes sur le point de supprimer {1} élément.} other {Vous êtes sur le point de supprimer {2} éléments.}}" + +msgid "{0} of {1} used ({2}%)" +msgstr "" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 5274a443d6..a8f9690da8 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -58,6 +58,9 @@ msgstr "" msgid "Approve" msgstr "Godkjenn" +msgid "Back to plan settings" +msgstr "" + msgid "Backup secret phrase" msgstr "" @@ -184,6 +187,9 @@ msgstr "Opprett mappe" msgid "Create your public username in <0>Settings!" msgstr "" +msgid "Credit card on file" +msgstr "" + msgid "Dark Theme" msgstr "Mørk drakt" @@ -301,8 +307,8 @@ msgstr "Mappe" msgid "Folder name is already in use" msgstr "" -msgid "Folder uploads are not supported currently" -msgstr "" +#~ msgid "Folder uploads are not supported currently" +#~ msgstr "" msgid "Folders" msgstr "Mapper" @@ -337,6 +343,9 @@ msgstr "" msgid "Go back" msgstr "Tilbake" +msgid "Go to Payments" +msgstr "" + msgid "Got an issue?" msgstr "" @@ -874,6 +883,9 @@ msgstr "Du har ikke satt noe brukernavn enda." msgid "You will need to sign a message in your wallet to complete sign in." msgstr "" +msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode" +msgstr "" + msgid "Your first {0} are free, and you’ll get a discount on our monthly plan once you need more than that" msgstr "" @@ -912,3 +924,6 @@ msgstr "" msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}" msgstr "" + +msgid "{0} of {1} used ({2}%)" +msgstr "" From 7acfd1872df294e624517c69bad23b6815849a53 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 00:28:11 +0200 Subject: [PATCH 06/19] move banner to fileList and shared folder overview --- .../Elements/RestrictedModeBanner.tsx | 50 +++++++++++++++++++ .../src/Components/Layouts/AppWrapper.tsx | 48 ++---------------- .../Modules/FileBrowsers/CSFFileBrowser.tsx | 6 +-- .../Modules/FileBrowsers/ShareModal.tsx | 10 ++-- .../FileBrowsers/SharedFileBrowser.tsx | 6 +-- .../FileBrowsers/SharedFoldersOverview.tsx | 43 +++++++++++++--- .../Modules/FileBrowsers/views/FilesList.tsx | 43 +++++++++++++--- .../files-ui/src/Contexts/FilesApiContext.tsx | 10 ++-- 8 files changed, 143 insertions(+), 73 deletions(-) create mode 100644 packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx diff --git a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx new file mode 100644 index 0000000000..83017dbd4d --- /dev/null +++ b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx @@ -0,0 +1,50 @@ +import {Typography,Button, useHistory} from '@chainsafe/common-components' +import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" +import {Trans} from '@lingui/macro' +import React from 'react' +import {CSFTheme} from '../../Themes/types' +import {ROUTE_LINKS} from '../FilesRoutes' + +const useStyles = makeStyles( + ({ breakpoints, constants, palette }: CSFTheme) => { + return createStyles({ + accountRestrictedNotification: { + position: 'fixed', + bottom: 0, + backgroundColor: palette.additional["gray"][10], + color: palette.additional['gray'][1], + padding: '16px 24px', + marginLeft: 0, + width: '100vw', + [breakpoints.up("md")]: { + marginLeft: `${constants.navWidth}px`, + left:0, + width:`calc(100vw - ${constants.navWidth}px)`, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center' + } + }, + }) + } +) + +const RestrictedModeBanner = () => { + const classes = useStyles() + const {desktop} = useThemeSwitcher() + const { redirect } = useHistory() + + return ( +
+ + You've got a payment due. Until you've settled up, we've placed your account in restricted mode + + +
) +} + +export default RestrictedModeBanner \ No newline at end of file diff --git a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx index 198dd37b58..a8a8ec1e04 100644 --- a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx +++ b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx @@ -1,21 +1,20 @@ import { useFilesApi } from "../../Contexts/FilesApiContext" -import { createStyles, ITheme, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" +import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" import React, { useState } from "react" import { ReactNode } from "react" import clsx from "clsx" -import { Button, CssBaseline, Typography, useHistory } from "@chainsafe/common-components" +import { CssBaseline} from "@chainsafe/common-components" import AppHeader from "./AppHeader" import AppNav from "./AppNav" import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" -import {Trans} from "@lingui/macro" -import {ROUTE_LINKS} from "../FilesRoutes" + interface IAppWrapper { children: ReactNode | ReactNode[] } const useStyles = makeStyles( - ({ animation, breakpoints, constants, palette }: ITheme) => { + ({ animation, breakpoints, constants }: ITheme) => { return createStyles({ root: { minHeight: "100vh" @@ -43,34 +42,12 @@ const useStyles = makeStyles( "&.active": { padding: `${constants.contentTopPadding}px 0 0` }, - "&.bottomBanner": { - paddingBottom: 80, - }, }, [breakpoints.down("md")]: { minHeight: "100vh", "&.active": { padding: `${constants.mobileHeaderHeight}px 0 0` }, - "&.bottomBanner": { - paddingBottom: 110, - }, - } - }, - accountInArrearsNotification: { - position: 'fixed', - bottom: 0, - backgroundColor: palette.additional["gray"][10], - color: palette.additional['gray'][1], - padding: '16px 24px', - marginLeft: 0, - width: '100vw', - [breakpoints.up("md")]: { - marginLeft: `${constants.navWidth}px`, - width:`calc(100vw - ${constants.navWidth}px)`, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' } }, }) @@ -79,11 +56,9 @@ const useStyles = makeStyles( const AppWrapper: React.FC = ({ children }: IAppWrapper) => { const classes = useStyles() - const { desktop } = useThemeSwitcher() const [navOpen, setNavOpen] = useState(false) - const { isLoggedIn, secured, accountInArrears } = useFilesApi() + const { isLoggedIn, secured } = useFilesApi() const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey() - const { redirect } = useHistory() return (
@@ -115,25 +90,12 @@ const AppWrapper: React.FC = ({ children }: IAppWrapper) => { !!publicKey && !isNewDevice && !shouldInitializeAccount - }, { - bottomBanner: accountInArrears } )} > {children}
- {accountInArrears && -
- - You've got a payment due. Until you've settled up, we've placed your account in restricted mode - - -
} ) } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index aebd8afaa4..faa3b0cb3d 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -25,7 +25,7 @@ import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransf const CSFFileBrowser: React.FC = () => { const { downloadFile, uploadFiles, buckets } = useFiles() - const { accountInArrears } = useFilesApi() + const { accountRestricted } = useFilesApi() const { filesApiClient } = useFilesApi() const { addToast } = useToasts() const [loadingCurrentPath, setLoadingCurrentPath] = useState(false) @@ -176,7 +176,7 @@ const CSFFileBrowser: React.FC = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return - if (accountInArrears) { + if (accountRestricted) { addToast({ type:'error', title: 'Uploads disabled', @@ -189,7 +189,7 @@ const CSFFileBrowser: React.FC = () => { paths.forEach(p => { uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) }) - }, [uploadFiles, bucket, accountInArrears, addToast]) + }, [uploadFiles, bucket, accountRestricted, addToast]) const viewFolder = useCallback((cid: string) => { const fileSystemItem = pathContents.find(f => f.cid === cid) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx index 6bece11936..1e27ab0a06 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx @@ -189,7 +189,7 @@ interface IShareFileProps { const ShareModal = ({ close, file, filePath }: IShareFileProps) => { const classes = useStyles() const { handleCreateSharedFolder } = useCreateOrEditSharedFolder() - const { accountInArrears } = useFilesApi() + const { accountRestricted } = useFilesApi() const [sharedFolderName, setSharedFolderName] = useState("") const { sharedFolderReaders, sharedFolderWriters, handleLookupUser, onNewUsers, usersError, resetUsers } = useLookupSharedFolderUser() const [isUsingCurrentBucket, setIsUsingCurrentBucket] = useState(true) @@ -218,13 +218,13 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => { // all buckets where the user is owner or writer .filter(buck => !!buck.writers.find((w) => w.uuid === profile.userId) || !!buck.owners.find((o) => o.uuid === profile.userId)) // filter out CSF and share buckets where user is an owner if their account is restricted - .filter(buck => !(!!accountInArrears && (buck.type === 'csf' || !!buck.owners.find(o => o.uuid === profile.userId)))) + .filter(buck => !(!!accountRestricted && (buck.type === 'csf' || !!buck.owners.find(o => o.uuid === profile.userId)))) .map(buck => ({ label: buck.name || t`Home`, value: buck.id })) } - , [bucket, buckets, profile, accountInArrears]) + , [bucket, buckets, profile, accountRestricted]) const hasNoSharedBucket = useMemo(() => bucketsOptions.length === 0, [bucketsOptions.length]) @@ -236,10 +236,10 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => { // if the user has no shared bucket, we default to new folder creation useEffect(() => { - if (hasNoSharedBucket && !accountInArrears) { + if (hasNoSharedBucket && !accountRestricted) { setIsUsingCurrentBucket(false) } - }, [hasNoSharedBucket, accountInArrears]) + }, [hasNoSharedBucket, accountRestricted]) const onNameChange = useCallback((value?: string | number) => { if (value === undefined) return diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx index f59decb16f..2f51b5579f 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx @@ -22,7 +22,7 @@ import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransf const SharedFileBrowser = () => { const { downloadFile, uploadFiles, buckets, refreshBuckets, getStorageSummary } = useFiles() - const { filesApiClient, accountInArrears } = useFilesApi() + const { filesApiClient, accountRestricted } = useFilesApi() const { addToast } = useToasts() const [loadingCurrentPath, setLoadingCurrentPath] = useState(false) const [pathContents, setPathContents] = useState([]) @@ -180,7 +180,7 @@ const SharedFileBrowser = () => { const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => { if (!bucket) return - if (accountInArrears) { + if (accountRestricted) { addToast({ type:'error', title: 'Unable to upload', @@ -193,7 +193,7 @@ const SharedFileBrowser = () => { paths.forEach(p => { uploadFiles(bucket, flattenedFiles.filter(f => f.filepath === p), getPathWithFile(path, p)) }) - }, [uploadFiles, bucket, accountInArrears, addToast]) + }, [uploadFiles, bucket, accountRestricted, addToast]) const bulkOperations: IBulkOperations = useMemo(() => ({ [CONTENT_TYPES.Directory]: ["download", "move", "delete"], diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 912a3acf4c..966e08777a 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -26,6 +26,7 @@ import { SharedFolderModalMode } from "./types" import SharingExplainerModal from "../../SharingExplainerModal" import { useSharingExplainerModalFlag } from "./hooks/useSharingExplainerModalFlag" import { usePageTrack } from "../../../Contexts/PosthogContext" +import RestrictedModeBanner from "../../Elements/RestrictedModeBanner" export const desktopSharedGridSettings = "69px 3fr 120px 190px 150px 45px !important" export const mobileSharedGridSettings = "3fr 80px 45px !important" @@ -38,7 +39,10 @@ const useStyles = makeStyles( position: "relative", [breakpoints.down("md")]: { marginLeft: constants.generalUnit * 2, - marginRight: constants.generalUnit * 2 + marginRight: constants.generalUnit * 2, + "&.bottomBanner": { + paddingBottom: 130, + }, }, [breakpoints.up("md")]: { border: "1px solid transparent", @@ -47,7 +51,11 @@ const useStyles = makeStyles( minHeight: `calc(100vh - ${Number(constants.contentTopPadding)}px)`, "&.droppable": { borderColor: palette.additional["geekblue"][4] - } + }, + "&.bottomBanner": { + minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, + marginBottom: 80, + }, } }, header: { @@ -99,7 +107,24 @@ const useStyles = makeStyles( }, confirmDeletionDialog: { top: "50%" - } + }, + accountRestrictedNotification: { + position: 'fixed', + bottom: 0, + backgroundColor: palette.additional["gray"][10], + color: palette.additional['gray'][1], + padding: '16px 24px', + marginLeft: 0, + width: '100vw', + [breakpoints.up("md")]: { + marginLeft: `${constants.navWidth}px`, + left:0, + width:`calc(100vw - ${constants.navWidth}px)`, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center' + } + }, }) } ) @@ -108,7 +133,7 @@ type SortingType = "name" | "size" | "date_uploaded" const SharedFolderOverview = () => { const classes = useStyles() - const { filesApiClient, accountInArrears } = useFilesApi() + const { filesApiClient, accountRestricted } = useFilesApi() const { buckets, isLoadingBuckets, refreshBuckets } = useFiles() const [createOrEditSharedFolderMode, setCreateOrEditSharedFolderMode] = useState(undefined) const [bucketToEdit, setBucketToEdit] = useState(undefined) @@ -160,10 +185,13 @@ const SharedFolderOverview = () => { const openSharedFolder = useCallback((bucketId: string) => { redirect(ROUTE_LINKS.SharedFolderExplorer(bucketId, "/")) }, [redirect]) + return ( <>
{ setBucketToEdit(undefined) setCreateOrEditSharedFolderMode("create") }} - disabled={accountInArrears} + disabled={accountRestricted} > Create a Shared Folder @@ -295,6 +323,9 @@ const SharedFolderOverview = () => { injectedClass={{ inner: classes.confirmDeletionDialog }} testId="shared-folder-deletion" /> + {accountRestricted && + + } ) } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index 0996ad9166..ff2745a981 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -54,6 +54,7 @@ import Menu from "../../../../UI-components/Menu" import SharingExplainerModal from "../../../SharingExplainerModal" import { useSharingExplainerModalFlag } from "../hooks/useSharingExplainerModalFlag" import {useFilesApi} from "../../../../Contexts/FilesApiContext" +import RestrictedModeBanner from "../../../Elements/RestrictedModeBanner" const baseOperations: FileOperation[] = ["download", "info", "preview", "share"] const readerOperations: FileOperation[] = [...baseOperations, "report"] @@ -74,7 +75,10 @@ const useStyles = makeStyles( position: "relative", [breakpoints.down("md")]: { marginLeft: constants.generalUnit * 2, - marginRight: constants.generalUnit * 2 + marginRight: constants.generalUnit * 2, + "&.bottomBanner": { + marginBottom: 130, + }, }, [breakpoints.up("md")]: { border: "1px solid transparent", @@ -86,6 +90,7 @@ const useStyles = makeStyles( }, "&.bottomBanner": { minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, + marginBottom: 80, }, } }, @@ -299,6 +304,23 @@ const useStyles = makeStyles( marginRight: constants.generalUnit * 1.5, fill: constants.previewModal.menuItemIconColor }, + accountRestrictedNotification: { + position: 'fixed', + bottom: 0, + backgroundColor: palette.additional["gray"][10], + color: palette.additional['gray'][1], + padding: '16px 24px', + marginLeft: 0, + width: '100vw', + [breakpoints.up("md")]: { + marginLeft: `${constants.navWidth}px`, + left:0, + width:`calc(100vw - ${constants.navWidth}px)`, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center' + } + }, }) } ) @@ -316,7 +338,7 @@ const FilesList = ({ isShared = false }: Props) => { const [isReportFileModalOpen, setIsReportFileModalOpen] = useState(false) const [isFileInfoModalOpen, setIsFileInfoModalOpen] = useState(false) const [isShareModalOpen, setIsShareModalOpen] = useState(false) - const { accountInArrears } = useFilesApi() + const { accountRestricted } = useFilesApi() const { heading, @@ -632,7 +654,7 @@ const FilesList = ({ isShared = false }: Props) => { ), onClick: () => setCreateFolderModalOpen(true), - disabled: accountInArrears + disabled: accountRestricted }, { contents: ( @@ -644,10 +666,10 @@ const FilesList = ({ isShared = false }: Props) => { ), onClick: () => setIsUploadModalOpen(true), - disabled: accountInArrears + disabled: accountRestricted } ], - [classes.menuIcon, accountInArrears]) + [classes.menuIcon, accountRestricted]) const onShare = useCallback((fileInfoPath: string, fileIndex: number) => { if(hasSeenSharingExplainerModal) { @@ -660,12 +682,13 @@ const FilesList = ({ isShared = false }: Props) => { }, [hasSeenSharingExplainerModal]) return ( + <>
{ onClick={() => setCreateFolderModalOpen(true)} variant="outline" size="large" - disabled={accountInArrears} + disabled={accountRestricted} > @@ -742,7 +765,7 @@ const FilesList = ({ isShared = false }: Props) => { onClick={() => setIsUploadModalOpen(true)} variant="outline" size="large" - disabled={accountInArrears} + disabled={accountRestricted} > @@ -1121,6 +1144,10 @@ const FilesList = ({ isShared = false }: Props) => { onHide={hideModal} />
+ {accountRestricted && + + } + ) } diff --git a/packages/files-ui/src/Contexts/FilesApiContext.tsx b/packages/files-ui/src/Contexts/FilesApiContext.tsx index b89c862f6d..ca47123af3 100644 --- a/packages/files-ui/src/Contexts/FilesApiContext.tsx +++ b/packages/files-ui/src/Contexts/FilesApiContext.tsx @@ -34,7 +34,7 @@ type FilesApiContext = { validateMasterPassword: (candidatePassword: string) => Promise encryptedEncryptionKey?: string isMasterPasswordSet: boolean - accountInArrears?: boolean + accountRestricted?: boolean } const FilesApiContext = React.createContext(undefined) @@ -63,7 +63,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp // access tokens const [accessToken, setAccessToken] = useState(undefined) const [secured, setSecured] = useState(undefined) - const [accountInArrears, setAccountInArrears] = useState(undefined) + const [accountRestricted, setAccountRestricted] = useState(undefined) const [refreshToken, setRefreshToken] = useState(undefined) const [decodedRefreshToken, setDecodedRefreshToken] = useState< { exp: number; enckey?: string; mps?: string; uuid: string } | undefined @@ -227,9 +227,9 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp setSecured(false) } if (decodedAccessToken.perm.files === 'restricted') { - setAccountInArrears(true) + setAccountRestricted(true) } else { - setAccountInArrears(false) + setAccountRestricted(false) } } }, [accessToken, filesApiClient]) @@ -316,7 +316,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp secureThresholdKeyAccount, encryptedEncryptionKey: decodedRefreshToken?.enckey, isMasterPasswordSet: !!decodedRefreshToken?.mps, - accountInArrears: accountInArrears + accountRestricted: accountRestricted }} > {children} From cd6bd09ce225293593cc1faa3446c99255131713 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 00:58:43 +0200 Subject: [PATCH 07/19] use padding instead of margin --- .../Components/Modules/FileBrowsers/SharedFoldersOverview.tsx | 2 +- .../src/Components/Modules/FileBrowsers/views/FilesList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 966e08777a..6743e14fbf 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -54,7 +54,7 @@ const useStyles = makeStyles( }, "&.bottomBanner": { minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - marginBottom: 80, + paddingBottom: 80, }, } }, diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index ff2745a981..6d34e96fd6 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -77,7 +77,7 @@ const useStyles = makeStyles( marginLeft: constants.generalUnit * 2, marginRight: constants.generalUnit * 2, "&.bottomBanner": { - marginBottom: 130, + paddingBottom: 130, }, }, [breakpoints.up("md")]: { @@ -90,7 +90,7 @@ const useStyles = makeStyles( }, "&.bottomBanner": { minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - marginBottom: 80, + paddingBottom: 80, }, } }, From 24adacb1b38dc1cd1db43705e4e3fcb346bf25d0 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 01:01:13 +0200 Subject: [PATCH 08/19] remove unused class --- .../Modules/FileBrowsers/views/FilesList.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index 6d34e96fd6..7830283818 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -303,24 +303,7 @@ const useStyles = makeStyles( width: 20, marginRight: constants.generalUnit * 1.5, fill: constants.previewModal.menuItemIconColor - }, - accountRestrictedNotification: { - position: 'fixed', - bottom: 0, - backgroundColor: palette.additional["gray"][10], - color: palette.additional['gray'][1], - padding: '16px 24px', - marginLeft: 0, - width: '100vw', - [breakpoints.up("md")]: { - marginLeft: `${constants.navWidth}px`, - left:0, - width:`calc(100vw - ${constants.navWidth}px)`, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' - } - }, + } }) } ) From 89c3e2e2ba63000eecaa7a30a460eea44acad353 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 12:36:35 +0200 Subject: [PATCH 09/19] fix linting --- .../Elements/RestrictedModeBanner.tsx | 42 +- .../src/Components/Layouts/AppWrapper.tsx | 10 +- .../Modules/FileBrowsers/CSFFileBrowser.tsx | 8 +- .../Modules/FileBrowsers/ShareModal.tsx | 2 +- .../FileBrowsers/SharedFileBrowser.tsx | 6 +- .../FileBrowsers/SharedFoldersOverview.tsx | 28 +- .../Modules/FileBrowsers/views/FilesList.tsx | 768 +++++++++--------- .../files-ui/src/Contexts/FilesApiContext.tsx | 4 +- 8 files changed, 434 insertions(+), 434 deletions(-) diff --git a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx index 83017dbd4d..462de179d4 100644 --- a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx +++ b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx @@ -1,48 +1,48 @@ -import {Typography,Button, useHistory} from '@chainsafe/common-components' +import { Typography, Button, useHistory } from "@chainsafe/common-components" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" -import {Trans} from '@lingui/macro' -import React from 'react' -import {CSFTheme} from '../../Themes/types' -import {ROUTE_LINKS} from '../FilesRoutes' +import { Trans } from "@lingui/macro" +import React from "react" +import { CSFTheme } from "../../Themes/types" +import { ROUTE_LINKS } from "../FilesRoutes" const useStyles = makeStyles( ({ breakpoints, constants, palette }: CSFTheme) => { return createStyles({ accountRestrictedNotification: { - position: 'fixed', + position: "fixed", bottom: 0, backgroundColor: palette.additional["gray"][10], - color: palette.additional['gray'][1], - padding: '16px 24px', + color: palette.additional["gray"][1], + padding: "16px 24px", marginLeft: 0, - width: '100vw', + width: "100vw", [breakpoints.up("md")]: { marginLeft: `${constants.navWidth}px`, left:0, width:`calc(100vw - ${constants.navWidth}px)`, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' + display: "flex", + justifyContent: "space-between", + alignItems: "center" } - }, + } }) } ) const RestrictedModeBanner = () => { - const classes = useStyles() - const {desktop} = useThemeSwitcher() - const { redirect } = useHistory() + const classes = useStyles() + const { desktop } = useThemeSwitcher() + const { redirect } = useHistory() - return ( + return (
- You've got a payment due. Until you've settled up, we've placed your account in restricted mode + You've got a payment due. Until you've settled up, we've placed your account in restricted mode -
) } diff --git a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx index a8a8ec1e04..3521445791 100644 --- a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx +++ b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx @@ -3,7 +3,7 @@ import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme" import React, { useState } from "react" import { ReactNode } from "react" import clsx from "clsx" -import { CssBaseline} from "@chainsafe/common-components" +import { CssBaseline } from "@chainsafe/common-components" import AppHeader from "./AppHeader" import AppNav from "./AppNav" import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" @@ -41,15 +41,15 @@ const useStyles = makeStyles( transitionDuration: `${animation.translate}ms`, "&.active": { padding: `${constants.contentTopPadding}px 0 0` - }, + } }, [breakpoints.down("md")]: { minHeight: "100vh", "&.active": { padding: `${constants.mobileHeaderHeight}px 0 0` - }, + } } - }, + } }) } ) @@ -84,7 +84,7 @@ const AppWrapper: React.FC = ({ children }: IAppWrapper) => {
= () => { if (!bucket) return if (accountRestricted) { addToast({ - type:'error', - title: 'Uploads disabled', - subtitle: 'Oops! You need to pay for this month to upload more content.' + type:"error", + title: "Uploads disabled", + subtitle: "Oops! You need to pay for this month to upload more content." }) return } @@ -196,7 +196,7 @@ const CSFFileBrowser: React.FC = () => { if (fileSystemItem && fileSystemItem.content_type === CONTENT_TYPES.Directory) { redirect(ROUTE_LINKS.Drive(getUrlSafePathWithFile(currentPath, fileSystemItem.name))) } - }, [currentPath, pathContents, redirect, ]) + }, [currentPath, pathContents, redirect ]) const bulkOperations: IBulkOperations = useMemo(() => ({ [CONTENT_TYPES.Directory]: ["download", "move", "delete"], diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx index 1e27ab0a06..090032121f 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx @@ -218,7 +218,7 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => { // all buckets where the user is owner or writer .filter(buck => !!buck.writers.find((w) => w.uuid === profile.userId) || !!buck.owners.find((o) => o.uuid === profile.userId)) // filter out CSF and share buckets where user is an owner if their account is restricted - .filter(buck => !(!!accountRestricted && (buck.type === 'csf' || !!buck.owners.find(o => o.uuid === profile.userId)))) + .filter(buck => !(!!accountRestricted && (buck.type === "csf" || !!buck.owners.find(o => o.uuid === profile.userId)))) .map(buck => ({ label: buck.name || t`Home`, value: buck.id diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx index 2f51b5579f..1b8f5808b7 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx @@ -182,9 +182,9 @@ const SharedFileBrowser = () => { if (!bucket) return if (accountRestricted) { addToast({ - type:'error', - title: 'Unable to upload', - subtitle: 'Oops! You need to pay for this month to upload more content.' + type:"error", + title: "Unable to upload", + subtitle: "Oops! You need to pay for this month to upload more content." }) return } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 6743e14fbf..8c91b8d8de 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -41,8 +41,8 @@ const useStyles = makeStyles( marginLeft: constants.generalUnit * 2, marginRight: constants.generalUnit * 2, "&.bottomBanner": { - paddingBottom: 130, - }, + paddingBottom: 130 + } }, [breakpoints.up("md")]: { border: "1px solid transparent", @@ -54,8 +54,8 @@ const useStyles = makeStyles( }, "&.bottomBanner": { minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - paddingBottom: 80, - }, + paddingBottom: 80 + } } }, header: { @@ -109,22 +109,22 @@ const useStyles = makeStyles( top: "50%" }, accountRestrictedNotification: { - position: 'fixed', + position: "fixed", bottom: 0, backgroundColor: palette.additional["gray"][10], - color: palette.additional['gray'][1], - padding: '16px 24px', + color: palette.additional["gray"][1], + padding: "16px 24px", marginLeft: 0, - width: '100vw', + width: "100vw", [breakpoints.up("md")]: { marginLeft: `${constants.navWidth}px`, left:0, width:`calc(100vw - ${constants.navWidth}px)`, - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' + display: "flex", + justifyContent: "space-between", + alignItems: "center" } - }, + } }) } ) @@ -323,9 +323,9 @@ const SharedFolderOverview = () => { injectedClass={{ inner: classes.confirmDeletionDialog }} testId="shared-folder-deletion" /> - {accountRestricted && + {accountRestricted && - } + } ) } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index 7830283818..f3912fcf6a 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -53,7 +53,7 @@ import SharedUsers from "../../../Elements/SharedUsers" import Menu from "../../../../UI-components/Menu" import SharingExplainerModal from "../../../SharingExplainerModal" import { useSharingExplainerModalFlag } from "../hooks/useSharingExplainerModalFlag" -import {useFilesApi} from "../../../../Contexts/FilesApiContext" +import { useFilesApi } from "../../../../Contexts/FilesApiContext" import RestrictedModeBanner from "../../../Elements/RestrictedModeBanner" const baseOperations: FileOperation[] = ["download", "info", "preview", "share"] @@ -77,8 +77,8 @@ const useStyles = makeStyles( marginLeft: constants.generalUnit * 2, marginRight: constants.generalUnit * 2, "&.bottomBanner": { - paddingBottom: 130, - }, + paddingBottom: 130 + } }, [breakpoints.up("md")]: { border: "1px solid transparent", @@ -90,8 +90,8 @@ const useStyles = makeStyles( }, "&.bottomBanner": { minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - paddingBottom: 80, - }, + paddingBottom: 80 + } } }, header: { @@ -666,101 +666,57 @@ const FilesList = ({ isShared = false }: Props) => { return ( <> -
-
- - Drop to upload files - -
- -
- {crumbs && moduleRootPath && ( - redirect(moduleRootPath)} - showDropDown={!desktop} - /> - )} -
-
- + Drop to upload files + + + +
- {heading} - - {isShared && bucket && ( -
- -
- )} -
- {controls && desktop ? ( - <> - - { - permission !== "reader" && ( - <> - - - - ) - } - - ) : ( - controls && !desktop && ( + {crumbs && moduleRootPath && ( + redirect(moduleRootPath)} + showDropDown={!desktop} + /> + )} +
+
+ + {heading} + + {isShared && bucket && ( +
+ +
+ )} +
+ {controls && desktop ? ( <> - } - options={mobileMenuItems} - style={{ focusVisible: classes.focusVisible }} - /> + { + permission !== "reader" && ( + <> + + + + ) + } - ) - )} -
-
- { withSurvey && !isShared && isSurveyBannerVisible - ? - : - } - -
- {selectedItems.length > 0 && ( - <> - {validBulkOps.includes("download") && (selectedItems.length > 1 || selectionContainsAFolder) && ( - - )} - {validBulkOps.includes("move") && ( - - )} - {validBulkOps.includes("recover") && ( - - )} - {validBulkOps.includes("delete") && ( - + ) : ( + controls && !desktop && ( + <> + + } + options={mobileMenuItems} + style={{ focusVisible: classes.focusVisible }} + /> + + ) )} - - )} -
-
- - +
+ { withSurvey && !isShared && isSurveyBannerVisible + ? + : + } + +
+ {selectedItems.length > 0 && ( + <> + {validBulkOps.includes("download") && (selectedItems.length > 1 || selectionContainsAFolder) && ( + + )} + {validBulkOps.includes("move") && ( + + )} + {validBulkOps.includes("recover") && ( + + )} + {validBulkOps.includes("delete") && ( + + )} + + )} +
+
- One sec, getting files ready… - -
- {!items.length - ? ( -
+ - - - No files to show - -
- ) - : browserView === "table" + One sec, getting files ready… + + + {!items.length ? ( - - {desktop && ( - - - - toggleAll()} - testId="select-all" - /> - - - {/* Icon */} - - handleSortToggle("name")} - sortDirection={column === "name" ? direction : undefined} - sortActive={column === "name"} - > - Name - - handleSortToggle("date_uploaded")} - sortDirection={ - column === "date_uploaded" ? direction : undefined + + + No files to show + + + ) + : browserView === "table" + ? ( +
+ {desktop && ( + + + + toggleAll()} + testId="select-all" + /> + + + {/* Icon */} + + handleSortToggle("name")} + sortDirection={column === "name" ? direction : undefined} + sortActive={column === "name"} + > + Name + + handleSortToggle("date_uploaded")} + sortDirection={ + column === "date_uploaded" ? direction : undefined + } + sortActive={column === "date_uploaded"} + > + Date uploaded + + handleSortToggle("size")} + sortDirection={column === "size" ? direction : undefined} + sortActive={column === "size"} + > + Size + + {/* Menu */} + + + )} + + {items.map((file, index) => ( + { + handleRename && (await handleRename(cid, newName)) + setEditing(undefined) + }} + deleteFile={() => { + setSelectedItems([file]) + setIsDeleteModalOpen(true) + }} + viewFolder={handleViewFolder} + moveFile={() => { + setSelectedItems([file]) + setIsMoveFileModalOpen(true) + setMoveModalMode("move") + }} + itemOperations={getItemOperations(file.content_type)} + resetSelectedFiles={resetSelectedItems} + browserView="table" + recoverFile={() => { + setSelectedItems([file]) + setIsMoveFileModalOpen(true) + setMoveModalMode("recover") + }} + reportFile={(filePath: string) => { + setFilePath(filePath) + setIsReportFileModalOpen(true)} } - sortActive={column === "date_uploaded"} - > - Date uploaded - - handleSortToggle("size")} - sortDirection={column === "size" ? direction : undefined} - sortActive={column === "size"} - > - Size - - {/* Menu */} - - - )} - + showFileInfo={(filePath: string) => { + setFilePath(filePath) + setIsFileInfoModalOpen(true) + }} + showPreview={(fileIndex: number) => { + setFileIndex(fileIndex) + setIsPreviewOpen(true) + }} + share={onShare} + /> + ))} + +
+ ) + : ( +
{items.map((file, index) => ( { files={files} selectedCids={selectedCids} handleSelectItem={handleSelectItem} + viewFolder={handleViewFolder} handleAddToSelectedItems={handleAddToSelectedItems} editing={editing} setEditing={setEditing} - handleRename={async (cid: string, newName: string) => { - handleRename && (await handleRename(cid, newName)) + handleRename={async (path: string, newPath: string) => { + handleRename && (await handleRename(path, newPath)) setEditing(undefined) }} deleteFile={() => { setSelectedItems([file]) setIsDeleteModalOpen(true) }} - viewFolder={handleViewFolder} moveFile={() => { setSelectedItems([file]) setIsMoveFileModalOpen(true) @@ -955,146 +1012,89 @@ const FilesList = ({ isShared = false }: Props) => { }} itemOperations={getItemOperations(file.content_type)} resetSelectedFiles={resetSelectedItems} - browserView="table" recoverFile={() => { setSelectedItems([file]) setIsMoveFileModalOpen(true) setMoveModalMode("recover") }} - reportFile={(filePath: string) => { - setFilePath(filePath) + browserView="grid" + reportFile={(fileInfoPath: string) => { + setFilePath(fileInfoPath) setIsReportFileModalOpen(true)} } - showFileInfo={(filePath: string) => { - setFilePath(filePath) + showFileInfo={(fileInfoPath: string) => { + setFilePath(fileInfoPath) setIsFileInfoModalOpen(true) }} + share={onShare} showPreview={(fileIndex: number) => { setFileIndex(fileIndex) setIsPreviewOpen(true) }} - share={onShare} /> ))} - - - ) - : ( -
- {items.map((file, index) => ( - { - handleRename && (await handleRename(path, newPath)) - setEditing(undefined) - }} - deleteFile={() => { - setSelectedItems([file]) - setIsDeleteModalOpen(true) - }} - moveFile={() => { - setSelectedItems([file]) - setIsMoveFileModalOpen(true) - setMoveModalMode("move") - }} - itemOperations={getItemOperations(file.content_type)} - resetSelectedFiles={resetSelectedItems} - recoverFile={() => { - setSelectedItems([file]) - setIsMoveFileModalOpen(true) - setMoveModalMode("recover") - }} - browserView="grid" - reportFile={(fileInfoPath: string) => { - setFilePath(fileInfoPath) - setIsReportFileModalOpen(true)} - } - showFileInfo={(fileInfoPath: string) => { - setFilePath(fileInfoPath) - setIsFileInfoModalOpen(true) +
+ )} + setIsDeleteModalOpen(false)} + accept={handleDeleteFiles} + requestMessage={ + plural(selectedCids.length, { + one: `You are about to delete ${selectedCids.length} item.`, + other: `You are about to delete ${selectedCids.length} items.` + }) + } + rejectText = {t`Cancel`} + acceptText = {t`Confirm`} + acceptButtonProps={{ loading: isDeletingFiles, disabled: isDeletingFiles, testId: "confirm-deletion" }} + rejectButtonProps={{ disabled: isDeletingFiles, testId: "cancel-deletion" }} + injectedClass={{ inner: classes.confirmDeletionDialog }} + onModalBodyClick={(e) => { + e.preventDefault() + e.stopPropagation() + }} + testId="file-deletion" + /> + { + refreshContents && ( + <> + setCreateFolderModalOpen(false)} + /> + setIsUploadModalOpen(false)} + /> + {isMoveFileModalOpen && ( + { + setIsMoveFileModalOpen(false) + setSelectedItems([]) + setMoveModalMode(undefined) }} - share={onShare} - showPreview={(fileIndex: number) => { - setFileIndex(fileIndex) - setIsPreviewOpen(true) + onCancel={() => { + setIsMoveFileModalOpen(false) + setMoveModalMode(undefined) }} + mode={moveModalMode} /> - ))} -
- )} - setIsDeleteModalOpen(false)} - accept={handleDeleteFiles} - requestMessage={ - plural(selectedCids.length, { - one: `You are about to delete ${selectedCids.length} item.`, - other: `You are about to delete ${selectedCids.length} items.` - }) + )} + + ) } - rejectText = {t`Cancel`} - acceptText = {t`Confirm`} - acceptButtonProps={{ loading: isDeletingFiles, disabled: isDeletingFiles, testId: "confirm-deletion" }} - rejectButtonProps={{ disabled: isDeletingFiles, testId: "cancel-deletion" }} - injectedClass={{ inner: classes.confirmDeletionDialog }} - onModalBodyClick={(e) => { - e.preventDefault() - e.stopPropagation() - }} - testId="file-deletion" - /> - { - refreshContents && ( - <> - setCreateFolderModalOpen(false)} - /> - setIsUploadModalOpen(false)} - /> - {isMoveFileModalOpen && ( - { - setIsMoveFileModalOpen(false) - setSelectedItems([]) - setMoveModalMode(undefined) - }} - onCancel={() => { - setIsMoveFileModalOpen(false) - setMoveModalMode(undefined) - }} - mode={moveModalMode} - /> - )} - - ) - } - {isPreviewOpen && files.length && fileIndex !== undefined && ( - 0 ? setPreviousPreview : undefined} - filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : getPathWithFile(currentPath, files[fileIndex].name)} - /> - )} - { filePath && isReportFileModalOpen && + {isPreviewOpen && files.length && fileIndex !== undefined && ( + 0 ? setPreviousPreview : undefined} + filePath={isSearch && getPath ? getPath(files[fileIndex].cid) : getPathWithFile(currentPath, files[fileIndex].name)} + /> + )} + { filePath && isReportFileModalOpen && { @@ -1102,8 +1102,8 @@ const FilesList = ({ isShared = false }: Props) => { setFilePath(undefined) }} /> - } - { filePath && isFileInfoModalOpen && + } + { filePath && isFileInfoModalOpen && { @@ -1111,8 +1111,8 @@ const FilesList = ({ isShared = false }: Props) => { setFilePath(undefined) }} /> - } - { !showExplainerBeforeShare && isShareModalOpen && filePath && fileIndex !== undefined && + } + { !showExplainerBeforeShare && isShareModalOpen && filePath && fileIndex !== undefined && { @@ -1121,16 +1121,16 @@ const FilesList = ({ isShared = false }: Props) => { }} filePath={currentPath} /> - } - -
- {accountRestricted && + } + +
+ {accountRestricted && - } - + } + ) } diff --git a/packages/files-ui/src/Contexts/FilesApiContext.tsx b/packages/files-ui/src/Contexts/FilesApiContext.tsx index ca47123af3..5ed5cf2231 100644 --- a/packages/files-ui/src/Contexts/FilesApiContext.tsx +++ b/packages/files-ui/src/Contexts/FilesApiContext.tsx @@ -218,7 +218,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp useEffect(() => { if (accessToken && accessToken.token && filesApiClient) { filesApiClient?.setToken(accessToken.token) - const decodedAccessToken = jwtDecode<{ perm: { secured?: string, files?: string } }>( + const decodedAccessToken = jwtDecode<{ perm: { secured?: string; files?: string } }>( accessToken.token ) if (decodedAccessToken.perm.secured === "true") { @@ -226,7 +226,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp } else { setSecured(false) } - if (decodedAccessToken.perm.files === 'restricted') { + if (decodedAccessToken.perm.files === "restricted") { setAccountRestricted(true) } else { setAccountRestricted(false) From 9615ec4742cf71f6a3cc8b34c62d13f3fef55e80 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 12:41:39 +0200 Subject: [PATCH 10/19] remove unnecessary css --- .../FileBrowsers/SharedFoldersOverview.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 8c91b8d8de..5bdcb3ccf1 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -107,23 +107,6 @@ const useStyles = makeStyles( }, confirmDeletionDialog: { top: "50%" - }, - accountRestrictedNotification: { - position: "fixed", - bottom: 0, - backgroundColor: palette.additional["gray"][10], - color: palette.additional["gray"][1], - padding: "16px 24px", - marginLeft: 0, - width: "100vw", - [breakpoints.up("md")]: { - marginLeft: `${constants.navWidth}px`, - left:0, - width:`calc(100vw - ${constants.navWidth}px)`, - display: "flex", - justifyContent: "space-between", - alignItems: "center" - } } }) } From 346d2453b4743c0113bbd2e4779458fc387be2c4 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 13:36:42 +0200 Subject: [PATCH 11/19] use constants and left --- .../src/Components/Elements/RestrictedModeBanner.tsx | 5 ++--- .../Modules/FileBrowsers/SharedFoldersOverview.tsx | 6 +++--- .../src/Components/Modules/FileBrowsers/views/FilesList.tsx | 6 +++--- packages/files-ui/src/Themes/Constants.ts | 6 ++++-- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx index 462de179d4..3ac6ac6168 100644 --- a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx +++ b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx @@ -14,11 +14,10 @@ const useStyles = makeStyles( backgroundColor: palette.additional["gray"][10], color: palette.additional["gray"][1], padding: "16px 24px", - marginLeft: 0, + left: 0, width: "100vw", [breakpoints.up("md")]: { - marginLeft: `${constants.navWidth}px`, - left:0, + left: `${constants.navWidth}px`, width:`calc(100vw - ${constants.navWidth}px)`, display: "flex", justifyContent: "space-between", diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index 5bdcb3ccf1..c2fcee15fe 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -41,7 +41,7 @@ const useStyles = makeStyles( marginLeft: constants.generalUnit * 2, marginRight: constants.generalUnit * 2, "&.bottomBanner": { - paddingBottom: 130 + paddingBottom: constants.bottomBannerMobileHeight } }, [breakpoints.up("md")]: { @@ -53,8 +53,8 @@ const useStyles = makeStyles( borderColor: palette.additional["geekblue"][4] }, "&.bottomBanner": { - minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - paddingBottom: 80 + minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + Number(constants.bottomBannerHeight)}px)`, + paddingBottom: constants.bottomBannerHeight } } }, diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index f3912fcf6a..93cb083eb5 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -77,7 +77,7 @@ const useStyles = makeStyles( marginLeft: constants.generalUnit * 2, marginRight: constants.generalUnit * 2, "&.bottomBanner": { - paddingBottom: 130 + paddingBottom: constants.bottomBannerMobileHeight } }, [breakpoints.up("md")]: { @@ -89,8 +89,8 @@ const useStyles = makeStyles( borderColor: palette.primary.main }, "&.bottomBanner": { - minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + 80}px)`, - paddingBottom: 80 + minHeight: `calc(100vh - ${Number(constants.contentTopPadding) + Number(constants.bottomBannerHeight)}px)`, + paddingBottom: constants.bottomBannerHeight } } }, diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts index 11ddd93e5e..f1558e0baf 100644 --- a/packages/files-ui/src/Themes/Constants.ts +++ b/packages/files-ui/src/Themes/Constants.ts @@ -11,7 +11,9 @@ export const UI_CONSTANTS = { topPadding: 8 * 3, mobileNavWidth: 8 * 30, headerTopPadding: 8 * 3, - accountControlsPadding: 8 * 7 + accountControlsPadding: 8 * 7, + bottomBannerHeight: 80, + bottomBannerMobileHeight: 130, } export interface CsfColors extends IConstants { @@ -169,5 +171,5 @@ export interface CsfColors extends IConstants { } cookieBanner: { backgroundColor: string - } + }, } \ No newline at end of file From 711ce8fdfaa52d26b59e6fbfb1eaa0b2aca16013 Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 13:59:08 +0200 Subject: [PATCH 12/19] remove stray comma --- packages/files-ui/src/Themes/Constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/files-ui/src/Themes/Constants.ts b/packages/files-ui/src/Themes/Constants.ts index f1558e0baf..2868d1b13a 100644 --- a/packages/files-ui/src/Themes/Constants.ts +++ b/packages/files-ui/src/Themes/Constants.ts @@ -13,7 +13,7 @@ export const UI_CONSTANTS = { headerTopPadding: 8 * 3, accountControlsPadding: 8 * 7, bottomBannerHeight: 80, - bottomBannerMobileHeight: 130, + bottomBannerMobileHeight: 130 } export interface CsfColors extends IConstants { @@ -171,5 +171,5 @@ export interface CsfColors extends IConstants { } cookieBanner: { backgroundColor: string - }, + } } \ No newline at end of file From 198541904d393f4f634532b91cc9c9c683169545 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Tue, 28 Sep 2021 15:33:31 +0200 Subject: [PATCH 13/19] Update packages/files-ui/src/Components/Layouts/AppWrapper.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- packages/files-ui/src/Components/Layouts/AppWrapper.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx index 3521445791..90d6e5891a 100644 --- a/packages/files-ui/src/Components/Layouts/AppWrapper.tsx +++ b/packages/files-ui/src/Components/Layouts/AppWrapper.tsx @@ -8,7 +8,6 @@ import AppHeader from "./AppHeader" import AppNav from "./AppNav" import { useThresholdKey } from "../../Contexts/ThresholdKeyContext" - interface IAppWrapper { children: ReactNode | ReactNode[] } From 2ca2ba71c7a17323a984f4237b361e1be5e4c8bf Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Tue, 28 Sep 2021 15:35:36 +0200 Subject: [PATCH 14/19] Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx | 6 +++--- .../Components/Modules/FileBrowsers/SharedFileBrowser.tsx | 4 ++-- .../Modules/FileBrowsers/SharedFoldersOverview.tsx | 2 +- packages/files-ui/src/Contexts/FilesApiContext.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx index 6bf337d9d2..56f6d88d0f 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx @@ -179,8 +179,8 @@ const CSFFileBrowser: React.FC = () => { if (accountRestricted) { addToast({ type:"error", - title: "Uploads disabled", - subtitle: "Oops! You need to pay for this month to upload more content." + title: t`Uploads disabled`, + subtitle: t`Oops! You need to pay for this month to upload more content.` }) return } @@ -196,7 +196,7 @@ const CSFFileBrowser: React.FC = () => { if (fileSystemItem && fileSystemItem.content_type === CONTENT_TYPES.Directory) { redirect(ROUTE_LINKS.Drive(getUrlSafePathWithFile(currentPath, fileSystemItem.name))) } - }, [currentPath, pathContents, redirect ]) + }, [currentPath, pathContents, redirect]) const bulkOperations: IBulkOperations = useMemo(() => ({ [CONTENT_TYPES.Directory]: ["download", "move", "delete"], diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx index 1b8f5808b7..54523d8fc6 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx @@ -183,8 +183,8 @@ const SharedFileBrowser = () => { if (accountRestricted) { addToast({ type:"error", - title: "Unable to upload", - subtitle: "Oops! You need to pay for this month to upload more content." + title: t`Unable to upload`, + subtitle: t`Oops! You need to pay for this month to upload more content.` }) return } diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx index c2fcee15fe..033606c183 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx @@ -307,7 +307,7 @@ const SharedFolderOverview = () => { testId="shared-folder-deletion" /> {accountRestricted && - + } ) diff --git a/packages/files-ui/src/Contexts/FilesApiContext.tsx b/packages/files-ui/src/Contexts/FilesApiContext.tsx index 5ed5cf2231..c8f69c6456 100644 --- a/packages/files-ui/src/Contexts/FilesApiContext.tsx +++ b/packages/files-ui/src/Contexts/FilesApiContext.tsx @@ -63,7 +63,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp // access tokens const [accessToken, setAccessToken] = useState(undefined) const [secured, setSecured] = useState(undefined) - const [accountRestricted, setAccountRestricted] = useState(undefined) + const [accountRestricted, setAccountRestricted] = useState(false) const [refreshToken, setRefreshToken] = useState(undefined) const [decodedRefreshToken, setDecodedRefreshToken] = useState< { exp: number; enckey?: string; mps?: string; uuid: string } | undefined @@ -316,7 +316,7 @@ const FilesApiProvider = ({ apiUrl, withLocalStorage = true, children }: FilesAp secureThresholdKeyAccount, encryptedEncryptionKey: decodedRefreshToken?.enckey, isMasterPasswordSet: !!decodedRefreshToken?.mps, - accountRestricted: accountRestricted + accountRestricted }} > {children} From 3d3d7a566a0ad28a3ad9e1822856797778915e55 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Tue, 28 Sep 2021 16:29:17 +0200 Subject: [PATCH 15/19] Update packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> --- .../src/Components/Modules/FileBrowsers/views/FilesList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx index 93cb083eb5..b2e7da0af3 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx @@ -1128,7 +1128,7 @@ const FilesList = ({ isShared = false }: Props) => { /> {accountRestricted && - + } ) From 5fe7f47f60bb0032875dc952cbf6b6255f1d88da Mon Sep 17 00:00:00 2001 From: Michael Yankelev Date: Tue, 28 Sep 2021 16:33:10 +0200 Subject: [PATCH 16/19] make font larger on desktop --- .../files-ui/src/Components/Elements/RestrictedModeBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx index 3ac6ac6168..6c4855ca62 100644 --- a/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx +++ b/packages/files-ui/src/Components/Elements/RestrictedModeBanner.tsx @@ -35,7 +35,7 @@ const RestrictedModeBanner = () => { return (
- + You've got a payment due. Until you've settled up, we've placed your account in restricted mode