@strapi/admin 4.2.0-alpha.0 → 4.2.0-alpha.6

package/admin/src/app.js

@@ -1,6 +1,9 @@
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
 export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
+  config,
+  bootstrap,
 };

package/admin/src/components/AuthenticatedApp/index.js

@@ -1,6 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 //  TODO: DS add loader
-import { auth, LoadingIndicatorPage, AppInfosContext, useGuidedTour } from '@strapi/helper-plugin';
+import {
+  auth,
+  LoadingIndicatorPage,
+  AppInfosContext,
+  useGuidedTour,
+  useNotification,
+} from '@strapi/helper-plugin';
 import { useQueries } from 'react-query';
 import get from 'lodash/get';
 import packageJSON from '../../../../package.json';
@@ -20,6 +26,7 @@ const strapiVersion = packageJSON.version;
 
 const AuthenticatedApp = () => {
   const { setGuidedTourVisibility } = useGuidedTour();
+  const toggleNotification = useNotification();
   const setGuidedTourVisibilityRef = useRef(setGuidedTourVisibility);
   const userInfo = auth.getUserInfo();
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
@@ -34,7 +41,7 @@ const AuthenticatedApp = () => {
     { queryKey: 'app-infos', queryFn: fetchAppInfo },
     {
       queryKey: 'strapi-release',
-      queryFn: fetchStrapiLatestRelease,
+      queryFn: () => fetchStrapiLatestRelease(toggleNotification),
       enabled: showReleaseNotification,
       initialData: strapiVersion,
     },

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,15 +1,34 @@
 import axios from 'axios';
+import checkLatestStrapiVersion from './checkLatestStrapiVersion';
 import { axiosInstance } from '../../../core/utils';
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
+const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 
-const fetchStrapiLatestRelease = async () => {
+const fetchStrapiLatestRelease = async toggleNotification => {
   try {
     const {
       data: { tag_name },
     } = await axios.get('https://api.github.com/repos/strapi/strapi/releases/latest');
 
+    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
+
+    if (shouldUpdateStrapi && showUpdateNotif) {
+      toggleNotification({
+        type: 'info',
+        message: { id: 'notification.version.update.message' },
+        link: {
+          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
+          label: {
+            id: 'notification.version.update.link',
+          },
+        },
+        blockTransition: true,
+        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
+      });
+    }
+
     return tag_name;
   } catch (err) {
     // Don't throw an error

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
@@ -14,12 +14,17 @@ import layout from '../layout';
 const GuidedTourHomepage = () => {
   const { guidedTourState, setSkipped } = useGuidedTour();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   const sections = Object.entries(layout).map(([key, val]) => ({
     key,
     title: val.home.title,
     content: (
-      <LinkButton to={val.home.cta.target} endIcon={<ArrowRight />}>
+      <LinkButton
+        onClick={() => trackUsage(val.home.trackingEvent)}
+        to={val.home.cta.target}
+        endIcon={<ArrowRight />}
+      >
         {formatMessage(val.home.cta.title)}
       </LinkButton>
     ),
@@ -32,6 +37,11 @@ const GuidedTourHomepage = () => {
 
   const activeSection = enrichedSections.find(section => !section.isDone)?.key;
 
+  const handleSkip = () => {
+    setSkipped(true);
+    trackUsage('didSkipGuidedtour');
+  };
+
   return (
     <Box
       hasRadius
@@ -52,7 +62,7 @@ const GuidedTourHomepage = () => {
         <StepperHomepage sections={sections} currentSectionKey={activeSection} />
       </Stack>
       <Flex justifyContent="flex-end">
-        <Button variant="tertiary" onClick={() => setSkipped(true)}>
+        <Button variant="tertiary" onClick={handleSkip}>
           {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
         </Button>
       </Flex>

package/admin/src/components/GuidedTour/Modal/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useReducer } from 'react';
 import at from 'lodash/at';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import layout from '../layout';
 import Modal from './components/Modal';
 import reducer, { initialState } from './reducer';
@@ -20,6 +20,7 @@ const GuidedTourModal = () => {
     { stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter },
     dispatch,
   ] = useReducer(reducer, initialState);
+  const { trackUsage } = useTracking();
 
   useEffect(() => {
     if (!currentStep) {
@@ -56,6 +57,7 @@ const GuidedTourModal = () => {
 
   const handleCtaClick = () => {
     setStepState(currentStep, true);
+    trackUsage(stepContent.trackingEvent);
 
     setCurrentStep(null);
   };
@@ -63,6 +65,7 @@ const GuidedTourModal = () => {
   const handleSkip = () => {
     setSkipped(true);
     setCurrentStep(null);
+    trackUsage('didSkipGuidedtour');
   };
 
   if (isVisible && stepContent) {

package/admin/src/components/GuidedTour/layout.js

@@ -13,6 +13,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/plugins/content-type-builder',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentTypeBuilder',
     },
     create: {
       title: {
@@ -31,6 +32,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep1CollectionType',
     },
     success: {
       title: {
@@ -49,6 +51,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didCreateGuidedTourCollectionType',
     },
   },
   contentManager: {
@@ -65,6 +68,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentManager',
     },
     create: {
       title: {
@@ -83,6 +87,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep2ContentManager',
     },
     success: {
       title: {
@@ -101,6 +106,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didCreateGuidedTourEntry',
     },
   },
   apiTokens: {
@@ -117,6 +123,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didClickGuidedTourHomepageApiTokens',
     },
     create: {
       title: {
@@ -135,6 +142,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep3ApiTokens',
     },
     success: {
       title: {
@@ -146,6 +154,7 @@ const layout = {
         defaultMessage:
           "<p>See content in action by making an HTTP request:</p><ul><li><p>To this URL: <light>https://'<'YOUR_DOMAIN'>'/api/'<'YOUR_CT'>'</light></p></li><li><p>With the header: <light>Authorization: bearer '<'YOUR_API_TOKEN'>'</light></p></li></ul><p>For more ways to interact with content, see the <documentationLink>documentation</documentationLink>.</p>",
       },
+      trackingEvent: 'didGenerateGuidedTourApiTokens',
     },
   },
 };

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Box } from '@strapi/design-system/Box';
 import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import ComponentCard from './ComponentCard';
 
 const Grid = styled.div`
@@ -12,6 +13,8 @@ const Grid = styled.div`
 `;
 
 const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggle }) => {
+  const { formatMessage } = useIntl();
+
   const handleToggle = () => {
     onToggle(category);
   };
@@ -20,7 +23,7 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
     <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
         variant={isOdd ? 'primary' : 'secondary'}
-        title={category}
+        title={formatMessage({ id: category, defaultMessage: category })}
         togglePosition="left"
       />
       <AccordionContent>

package/admin/src/content-manager/components/Inputs/index.js

@@ -224,6 +224,8 @@ function Inputs({
       attribute={fieldSchema}
       autoComplete="new-password"
       intlLabel={{ id: label, defaultMessage: label }}
+      // in case the default value of the boolean is null, attribute.default doesn't exist
+      isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
       description={description ? { id: description, defaultMessage: description } : null}
       disabled={shouldDisableField}
       error={errorId}
@@ -279,7 +281,4 @@ Inputs.propTypes = {
 
 const Memoized = memo(Inputs, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -50,6 +50,7 @@ const getSelectStyles = theme => {
         width: '100%',
         marginTop: theme.spaces[1],
         backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -77,7 +78,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

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

@@ -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/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/AuthPage/index.js

@@ -174,6 +174,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         if (isUserSuperAdmin) {
           persistStateToLocaleStorage.setSkipped(false);
           setSkipped(false);
+          trackUsage('didLaunchGuidedtour');
         }
       }
 

package/admin/src/translations/en.json

@@ -357,8 +357,8 @@
   "app.components.PluginCard.compatible": "Compatible with your app",
   "app.components.PluginCard.compatibleCommunity": "Compatible with the community",
   "app.components.PluginCard.more-details": "More details",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",

package/admin/src/translations/ja.json

@@ -315,8 +315,8 @@
   "app.components.PluginCard.compatible": "アプリとの互換性",
   "app.components.PluginCard.compatibleCommunity": "コミュニティとの互換性",
   "app.components.PluginCard.more-details": "詳細を見る",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",

package/admin/src/translations/ko.json

@@ -317,8 +317,8 @@
   "app.components.PluginCard.compatible": "이 애플리케이션에 호환됩니다.",
   "app.components.PluginCard.compatibleCommunity": "션뮤니티에 호환됩니다.",
   "app.components.PluginCard.more-details": "[더보기]",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",