Header titles added

packages/files-ui/src/App.tsx

@@ -18,6 +18,8 @@ import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
 import { NotificationsProvider } from "./Contexts/NotificationsContext"
 import { StylesProvider, createGenerateClassName } from "@material-ui/styles"
+import { HelmetProvider } from "react-helmet-async"
+
 import ErrorModal from "./Components/Modules/ErrorModal"
 
 // making material and jss use one className generator
@@ -79,63 +81,65 @@ const App = () => {
   const directAuthNetwork = (process.env.REACT_APP_DIRECT_AUTH_NETWORK === "mainnet") ? "mainnet" : "testnet"
 
   return (
-    <StylesProvider generateClassName={generateClassName}>
-      <ThemeSwitcher
-        storageKey="csf.themeKey"
-        themes={{ light: lightTheme, dark: darkTheme }}
-      >
-        <ErrorBoundary
-          fallback={ErrorModal}
-          onReset={() => window.location.reload()}
+    <HelmetProvider>
+      <StylesProvider generateClassName={generateClassName}>
+        <ThemeSwitcher
+          storageKey="csf.themeKey"
+          themes={{ light: lightTheme, dark: darkTheme }}
         >
-          <CssBaseline />
-          <LanguageProvider availableLanguages={availableLanguages}>
-            <ToastProvider
-              autoDismiss
-              defaultPosition="bottomRight"
-            >
-              <Web3Provider
-                onboardConfig={onboardConfig}
-                checkNetwork={false}
-                cacheWalletSelection={canUseLocalStorage}
-                tokensToWatch={{
-                  1: [
-                    { address: "0x6b175474e89094c44da98b954eedeac495271d0f" },
-                    { address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" }
-                  ]
-                }}
+          <ErrorBoundary
+            fallback={ErrorModal}
+            onReset={() => window.location.reload()}
+          >
+            <CssBaseline />
+            <LanguageProvider availableLanguages={availableLanguages}>
+              <ToastProvider
+                autoDismiss
+                defaultPosition="bottomRight"
               >
-                <FilesApiProvider
-                  apiUrl={apiUrl}
-                  withLocalStorage={false}
+                <Web3Provider
+                  onboardConfig={onboardConfig}
+                  checkNetwork={false}
+                  cacheWalletSelection={canUseLocalStorage}
+                  tokensToWatch={{
+                    1: [
+                      { address: "0x6b175474e89094c44da98b954eedeac495271d0f" },
+                      { address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" }
+                    ]
+                  }}
                 >
-                  <ThresholdKeyProvider
-                    enableLogging={directAuthNetwork !== "mainnet"}
-                    network={directAuthNetwork}
+                  <FilesApiProvider
+                    apiUrl={apiUrl}
+                    withLocalStorage={false}
                   >
-                    <Router>
-                      <NotificationsProvider>
-                        <UserProvider>
-                          <FilesProvider>
-                            <BillingProvider>
-                              <PosthogProvider>
-                                <AppWrapper>
-                                  <FilesRoutes />
-                                </AppWrapper>
-                              </PosthogProvider>
-                            </BillingProvider>
-                          </FilesProvider>
-                        </UserProvider>
-                      </NotificationsProvider>
-                    </Router>
-                  </ThresholdKeyProvider>
-                </FilesApiProvider>
-              </Web3Provider>
-            </ToastProvider>
-          </LanguageProvider>
-        </ErrorBoundary>
-      </ThemeSwitcher>
-    </StylesProvider>
+                    <ThresholdKeyProvider
+                      enableLogging={directAuthNetwork !== "mainnet"}
+                      network={directAuthNetwork}
+                    >
+                      <Router>
+                        <NotificationsProvider>
+                          <UserProvider>
+                            <FilesProvider>
+                              <BillingProvider>
+                                <PosthogProvider>
+                                  <AppWrapper>
+                                    <FilesRoutes />
+                                  </AppWrapper>
+                                </PosthogProvider>
+                              </BillingProvider>
+                            </FilesProvider>
+                          </UserProvider>
+                        </NotificationsProvider>
+                      </Router>
+                    </ThresholdKeyProvider>
+                  </FilesApiProvider>
+                </Web3Provider>
+              </ToastProvider>
+            </LanguageProvider>
+          </ErrorBoundary>
+        </ThemeSwitcher>
+      </StylesProvider>
+    </HelmetProvider>
   )
 }
 

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -6,12 +6,12 @@ import { useFilesApi }  from "../Contexts/FilesApiContext"
 import DrivePage from "./Pages/DrivePage"
 import SearchPage from "./Pages/SearchPage"
 import BinPage from "./Pages/BinPage"
-import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
 import ShareFilesPage from "./Pages/SharedFilesPage"
-import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview"
+import SharedFoldersPage from "./Pages/SharedFoldersPage"
 import BillingHistory from "./Pages/BillingHistory"
-import { NonceResponsePermission } from "@chainsafe/files-api-client"
 import LinkSharingLanding from "./Pages/LinkSharingLanding"
+import { NonceResponsePermission } from "@chainsafe/files-api-client"
+import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
 
 export const SETTINGS_BASE = "/settings"
 export const LINK_SHARING_BASE = "/link-sharing"
@@ -76,7 +76,7 @@ const FilesRoutes = () => {
         exact
         path={ROUTE_LINKS.SharedFolders}
         isAuthorized={isAuthorized}
-        component={SharedFoldersOverview}
+        component={SharedFoldersPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute

packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx

@@ -24,6 +24,7 @@ import { DISMISSED_SURVEY_KEY } from "../../SurveyBanner"
 import { FileBrowserContext } from "../../../Contexts/FileBrowserContext"
 import { parseFileContentResponse } from "../../../Utils/Helpers"
 import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems"
+import { Helmet } from "react-helmet-async"
 
 const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
   const { downloadFile, uploadFiles, buckets } = useFiles()
@@ -156,6 +157,10 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
       path: joinArrayOfPaths(arrayOfPaths.slice(0, index + 1))
     }}), [arrayOfPaths, redirect])
 
