Restore points 2.1

src/addons/addons.js

@@ -71,7 +71,6 @@ const addons = [
     'tw-remove-feedback',
     'tw-disable-cloud-variables',
     'tw-disable-compiler',
-    'tw-disable-restore-points',
     'editor-stepping'
 ];
 

src/addons/generated/addon-manifests.js

@@ -69,7 +69,6 @@ import _tw_remove_backpack from "../addons/tw-remove-backpack/_manifest_entry.js
 import _tw_remove_feedback from "../addons/tw-remove-feedback/_manifest_entry.js";
 import _tw_disable_cloud_variables from "../addons/tw-disable-cloud-variables/_manifest_entry.js";
 import _tw_disable_compiler from "../addons/tw-disable-compiler/_manifest_entry.js";
-import _tw_disable_restore_points from "../addons/tw-disable-restore-points/_manifest_entry.js";
 import _editor_stepping from "../addons/editor-stepping/_manifest_entry.js";
 export default {
   "cat-blocks": _cat_blocks,
@@ -142,6 +141,5 @@ export default {
   "tw-remove-feedback": _tw_remove_feedback,
   "tw-disable-cloud-variables": _tw_disable_cloud_variables,
   "tw-disable-compiler": _tw_disable_compiler,
-  "tw-disable-restore-points": _tw_disable_restore_points,
   "editor-stepping": _editor_stepping,
 };

src/addons/hooks.js

@@ -2,8 +2,7 @@ const AddonHooks = {
     appStateReducer: () => {},
     appStateStore: null,
     blockly: null,
-    blocklyCallbacks: [],
-    disableRestorePoints: false
+    blocklyCallbacks: []
 };
 
 export default AddonHooks;

src/components/tw-restore-point-modal/restore-point-modal.css

@@ -10,22 +10,15 @@
     padding: 1.5rem 2.25rem;
     max-height: calc(100vh - 150px);
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 [theme="dark"] .body {
     color: $text-primary;
     background: $ui-primary;
 }
 
-.extra-container,
-.disabled,
-.loading,
-.error,
-.empty,
-.restore-point-container,
-.legacy-transition {
-    margin: 1rem 0 0 0;
-}
-
 .extra-container {
     display: flex;
     justify-content: space-between;

src/components/tw-restore-point-modal/restore-point-modal.jsx

@@ -13,9 +13,63 @@ const messages = defineMessages({
         defaultMessage: 'Restore Points',
         description: 'Title of restore point management modal',
         id: 'tw.restorePoints.title'
+    },
+    never: {
+        defaultMessage: 'never',
+        id: 'tw.restorePoints.never',
+        description: 'Part of restore point modal. Appears in a message like "Restore points are created [never v]".'
+    },
+    minutes: {
+        defaultMessage: 'every {minutes, plural, one {# minute} other {# minutes}}',
+        id: 'tw.restorePoints.minutes',
+        // eslint-disable-next-line max-len
+        description: 'Part of restore point modal. Appears in a message like "Restore points are created [every one minute v]".'
     }
 });
 
+const MINUTE = 1000 * 60;
+const INTERVAL_OPTIONS = [
+    MINUTE * 1,
+    MINUTE * 5,
+    MINUTE * 10,
+    MINUTE * 15,
+    MINUTE * 30,
+    -1
+];
+const IntervalSelector = props => (
+    <select
+        value={props.value}
+        onChange={props.onChange}
+    >
+        {INTERVAL_OPTIONS.map(interval => (
+            <option
+                key={interval}
+                value={interval}
+            >
+                {interval < 0 ? (
+                    props.intl.formatMessage(messages.never)
+                ) : (
+                    props.intl.formatMessage(messages.minutes, {
+                        minutes: Math.round(interval / MINUTE)
+                    })
+                )}
+            </option>
+        ))}
+        {!INTERVAL_OPTIONS.includes(props.value) && (
+            // This should never happen unless someone manually edits their storage, so we
+            // don't need to worry about making this work good.
+            <option value={props.value}>
+                {`every ${props.value}ms`}
+            </option>
+        )}
+    </select>
+);
+IntervalSelector.propTypes = {
+    intl: intlShape,
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+};
+
 const RestorePointModal = props => (
     <Modal
         className={styles.modalContent}
@@ -35,14 +89,31 @@ const RestorePointModal = props => (
                 />
             </p>
 
-            {props.disabled && (
+            <p>
+                <FormattedMessage
+                    defaultMessage="Restore points are created {time}."
+                    id="tw.restorePoints.intervalOption"
+                    // eslint-disable-next-line max-len
+                    description="{time} will be replaced with a dropdown with values such as [every 5 minutes v] and [never v]"
+                    values={{
+                        time: (
+                            <IntervalSelector
+                                intl={props.intl}
+                                value={props.interval}
+                                onChange={props.onChangeInterval}
+                            />
+                        )
+                    }}
+                />
+            </p>
+
+            {props.interval < 0 && (
                 <p className={styles.disabled}>
                     <FormattedMessage
+                        defaultMessage="Disabling restore points is dangerous."
                         // eslint-disable-next-line max-len
-                        defaultMessage="Disable the &quot;Disable restore points&quot; addon to re-enable restore point creation."
-                        // eslint-disable-next-line max-len
-                        description="Message that appears in restore point manager when the user has disabled restore points. Note that the name of the addon in the addon settings is currently hardcoded as English."
-                        id="tw.restorePoints.disabled"
+                        description="Warning that appears in restore point modal when the user has disabled restore points."
+                        id="tw.restorePoints.off"
                     />
                 </p>
             )}
@@ -73,17 +144,15 @@ const RestorePointModal = props => (
                     />
                 </div>
             ) : props.restorePoints.length === 0 ? (
-                <div>
-                    <div className={styles.empty}>
-                        <FormattedMessage
-                            defaultMessage="No restore points found."
-                            description="Message that appears when no restore points exist yet"
-                            id="tw.restorePoints.empty"
-                        />
-                    </div>
+                <div className={styles.empty}>
+                    <FormattedMessage
+                        defaultMessage="No restore points found."
+                        description="Message that appears when no restore points exist yet"
+                        id="tw.restorePoints.empty"
+                    />
                 </div>
             ) : (
-                <div>
+                <React.Fragment>
                     <div className={styles.restorePointContainer}>
                         {props.restorePoints.map(restorePoint => (
                             <RestorePoint
@@ -130,10 +199,10 @@ const RestorePointModal = props => (
                             />
                         </button>
                     </div>
-                </div>
+                </React.Fragment>
             )}
 
-            {!props.isLoading && (
+            {!props.isLoading && props.onClickLoadLegacy && (
                 <details className={styles.legacyTransition}>
                     {/* This is going away within a few days */}
                     {/* No reason to bother translating */}
@@ -158,13 +227,14 @@ const RestorePointModal = props => (
 
 RestorePointModal.propTypes = {
     intl: intlShape,
+    interval: PropTypes.number.isRequired,
+    onChangeInterval: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     onClickCreate: PropTypes.func.isRequired,
     onClickDelete: PropTypes.func.isRequired,
     onClickDeleteAll: PropTypes.func.isRequired,
     onClickLoad: PropTypes.func.isRequired,
-    onClickLoadLegacy: PropTypes.func.isRequired,
-    disabled: PropTypes.bool.isRequired,
+    onClickLoadLegacy: PropTypes.func,
     isLoading: PropTypes.bool.isRequired,
     totalSize: PropTypes.number.isRequired,
     restorePoints: PropTypes.arrayOf(PropTypes.shape({})),