@strapi/admin 4.1.4-alpha.2 → 4.2.0-alpha.5

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

@@ -1,6 +1,7 @@
 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/useFetchPluginsFromMarketPlace/index.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useIntl } from 'react-intl';
+
+const useFetchPluginsFromMarketPlace = () => {
+  const { locale: currentLocale } = useIntl();
+  const [state, setState] = useState({
+    error: false,
+    isLoading: true,
+    data: null,
+  });
+
+  useEffect(() => {
+    const CancelToken = axios.CancelToken;
+    const source = CancelToken.source();
+
+    const getData = async () => {
+      try {
+        const { data } = await axios.get('https://marketplace.strapi.io/plugins', {
+          cancelToken: source.token,
+          params: { lang: currentLocale },
+        });
+
+        setState({
+          isLoading: false,
+          data,
+          error: false,
+        });
+      } catch (err) {
+        if (axios.isCancel(err)) {
+          // Silent
+        } else {
+          // handle error
+          setState(prev => ({ ...prev, isLoading: false, error: true }));
+        }
+      }
+    };
+
+    getData();
+
+    return () => {
+      source.cancel();
+    };
+  }, [currentLocale]);
+
+  return state;
+};
+
+export default useFetchPluginsFromMarketPlace;

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/pages/InstalledPluginsPage/Plugins.js

@@ -1,24 +1,26 @@
 import React from 'react';
+import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
-import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import { fetchPlugins } from './utils/api';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
-  const { notifyStatus } = useNotifyAT();
   useFocusWhenNavigate();
+  const { notifyStatus } = useNotifyAT();
+  const toggleNotification = useNotification();
 
   const title = formatMessage({
     id: 'app.components.ListPluginsPage.title',
     defaultMessage: 'Plugins',
   });
 
-  const notifyPluginPageLoad = () => {
+  const notifyLoad = () => {
     notifyStatus(
       formatMessage(
         {
@@ -30,7 +32,14 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
+  const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
 
   const isLoading = status !== 'success' && status !== 'error';
 

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

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

package/admin/src/pages/MarketplacePage/MarketplaceBanner/Wrapper.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+// TODO : To migrate with @strapi/design-system
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 2rem;
+  border-radius: 4px;
+  border-left: 4px solid ${({ theme }) => theme.main.colors.mediumBlue};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
+  padding: 8px 16px;
+
+  .bannerImage {
+    width: 48px;
+    height: 48px;
+    margin-right: 16px;
+  }
+
+  .bannerLink {
+    color: ${({ theme }) => theme.main.colors.mediumBlue};
+    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
+    svg {
+      margin-left: 4px;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/pages/MarketplacePage/MarketplaceBanner/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useTracking } from '@strapi/helper-plugin';
+import Wrapper from './Wrapper';
+import LogoStrapi from '../../../assets/images/banner_strapi-rocket.png';
+
+const MarketplaceBanner = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <Wrapper>
+      <img
+        className="bannerImage"
+        src={LogoStrapi}
+        alt={formatMessage({ id: 'app.components.MarketplaceBanner.image.alt' })}
+      />
+      <div>
+        <div>
+          <FormattedMessage id="app.components.MarketplaceBanner" />
+        </div>
+        <a
+          href="https://github.com/strapi/awesome-strapi"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bannerLink"
+          onClick={() => trackUsage('didGoToStrapiAwesome')}
+        >
+          <FormattedMessage id="app.components.MarketplaceBanner.link" />
+          <i className="fa fa-external-link-alt" />
+        </a>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default MarketplaceBanner;

package/admin/src/pages/MarketplacePage/PluginCard/Wrapper.js

@@ -0,0 +1,148 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .wrapper {
+    position: relative;
+    min-height: 216px;
+    margin-bottom: 3.6rem;
+    padding: 1.2rem 1.5rem;
+    padding-bottom: 0;
+    background-color: #fff;
+    box-shadow: 0 2px 4px #e3e9f3;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardTitle {
+    display: flex;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    > div:first-child {
+      margin-right: 14px;
+    }
+
+    > div:last-child {
+      height: 36px;
+      line-height: 36px;
+    }
+
+    i,
+    svg {
+      margin-left: 7px;
+      color: #b3b5b9;
+      font-size: 1rem;
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+  }
+
+  .cardDescription {
+    height: 54px;
+    margin-top: 27px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    font-weight: 400;
+
+    > span:last-child {
+      color: #1c5de7;
+    }
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardFooter {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 45px;
+    padding: 0.9rem 1.5rem 1rem;
+    background-color: #fafafb;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    cursor: initial;
+  }
+
+  .compatible {
+    margin-top: 3px;
+    color: #5a9e06;
+    font-size: 1.3rem;
+    font-style: italic;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 12px;
+    }
+  }
+
+  .settings {
+    margin-top: 3px;
+    color: #323740;
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 11px;
+      vertical-align: inherit;
+    }
+  }
+
+  .button {
+    height: 26px;
+    min-width: 89px !important;
+    padding: 0 15px;
+    margin: 0;
+    border-radius: 2px !important;
+    line-height: 23px;
+    font-size: 13px;
+    cursor: pointer;
+    span {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .frame {
+    width: 70px;
+    height: 36px;
+    margin: auto 0;
+    text-align: center;
+    border: 1px solid #f3f3f7;
+    border-radius: 3px;
+    white-space: nowrap;
+    > img {
+      max-height: 36px;
+      vertical-align: middle;
+    }
+  }
+
+  .helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+  .primary {
+    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+    color: white;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+
+    &:active {
+      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .secondary {
+    border: 1px solid #dfe0e1;
+    font-weight: 600;
+  }
+`;
+
+export default Wrapper;