Skip to content

Migrate experiments-realm card source to the v2 search surface #5290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
habdelra wants to merge 3 commits into
base: main
Choose a base branch
from
+93 −66
Open

Migrate experiments-realm card source to the v2 search surface #5290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95bd7af
Migrate experiments-realm card source to the v2 search surface
habdelra Jun 19, 2026
ef40954
experiments-realm app-card: render results only once entries are present
habdelra Jun 19, 2026
b3fe987
experiments-realm: name the v2 search binding SearchResults
habdelra Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 33 additions & 19 deletions packages/experiments-realm/app-card.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ import { and, bool, cn } from '@cardstack/boxel-ui/helpers';
import {
type Query,
baseRealm,
type PrerenderedCardLike,
type RenderableSearchEntryLike,
type SearchEntryWireQuery,
searchEntryWireQueryFromQuery,
} from '@cardstack/runtime-common';
import { hash } from '@ember/helper';
import { on } from '@ember/modifier';
Expand Down Expand Up @@ -64,7 +66,7 @@ export class Tab extends FieldDef {
}

class TableView extends GlimmerComponent<{
Args: { cards: PrerenderedCardLike[]; context?: CardContext };
Args: { cards: RenderableSearchEntryLike[]; context?: CardContext };
}> {
<template>
{{#if this.isLoaded}}
Expand Down Expand Up @@ -127,7 +129,7 @@ class TableView extends GlimmerComponent<{
// a possibility it might be initialized as undefined
@tracked private cardCollection = this.args.context?.getCardCollection(
this,
() => this.args.cards.map((c) => c.url),
() => this.args.cards.map((c) => c.id),
);

private get isLoaded() {
Expand Down Expand Up @@ -170,22 +172,21 @@ class DefaultTabTemplate extends GlimmerComponent<DefaultTabSignature> {
<template>
<div class='app-card-content'>
{{#if this.activeTabRef}}
{{#if this.query}}
<@context.prerenderedCardSearchComponent
@query={{this.query}}
@format='fitted'
@realms={{@realms}}
@isLive={{true}}
{{#if this.searchResultsQuery}}
<@context.searchResultsComponent
@query={{this.searchResultsQuery}}
as |results|
>
<:loading>Loading...</:loading>
<:response as |cards|>
{{#if results.entries.length}}
{{#if @activeTab.isTable}}
<TableView @cards={{cards}} @context={{@context}} />
<TableView @cards={{results.entries}} @context={{@context}} />
{{else}}
<CardsGrid @cards={{cards}} @context={{@context}} />
<CardsGrid @cards={{results.entries}} @context={{@context}} />
{{/if}}
</:response>
</@context.prerenderedCardSearchComponent>
{{else if results.isLoading}}
Loading...
{{/if}}
</@context.searchResultsComponent>
{{/if}}
{{else}}
<p>No cards available</p>
Expand Down Expand Up @@ -330,6 +331,19 @@ class DefaultTabTemplate extends GlimmerComponent<DefaultTabSignature> {
} as Query;
}

// The v2 `search-entry`-rooted query, adapted from the v1 `query` above.
// `fitted` is the default rendering, so no `htmlQuery` binding is needed.
// Undefined (no active tab ref) leaves the search component idle.
get searchResultsQuery(): SearchEntryWireQuery | undefined {
if (!this.query) {
return undefined;
}
return {
...searchEntryWireQueryFromQuery(this.query),
realms: this.args.realms,
};
}

@action createNew(value: unknown) {
let cardDoc = isSingleCardDocument(value) ? value : undefined;
this.createCard.perform(cardDoc);
Expand Down Expand Up @@ -492,7 +506,7 @@ export class AppCard extends CardDef {

export class CardsGrid extends GlimmerComponent<{
Args: {
cards: PrerenderedCardLike[];
cards: RenderableSearchEntryLike[];
context?: CardContext;
isListFormat?: boolean;
};
Expand All @@ -505,14 +519,14 @@ export class CardsGrid extends GlimmerComponent<{
<li
class='cards-grid-item'
{{@context.cardComponentModifier
cardId=card.url
cardId=card.id
format='data'
fieldType=undefined
fieldName=undefined
}}
data-test-cards-grid-item={{removeFileExtension card.url}}
data-test-cards-grid-item={{removeFileExtension card.id}}
{{! In order to support scrolling cards into view we use a selector that is not pruned out in production builds }}
data-cards-grid-item={{removeFileExtension card.url}}
data-cards-grid-item={{removeFileExtension card.id}}
>
<CardContainer class='card' @displayBoundaries={{true}}>
{{card.component}}
Expand Down
10 changes: 5 additions & 5 deletions packages/experiments-realm/blog-app.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
<:meta as |card|>
{{#if this.showAdminData}}
<BlogAdminData
@cardId={{card.url}}
@cardId={{card.id}}
@context={{this.context}}
/>
{{/if}}
Expand Down Expand Up @@ -307,10 +307,10 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
displayName === 'Blog Posts'
? 'blog-posts-grid'
: displayName === 'Author Bios'
? 'author-bios-grid'
: displayName === 'Categories'
? 'categories-grid'
: '';
? 'author-bios-grid'
: displayName === 'Categories'
? 'categories-grid'
: '';
return gridName ? `bordered-items ${gridName}` : '';
}

Expand Down
56 changes: 33 additions & 23 deletions packages/experiments-realm/components/card-list.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { type CardContext } from 'https://cardstack.com/base/card-api';

import {
type Query,
type PrerenderedCardLike,
type RenderableSearchEntryLike,
type SearchEntryWireQuery,
searchEntryWireQueryFromQuery,
} from '@cardstack/runtime-common';

interface CardListSignature {
Expand All @@ -14,37 +16,45 @@ interface CardListSignature {
context?: CardContext;
};
Blocks: {
meta: [card: PrerenderedCardLike];
meta: [card: RenderableSearchEntryLike];
};
Element: HTMLElement;
}
export class CardList extends GlimmerComponent<CardListSignature> {
// The v2 `search-entry`-rooted query, adapted from the incoming v1 `Query`.
// `embedded` is bound through the query's `htmlQuery` field (the v2 way to
// select a prerendered format); a bare `eq.format` would be read as an
// `item.` field path and rejected.
get searchResultsQuery(): SearchEntryWireQuery {
let query = searchEntryWireQueryFromQuery(this.args.query);
return {
...query,
realms: this.args.realms,
filter: {
...query.filter,
eq: { ...query.filter?.eq, htmlQuery: { eq: { format: 'embedded' } } },
},
};
}
<template>
<ul class='card-list' ...attributes>
{{#let
(component @context.prerenderedCardSearchComponent)
as |PrerenderedCardSearch|
(component @context.searchResultsComponent)
as |SearchResults|
}}
<PrerenderedCardSearch
@query={{@query}}
@format='embedded'
@realms={{@realms}}
@isLive={{true}}
>
<:loading>
<SearchResults @query={{this.searchResultsQuery}} as |results|>
{{#if results.isLoading}}
Comment thread
habdelra marked this conversation as resolved.
Loading...
</:loading>
<:response as |cards|>
{{#each cards key='url' as |card|}}
<li class='card-list-item'>
<card.component class='card' />
{{#if (has-block 'meta')}}
{{yield card to='meta'}}
{{/if}}
</li>
{{/each}}
</:response>
</PrerenderedCardSearch>
{{/if}}
{{#each results.entries key='id' as |card|}}
Comment thread
habdelra marked this conversation as resolved.
<li class='card-list-item'>
<card.component class='card' />
{{#if (has-block 'meta')}}
{{yield card to='meta'}}
{{/if}}
</li>
{{/each}}
</SearchResults>
{{/let}}
</ul>
<style scoped>
Expand Down
41 changes: 22 additions & 19 deletions packages/experiments-realm/components/grid.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import GlimmerComponent from '@glimmer/component';

import { type CardContext } from 'https://cardstack.com/base/card-api';

import { type Query } from '@cardstack/runtime-common';
import {
type Query,
searchEntryWireQueryFromQuery,
type SearchEntryWireQuery,
} from '@cardstack/runtime-common';

interface CardsGridSignature {
Args: {
Expand All @@ -14,33 +18,32 @@ interface CardsGridSignature {
Element: HTMLElement;
}
export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
get searchResultsQuery(): SearchEntryWireQuery {
return {
...searchEntryWireQueryFromQuery(this.args.query),
realms: this.args.realms,
};
}
<template>
<ul
class='cards {{@selectedView}}-view'
data-test-cards-grid-cards
...attributes
>
{{#let
(component @context.prerenderedCardSearchComponent)
as |PrerenderedCardSearch|
(component @context.searchResultsComponent)
as |SearchResults|
}}
<PrerenderedCardSearch
@query={{@query}}
@format='fitted'
@realms={{@realms}}
@isLive={{true}}
>
<:loading>
<SearchResults @query={{this.searchResultsQuery}} as |results|>
{{#if results.isLoading}}
Comment thread
habdelra marked this conversation as resolved.
Loading...
</:loading>
<:response as |cards|>
{{#each cards key='url' as |card|}}
<li class='{{@selectedView}}-view-container'>
<card.component class='card' />
</li>
{{/each}}
</:response>
</PrerenderedCardSearch>
{{/if}}
{{#each results.entries key='id' as |card|}}
<li class='{{@selectedView}}-view-container'>
<card.component class='card' />
</li>
{{/each}}
</SearchResults>
{{/let}}
</ul>
<style scoped>
Expand Down