Init migration

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/admin/src/pages/Users/ListPage/index.js

@@ -1,110 +1,132 @@
-// import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-// import {
+import React, {
+  // useCallback,
+  useEffect,
+  // useMemo,
+  useReducer,
+  useRef,
+  // useState
+} from 'react';
+import {
   // BaselineAlignment,
   // useQuery,
-//   request,
-//   useRBAC,
-//   LoadingIndicatorPage,
+  request,
+  useRBAC,
+  LoadingIndicatorPage,
   // PopUpWarning,
-//   useNotification,
-//   SettingsPageTitle
-// } from '@strapi/helper-plugin';
-// import { get } from 'lodash';
-// import { useHistory, useLocation } from 'react-router-dom';
+  SettingsPageTitle,
+  useNotification,
+  useFocusWhenNavigate,
+} from '@strapi/helper-plugin';
+import {
+  Button,
+  // ContentLayout,
+  HeaderLayout,
+  // Table,
+  // TableLabel,
+  // Tbody,
+  // TFooter,
+  // Th,
+  // Thead,
+  // Tr,
+  // VisuallyHidden,
+  Main,
+} from '@strapi/parts';
+import { Mail } from '@strapi/icons';
+import {
+  // useHistory,
+  useLocation,
+} from 'react-router-dom';
+import { useIntl } from 'react-intl';
+// import get from 'lodash/get';
 // import { Flex, Padded } from '@buffetjs/core';
 // import { useSettingsHeaderSearchContext } from '../../../hooks';
 // import { Footer, List, Filter, FilterPicker, SortPicker } from '../../../components/Users';
-// import adminPermissions from '../../../permissions';
+import adminPermissions from '../../../permissions';
 // import Header from './Header';
 // import ModalForm from './ModalForm';
 // import getFilters from './utils/getFilters';
-// import init from './init';
-// import { initialState, reducer } from './reducer';
+import init from './init';
+import { initialState, reducer } from './reducer';
 
-// const ListPage = () => {
-//   const {
-//     isLoading: isLoadingForPermissions,
-//     allowedActions: { canCreate, canDelete, canRead, canUpdate },
-//   } = useRBAC(adminPermissions.settings.users);
-//   const toggleNotification = useNotification();
+const ListPage = () => {
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: {
+      canCreate,
+      // canDelete,
+      canRead,
+      // canUpdate
+    },
+  } = useRBAC(adminPermissions.settings.users);
+  const toggleNotification = useNotification();
   // const [isWarningDeleteAllOpened, setIsWarningDeleteAllOpened] = useState(false);
   // const [isModalOpened, setIsModalOpened] = useState(false);
-//   const { toggleHeaderSearch } = useSettingsHeaderSearchContext();
+  const { formatMessage } = useIntl();
   // const query = useQuery();
   // const { push } = useHistory();
-//   const { search } = useLocation();
+  const { search } = useLocation();
+
+  useFocusWhenNavigate();
+
   // const filters = useMemo(() => {
   //   return getFilters(search);
   // }, [search]);
 
-//   const [
-//     {
+  const [
+    {
       // data,
       // dataToDelete,
-//       isLoading,
-//       pagination: { total },
+      isLoading,
+      pagination: { total },
       // shouldRefetchData,
       // showModalConfirmButtonLoading,
-//     },
-//     dispatch,
-//   ] = useReducer(reducer, initialState, init);
+    },
+    dispatch,
+  ] = useReducer(reducer, initialState, init);
   // const pageSize = parseInt(query.get('pageSize') || 10, 10);
   // const page = parseInt(query.get('page') || 0, 10);
   // const sort = decodeURIComponent(query.get('sort'));
   // const _q = decodeURIComponent(query.get('_q') || '');
-//   const getDataRef = useRef();
+  const getDataRef = useRef();
   // const listRef = useRef();
 
