Enhance catalog entry and code mode RHS panel to be able to create new catalog entry #1993

tintinthong · 2024-12-31T12:33:51Z

This PR allows a user to create a new catalog entry when focusing on a card declaration that can be used (exported card or field) to create a catalog entry

github-actions · 2024-12-31T12:46:29Z

Host Test Results

    1 files ±0     1 suites ±0 23m 15s ⏱️ +59s
742 tests +5 740 ✔️ +5 2 💤 ±0 0 ❌ ±0
747 runs +5 745 ✔️ +5 2 💤 ±0 0 ❌ ±0

Results for commit 4a32548. ± Comparison against base commit 006d4f6.

♻️ This comment has been updated with latest results.

tintinthong · 2024-12-31T16:43:52Z

packages/base/catalog-entry.gts

@@ -30,46 +33,12 @@ export class CatalogEntry extends CardDef {
      return new URL(this.ref.module, this[relativeTo]).href;
    },
  });
-  @field demo = contains(FieldDef);


I removed this for now and will treat adding examples of different boxel spec in separate PR

this actually needed a lot more discussion in terms of how we render this as it should be a polymorphic card and not a field. but yeah, good to remove for now...

tintinthong · 2024-12-31T16:44:32Z

packages/base/cards-grid.gts

+            by: 'createdAt',
+            direction: 'desc',
+          },
+        ],


Focus on the last newly created catalog entry, if there are more than one

tintinthong · 2024-12-31T16:46:40Z

packages/host/app/components/operator-mode/create-file-modal.gts

@@ -765,6 +783,59 @@ export class ${className} extends ${exportName} {
      this.saveError = `Error creating card instance: ${e.message}`;
    }
  });
+


I make use of create-file-modal bcos other modals assume the existence of a catalog entry. This is not displayed in the top right for simplicity

tintinthong · 2024-12-31T16:49:27Z

packages/base/catalog-entry.gts

-      </CatalogEntryContainer>
-    </template>
-  };
+  @field examples = linksToMany(CardDef);


stub this for now. We need to consider ways to model examples for both fieldDef and cardDef. I think @demo used to be the way to do this but let's think about this in another PR. We may very well just re-include demo but we need to investigate its usage more carefully. But, given fields are mostly displayed in cards anyway, maybe we only want to link to cards for now

lukemelia · 2024-12-31T18:14:56Z

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

+  get showBoxelSpecPreview() {
+    return (
+      !this.moduleContentsResource.isLoading &&
+      this.selectedDeclaration?.exportName


Should boxel spec pane be present for any module, or just for cards? What does this logic say?

In this logic, it models the boxel spec as present in any selected code with an exportName (including defaults)

exported card

exported field

However, at the top-level, exported variable, function, class which are not card or fields, are ignored entirely by the RHS

lukemelia · 2024-12-31T18:16:52Z

packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts

+        </BoxelButton>
+      {{else}}
+        <div class='boxel-spec-selector'>
+          <RadioInput


Does it make sense to show a Radio button if there is only one spec instance?

There can be more than one boxel spec / catalog entry since the boxel spec is simply a card that points to a code ref.

A user can make this themselves. And I don't think we are in control of the user making an extra code spec

I understand that there can be more than one. But I also think that in most cases there will be zero or one. So I wonder if radio input should be a special case and not the usual case.

packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts

packages/base/catalog-entry.gts

habdelra · 2024-12-31T18:44:42Z

packages/host/app/components/operator-mode/create-file-modal.gts

@@ -765,6 +783,57 @@ export class ${className} extends ${exportName} {
      this.saveError = `Error creating card instance: ${e.message}`;
    }
  });
