From da3490ebb75a7d0477b48a298936275b085f0417 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Mon, 2 Sep 2024 23:51:35 +0400
Subject: [PATCH] Disable record button temporarily (#10953)

Related: https://github.com/enso-org/enso/issues/10949
---
 app/gui2/e2e/componentBrowser.spec.ts    | 3 ++-
 app/gui2/src/components/CircularMenu.vue | 8 ++------
 app/gui2/src/components/ToggleIcon.vue   | 4 ++--
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/gui2/e2e/componentBrowser.spec.ts b/app/gui2/e2e/componentBrowser.spec.ts
index e4e7217f934f..97aed2160908 100644
--- 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
index dcb163f11af3..fef2ea773e7a 100644
--- 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
index 36f340b6bbc4..26ec8eb673bc 100644
--- 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>