Merge branch 'main' into cs-7852-add-skill-for-editing-code-of-modules-and-instances

Author: jurgenwerk

packages/host/app/components/matrix/login.gts

@@ -115,6 +115,7 @@ export default class Login extends Component<Signature> {
       }
       .forgot-password:hover {
         color: var(--boxel-highlight);
+        background-color: transparent;
       }
       .button {
         --boxel-button-padding: var(--boxel-sp-sm);

packages/host/app/components/operator-mode/profile-info-popover.gts

@@ -214,6 +214,8 @@ export class ProfileInfo extends Component<ProfileInfoSignature> {
         margin: auto;
         display: flex;
         flex-direction: column;
+        max-width: 100%;
+        overflow: hidden;
         --profile-avatar-icon-size: 70px;
         --profile-avatar-icon-border: 0;
       }
@@ -226,11 +228,19 @@ export class ProfileInfo extends Component<ProfileInfoSignature> {
         margin-top: var(--boxel-sp-xxxs);
         font-size: var(--boxel-font-size);
         font-weight: 600;
+        max-width: 100%;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .profile-handle {
         margin-top: var(--boxel-sp-xxxxs);
         color: var(--boxel-500);
+        max-width: 100%;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     </style>
   </template>

packages/host/app/resources/module-contents.ts

@@ -99,7 +99,11 @@ export class ModuleContentsResource extends Resource<Args> {
   // it has to know this to distinguish the act of editing of a file and switching between definitions
   // when editing a file we don't want to introduce loading state, whereas when switching between definitions we do
   get isLoadingNewModule() {
-    return this.executableFile?.url !== this.state?.url ?? false;
+    if (!this.executableFile) {
+      return false;
+    }
+
+    return this.executableFile.url !== this.state?.url;
   }
 
   get declarations() {

packages/host/app/services/card-service.ts

@@ -147,6 +147,10 @@ export default class CardService extends Service {
     return;
   }
 
+  // WARNING! please do not use this to create card instances. Use
+  // `CardResource.getCard()` instead for creating card instances. When you
+  // create card instances directly from here it bypasses the store's identity
+  // map and instances created directly from here will behave very problematically.
   async createFromSerialized(
     resource: LooseCardResource,
     doc: LooseSingleCardDocument | CardDocument,

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

@@ -650,6 +650,39 @@ module('Acceptance | code submode | inspector tests', function (hooks) {
     assert.dom('[data-test-card-instance-definition]').doesNotExist();
   });
 
+  test('can switch between inspector showing module definition and inspector showing json instance definition in card inheritance panel', async function (assert) {
+    await visitOperatorMode({
+      stacks: [[]],
+      submode: 'code',
+      codePath: `${testRealmURL}person.gts`,
+    });
+
+    await waitForCodeEditor();
+    await waitFor('[data-test-card-inspector-panel]');
+    await waitFor('[data-test-card-module-definition]');
+
+    assert.dom('[data-test-card-module-definition]').includesText('Card');
+    assert.dom('[data-test-card-instance-definition]').doesNotExist();
+
+    await click('[data-test-file-browser-toggle]');
+    await click('[data-test-directory="Person/"]');
+    await waitFor('[data-test-file="Person/1.json"]');
+    await click('[data-test-file="Person/1.json"]');
+
+    await click('[data-test-inspector-toggle]');
+    await waitFor('[data-test-card-inspector-panel]');
+    await waitFor('[data-test-card-module-definition]');
+
+    assert
+      .dom('[data-test-card-instance-definition]')
+      .includesText('Hassan Abdel-Rahman');
+    assert
+      .dom(
+        '[data-test-card-instance-definition] [data-test-definition-file-extension]',
+      )
+      .includesText('.JSON');
+  });
+
   test('"in-this-file" panel displays all elements and re-highlights upon selection', async function (assert) {
     await visitOperatorMode({
       stacks: [[]],