+
+
+ 
+
+
+
+
+
+ {sections.map((section, index) => (
+
+ handleTopicSelect(index)}
+ >
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+ {sections[selectedTopicIndex].description}
+
+ 
+
+
+ 
+ 
+
+
+
,
+ image: readAloud
+ }, {
+ id: 'breakItDown',
+ title: messages.breakItDownTitle,
+ description: (-
+
+
),
+ image: breakItDown
+ }, {
+ id: 'slowItDown',
+ title: messages.slowItDownTitle,
+ description: (
+
),
+ image: slowItDown
+ }, {
+ id: 'addSoundCheckpoints',
+ title: messages.addSoundCheckpointsTitle,
+ description: (
+
),
+ image: addSoundCheckpoints
+ }, {
+ id: 'tinkerWithBlockOrder',
+ title: messages.tinkerWithBlockOrderTitle,
+ description:
+
,
+ image: tinkerWithBlockOrder
+ }, {
+ id: 'toLoopOrNotToLoop',
+ title: messages.toLoopOrNotTitle,
+ description: (-
+
+
),
+ image: toLoopOrNotToLoop
+ }, {
+ id: 'timingAndParallelism',
+ title: messages.timingAndParallelismTitle,
+ sectionTitle: messages.timingAndParallelismSectionTitle,
+ description: (
+
),
+ image: timingAndParallelism
+ }, {
+ id: 'thinkAboutBlockOptions',
+ title: messages.thinkAboutBlockOptionsTitle,
+ description: (
+
),
+ image: thinkAboutBlockOptions
+ }, {
+ id: 'checkTheValues',
+ title: messages.checkTheValuesTitle,
+ description:
+
,
+ image: checkTheValues
+ }, {
+ id: 'checkCodeSequence',
+ title: messages.checkCodeSequenceTitle,
+ description: -
+
+
,
+ image: checkCodeSequence
+ }, {
+ id: 'commentYourCode',
+ title: messages.commentYourCodeTitle,
+ description:
+
,
+ image: commentYourCode
+ }, {
+ id: 'takeABreak',
+ title: messages.takeABreakTitle,
+ description:
+
,
+ image: takeABreak
+ }, {
+ id: 'askForHelp',
+ title: messages.askForHelpTitle,
+ description:
+
,
+ image: askForHelp
+ }
+];
diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
index 692a9d35200..5f7f422c66d 100644
--- a/src/components/delete-button/delete-button.css
+++ b/src/components/delete-button/delete-button.css
@@ -28,6 +28,10 @@
transition: all 0.15s ease-out;
}
+.delete-button-clicked {
+ background-color: $data-primary;
+}
+
.delete-icon {
position: relative;
margin: 0.25rem;
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
index 6e84fb983f3..bdd16c7349d 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/src/components/delete-button/delete-button.jsx
@@ -16,7 +16,11 @@ const DeleteButton = props => (
tabIndex={props.tabIndex}
onClick={props.onClick}
>
-
+
(
DeleteButton.propTypes = {
className: PropTypes.string,
onClick: PropTypes.func.isRequired,
+ isConfirmationModalOpened: PropTypes.bool,
tabIndex: PropTypes.number
};
diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
new file mode 100644
index 00000000000..295bb6b5c34
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
@@ -0,0 +1,74 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-container {
+ display: flex;
+ flex-direction: row;
+ border: none;
+}
+
+.arrow-container {
+ display: flex;
+ align-items: center;
+ margin-right: -7px;
+}
+
+.arrow-container-left {
+ margin-right: -7px;
+}
+
+.arrow-container-right {
+ margin-left: -7px;
+}
+
+.body {
+ padding: 1rem 1.5rem;
+ border-radius: 0.5rem;
+ background: $looks-secondary;
+}
+
+.label {
+ color: $ui-white;
+ font-size: 1.25rem;
+ font-weight: 700;
+ margin: 1rem 0 1.5rem;
+}
+
+.button-row {
+ font-weight: bolder;
+ display: flex;
+}
+
+.button-row button {
+ display: flex;
+ gap: 0.5rem;
+ justify-content: center;
+ width: 47%;
+ padding: 0.75rem 1rem;
+ border-radius: 2rem;
+ border: 1px solid $ui-black-transparent;
+ color: $looks-secondary;
+ background: $ui-white;
+ font-weight: 600;
+ font-size: 0.85rem;
+ cursor: pointer;
+ margin: auto;
+}
+
+.button-row button.ok-button {
+ margin-left: 0;
+}
+
+.button-row button.cancel-button {
+ margin-right: 0;
+}
+
+.message {
+ margin-top: 0.25rem;
+}
+
+.delete-icon {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
new file mode 100644
index 00000000000..2a6eea9525f
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
@@ -0,0 +1,185 @@
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Box from '../box/box.jsx';
+import ReactModal from 'react-modal';
+import deleteIcon from './icon--delete.svg';
+import undoIcon from './icon--undo.svg';
+import arrowLeftIcon from './icon--arrow-left.svg';
+import arrowRightIcon from './icon--arrow-right.svg';
+
+import styles from './delete-confirmation-prompt.css';
+
+// TODO: Parametrize from outside if we want more custom messaging
+const messages = defineMessages({
+ shouldDeleteSpriteMessage: {
+ defaultMessage: 'Are you sure you want to delete this sprite?',
+ description: 'Message to indicate whether selected sprite should be deleted.',
+ id: 'gui.gui.shouldDeleteSprite'
+ },
+ shouldDeleteCostumeMessage: {
+ defaultMessage: 'Are you sure you want to delete this costume?',
+ description: 'Message to indicate whether selected costume should be deleted.',
+ id: 'gui.gui.shouldDeleteCostume'
+ },
+ shouldDeleteSoundMessage: {
+ defaultMessage: 'Are you sure you want to delete this sound?',
+ description: 'Message to indicate whether selected sound should be deleted.',
+ id: 'gui.gui.shouldDeleteSound'
+ },
+ confirmOption: {
+ defaultMessage: 'yes',
+ description: 'Yes - should delete the sprite',
+ id: 'gui.gui.confirm'
+ },
+ cancelOption: {
+ defaultMessage: 'no',
+ description: 'No - cancel deletion',
+ id: 'gui.gui.cancel'
+ },
+ confirmDeletionHeading: {
+ defaultMessage: 'Confirm Asset Deletion',
+ description: 'Heading of confirmation prompt to delete asset',
+ id: 'gui.gui.deleteAssetHeading'
+ }
+});
+
+const modalWidth = 300;
+const calculateModalPosition = (relativeElemRef, modalPosition) => {
+ const refPosition = relativeElemRef.getBoundingClientRect();
+
+ if (modalPosition === 'left') {
+ return {
+ top: refPosition.top - refPosition.height,
+ left: refPosition.left - modalWidth - 25
+ };
+ }
+
+ if (modalPosition === 'right') {
+ return {
+ top: refPosition.top - refPosition.height,
+ left: refPosition.right + 25
+ };
+ }
+
+ return {};
+};
+
+const getMessage = entityType => {
+ if (entityType === 'COSTUME') {
+ return messages.shouldDeleteCostumeMessage;
+ }
+
+ if (entityType === 'SOUND') {
+ return messages.shouldDeleteSoundMessage;
+ }
+
+ return messages.shouldDeleteSpriteMessage;
+};
+
+const DeleteConfirmationPrompt = ({
+ intl,
+ onCancel,
+ onOk,
+ modalPosition,
+ entityType,
+ relativeElemRef
+}) => {
+ const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition);
+
+ return (
+
+ { modalPosition === 'right' ?
+
+ 
+ : null }
+
+
+
+
+
+
+
+
+ {modalPosition === 'left' ?
+
+ 
+ : null }
+
+ );
+};
+
+DeleteConfirmationPrompt.propTypes = {
+ onOk: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ relativeElemRef: PropTypes.object,
+ entityType: PropTypes.string,
+ modalPosition: PropTypes.string,
+ intl: intlShape.isRequired
+};
+
+const DeleteConfirmationPromptIntl = injectIntl(DeleteConfirmationPrompt);
+
+export default DeleteConfirmationPromptIntl;
diff --git a/src/components/delete-confirmation-prompt/icon--arrow-left.svg b/src/components/delete-confirmation-prompt/icon--arrow-left.svg
new file mode 100644
index 00000000000..0712a6f88b8
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--arrow-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/delete-confirmation-prompt/icon--arrow-right.svg b/src/components/delete-confirmation-prompt/icon--arrow-right.svg
new file mode 100644
index 00000000000..cc59340dc3f
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--arrow-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/delete-confirmation-prompt/icon--delete.svg b/src/components/delete-confirmation-prompt/icon--delete.svg
new file mode 100644
index 00000000000..4be0a2a3caf
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--delete.svg
@@ -0,0 +1,18 @@
+
+
\ No newline at end of file
diff --git a/src/components/delete-confirmation-prompt/icon--undo.svg b/src/components/delete-confirmation-prompt/icon--undo.svg
new file mode 100644
index 00000000000..44c9517b707
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--undo.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 166811ff5f1..c09a3d084cf 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -40,6 +40,7 @@ import addExtensionIcon from './icon--extensions.svg';
import codeIcon from './icon--code.svg';
import costumesIcon from './icon--costumes.svg';
import soundsIcon from './icon--sounds.svg';
+import DebugModal from '../debug-modal/debug-modal.jsx';
const messages = defineMessages({
addExtension: {
@@ -82,6 +83,7 @@ const GUIComponent = props => {
connectionModalVisible,
costumeLibraryVisible,
costumesTabVisible,
+ debugModalVisible,
enableCommunity,
intl,
isCreating,
@@ -111,6 +113,7 @@ const GUIComponent = props => {
onProjectTelemetryEvent,
onRequestCloseBackdropLibrary,
onRequestCloseCostumeLibrary,
+ onRequestCloseDebugModal,
onRequestCloseTelemetryModal,
onSeeCommunity,
onShare,
@@ -210,6 +213,10 @@ const GUIComponent = props => {
onRequestClose={onRequestCloseCostumeLibrary}
/>
) : null}
+ { this.constructKey(item) === id));
}
handleClose () {
this.props.onRequestClose();
@@ -119,7 +143,8 @@ class LibraryComponent extends React.Component {
selectedTag: tag.toLowerCase()
});
} else {
- this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+ this.props.onItemMouseLeave((this.getFilteredData()
+ .find(item => this.constructKey(item) === this.state.playingItem)));
this.setState({
filterQuery: '',
playingItem: null,
@@ -130,7 +155,8 @@ class LibraryComponent extends React.Component {
handleMouseEnter (id) {
// don't restart if mouse over already playing item
if (this.props.onItemMouseEnter && this.state.playingItem !== id) {
- this.props.onItemMouseEnter(this.getFilteredData()[id]);
+ this.props.onItemMouseEnter(this.getFilteredData()
+ .find(item => this.constructKey(item) === id));
this.setState({
playingItem: id
});
@@ -138,7 +164,8 @@ class LibraryComponent extends React.Component {
}
handleMouseLeave (id) {
if (this.props.onItemMouseLeave) {
- this.props.onItemMouseLeave(this.getFilteredData()[id]);
+ this.props.onItemMouseLeave(this.getFilteredData()
+ .find(item => this.constructKey(item) === id));
this.setState({
playingItem: null
});
@@ -158,7 +185,8 @@ class LibraryComponent extends React.Component {
selectedTag: ALL_TAG.tag
});
} else {
- this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+ this.props.onItemMouseLeave(this.getFilteredData()
+ .find(item => this.constructKey(item) === this.state.playingItem));
this.setState({
filterQuery: event.target.value,
playingItem: null,
@@ -170,13 +198,8 @@ class LibraryComponent extends React.Component {
this.setState({filterQuery: ''});
}
getFilteredData () {
- if (this.state.selectedTag === 'all') {
- if (!this.state.filterQuery) {
- if (this.state.showCount !== this.props.data.length) {
- return this.props.data.slice(0, this.state.showCount);
- }
- return this.props.data;
- }
+ if (this.state.selectedTag === ALL_TAG.tag) {
+ if (!this.state.filterQuery) return this.props.data;
return this.props.data.filter(dataItem => (
(dataItem.tags || [])
// Second argument to map sets `this`
@@ -198,12 +221,71 @@ class LibraryComponent extends React.Component {
.indexOf(this.state.selectedTag) !== -1
));
}
+ constructKey (data) {
+ return typeof data.name === 'string' ? data.name : data.rawURL;
+ }
scrollToTop () {
this.filteredDataRef.scrollTop = 0;
}
setFilteredDataRef (ref) {
this.filteredDataRef = ref;
}
+ renderElement (data) {
+ const key = this.constructKey(data);
+ const iconSource = getItemImageSource(data);
+ const icons = data.json && data.json.costumes.map(getItemImageSource);
+ return (
- {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
- const iconSource = getItemImageSource(dataItem);
- const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
- return (
![]()
+
@@ -900,6 +921,7 @@ MenuBar.propTypes = {
onLogOut: PropTypes.func,
onOpenRegistration: PropTypes.func,
onOpenTipLibrary: PropTypes.func,
+ onOpenDebugModal: PropTypes.func,
onProjectTelemetryEvent: PropTypes.func,
onRequestCloseAbout: PropTypes.func,
onRequestCloseAccount: PropTypes.func,
@@ -963,6 +985,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = dispatch => ({
autoUpdateProject: () => dispatch(autoUpdateProject()),
onOpenTipLibrary: () => dispatch(openTipsLibrary()),
+ onOpenDebugModal: () => dispatch(openDebugModal()),
onClickAccount: () => dispatch(openAccountMenu()),
onRequestCloseAccount: () => dispatch(closeAccountMenu()),
onClickFile: () => dispatch(openFileMenu()),
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 458df186f94..1c3a7f4c9de 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -50,6 +50,7 @@ const SpriteSelectorItem = props => (
{(props.selected && props.onDeleteButtonClick) ? (
+ )
+ }, {
title: (
<%= htmlWebpackPlugin.options.title %>
+ <% if (htmlWebpackPlugin.options.gtm_id) { %>
+
+
+
+ <% } %>
diff --git a/src/reducers/modals.js b/src/reducers/modals.js
index 2e69bf8ba75..5bec3699a1e 100644
--- a/src/reducers/modals.js
+++ b/src/reducers/modals.js
@@ -3,6 +3,7 @@ const CLOSE_MODAL = 'scratch-gui/modals/CLOSE_MODAL';
const MODAL_BACKDROP_LIBRARY = 'backdropLibrary';
const MODAL_COSTUME_LIBRARY = 'costumeLibrary';
+const MODAL_DEBUG = 'debugModal';
const MODAL_EXTENSION_LIBRARY = 'extensionLibrary';
const MODAL_LOADING_PROJECT = 'loadingProject';
const MODAL_TELEMETRY = 'telemetryModal';
@@ -15,6 +16,7 @@ const MODAL_TIPS_LIBRARY = 'tipsLibrary';
const initialState = {
[MODAL_BACKDROP_LIBRARY]: false,
[MODAL_COSTUME_LIBRARY]: false,
+ [MODAL_DEBUG]: false,
[MODAL_EXTENSION_LIBRARY]: false,
[MODAL_LOADING_PROJECT]: false,
[MODAL_TELEMETRY]: false,
@@ -58,6 +60,9 @@ const openBackdropLibrary = function () {
const openCostumeLibrary = function () {
return openModal(MODAL_COSTUME_LIBRARY);
};
+const openDebugModal = function () {
+ return openModal(MODAL_DEBUG);
+};
const openExtensionLibrary = function () {
return openModal(MODAL_EXTENSION_LIBRARY);
};
@@ -88,6 +93,9 @@ const closeBackdropLibrary = function () {
const closeCostumeLibrary = function () {
return closeModal(MODAL_COSTUME_LIBRARY);
};
+const closeDebugModal = function () {
+ return closeModal(MODAL_DEBUG);
+};
const closeExtensionLibrary = function () {
return closeModal(MODAL_EXTENSION_LIBRARY);
};
@@ -117,6 +125,7 @@ export {
initialState as modalsInitialState,
openBackdropLibrary,
openCostumeLibrary,
+ openDebugModal,
openExtensionLibrary,
openLoadingProject,
openSoundLibrary,
@@ -127,6 +136,7 @@ export {
openConnectionModal,
closeBackdropLibrary,
closeCostumeLibrary,
+ closeDebugModal,
closeExtensionLibrary,
closeLoadingProject,
closeSpriteLibrary,
diff --git a/test/helpers/selenium-helper.js b/test/helpers/selenium-helper.js
index a2ae9ab8ba8..60d86649aa9 100644
--- a/test/helpers/selenium-helper.js
+++ b/test/helpers/selenium-helper.js
@@ -236,8 +236,13 @@ class SeleniumHelper {
const outerError = new Error(`loadUri failed with arguments:\n\turi: ${uri}`);
try {
await this.setTitle(`loadUri ${uri}`);
+ // TODO: The height is set artificially high to fix this test:
+ // 'Loading with locale shows correct translation for string length block parameter'
+ // which fails because the block is offscreen.
+ // We should set this back to 1024x768 once we find a good way to fix that test.
+ // Using `scrollIntoView` didn't seem to do the trick.
const WINDOW_WIDTH = 1024;
- const WINDOW_HEIGHT = 768;
+ const WINDOW_HEIGHT = 960;
await this.driver
.get(`file://${uri}`);
await this.driver
diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
index 577031f37d6..494d7ce4ef5 100644
--- a/test/integration/how-tos.test.js
+++ b/test/integration/how-tos.test.js
@@ -27,8 +27,8 @@ describe('Working with the how-to library', () => {
await loadUri(uri);
await clickText('Costumes');
await clickXpath('//*[@aria-label="Tutorials"]');
- await clickText('Getting Started'); // Modal should close
- // Make sure YouTube video on first card appears
+ await clickText('Add a Backdrop'); // Modal should close
+ // Make sure YouTube video on card appears
await findByXpath('//div[contains(@class, "step-video")]');
const logs = await getLogs();
await expect(logs).toEqual([]);
diff --git a/test/integration/menu-bar.test.js b/test/integration/menu-bar.test.js
index 45d6ec4e7c9..33a6353e61c 100644
--- a/test/integration/menu-bar.test.js
+++ b/test/integration/menu-bar.test.js
@@ -84,6 +84,7 @@ describe('Menu bar settings', () => {
// Change the project by deleting a sprite
await rightClickText('Sprite1', scope.spriteTile);
await clickText('delete', scope.spriteTile);
+ await clickText('yes', scope.modal);
await clickXpath(FILE_MENU_XPATH);
await clickText('Load from your computer');
diff --git a/test/integration/sprites.test.js b/test/integration/sprites.test.js
index 40677246cda..c798e0a1792 100644
--- a/test/integration/sprites.test.js
+++ b/test/integration/sprites.test.js
@@ -68,6 +68,7 @@ describe('Working with sprites', () => {
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
await rightClickText('Sprite1', scope.spriteTile);
await clickText('delete', scope.spriteTile);
+ await clickText('yes', scope.modal);
// Confirm that the stage has been switched to
await findByText('Stage selected: no motion blocks');
const logs = await getLogs();
@@ -78,6 +79,7 @@ describe('Working with sprites', () => {
await loadUri(uri);
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
await clickXpath('//*[@aria-label="Delete"]'); // Only visible close button is on the sprite
+ await clickText('yes', scope.modal);
// Confirm that the stage has been switched to
await findByText('Stage selected: no motion blocks');
const logs = await getLogs();
diff --git a/test/integration/stage-size.test.js b/test/integration/stage-size.test.js
index ca235905079..0c3510140ff 100644
--- a/test/integration/stage-size.test.js
+++ b/test/integration/stage-size.test.js
@@ -27,12 +27,14 @@ describe('Loading scratch gui', () => {
test('Switching small/large stage after highlighting and deleting sprite', async () => {
await loadUri(uri);
- // Highlight the sprite
- await clickText('Sprite1', scope.spriteTile);
+ await new Promise((r) => setTimeout(r, 500)); // wait for animation
+
// Delete it
await rightClickText('Sprite1', scope.spriteTile);
+
await clickText('delete', scope.spriteTile);
+ await clickText('yes', scope.modal);
// Go to small stage mode
await clickXpath('//button[@title="Switch to small stage"]');
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index f7f19434a61..14936897676 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -53,7 +53,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
tabIndex={0}
>
![]()
![]()
jest.fn(() => null));
describe('SpriteSelectorItem Container', () => {
const mockStore = configureStore();
let className;
@@ -17,11 +20,12 @@ describe('SpriteSelectorItem Container', () => {
let selected;
let id;
let store;
+ let vm;
// Wrap this in a function so it gets test specific states and can be reused.
- const getContainer = function () {
+ const getContainer = function (withDeleteConfirmation) {
return (
- {
selected={selected}
onClick={onClick}
onDeleteButtonClick={onDeleteButtonClick}
+ vm={vm}
+ withDeleteConfirmation={withDeleteConfirmation}
/>
);
};
beforeEach(() => {
- store = mockStore({scratchGui: {
- hoveredTarget: {receivedBlocks: false, sprite: null},
- assetDrag: {dragging: false}
- }});
className = 'ponies';
costumeURL = 'https://scratch.mit.edu/foo/bar/pony';
id = 1337;
@@ -48,11 +50,29 @@ describe('SpriteSelectorItem Container', () => {
onDeleteButtonClick = jest.fn();
dispatchSetHoveredSprite = jest.fn();
selected = true;
+ vm = new VM();
+ store = mockStore({scratchGui: {
+ hoveredTarget: {receivedBlocks: false, sprite: null},
+ assetDrag: {dragging: false},
+ vm
+ }});
});
- test('should delete the sprite', () => {
+ test('should delete the sprite, when called without `withDeleteConfirmation`', () => {
const wrapper = mountWithIntl(getContainer());
+
wrapper.find(DeleteButton).simulate('click');
+ expect(DeleteConfirmationPrompt).not.toHaveBeenCalled();
expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
});
+
+ test('should initiate sprite deletion, when called `withDeleteConfirmation`', () => {
+ const wrapper = mountWithIntl(getContainer(true));
+
+ expect(DeleteConfirmationPrompt).not.toHaveBeenCalled();
+
+ wrapper.find(DeleteButton).simulate('click');
+
+ expect(DeleteConfirmationPrompt).toHaveBeenCalled();
+ });
});
diff --git a/webpack.config.js b/webpack.config.js
index fbd2a5eeb0d..0ec57fa85e7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,11 +9,24 @@ const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
// const STATIC_PATH = process.env.STATIC_PATH || '/static';
+const commonHtmlWebpackPluginOptions = {
+ // Google Tag Manager ID
+ // Looks like 'GTM-XXXXXXX'
+ gtm_id: process.env.GTM_ID || '',
+
+ // Google Tag Manager env & auth info for alterative GTM environments
+ // Looks like '>m_auth=0123456789abcdefghijklm>m_preview=env-00>m_cookies_win=x'
+ // Taken from the middle of: GTM -> Admin -> Environments -> (environment) -> Get Snippet
+ // Blank for production
+ gtm_env_auth: process.env.GTM_ENV_AUTH || ''
+};
+
const baseConfig = new ScratchWebpackConfigBuilder(
{
rootPath: path.resolve(__dirname),
enableReact: true,
- shouldSplitChunks: true
+ shouldSplitChunks: false,
+ publicPath: 'auto'
})
.setTarget('browserslist')
.merge({
@@ -29,9 +42,6 @@ const baseConfig = new ScratchWebpackConfigBuilder(
Buffer: require.resolve('buffer/'),
stream: require.resolve('stream-browserify')
}
- },
- optimization: {
- runtimeChunk: 'single'
}
})
.addModuleRule({
@@ -84,6 +94,7 @@ const distConfig = baseConfig.clone()
path: path.resolve(__dirname, 'dist')
}
})
+ .addExternals(['react', 'react-dom'])
.addPlugin(
new CopyWebpackPlugin({
patterns: [
@@ -98,7 +109,7 @@ const distConfig = baseConfig.clone()
// build the examples and debugging tools in `build/`
const buildConfig = baseConfig.clone()
- .enableDevServer(process.env.PORT || 8602)
+ .enableDevServer(process.env.PORT || 8601)
.merge({
entry: {
gui: './src/playground/index.jsx',
@@ -111,23 +122,27 @@ const buildConfig = baseConfig.clone()
}
})
.addPlugin(new HtmlWebpackPlugin({
+ ...commonHtmlWebpackPluginOptions,
chunks: ['gui'],
template: 'src/playground/index.ejs',
title: 'Scratch 3.0 GUI'
}))
.addPlugin(new HtmlWebpackPlugin({
+ ...commonHtmlWebpackPluginOptions,
chunks: ['blocksonly'],
filename: 'blocks-only.html',
template: 'src/playground/index.ejs',
title: 'Scratch 3.0 GUI: Blocks Only Example'
}))
.addPlugin(new HtmlWebpackPlugin({
+ ...commonHtmlWebpackPluginOptions,
chunks: ['compatibilitytesting'],
filename: 'compatibility-testing.html',
template: 'src/playground/index.ejs',
title: 'Scratch 3.0 GUI: Compatibility Testing'
}))
.addPlugin(new HtmlWebpackPlugin({
+ ...commonHtmlWebpackPluginOptions,
chunks: ['player'],
filename: 'player.html',
template: 'src/playground/index.ejs',
+ {key === 'undefined' ?
+ null :
+
+ {this.props.intl.formatMessage(messages[key])}
+
+ }
+
));
+ }
render () {
return (
+ {values.map(item => this.renderElement(item))}
+
+
+
+
+
+ )
+ }, {
title: (
- )
- }, {
- title: (
-