@strapi/admin 4.2.0-beta.0 → 4.2.0-beta.1

package/admin/src/pages/MarketplacePage/components/MissingPluginBanner/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ContentBox, useTracking } from '@strapi/helper-plugin';
+import GlassesSquare from '@strapi/icons/GlassesSquare';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import { Icon } from '@strapi/design-system/Icon';
+
+const MissingPluginBanner = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <a
+      href="https://strapi.canny.io/plugin-requests"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      style={{ textDecoration: 'none' }}
+      onClick={() => trackUsage('didMissMarketplacePlugin')}
+    >
+      <ContentBox
+        title={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.title',
+          defaultMessage: 'Documentation',
+        })}
+        subtitle={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.description',
+          defaultMessage:
+            "Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!",
+        })}
+        icon={<GlassesSquare />}
+        iconBackground="alternative100"
+        endAction={
+          <Icon as={ExternalLink} color="neutral600" width={3} height={3} marginLeft={2} />
+        }
+      />
+    </a>
+  );
+};
+
+export default MissingPluginBanner;

package/admin/src/pages/MarketplacePage/components/PageHeader/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { HeaderLayout } from '@strapi/design-system/Layout';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import Upload from '@strapi/icons/Upload';
+import { useTracking } from '@strapi/helper-plugin';
+
+const PageHeader = ({ isOnline }) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <HeaderLayout
+      title={formatMessage({
+        id: 'global.marketplace',
+        defaultMessage: 'Marketplace',
+      })}
+      subtitle={formatMessage({
+        id: 'admin.pages.MarketPlacePage.subtitle',
+        defaultMessage: 'Get more out of Strapi',
+      })}
+      primaryAction={
+        isOnline && (
+          <LinkButton
+            startIcon={<Upload />}
+            variant="tertiary"
+            href="https://market.strapi.io/submit-plugin"
+            onClick={() => trackUsage('didSubmitPlugin')}
+          >
+            {formatMessage({
+              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
+              defaultMessage: 'Submit your plugin',
+            })}
+          </LinkButton>
+        )
+      }
+    />
+  );
+};
+
+export default PageHeader;
+
+PageHeader.propTypes = {
+  isOnline: PropTypes.bool.isRequired,
+};

package/admin/src/pages/MarketplacePage/components/PluginCard/InstallPluginButton.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Icon } from '@strapi/design-system/Icon';
+import { Typography } from '@strapi/design-system/Typography';
+import Check from '@strapi/icons/Check';
+import Duplicate from '@strapi/icons/Duplicate';
+import { Button } from '@strapi/design-system/Button';
+
+const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }) => {
+  const toggleNotification = useNotification();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  // Already installed
+  if (isInstalled) {
+    return (
+      <Box paddingLeft={4}>
+        <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
+        <Typography variant="omega" textColor="success600" fontWeight="bold">
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.plugin.installed',
+            defaultMessage: 'Installed',
+          })}
+        </Typography>
+      </Box>
+    );
+  }
+
+  // In development, show install button
+  if (isInDevelopmentMode) {
+    return (
+      <CopyToClipboard
+        onCopy={() => {
+          trackUsage('willInstallPlugin');
+          toggleNotification({
+            type: 'success',
+            message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+          });
+        }}
+        text={commandToCopy}
+      >
+        <Button size="S" startIcon={<Duplicate />} variant="secondary">
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.plugin.copy',
+            defaultMessage: 'Copy install command',
+          })}
+        </Button>
+      </CopyToClipboard>
+    );
+  }
+
+  // Not in development and plugin not installed already. Show nothing
+  return null;
+};
+
+InstallPluginButton.propTypes = {
+  isInstalled: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  commandToCopy: PropTypes.string.isRequired,
+};
+
+export default InstallPluginButton;

package/admin/src/pages/MarketplacePage/components/PluginCard/index.js

@@ -5,18 +5,15 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import { Tooltip } from '@strapi/design-system/Tooltip';
 import ExternalLink from '@strapi/icons/ExternalLink';
-import Duplicate from '@strapi/icons/Duplicate';
-import Check from '@strapi/icons/Check';
 import CheckCircle from '@strapi/icons/CheckCircle';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useTracking } from '@strapi/helper-plugin';
 import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+import InstallPluginButton from './InstallPluginButton';
 
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
@@ -28,10 +25,9 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
+const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
   const { attributes } = plugin;
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
 
   const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
@@ -128,40 +124,20 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
             defaultMessage: 'Learn more',
           })}
         </LinkButton>
