This repository has been archived on 2023-03-18. You can view files and clone it, but cannot push or open issues or pull requests.
osr-discourse-src/app/assets/javascripts
Tarek Khalil f8480ed911
FEATURE: Exposing a way to add a generic report filter (#6816)
* FEATURE: Exposing a way to add a generic report filter

## Why do we need this change?

Part of the work discussed [here](https://meta.discourse.org/t/gain-understanding-of-file-uploads-usage/104994), and implemented a first spike [here](https://github.com/discourse/discourse/pull/6809), I am trying to expose a single generic filter selector per report.

## How does this work?

We basically expose a simple, single generic filter that is computed and displayed based on backend values passed into the report.

This would be a simple contract between the frontend and the backend.

**Backend changes:** we simply need to return a list of dropdown / select options, and enable the report's newly introduced `custom_filtering` property.

For example, for our [Top Uploads](https://github.com/discourse/discourse/pull/6809/files#diff-3f97cbb8726f3310e0b0c386dbe89e22R1423) report, it can look like this on the backend:

```ruby
report.custom_filtering = true
report.custom_filter_options = [{ id: "any", name: "Any" }, { id: "jpg", name: "JPEG" } ]
```

In our javascript report HTTP call, it will look like:

```js
{
  "custom_filtering": true,
  "custom_filter_options": [
    {
      "id": "any",
      "name": "Any"
    },
    {
      "id": "jpg",
      "name": "JPG"
    }
  ]
}
```

**Frontend changes:** We introduced a generic `filter` param and a `combo-box` which hooks up into the existing framework for fetching a report.

This works alright, with the limitation of being a single custom filter per report. If we wanted to add, for an instance a `filesize filter`, this will not work for us. _I went through with this approach because it is hard to predict and build abstractions for requirements or problems we don't have yet, or might not have._

## How does it look like?

![a1ktg1odde](https://user-images.githubusercontent.com/45508821/50485875-f17edb80-09ee-11e9-92dd-1454ab041fbb.gif)

## More on the bigger picture

The major concern here I have is the solution I introduced might serve the `think small` version of the reporting work, but I don't think it serves the `think big`, I will try to shed some light into why.

Within the current design, It is hard to maintain QueryParams for dynamically generated params (based on the idea of introducing more than one custom filter per report).

To allow ourselves to have more than one generic filter, we will need to:

a. Use the Route's model to retrieve the report's payload (we are now dependent on changes of the QueryParams via computed properties)
b. After retrieving the payload, we can use the `setupController` to define our dynamic QueryParams based on the custom filters definitions we received from the backend
c. Load a custom filter specific Ember component based on the definitions we received from the backend
2019-03-15 12:15:38 +00:00
..
admin FEATURE: Exposing a way to add a generic report filter (#6816) 2019-03-15 12:15:38 +00:00
discourse FEATURE: Enforce two-factor authentication. (#6348) 2019-03-15 13:09:37 +02:00
discourse-common UX: Use official Facebook logo 2019-02-27 09:52:06 -05:00
docs Ember Upgrade: 1.0 2013-10-01 11:16:27 -04:00
ember-addons DEV: unpin Prettier version, apply to YAML files 2019-01-17 13:05:39 -05:00
locales DEV: s/Em/Ember (#6874) 2019-01-11 17:54:23 +01:00
pretty-text FIX: Outsourced erb part from emoji.js.es6 (#7168) 2019-03-15 15:44:49 +11:00
select-kit Revert "DEV: Upgrade to Ember 3.7.0 (#6977)" (#7165) 2019-03-13 15:49:47 -03:00
wizard DEV: uses find() helper instead of this.$() in js tests (#7062) 2019-02-25 16:04:55 +01:00
activate-account.js.no-module.es6 CSP - extract all other inline JavaScripts (#6528) 2018-10-25 09:52:01 -04:00
admin.js.erb Add support for plugins to declare ES6 in the admin bundle 2015-08-17 15:03:55 -04:00
application.js Replace deprecated dropdown-button with DropdownSelectBoxComponent (#6451) 2018-10-05 09:48:17 -04:00
auto-redirect.js.no-module.es6 CSP - extract all other inline JavaScripts (#6528) 2018-10-25 09:52:01 -04:00
deprecated.js REFACTOR: Remove requirejs calls 2017-07-05 17:24:27 -04:00
discourse-loader.js DEV: enable no-alert & no-console eslint rules 2018-11-14 23:17:56 +01:00
discourse-objects.js Scaffold for new Wizard - Rails / Ember / Tests 2016-09-22 09:48:58 -04:00
discourse.js.es6 Fix favicon not updating on the client side when changed. 2019-03-14 15:37:43 +08:00
embed-application.js.no-module.es6 Extract inline JS on embedded comments (#6645) 2018-11-22 10:02:58 -05:00
ember_include.js.erb move template compiler into vendor for now 2015-11-25 15:54:54 +11:00
ember_jquery.js DEV: upgrades from Ember 2.13 to Ember 3.5.1 (#6808) 2019-01-10 11:06:01 +01:00
ember-shim.js Migrate discourse.js to ES6 2016-07-11 12:57:05 -04:00
env.js FIX: attempts to fix an error with EXTEND_PROTOTYPES (#7067) 2019-02-26 11:04:05 +01:00
google-tag-manager.js.no-module.es6 DEV: transpile certain ES6 files without producing a module (#6460) 2018-10-09 09:18:23 +08:00
google-universal-analytics.js.no-module.es6 DEV: transpile certain ES6 files without producing a module (#6460) 2018-10-09 09:18:23 +08:00
main_include_admin.js FEATURE: handle bounced emails 2016-05-02 23:15:32 +02:00
markdown-it-bundle.js UX: Improve editor and preview scroll syncing. 2017-11-23 17:02:02 +08:00
omniauth-complete.js.no-module.es6 FIX: stricter window.opener checks (#6578) 2018-11-13 09:56:31 +11:00
onpopstate-handler.js.no-module.es6 extract inline onpopstate handler on 404 page (#6613) 2018-11-15 13:35:38 -05:00
plugin-third-party.js.erb FEATURE: split JavaScript application bundle, so plugins live in own file 2016-11-15 11:43:13 +11:00
plugin.js.erb FEATURE: split JavaScript application bundle, so plugins live in own file 2016-11-15 11:43:13 +11:00
polyfills.js DEV: upgrades from Ember 2.13 to Ember 3.5.1 (#6808) 2019-01-10 11:06:01 +01:00
preload-application-data.js.no-module.es6 Upgrade to FontAwesome 5 (take two) (#6673) 2018-11-26 16:49:57 -05:00
preload-store.js.es6 DEV: s/Em/Ember (#6874) 2019-01-11 17:54:23 +01:00
pretty-text-bundle.js FIX: Outsourced erb part from emoji.js.es6 (#7168) 2019-03-15 15:44:49 +11:00
print-page.js CSP - extract all other inline JavaScripts (#6528) 2018-10-25 09:52:01 -04:00
service-worker.js.erb FEATURE: special offline support restricted to Android only 2018-10-29 16:29:19 +11:00
set-prototype-polyfill.js DEV: upgrades from Ember 2.13 to Ember 3.5.1 (#6808) 2019-01-10 11:06:01 +01:00
template_include.js.erb PERF: stop loading handlebars and ember compilers in prod 2015-11-27 11:59:01 +11:00
vendor.js UX: make composer resize work on touch devices (#7068) 2019-02-26 08:04:14 +11:00
wizard-application.js FIX: Wizard didn't load translations correctly 2018-09-05 15:14:09 +02:00
wizard-start.js.no-module.es6 CSP - extract all other inline JavaScripts (#6528) 2018-10-25 09:52:01 -04:00
wizard-vendor.js FEATURE: replaces tag-chooser/tag-group-chooser with select-kit component 2018-02-26 11:42:57 +01:00