mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 20:34:02 +03:00
Added logic for showing feedback form in Labs (#16831)
refs TryGhost/Team#3247 - The feedback form UI is hidden by default - Enabling “Lexical editor” doesn’t show the feedback form - Disabling “Lexical editor” shows the feedback form below this lab item and user can send the feedback - Refreshing the page or navigating to some other page and then back to Labs → the form is hidden again
This commit is contained in:
Elena Baidakova
GitHub
parent
58539c355b
commit
ca46308abe
@ -1,3 +1,12 @@
|
||||
<input type="checkbox" data-test-toggle={{this.testKey}} checked={{this.value}} disabled={{this.disabled}} id={{this.for}} name={{this.name}} onclick={{action (mut this.value) value="target.checked"}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
data-test-toggle={{this.testKey}}
|
||||
checked={{this.value}}
|
||||
disabled={{this.disabled}}
|
||||
id={{this.for}}
|
||||
name={{this.name}}
|
||||
onclick={{action (mut this.value) value="target.checked"}}
|
||||
onchange={{@onChange}}
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
{{{yield}}}
|
||||
|
||||
@ -39,6 +39,10 @@ class FeatureFlagComponent extends Component {
|
||||
return `labs[${this.flag}]`;
|
||||
}
|
||||
|
||||
get testKey() {
|
||||
return `labs-${this.flag}`;
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(...arguments);
|
||||
|
||||
|
||||
16
ghost/admin/app/components/labs/lexical.hbs
Normal file
16
ghost/admin/app/components/labs/lexical.hbs
Normal file
@ -0,0 +1,16 @@
|
||||
<div class="gh-expandable-block gh-feedback-lexical-labs">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Lexical editor</h4>
|
||||
<p class="gh-expandable-description">
|
||||
<span>Makes lexical editor the default when creating new posts/pages.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<GhFeatureFlag @flag="lexicalEditor" @onChange={{this.toggleFeedbackForm}} />
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.isFeedbackFormVisible}}
|
||||
<FeedbackLexical::LabsForm />
|
||||
{{/if}}
|
||||
</div>
|
||||
16
ghost/admin/app/components/labs/lexical.js
Normal file
16
ghost/admin/app/components/labs/lexical.js
Normal file
@ -0,0 +1,16 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class LabsLexicalComponent extends Component {
|
||||
// - The feedback form UI is hidden by default
|
||||
// - Enabling “Lexical editor” doesn’t show the feedback form
|
||||
// - Disabling “Lexical editor” shows the feedback form below this lab item and user can send the feedback
|
||||
// - Refreshing the page or navigating to some other page and then back to Labs → the form is hidden again
|
||||
@tracked isFeedbackFormVisible = false;
|
||||
|
||||
@action
|
||||
toggleFeedbackForm(event) {
|
||||
this.isFeedbackFormVisible = !event.target.checked;
|
||||
}
|
||||
}
|
||||
@ -201,20 +201,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-block gh-feedback-lexical-labs">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Lexical editor</h4>
|
||||
<p class="gh-expandable-description">
|
||||
<span>Makes lexical editor the default when creating new posts/pages.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<GhFeatureFlag @flag="lexicalEditor" />
|
||||
</div>
|
||||
</div>
|
||||
<FeedbackLexical::LabsForm />
|
||||
</div>
|
||||
|
||||
<Labs::Lexical />
|
||||
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
|
||||
import {beforeEach, describe, it} from 'mocha';
|
||||
import {click, currentURL, fillIn, find, findAll} from '@ember/test-helpers';
|
||||
import {enableLabsFlag} from '../../helpers/labs-flag';
|
||||
import {disableLabsFlag, enableLabsFlag} from '../../helpers/labs-flag';
|
||||
import {expect} from 'chai';
|
||||
import {fileUpload} from '../../helpers/file-upload';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
@ -314,28 +314,52 @@ describe('Acceptance: Settings - Labs', function () {
|
||||
expect(iframe.getAttribute('src')).to.have.string('/settings/routes/yaml/');
|
||||
});
|
||||
|
||||
it('displays lexical feedback textarea when the labs setting is enabled', async function () {
|
||||
enableLabsFlag(this.server, 'lexicalEditor');
|
||||
|
||||
it('does not display lexical feedback textarea by default', async function () {
|
||||
disableLabsFlag(this.server, 'lexicalEditor');
|
||||
await visit('/settings/labs');
|
||||
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.exist;
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.not.exist;
|
||||
expect(find('[data-test-toggle="labs-lexicalEditor"]')).to.exist;
|
||||
});
|
||||
|
||||
it('does not display lexical feedback textarea when the labs setting is disabled', async function () {
|
||||
it('display lexical feedback textarea when the labs setting is enabled and then disabled', async function () {
|
||||
disableLabsFlag(this.server, 'lexicalEditor');
|
||||
// - The feedback form UI is hidden by default
|
||||
// - Enabling “Lexical editor” doesn’t show the feedback form
|
||||
// - Disabling “Lexical editor” shows the feedback form below this lab item and user can send the feedback
|
||||
// - Refreshing the page or navigating to some other page and then back to Labs → the form is hidden again
|
||||
await visit('/settings/labs');
|
||||
|
||||
// hidden by default
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.not.exist;
|
||||
|
||||
// hidden when flag is enabled
|
||||
await click('[data-test-toggle="labs-lexicalEditor"]');
|
||||
expect(find('[name="labs[lexicalEditor]"]').checked, 'Lexical editor toggle').to.be.true;
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.not.exist;
|
||||
|
||||
// display when flag is disabled
|
||||
await click('[data-test-toggle="labs-lexicalEditor"]');
|
||||
expect(find('[name="labs[lexicalEditor]"]').checked, 'Lexical editor toggle').to.be.false;
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.exist;
|
||||
|
||||
// navigate to main and return to settings, feedback should be hidden
|
||||
await visit('/');
|
||||
await visit('/settings/labs');
|
||||
expect(find('[data-test-lexical-feedback-textarea]')).to.not.exist;
|
||||
});
|
||||
|
||||
it('allows the user to send lexical feedback', async function () {
|
||||
enableLabsFlag(this.server, 'lexicalEditor');
|
||||
|
||||
// mock successful request
|
||||
this.server.post('https://submit-form.com/us6uBWv8', {}, 200);
|
||||
|
||||
await visit('/settings/labs');
|
||||
|
||||
// disable flag
|
||||
await click('[name="labs[lexicalEditor]"]');
|
||||
expect(find('[name="labs[lexicalEditor]"]').checked, 'Lexical editor toggle').to.be.false;
|
||||
|
||||
await fillIn('[data-test-lexical-feedback-textarea]', 'This is test feedback');
|
||||
await click('[data-test-button="submit-lexical-feedback"]');
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user