Add "Start Over" to CodeBridge #58534

molly-moen · 2024-05-10T20:03:27Z

This adds a start over button to the CodeBridge workspace. To get this working I had to do a bit of refactoring:

Instead of configuring the file tabs and editor as separate components in the layout, they are combined as oneworkspace component. In order to enable this I removed the direct passing of the editor component and instead pass the language mapping and editable file types to the config. This also had the benefit of moving the header for the editor above the file tabs.
I added the same start over icon button to the new "Workspace" header that we use in Music Lab.
I updated the useSources hook to return a start over function as well. I was able to reuse logic from Music Lab/lab2 for this.
I re-used the same start over dialog from Music Lab/lab2. This dialog specifically mentioned "blocks" in the text. I updated it to check the lab type, and show "code" instead if the lab is text-based.

The new flow now looks like this (it is very similar in Web Lab 2):
https://github.com/code-dot-org/code-dot-org/assets/33666587/1ea7ec39-0321-43ae-a6a4-ff7e7b92c51f

Links

jira ticket: CT-552

Testing story

Tested locally in Python Lab and Web Lab 2

Follow-up work

We have a separate task to add full version history.

PR Checklist:

Tests provide adequate coverage
Privacy and Security impacts have been assessed
Code is well-commented
New features are translatable or updates will not break translations
Relevant documentation has been added or updated
User impact is well-understood and desirable
Pull Request is labeled appropriately
Follow-up work items (including potential tech debt) are tracked and linked

molly-moen · 2024-05-10T20:04:16Z

apps/src/lab2/views/dialogs/StartOverDialog.tsx

