Record control tweaks (#10509)

Fixes #10388

[Screencast from 2024-07-10 13-55-46.webm](https://github.com/enso-org/enso/assets/3919101/4ad7c039-84f6-4e42-aad9-5e287ccd88bb)

# Important Notes
Also, removed unnecessary  setExecutionEnvironment call on startup

CHANGELOG.md

@@ -5,9 +5,12 @@
 - ["Add node" button is not obscured by output port][10433]
 - [Numeric Widget does not accept non-numeric input][10457]. This is to prevent
   node being completely altered by accidental code put to the widget.
+- [Redesigned "record control" panel][10509]. Now it contains more intuitive
+  "refresh" and "run workflow" buttons.
 
 [10433]: https://github.com/enso-org/enso/pull/10443
 [10457]: https://github.com/enso-org/enso/pull/10457
+[10509]: https://github.com/enso-org/enso/pull/10509
 
 #### Enso Enso Standard Library
 

app/gui2/src/components/GraphEditor.vue

@@ -422,27 +422,6 @@ const { documentation } = useAstDocumentation(graphStore, () =>
   unwrapOr(graphStore.methodAst, undefined),
 )
 
-// === Execution Mode ===
-
-/** Handle record-once button presses. */
-function onRecordOnceButtonPress() {
-  projectStore.lsRpcConnection.initialized.then(async () => {
-    const modeValue = projectStore.executionMode
-    if (modeValue == undefined) {
-      return
-    }
-    projectStore.executionContext.recompute('all', 'Live')
-  })
-}
-
-// Watch for changes in the execution mode.
-watch(
-  () => projectStore.executionMode,
-  (modeValue) => {
-    projectStore.executionContext.executionEnvironment = modeValue === 'live' ? 'Live' : 'Design'
-  },
-)
-
 // === Component Browser ===
 
 const componentBrowserVisible = ref(false)
@@ -720,7 +699,6 @@ const groupColors = computed(() => {
           :zoomLevel="100.0 * graphNavigator.targetScale"
           :componentsSelected="nodeSelection.selected.size"
           :class="{ extraRightSpace: !showDocumentationEditor }"
-          @recordOnce="onRecordOnceButtonPress()"
           @fitToAllClicked="zoomToSelected"
           @zoomIn="graphNavigator.stepZoom(+1)"
           @zoomOut="graphNavigator.stepZoom(-1)"

app/gui2/src/components/RecordControl.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import SvgButton from '@/components/SvgButton.vue'
-import ToggleIcon from '@/components/ToggleIcon.vue'
+import { useProjectStore } from '@/stores/project'
 
-const props = defineProps<{ recordMode: boolean }>()
-const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolean] }>()
+const project = useProjectStore()
 </script>
 
 <template>
   <div class="RecordControl">
     <div class="control left-end">
-      <ToggleIcon
-        icon="record"
+      <SvgButton
+        title="Refresh"
         class="iconButton"
-        title="Record"
-        :modelValue="props.recordMode"
-        @update:modelValue="emit('update:recordMode', $event)"
+        name="refresh"
+        draggable="false"
+        @click.stop="project.executionContext.recompute()"
       />
     </div>
     <div class="control right-end">
       <SvgButton
-        title="Record Once"
+        title="Run Workflow"
         class="iconButton"
-        name="record_once"
+        name="workflow_play"
         draggable="false"
-        @click.stop="() => emit('recordOnce')"
+        @click.stop="project.executionContext.recompute('all', 'Live')"
       />
     </div>
   </div>
@@ -56,9 +55,7 @@ const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolea
   border-radius: 0 var(--radius-full) var(--radius-full) 0;
 
   .iconButton {
-    position: relative;
     margin: 0 auto 0 0;
-    --icon-width: 24px;
   }
 }
 

app/gui2/src/components/TopBar.vue

@@ -10,13 +10,10 @@ const showColorPicker = defineModel<boolean>('showColorPicker', { required: true
 const showCodeEditor = defineModel<boolean>('showCodeEditor', { required: true })
 const showDocumentationEditor = defineModel<boolean>('showDocumentationEditor', { required: true })
 const props = defineProps<{
-  recordMode: boolean
   zoomLevel: number
   componentsSelected: number
 }>()
 const emit = defineEmits<{
-  recordOnce: []
-  'update:recordMode': [enabled: boolean]
   fitToAllClicked: []
   zoomIn: []
   zoomOut: []
@@ -38,12 +35,8 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <RecordControl
-      :recordMode="props.recordMode"
-      @update:recordMode="emit('update:recordMode', $event)"
-      @recordOnce="emit('recordOnce')"
-    />
     <NavBreadcrumbs />
+    <RecordControl />
     <Transition name="selection-menu">
       <SelectionMenu
         v-if="componentsSelected > 1"

app/gui2/src/stores/project/executionContext.ts

@@ -29,6 +29,10 @@ import { exponentialBackoff } from 'shared/util/net'
 import type { ExternalId } from 'shared/yjsModel'
 import { reactive } from 'vue'
 
+// This constant should be synchronized with EXECUTION_ENVIRONMENT constant in
+// engine/runtime/src/main/java/org/enso/interpreter/EnsoLanguage.java
+const DEFAULT_ENVIRONMENT: ExecutionEnvironment = 'Design'
+
 export type NodeVisualizationConfiguration = Omit<
   VisualizationConfiguration,
   'executionContextId'
@@ -60,7 +64,7 @@ type ExecutionContextState =
       status: 'created'
       visualizations: Map<Uuid, NodeVisualizationConfiguration>
       stack: StackItem[]
-      environment?: ExecutionEnvironment
+      environment: ExecutionEnvironment
     }
 
 type EntryPoint = Omit<ExplicitCall, 'type'>
@@ -326,7 +330,12 @@ export class ExecutionContext extends ObservableV2<ExecutionContextNotification>
           if (result.value.contextId !== this.id) {
             return Err('Unexpected Context ID returned by the language server.')
           }
-          newState = { status: 'created', visualizations: new Map(), stack: [] }
+          newState = {
+            status: 'created',
+            visualizations: new Map(),
+            stack: [],
+            environment: DEFAULT_ENVIRONMENT,
+          }
           return Ok()
         }, 'Failed to create execution context')
       }

