diff --git a/packages/core/admin/admin/src/pages/Admin/index.js b/packages/core/admin/admin/src/pages/Admin/index.js index d2b3a319b7..f1195fa0d5 100644 --- a/packages/core/admin/admin/src/pages/Admin/index.js +++ b/packages/core/admin/admin/src/pages/Admin/index.js @@ -27,6 +27,7 @@ const MarketplacePage = lazy(() => import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage') ); const NotFoundPage = lazy(() => import('../NotFoundPage')); +const InternalErrorPage = lazy(() => import('../InternalErrorPage')); const ProfilePage = lazy(() => import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage') @@ -87,6 +88,7 @@ const Admin = () => { + diff --git a/packages/core/admin/admin/src/pages/InternalErrorPage/index.js b/packages/core/admin/admin/src/pages/InternalErrorPage/index.js new file mode 100644 index 0000000000..be94f94e65 --- /dev/null +++ b/packages/core/admin/admin/src/pages/InternalErrorPage/index.js @@ -0,0 +1,53 @@ +/** + * InternalErrorPage + * + * This is the page we show when the user gets a 500 error + * + */ +import React from 'react'; +import { useFocusWhenNavigate } from '@strapi/helper-plugin'; +import { Main } from '@strapi/design-system/Main'; +import { LinkButton } from '@strapi/design-system/LinkButton'; +import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout'; +import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; +import EmptyPictures from '@strapi/icons/EmptyPictures'; +import ArrowRight from '@strapi/icons/ArrowRight'; +import { useIntl } from 'react-intl'; + +const InternalErrorPage = () => { + const { formatMessage } = useIntl(); + useFocusWhenNavigate(); + + return ( +
+ + + } to="/"> + {formatMessage({ + id: 'app.components.NotFoundPage.back', + defaultMessage: 'Back to homepage', + })} + + } + content={formatMessage({ + id: 'notification.error', + defaultMessage: 'An error occured', + })} + hasRadius + icon={} + shadow="tableShadow" + /> + +
+ ); +}; + +export default InternalErrorPage; diff --git a/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js new file mode 100644 index 0000000000..a5e600baaf --- /dev/null +++ b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js @@ -0,0 +1,451 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { Router } from 'react-router-dom'; +import { createMemoryHistory } from 'history'; +import { IntlProvider } from 'react-intl'; +import { ThemeProvider, lightTheme } from '@strapi/design-system'; +import InternalErrorPage from '../index'; + +const history = createMemoryHistory(); + +const App = ( + + + + + + + +); + +describe('InternalErrorPage', () => { + it('renders and matches the snapshot', () => { + const { + container: { firstChild }, + } = render(App); + + expect(firstChild).toMatchInlineSnapshot(` + .c12 { + color: #666687; + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + } + + .c7 { + background: #ffffff; + padding: 64px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c9 { + padding-bottom: 24px; + } + + .c11 { + padding-bottom: 16px; + } + + .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + } + + .c10 svg { + height: 5.5rem; + } + + .c0:focus-visible { + outline: none; + } + + .c16 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; + } + + .c18 { + padding-left: 8px; + } + + .c13 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; + } + + .c13 svg { + height: 12px; + width: 12px; + } + + .c13 svg > g, + .c13 svg path { + fill: #ffffff; + } + + .c13[aria-disabled='true'] { + pointer-events: none; + } + + .c13:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; + } + + .c13:focus-visible { + outline: none; + } + + .c13:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c14 { + padding: 8px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; + } + + .c14 .c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c14 .c15 { + color: #ffffff; + } + + .c14[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c14[aria-disabled='true'] .c15 { + color: #666687; + } + + .c14[aria-disabled='true'] svg > g, + .c14[aria-disabled='true'] svg path { + fill: #666687; + } + + .c14[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c14[aria-disabled='true']:active .c15 { + color: #666687; + } + + .c14[aria-disabled='true']:active svg > g, + .c14[aria-disabled='true']:active svg path { + fill: #666687; + } + + .c14:hover { + background-color: #ffffff; + } + + .c14:active { + background-color: #ffffff; + border: 1px solid #4945ff; + } + + .c14:active .c15 { + color: #4945ff; + } + + .c14:active svg > g, + .c14:active svg path { + fill: #4945ff; + } + + .c14 .c15 { + color: #271fe0; + } + + .c14 svg > g, + .c14 svg path { + fill: #271fe0; + } + + .c1 { + background: #f6f6f9; + padding-top: 40px; + padding-right: 56px; + padding-bottom: 40px; + padding-left: 56px; + } + + .c6 { + padding-right: 56px; + padding-left: 56px; + } + + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c4 { + color: #32324d; + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + } + + .c5 { + color: #666687; + font-size: 1rem; + line-height: 1.5; + } + +
+
+
+
+
+

+ Page not found +

+
+
+

+

+
+
+
+ +
+

+ An error occured +

+
+ + + Back to homepage + + + +
+
+
+ `); + }); +}); diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/index.js b/packages/core/admin/admin/src/pages/NotFoundPage/index.js index 47fea7054a..190b4ff6a1 100644 --- a/packages/core/admin/admin/src/pages/NotFoundPage/index.js +++ b/packages/core/admin/admin/src/pages/NotFoundPage/index.js @@ -4,7 +4,50 @@ * This is the page we show when the user visits a url that doesn't have a route * */ +import React from 'react'; +import { useFocusWhenNavigate } from '@strapi/helper-plugin'; +import { Main } from '@strapi/design-system/Main'; +import { LinkButton } from '@strapi/design-system/LinkButton'; +import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout'; +import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; +import EmptyPictures from '@strapi/icons/EmptyPictures'; +import ArrowRight from '@strapi/icons/ArrowRight'; +import { useIntl } from 'react-intl'; -const NotFoundPage = () => 'TODO NOT FOUND'; +const NoContentType = () => { + const { formatMessage } = useIntl(); + useFocusWhenNavigate(); -export default NotFoundPage; + return ( +
+ + + } to="/"> + {formatMessage({ + id: 'app.components.NotFoundPage.back', + defaultMessage: 'Back to homepage', + })} + + } + content={formatMessage({ + id: 'app.page.not.found', + defaultMessage: "Oops! We can't seem to find the page you're looging for...", + })} + hasRadius + icon={} + shadow="tableShadow" + /> + +
+ ); +}; + +export default NoContentType; diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js new file mode 100644 index 0000000000..b3ead52062 --- /dev/null +++ b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js @@ -0,0 +1,451 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { Router } from 'react-router-dom'; +import { createMemoryHistory } from 'history'; +import { IntlProvider } from 'react-intl'; +import { ThemeProvider, lightTheme } from '@strapi/design-system'; +import NotFoundPage from '../index'; + +const history = createMemoryHistory(); + +const App = ( + + + + + + + +); + +describe('NotFoundPage', () => { + it('renders and matches the snapshot', () => { + const { + container: { firstChild }, + } = render(App); + + expect(firstChild).toMatchInlineSnapshot(` + .c12 { + color: #666687; + font-weight: 500; + font-size: 1rem; + line-height: 1.25; + } + + .c7 { + background: #ffffff; + padding: 64px; + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + } + + .c9 { + padding-bottom: 24px; + } + + .c11 { + padding-bottom: 16px; + } + + .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + } + + .c10 svg { + height: 5.5rem; + } + + .c0:focus-visible { + outline: none; + } + + .c16 { + font-weight: 600; + color: #32324d; + font-size: 0.75rem; + line-height: 1.33; + } + + .c18 { + padding-left: 8px; + } + + .c13 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; + } + + .c13 svg { + height: 12px; + width: 12px; + } + + .c13 svg > g, + .c13 svg path { + fill: #ffffff; + } + + .c13[aria-disabled='true'] { + pointer-events: none; + } + + .c13:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; + } + + .c13:focus-visible { + outline: none; + } + + .c13:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c14 { + padding: 8px 16px; + background: #4945ff; + border: none; + border-radius: 4px; + border: 1px solid #d9d8ff; + background: #f0f0ff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-text-decoration: none; + text-decoration: none; + } + + .c14 .c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c14 .c15 { + color: #ffffff; + } + + .c14[aria-disabled='true'] { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c14[aria-disabled='true'] .c15 { + color: #666687; + } + + .c14[aria-disabled='true'] svg > g, + .c14[aria-disabled='true'] svg path { + fill: #666687; + } + + .c14[aria-disabled='true']:active { + border: 1px solid #dcdce4; + background: #eaeaef; + } + + .c14[aria-disabled='true']:active .c15 { + color: #666687; + } + + .c14[aria-disabled='true']:active svg > g, + .c14[aria-disabled='true']:active svg path { + fill: #666687; + } + + .c14:hover { + background-color: #ffffff; + } + + .c14:active { + background-color: #ffffff; + border: 1px solid #4945ff; + } + + .c14:active .c15 { + color: #4945ff; + } + + .c14:active svg > g, + .c14:active svg path { + fill: #4945ff; + } + + .c14 .c15 { + color: #271fe0; + } + + .c14 svg > g, + .c14 svg path { + fill: #271fe0; + } + + .c1 { + background: #f6f6f9; + padding-top: 40px; + padding-right: 56px; + padding-bottom: 40px; + padding-left: 56px; + } + + .c6 { + padding-right: 56px; + padding-left: 56px; + } + + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c4 { + color: #32324d; + font-weight: 600; + font-size: 2rem; + line-height: 1.25; + } + + .c5 { + color: #666687; + font-size: 1rem; + line-height: 1.5; + } + +
+
+
+
+
+

+ Page not found +

+
+
+

+

+
+
+
+ +
+

+ Oops! We can't seem to find the page you're looging for... +

+
+ + + Back to homepage + + + +
+
+
+ `); + }); +}); diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index a7c3802140..39dd5a0f00 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -362,6 +362,7 @@ "app.containers.Users.EditPage.roles-bloc-title": "Attributed roles", "app.containers.Users.ModalForm.footer.button-success": "Invite user", "app.links.configure-view": "Configure the view", + "app.page.not.found": "Oops! We can't seem to find the page you're looging for...", "app.static.links.cheatsheet": "CheatSheet", "app.utils.SelectOption.defaultMessage": " ", "app.utils.add-filter": "Add filter", diff --git a/packages/core/strapi/package.json b/packages/core/strapi/package.json index 88b10ea12e..1607dc7d58 100644 --- a/packages/core/strapi/package.json +++ b/packages/core/strapi/package.json @@ -117,7 +117,7 @@ "koa-session": "6.2.0", "koa-static": "5.0.0", "lodash": "4.17.21", - "node-fetch": "2.6.5", + "node-fetch": "2.6.7", "node-machine-id": "1.1.12", "node-schedule": "2.0.0", "open": "8.2.1", diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js index 85963c0903..97ae171c8b 100644 --- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js +++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js @@ -114,7 +114,7 @@ export const PreviewBox = ({ const nextAsset = { ...asset, width, height }; const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt); - await upload(file); + await upload({ name: file.name, rawFile: file }); trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation }); diff --git a/yarn.lock b/yarn.lock index afe6053414..5528a62141 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16070,14 +16070,7 @@ node-dir@^0.1.10: dependencies: minimatch "^3.0.2" -node-fetch@2.6.5: - version "2.6.5" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd" - integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ== - dependencies: - whatwg-url "^5.0.0" - -node-fetch@^2.2.0, node-fetch@^2.3.0, node-fetch@^2.6.1, node-fetch@^2.6.7: +node-fetch@2.6.7, node-fetch@^2.2.0, node-fetch@^2.3.0, node-fetch@^2.6.1, node-fetch@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==