@@ -11,13 +13,21 @@ const StartOverDialog: React.FunctionComponent<BaseDialogProps> = ({
  handleConfirm,
  handleCancel,
 }) => {
+  const currentAppName = useAppSelector(


@sanchitmalhotra126 I'm pretty confident this won't impact Music Lab since we are only using the new translated string if we are in a text-based lab. LMK if this is too risky during the launch period.

Seems fine to me 👍 just pulled this locally and confirmed on my end as well.

molly-moen · 2024-05-10T20:04:38Z

apps/src/weblab2/Weblab2View.tsx

@@ -208,8 +204,6 @@ const Weblab2View = () => {
              if (configName === 'project') {
                setSource(newConfig as ProjectType);
              } else if (configName === 'config' || configName === 'layout') {
-                (newConfig as ConfigType).EditorComponent =


@thomasoniii is it ok that I removed this since we don't support providing an editor component anymore?

Oh. That's a shame. I thought the flexibility would've been nice.

Anyway, sure, if not supported can be safely tossed.

mikeharv

Looks good! I think it's worth cleaning up the grid rows before merging, now that we don't need to worry about file tabs separately.

apps/i18n/common/en_us.json

apps/src/codebridge/Editor/index.tsx

mikeharv · 2024-05-10T20:38:47Z

apps/src/lab2/types.ts

+  'javalab',
+  'weblab',
+  'pythonlab',
+  'weblab2',


Is this an exhaustive list? Are applab and weblab compatible with Lab2? If "not yet", maybe we should also include gamelab? Not sure if there are other worth considering too, like ai lab.

Alternatively, I wonder if it might be more robust to actually check whether the level uses Blockly or not.

No this was my loose list :) I put labs that I knew were text-based, and included those not on lab2 so it wasn't something we had to worry about in the future. But you are probably right that having a half-correct list isn't great. I can update this for now to just be lab2 labs that are text based, and when a lab is migrated when can add it to the list. I'm not sure if we can check consistently if a level uses Blockly, is that a setting on every lab type?

All Blockly levels, including Music, should extend the Blockly level class. I've seen us do level.is_a? Blockly in some places. I'm not sure if that's helpful or not.
I'd vote for either being robust like this (if it works) or having a short list that just has supported lab2 labs if that doesn't work.

We can't do that on the frontend without sending that as a level property (which I don't think we do now). I'll pare down the list and comment that it's only lab2 labs.

mikeharv · 2024-05-10T20:47:56Z

apps/src/pythonlab/PythonlabView.tsx

-    "instructions editor"
-    "file-browser editor"
+    "instructions workspace"
+    "instructions workspace"


I think we can clean this up now, by removing one of these duplicate lines. Above on line 70 we can just specify two rows. Instead of giving the rows a fixed height, we could try make it flexible like

gridLayoutRows: '1fr 1fr',

which would give each 50% of the available space.

We could do similar improvements to the weblab2 layouts since they also have a couple of identical rows now.

I might leave this for now since I'm going to work next on moving the console into Code Bridge, and this will get updated again.

The duplicate line can safely be deleted, and the layoutRows can be simplified as well.

But also, not urgent especially if more layout changes are pending.

I'm going to fast follow this with an update to both layouts!

thomasoniii · 2024-05-13T13:47:34Z

apps/src/codebridge/Workspace/HeaderButtons.tsx

+    <div>
+      <Button
+        icon={{iconStyle: 'solid', iconName: 'refresh'}}
+        isIconOnly
+        color={'black'}
+        onClick={onClickStartOver}
+        ariaLabel={'Start Over'}
+        size={'xs'}
+      />
+    </div>


Does this need to be wrapped in the extra div? Is it just anticipating more buttons being added here?

Yeah just anticipating more buttons.

thomasoniii · 2024-05-13T13:52:35Z

apps/src/weblab2/Weblab2View.tsx

  gridLayoutColumns: '300px auto auto',
-  gridLayout: `    "instructions file-tabs preview-container"
-      "instructions editor preview-container"
-      "file-browser editor preview-container"`,
+  gridLayout: `    "instructions workspace preview-container"
+      "instructions workspace preview-container"
+      "file-browser workspace preview-container"`,
 };

 const verticalLayout = {
  gridLayoutRows: '32px 300px auto auto',
  gridLayoutColumns: '300px auto',
-  gridLayout: `    "instructions file-tabs file-tabs"
-      "instructions editor editor"
-      "file-browser editor editor"
+  gridLayout: `    "instructions workspace workspace"
+      "instructions workspace workspace"
+      "file-browser workspace workspace"


same as the PythonLab comments above, we can simplify the gridLayoutRows and redundant gridLayout line.

thomasoniii

minor parroting on the grid layout notes, but otherwise lgtm 🚀

molly-moen added 6 commits May 9, 2024 10:36

resolve conflict

0ec9dec

fix bug

3c85308

clean up

d18f627

clean up

0ca40fc

style updates

81f3783

clean up

d5cba80

molly-moen requested review from thomasoniii, sanchitmalhotra126 and a team May 10, 2024 20:03

molly-moen requested a review from a team as a code owner May 10, 2024 20:03

molly-moen commented May 10, 2024

View reviewed changes

mikeharv approved these changes May 10, 2024

View reviewed changes

update text based lab list

3e184d6

thomasoniii reviewed May 13, 2024

View reviewed changes

thomasoniii approved these changes May 13, 2024

View reviewed changes

molly-moen merged commit a03ff71 into staging May 13, 2024
2 checks passed

molly-moen deleted the molly/start-over-codebridge branch May 13, 2024 17:16

molly-moen mentioned this pull request May 13, 2024

Refactor Python Lab Console #58574

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add "Start Over" to CodeBridge #58534

Add "Start Over" to CodeBridge #58534

molly-moen commented May 10, 2024

molly-moen May 10, 2024

sanchitmalhotra126 May 10, 2024

molly-moen May 10, 2024

thomasoniii May 13, 2024

mikeharv left a comment

mikeharv May 10, 2024

molly-moen May 10, 2024

mikeharv May 10, 2024

molly-moen May 10, 2024

mikeharv May 10, 2024

molly-moen May 10, 2024

thomasoniii May 13, 2024

molly-moen May 13, 2024

thomasoniii May 13, 2024

molly-moen May 13, 2024

thomasoniii May 13, 2024

thomasoniii left a comment

Add "Start Over" to CodeBridge #58534

Add "Start Over" to CodeBridge #58534

Conversation

molly-moen commented May 10, 2024

Links

Testing story

Follow-up work

PR Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mikeharv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thomasoniii left a comment

Choose a reason for hiding this comment