app/gui2/src/stores/project/index.ts

@@ -343,6 +343,10 @@ export const { provideFn: provideProjectStore, injectFn: useProjectStore } = cre
       },
     })
 
+    watch(executionMode, (modeValue) => {
+      executionContext.executionEnvironment = modeValue === 'live' ? 'Live' : 'Design'
+    })
+
     function renameProject(newDisplayedName: string) {
       try {
         renameProjectBackend(newDisplayedName)

distribution/lib/Standard/Base/0.0.0-dev/src/System/File.enso

@@ -121,7 +121,7 @@ type File
                         temp.delete_if_exists
 
             ## Attach a warning to the file that it is a dry run
-            warning = Dry_Run_Operation.Warning "Only a dry run has occurred, with data written to a temporary file.  Press the Record Once button ❙⬤❙ to write the actual file."
+            warning = Dry_Run_Operation.Warning "Only a dry run has occurred, with data written to a temporary file.  Press the Run Workflow button ▶ to write the actual file."
             Warning.attach warning temp
 
     ## ALIAS current directory

distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Upload_Table.enso

@@ -51,7 +51,7 @@ create_table_implementation connection table_name structure primary_key temporar
                     internal_create_table_structure connection effective_table_name structure primary_key effective_temporary on_problems
                 if dry_run.not then connection.query (SQL_Query.Table_Name created_table_name) else
                     created_table = connection.base_connection.internal_allocate_dry_run_table created_table_name
-                    warning = Dry_Run_Operation.Warning "Only a dry run of `create_table` has occurred, creating a temporary table ("+created_table_name.pretty+").  Press the Record Once button ❙⬤❙ to create the actual one."
+                    warning = Dry_Run_Operation.Warning "Only a dry run of `create_table` has occurred, creating a temporary table ("+created_table_name.pretty+").  Run Workflow button ▶ to create the actual one."
                     Warning.attach warning created_table
 
 ## PRIVATE
@@ -118,7 +118,7 @@ select_into_table_implementation source_table connection table_name primary_key
                                 connection.drop_table tmp_table_name if_exists=True
                                 internal_upload_table source_table connection tmp_table_name primary_key temporary=True on_problems=on_problems row_limit=dry_run_row_limit
                             temporary_table = connection.base_connection.internal_allocate_dry_run_table table.name
-                            warning = Dry_Run_Operation.Warning "Only a dry run of `select_into_database_table` was performed - a temporary table ("+tmp_table_name+") was created, containing a sample of the data.  Press the Record Once button ❙⬤❙ to write to the actual table."
+                            warning = Dry_Run_Operation.Warning "Only a dry run of `select_into_database_table` was performed - a temporary table ("+tmp_table_name+") was created, containing a sample of the data.  Run Workflow button ▶ to write to the actual table."
                             Warning.attach warning temporary_table
 
 ## PRIVATE
@@ -345,7 +345,7 @@ common_update_table (source_table : DB_Table | Table) (target_table : DB_Table)
                                above fails, the whole transaction will be rolled back.
                             connection.drop_table tmp_table.name
                             if dry_run.not then resulting_table else
-                                warning = Dry_Run_Operation.Warning "Only a dry run of `update_rows` was performed - the target table has been returned unchanged.  Press the Record Once button ❙⬤❙ to update the actual table."
+                                warning = Dry_Run_Operation.Warning "Only a dry run of `update_rows` was performed - the target table has been returned unchanged.  Press the Run Workflow button ▶ to update the actual table."
                                 Warning.attach warning resulting_table
 
 ## PRIVATE
@@ -551,7 +551,7 @@ common_delete_rows target_table key_values_to_delete key_columns allow_duplicate
                         source.drop_temporary_table connection
                         if dry_run.not then affected_row_count else
                             suffix = source.dry_run_message_suffix
-                            warning = Dry_Run_Operation.Warning "Only a dry run of `delete_rows` was performed - the target table has not been changed. Press the Record Once button ❙⬤❙ to update the actual table."+suffix
+                            warning = Dry_Run_Operation.Warning "Only a dry run of `delete_rows` was performed - the target table has not been changed. Press the Run Workflow button ▶ to update the actual table."+suffix
                             Warning.attach warning affected_row_count
 
 ## PRIVATE

engine/runtime/src/main/java/org/enso/interpreter/EnsoLanguage.java

@@ -328,6 +328,8 @@ private boolean astContainsExprTypes(Tree ast, List<Class<? extends Tree>> exprT
       help = "The environment for program execution. Defaults to `design`.")
   public static final OptionKey<ExecutionEnvironment> EXECUTION_ENVIRONMENT =
       new OptionKey<>(
+          // If you change the default, remember to update DEFAULT_ENVIRONMENT in
+          // app/gui2/src/stores/project/executionContext.ts
           ExecutionEnvironment.DESIGN,
           new OptionType<>("ExecutionEnvironment", ExecutionEnvironment::forName));