[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,70 @@
+@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-family: "Helvetica Neue";
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.5rem;
+}
+
+.button-row {
+    font-weight: bolder;
+    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-family: "Helvetica Neue";
+    font-size: 0.75rem;
+    font-style: normal;
+    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,219 @@
+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, {PopupAlign, PopupSide} 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 defaultConfig = {
+    modalWidth: 200,
+    spaceForArrow: 16,
+    counterOffset: 7,
+    arrowLongSide: 29,
+    arrowShortSide: 13
+};
+
+const SIDE_TO_ARROW_ICON = {
+    [PopupSide.UP]: arrowDownIcon,
+    [PopupSide.DOWN]: arrowUpIcon,
+    [PopupSide.LEFT]: arrowRightIcon,
+    [PopupSide.RIGHT]: arrowLeftIcon
+};
+
+const ConfirmationPrompt = ({
+    title,
+    message,
+    confirmLabel,
+    cancelLabel,
+    onConfirm,
+    onCancel,
+    isOpen,
+    relativeElementRef,
+    side,
+    align,
+    config
+}) => {
+    const intl = useIntl();
+    const {
+        modalWidth,
+        spaceForArrow,
+        counterOffset,
+        arrowLongSide,
+        arrowShortSide
+    } = {...defaultConfig, ...config};
+    const arrowIcon = SIDE_TO_ARROW_ICON[side];
+
+    const modalRef = useRef(null);
+    const [modalPositionValues, setModalPositionValues] = React.useState({});
+    const [arrowHeight, arrowWidth] = (side === PopupSide.LEFT || side === PopupSide.RIGHT) ?
+        [arrowLongSide, arrowShortSide] : [arrowShortSide, arrowLongSide];
+
+    const updatePosition = useCallback(() => {
+        if (relativeElementRef.current && modalRef.current) {
+            const pos = useCalculatePopupPosition({
+                relativeElementRef,
+                popupRef: modalRef,
+                side,
+                align,
+                popupWidth: modalWidth,
+                arrowLeftIcon,
+                arrowRightIcon,
+                arrowUpIcon,
+                arrowDownIcon,
+                spaceForArrow,
+                counterOffset,
+                arrowShortSide,
+                arrowLongSide
+            });
+            setModalPositionValues(pos);
+        }
+    }, [
+        relativeElementRef,
+        side,
+        align,
+        modalWidth,
+        spaceForArrow,
+        counterOffset,
+        arrowShortSide,
+        arrowLongSide
+    ]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const debouncedUpdate = debounce(updatePosition, 50, {leading: true});
+
+        debouncedUpdate();
+
+        window.addEventListener('resize', debouncedUpdate);
+        return () => {
+            window.removeEventListener('resize', debouncedUpdate);
+            debouncedUpdate.cancel();
+        };
+    }, [isOpen, updatePosition]);
+
+    const onModalMount = useCallback(el => {
+        if (!el || !isOpen) return;
+        modalRef.current = el;
+
+        updatePosition();
+    }, [isOpen, updatePosition]);
+
+    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: 'fixed',
+                        overflowX: 'hidden',
+                        zIndex: 1000
+                    },
+                    overlay: {
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 510,
+                        backgroundColor: 'transparent'
+                    }
+                }}
+            >
+                {arrowIcon && (
+                    <img
+                        src={arrowIcon}
+                        alt=""
+                        aria-hidden="true"
+                        style={{
+                            position: 'fixed',
+                            top: modalPositionValues.arrowTop,
+                            left: modalPositionValues.arrowLeft,
+                            width: arrowWidth,
+                            height: arrowHeight,
+                            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)}),
+    side: PropTypes.oneOf(Object.values(PopupSide)).isRequired,
+    align: PropTypes.oneOf(Object.values(PopupAlign)),
+    config: PropTypes.shape({
+        modalWidth: PropTypes.number,
+        spaceForArrow: PropTypes.number,
+        counterOffset: PropTypes.number,
+        arrowLongSide: PropTypes.number,
+        arrowShortSide: PropTypes.number
+    })
+};
+
+export default ConfirmationPrompt;