Snippets Groups Projects

[M1] Metabase illustration settings (#40219)

Mahatthana (Kelvin) Nomsawadi authored 11 months ago

* Add login page illustration (#39299)

* Move Metabot setting to a new place

* Add setting for login page illustration

* fix UI styling

* Fix not able to upload the same file twice

* Update the admin > appearance > conceal metabase copy

* Prepare the component for tests

* Add some unit tests

* Prevent settings not saved sometimes

After setting the value to/from `custom` one of the setting could be
failed to save, I suspect this happens because the race condition from
trying to save the setting values relatively at the same time.

* Make unit tests easier to read

* Add all unit test test cases

* Add basic E2E test

* Show fallback icon for broken images

* Make use of the proper component

* Update the comment to affect the reality

* Add an error message when file size is over 2MB

* Show an error message when the file size > 2MB

* Add the error message tests

* Preserve the preview image aspect-ratio

* Detect corrupted images

* Fix failing unit tests

* Address feedback: Type

* Feedback: Create meaningful variables

* Feedback: Make selector API more sensible

* Prevent race condition

Makes sure we save the settings completely before making other actions
that also change settings otherwise, there could be race conditions.

* Feedback: tighten up a type

* Feedback: Fix inconsistency callback calls

* 2. Add the rest 3 illustration settings (#40487)

* Add the rest 3 illustration settings

* Don't make the X icon feel lonely

* Fix illustration widget saving

* Fix type error

* 3. Update the select UX to match new design (#40491)

* Update the select UX to match new design

* Move info dot next to file upload button

* Simplify IllustrationWidget API

* Update setting title copy

* Clean up test comments

* Feedback: Clarify `any` type

* Feedback: Use shorthand object creation

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

* Feedback: Use global CSS glass instead of inlining values

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

* Feedback: Remove unnecessary curly brackets in JSX

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

---------

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

* 4. Connect illustrations to new setting values (#40139)

* Wire landing page illustration to the setting value

* Wire the unsubscribe page to the setting value

* Prepare no rows error to be wired to the setting value

* Wire no question results illustration to the setting value

* Wire no search results illustration to setting value

* Fix error from fixing conflict

* Fix required unnecsseary prop on Image

* Use Image component

* Link dashboard card no results image to the setting value

* Move the no data results to more a generic directory

* Link collection picker no results image to the setting value

* Make illustrations more accessible

* Fix failed tests

* Test unscribe page illustration + test no illustration

* Add landing page tests

* Simplify Cypress selectors

* Refactor: Rename settings to match the new requirements

No question data -> No Data
No search results -> No object

These changes are made so, these 2 settings are generic enough to
include other illustrations later on.

* Add no data illustration test

* Add no object illustration tests

* Fix unsubscribe page background style

* Fix not able to build static viz

* 5. Follow-up on milestone 1 (#40710)

* Update custom background illustration scale behavior

* Remove the need to put an SVG file in static folder

* Fix test from rebasing off master with @testing-library/user-event upgrade

---------

Co-authored-by: Denis Berezin <denis.berezin@metabase.com>

715174d3

715174d3 11 months ago

Name	Last commit	Last update
.babel_cache
.clj-kondo
.devcontainer
.github
.husky
.lsp
.storybook
.vscode
bin
dev
docs
e2e
enterprise
frontend
hooks
locales
modules/drivers
release
resources
snowplow
src/metabase
test/metabase
test_config
test_modules/drivers
test_resources
.cljfmt.edn
.dir-locals.el
.dockerignore
.editorconfig
.eslintignore
.eslintrc
.gitignore
.mlc_config.json
.nvmrc
.percy.yml
.pre-commit-config.yaml
.prettierignore
.prettierrc
.stylelintrc.json
.yarnrc
Dockerfile
LICENSE-AGPL.txt
LICENSE-EMBEDDING.txt
LICENSE-MCL.txt
LICENSE.txt
README.md
SECURITY.md
babel.config.json
codecov.yml
deps.edn
jest.config.js
jest.tz.unit.conf.json
package.json
postcss.config.js
shadow-cljs.edn
tsconfig.base.json
tsconfig.json
tsconfig.sdk.json
webpack.config.js
webpack.embedding-sdk.config.js
webpack.shared.config.js
webpack.static-viz.config.js
yarn.lock
zen.md

Metabase

Metabase is the easy, open-source way for everyone in your company to ask questions and learn from data.

Get started

The easiest way to get started with Metabase is to sign up for a free trial of Metabase Cloud. You get support, backups, upgrades, an SMTP server, SSL certificate, SoC2 Type 2 security auditing, and more (plus your money goes toward improving Metabase). Check out our quick overview of cloud vs self-hosting. If you need to, you can always switch to self-hosting Metabase at any time (or vice versa).

Features

Set up in five minutes (we're not kidding).
Let anyone on your team ask questions without knowing SQL.
Use the SQL editor for more complex queries.
Build handsome, interactive dashboards with filters, auto-refresh, fullscreen, and custom click behavior.
Create models that clean up, annotate, and/or combine raw tables.
Define canonical segments and metrics for your team to use.
Send data to Slack or email on a schedule with dashboard subscriptions.
Set up alerts to have Metabase notify you when your data changes.
Embed charts and dashboards in your app, or even your entire Metabase.

Take a tour of Metabase.

Supported databases

Installation

Metabase can be run just about anywhere. Check out our Installation Guides.

Contributing

Quick Setup: Dev environment

In order to spin up a development environment, you need to start the front end and the backend as follows:

Frontend quick setup

The following command will install the Javascript dependencies:

$ yarn install

To build and run without watching changes:

$ yarn build

To build and run with hot-reload:

$ yarn build-hot

Backend quick setup

In order to run the backend, you'll need to build the drivers first, and then start the backend:

$ ./bin/build-drivers.sh
$ clojure -M:run

For a more detailed setup of a dev environment for Metabase, check out our Developers Guide.

Internationalization

We want Metabase to be available in as many languages as possible. See which translations are available and help contribute to internationalization using our project over at POEditor. You can also check out our policies on translations.

Extending Metabase

Hit our Query API from Javascript to integrate analytics. Metabase enables your application to:

Build moderation interfaces.
Export subsets of your users to third party marketing automation software.
Provide a custom customer lookup application for the people in your company.

Check out our guide, Working with the Metabase API.

Security Disclosure

See SECURITY.md for details.

License

This repository contains the source code for both the Open Source edition of Metabase, released under the AGPL, as well as the commercial editions of Metabase, which are released under the Metabase Commercial Software License.

See LICENSE.txt for details.

Unless otherwise noted, all files © 2024 Metabase, Inc.

Metabase Experts

If you’d like more technical resources to set up your data stack with Metabase, connect with a Metabase Expert.