@strapi/admin 4.1.1 → 4.1.4-alpha.0

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -275,7 +275,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
               paddingLeft={7}
               paddingRight={7}
             >
-              <Stack size={4}>
+              <Stack spacing={4}>
                 <Typography variant="delta" as="h2">
                   {formatMessage({
                     id: getTrad('containers.SettingPage.settings'),

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -71,7 +71,7 @@ const Header = ({
 
   if (isCreatingEntry && canCreate) {
     primaryAction = (
-      <Stack horizontal size={2}>
+      <Stack horizontal spacing={2}>
         {hasDraftAndPublish && (
           <Button disabled startIcon={<Check />} variant="secondary">
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
@@ -187,7 +187,7 @@ const Header = ({
           isOpen={showWarningUnpublish}
         >
           <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack size={2}>
+            <Stack spacing={2}>
               <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Typography id="confirm-description">
                   {formatMessage(
@@ -242,7 +242,7 @@ const Header = ({
           isOpen={showWarningDraftRelation}
         >
           <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack size={2}>
+            <Stack spacing={2}>
               <Flex justifyContent="center" style={{ textAlign: 'center' }}>
                 <Typography id="confirm-description">
                   {draftRelationsCountRef.current}
@@ -314,8 +314,5 @@ Header.propTypes = {
 
 const Memoized = memo(Header, isEqualFastCompare);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 export { Header };

package/admin/src/content-manager/pages/EditView/Informations/index.js

@@ -44,7 +44,7 @@ const Informations = () => {
       <Box paddingTop={2} paddingBottom={6}>
         <Divider />
       </Box>
-      <Stack size={4}>
+      <Stack spacing={4}>
         <Flex justifyContent="space-between">
           <Typography fontWeight="bold">
             {formatMessage({

package/admin/src/content-manager/pages/EditView/index.js

@@ -137,7 +137,7 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack size={6}>
+                    <Stack spacing={6}>
                       {formattedContentTypeLayout.map((row, index) => {
                         if (isDynamicZone(row)) {
                           const {
@@ -174,7 +174,7 @@ const EditView = ({
                             paddingBottom={6}
                             borderColor="neutral150"
                           >
-                            <Stack size={6}>
+                            <Stack spacing={6}>
                               {row.map((grid, gridIndex) => {
                                 return (
                                   <Grid gap={4} key={gridIndex}>
@@ -232,7 +232,7 @@ const EditView = ({
                     </Stack>
                   </GridItem>
                   <GridItem col={3} s={12}>
-                    <Stack size={2}>
+                    <Stack spacing={2}>
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
@@ -275,7 +275,7 @@ const EditView = ({
                           <Box paddingTop={2} paddingBottom={6}>
                             <Divider />
                           </Box>
-                          <Stack size={4}>
+                          <Stack spacing={4}>
                             {relationsLayout.map(
                               ({ name, fieldSchema, labelAction, metadatas, queryInfos }) => {
                                 return (
@@ -308,7 +308,7 @@ const EditView = ({
                         </Box>
                       )}
                       <Box as="aside" aria-labelledby="links">
-                        <Stack size={2}>
+                        <Stack spacing={2}>
                           <InjectionZone area="contentManager.editView.right-links" slug={slug} />
                           {slug !== 'strapi::administrator' && (
                             <CheckPermissions permissions={ctbPermissions}>
@@ -364,194 +364,6 @@ const EditView = ({
       }}
     </DataManagementWrapper>
   );
-
-  // return (
-  //   <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
-  //     {({
-  // componentsDataStructure,
-  // contentTypeDataStructure,
-  // data,
-  // isCreatingEntry,
-  // isLoadingForData,
-  // onDelete,
-  // onDeleteSucceeded,
-  // onPost,
-  // onPublish,
-  // onPut,
-  // onUnpublish,
-  // redirectionLink,
-  // status,
-  //     }) => {
-  // return (
-  //   <EditViewDataManagerProvider
-  //     allowedActions={allowedActions}
-  //     allLayoutData={layout}
-  //     createActionAllowedFields={createActionAllowedFields}
-  //     componentsDataStructure={componentsDataStructure}
-  //     contentTypeDataStructure={contentTypeDataStructure}
-  //     from={redirectionLink}
-  //     initialValues={data}
-  //     isCreatingEntry={isCreatingEntry}
-  //     isLoadingForData={isLoadingForData}
-  //     isSingleType={isSingleType}
-  //     onPost={onPost}
-  //     onPublish={onPublish}
-  //     onPut={onPut}
-  //     onUnpublish={onUnpublish}
-  //     readActionAllowedFields={readActionAllowedFields}
-  //     redirectToPreviousPage={goBack}
-  //     slug={slug}
-  //     status={status}
-  //     updateActionAllowedFields={updateActionAllowedFields}
-  //   >
-  //           <Container className="container-fluid">
-  //             <Header allowedActions={allowedActions} />
-  //             <div className="row" style={{ paddingTop: 3 }}>
-  //               <div className="col-md-12 col-lg-9" style={{ marginBottom: 13 }}>
-  //                 {formattedContentTypeLayout.map((block, blockIndex) => {
-  //                   if (isDynamicZone(block)) {
-  //                     const {
-  //                       0: {
-  //                         0: { name, fieldSchema, metadatas, labelIcon },
-  //                       },
-  //                     } = block;
-  //                     const baselineAlignementSize = blockIndex === 0 ? '3px' : '0';
-
-  //                     return (
-  //                       <BaselineAlignment key={blockIndex} top size={baselineAlignementSize}>
-  // <DynamicZone
-  //   name={name}
-  //   fieldSchema={fieldSchema}
-  //   labelIcon={labelIcon}
-  //   metadatas={metadatas}
-  // />
-  //                       </BaselineAlignment>
-  //                     );
-  //                   }
-
-  //                   return (
-  //                     <FormWrapper key={blockIndex}>
-  //                       {block.map((fieldsBlock, fieldsBlockIndex) => {
-  //                         return (
-  //                           <div className="row" key={fieldsBlockIndex}>
-  //                             {fieldsBlock.map(
-  //                               ({ name, size, fieldSchema, labelIcon, metadatas }, fieldIndex) => {
-  //                                 const isComponent = fieldSchema.type === 'component';
-
-  //                                 if (isComponent) {
-  //                                   const { component, max, min, repeatable = false } = fieldSchema;
-  //                                   const componentUid = fieldSchema.component;
-
-  //                                   return (
-  //                                     <FieldComponent
-  //                                       key={componentUid}
-  //                                       componentUid={component}
-  //                                       labelIcon={labelIcon}
-  //                                       isRepeatable={repeatable}
-  //                                       label={metadatas.label}
-  //                                       max={max}
-  //                                       min={min}
-  //                                       name={name}
-  //                                     />
-  //                                   );
-  //                                 }
-
-  //                                 return (
-  //                                   <div className={`col-${size}`} key={name}>
-  //                                     <Inputs
-  //                                       autoFocus={
-  //                                         blockIndex === 0 &&
-  //                                         fieldsBlockIndex === 0 &&
-  //                                         fieldIndex === 0
-  //                                       }
-  //                                       fieldSchema={fieldSchema}
-  //                                       keys={name}
-  //                                       labelIcon={labelIcon}
-  //                                       metadatas={metadatas}
-  //                                     />
-  //                                   </div>
-  //                                 );
-  //                               }
-  //                             )}
-  //                           </div>
-  //                         );
-  //                       })}
-  //                     </FormWrapper>
-  //                   );
-  //                 })}
-  //               </div>
-  //               <div className="col-md-12 col-lg-3">
-  //                 <InformationCard />
-  //                 <Padded size="smd" top />
-  //                 {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
-  //                   <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
-  //                     <div style={{ paddingTop: '22px' }}>
-  //                       {currentContentTypeLayoutData.layouts.editRelations.map(
-  //                         ({ name, fieldSchema, labelIcon, metadatas, queryInfos }) => {
-  //                           return (
-  //                             <SelectWrapper
-  // {...fieldSchema}
-  // {...metadatas}
-  // key={name}
-  // labelIcon={labelIcon}
-  // name={name}
-  // relationsType={fieldSchema.relationType}
-  // queryInfos={queryInfos}
-  //                             />
-  //                           );
-  //                         }
-  //                       )}
-  //                     </div>
-  //                   </SubWrapper>
-  //                 )}
-  //                 <LinkWrapper>
-  //                   <ul>
-  // <CheckPermissions permissions={configurationPermissions}>
-  //   <LiLink
-  //     message={{
-  //       id: 'app.links.configure-view',
-  //     }}
-  //     icon="layout"
-  //     url={configurationsURL}
-  //     onClick={() => {
-  //       // trackUsage('willEditContentTypeLayoutFromEditView');
-  //     }}
-  //   />
-  // </CheckPermissions>
-  //                     {slug !== 'strapi::administrator' && (
-  //                       <CheckPermissions permissions={ctbPermissions}>
-  //                         <LiLink
-  //                           message={{
-  //                             id: getTrad('containers.Edit.Link.Fields'),
-  //                           }}
-  // onClick={() => {
-  //   trackUsage('willEditEditLayout');
-  // }}
-  //                           icon="fa-cog"
-  //                           url={`/plugins/content-type-builder/content-types/${slug}`}
-  //                         />
-  //                       </CheckPermissions>
-  //                     )}
-  //                     {/*  TODO add DOCUMENTATION */}
-  //                     <InjectionZone area="contentManager.editView.right-links" slug={slug} />
-
-  // {allowedActions.canDelete && (
-  //   <DeleteLink
-  //     isCreatingEntry={isCreatingEntry}
-  //     onDelete={onDelete}
-  //     onDeleteSucceeded={onDeleteSucceeded}
-  //   />
-  // )}
-  //                   </ul>
-  //                 </LinkWrapper>
-  //               </div>
-  //             </div>
-  //           </Container>
-  //         </EditViewDataManagerProvider>
-  //       );
-  //     }}
-  //   </DataManagementWrapper>
-  // );
 };
 
 EditView.defaultProps = {

package/admin/src/content-manager/pages/ListSettingsView/components/CardPreview.js

@@ -66,7 +66,7 @@ const CardPreview = ({ labelField, transparent, isSibling }) => {
       transparent={transparent}
       isSibling={isSibling}
     >
-      <Stack horizontal size={3}>
+      <Stack horizontal spacing={3}>
         <DragButton alignItems="center">
           <Drag />
         </DragButton>

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -193,7 +193,7 @@ const DraggableCard = ({
           onClick={handleClickEditRow}
           isDragging={isDragging}
         >
-          <Stack horizontal size={3}>
+          <Stack horizontal spacing={3}>
             <DragButton
               as="span"
               aria-label={formatMessage(

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -75,7 +75,7 @@ const SortDisplayedFields = ({
         hasRadius
       >
         <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
-          <Stack horizontal size={3}>
+          <Stack horizontal spacing={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
                 key={field}

package/admin/src/hooks/index.js

@@ -1,7 +1,6 @@
 export { default as useConfigurations } from './useConfigurations';
 export { default as useModels } from './useModels';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
-export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFromMarketPlace';
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';
 export { default as useRolesList } from './useRolesList';

package/admin/src/hooks/useFetchInstalledPlugins/index.js

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchInstalledPlugins } from './utils/api';
+
+const useFetchInstalledPlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchInstalledPlugins;

package/admin/src/{pages/InstalledPluginsPage → hooks/useFetchInstalledPlugins}/utils/api.js

@@ -1,11 +1,9 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchPlugins = async notify => {
+const fetchInstalledPlugins = async () => {
   const { data } = await axiosInstance.get('/admin/plugins');
 
-  notify();
-
   return data;
 };
 
-export { fetchPlugins };
+export { fetchInstalledPlugins };

package/admin/src/hooks/useFetchMarketplacePlugins/index.js

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchMarketplacePlugins } from './utils/api';
+
+const useFetchMarketplacePlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchMarketplacePlugins;

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+
+const fetchMarketplacePlugins = async () => {
+  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
+
+  // Only keep v4 plugins
+  const filteredResponse = {
+    ...response,
+    data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'),
+  };
+
+  return filteredResponse;
+};
+
+export { fetchMarketplacePlugins };

package/admin/src/hooks/useSettingsMenu/init.js

@@ -10,7 +10,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
   // Sort the links by name
   const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]).map(link => ({
     ...link,
-    hasNotification: link.id === 'application-infos' && shouldUpdateStrapi,
+    hasNotification: link.id === '000-application-infos' && shouldUpdateStrapi,
   }));
 
   const otherSections = Object.values(omit(settings, 'global'));
@@ -25,7 +25,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.roles.label' },
+          intlLabel: { id: 'Settings.permissions.menu.link.roles.label', defaultMessage: 'Roles' },
           to: '/settings/roles',
           id: 'roles',
           isDisplayed: false,

package/admin/src/pages/Admin/index.js

@@ -12,7 +12,7 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
-import { useMenu, useReleaseNotification } from '../../hooks';
+import { useMenu } from '../../hooks';
 import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
 import GuidedTourModal from '../../components/GuidedTour/Modal';
@@ -48,8 +48,6 @@ const useTrackUsage = () => {
 };
 
 const Admin = () => {
-  // Show a notification when the current version of Strapi is not the latest one
-  useReleaseNotification();
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();

package/admin/src/pages/App/index.js

@@ -19,6 +19,7 @@ import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';
 import AuthPage from '../AuthPage';
 import NotFoundPage from '../NotFoundPage';
+import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
 
@@ -119,6 +120,7 @@ function App() {
             )}
             exact
           />
+          <PrivateRoute path="/usecase" component={UseCasePage} />
           <PrivateRoute path="/" component={AuthenticatedApp} />
           <Route path="" component={NotFoundPage} />
         </Switch>

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -15,7 +15,7 @@ import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../Logo';
+import Logo from '../../../../components/UnauthenticatedLogo';
 
 const ForgotPassword = ({ onSubmit, schema }) => {
   const { formatMessage } = useIntl();
@@ -60,7 +60,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   )}
                 </Column>
 
-                <Stack size={6}>
+                <Stack spacing={6}>
                   <TextInput
                     error={
                       errors.email

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -9,7 +9,7 @@ import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../Logo';
+import Logo from '../../../../components/UnauthenticatedLogo';
 
 const ForgotPasswordSuccess = () => {
   const { formatMessage } = useIntl();

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -16,7 +16,7 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { Formik } from 'formik';
 import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../Logo';
+import Logo from '../../../../components/UnauthenticatedLogo';
 import FieldActionWrapper from '../FieldActionWrapper';
 
 const PasswordInput = styled(TextInput)`
@@ -75,7 +75,7 @@ const Login = ({ onSubmit, schema, children }) => {
                 )}
               </Column>
 
-              <Stack size={6}>
+              <Stack spacing={6}>
                 <TextInput
                   error={
                     errors.email

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -10,7 +10,7 @@ import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../layouts/UnauthenticatedLayout';
-import Logo from '../Logo';
+import Logo from '../../../../components/UnauthenticatedLogo';
 
 const Oops = () => {
   const { formatMessage } = useIntl();