Web: Merged 'People' module with 'Client' and fixed paths

frontend.code-workspace

@@ -8,14 +8,6 @@
       "name": "📦 @docspace/components",
       "path": "packages\\components"
     },
-    {
-      "name": "🚀 @docspace/files",
-      "path": "packages\\files"
-    },
-    {
-      "name": "🚀 @docspace/people",
-      "path": "packages\\people"
-    },
     {
       "name": "☁️ @docspace/client",
       "path": "packages\\client"

packages/client/package.json

@@ -44,7 +44,10 @@
     "firebase": "^8.10.0",
     "react-markdown": "^7.0.1",
     "react-smartbanner": "^5.1.4",
-    "react-string-format": "^0.1.4"
+    "react-string-format": "^0.1.4",
+    "copy-to-clipboard": "^3.3.1",
+    "file-saver": "^2.0.5",
+    "react-hotkeys-hook": "^3.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",

packages/client/src/Shell.jsx

@@ -9,7 +9,7 @@ import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
 import Layout from "./components/Layout";
 import ScrollToTop from "./components/Layout/ScrollToTop";
 import history from "@docspace/common/history";
-import Toast from "@appserver/components/toast";
+import Toast from "@docspace/components/toast";
 import toastr from "studio/toastr";
 import { combineUrl, updateTempContent } from "@docspace/common/utils";
 import { Provider as MobxProvider } from "mobx-react";
@@ -69,7 +69,7 @@ const Settings = React.lazy(() => import("./components/pages/Settings"));
 const ComingSoon = React.lazy(() => import("./components/pages/ComingSoon"));
 const Confirm =
   !IS_PERSONAL && React.lazy(() => import("./components/pages/Confirm"));
-const MyProfile = React.lazy(() => import("people/MyProfile"));
+const MyProfile = React.lazy(() => import("./pages/My"));
 const EnterCode = !IS_PERSONAL && React.lazy(() => import("login/codeLogin"));
 const InvalidError = React.lazy(() =>
   import("./components/pages/Errors/Invalid")

packages/client/src/components/dialogs/DialogsWrapper/index.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import AboutDialog from "../../../components/pages/About/AboutDialog";
+import DebugInfoDialog from "../../../components/pages/DebugInfo";
+
+const DialogsWrapper = (props) => {
+  const {
+    t,
+    isAboutDialogVisible,
+    setIsAboutDialogVisible,
+    personal,
+    buildVersionInfo,
+    isDebugDialogVisible,
+    setIsDebugDialogVisible,
+  } = props;
+
+  return (
+    <>
+      <AboutDialog
+        t={t}
+        visible={isAboutDialogVisible}
+        onClose={() => setIsAboutDialogVisible(false)}
+        personal={personal}
+        buildVersionInfo={buildVersionInfo}
+      />
+      <DebugInfoDialog
+        visible={isDebugDialogVisible}
+        onClose={() => setIsDebugDialogVisible(false)}
+      />
+    </>
+  );
+};
+
+export default inject(({ auth, profileActionsStore }) => {
+  const { settingsStore } = auth;
+  const { personal, buildVersionInfo } = settingsStore;
+  const {
+    isAboutDialogVisible,
+    setIsAboutDialogVisible,
+    isDebugDialogVisible,
+    setIsDebugDialogVisible,
+  } = profileActionsStore;
+
+  return {
+    personal,
+    buildVersionInfo,
+    isAboutDialogVisible,
+    setIsAboutDialogVisible,
+    isDebugDialogVisible,
+    setIsDebugDialogVisible,
+  };
+})(observer(DialogsWrapper));

packages/client/src/components/dialogs/index.js

@@ -7,6 +7,19 @@ import ConnectDialog from "./ConnectDialog";
 import ThirdPartyMoveDialog from "./ThirdPartyMoveDialog";
 import ThirdPartyDialog from "./ThirdPartyDialog";
 import ConflictResolveDialog from "./ConflictResolveDialog";
+import ChangeEmailDialog from "./ChangeEmailDialog";
+import ChangePasswordDialog from "./ChangePasswordDialog";
+import ChangePhoneDialog from "./ChangePhoneDialog";
+import DeleteProfileEverDialog from "./DeleteProfileEverDialog";
+import DeleteSelfProfileDialog from "./DeleteSelfProfileDialog";
+import DeleteUsersDialog from "./DeleteUsersDialog";
+import InviteDialog from "./InviteDialog";
+import SendInviteDialog from "./SendInviteDialog";
+import ChangeUserStatusDialog from "./ChangeUserStatusDialog";
+import ChangeUserTypeDialog from "./ChangeUserTypeDialog";
+import DataLossWarningDialog from "./DataLossWarningDialog";
+import ResetApplicationDialog from "./ResetApplicationDialog";
+import BackupCodesDialog from "./BackupCodesDialog";
 
 export {
   EmptyTrashDialog,
@@ -18,4 +31,17 @@ export {
   ThirdPartyMoveDialog,
   ThirdPartyDialog,
   ConflictResolveDialog,
+  ChangeEmailDialog,
+  ChangePasswordDialog,
+  ChangePhoneDialog,
+  DeleteProfileEverDialog,
+  DeleteSelfProfileDialog,
+  DeleteUsersDialog,
+  InviteDialog,
+  SendInviteDialog,
+  ChangeUserStatusDialog,
+  ChangeUserTypeDialog,
+  DataLossWarningDialog,
+  ResetApplicationDialog,
+  BackupCodesDialog,
 };

packages/client/src/components/pages/Confirm/sub-components/changeEmail.js

@@ -19,7 +19,7 @@ class ChangeEmail extends React.PureComponent {
           tryRedirectTo(
             combineUrl(
               AppServerConfig.proxyURL,
-              `/products/people/view/@self?email_change=success`
+              `/accounts/view/@self?email_change=success`
             )
           );
         })
@@ -40,7 +40,7 @@ class ChangeEmail extends React.PureComponent {
           tryRedirectTo(
             combineUrl(
               AppServerConfig.proxyURL,
-              `/products/people/view/@self?email_change=success`
+              `/accounts/view/@self?email_change=success`
             )
           );
         })

packages/client/src/components/pages/Settings/categories/security/access-rights/admins.js

@@ -20,11 +20,11 @@ import SearchInput from "@docspace/components/search-input";
 import RequestLoader from "@docspace/components/request-loader";
 import Loaders from "@docspace/common/components/Loaders";
 import EmptyScreenContainer from "@docspace/components/empty-screen-container";
-import PeopleSelector from "people/PeopleSelector";
+import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
 
 import { inject, observer } from "mobx-react";
 
-import { getUserRole } from "@docspace/people/src/helpers/people-helpers";
+import { getUserRole } from "@docspace/client/src/helpers/people-helpers";
 import { getNewModulesList } from "../../../utils";
 
 import isEmpty from "lodash/isEmpty";

packages/client/src/components/pages/Settings/categories/security/access-rights/owner.js

@@ -9,7 +9,7 @@ import Avatar from "@docspace/components/avatar";
 import Link from "@docspace/components/link";
 import toastr from "@docspace/components/toast/toastr";
 import HelpButton from "@docspace/components/help-button";
-import PeopleSelector from "@docspace/people/src/components/PeopleSelector";
+import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
 import isEmpty from "lodash/isEmpty";
 import { inject } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";
@@ -98,7 +98,7 @@ const getFormattedDepartments = (departments) => {
 const getGroupLink = (department) => {
   return combineUrl(
     AppServerConfig.proxyURL,
-    "/products/people/filter?group=",
+    "/accounts/filter?group=",
     department.id
   );
 };

packages/client/src/components/panels/AddGroupsPanel/index.js

@@ -6,7 +6,7 @@ import Heading from "@docspace/components/heading";
 import Aside from "@docspace/components/aside";
 import IconButton from "@docspace/components/icon-button";
 import { ShareAccessRights } from "@docspace/common/constants";
-import GroupSelector from "people/GroupSelector";
+import GroupSelector from "@docspace/client/src/components/GroupSelector";
 import { withTranslation } from "react-i18next";
 import {
   StyledAddGroupsPanel,

packages/client/src/components/panels/AddUsersPanel/index.js

@@ -6,7 +6,7 @@ import Heading from "@docspace/components/heading";
 import Aside from "@docspace/components/aside";
 import IconButton from "@docspace/components/icon-button";
 import { ShareAccessRights } from "@docspace/common/constants";
-import PeopleSelector from "people/PeopleSelector";
+import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
 import { withTranslation } from "react-i18next";
 import {
   StyledAddUsersPanelPanel,

packages/client/src/components/panels/ChangeOwnerPanel/OwnerSelector.js

@@ -1,5 +1,5 @@
 import React from "react";
-import PeopleSelector from "people/PeopleSelector";
+import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
 import Aside from "@docspace/components/aside";
 import Backdrop from "@docspace/components/backdrop";
 import Heading from "@docspace/components/heading";

packages/client/src/helpers/constants.js

@@ -31,3 +31,7 @@ export const ValidationResult = Object.freeze({
   Invalid: 1,
   Expired: 2,
 });
+
+export const GUID_EMPTY = "00000000-0000-0000-0000-000000000000";
+export const ID_NO_GROUP_MANAGER = "4a515a15-d4d6-4b8e-828e-e0586f18f3a3";
+export const ADS_TIMEOUT = 300000; // 5 min

packages/client/src/helpers/people-helpers.js

@@ -45,62 +45,62 @@ export const getUserContactsPattern = () => {
       },
       {
         type: "phone",
-        icon: "/products/people/images/phone.react.svg",
+        icon: "/images/phone.react.svg",
         link: "tel:{0}",
       },
       {
         type: "mobphone",
-        icon: "/products/people/images/mobile.react.svg",
+        icon: "/images/mobile.react.svg",
         link: "tel:{0}",
       },
       {
         type: "gmail",
-        icon: "/products/people/images/gmail.react.svg",
+        icon: "/images/gmail.react.svg",
         link: "mailto:{0}",
       },
       {
         type: "skype",
-        icon: "/products/people/images/skype.react.svg",
+        icon: "/images/skype.react.svg",
         link: "skype:{0}?userinfo",
       },
-      { type: "msn", icon: "/products/people/images/windows.msn.react.svg" },
+      { type: "msn", icon: "/images/windows.msn.react.svg" },
       {
         type: "icq",
-        icon: "/products/people/images/icq.react.svg",
+        icon: "/images/icq.react.svg",
         link: "https://www.icq.com/people/{0}",
       },
-      { type: "jabber", icon: "/products/people/images/jabber.react.svg" },
-      { type: "aim", icon: "/products/people/images/aim.react.svg" },
+      { type: "jabber", icon: "/images/jabber.react.svg" },
+      { type: "aim", icon: "/images/aim.react.svg" },
     ],
     social: [
       {
         type: "facebook",
-        icon: "/products/people/images/share.facebook.react.svg",
+        icon: "/images/share.facebook.react.svg",
         link: "https://facebook.com/{0}",
       },
       {
         type: "livejournal",
-        icon: "/products/people/images/livejournal.react.svg",
+        icon: "/images/livejournal.react.svg",
         link: "https://{0}.livejournal.com",
       },
       {
         type: "myspace",
-        icon: "/products/people/images/myspace.react.svg",
+        icon: "/images/myspace.react.svg",
         link: "https://myspace.com/{0}",
       },
       {
         type: "twitter",
-        icon: "/products/people/images/share.twitter.react.svg",
+        icon: "/images/share.twitter.react.svg",
         link: "https://twitter.com/{0}",
       },
       {
         type: "blogger",
-        icon: "/products/people/images/blogger.react.svg",
+        icon: "/images/blogger.react.svg",
         link: "https://{0}.blogspot.com",
       },
       {
         type: "yahoo",
-        icon: "/products/people/images/yahoo.react.svg",
+        icon: "/images/yahoo.react.svg",
         link: "mailto:{0}@yahoo.com",
       },
     ],

packages/client/src/pages/Files.jsx

@@ -30,6 +30,7 @@ import {
 } from "../components/Article";
 import FormGallery from "./FormGallery";
 import GlobalEvents from "../components/GlobalEvents";
+import Accounts from "./People";
 
 const { proxyURL } = AppServerConfig;
 const homepage = config.homepage;
@@ -65,8 +66,6 @@ window.AppServer.files = {
 
 const Error404 = React.lazy(() => import("studio/Error404"));
 
-const Accounts = () => <div>Accounts</div>;
-
 const FilesArticle = React.memo(({ history }) => {
   const isFormGallery = history.location.pathname
     .split("/")
@@ -93,7 +92,11 @@ const FilesSection = React.memo(() => {
   return (
     <Switch>
       <PrivateRoute exact path={SETTINGS_URL} component={Settings} />
-      <PrivateRoute exact path={ACCOUNTS_URL} component={Accounts} />
+      <PrivateRoute
+        exact
+        path={["/accounts", "/accounts/filter"]}
+        component={Accounts}
+      />
       {/*<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />*/}
       <PrivateRoute path={PRIVATE_ROOMS_URL} component={PrivateRoomsPage} />
       <PrivateRoute exact path={HOME_URL} component={Home} />

packages/client/src/pages/GroupAction/Section/Body/index.js

@@ -8,7 +8,7 @@ import { tablet } from "@docspace/components/utils/device";
 
 import toastr from "studio/toastr";
 import Loaders from "@docspace/common/components/Loaders";
-//import PeopleSelector from "people/PeopleSelector";
+//import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
 import PeopleSelector from "../../../../components/PeopleSelector";
 import { GUID_EMPTY } from "../../../../helpers/constants";
 import PropTypes from "prop-types";

packages/client/src/pages/People.jsx

@@ -1,62 +1,66 @@
 import React, { useEffect } from "react";
 import { Provider as PeopleProvider, inject, observer } from "mobx-react";
 import { Redirect, Switch } from "react-router-dom";
-import PeopleStore from "./store/PeopleStore";
+import PeopleStore from "../store/PeopleStore";
 import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
 import toastr from "studio/toastr";
 import PrivateRoute from "@docspace/common/components/PrivateRoute";
 import AppLoader from "@docspace/common/components/AppLoader";
 import { combineUrl, updateTempContent } from "@docspace/common/utils";
-import config from "../package.json";
-import i18n from "./i18n";
-import { I18nextProvider } from "react-i18next";
-import Home from "./pages/Home";
-import Profile from "./pages/Profile";
-import ProfileAction from "./pages/ProfileAction";
-import GroupAction from "./pages/GroupAction";
+import config from "@docspace/client/package.json";
+import Home from "./PeopleHome";
+import Profile from "./Profile";
+import ProfileAction from "./ProfileAction";
+//import GroupAction from "./GroupAction";
 import Filter from "@docspace/common/api/people/filter";
 import { AppServerConfig } from "@docspace/common/constants";
-import Article from "@docspace/common/components/Article";
-import {
-  ArticleHeaderContent,
-  ArticleMainButtonContent,
-  ArticleBodyContent,
-} from "./components/Article";
+// import Article from "@docspace/common/components/Article";
+// import {
+//   ArticleHeaderContent,
+//   ArticleMainButtonContent,
+//   ArticleBodyContent,
+// } from "./components/Article";
 
 const { proxyURL } = AppServerConfig;
 const homepage = config.homepage;
 
 const PROXY_HOMEPAGE_URL = combineUrl(proxyURL, homepage);
 
-const HOME_URL = combineUrl(PROXY_HOMEPAGE_URL, "/") || "/";
-const HOME_FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/filter");
-const PROFILE_URL = combineUrl(PROXY_HOMEPAGE_URL, "/view/:userId");
-const PROFILE_EDIT_URL = combineUrl(PROXY_HOMEPAGE_URL, "/edit/:userId");
-const PROFILE_CREATE_URL = combineUrl(PROXY_HOMEPAGE_URL, "/create/:type");
-const GROUP_URLS = [
-  combineUrl(PROXY_HOMEPAGE_URL, "/group/edit/:groupId"),
-  combineUrl(PROXY_HOMEPAGE_URL, "/group/create"),
-];
-const REASSIGN_URL = combineUrl(PROXY_HOMEPAGE_URL, "/reassign/:userId");
+const HOME_URL = combineUrl(PROXY_HOMEPAGE_URL, "/accounts") || "/accounts";
+const HOME_FILTER_URL = combineUrl(PROXY_HOMEPAGE_URL, "/accounts/filter");
+const PROFILE_URL = combineUrl(PROXY_HOMEPAGE_URL, "/accounts/view/:userId");
+const PROFILE_EDIT_URL = combineUrl(
+  PROXY_HOMEPAGE_URL,
+  "/accounts/edit/:userId"
+);
+const PROFILE_CREATE_URL = combineUrl(
+  PROXY_HOMEPAGE_URL,
+  "/accounts/create/:type"
+);
+// const GROUP_URLS = [
+//   combineUrl(PROXY_HOMEPAGE_URL, "/group/edit/:groupId"),
+//   combineUrl(PROXY_HOMEPAGE_URL, "/group/create"),
+// ];
+//const REASSIGN_URL = combineUrl(PROXY_HOMEPAGE_URL, "/reassign/:userId");
 
-const Reassign = React.lazy(() => import("./pages/Reassign"));
+//const Reassign = React.lazy(() => import("./pages/Reassign"));
 const Error404 = React.lazy(() => import("studio/Error404"));
 
-const PeopleArticle = React.memo(() => {
-  return (
-    <Article>
-      <Article.Header>
-        <ArticleHeaderContent />
-      </Article.Header>
-      <Article.MainButton>
-        <ArticleMainButtonContent />
-      </Article.MainButton>
-      <Article.Body>
-        <ArticleBodyContent />
-      </Article.Body>
-    </Article>
-  );
-});
+// const PeopleArticle = React.memo(() => {
+//   return (
+//     <Article>
+//       <Article.Header>
+//         <ArticleHeaderContent />
+//       </Article.Header>
+//       <Article.MainButton>
+//         <ArticleMainButtonContent />
+//       </Article.MainButton>
+//       <Article.Body>
+//         <ArticleBodyContent />
+//       </Article.Body>
+//     </Article>
+//   );
+// });
 
 const PeopleSection = React.memo(() => {
   return (
@@ -73,8 +77,8 @@ const PeopleSection = React.memo(() => {
         restricted
         component={ProfileAction}
       />
-      <PrivateRoute path={GROUP_URLS} restricted component={GroupAction} />
-      <PrivateRoute path={REASSIGN_URL} restricted component={ReassignRoute} />
+      {/* <PrivateRoute path={GROUP_URLS} restricted component={GroupAction} /> */}
+      {/* <PrivateRoute path={REASSIGN_URL} restricted component={ReassignRoute} /> */}
       <PrivateRoute exact path={HOME_URL} component={HomeRedirectToFilter} />
       <PrivateRoute path={HOME_FILTER_URL} component={Home} />
       <PrivateRoute component={Error404Route} />
@@ -82,13 +86,13 @@ const PeopleSection = React.memo(() => {
   );
 });
 
-const ReassignRoute = (props) => (
-  <React.Suspense fallback={<AppLoader />}>
-    <ErrorBoundary>
-      <Reassign {...props} />
-    </ErrorBoundary>
-  </React.Suspense>
-);
+// const ReassignRoute = (props) => (
+//   <React.Suspense fallback={<AppLoader />}>
+//     <ErrorBoundary>
+//       <Reassign {...props} />
+//     </ErrorBoundary>
+//   </React.Suspense>
+// );
 
 const Error404Route = (props) => (
   <React.Suspense fallback={<AppLoader />}>
@@ -124,7 +128,7 @@ const PeopleContent = (props) => {
 
   return (
     <>
-      <PeopleArticle />
+      {/* <PeopleArticle /> */}
       <PeopleSection />
     </>
   );
@@ -142,8 +146,6 @@ const peopleStore = new PeopleStore();
 
 export default (props) => (
   <PeopleProvider peopleStore={peopleStore}>
-    <I18nextProvider i18n={i18n}>
-      <People {...props} />
-    </I18nextProvider>
+    <People {...props} />
   </PeopleProvider>
 );

packages/client/src/pages/PeopleHome/Section/Body/RowView/SimpleUserRow.js

@@ -2,8 +2,8 @@ import React from "react";
 import Row from "@docspace/components/row";
 import UserContent from "./userContent";
 import { withRouter } from "react-router";
-import withContextOptions from "../../../../../HOCs/withContextOptions";
-import withContent from "../../../../../HOCs/withContent";
+import withContextOptions from "../../../../../HOCs/withPeopleContextOptions";
+import withContent from "../../../../../HOCs/withPeopleContent";
 
 const SimpleUserRow = (props) => {
   const {

packages/client/src/pages/PeopleHome/Section/Body/RowView/userContent.js

@@ -38,7 +38,7 @@ const UserContent = ({
       <Link
         containerWidth="28%"
         type="page"
-        href={`/products/people/view/${userName}`}
+        href={`/accounts/view/${userName}`}
         title={displayName}
         fontWeight={600}
         onClick={onUserNameClick}

packages/client/src/pages/PeopleHome/Section/Body/TableView/TableRow.js

@@ -2,8 +2,8 @@ import React from "react";
 import { withRouter } from "react-router";
 import TableRow from "@docspace/components/table-container/TableRow";
 import TableCell from "@docspace/components/table-container/TableCell";
-import withContextOptions from "../../../../../HOCs/withContextOptions";
-import withContent from "../../../../../HOCs/withContent";
+import withContextOptions from "../../../../../HOCs/withPeopleContextOptions";
+import withContent from "../../../../../HOCs/withPeopleContent";
 import Link from "@docspace/components/link";
 import Text from "@docspace/components/text";
 import styled from "styled-components";
@@ -91,7 +91,7 @@ const PeopleTableRow = (props) => {
           fontSize="15px"
           color={nameColor}
           isTextOverflow
-          href={`/products/people/view/${userName}`}
+          href={`/accounts/view/${userName}`}
           onClick={onUserNameClick}
           className="table-cell_username"
         >