[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;
@@ -19,8 +20,8 @@ body .alert {
 }
 
 .alert.warn {
-    background: #FFF0DF;
-    border: 1px solid #FF8C1A;
+    background: $ui-alert-orange;
+    border: 1px solid $data-primary;
     box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25);
 }
 
@@ -30,6 +31,11 @@ body .alert {
     box-shadow: 0px 0px 0px 2px $extensions-light;
 }
 
+.alert.info-blue {
+    border: 1px solid $motion-primary;
+    background: $ui-primary;
+}
+
 .alert-spinner {
     self-align: center;
 }
@@ -76,7 +82,7 @@ body .alert {
     width: 6.5rem;
     padding: 0.55rem 0.9rem;
     border-radius: 0.35rem;
-    background: #FF8C1A;
+    background: $data-primary;
     color: white;
     font-weight: 700;
     font-size: 0.77rem;

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,11 @@ ButtonComponent.propTypes = {
     disabled: PropTypes.bool,
     iconClassName: PropTypes.string,
     iconSrc: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    componentRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(Element)})
+    ])
 };
 
 export default ButtonComponent;

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

@@ -0,0 +1,66 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-container {
+    display: flex;
+    width: 12.5rem;
+    padding: 0.75rem;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 0.5rem;
+    background: $looks-secondary;
+    gap: 0.9375rem;
+    box-sizing: border-box;
+}
+
+.label {
+    align-self: stretch;
+    color: $ui-white;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.5rem;
+}
+
+.button-row {
+    font-weight: 700;
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.button-row button {
+    all: unset;
+    display: flex;
+    padding: 0.5rem 1rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    border-radius: 2.5rem;
+    background: inherit;
+    cursor: pointer;
+}
+
+.button-row button:focus {
+    outline: auto;
+}
+
+.button-row button span {
+    color: $ui-white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1rem;
+}
+
+.button-row button.confirm-button {
+    background: $ui-white;
+}
+
+.button-row button.confirm-button span {
+    color: $looks-secondary;
+}
+
+.button-row button.cancel-button {
+    border: 0.0625rem solid $ui-white;
+}

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactModal from 'react-modal';
+import {defineMessages, FormattedMessage} from 'react-intl';
+
+import Box from '../box/box.jsx';
+import PopupWithArrow from '../popup-with-arrow/popup-with-arrow.jsx';
+
+import arrowDownIcon from './icon--arrow-down.svg';
+import arrowUpIcon from './icon--arrow-up.svg';
+import arrowLeftIcon from './icon--arrow-left.svg';
+import arrowRightIcon from './icon--arrow-right.svg';
+
+import styles from './confirmation-prompt.css';
+import {PopupAlign, PopupSide} from '../../lib/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 defaultConfig = {
+    modalWidth: 200,
+    spaceForArrow: 16,
+    counterOffset: 7,
+    arrowOffsetFromBottom: 2,
+    arrowWidth: 29,
+    arrowHeight: 13
+};
+
+const arrowConfig = {
+    arrowDownIcon,
+    arrowUpIcon,
+    arrowLeftIcon,
+    arrowRightIcon
+};
+
+const ConfirmationPrompt = ({
+    title,
+    message,
+    confirmLabel,
+    cancelLabel,
+    onConfirm,
+    onCancel,
+    isOpen,
+    relativeElementRef,
+    side,
+    align,
+    layoutConfig
+}) => {
+    const {modalWidth, spaceForArrow, counterOffset, arrowOffsetFromBottom, arrowHeight, arrowWidth} =
+        {...defaultConfig, ...layoutConfig};
+
+    return (
+        <PopupWithArrow
+            isOpen={isOpen}
+            relativeElementRef={relativeElementRef}
+            side={side}
+            align={align}
+            layoutConfig={{
+                popupWidth: modalWidth,
+                spaceForArrow,
+                counterOffset,
+                arrowOffsetFromBottom,
+                arrowHeight,
+                arrowWidth
+            }}
+            arrowConfig={arrowConfig}
+        >
+            {({popupRef, pos}) => (
+                <ReactModal
+                    isOpen
+                    onRequestClose={onCancel}
+                    contentLabel={title}
+                    style={{
+                        content: {
+                            top: pos.top,
+                            left: pos.left,
+                            width: modalWidth,
+                            border: 'none',
+                            height: 'fit-content',
+                            backgroundColor: 'transparent',
+                            padding: 0,
+                            margin: 0,
+                            position: 'fixed',
+                            overflowX: 'hidden',
+                            zIndex: 1000
+                        },
+                        overlay: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            zIndex: 510,
+                            backgroundColor: 'transparent'
+                        }
+                    }}
+                >
+                    <Box
+                        className={styles.modalContainer}
+                        componentRef={popupRef}
+                    >
+                        <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>
+            )}
+        </PopupWithArrow>
+    );
+};
+
+ConfirmationPrompt.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    title: PropTypes.string,
+    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)}),
+    side: PropTypes.oneOf(Object.values(PopupSide)).isRequired,
+    align: PropTypes.oneOf(Object.values(PopupAlign)),
+    layoutConfig: PropTypes.shape({
+        modalWidth: PropTypes.number,
+        spaceForArrow: PropTypes.number,
+        arrowOffsetFromBottom: PropTypes.number,
+        counterOffset: PropTypes.number,
+        arrowHeight: PropTypes.number,
+        arrowWidth: PropTypes.number
+    })
+};
+
+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,9 @@ const GUIComponent = props => {
                                 vm={vm}
                                 ariaRole="region"
                                 ariaLabel={intl.formatMessage(ariaMessages.stage)}
+                                manuallySaveThumbnails={manuallySaveThumbnails}
+                                userOwnsProject={userOwnsProject}
+                                onUpdateProjectThumbnail={onUpdateProjectThumbnail}
                             />
                             <Box
                                 className={styles.targetWrapper}