FIX: Modals in composer helper menu not working (#755)

This commit is contained in:
Keegan George 2024-08-16 10:08:58 -07:00 committed by GitHub
parent f789d3ee96
commit bfe3b1c3b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 45 additions and 33 deletions

View File

@ -1,6 +1,5 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { fn } from "@ember/helper";
import { action } from "@ember/object";
import { service } from "@ember/service";
import { modifier } from "ember-modifier";
@ -17,6 +16,7 @@ import ModalDiffModal from "../components/modal/diff-modal";
import ThumbnailSuggestion from "../components/modal/thumbnail-suggestions";
export default class AiComposerHelperMenu extends Component {
@service modal;
@service siteSettings;
@service aiComposerHelper;
@service currentUser;
@ -29,7 +29,6 @@ export default class AiComposerHelperMenu extends Component {
@tracked lastUsedOption = null;
@tracked thumbnailSuggestions = null;
@tracked showThumbnailModal = false;
@tracked showDiffModal = false;
@tracked lastSelectionRange = null;
MENU_STATES = this.aiComposerHelper.MENU_STATES;
prompts = [];
@ -100,7 +99,16 @@ export default class AiComposerHelperMenu extends Component {
{
icon: "exchange-alt",
label: "discourse_ai.ai_helper.context_menu.view_changes",
action: () => (this.showDiffModal = true),
action: () =>
this.modal.show(ModalDiffModal, {
model: {
diff: this.diff,
oldValue: this.initialValue,
newValue: this.newSelectedText,
revert: this.undoAiAction,
confirm: () => this.updateMenuState(this.MENU_STATES.resets),
},
}),
classes: "view-changes",
},
{
@ -202,8 +210,12 @@ export default class AiComposerHelperMenu extends Component {
if (option.name === "illustrate_post") {
this._toggleLoadingState(false);
this.closeMenu();
this.showThumbnailModal = true;
this.thumbnailSuggestions = data.thumbnails;
this.modal.show(ThumbnailSuggestion, {
model: {
thumbnails: this.thumbnailSuggestions,
},
});
} else {
this._updateSuggestedByAi(data);
}
@ -326,26 +338,5 @@ export default class AiComposerHelperMenu extends Component {
/>
{{/if}}
</div>
{{#if this.showDiffModal}}
<ModalDiffModal
@confirm={{fn
(mut this.aiComposerHelper.menuState)
this.MENU_STATES.resets
}}
@diff={{this.diff}}
@oldValue={{this.initialValue}}
@newValue={{this.newSelectedText}}
@revert={{this.undoAiAction}}
@closeModal={{fn (mut this.showDiffModal) false}}
/>
{{/if}}
{{#if this.showThumbnailModal}}
<ThumbnailSuggestion
@thumbnails={{this.thumbnailSuggestions}}
@closeModal={{fn (mut this.showThumbnailModal) false}}
/>
{{/if}}
</template>
}

View File

@ -9,13 +9,13 @@ export default class ModalDiffModal extends Component {
@action
triggerConfirmChanges() {
this.args.closeModal();
this.args.confirm();
this.args.model.confirm();
}
@action
triggerRevertChanges() {
this.args.model.revert();
this.args.closeModal();
this.args.revert();
}
<template>
@ -25,15 +25,15 @@ export default class ModalDiffModal extends Component {
@closeModal={{@closeModal}}
>
<:body>
{{#if @diff}}
{{htmlSafe @diff}}
{{#if @model.diff}}
{{htmlSafe @model.diff}}
{{else}}
<div class="composer-ai-helper-modal__old-value">
{{@oldValue}}
{{@model.oldValue}}
</div>
<div class="composer-ai-helper-modal__new-value">
{{@newValue}}
{{@model.newValue}}
</div>
{{/if}}
</:body>
@ -45,7 +45,7 @@ export default class ModalDiffModal extends Component {
@label="discourse_ai.ai_helper.context_menu.confirm"
/>
<DButton
class="btn-flat"
class="btn-flat revert"
@action={{this.triggerRevertChanges}}
@label="discourse_ai.ai_helper.context_menu.revert"
/>

View File

@ -53,7 +53,7 @@ export default class ThumbnailSuggestions extends Component {
>
<:body>
<div class="ai-thumbnail-suggestions">
{{#each @thumbnails as |thumbnail|}}
{{#each @model.thumbnails as |thumbnail|}}
<ThumbnailSuggestionItem
@thumbnail={{thumbnail}}
@addSelection={{this.addSelection}}

View File

@ -242,6 +242,23 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
expect(ai_helper_context_menu).to have_no_context_menu
end
end
it "reverts the changes when revert button is pressed in the modal" do
trigger_context_menu(spanish_input)
ai_helper_context_menu.click_ai_button
DiscourseAi::Completions::Llm.with_prepared_responses([input]) do
ai_helper_context_menu.select_helper_model(mode)
wait_for { composer.composer_input.value == input }
ai_helper_context_menu.click_view_changes_button
expect(diff_modal).to be_visible
diff_modal.revert_changes
expect(ai_helper_context_menu).to have_no_context_menu
expect(composer.composer_input.value).to eq(spanish_input)
end
end
end
context "when using the proofreading mode" do

View File

@ -11,6 +11,10 @@ module PageObjects
find(".d-modal__footer button.confirm", wait: 5).click
end
def revert_changes
find(".d-modal__footer button.revert", wait: 5).click
end
def old_value
find(".composer-ai-helper-modal__old-value").text
end