+  const currentFolder = useMemo(() => {
+    return !!arrayOfPaths.length && arrayOfPaths[arrayOfPaths.length - 1]
+  }, [arrayOfPaths])
+
   const handleUploadOnDrop = useCallback(async (files: File[], fileItems: DataTransferItemList, path: string) => {
     if (!bucket) return
 
@@ -221,6 +226,11 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
         itemOperations,
         withSurvey: showSurvey && olderThanOneWeek
       }}>
+      {!!currentFolder &&
+        <Helmet>
+          <title>{currentFolder} - Chainsafe Files</title>
+        </Helmet>
+      }
       <DragAndDrop>
         <FilesList />
       </DragAndDrop>

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx

@@ -23,6 +23,7 @@ import FilesList from "./views/FilesList"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
 import getFilesFromDataTransferItems from "../../../Utils/getFilesFromDataTransferItems"
+import { Helmet } from "react-helmet-async"
 
 const useStyles = makeStyles(({ constants, palette }: CSFTheme) =>
   createStyles({
@@ -87,6 +88,9 @@ const SharedFileBrowser = () => {
       }
     })
   }), [arrayOfPaths, bucket, redirect])
+  const currentFolder = useMemo(() => {
+    return !!arrayOfPaths.length && arrayOfPaths[arrayOfPaths.length - 1]
+  }, [arrayOfPaths])
 
   const refreshContents = useCallback((showLoading?: boolean) => {
     if (!bucket) return
@@ -308,6 +312,11 @@ const SharedFileBrowser = () => {
         itemOperations,
         withSurvey: false
       }}>
+      {(!!currentFolder || bucket.name) &&
+        <Helmet>
+          <title>{currentFolder || bucket.name} - Chainsafe Files</title>
+        </Helmet>
+      }
       <DragAndDrop>
         <FilesList isShared/>
       </DragAndDrop>

packages/files-ui/src/Components/Pages/BillingHistory.tsx

@@ -2,9 +2,10 @@ import React, { useState } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../Themes/types"
 import { Typography } from "@chainsafe/common-components"
-import { Trans } from "@lingui/macro"
+import { Trans, t } from "@lingui/macro"
 import InvoiceLines from "../Elements/InvoiceLines"
 import PayInvoiceModal from "../Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal"
+import { Helmet } from "react-helmet-async"
 
 const useStyles = makeStyles(
   ({ constants, breakpoints }: CSFTheme) =>
@@ -34,20 +35,25 @@ const BillingHistory = () => {
   const [invoiceToPay, setInvoiceToPay] = useState<string | undefined>()
 
   return (
-    <div className={classes.root}>
-      <Typography
-        className={classes.heading}
-        variant="h1"
-        component="p"
-      >
-        <Trans>Billing history</Trans>
-      </Typography>
-      <InvoiceLines payInvoice={(invoiceId) => setInvoiceToPay(invoiceId)} />
-      {invoiceToPay && <PayInvoiceModal
-        invoiceId={invoiceToPay}
-        onClose={() => setInvoiceToPay(undefined)}
-      />}
-    </div>
+    <>
+      <Helmet>
+        <title>{t`Billing history`} - Chainsafe Files</title>
+      </Helmet>
+      <div className={classes.root}>
+        <Typography
+          className={classes.heading}
+          variant="h1"
+          component="p"
+        >
+          <Trans>Billing history</Trans>
+        </Typography>
+        <InvoiceLines payInvoice={(invoiceId) => setInvoiceToPay(invoiceId)} />
+        {invoiceToPay && <PayInvoiceModal
+          invoiceId={invoiceToPay}
+          onClose={() => setInvoiceToPay(undefined)}
+        />}
+      </div>
+    </>
   )
 }
 

packages/files-ui/src/Components/Pages/BinPage.tsx

@@ -1,11 +1,18 @@
 import React from "react"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import BinFileBrowser from "../Modules/FileBrowsers/BinFileBrowser"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
 
 const BinPage = () => {
   usePageTrack()
 
-  return <BinFileBrowser />
+  return <>
+    <Helmet>
+      <title>{t`Bin`} - Chainsafe Files</title>
+    </Helmet>
+    <BinFileBrowser />
+  </>
 }
 
 export default BinPage

packages/files-ui/src/Components/Pages/DrivePage.tsx

@@ -1,11 +1,18 @@
 import React from "react"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import CSFFileBrowser from "../Modules/FileBrowsers/CSFFileBrowser"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
 
 const DrivePage = () => {
   usePageTrack()
 
-  return <CSFFileBrowser />
+  return <>
+    <Helmet>
+      <title>{t`Home`} - Chainsafe Files</title>
+    </Helmet>
+    <CSFFileBrowser />
+  </>
 }
 
 export default DrivePage

packages/files-ui/src/Components/Pages/LinkSharingLanding.tsx

@@ -1,11 +1,18 @@
 import React from "react"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import LinkSharingModule from "../Modules/LinkSharingModule"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
 
 const LinkSharingLanding = () => {
   usePageTrack()
 
-  return <LinkSharingModule/>
+  return <>
+    <Helmet>
+      <title>{t`Shared link`} - Chainsafe Files</title>
+    </Helmet>
+    <LinkSharingModule/>
+  </>
 }
 
 export default LinkSharingLanding

packages/files-ui/src/Components/Pages/SearchPage.tsx

@@ -1,11 +1,18 @@
 import React from "react"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import SearchFileBrowser from "../Modules/FileBrowsers/SearchFileBrowser"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
 
 const SearchPage = () => {
   usePageTrack()
 
-  return <SearchFileBrowser />
+  return <>
+    <Helmet>
+      <title>{t`Search results`} - Chainsafe Files</title>
+    </Helmet>
+    <SearchFileBrowser />
+  </>
 }
 
 export default SearchPage

packages/files-ui/src/Components/Pages/SettingsPage.tsx

@@ -1,11 +1,18 @@
 import React from "react"
 import { usePageTrack } from "../../Contexts/PosthogContext"
 import Settings from "../Modules/Settings"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
 
 const SettingsPage = () => {
   usePageTrack()
 
-  return <Settings />
+  return <>
+    <Helmet>
+      <title>{t`Settings`} - Chainsafe Files</title>
+    </Helmet>
+    <Settings />
+  </>
 }
 
 export default SettingsPage

packages/files-ui/src/Components/Pages/SharedFoldersPage.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { usePageTrack } from "../../Contexts/PosthogContext"
+import SharedFoldersOverview from "../Modules/FileBrowsers/SharedFoldersOverview"
+import { Helmet } from "react-helmet-async"
+import { t } from "@lingui/macro"
+
+const SharedFoldersPage = () => {
+  usePageTrack()
+
+  return <>
+    <Helmet>
+      <title>{t`Shared folders`} - Chainsafe Files</title>
+    </Helmet>
+    <SharedFoldersOverview />
+  </>
+}
+
+export default SharedFoldersPage

packages/files-ui/src/locales/de/messages.po

@@ -853,6 +853,9 @@ msgstr ""
 msgid "Shared folders"
 msgstr ""
 
+msgid "Shared link"
+msgstr ""
+
 msgid "Shared with"
 msgstr ""