+
+  private createBoxelSpecInstance = restartableTask(async () => {


i think its probably time to split the different files that can be created into different modules. right now this module is doing a lot. perhaps we can use a strategy pattern to figure out how to create the right type of file.

it could be a simple as having a module that exports an async function that is the meat of this task, and then setting up a map of file types to functions to make the file type and then just executing the async function that makes the file.

it could be a simple as having a module that exports an async function that is the meat of this task, and then setting up a map of file types to functions to make the file type and then just executing the async function that makes the file.

Im not sure that I went overkill on this but I have done some work which might be a little bit of a restructuring. Tho particularly, I shud not include this in as part of this PR to ensure there are no regressions independently.

The refactor is essentially

Use a service to store the state of the modal createFileService. The service is responsible for triggering the open of the modal and deciding the strategy based upon the api call. So consumers are expected to inject this into them to open the modal.

create separate strategies that will have an interface of create()

the strategies CreateCardInstance, CreateCardDefinition, IneritCardDefinition, CreateCardInstanceFromDefinition, CreateFieldDefinition`. Each of these strategies will require different things but the service will validate this when opening.

the strategies will take in a composition of FileNameHandling (fileName, displayName) and CatalogEntryHandling (catalogEntry). Each of these classes should handle the edit and default state internally. eg catalogEntry will hold the dropdown state within itself. Each of these tend to within itself check whether its the treatment for a card or a field, eg gts vs json or adoptsFrom vs inherit.

the createFileModal then just relay the strategy within it. The create button would just be a single button that will call create from the strategy. A lot of the displays in the modal should be displayed based upon isCatalogEntryHandling and isFileNameHandling. So, those compositions are key to the UI.

What do you think so far?

I feel there are some issues I run into but not too major

I think I have instantiated the strategies as classes but I seem to want to include services inside that strategy but can't inject them by default it in unless I use some EmberObject stuff. I decided to pass it down using a context object into the instantiation of the class.

When opening the modal and creating a card, there is a redirect of the codePath and it sets everything to edit mode. The function setPreview is all the way up the top in code-submode that means consumers will actually want to call this action on code-submode perhaps this is fine since the preview-format exists on code-submode itself.

Im going to push a PR out for this separately

tintinthong · 2025-01-06T13:34:06Z

Im currently working on this design.

The changes are

having a dropdown
in each dropdown item, cut the path and use realm icon. in the plural case, I notice there is no tag of the spec anywhere.. I am clarifying with chris now
the accordion will display the n instances if there are any
if there are n = 1, the dropdown arrow shud not be there
there shud be a create button at the accordion (but shud wait for example from ian on how to implement them)

burieberry · 2025-01-14T17:00:14Z

Some observations -- if these are outside of the scope of this PR, we should split up the work on linear:
I clicked on "Create" on Boxel Spec on app-card to create a spec for Tab fieldDef:

"Create" on Boxel Spec panel only allows me to create a single spec
Boxel Spec panel is only showing me the spec for Tab and not for AppCard
The newly created spec does not know its type (it's null). isField is also marked as false even though I created it from a Field Def.
"Add Cards" for Examples button displays everything, even when the ref is known.
The new specs I published did not appear when I clicked on Create New from interact mode cards grid

Visual design:

The spacing and alignments can use some tidying up.
The pill with the highlighted arrow on exported name looks like it will be a button, but it's not.

burieberry · 2025-01-14T17:04:01Z

packages/base/catalog-entry.gts

+  @field title = contains(StringField, {
    computeVia: function (this: CatalogEntry) {
-      return this[realmInfo]?.name;
+      return this.name || this.ref.name;
    },
  });


This won't work well for default exports. The ref name will be 'default' for each one

burieberry

I came across a couple of issues as I wrote in my comment. I think you need a test that covers the case for a module with a default export and multiple FieldDef and CardDef exports and make sure it works as expected

tintinthong · 2025-01-14T17:22:16Z

Some observations -- if these are outside of the scope of this PR, we should split up the work on linear: I clicked on "Create" on Boxel Spec on app-card to create a spec for Tab fieldDef:

"Create" on Boxel Spec panel only allows me to create a single spec

That is intended to encourage users not to create more than one spec per code ref

Boxel Spec panel is only showing me the spec for Tab and not for AppCard

This dependes on the code you have selected on the LHS definition picker. You need to choose AppCard as the selected export

The newly created spec does not know its type (it's null). isField is also marked as false even though I created it from a Field Def.

Good catch.

"Add Cards" for Examples button displays everything, even when the ref is known.

I think this can be useful to have.

The new specs I published did not appear when I clicked on Create New from interact mode cards grid

Hmmm weird. I think this is unexpected behaviour. I will look into it

Visual design:

The spacing and alignments can use some tidying up.

The pill with the highlighted arrow on exported name looks like it will be a button, but it's not.

Let me get the behaviour complete first and then maybe we can pair on this

tintinthong · 2025-01-15T00:37:07Z

The new specs I published did not appear when I clicked on Create New from interact mode cards grid

I can't seem to re-create this behaviour

tintinthong · 2025-01-15T01:03:00Z

"Add Cards" for Examples button displays everything, even when the ref is known.

this seems more involved than I anticipate. I have filed this here https://linear.app/cardstack/issue/CS-7831/link-to-examples-pertaining-to-code-ref

burieberry · 2025-01-17T15:23:18Z

Tried this again and the spec type and isCard/isField logic is now working as expected. I was also able to use the newly generated card def catalog entry to create new instances. 👍

tintinthong marked this pull request as draft December 31, 2024 12:34

tintinthong force-pushed the introduce-boxel-spec branch from a5aea58 to 0b6b51b Compare December 31, 2024 14:57

tintinthong commented Dec 31, 2024

View reviewed changes

tintinthong requested a review from a team December 31, 2024 18:09

tintinthong marked this pull request as ready for review December 31, 2024 18:09

lukemelia reviewed Dec 31, 2024

View reviewed changes

habdelra reviewed Dec 31, 2024

View reviewed changes

packages/base/catalog-entry.gts Show resolved Hide resolved

habdelra reviewed Dec 31, 2024

View reviewed changes

tintinthong force-pushed the introduce-boxel-spec branch from 99656e6 to c7e7122 Compare January 1, 2025 15:37

tintinthong force-pushed the introduce-boxel-spec branch from c7e7122 to 1c1e596 Compare January 8, 2025 18:09

tintinthong marked this pull request as draft January 9, 2025 14:56

tintinthong force-pushed the introduce-boxel-spec branch from 1c1e596 to 765490c Compare January 10, 2025 18:20

tintinthong added 9 commits January 13, 2025 20:32

update catalog entry card

b8cdbe7

add boxel spec component

de4baaa

fix re-exports not being detected by the schema editor

f488ac9

integrate boxxel spec in code submode

1a24148

get select disabled to not display down arrow

47b8e08

sort catalog entry by latest created

30732e5

enable boxel spec instance to be created via create-file-modal

4d5451b

fix test

651302e

Update everything to new schema

63222a9

tintinthong force-pushed the introduce-boxel-spec branch from 58e37e2 to 63222a9 Compare January 14, 2025 01:38

tintinthong added 3 commits January 13, 2025 21:17

fix lint

997799a

fix seed instances

6b26bef

fix instances in base

ac05498

burieberry reviewed Jan 14, 2025

View reviewed changes

use README title in all caps

99c4674

string boxel spec thru creation file args to impute specType

d3244be

tintinthong added 9 commits January 14, 2025 20:52

fix default

d4a6244

add test boxel spec

6a2b2aa

fix lint

cae1a39

fix lint for test

453be4e

rename type -> specType

95235df

fix type

18643fc

fix test data-test-field-type

58801d8

fix test again

9cc39f3

fix specType test

63ed23a

tintinthong added 8 commits January 18, 2025 10:38

add linkedExamples + containedExamples field

36de466

fix lint

c6c26ff

render cardTypeIcon. Need to load card from code ref

f5e5845

render containedExamples only when the specType is a field

1bc9750

Merge branch 'main' into introduce-boxel-spec

a6402ac

fix lint

c231d13

add Loader

08cce23

fix test

a4801a0

tintinthong requested a review from burieberry January 23, 2025 14:50

tintinthong added 2 commits January 23, 2025 23:15

Merge branch 'main' into introduce-boxel-spec

32be607

fix test

4a32548

tintinthong merged commit 4edc5d9 into main Jan 24, 2025
51 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance catalog entry and code mode RHS panel to be able to create new catalog entry #1993

Enhance catalog entry and code mode RHS panel to be able to create new catalog entry #1993

tintinthong commented Dec 31, 2024 •

edited

Loading

github-actions bot commented Dec 31, 2024 •

edited

Loading

tintinthong Dec 31, 2024

habdelra Dec 31, 2024 •

edited

Loading

tintinthong Dec 31, 2024

tintinthong Dec 31, 2024

tintinthong Dec 31, 2024 •

edited

Loading

lukemelia Dec 31, 2024

tintinthong Dec 31, 2024

lukemelia Dec 31, 2024

tintinthong Dec 31, 2024

lukemelia Dec 31, 2024

habdelra Dec 31, 2024

habdelra Dec 31, 2024

tintinthong Jan 6, 2025 •

edited

Loading

tintinthong Jan 14, 2025

tintinthong commented Jan 6, 2025 •

edited

Loading

burieberry commented Jan 14, 2025 •

edited

Loading

burieberry Jan 14, 2025

burieberry left a comment

tintinthong commented Jan 14, 2025 •

edited

Loading

tintinthong commented Jan 15, 2025

tintinthong commented Jan 15, 2025

burieberry commented Jan 17, 2025

Enhance catalog entry and code mode RHS panel to be able to create new catalog entry #1993

Enhance catalog entry and code mode RHS panel to be able to create new catalog entry #1993

Conversation

tintinthong commented Dec 31, 2024 • edited Loading

github-actions bot commented Dec 31, 2024 • edited Loading

Host Test Results

Choose a reason for hiding this comment

habdelra Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tintinthong Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tintinthong Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tintinthong commented Jan 6, 2025 • edited Loading

burieberry commented Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

burieberry left a comment

Choose a reason for hiding this comment

tintinthong commented Jan 14, 2025 • edited Loading

tintinthong commented Jan 15, 2025

tintinthong commented Jan 15, 2025

burieberry commented Jan 17, 2025

tintinthong commented Dec 31, 2024 •

edited

Loading

github-actions bot commented Dec 31, 2024 •

edited

Loading

habdelra Dec 31, 2024 •

edited

Loading

tintinthong Dec 31, 2024 •

edited

Loading

tintinthong Jan 6, 2025 •

edited

Loading

tintinthong commented Jan 6, 2025 •

edited

Loading

burieberry commented Jan 14, 2025 •

edited

Loading

tintinthong commented Jan 14, 2025 •

edited

Loading