Disable record button temporarily (#10953)

Related: #10949
enso-org · Sep 2, 2024 · da3490e · da3490e
1 parent 3442a3a
commit da3490e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/app/gui2/e2e/componentBrowser.spec.ts b/app/gui2/e2e/componentBrowser.spec.ts
@@ -263,7 +263,8 @@ test('Visualization preview: user visualization selection', async ({ page }) =>
   await expect(locate.graphNode(page)).toHaveCount(nodeCount)
 })
 
-test('Component browser handling of overridden record-mode', async ({ page }) => {
+// TODO[#10949]: the record button on node is disabled.
+test.skip('Component browser handling of overridden record-mode', async ({ page }) => {
   await actions.goToGraph(page)
   const node = locate.graphNodeByBinding(page, 'data')
   const ADDED_PATH = '"/home/enso/Input.txt"'

diff --git a/app/gui2/src/components/CircularMenu.vue b/app/gui2/src/components/CircularMenu.vue
@@ -92,7 +92,8 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
         icon="record"
         class="slot7 record"
         data-testid="toggleRecord"
-        title="Write Always"
+        title="Coming soon…"
+        :disabled="true"
         :modelValue="props.isRecordingOverridden"
         @update:modelValue="emit('update:isRecordingOverridden', $event)"
       />
@@ -182,11 +183,6 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
   clip-path: var(--full-ring-path);
 }
 
-.inactive {
-  pointer-events: none;
-  opacity: 10%;
-}
-
 /**
   * The following styles are used to position the icons in a circular pattern. The slots are named slot1 to slot8 and
   * are positioned using absolute positioning. The slots are positioned in a circle with slot1 at the top and the rest

diff --git a/app/gui2/src/components/ToggleIcon.vue b/app/gui2/src/components/ToggleIcon.vue
@@ -11,11 +11,11 @@ import SvgIcon from '@/components/SvgIcon.vue'
 import type { Icon } from '@/util/iconName'
 
 const toggledOn = defineModel<boolean>({ default: false })
-const props = defineProps<{ icon: Icon; label?: string }>()
+const props = defineProps<{ icon: Icon; label?: string; disabled?: boolean }>()
 </script>
 
 <template>
-  <MenuButton v-model="toggledOn" class="ToggleIcon">
+  <MenuButton v-model="toggledOn" class="ToggleIcon" :disabled="props.disabled">
     <SvgIcon :name="icon" />
     <div v-if="props.label" v-text="props.label" />
   </MenuButton>