diff --git a/public/translations/en.json b/public/translations/en.json
index eec4fa86a..5ee05037e 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -123,10 +123,20 @@
"edit": "Edit",
"view": "View",
"removeStepModal": {
- "heading": "Remove instruction step?",
- "warning": "Are you sure you want to delete this instructions step? You will not be able to get this back.",
+ "heading": "Remove instructions?",
+ "warning": "You will not be able to get deleted instructions back.",
+ "studentsWarning": "Students who have already started working on this project will still be able to see the instructions as they were when they started.",
+ "scopeLegend": "What do you want to remove?",
+ "scope": {
+ "currentStep": "Remove current step only",
+ "allSteps": "Remove all steps"
+ },
+ "confirm": {
+ "currentStep": "Remove current step",
+ "allSteps": "Remove all steps"
+ },
"cancel": "Cancel",
- "removeStep": "Remove step"
+ "removeInstructions": "Remove instructions"
}
},
"projectsPanel": {
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index f3a9eadc8..b42ebfe5d 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -401,3 +401,13 @@
}
}
}
+
+.modal-content--remove-step {
+ .modal-content__body {
+ row-gap: var(--space-2);
+ }
+
+ .rpf-fieldset {
+ margin-block-end: 0;
+ }
+}
diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss
index a628c3db7..6cb3235d9 100644
--- a/src/assets/stylesheets/Modal.scss
+++ b/src/assets/stylesheets/Modal.scss
@@ -27,11 +27,6 @@
display: flex;
flex-direction: column;
- label,
- legend {
- font-weight: $font-weight-bold;
- }
-
input[type="text"] {
@include font-size-1(regular);
inline-size: 100%;
@@ -100,6 +95,10 @@
.modal-content__input-section {
display: flex;
flex-direction: column;
+
+ label {
+ font-weight: $font-weight-bold;
+ }
}
.modal-content__buttons {
@@ -143,7 +142,7 @@
.modal-overlay {
background-color: rgba(0, 0, 0, 0.5);
- input {
+ input[type="text"] {
border: 2px solid $rpf-white;
background-color: $rpf-grey-700;
color: inherit;
@@ -175,7 +174,7 @@
.modal-overlay {
background-color: rgba(67, 69, 76, 0.5);
- input {
+ input[type="text"] {
border: 2px solid $rpf-grey-100;
&:focus-visible {
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 00e85325e..b9129af2b 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -19,6 +19,8 @@ import {
insertStepAfter,
removeStepAt,
updateStepMarkdown,
+ REMOVE_ALL_STEPS,
+ REMOVE_CURRENT_STEP,
} from "../../../../utils/instructionSteps";
import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
import { Button } from "@raspberrypifoundation/design-system-react";
@@ -30,6 +32,7 @@ import BinIcon from "../../../../assets/icons/bin.svg";
const InstructionsPanel = () => {
const [tabIndex, setTabIndex] = useState(0);
const [showRemoveStepModal, setShowRemoveStepModal] = useState(false);
+ const [removeScope, setRemoveScope] = useState(REMOVE_CURRENT_STEP);
const instructionsEditable = useSelector(
(state) => state.editor?.instructionsEditable,
);
@@ -80,9 +83,25 @@ const InstructionsPanel = () => {
dispatch(setCurrentStepPosition(currentStepPosition + 1));
};
- const confirmRemoveStep = () => {
- dispatch(setProjectInstructions(removeStepAt(steps, currentStepPosition)));
- dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0)));
+ const confirmRemoveText = hasMultipleSteps
+ ? t(`instructionsPanel.removeStepModal.confirm.${removeScope}`)
+ : t("instructionsPanel.removeStepModal.removeInstructions");
+
+ const openRemoveStepModal = () => {
+ setRemoveScope(REMOVE_CURRENT_STEP);
+ setShowRemoveStepModal(true);
+ };
+
+ const confirmRemove = () => {
+ if (removeScope === REMOVE_ALL_STEPS) {
+ dispatch(setProjectInstructions([]));
+ dispatch(setCurrentStepPosition(0));
+ } else {
+ dispatch(
+ setProjectInstructions(removeStepAt(steps, currentStepPosition)),
+ );
+ dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0)));
+ }
setShowRemoveStepModal(false);
};
@@ -97,6 +116,7 @@ const InstructionsPanel = () => {
instructionsEditable && !hasInstructions
? [
}
text={t("instructionsPanel.emptyState.addInstructions")}
@@ -155,7 +175,7 @@ const InstructionsPanel = () => {
variant="danger"
title={t("instructionsPanel.removeStep")}
icon={}
- onClick={() => setShowRemoveStepModal(true)}
+ onClick={openRemoveStepModal}
/>
)}
@@ -202,8 +222,8 @@ const InstructionsPanel = () => {
type="primary"
key="remove"
variant="danger"
- text={t("instructionsPanel.removeStepModal.removeStep")}
- onClick={confirmRemoveStep}
+ text={confirmRemoveText}
+ onClick={confirmRemove}
/>,