UX: hide the list of file extensions on the upload dialog (#12836)

app/assets/javascripts/discourse/app/components/hidden-details.js

@@ -0,0 +1,9 @@
+import Component from "@ember/component";
+import { action } from "@ember/object";
+
+export default Component.extend({
+  @action
+  expand() {
+    this.set("expanded", true);
+  },
+});

app/assets/javascripts/discourse/app/controllers/upload-selector.js

@@ -1,7 +1,6 @@
 import {
   allowsAttachments,
   authorizedExtensions,
-  authorizesAllExtensions,
   uploadIcon,
 } from "discourse/lib/uploads";
 import Controller from "@ember/controller";
@@ -16,11 +15,9 @@ export default Controller.extend(ModalFunctionality, {
   remote: equal("selection", "remote"),
   selection: "local",
 
-  uploadTranslate(key) {
+  @discourseComputed()
-    if (allowsAttachments(this.currentUser.staff, this.siteSettings)) {
+  allowAdditionalFormats() {
-      key += "_with_attachments";
+    return allowsAttachments(this.currentUser.staff, this.siteSettings);
-    }
-    return `upload_selector.${key}`;
   },
 
   @discourseComputed()
@@ -28,22 +25,26 @@ export default Controller.extend(ModalFunctionality, {
     return uploadIcon(this.currentUser.staff, this.siteSettings);
   },
 
-  @discourseComputed()
+  @discourseComputed("allowAdditionalFormats")
-  title() {
+  title(allowAdditionalFormats) {
-    return this.uploadTranslate("title");
+    const suffix = allowAdditionalFormats ? "_with_attachments" : "";
+    return `upload_selector.title${suffix}`;
   },
 
-  @discourseComputed("selection")
+  @discourseComputed("selection", "allowAdditionalFormats")
-  tip(selection) {
+  tip(selection, allowAdditionalFormats) {
-    const authorized_extensions = authorizesAllExtensions(
+    const suffix = allowAdditionalFormats ? "_with_attachments" : "";
+    return I18n.t(`upload_selector.${selection}_tip${suffix}`);
+  },
+
+  @discourseComputed()
+  supportedFormats() {
+    const extensions = authorizedExtensions(
       this.currentUser.staff,
       this.siteSettings
-    )
+    );
-      ? ""
+
-      : `(${authorizedExtensions(this.currentUser.staff, this.siteSettings)})`;
+    return `(${extensions})`;
-    return I18n.t(this.uploadTranslate(`${selection}_tip`), {
-      authorized_extensions,
-    });
   },
 
   actions: {

app/assets/javascripts/discourse/app/templates/components/hidden-details.hbs

@@ -0,0 +1,9 @@
+{{#unless expanded}}
+  {{d-button
+    action=(action "expand")
+    class="btn-link"
+    label=label}}
+{{/unless}}
+{{#if expanded}}
+  <span class="description" aria-live="assertive">{{details}}</span>
+{{/if}}

app/assets/javascripts/discourse/app/templates/modal/upload-selector.hbs

@@ -6,6 +6,9 @@
       <div class="inputs">
         <input type="file" id="filename-input" multiple><br>
         <span class="description">{{tip}}</span>
+        {{#if allowAdditionalFormats}}
+          {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}}
+        {{/if}}
       </div>
     {{/if}}
   </div>
@@ -16,6 +19,9 @@
       <div class="inputs">
         {{input value=imageUrl placeholder="http://example.com/image.png"}}
         <span class="description">{{tip}}</span>
+        {{#if allowAdditionalFormats}}
+          {{hidden-details label="upload_selector.supported_formats" details=supportedFormats}}
+        {{/if}}
       </div>
     {{/if}}
   </div>

app/assets/javascripts/discourse/tests/integration/components/hidden-details-test.js

@@ -0,0 +1,31 @@
+import componentTest, {
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+
+discourseModule("Integration | Component | hidden-details", function (hooks) {
+  setupRenderingTest(hooks);
+
+  componentTest("Shows a link and turns link into details on click", {
+    template: hbs`{{hidden-details label=label details=details}}`,
+
+    beforeEach() {
+      this.set("label", "label");
+      this.set("details", "details");
+    },
+
+    async test(assert) {
+      assert.ok(exists(".btn-link"));
+      assert.ok(query(".btn-link span").innerText === I18n.t("label"));
+      assert.notOk(exists(".description"));
+
+      await click(".btn-link");
+
+      assert.notOk(exists(".btn-link"));
+      assert.ok(exists(".description"));
+      assert.ok(query(".description").innerText === "details");
+    },
+  });
+});

app/assets/stylesheets/desktop/upload.scss

@@ -3,6 +3,9 @@
     display: inline-block;
     padding-left: 10px;
   }
+  &.modal-body {
+    width: 460px;
+  }
   .radios {
     min-height: 60px;
     display: flex;

config/locales/client.en.yml

@@ -2209,14 +2209,15 @@ en:
       from_my_computer: "From my device"
       from_the_web: "From the web"
       remote_tip: "link to image"
-      remote_tip_with_attachments: "link to image or file %{authorized_extensions}"
+      remote_tip_with_attachments: "link to image or file"
       local_tip: "select images from your device"
-      local_tip_with_attachments: "select images or files from your device %{authorized_extensions}"
+      local_tip_with_attachments: "select images or files from your device"
       hint: "(you can also drag & drop into the editor to upload)"
       hint_for_supported_browsers: "you can also drag and drop or paste images into the editor"
       uploading: "Uploading"
       select_file: "Select File"
       default_image_alt_text: image
+      supported_formats: "supported formats"
 
     search:
       sort_by: "Sort by"