Merge branch 'master' into feature/IN-57-migrate-drive-web-to-cloudflare

.env.example

@@ -4,7 +4,6 @@ REACT_APP_STORJ_BRIDGE=
 REACT_APP_STRIPE_PK=
 REACT_APP_STRIPE_TEST_PK=
 REACT_APP_API_URL=
-REACT_APP_PHOTOS_API_URL=
 REACT_APP_PAYMENTS_API_URL=
 GENERATE_SOURCEMAP=
 REACT_APP_MAGIC_IV=

.github/workflows/cd-to-share.yml

@@ -22,7 +22,6 @@ jobs:
       - run: echo REACT_APP_SENTRY_DSN=${{ secrets.REACT_APP_SENTRY_DSN }} >> ./infrastructure/share/share.env
       - run: echo REACT_APP_STORJ_BRIDGE=${{ secrets.REACT_APP_STORJ_BRIDGE }} >> ./infrastructure/share/share.env
       - run: echo REACT_APP_HOSTNAME=${{ secrets.REACT_APP_HOSTNAME }} >> ./infrastructure/share/share.env
-      - run: echo REACT_APP_PHOTOS_API_URL=${{ secrets.REACT_APP_PHOTOS_API_URL }} >> ./infrastructure/share/share.env
       - run: echo REACT_APP_PAYMENTS_API_URL=${{ secrets.REACT_APP_PAYMENTS_API_URL }} >> ./infrastructure/share/share.env
       - run: echo REACT_APP_DRIVE_NEW_API_URL=${{ secrets.REACT_APP_DRIVE_NEW_API_URL }} >> ./infrastructure/share/share.env
       - run: echo REACT_APP_RECAPTCHA_V3=${{ secrets.REACT_APP_RECAPTCHA_V3 }} >> ./infrastructure/share/share.env

.github/workflows/cd-to-staging.yml

@@ -21,7 +21,6 @@ jobs:
       - run: echo REACT_APP_STORJ_BRIDGE=${{ secrets.REACT_APP_STORJ_BRIDGE }} >> ./infrastructure/staging/staging.env
       - run: echo REACT_APP_HOSTNAME=${{ secrets.REACT_APP_HOSTNAME }} >> ./infrastructure/staging/staging.env
       - run: echo REACT_APP_PROXY=${{ secrets.REACT_APP_PROXY }} >> ./infrastructure/staging/staging.env
-      - run: echo REACT_APP_PHOTOS_API_URL=${{ secrets.REACT_APP_PHOTOS_API_URL }} >> ./infrastructure/staging/staging.env
       - run: echo REACT_APP_SENTRY_DSN=${{ secrets.REACT_APP_SENTRY_DSN }} >> ./infrastructure/staging/staging.env
       - run: echo REACT_APP_PAYMENTS_API_URL=${{ secrets.REACT_APP_PAYMENTS_API_URL }} >> ./infrastructure/staging/staging.env
       - run: echo REACT_APP_DRIVE_NEW_API_URL=${{ secrets.REACT_APP_DRIVE_NEW_API_URL }} >> ./infrastructure/staging/staging.env

.github/workflows/ci.yml

@@ -42,7 +42,6 @@ jobs:
       - run: echo REACT_APP_HOSTNAME=${{ secrets.REACT_APP_HOSTNAME }} >> ./.env
       - run: echo REACT_APP_PROXY=${{ secrets.REACT_APP_PROXY }} >> ./.env
       - run: echo REACT_APP_DONT_USE_PROXY=${{ secrets.REACT_APP_DONT_USE_PROXY }} >> ./.env
-      - run: echo REACT_APP_PHOTOS_API_URL=${{ secrets.REACT_APP_PHOTOS_API_URL }} >> ./.env
       - run: echo REACT_APP_SENTRY_DSN=${{ secrets.REACT_APP_SENTRY_DSN }} >> ./.env
       - run: echo REACT_APP_PAYMENTS_API_URL=${{ secrets.REACT_APP_PAYMENTS_API_URL }} >> ./.env
       - run: echo REACT_APP_DRIVE_NEW_API_URL=${{ secrets.REACT_APP_DRIVE_NEW_API_URL }} >> ./.env

