Make schema editor field row clickable (#2247)

FadhlanR · web-flow · commit bbcdef3ec41c · 2025-03-07T14:52:33.000+07:00
diff --git a/packages/host/app/components/operator-mode/card-adoption-chain.gts b/packages/host/app/components/operator-mode/card-adoption-chain.gts
@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 
 import { LoadingIndicator } from '@cardstack/boxel-ui/components';
 
-import { type ResolvedCodeRef } from '@cardstack/runtime-common/code-ref';
+import { type CodeRef } from '@cardstack/runtime-common/code-ref';
 import { ModuleSyntax } from '@cardstack/runtime-common/module-syntax';
 
 import CardSchemaEditor from '@cardstack/host/components/operator-mode/card-schema-editor';
@@ -24,8 +24,9 @@ interface Signature {
     moduleSyntax: ModuleSyntax;
     isReadOnly: boolean;
     goToDefinition: (
-      codeRef: ResolvedCodeRef | undefined,
+      codeRef: CodeRef | undefined,
       localName: string | undefined,
+      fieldName?: string,
     ) => void;
     isLoading: boolean;
   };
diff --git a/packages/host/app/components/operator-mode/card-schema-editor.gts b/packages/host/app/components/operator-mode/card-schema-editor.gts
@@ -20,7 +20,7 @@ import { ArrowTopLeft, IconLink, IconPlus } from '@cardstack/boxel-ui/icons';
 
 import { getPlural } from '@cardstack/runtime-common';
 
-import { type ResolvedCodeRef } from '@cardstack/runtime-common/code-ref';
+import { type CodeRef } from '@cardstack/runtime-common/code-ref';
 import type { ModuleSyntax } from '@cardstack/runtime-common/module-syntax';
 
 import EditFieldModal from '@cardstack/host/components/operator-mode/edit-field-modal';
@@ -57,8 +57,9 @@ interface Signature {
     childFields: string[];
     parentFields: string[];
     goToDefinition: (
-      codeRef: ResolvedCodeRef | undefined,
+      codeRef: CodeRef | undefined,
       localName: string | undefined,
+      fieldName?: string,
     ) => void;
   };
 }
@@ -91,6 +92,8 @@ export default class CardSchemaEditor extends Component<Signature> {
         border-radius: var(--code-mode-container-border-radius);
         background-color: var(--boxel-light);
         overflow: hidden;
+        cursor: pointer;
+        width: 100%;
       }
       .card-field + .card-field {
         margin-top: var(--boxel-sp-xxs);
@@ -163,6 +166,13 @@ export default class CardSchemaEditor extends Component<Signature> {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        border: none;
+        background-color: transparent;
+        padding: 0;
+        text-align: left;
+      }
+      .field-name:hover {
+        color: var(--boxel-highlight);
       }
 
       .overridden-field {
@@ -244,7 +254,10 @@ export default class CardSchemaEditor extends Component<Signature> {
               <Pill
                 class='field-pill'
                 @kind='button'
-                {{on 'click' (fn @goToDefinition codeRef @cardType.localName)}}
+                {{on
+                  'click'
+                  (fn @goToDefinition codeRef @cardType.localName undefined)
+                }}
                 data-test-card-schema-navigational-button
               >
                 <:iconLeft>
@@ -293,15 +306,17 @@ export default class CardSchemaEditor extends Component<Signature> {
               data-test-field-name={{field.name}}
             >
               <div class='left'>
-                <div
+                <button
                   class={{if
                     (this.isOverridden field)
                     'field-name overridden-field'
                     'field-name'
                   }}
+                  data-test-field-name-button={{field.name}}
+                  {{on 'click' (fn this.goToField field)}}
                 >
                   {{field.name}}
-                </div>
+                </button>
                 <div class='field-types' data-test-field-types>
                   {{this.fieldTypes field}}
                 </div>
@@ -333,7 +348,12 @@ export default class CardSchemaEditor extends Component<Signature> {
                             @kind='button'
                             {{on
                               'click'
-                              (fn @goToDefinition codeRef field.card.localName)
+                              (fn
+                                @goToDefinition
+                                codeRef
+                                field.card.localName
+                                undefined
+                              )
                             }}
                             data-test-card-schema-field-navigational-button
                           >
@@ -544,4 +564,33 @@ export default class CardSchemaEditor extends Component<Signature> {
       inline: 'nearest',
     });
   }
+
+  @action
+  private goToField(field: FieldOfType) {
+    if (
+      `${this.args.cardType.module}.gts` ===
+      this.operatorModeStateService.codePathString
+    ) {
+      // In the same file
+      this.args.goToDefinition(
+        undefined,
+        this.args.cardType.localName,
+        field.name,
+      );
+      return;
+    }
+
+    let codeRef = getCodeRef(this.args.cardType);
+    if (!codeRef) {
+      return undefined;
+    }
+    this.args.goToDefinition(
+      {
+        type: 'fieldOf',
+        card: codeRef,
+        field: field.name,
+      },
+      this.args.cardType.localName,
+    );
+  }
 }
diff --git a/packages/host/app/components/operator-mode/code-editor.gts b/packages/host/app/components/operator-mode/code-editor.gts
@@ -45,7 +45,9 @@ interface Signature {
     saveSourceOnClose: (url: URL, content: string) => void;
     selectDeclaration: (declaration: ModuleDeclaration) => void;
     onFileSave: (status: 'started' | 'finished') => void;
-    onSetup: (updateCursorByName: (name: string) => void) => void;
+    onSetup: (
+      updateCursorByName: (name: string, fieldName?: string) => void,
+    ) => void;
   };
 }
 
@@ -137,12 +139,36 @@ export default class CodeEditor extends Component<Signature> {
       }
     }
 