-        {isInstalled ? (
-          <Box paddingLeft={4}>
-            <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
-            <Typography variant="omega" textColor="success600" fontWeight="bold">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.installed',
-                defaultMessage: 'Installed',
-              })}
-            </Typography>
-          </Box>
-        ) : (
-          <CopyToClipboard
-            onCopy={() => {
-              trackUsage('willInstallPlugin');
-              toggleNotification({
-                type: 'success',
-                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-              });
-            }}
-            text={commandToCopy}
-          >
-            <Button size="S" startIcon={<Duplicate />} variant="secondary">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.copy',
-                defaultMessage: 'Copy install command',
-              })}
-            </Button>
-          </CopyToClipboard>
-        )}
+        <InstallPluginButton
+          isInstalled={isInstalled}
+          isInDevelopmentMode={isInDevelopmentMode}
+          commandToCopy={commandToCopy}
+        />
       </Stack>
     </Flex>
   );
 };
 
+PluginCard.defaultProps = {
+  isInDevelopmentMode: false,
+};
+
 PluginCard.propTypes = {
   plugin: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -181,6 +157,7 @@ PluginCard.propTypes = {
   }).isRequired,
   installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool,
 };
 
 export default PluginCard;

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

@@ -10,22 +10,27 @@ import {
   useTracking,
   LoadingIndicatorPage,
   useNotification,
+  useAppInfos,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Searchbar } from '@strapi/design-system/Searchbar';
 import { Box } from '@strapi/design-system/Box';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Upload from '@strapi/icons/Upload';
+import { Typography } from '@strapi/design-system/Typography';
+import { Flex } from '@strapi/design-system/Flex';
 
 import PluginCard from './components/PluginCard';
 import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import PageHeader from './components/PageHeader';
 import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
+import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
+import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
+import MissingPluginBanner from './components/MissingPluginBanner';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -46,11 +51,13 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
+  const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const isOnline = useNavigatorOnLine();
 
   useFocusWhenNavigate();
 
   const marketplaceTitle = formatMessage({
-    id: 'admin.pages.MarketPlacePage.title',
+    id: 'global.marketplace',
     defaultMessage: 'Marketplace',
   });
 
@@ -101,6 +108,55 @@ const MarketPlacePage = () => {
     trackUsageRef.current('didGoToMarketplace');
   }, []);
 
+  useEffect(() => {
+    if (!isInDevelopmentMode) {
+      toggleNotification({
+        type: 'info',
+        message: {
+          id: 'admin.pages.MarketPlacePage.production',
+          defaultMessage: 'Manage plugins from the development environment',
+        },
+        blockTransition: true,
+      });
+    }
+  }, [toggleNotification, isInDevelopmentMode]);
+
+  if (!isOnline) {
+    return (
+      <Layout>
+        <Main>
+          <PageHeader isOnline={isOnline} />
+          <Flex
+            width="100%"
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            style={{ paddingTop: '120px' }}
+          >
+            <Box paddingBottom={2}>
+              <Typography textColor="neutral700" variant="alpha">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.offline.title',
+                  defaultMessage: 'You are offline',
+                })}
+              </Typography>
+            </Box>
+            <Box paddingBottom={6}>
+              <Typography textColor="neutral700" variant="epsilon">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                  defaultMessage:
+                    'You need to be connected to the Internet to access Strapi Market.',
+                })}
+              </Typography>
+            </Box>
+            <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+          </Flex>
+        </Main>
+      </Layout>
+    );
+  }
+
   if (hasFailed) {
     return (
       <Layout>
@@ -135,29 +191,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <HeaderLayout
-          title={formatMessage({
-            id: 'admin.pages.MarketPlacePage.title',
-            defaultMessage: 'Marketplace',
-          })}
-          subtitle={formatMessage({
-            id: 'admin.pages.MarketPlacePage.subtitle',
-            defaultMessage: 'Get more out of Strapi',
-          })}
-          primaryAction={
-            <LinkButton
-              startIcon={<Upload />}
-              variant="tertiary"
-              href="https://market.strapi.io/submit-plugin"
-              onClick={() => trackUsage('didSubmitPlugin')}
-            >
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-                defaultMessage: 'Submit your plugin',
-              })}
-            </LinkButton>
-          }
-        />
+        <PageHeader isOnline={isOnline} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
@@ -198,11 +232,15 @@ const MarketPlacePage = () => {
                     plugin={plugin}
                     installedPluginNames={installedPluginNames}
                     useYarn={appInfoResponse.data.useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
                   />
                 </GridItem>
               ))}
             </Grid>
           )}
+          <Box paddingTop={7}>
+            <MissingPluginBanner />
+          </Box>
         </ContentLayout>
       </Main>
     </Layout>

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

@@ -199,7 +199,7 @@ const ProfilePage = () => {
                 title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
                   <Button startIcon={<Check />} loading={isSubmitting} type="submit">
-                    {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }
               />
@@ -218,7 +218,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.profile.title',
+                            id: 'global.profile',
                             defaultMessage: 'Profile',
                           })}
                         </Typography>