package.json

@@ -1,13 +1,13 @@
 {
   "name": "drive-web",
-  "version": "v1.0.279",
+  "version": "v1.0.304",
   "private": true,
   "dependencies": {
     "@headlessui/react": "1.7.5",
     "@iconscout/react-unicons": "^1.1.6",
     "@internxt/inxt-js": "=1.2.21",
     "@internxt/lib": "^1.2.0",
-    "@internxt/sdk": "^1.4.77",
+    "@internxt/sdk": "^1.5.3",
     "@phosphor-icons/react": "^2.0.10",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",
@@ -29,6 +29,7 @@
     "dayjs": "^1.11.7",
     "detect-browser": "^5.3.0",
     "docx-preview": "^0.1.18",
+    "fflate": "^0.8.2",
     "file-saver": "^2.0.5",
     "heic2any": "^0.0.4",
     "history": "^4.10.1",
@@ -46,7 +47,7 @@
     "prettysize": "^2.0.0",
     "query-string": "^6.13.8",
     "react": "^18.2.0",
-    "react-avatar-editor": "^13.0.0",
+    "react-avatar-editor": "^13.0.2",
     "react-bootstrap": "^2.9.0",
     "react-device-detect": "^1.15.0",
     "react-dnd": "^14.0.4",
@@ -61,6 +62,7 @@
     "react-i18next": "^12.1.4",
     "react-image-file-resizer": "^0.4.8",
     "react-infinite-scroll-component": "6.1.0",
+    "react-international-phone": "^4.3.0",
     "react-live-chat-loader": "^2.8.2",
     "react-loading-skeleton": "^2.2.0",
     "react-pdf": "^5.4.0",
@@ -139,7 +141,7 @@
     "@types/node": "^12.0.0",
     "@types/openpgp": "^4.4.18",
     "@types/react": "^18.2.28",
-    "@types/react-avatar-editor": "^12.0.0",
+    "@types/react-avatar-editor": "^13.0.2",
     "@types/react-dom": "^18.2.13",
     "@types/react-redux": "^7.1.17",
     "@types/react-router-dom": "^5.3.3",

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Stand for privacy, switch to Internxt. Internxt's open-source cloud storage services, Internxt Drive, Photos, Send, and more, protect your right to privacy."
+      content="Stand for privacy, switch to Internxt. Internxt's open-source cloud storage services, Internxt Drive, Send, and more, protect your right to privacy."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/App.tsx

@@ -4,9 +4,12 @@ import { Toaster } from 'react-hot-toast';
 import { connect } from 'react-redux';
 import { Redirect, Route, Router, Switch } from 'react-router-dom';
 
+import { Portal } from '@headlessui/react';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { AppView } from 'app/core/types';
 import { FolderPath } from 'app/drive/types';
+import { useAppSelector } from 'app/store/hooks';
+import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
 import i18next, { t } from 'i18next';
 import { pdfjs } from 'react-pdf';
 import { PATH_NAMES, serverPage } from './app/analytics/services/analytics.service';
@@ -21,19 +24,21 @@ import RealtimeService from './app/core/services/socket.service';
 import { AppViewConfig } from './app/core/types';
 import { LRUFilesCacheManager } from './app/database/services/database.service/LRUFilesCacheManager';
 import { LRUFilesPreviewCacheManager } from './app/database/services/database.service/LRUFilesPreviewCacheManager';
-import { LRUPhotosCacheManager } from './app/database/services/database.service/LRUPhotosCacheManager';
-import { LRUPhotosPreviewsCacheManager } from './app/database/services/database.service/LRUPhotosPreviewCacheManager';
 import FileViewerWrapper from './app/drive/components/FileViewer/FileViewerWrapper';
 import Mobile from './app/drive/views/MobileView/MobileView';
+import PreferencesDialog from './app/newSettings/PreferencesDialog';
+import { usePreferencesParamsChange } from './app/newSettings/hooks/usePreferencesParamsChange';
 import NewsletterDialog from './app/newsletter/components/NewsletterDialog/NewsletterDialog';
 import SharingRedirect from './app/routes/Share/ShareRedirection';
+import WorkspacesRedirect from './app/routes/Workspaces/WorkspacesRedirection';
 import { getRoutes } from './app/routes/routes';
 import { domainManager } from './app/share/services/DomainManager';
 import { PreviewFileItem } from './app/share/types';
 import { AppDispatch, RootState } from './app/store';
 import { sessionActions } from './app/store/slices/session';
 import { uiActions } from './app/store/slices/ui';
 import { initializeUserThunk } from './app/store/slices/user';
+import { workspaceThunks } from './app/store/slices/workspaces/workspacesStore';
 import SurveyDialog from './app/survey/components/SurveyDialog/SurveyDialog';
 import { manager } from './app/utils/dnd-utils';
 import useBeforeUnload from './hooks/useBeforeUnload';
@@ -45,6 +50,7 @@ interface AppProps {
   isFileViewerOpen: boolean;
   isNewsletterDialogOpen: boolean;
   isSurveyDialogOpen: boolean;
+  isPreferencesDialogOpen: boolean;
   fileViewerItem: PreviewFileItem | null;
   user: UserSettings | undefined;
   namePath: FolderPath[];
@@ -58,6 +64,7 @@ const App = (props: AppProps): JSX.Element => {
     isFileViewerOpen,
     isNewsletterDialogOpen,
     isSurveyDialogOpen,
+    isPreferencesDialogOpen,
     fileViewerItem,
     dispatch,
   } = props;
@@ -66,11 +73,13 @@ const App = (props: AppProps): JSX.Element => {
   const params = new URLSearchParams(window.location.search);
   const skipSignupIfLoggedIn = params.get('skipSignupIfLoggedIn') === 'true';
   const queryParameters = navigationService.history.location.search;
+  const havePreferencesParamsChanged = usePreferencesParamsChange();
   const routes = getRoutes();
   const isDev = !envService.isProduction();
   const currentRouteConfig: AppViewConfig | undefined = configService.getViewConfig({
     path: navigationService.history.location.pathname,
   });
+  const selectedWorkspace = useAppSelector(workspacesSelectors.getSelectedWorkspace);
 
   useBeforeUnload();
 
@@ -101,13 +110,13 @@ const App = (props: AppProps): JSX.Element => {
     try {
       await LRUFilesCacheManager.getInstance();
       await LRUFilesPreviewCacheManager.getInstance();
-      await LRUPhotosCacheManager.getInstance();
-      await LRUPhotosPreviewsCacheManager.getInstance();
 
       await domainManager.fetchDomains();
 
       RealtimeService.getInstance().init();
 
+      dispatch(workspaceThunks.fetchWorkspaces());
+
       await props.dispatch(
         initializeUserThunk({
           redirectToLogin: !!currentRouteConfig?.auth,
@@ -148,8 +157,10 @@ const App = (props: AppProps): JSX.Element => {
       dispatch(uiActions.setIsFileViewerOpen(false));
       navigationService.push(AppView.Drive);
     } else {
-      navigationService.pushFolder(fileViewerItem?.folderUuid);
+      navigationService.pushFolder(fileViewerItem?.folderUuid, selectedWorkspace?.workspaceUser.workspaceId);
     }
+
+    dispatch(uiActions.setFileViewerItem(null));
   };
 
   if (!isAuthenticated || isInitialized) {
@@ -165,10 +176,17 @@ const App = (props: AppProps): JSX.Element => {
               {t('general.stage.development')}
             </span>
           )}
-
           <Switch>
+            <Route path="/workspaces/:invitationId/:action" component={WorkspacesRedirect} />
             <Route path="/sharings/:sharingId/:action" component={SharingRedirect} />
-            <Redirect from="/account" to="/preferences" />
+            <Redirect from="/s/file/:token([a-z0-9]{20})/:code?" to="/sh/file/:token([a-z0-9]{20})/:code?" />
+            <Redirect from="/s/folder/:token([a-z0-9]{20})/:code?" to="/sh/folder/:token([a-z0-9]{20})/:code?" />
+            <Redirect from="/s/photos/:token([a-z0-9]{20})/:code?" to="/sh/photos/:token([a-z0-9]{20})/:code?" />
+            <Redirect from="/account" to="/?preferences=open&section=account&subsection=account" />
+            <Redirect
+              from="/preferences"
+              to={`/?preferences=open&section=account&subsection=${params.get('tab') ?? 'account'}`}
+            />
             <Redirect from="/app/:section?" to={{ pathname: '/:section?', search: `${queryParameters}` }} />
             {pathName !== 'checkout-plan' && isMobile && isAuthenticated ? (
               <Route path="*">
@@ -179,16 +197,22 @@ const App = (props: AppProps): JSX.Element => {
             )}
           </Switch>
 
-          <Toaster
-            position="bottom-center"
-            containerStyle={{
-              filter: 'drop-shadow(0 32px 40px rgba(18, 22, 25, 0.08))',
-            }}
+          <Portal>
+            <Toaster
+              position="bottom-center"
+              containerStyle={{
+                filter: 'drop-shadow(0 32px 40px rgba(18, 22, 25, 0.08))',
+              }}
+            />
+          </Portal>
+
+          <PreferencesDialog
+            haveParamsChanged={havePreferencesParamsChanged}
+            isPreferencesDialogOpen={isPreferencesDialogOpen}
           />
 
           <NewsletterDialog isOpen={isNewsletterDialogOpen} />
           {isSurveyDialogOpen && <SurveyDialog isOpen={isSurveyDialogOpen} />}
-
           {isFileViewerOpen && fileViewerItem && (
             <FileViewerWrapper file={fileViewerItem} onClose={onCloseFileViewer} showPreview={isFileViewerOpen} />
           )}
@@ -206,6 +230,7 @@ export default connect((state: RootState) => ({
   isFileViewerOpen: state.ui.isFileViewerOpen,
   isNewsletterDialogOpen: state.ui.isNewsletterDialogOpen,
   isSurveyDialogOpen: state.ui.isSurveyDialogOpen,
+  isPreferencesDialogOpen: state.ui.isPreferencesDialogOpen,
   fileViewerItem: state.ui.fileViewerItem,
   user: state.user.user,
   namePath: state.storage.namePath,

src/app/analytics/TrackingPlan.ts

@@ -22,7 +22,7 @@ export namespace TrackingPlan {
     file_upload_id?: string;
     is_multiple: 0 | 1;
     file_name?: string;
-    parent_folder_id: number;
+    parent_folder_id: string;
     is_brave: boolean;
   }
 

src/app/analytics/services/analytics.service.ts

@@ -247,7 +247,7 @@ export function trackFolderCreated(payload: { email: string; platform: DevicePla
   // window.analytics.track(AnalyticsTrackNames.FolderCreated, payload);
 }
 
-export function trackFolderRename(payload: { email: string; fileId: number; platform: DevicePlatform }): void {
+export function trackFolderRename(payload: { email: string; fileId: string; platform: DevicePlatform }): void {
   // window.analytics.track(AnalyticsTrackNames.FolderRename, payload);
 }
 
@@ -257,7 +257,7 @@ export function trackFileRename(payload: { email: string; file_id: number | stri
 
 export function trackMoveItem(
   keyOp: string,
-  payload: { email: string; file_id: number; platform: DevicePlatform },
+  payload: { email: string; file_id?: number; uuid?: string; platform: DevicePlatform },
 ): void {
   // window.analytics.track(`${keyOp}-move`.toLowerCase(), payload);
 }

src/app/auth/components/LogIn/LogIn.tsx

@@ -1,34 +1,36 @@
+import { auth } from '@internxt/lib';
+import QueryString from 'qs';
 import { useEffect, useMemo, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
 import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
-import { auth } from '@internxt/lib';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Helmet } from 'react-helmet-async';
-import QueryString from 'qs';
 
-import { initializeUserThunk, userActions } from 'app/store/slices/user';
+import localStorageService from 'app/core/services/local-storage.service';
+import { twoFactorRegexPattern } from 'app/core/services/validation.service';
 import { RootState } from 'app/store';
 import { useAppDispatch } from 'app/store/hooks';
-import { twoFactorRegexPattern } from 'app/core/services/validation.service';
-import authService, { is2FANeeded, doLogin } from '../../services/auth.service';
-import localStorageService from 'app/core/services/local-storage.service';
+import { initializeUserThunk, userActions } from 'app/store/slices/user';
+import authService, { doLogin, is2FANeeded } from '../../services/auth.service';
 
+import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { WarningCircle } from '@phosphor-icons/react';
-import { planThunks } from 'app/store/slices/plan';
-import { productsThunks } from 'app/store/slices/products';
 import errorService from 'app/core/services/error.service';
-import AppError, { AppView, IFormValues } from 'app/core/types';
 import navigationService from 'app/core/services/navigation.service';
-import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
-import TextInput from '../TextInput/TextInput';
-import PasswordInput from '../PasswordInput/PasswordInput';
-import { referralsThunks } from 'app/store/slices/referrals';
+import AppError, { AppView, IFormValues } from 'app/core/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import shareService from '../../../share/services/share.service';
-import notificationsService, { ToastType } from '../../../notifications/services/notifications.service';
 import Button from 'app/shared/components/Button/Button';
+import { planThunks } from 'app/store/slices/plan';
+import { productsThunks } from 'app/store/slices/products';
+import { referralsThunks } from 'app/store/slices/referrals';
 import { trackAccountUnblockEmailSent } from '../../../analytics/services/analytics.service';
+import workspacesService from '../../../core/services/workspace.service';
+import notificationsService, { ToastType } from '../../../notifications/services/notifications.service';
 import useLoginRedirections from '../../../routes/hooks/Login/useLoginRedirections';
+import shareService from '../../../share/services/share.service';
+import PasswordInput from '../PasswordInput/PasswordInput';
+import TextInput from '../TextInput/TextInput';
+import { workspaceThunks } from 'app/store/slices/workspaces/workspacesStore';
 
 const showNotification = ({ text, isError }: { text: string; isError: boolean }) => {
   notificationsService.show({
@@ -50,17 +52,24 @@ export default function LogIn(): JSX.Element {
   const user = useSelector((state: RootState) => state.user.user) as UserSettings;
   const mnemonic = localStorageService.get('xMnemonic');
 
-  const { isUniversalLinkMode, isSharingInvitation, redirectWithCredentials, handleShareInvitation } =
-    useLoginRedirections({
-      navigateTo(viewId, queryMap) {
-        navigationService.push(viewId, queryMap);
-      },
-      processInvitation: shareService.processInvitation,
-      showNotification,
-    });
+  const {
+    isUniversalLinkMode,
+    isSharingInvitation,
+    redirectWithCredentials,
+    handleShareInvitation,
+    handleWorkspaceInvitation,
+  } = useLoginRedirections({
+    navigateTo(viewId, queryMap) {
+      navigationService.push(viewId, queryMap);
+    },
+    processInvitation: shareService.processInvitation,
+    processWorkspaceInvitation: workspacesService.processInvitation,
+    showNotification,
+  });
 
   useEffect(() => {
     handleShareInvitation();
+    handleWorkspaceInvitation();
   }, []);
 
   useEffect(() => {
@@ -139,6 +148,8 @@ export default function LogIn(): JSX.Element {
           dispatch(planThunks.initializeThunk());
           dispatch(referralsThunks.initializeThunk());
           await dispatch(initializeUserThunk()).unwrap();
+          dispatch(workspaceThunks.fetchWorkspaces());
+          dispatch(workspaceThunks.checkAndSetLocalWorkspace());
         } catch (e: unknown) {
           // PASS
         }