+    let selectedFieldName = this.operatorModeStateService.state.fieldSelection;
+    let { selectedDeclaration } = this.args;
+    if (
+      selectedFieldName &&
+      selectedDeclaration &&
+      'possibleFields' in selectedDeclaration &&
+      selectedDeclaration.possibleFields
+    ) {
+      let possibleFields = selectedDeclaration.possibleFields;
+      let field = possibleFields.get(selectedFieldName);
+      let loc =
+        field?.path?.node && 'loc' in field.path.node && field.path.node.loc
+          ? field.path.node.loc
+          : undefined;
+      if (loc) {
+        let { start } = loc;
+        let { line, column } = start;
+        // Adjusts column to make cursor position right after the field name
+        let fieldDecoratorTextLength = 8;
+        column = column + fieldDecoratorTextLength + selectedFieldName.length;
+        return new Position(line, column);
+      }
+    }
+
     let loc =
-      this.args.selectedDeclaration?.path?.node &&
-      'body' in this.args.selectedDeclaration.path.node &&
-      'loc' in this.args.selectedDeclaration.path.node.body &&
-      this.args.selectedDeclaration.path.node.body.loc
-        ? this.args.selectedDeclaration?.path?.node.body.loc
+      selectedDeclaration?.path?.node &&
+      'body' in selectedDeclaration.path.node &&
+      'loc' in selectedDeclaration.path.node.body &&
+      selectedDeclaration.path.node.body.loc
+        ? selectedDeclaration?.path?.node.body.loc
         : undefined;
     if (loc) {
       let { start } = loc;
@@ -152,17 +178,37 @@ export default class CodeEditor extends Component<Signature> {
   }
 
   @action
-  private updateMonacoCursorPositionByName(name: string) {
+  private updateMonacoCursorPositionByName(name: string, fieldName?: string) {
     let declaration = findDeclarationByName(name, this.declarations);
     if (declaration === undefined) return;
-    return this.updateMonacoCursorPositionByDeclaration(declaration);
+    return this.updateMonacoCursorPositionByDeclaration(declaration, fieldName);
   }
 
   @action
   private updateMonacoCursorPositionByDeclaration(
     declaration: ModuleDeclaration,
+    fieldName?: string,
   ) {
     if (
+      fieldName &&
+      'possibleFields' in declaration &&
+      declaration.possibleFields
+    ) {
+      let possibleFields = declaration.possibleFields;
+      let field = possibleFields.get(fieldName);
+      let loc =
+        field?.path?.node && 'loc' in field.path.node && field.path.node.loc
+          ? field.path.node.loc
+          : undefined;
+      if (loc) {
+        // Adjusts column to make cursor position right after the field name
+        let fieldDecoratorTextLength = 8;
+        let columnAdjustment = fieldDecoratorTextLength + fieldName.length;
+        this.monacoService.updateCursorPosition(
+          new Position(loc.start.line, loc.start.column + columnAdjustment),
+        );
+      }
+    } else if (
       declaration.path?.node &&
       'body' in declaration.path.node &&
       'loc' in declaration.path.node.body &&
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
@@ -36,6 +36,7 @@ import {
   isResolvedCodeRef,
   type ResolvedCodeRef,
   PermissionsContextName,
+  CodeRef,
 } from '@cardstack/runtime-common';
 import { isEquivalentBodyPosition } from '@cardstack/runtime-common/schema-analysis-plugin';
 
@@ -158,7 +159,9 @@ export default class CodeSubmode extends Component<Signature> {
 
   private defaultPanelWidths: PanelWidths;
   private defaultPanelHeights: PanelHeights;
-  private updateCursorByName: ((name: string) => void) | undefined;
+  private updateCursorByName:
+    | ((name: string, fieldName?: string) => void)
+    | undefined;
   private panelSelections: Record<string, SelectedAccordionItem>;
 
   private createFileModal: CreateFileModal | undefined;
@@ -497,10 +500,11 @@ export default class CodeSubmode extends Component<Signature> {
 
   @action
   private goToDefinitionAndResetCursorPosition(
-    codeRef: ResolvedCodeRef | undefined,
+    codeRef: CodeRef | undefined,
     localName: string | undefined,
+    fieldName?: string,
   ) {
-    this.goToDefinition(codeRef, localName);
+    this.goToDefinition(codeRef, localName, fieldName);
     if (this.codePath) {
       let urlString = this.codePath.toString();
       this.recentFilesService.updateCursorPositionByURL(
@@ -512,14 +516,16 @@ export default class CodeSubmode extends Component<Signature> {
 
   @action
   private goToDefinition(
-    codeRef: ResolvedCodeRef | undefined,
+    codeRef: CodeRef | undefined,
     localName: string | undefined,
+    fieldName?: string,
   ) {
-    this.operatorModeStateService.updateCodePathWithCodeSelection(
+    this.operatorModeStateService.updateCodePathWithSelection({
       codeRef,
       localName,
-      this.updateCursorByName,
-    );
+      fieldName,
+      onLocalSelection: this.updateCursorByName,
+    });
   }
 
   private loadScopedCSS = restartableTask(async () => {
@@ -713,7 +719,9 @@ export default class CodeSubmode extends Component<Signature> {
     this.createFileModal = createFileModal;
   };
 
-  private setupCodeEditor = (updateCursorByName: (name: string) => void) => {
+  private setupCodeEditor = (
+    updateCursorByName: (name: string, fieldName?: string) => void,
+  ) => {
     this.updateCursorByName = updateCursorByName;
   };
 
diff --git a/packages/host/app/components/operator-mode/code-submode/schema-editor.gts b/packages/host/app/components/operator-mode/code-submode/schema-editor.gts
@@ -5,7 +5,7 @@ import Component from '@glimmer/component';
 import { cached } from '@glimmer/tracking';
 
 import { getPlural } from '@cardstack/runtime-common';
-import { type ResolvedCodeRef } from '@cardstack/runtime-common/code-ref';
+import { type CodeRef } from '@cardstack/runtime-common/code-ref';
 
 import { ModuleSyntax } from '@cardstack/runtime-common/module-syntax';
 
@@ -30,8 +30,9 @@ interface Signature {
     card: typeof BaseDef;
     isReadOnly: boolean;
     goToDefinition: (
-      codeRef: ResolvedCodeRef | undefined,
+      codeRef: CodeRef | undefined,
       localName: string | undefined,
+      fieldName?: string,
     ) => void;
   };
   Blocks: {
diff --git a/packages/host/app/services/operator-mode-state-service.ts b/packages/host/app/services/operator-mode-state-service.ts
diff --git a/packages/host/tests/acceptance/code-submode/schema-editor-test.ts b/packages/host/tests/acceptance/code-submode/schema-editor-test.ts
