feat: application preferences.

client/src/containers/Preferences/Users/Users.js

@@ -1,20 +1,28 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
-import withUserPreferences from 'containers/Preferences/Users/withUserPreferences'
+import withUserPreferences from 'containers/Preferences/Users/withUserPreferences';
 
 function UsersPreferences({ openDialog }) {
   const onChangeTabs = (currentTabId) => {};
 
   return (
-    <div class='preferences__inside-content preferences__inside-content--users-roles'>
-      <div class='preferences__tabs'>
-        <Tabs animate={true} onChange={onChangeTabs}>
-          <Tab id='users' title='Users' />
-          <Tab id='roles' title='Roles' />
-        </Tabs>
+    <div className={classNames(
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+      CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+    )}>
+      <div className={classNames(CLASSES.CARD)}>
+        <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
+          <Tabs animate={true} onChange={onChangeTabs}>
+            <Tab id="users" title="Users" />
+            <Tab id="roles" title="Roles" />
+          </Tabs>
+        </div>
+        <PreferencesSubContent preferenceTab="users" />
       </div>
-      <PreferencesSubContent preferenceTab='users' />
     </div>
   );
 }

client/src/containers/Preferences/Users/UsersActions.js

@@ -1,9 +1,9 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 import {
   Button,
   Intent,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'react-intl';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -13,9 +13,9 @@ function UsersActions({
   openDialog,
   closeDialog,
 }) {
-  const onClickNewUser = useCallback(() => {
-    openDialog('user-form');
-  }, [openDialog]);
+  const onClickNewUser = () => {
+    openDialog('invite-user');
+  };
 
   return (
     <div className="preferences-actions">

client/src/containers/Preferences/Users/UsersDataTable.js

@@ -12,18 +12,18 @@ import {
 import { withRouter } from 'react-router';
 import { snakeCase } from 'lodash';
 
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
-import { compose } from 'utils';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Icon, If, AppToaster } from 'components';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { compose, firstLettersArgs } from 'utils';
+
+import { DataTable, Icon, If } from 'components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withUsers from 'containers/Users/withUsers';
 
+const AvatarCell = (row) => {
+  return <span className={'avatar'}>{ firstLettersArgs(row.email) }</span>;
+}
+
 function UsersDataTable({
   // #withDialogActions
   openDialog,
@@ -39,7 +39,6 @@ function UsersDataTable({
   onDeleteUser,
   onSelectedRowsChange,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
   const { formatMessage } = useIntl();
 
   const onEditUser = useCallback(
@@ -80,7 +79,7 @@ function UsersDataTable({
         />
       </Menu>
     ),
-    [onInactiveUser, onDeleteUser, onEditUser],
+    [onInactiveUser, onDeleteUser, onEditUser, formatMessage],
   );
   const onRowContextMenu = useCallback(
     (cell) => {
@@ -91,6 +90,12 @@ function UsersDataTable({
 
   const columns = useMemo(
     () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        width: 100,
+      },
       {
         id: 'full_name',
         Header: formatMessage({ id: 'full_name' }),
@@ -154,27 +159,15 @@ function UsersDataTable({
     },
     [onFetchData],
   );
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
   return (
-    <LoadingIndicator loading={loading} mount={false}>
-      <DataTable
-        columns={columns}
-        data={usersList}
-        onFetchData={handelDataTableFetchData}
-        loading={usersLoading && !initialMount}
-        manualSortBy={true}
-        noInitialFetch={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-      />
-    </LoadingIndicator>
+    <DataTable
+      columns={columns}
+      data={usersList}
+      loading={loading}
+      onFetchData={handelDataTableFetchData}
+      noInitialFetch={true}
+      rowContextMenu={onRowContextMenu}
+    />
   );
 }
 

client/src/containers/Preferences/Users/UsersList.js

@@ -1,47 +1,32 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { queryCache, useQuery } from 'react-query';
 import { Alert, Intent } from '@blueprintjs/core';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import withUsers from 'containers/Users/withUsers';
-import UsersDataTable from './UsersDataTable';
 import withUsersActions from 'containers/Users/withUsersActions';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
+import UsersDataTable from './UsersDataTable';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
   useIntl,
 } from 'react-intl';
-import { snakeCase } from 'lodash';
 
 import AppToaster from 'components/AppToaster';
 
 import { compose } from 'utils';
 
 function UsersListPreferences({
-  // #withDialog
-  openDialog,
-
   // #withDashboardActions
   changePreferencesPageTitle,
 
-  // #withUsers
-  usersList,
-
   // #withUsersActions
   requestDeleteUser,
   requestInactiveUser,
   requestFetchUsers,
-
-  // #ownProps
-  onFetchData,
 }) {
   const [deleteUserState, setDeleteUserState] = useState(false);
   const [inactiveUserState, setInactiveUserState] = useState(false);
-  const [selectedRows, setSelectedRows] = useState([]);
 
   const { formatMessage } = useIntl();
 
@@ -91,9 +76,6 @@ function UsersListPreferences({
 
   const handleEditUser = useCallback(() => {}, []);
 
-
-
-
   // Handle confirm User delete
   const handleConfirmUserDelete = useCallback(() => {
     if (!deleteUserState) {
@@ -115,63 +97,44 @@ function UsersListPreferences({
       });
   }, [deleteUserState, requestDeleteUser, formatMessage]);
 
-  // const handelDataTableFetchData = useCallback(() => {
-  //   onFetchData && onFetchData();
-  // }, [onFetchData]);
-
-  // Handle selected rows change.
-  const handleSelectedRowsChange = useCallback(
-    (accounts) => {
-      setSelectedRows(accounts);
-    },
-    [setSelectedRows],
-  );
 
   return (
-    <DashboardInsider loading={fetchUsers.isFetching}>
-      <DashboardPageContent>
-        <UsersDataTable
-          onDeleteUser={handleDeleteUser}
-          onInactiveUser={handleInactiveUser}
-          onEditUser={handleEditUser}
-          // onFetchData={handleFetchData}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        />
-
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'delete'} />}
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={deleteUserState}
-          onCancel={handleCancelUserDelete}
-          onConfirm={handleConfirmUserDelete}
-        >
-          <p>
-            <FormattedHTMLMessage
-              id={'once_delete_this_account_you_will_able_to_restore_it'}
-            />
-          </p>
-        </Alert>
-        <Alert
-          cancelButtonText={<T id={'cancel'} />}
-          confirmButtonText={<T id={'inactivate'} />}
-          intent={Intent.WARNING}
-          isOpen={inactiveUserState}
-          onCancel={handleCancelInactiveUser}
-          onConfirm={handleConfirmUserActive}
-        >
-          <p>
-            <T id={'are_sure_to_inactive_this_account'} />
-          </p>
-        </Alert>
-      </DashboardPageContent>
-    </DashboardInsider>
+    <>
+      <UsersDataTable
+        loading={fetchUsers.isFetching}
+        onDeleteUser={handleDeleteUser}
+        onInactiveUser={handleInactiveUser}
+        onEditUser={handleEditUser}
+      />
+      <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        intent={Intent.DANGER}
+        isOpen={deleteUserState}
+        onCancel={handleCancelUserDelete}
+        onConfirm={handleConfirmUserDelete}
+      >
+        <p>
+          Once you delete this user, you won't be able to restore it later. Are you sure you want to delete ?
+        </p>
+      </Alert>
+      <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'inactivate'} />}
+        intent={Intent.WARNING}
+        isOpen={inactiveUserState}
+        onCancel={handleCancelInactiveUser}
+        onConfirm={handleConfirmUserActive}
+      >
+        <p>
+          <T id={'are_sure_to_inactive_this_account'} />
+        </p>
+      </Alert>
+    </>
   );
 }
 
 export default compose(
-  withDialogActions,
   withDashboardActions,
   withUsersActions,
 )(UsersListPreferences);