Skip to content
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

Jump to bottom

Clear review text when switching between addons #224

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Clear review text when switching between addons #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5bb034a
Upgrade ember-concurrency
pgengler Aug 18, 2021
79b94e8
Convert <AdminAddon/> to be a Glimmer component
pgengler Aug 18, 2021
eab4cdd
Add 'tracked-built-ins'
pgengler Aug 19, 2021
771d61d
Convert <AdminAddonReviewForm/> to be a Glimmer component
pgengler Aug 19, 2021
8887450
Clear review text field when changing between addons
pgengler Aug 19, 2021
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
24 changes: 10 additions & 14 deletions app/components/admin-addon-review-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
<h5>Review this addon</h5>
<form class="review-form" {{on "submit" (prevent-default (perform this.saveReview))}}>
<form
class="review-form"
{{on "submit" (prevent-default (perform this.saveReview))}}
{{did-update this.reset @addon}}
>
<ol>
{{#each this.questions as |question|}}
<li class="test-review-question">
<div class="question">{{question.text}}</div>
<ExclusiveButtonGroup @selectedValue={{get this.reviewProperties question.fieldName}} @updateSelectedValue={{fn this.selectOption question.fieldName}} as |btn|>
{{component btn
value=1
label="Yes"}}
{{component btn
value=2
label="No"}}
{{component btn
value=3
label="N/A"}}
{{component btn
value=4
label="Unknown"}}
<ExclusiveButtonGroup @selectedValue={{get this.reviewProperties question.fieldName}} @updateSelectedValue={{fn this.selectOption question.fieldName}} as |Button|>
<Button @value={{1}} @label="Yes" />
<Button @value={{2}} @label="No" />
<Button @value={{3}} @label="N/A" />
<Button @value={{4}} @label="Unknown" />
</ExclusiveButtonGroup>
</li>
{{/each}}
Expand Down
57 changes: 29 additions & 28 deletions app/components/admin-addon-review-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,56 @@
/* eslint-disable ember/no-component-lifecycle-hooks */
import classic from 'ember-classic-decorator';
import { inject } from '@ember/service';
import Component from '@ember/component';
import { action } from '@ember/object';
import { task, timeout } from 'ember-concurrency';
import { questions } from '../models/review';
import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { tracked } from 'tracked-built-ins';
import { dropTask, timeout } from 'ember-concurrency';
import { questions } from 'ember-observer/models/review';

@classic
export default class AdminAddonReviewForm extends Component {
addon = null;
reviewProperties = null;
@tracked reviewProperties = tracked({});

@tracked
recentlySaved = false;

@tracked
reviewText = null;

questions = questions;

@inject()
@service
store;

didReceiveAttrs() {
super.didReceiveAttrs(...arguments);
this.reset();
}

@action
reset() {
this.set('reviewProperties', {});
this.reviewProperties = tracked({});
this.reviewText = null;
}

@action
selectOption(fieldName, value) {
this.set(`reviewProperties.${fieldName}`, value);
this.reviewProperties[fieldName] = value;
}

@(task(function* () {
@dropTask
*saveReview() {
let newReview = this.store.createRecord('review', this.reviewProperties);
newReview.set('review', this.reviewText);
newReview.set('version', this.get('addon.latestAddonVersion'));
newReview.set('version', this.args.addon.get('latestAddonVersion'));
try {
yield newReview.save();
this.addon.set('latestReview', newReview);
yield this.addon.save();
this.args.addon.set('latestReview', newReview);
yield this.args.addon.save();
this.reset();
this.complete.perform();
} catch (e) {
console.error(e); // eslint-disable-line no-console
window.alert('Failed to create review');
}
}).drop())
saveReview;
}

@(task(function* () {
this.set('recentlySaved', true);
@dropTask
*complete() {
this.recentlySaved = true;
yield timeout(2000);
this.set('recentlySaved', false);
}).drop())
complete;
this.recentlySaved = false;
}
}
78 changes: 39 additions & 39 deletions app/components/admin-addon.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@
<h2>
<LinkTo @route="addons.show" @model={{this.addon.name}} class="test-addon-link">
{{this.addon.name}}
{{#if this.addon.isOfficial}}
<LinkTo @route="addons.show" @model={{@addon.name}} class="test-addon-link">
{{@addon.name}}
{{#if @addon.isOfficial}}
<OfficialIcon @class="test-official-icon" />
{{/if}}
{{#if this.addon.isCliDependency}}
{{#if @addon.isCliDependency}}
<DependencyIcon @class="test-cli-dep-icon" />
{{/if}}
</LinkTo>
</h2>

<section class="addon-info">
<div class="test-last-updated">
<b>{{this.addon.latestAddonVersion.version}}</b> from <RelativeTime @date={{this.addon.latestVersionDate}} />
<b>{{@addon.latestAddonVersion.version}}</b> from <RelativeTime @date={{@addon.latestVersionDate}} />
</div>
<div class="test-description"><b>description</b> {{this.addon.description}}</div>
{{#if this.addon.demoUrl}}
<div class="test-description"><b>description</b> {{@addon.description}}</div>
{{#if @addon.demoUrl}}
<div class="test-addon-demo-url">
<b>demo</b> <a href={{this.addon.demoUrl}}>{{this.addon.demoUrl}}</a>
<b>demo</b> <a href={{@addon.demoUrl}}>{{@addon.demoUrl}}</a>
</div>
{{/if}}
<div class="test-addon-package-url">
<b>package</b> <a href={{this.addon.npmUrl}}>{{this.addon.npmUrl}}</a>
<b>package</b> <a href={{@addon.npmUrl}}>{{@addon.npmUrl}}</a>
</div>
<div class="test-addon-license">
<b>license</b> {{this.addon.license}}
<b>license</b> {{@addon.license}}
</div>
<div>
<b>npm keywords</b>
{{#each this.addon.keywords as |keyword|}}
<CommaSeparated @list={{this.addon.keywords}} @item={{keyword}} as |value separator|>
{{#each @addon.keywords as |keyword|}}
<CommaSeparated @list={{@addon.keywords}} @item={{keyword}} as |value separator|>
{{value.keyword}}{{separator}}
</CommaSeparated>
{{/each}}
</div>
{{#if this.addon.ranking}}
<span><LinkTo @route="addons.top">Ranks #{{this.addon.ranking}} of the top 100 addons!</LinkTo></span>
{{#if @addon.ranking}}
<span><LinkTo @route="addons.top">Ranks #{{@addon.ranking}} of the top 100 addons!</LinkTo></span>
{{/if}}
</section>

<section>
<ScoreDisplay @addon={{this.addon}} as |val|>
<ScoreDisplay @addon={{@addon}} as |val|>
Score <b class="test-score">{{val}}</b>
</ScoreDisplay>
</section>

<section>
<label>Repo URL</label>
{{#if this.addon.repositoryUrl}}
<a href={{this.addon.repositoryUrl}} target="repo" class="test-repo-url">{{this.addon.repositoryUrl}}</a>
{{#if @addon.repositoryUrl}}
<a href={{@addon.repositoryUrl}} target="repo" class="test-repo-url">{{@addon.repositoryUrl}}</a>
{{else}}
<em>Missing</em>
{{/if}}
<a href="https://www.google.com/search?q=%22{{this.addon.name}}%22" target="_blank" rel="noopener noreferrer" title="Search Google">&nbsp;{{svg-icon "google"}}</a>
<a href="https://www.google.com/search?q=%22{{@addon.name}}%22" target="_blank" rel="noopener noreferrer" title="Search Google">&nbsp;{{svg-icon "google"}}</a>
|
<a href="https://github.com/search?q=%22{{this.addon.name}}%22" target="_blank" rel="noopener noreferrer" title="Search GitHub">{{svg-icon "github"}}</a>
<ToggleSwitch @label={{if this.addon.hasInvalidGithubRepo "Has invalid Repo URL" "Has valid Repo URL"}} @isChecked={{not this.addon.hasInvalidGithubRepo}} @onToggle={{this.updateInvalidRepoFlag}} @name="repo" class="test-toggle-repo-validity" />
<a href="https://github.com/search?q=%22{{@addon.name}}%22" target="_blank" rel="noopener noreferrer" title="Search GitHub">{{svg-icon "github"}}</a>
<ToggleSwitch @label={{if @addon.hasInvalidGithubRepo "Has invalid Repo URL" "Has valid Repo URL"}} @isChecked={{not @addon.hasInvalidGithubRepo}} @onToggle={{this.updateInvalidRepoFlag}} @name="repo" class="test-toggle-repo-validity" />
</section>

<section class="toggles">
<ToggleSwitch @label={{if this.addon.isWip "Is a WIP" "Not a WIP"}} @isChecked={{not this.addon.isWip}} @onToggle={{this.updateIsWipFlag}} @name="wip" class="test-toggle-is-wip" />
<ToggleSwitch @label={{if this.addon.isDeprecated "Deprecated" "Active"}} @isChecked={{not this.addon.isDeprecated}} @onToggle={{this.updateIsDeprecatedFlag}} @name="deprecated" class="test-toggle-is-deprecated" />
<ToggleSwitch @label={{if this.addon.isHidden "Hidden" "Visible"}} @isChecked={{not this.addon.isHidden}} @onToggle={{this.updateIsHiddenFlag}} @name="hidden" class="hidden-toggle test-toggle-is-hidden" />
<ToggleSwitch @label="Is Official?" @isChecked={{this.addon.isOfficial}} @onToggle={{fn (mut this.addon.isOfficial)}} @name="official" class="test-toggle-is-official" />
<ToggleSwitch @label="Is CLI Dependency?" @isChecked={{this.addon.isCliDependency}} @onToggle={{fn (mut this.addon.isCliDependency)}} @name="cli-dep" class="test-toggle-is-cli-dep" />
<ToggleSwitch @label="Extends Ember?" @isChecked={{this.addon.extendsEmber}} @onToggle={{fn (mut this.addon.extendsEmber)}} @name="extends-ember" class="test-toggle-extends-ember" />
<ToggleSwitch @label="Extends Ember CLI?" @isChecked={{this.addon.extendsEmberCli}} @onToggle={{fn (mut this.addon.extendsEmberCli)}} @name="extends-ember-cli" class="test-toggle-extends-ember-cli" />
<ToggleSwitch @label="Is Monorepo?" @isChecked={{this.addon.isMonorepo}} @onToggle={{fn (mut this.addon.isMonorepo)}} @name="is-monorepo" class="test-toggle-is-monorepo" />
<ToggleSwitch @label={{if @addon.isWip "Is a WIP" "Not a WIP"}} @isChecked={{not @addon.isWip}} @onToggle={{this.updateIsWipFlag}} @name="wip" class="test-toggle-is-wip" />
<ToggleSwitch @label={{if @addon.isDeprecated "Deprecated" "Active"}} @isChecked={{not @addon.isDeprecated}} @onToggle={{this.updateIsDeprecatedFlag}} @name="deprecated" class="test-toggle-is-deprecated" />
<ToggleSwitch @label={{if @addon.isHidden "Hidden" "Visible"}} @isChecked={{not @addon.isHidden}} @onToggle={{this.updateIsHiddenFlag}} @name="hidden" class="hidden-toggle test-toggle-is-hidden" />
<ToggleSwitch @label="Is Official?" @isChecked={{@addon.isOfficial}} @onToggle={{fn (mut @addon.isOfficial)}} @name="official" class="test-toggle-is-official" />
<ToggleSwitch @label="Is CLI Dependency?" @isChecked={{@addon.isCliDependency}} @onToggle={{fn (mut @addon.isCliDependency)}} @name="cli-dep" class="test-toggle-is-cli-dep" />
<ToggleSwitch @label="Extends Ember?" @isChecked={{@addon.extendsEmber}} @onToggle={{fn (mut @addon.extendsEmber)}} @name="extends-ember" class="test-toggle-extends-ember" />
<ToggleSwitch @label="Extends Ember CLI?" @isChecked={{@addon.extendsEmberCli}} @onToggle={{fn (mut @addon.extendsEmberCli)}} @name="extends-ember-cli" class="test-toggle-extends-ember-cli" />
<ToggleSwitch @label="Is Monorepo?" @isChecked={{@addon.isMonorepo}} @onToggle={{fn (mut @addon.isMonorepo)}} @name="is-monorepo" class="test-toggle-is-monorepo" />
</section>

<section class="with-default-styling">
<label>Override Repo URL</label>
<Input @value={{this.addon.overrideRepositoryUrl}} class="test-override-repo-url-input" @autocomplete="off" />
<Input @value={{@addon.overrideRepositoryUrl}} class="test-override-repo-url-input" @autocomplete="off" />
</section>

<section class="with-default-styling">
<label>Note</label>
<Textarea @value={{this.addon.note}} @rows="3" class="note-input test-note-input" @autocomplete="off" /></section>
<Textarea @value={{@addon.note}} @rows="3" class="note-input test-note-input" @autocomplete="off" /></section>

<section>
<CategoryChooser @categories={{this.categories}} @addon={{this.addon}} @onchange={{fn (mut this.addon.categories)}} />
<CategoryChooser @categories={{this.categories}} @addon={{@addon}} @onchange={{fn (mut @addon.categories)}} />
</section>

<section>
Expand All @@ -88,17 +88,17 @@
{{else}}
<button type="button" class="button test-save-addon" {{on "click" (perform this.saveAddon)}}>Save</button>
{{/if}}
<div class="note">Last saved <RelativeTime @date={{this.addon.updatedAt}} /> ({{moment-format this.addon.updatedAt "MMMM DD, YYYY h:mm:ss" allowEmpty=true}})</div>
<div class="note">Last saved <RelativeTime @date={{@addon.updatedAt}} /> ({{moment-format @addon.updatedAt "MMMM DD, YYYY h:mm:ss" allowEmpty=true}})</div>
</section>

<section class="latest-review">
<h5 class="header">Latest Review</h5>
<div class="contents">
{{#if this.addon.latestReview}}
{{#if (not-eq this.addon.latestReview.version.version this.addon.latestAddonVersion.version)}}
{{#if @addon.latestReview}}
{{#if (not-eq @addon.latestReview.version.version @addon.latestAddonVersion.version)}}
<em class="test-review-new-version-warning">{{svg-icon "new-releases"}} New versions of this addon have been released since this review was undertaken.</em>
{{/if}}
<AddonReview @review={{this.addon.latestReview}} />
<AddonReview @review={{@addon.latestReview}} />
{{#if this.renewLatestReview.isIdle}}
<button type="button" {{on "click" (perform this.renewLatestReview)}} class="button test-renew-latest-review">Renew Review</button>
{{else}}
Expand All @@ -112,18 +112,18 @@
{{/if}}
<hr>
<section class="with-default-styling">
<AdminAddonReviewForm @addon={{this.addon}} />
<AdminAddonReviewForm @addon={{@addon}} />
</section>
</div>
</section>

<section>
{{#if this.addon.readme}}
{{#unless this.addon.hasInvalidGithubRepo}}
{{#if @addon.readme}}
{{#unless @addon.hasInvalidGithubRepo}}
<section class="readme">
<p class="header">README.md</p>
<p class="test-addon-readme contents">
<MarkdownToSanitizedHtml @markdown={{this.addon.readme.contents}} @tables={{true}} @ghCodeBlocks={{true}} @tasklists={{true}} @simplifiedAutoLink={{true}} />
<MarkdownToSanitizedHtml @markdown={{@addon.readme.contents}} @tables={{true}} @ghCodeBlocks={{true}} @tasklists={{true}} @simplifiedAutoLink={{true}} />
</p>
</section>
{{/unless}}
Expand Down
52 changes: 24 additions & 28 deletions app/components/admin-addon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,71 @@
import classic from 'ember-classic-decorator';
import { tagName } from '@ember-decorators/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';
import Component from '@glimmer/component';
import { dropTask, timeout } from 'ember-concurrency';
import { questions } from '../models/review';
import { tracked } from '@glimmer/tracking';

@classic
@tagName('')
export default class AdminAddon extends Component {
@service
store;

addon = null;
recentlyRenewed = false;
@tracked recentlyRenewed = false;

@action
updateInvalidRepoFlag(value) {
this.set('addon.hasInvalidGithubRepo', !value);
this.args.addon.set('hasInvalidGithubRepo', !value);
}

@action
updateIsWipFlag(value) {
this.set('addon.isWip', !value);
this.args.addon.set('isWip', !value);
}

@action
updateIsDeprecatedFlag(value) {
this.set('addon.isDeprecated', !value);
this.args.addon('isDeprecated', !value);
}

@action
updateIsHiddenFlag(value) {
this.set('addon.isHidden', !value);
this.args.addon('isHidden', !value);
}

@(task(function* () {
@dropTask
*saveAddon() {
try {
yield this.addon.save();
yield this.args.addon.save();
} catch (e) {
window.alert('Failed to save addon');
}
}).drop())
saveAddon;
}

@(task(function* () {
@dropTask
*renewLatestReview() {
let newReview = this.store.createRecord('review');
let latestReview = this.get('addon.latestReview');
let latestReview = this.args.addon.latestReview;

questions.forEach(function (question) {
newReview.set(question.fieldName, latestReview.get(question.fieldName));
});
newReview.set('review', latestReview.get('review'));
newReview.set('version', this.get('addon.latestAddonVersion'));
newReview.set('version', this.args.addon.get('latestAddonVersion'));

try {
yield newReview.save();
this.addon.set('latestReview', newReview);
yield this.addon.save();
this.args.addon.set('latestReview', newReview);
yield this.args.addon.save();
this.completeRenew.perform();
} catch (e) {
console.error(e); // eslint-disable-line no-console
window.alert('Failed to renew review');
}
}).drop())
renewLatestReview;
}

@(task(function* () {
this.set('recentlyRenewed', true);
@dropTask
*completeRenew() {
this.recentlyRenewed = true;
yield timeout(2000);
this.set('recentlyRenewed', false);
}).drop())
completeRenew;
this.recentlyRenewed = false;
}
}
2 changes: 1 addition & 1 deletion app/helpers/prevent-default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import { helper } from '@ember/component/helper';
export default helper(function preventDefaultHelper([fn]) {
return (event) => {
event.preventDefault();
fn();
fn(event);
};
});
Loading