host: Add read-only state for code mode editor

packages/host/app/components/operator-mode/code-editor.gts

@@ -287,6 +287,10 @@ export default class CodeEditor extends Component<Signature> {
     return undefined;
   }
 
+  private get readOnly() {
+    return !this.readyFile.realmSession.canWrite;
+  }
+
   <template>
     {{#if this.isReady}}
       {{#if this.readyFile.isBinary}}
@@ -303,6 +307,7 @@ export default class CodeEditor extends Component<Signature> {
             language=this.language
             initialCursorPosition=this.initialMonacoCursorPosition
             onCursorPositionChange=this.selectDeclarationByMonacoCursorPosition
+            readOnly=this.readOnly
           }}
         ></div>
       {{/if}}

packages/host/app/modifiers/monaco.ts

@@ -20,6 +20,7 @@ interface Signature {
       onCursorPositionChange?: (position: MonacoSDK.Position) => void;
       onSetup?: (editor: MonacoSDK.editor.IStandaloneCodeEditor) => void;
       language?: string;
+      readOnly?: boolean;
       monacoSDK: typeof MonacoSDK;
     };
   };
@@ -46,6 +47,7 @@ export default class Monaco extends Modifier<Signature> {
       initialCursorPosition,
       onCursorPositionChange,
       onSetup,
+      readOnly,
       monacoSDK,
     }: Signature['Args']['Named'],
   ) {
@@ -66,6 +68,7 @@ export default class Monaco extends Modifier<Signature> {
     } else {
       let editorOptions: MonacoSDK.editor.IStandaloneEditorConstructionOptions =
         {
+          readOnly,
           value: content,
           language,
           scrollBeyondLastLine: false,

packages/host/app/styles/app.css

@@ -12,3 +12,28 @@
 .link:hover {
   color: var(--boxel-highlight-hover);
 }
+
+/* Style Monaco read-only tooltip, copied from packages/boxel-ui/addon/src/components/tooltip/index.gts */
+.ember-application .monaco-editor .monaco-editor-overlaymessage {
+  background-color: rgb(0 0 0 / 80%);
+  box-shadow: 0 0 0 1px var(--boxel-light-500);
+  color: var(--boxel-light);
+  text-align: center;
+  border-radius: var(--boxel-border-radius-sm);
+  padding: var(--boxel-sp-xxxs) var(--boxel-sp-sm);
+  width: max-content;
+  position: absolute;
+  font: var(--boxel-tooltip-font, var(--boxel-font-xs));
+  z-index: 5;
+
+  .message {
+    padding: 0;
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+  }
+
+  .anchor.top, .anchor.below {
+      display: none;
+  }
+}

packages/host/tests/acceptance/code-submode/editor-test.ts

@@ -4,6 +4,7 @@ import { setupApplicationTest } from 'ember-qunit';
 
 import window from 'ember-window-mock';
 import { setupWindowMock } from 'ember-window-mock/test-support';
+import * as MonacoSDK from 'monaco-editor';
 import { module, test } from 'qunit';
 import stringify from 'safe-stable-stringify';
 
@@ -15,6 +16,7 @@ import { Realm } from '@cardstack/runtime-common/realm';
 
 import type EnvironmentService from '@cardstack/host/services/environment-service';
 import type LoaderService from '@cardstack/host/services/loader-service';
+import type MonacoService from '@cardstack/host/services/monaco-service';
 
 import {
   TestRealmAdapter,
@@ -34,23 +36,34 @@ import {
 } from '../../helpers';
 import { setupMatrixServiceMock } from '../../helpers/mock-matrix-service';
 
+let realmPermissions: { [realmURL: string]: ('read' | 'write')[] } = {
+  [testRealmURL]: ['read', 'write'],
+};
+
 module('Acceptance | code submode | editor tests', function (hooks) {
   let realm: Realm;
+  let monacoService: MonacoService;
   let adapter: TestRealmAdapter;
 
   setupApplicationTest(hooks);
   setupLocalIndexing(hooks);
   setupServerSentEvents(hooks);
   setupOnSave(hooks);
   setupWindowMock(hooks);
-  setupMatrixServiceMock(hooks);
+  setupMatrixServiceMock(hooks, () => realmPermissions);
 
   hooks.afterEach(async function () {
     window.localStorage.removeItem('recent-cards');
     window.localStorage.removeItem('recent-files');
   });
 
   hooks.beforeEach(async function () {
+    realmPermissions = { [testRealmURL]: ['read', 'write'] };
+
+    monacoService = this.owner.lookup(
+      'service:monaco-service',
+    ) as MonacoService;
+
     window.localStorage.removeItem('recent-cards');
     window.localStorage.removeItem('recent-files');
 
@@ -307,6 +320,11 @@ module('Acceptance | code submode | editor tests', function (hooks) {
       codePath: `${testRealmURL}Pet/mango.json`,
     });
     await waitForCodeEditor();
+
+    assert.false(
+      monacoService?.editor?.getOption(MonacoSDK.editor.EditorOption.readOnly),
+      'editor should not be read-only',
+    );
     assert.deepEqual(JSON.parse(getMonacoContent()), {
       data: {
         attributes: {
@@ -755,4 +773,34 @@ module('Acceptance | code submode | editor tests', function (hooks) {
       'pet.gts changes were saved',
     );
   });
+
+  module('when the user lacks write permissions', function (hooks) {
+    hooks.beforeEach(function () {
+      realmPermissions = { [testRealmURL]: ['read'] };
+    });
+
+    test('the editor is read-only', async function (assert) {
+      await visitOperatorMode({
+        stacks: [
+          [
+            {
+              id: `${testRealmURL}Pet/mango`,
+              format: 'isolated',
+            },
+          ],
+        ],
+        submode: 'code',
+        codePath: `${testRealmURL}Pet/mango.json`,
+      });
+
+      await waitForCodeEditor();
+
+      assert.true(
+        monacoService?.editor?.getOption(
+          MonacoSDK.editor.EditorOption.readOnly,
+        ),
+        'editor should be read-only',
+      );
+    });
+  });
 });