@@ -289,7 +289,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.password.title',
+                            id: 'global.change-password',
                             defaultMessage: 'Change password',
                           })}
                         </Typography>
@@ -352,7 +352,7 @@ const ProfilePage = () => {
                               onChange={handleChange}
                               value={values.password || ''}
                               label={formatMessage({
-                                id: 'Auth.form.password.label',
+                                id: 'global.password',
                                 defaultMessage: 'Password',
                               })}
                               name="password"
@@ -474,7 +474,7 @@ const ProfilePage = () => {
                                 defaultMessage: 'Interface language',
                               })}
                               placeholder={formatMessage({
-                                id: 'components.Select.placeholder',
+                                id: 'global.select',
                                 defaultMessage: 'Select',
                               })}
                               hint={formatMessage({

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -30,7 +30,7 @@ const SettingsNav = ({ menu }) => {
   });
 
   const label = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

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

@@ -47,7 +47,7 @@ function SettingsPage() {
   }
 
   const settingTitle = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/LoadingView/index.js

@@ -21,7 +21,7 @@ const LoadingView = ({ apiTokenName }) => {
       <HeaderLayout
         primaryAction={
           <Button disabled startIcon={<Check />} type="button" size="L">
-            {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
           </Button>
         }
         title={

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -159,7 +159,7 @@ const ApiTokenCreateView = () => {
                     size="L"
                   >
                     {formatMessage({
-                      id: 'app.components.Button.save',
+                      id: 'global.save',
                       defaultMessage: 'Save',
                     })}
                   </Button>
@@ -167,7 +167,7 @@ const ApiTokenCreateView = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>
@@ -188,7 +188,7 @@ const ApiTokenCreateView = () => {
                     <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'Settings.apiTokens.details',
+                          id: 'global.details',
                           defaultMessage: 'Details',
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -19,7 +19,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         }}
         label={formatMessage(
           {
-            id: 'app.component.table.delete',
+            id: 'global.delete-target',
             defaultMessage: 'Delete {target}',
           },
           { target: `${tokenName}` }

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -45,7 +45,7 @@ const ApplicationInfosPage = () => {
             <Stack spacing={5}>
               <Typography variant="delta" as="h3">
                 {formatMessage({
-                  id: 'Settings.application.details',
+                  id: 'global.details',
                   defaultMessage: 'Details',
                 })}
               </Typography>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -31,7 +31,7 @@ const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
     <Wrapper hasConditions={hasConditions} className={className}>
       <Button variant={variant} startIcon={<Cog />} onClick={onClick}>
         {formatMessage({
-          id: 'app.components.LeftMenuLinkContainer.settings',
+          id: 'global.settings',
           defaultMessage: 'Settings',
         })}
       </Button>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -24,7 +24,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                   {role
                     ? role.name
                     : formatMessage({
-                        id: 'Settings.roles.form.title',
+                        id: 'global.details',
                         defaultMessage: 'Details',
                       })}
                 </Typography>
@@ -58,7 +58,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 name="name"
                 error={errors.name && formatMessage({ id: errors.name })}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.name',
+                  id: 'global.name',
                   defaultMessage: 'Name',
                 })}
                 onChange={onChange}
@@ -70,7 +70,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
               <Textarea
                 disabled={disabled}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.description',
+                  id: 'global.description',
                   defaultMessage: 'Description',
                 })}
                 name="description"

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -117,7 +117,7 @@ const EditPage = () => {
                       size="L"
                     >
                       {formatMessage({
-                        id: 'app.components.Button.save',
+                        id: 'global.save',
                         defaultMessage: 'Save',
                       })}
                     </Button>
@@ -134,7 +134,7 @@ const EditPage = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/roles">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -69,7 +69,7 @@ const useRoleActions = () => {
       },
       {
         onClick: handleToggle,
-        label: formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' }),
+        label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),
         icon: <Trash />,
       },
     ],
@@ -114,7 +114,7 @@ const RoleListPage = () => {
           </Button>
         }
         title={formatMessage({
-          id: 'Settings.roles.title',
+          id: 'global.roles',
           defaultMessage: 'roles',
         })}
         subtitle={formatMessage({
@@ -140,7 +140,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.name',
+                    id: 'global.name',
                     defaultMessage: 'Name',
                   })}
                 </Typography>
@@ -148,7 +148,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.description',
+                    id: 'global.description',
                     defaultMessage: 'Description',
                   })}
                 </Typography>
@@ -156,7 +156,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.users',
+                    id: 'global.users',
                     defaultMessage: 'Users',
                   })}
                 </Typography>
@@ -164,7 +164,7 @@ const RoleListPage = () => {
               <Th>
                 <VisuallyHidden>
                   {formatMessage({
-                    id: 'Settings.roles.list.header.actions',
+                    id: 'global.actions',
                     defaultMessage: 'Actions',
                   })}
                 </VisuallyHidden>