Skip to content

Commit

Permalink
add feature-flag for code-submode playground panel
Browse files Browse the repository at this point in the history
  • Loading branch information
burieberry committed Jan 24, 2025
1 parent 3920809 commit c8abd0f
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 3 deletions.
23 changes: 22 additions & 1 deletion packages/host/app/components/operator-mode/code-submode.gts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import RecentFiles from '@cardstack/host/components/editor/recent-files';
import CodeSubmodeEditorIndicator from '@cardstack/host/components/operator-mode/code-submode/editor-indicator';
import SyntaxErrorDisplay from '@cardstack/host/components/operator-mode/syntax-error-display';

import ENV from '@cardstack/host/config/environment';

import { getCard } from '@cardstack/host/resources/card-resource';
import { isReady, type FileResource } from '@cardstack/host/resources/file';
import {
Expand Down Expand Up @@ -78,6 +80,8 @@ import DetailPanel from './detail-panel';
import NewFileButton from './new-file-button';
import SubmodeLayout from './submode-layout';

const isPlaygroundEnabled = ENV.featureFlags?.ENABLE_PLAYGROUND;

interface Signature {
Args: {
saveSourceOnClose: (url: URL, content: string) => void;
Expand All @@ -97,7 +101,11 @@ type PanelHeights = {
recentPanel: number;
};

type SelectedAccordionItem = 'schema-editor' | 'boxel-spec-preview' | null;
type SelectedAccordionItem =
| 'schema-editor'
| 'boxel-spec-preview'
| 'playground'
| null;

const defaultLeftPanelWidth =
((14.0 * parseFloat(getComputedStyle(document.documentElement).fontSize)) /
Expand Down Expand Up @@ -975,6 +983,19 @@ export default class CodeSubmode extends Component<Signature> {
</:content>
</A.Item>
</SchemaEditor>
{{#if isPlaygroundEnabled}}
<A.Item
class='accordion-item'
@contentClass='accordion-item-content'
@onClick={{fn this.selectAccordionItem 'playground'}}
@isOpen={{eq this.selectedAccordionItem 'playground'}}
data-test-accordion-item='playground'
>
<:title>Playground</:title>
<:content>
</:content>
</A.Item>
{{/if}}
{{#if this.showBoxelSpecPreview}}
<BoxelSpecPreview
@selectedDeclaration={{this.selectedDeclaration}}
Expand Down
4 changes: 3 additions & 1 deletion packages/host/app/config/environment.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,7 @@ declare const config: {
sqlSchema: string;
assetsURL: string;
stripePaymentLink: string;
featureFlags?: {};
featureFlags?: {
ENABLE_PLAYGROUND: boolean;
};
};
10 changes: 9 additions & 1 deletion packages/host/config/environment.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ module.exports = function (environment) {
hostsOwnAssets: true,
resolvedBaseRealmURL:
process.env.RESOLVED_BASE_REALM_URL || 'http://localhost:4201/base/',
featureFlags: {},
featureFlags: {
ENABLE_PLAYGROUND: process.env.ENABLE_PLAYGROUND || false
},
};

if (environment === 'development') {
Expand All @@ -50,6 +52,9 @@ module.exports = function (environment) {
// ENV.APP.LOG_TRANSITIONS = true;
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
// ENV.APP.LOG_VIEW_LOOKUPS = true;
ENV.featureFlags = {
ENABLE_PLAYGROUND: true
}
}

if (environment === 'test') {
Expand All @@ -69,6 +74,9 @@ module.exports = function (environment) {
ENV.loginMessageTimeoutMs = 0;
ENV.minSaveTaskDurationMs = 0;
ENV.sqlSchema = sqlSchema;
ENV.featureFlags = {
ENABLE_PLAYGROUND: true
}
}

if (environment === 'production') {
Expand Down
105 changes: 105 additions & 0 deletions packages/host/tests/acceptance/code-submode/playground-test.gts
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { waitFor } from '@ember/test-helpers';
import { module, test } from 'qunit';
import {
setupAcceptanceTestRealm,
setupLocalIndexing,
setupServerSentEvents,
testRealmURL,
visitOperatorMode,
} from '../../helpers';
import { setupMockMatrix } from '../../helpers/mock-matrix';
import { setupApplicationTest } from '../../helpers/setup';

module('Integration | code-submode | playground panel', function (hooks) {
setupApplicationTest(hooks);
setupLocalIndexing(hooks);
setupServerSentEvents(hooks);
setupMockMatrix(hooks, {
loggedInAs: '@testuser:staging',
activeRealms: [testRealmURL],
});

const authorCard = `
import { contains, field, CardDef } from "https://cardstack.com/base/card-api";
import MarkdownField from 'https://cardstack.com/base/markdown';
import StringField from "https://cardstack.com/base/string";
export class Author extends CardDef {
static displayName = 'Author';
@field firstName = contains(StringField);
@field lastName = contains(StringField);
@field bio = contains(MarkdownField);
@field title = contains(StringField, {
computeVia: function (this: Person) {
return [this.firstName, this.lastName].filter(Boolean).join(' ');
},
});
}
`;
const blogPostCard = `
import { contains, field, linksTo, CardDef } from "https://cardstack.com/base/card-api";
import DatetimeField from 'https://cardstack.com/base/datetime';
import MarkdownField from 'https://cardstack.com/base/markdown';
import StringField from "https://cardstack.com/base/string";
import { Author } from './author';
export class BlogPost extends CardDef {
static displayName = 'Blog Post';
@field publishDate = contains(DatetimeField);
@field author = linksTo(Author);
@field body = contains(MarkdownField);
}
`;

hooks.beforeEach(async function () {
await setupAcceptanceTestRealm({
contents: {
'author.gts': authorCard,
'blog-post.gts': blogPostCard,
'Author/jane-doe.json': {
data: {
attributes: {
firstName: 'Jane',
lastName: 'Doe',
},
meta: {
adoptsFrom: {
module: `${testRealmURL}author`,
name: 'Author',
},
},
},
},
'BlogPost/remote-work.json': {
data: {
attributes: {
title: 'The Ultimate Guide to Remote Work',
description:
'In today’s digital age, remote work has transformed from a luxury to a necessity. This comprehensive guide will help you navigate the world of remote work, offering tips, tools, and best practices for success.',
},
relationships: {
author: {
links: {
self: `${testRealmURL}Author/jane-doe`,
},
},
},
meta: {
adoptsFrom: {
module: `${testRealmURL}blog-post`,
name: 'BlogPost',
},
},
},
},
},
});
});

test('can render playground panel', async function (assert) {
await visitOperatorMode({
submode: 'code',
codePath: `${testRealmURL}blog-post.gts`,
});
await waitFor('[data-test-accordion-item="playground"]');
assert.dom('[data-test-accordion-item="playground"]').exists();
});
});

0 comments on commit c8abd0f

Please sign in to comment.