DEV: Implement disabled state in Image control (#31324)

This commit is contained in:
Jarek Radosz 2025-02-13 03:56:47 +01:00 committed by GitHub
parent e320a375d3
commit 97d030e864
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 3 deletions

View File

@ -19,7 +19,7 @@ import { authorizesOneOrMoreExtensions } from "discourse/lib/uploads";
import UppyUpload from "discourse/lib/uppy/uppy-upload";
import { i18n } from "discourse-i18n";
// Args: id, type, imageUrl, placeholderUrl, additionalParams, onUploadDone, onUploadDeleted,
// Args: id, type, imageUrl, placeholderUrl, additionalParams, onUploadDone, onUploadDeleted, disabled
export default class UppyImageUploader extends Component {
@service currentUser;
@service siteSettings;
@ -58,6 +58,7 @@ export default class UppyImageUploader extends Component {
get disabled() {
return (
this.args.disabled ||
this.notAllowed ||
this.uppyUpload?.uploading ||
this.uppyUpload?.processing
@ -167,6 +168,7 @@ export default class UppyImageUploader extends Component {
<DButton
@action={{@onUploadDeleted}}
@icon="trash-can"
@disabled={{this.disabled}}
class="btn-danger pad-left no-text"
/>
<DButton

View File

@ -27,6 +27,7 @@ export default class FKControlImage extends Component {
@onUploadDone={{this.setImage}}
@onUploadDeleted={{this.removeImage}}
@type={{@type}}
@disabled={{@field.disabled}}
class="form-kit__control-image no-repeat contain-image"
/>
</template>

View File

@ -1,6 +1,6 @@
import { fn } from "@ember/helper";
import { click, render } from "@ember/test-helpers";
import { module, test, todo } from "qunit";
import { module, test } from "qunit";
import Form from "discourse/components/form";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import pretender, { response } from "discourse/tests/helpers/create-pretender";
@ -69,6 +69,24 @@ module(
assert.form().field("image_url").hasNoValue();
});
todo("when disabled", async function () {});
test("when disabled", async function (assert) {
const data = { image_url: "/images/discourse-logo-sketch-small.png" };
await render(<template>
<Form @data={{data}} as |form|>
<form.Field
@name="image_url"
@title="Foo"
@disabled={{true}}
as |field|
>
<field.Image @type="site_setting" />
</form.Field>
</Form>
</template>);
assert.dom(".image-upload-controls input[type='file']").isDisabled();
assert.dom(".image-upload-controls .btn-danger").isDisabled();
});
}
);