[UEPR-518] Implement in-editor Manual Save Project Thumbnail logic

packages/scratch-gui/src/components/alerts/alert.css

@@ -5,6 +5,7 @@
 body .alert {
     width: 100%;
     display: flex;
+    box-sizing: border-box;
     flex-direction: row;
     overflow: hidden;
     justify-content: flex-start;
@@ -30,6 +31,11 @@ body .alert {
     box-shadow: 0px 0px 0px 2px $extensions-light;
 }
 
+.alert.blue {
+    border: 1px solid #4C97FF;
+    background: #E4F0FF;
+}
+
 .alert-spinner {
     self-align: center;
 }

packages/scratch-gui/src/components/button/button.jsx

@@ -11,6 +11,7 @@ const ButtonComponent = ({
     iconSrc,
     onClick,
     children,
+    componentRef,
     ...props
 }) => {
 
@@ -33,6 +34,7 @@ const ButtonComponent = ({
                 className
             )}
             onClick={onClick}
+            ref={componentRef}
             {...props}
         >
             {icon}
@@ -47,7 +49,8 @@ ButtonComponent.propTypes = {
     disabled: PropTypes.bool,
     iconClassName: PropTypes.string,
     iconSrc: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    componentRef: PropTypes.func
 };
 
 export default ButtonComponent;

packages/scratch-gui/src/components/confirmation-prompt/confirmation-prompt.css

@@ -0,0 +1,70 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-container {
+    display: flex;
+    width: 200px;
+    padding: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: #855CD6;
+    gap: 15px;
+    box-sizing: border-box;
+}
+
+.label {
+    align-self: stretch;
+    color: var(--White-White, #FFF);
+    text-align: center;
+    font-family: "Helvetica Neue";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+}
+
+.button-row {
+    font-weight: bolder;
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.button-row button {
+    all: unset;
+    display: flex;
+    padding: 8px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 40px;
+    background: inherit;
+    cursor: pointer;
+}
+
+.button-row button:focus {
+    outline: auto;
+}
+
+.button-row button span {
+    color: var(--white-white-100, #FFF);
+    font-family: "Helvetica Neue";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 16px;
+}
+
+.button-row button.confirm-button {
+    background: var(--White-White, #FFF);
+}
+
+.button-row button.confirm-button span {
+    color: var(--Looks-Purple-2, #855CD6);
+}
+
+.button-row button.cancel-button {
+    border: 1px solid var(--white-white-100, #FFF);
+}

packages/scratch-gui/src/components/confirmation-prompt/confirmation-prompt.jsx

@@ -0,0 +1,190 @@
+import React, {useRef, useCallback, useEffect} from 'react';
+import debounce from 'lodash.debounce';
+import PropTypes from 'prop-types';
+import ReactModal from 'react-modal';
+import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
+
+import Box from '../box/box.jsx';
+
+import arrowLeftIcon from './icon--arrow-left.svg';
+import arrowRightIcon from './icon--arrow-right.svg';
+import arrowDownIcon from './icon--arrow-down.svg';
+import arrowUpIcon from './icon--arrow-up.svg';
+
+import styles from './confirmation-prompt.css';
+import useCalculatePopupPosition from '../../hooks/calculatePopupPosition.js';
+
+const messages = defineMessages({
+    defaultConfirmLabel: {
+        defaultMessage: 'yes',
+        description: 'Label for confirm button in confirmation prompt',
+        id: 'gui.confirmationPrompt.confirm'
+    },
+    defaultCancelLabel: {
+        defaultMessage: 'no',
+        description: 'Label for cancel button in confirmation prompt',
+        id: 'gui.confirmationPrompt.cancel'
+    }
+});
+
+const modalWidth = 200;
+const spaceForArrow = 16;
+const arrowOffsetFromEnd = 7;
+const arrowLongSide = 29;
+const arrowShortSide = 13;
+
+const ConfirmationPrompt = ({
+    title,
+    message,
+    confirmLabel,
+    cancelLabel,
+    onConfirm,
+    onCancel,
+    isOpen,
+    relativeElementRef,
+    primaryPosition,
+    secondaryPosition
+}) => {
+    const intl = useIntl();
+
+    const modalRef = useRef(null);
+    const [modalPositionValues, setModalPositionValues] = React.useState({});
+
+    const updatePosition = useCallback(() => {
+        if (relativeElementRef.current && modalRef.current) {
+            const pos = useCalculatePopupPosition({
+                relativeElementRef,
+                popupRef: modalRef,
+                primaryPosition,
+                secondaryPosition,
+                popupWidth: modalWidth,
+                arrowLeftIcon,
+                arrowRightIcon,
+                arrowUpIcon,
+                arrowDownIcon,
+                spaceForArrow,
+                arrowOffsetFromEnd,
+                arrowShortSide,
+                arrowLongSide
+            });
+            setModalPositionValues(pos);
+        }
+    }, [relativeElementRef, primaryPosition, secondaryPosition]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const debouncedUpdate = debounce(updatePosition, 50, {leading: true});
+
+        debouncedUpdate();
+
+        window.addEventListener('resize', debouncedUpdate);
+        return () => window.removeEventListener('resize', debouncedUpdate);
+    }, [isOpen, relativeElementRef, primaryPosition, secondaryPosition]);
+
+    const onModalMount = useCallback(el => {
+        if (!el || !isOpen) return;
+        modalRef.current = el;
+
+        updatePosition();
+    }, [isOpen, relativeElementRef, primaryPosition, secondaryPosition]);
+
+    return (
+        isOpen && (
+            <ReactModal
+                isOpen
+                onRequestClose={onCancel}
+                contentLabel={intl.formatMessage(title)}
+                style={{
+                    content: {
+                        top: modalPositionValues.top,
+                        left: modalPositionValues.left,
+                        width: modalWidth,
+                        border: 'none',
+                        height: 'fit-content',
+                        backgroundColor: 'transparent',
+                        padding: 0,
+                        margin: 0,
+                        position: 'absolute',
+                        overflowX: 'hidden',
+                        zIndex: 1000
+                    },
+                    overlay: {
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 510,
+                        backgroundColor: 'transparent'
+                    }
+                }}
+            >
+                {modalPositionValues.arrowIcon && (
+                    <img
+                        src={modalPositionValues.arrowIcon}
+                        style={{
+                            position: 'fixed',
+                            top: modalPositionValues.arrowTop,
+                            left: modalPositionValues.arrowLeft,
+                            width: (primaryPosition === 'left' || primaryPosition === 'right') ?
+                                arrowShortSide : arrowLongSide,
+                            height: (primaryPosition === 'left' || primaryPosition === 'right') ?
+                                arrowLongSide : arrowShortSide,
+                            zIndex: 1001
+                        }}
+                    />
+                )}
+                <Box
+                    className={styles.modalContainer}
+                    componentRef={onModalMount}
+                >
+                    <Box className={styles.label}>
+                        {message}
+                    </Box>
+
+                    <Box className={styles.buttonRow}>
+                        <button
+                            onClick={onCancel}
+                            className={styles.cancelButton}
+                        >
+                            {cancelLabel ?? <FormattedMessage {...messages.defaultCancelLabel} />}
+                        </button>
+
+                        <button
+                            onClick={onConfirm}
+                            className={styles.confirmButton}
+                        >
+                            {confirmLabel ?? <FormattedMessage {...messages.defaultConfirmLabel} />}
+                        </button>
+                    </Box>
+                </Box>
+            </ReactModal>
+        )
+    );
+};
+
+ConfirmationPrompt.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    title: PropTypes.string.isRequired,
+    message: PropTypes.node.isRequired,
+    confirmLabel: PropTypes.node,
+    cancelLabel: PropTypes.node,
+    onConfirm: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    relativeElementRef: PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    primaryPosition: PropTypes.oneOf([
+        'left',
+        'right',
+        'up',
+        'down'
+    ]).isRequired,
+    secondaryPosition: PropTypes.oneOf([
+        'left',
+        'right',
+        'up',
+        'down'
+    ])
+};
+
+export default ConfirmationPrompt;

packages/scratch-gui/src/components/gui/gui.jsx

@@ -259,11 +259,6 @@ const GUIComponent = props => {
                 isRendererSupported={isRendererSupported}
                 isRtl={isRtl}
                 loading={loading}
-                manuallySaveThumbnails={
-                    manuallySaveThumbnails &&
-                    userOwnsProject
-                }
-                onUpdateProjectThumbnail={onUpdateProjectThumbnail}
                 stageSize={STAGE_SIZE_MODES.large}
                 vm={vm}
             >
@@ -545,6 +540,10 @@ const GUIComponent = props => {
                                 vm={vm}
                                 ariaRole="region"
                                 ariaLabel={intl.formatMessage(ariaMessages.stage)}
+                                manuallySaveThumbnails={manuallySaveThumbnails}
+                                userOwnsProject={userOwnsProject}
+                                onUpdateProjectThumbnail={onUpdateProjectThumbnail}
+                                isInEditor
                             />
                             <Box
                                 className={styles.targetWrapper}

packages/scratch-gui/src/components/spinner/spinner.css

@@ -12,6 +12,10 @@
     box-sizing: content-box;
 }
 
+.spinner.blue {
+    border-color: hsla(215, 100%, 65%, 0.4);
+}
+
 .spinner::before, .spinner::after {
     width: 1.25rem;
     height: 1.25rem;
@@ -29,6 +33,10 @@
     animation: spin 1.5s cubic-bezier(0.4, 0.1, 0.4, 1) infinite;
 }
 
+.spinner.blue::after {
+    border-top-color: #4C97FF;
+}
+
 .small {
     width: .5rem;
     height: .5rem;

packages/scratch-gui/src/components/spinner/spinner.jsx

@@ -35,6 +35,7 @@ SpinnerComponent.defaultProps = {
     className: '',
     large: false,
     level: 'info',
-    small: false
+    small: false,
+    color: 'white'
 };
 export default SpinnerComponent;