-//   getDataRef.current = async () => {
-//     if (!canRead) {
-//       dispatch({
-//         type: 'UNSET_IS_LOADING',
-//       });
+  getDataRef.current = async () => {
+    if (!canRead) {
+      dispatch({
+        type: 'UNSET_IS_LOADING',
+      });
 
-//       return;
-//     }
-//     // Show the loading state and reset the state
-//     dispatch({
-//       type: 'GET_DATA',
-//     });
+      return;
+    }
+    // Show the loading state and reset the state
+    dispatch({
+      type: 'GET_DATA',
+    });
 
-//     try {
-//       const {
-//         data: { results, pagination },
-//       } = await request(`/admin/users${search}`, { method: 'GET' });
+    try {
+      const {
+        data: { results, pagination },
+      } = await request(`/admin/users${search}`, { method: 'GET' });
 
-//       dispatch({
-//         type: 'GET_DATA_SUCCEEDED',
-//         data: results,
-//         pagination,
-//       });
-//     } catch (err) {
-//       console.error(err.response);
-//       toggleNotification({
-//         type: 'warning',
-//         message: { id: 'notification.error' },
-//       });
-//     }
-//   };
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data: results,
+        pagination,
+      });
+    } catch (err) {
+      console.error(err.response);
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
 
-//   useEffect(() => {
-//     if (!isLoadingForPermissions) {
-//       getDataRef.current();
-//     }
-//   }, [search, isLoadingForPermissions]);
-
-//   useEffect(() => {
-//     if (canRead) {
-//       toggleHeaderSearch({ id: 'Settings.permissions.menu.link.users.label' });
-//     }
-
-//     return () => {
-//       if (canRead) {
-//         toggleHeaderSearch();
-//       }
-//     };
-//     // eslint-disable-next-line react-hooks/exhaustive-deps
-//   }, [canRead]);
+  useEffect(() => {
+    if (!isLoadingForPermissions) {
+      getDataRef.current();
+    }
+  }, [search, isLoadingForPermissions]);
 
   // const handleChangeDataToDelete = ids => {
   //   dispatch({
@@ -221,9 +243,38 @@
   //   });
   // };
 
-//   if (isLoadingForPermissions) {
-//     return <LoadingIndicatorPage />;
-//   }
+  return (
+    <Main labelledBy="title">
+      <SettingsPageTitle name="Users" />
+      <HeaderLayout
+        id="title"
+        primaryAction={
+          canCreate ? (
+            <Button onClick={() => 'handleToggleModalForCreatingRole'} startIcon={<Mail />}>
+              {formatMessage({
+                id: 'Settings.permissions.users.create',
+                defaultMessage: 'Create new user',
+              })}
+            </Button>
+          ) : (
+            undefined
+          )
+        }
+        title={formatMessage({
+          id: 'Settings.permissions.users.listview.header.title',
+          defaultMessage: 'Users',
+        })}
+        subtitle={formatMessage(
+          {
+            id: 'Settings.permissions.users.listview.header.subtitle',
+            defaultMessage: '{number, plural, =0 {# users} one {# user} other {# users}} found',
+          },
+          { number: total }
+        )}
+      />
+      {isLoading ? <LoadingIndicatorPage /> : undefined}
+    </Main>
+  );
 
   // return (
   //   <div>
@@ -286,8 +337,8 @@
   //     />
   //   </div>
   // );
-// };
+};
 
-// export default ListPage;
+export default ListPage;
 
-export default () => 'User - LV';
+// export default () => 'User - LV';

packages/core/admin/admin/src/translations/en.json

@@ -109,14 +109,13 @@
   "Settings.permissions.menu.link.roles.label": "Roles",
   "Settings.permissions.menu.link.users.label": "Users",
   "Settings.permissions.users.add-new": "Add new user",
-  "Settings.permissions.users.create": "Create new User",
+  "Settings.permissions.users.create": "Create new user",
   "Settings.permissions.users.form.email": "Email",
   "Settings.permissions.users.form.firstname": "First name",
   "Settings.permissions.users.form.lastname": "Last name",
   "Settings.permissions.users.form.sso": "Connect with SSO",
   "Settings.permissions.users.form.sso.description": "When enabled (ON), users can login via SSO",
-  "Settings.permissions.users.listview.header.description.plural": "{number} users found",
-  "Settings.permissions.users.listview.header.description.singular": "{number} user found",
+  "Settings.permissions.users.listview.header.subtitle": "{number, plural, =0 {# users} one {# user } other {# users}} found",
   "Settings.permissions.users.listview.header.title": "Users",
   "Settings.permissions.select-all-by-permission": "Select all {label} permissions",
   "Settings.permissions.select-by-permission": "Select {label} permission",