* fix invalid js

* install typings using typesync

* upgrade classnames to get its own typings

* convert colors, settings, Icon to TS

* add basic typescript configuration

* convert a tiny hook use-debounced-value to typescript

* allow any for now?

* update terser and static viz configs

* adjust config

* change extension of QuestionActivityTimeline from jsx to js to match jest config

* adjust config

* skip failing tests

* Fix missing question method in unit tests (#18314)

* review fix

* fix

Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com>

* Install jest-watch-typeahead

Since the Webpack and Babel upgrades, this shouldn't be needed any more. In the past, we had to explicitly resolve to the specific version of Cypress. Now it resolves to this version by default.

* upgrade to @percy/cypress 3.x

@percy/cypress 2.x uses deprecated @percy/agent which includes
an old version of puppeteer. The old version of puppeteer causes
`yarn` command to fail on M1 macOS environment.

Upgrade to @percy/cypress 3.x removes the dependency and thus
solves the issue.

The upgrade was done by running `npx @percy/migrate`.

* remove percy healthcheck task

This no longer exists in 3.x, see
https://github.com/percy/percy-cypress/blob/master/README.md#upgrading

* remove deprecated percy/exec-action

and moved `percy exec` to the correct command

* run 'yarn install' before running percy

* Update babel dependencies to latest

* Remove some old babel dependencies

The dependencies in this commit include dependencies that have been
renamed, such as babel-cli which is now @babel/cli. It also includes
dependencies that have been replaced, such as babel-preset-stage-0 and
its ilk, which have been replaced with @babel/preset-env.

* Remove babel-register dependency

This is referenced in our webpack.config.js file. I don't think we need
Babel in our Node envionment, but I could be wrong, so leaving this as a
separate commit.

* Remove @babel/standalone and dependent code

We're using @babel/standalone to support the writing of JSX in our
internal-only ScratchApp editor. Unfortunately, this dependency is
large--1.5mb not gzipped--and our current build does not intelligently
split bundles, meaning our users our burdened by the size of this
dependency whenever they must redownload the Metabase JS bundle.

I'm removing it. We should still be able to write JS in the ScratchApp,
but JSX no longer.

* Add @babel/node to dev deps

Needed by a cypress command

* Add browserslist config

Babel's preset-env dep needs this config to determine how to transform
our JavaScript. By default I believe it ends up defaulting to
"defaults."

"defaults" is equivalent to the following rules:
> 0.5%, last 2 versions, Firefox ESR, not dead

A comma between rules represents a UNION operator.

Per
https://www.metabase.com/docs/latest/faq/general/supported-browsers.html


we have deprecated IE 11 so I am including that explicitly in our
browserslist.

* Update babelrc plugins and presets

- Replaced presets with preset-env and preset-react
- Updated the names of some plugins, like transform-decorators-legacy,
  which is now @babel/plugin-proposal-decorators with an explicit
  "legacy: true" passed in the config.
- Removed add-react-displayname because it is included in preset-react
- Removed transform-builtin-extend because it is included in preset-env*
- Removed syntax-trailing-function-commas because it is supported by
  all browsers we support

* note: There is a "loose" config option for handling the extension of builtin
classes. We may need it, but I am not sure.

* Update babel cli args

Replace -q with --quiet because -q no longer exists

* Fix circular dep in auth.js by making it async

Our app unfortunately contains MANY circular dependencies. Some, like
this one, caused problems when the app instantiates because the
"refreshCurrentUser" method is undefined when auth.js is initially run.

While we should in the future avoid having circular deps in the first
place, making them run async by requiring the dep and function run-time
fixes this particular issue.

* Fix circular dependency in metabase/redux/requests.js

The handleActions and createAction methods imported from
"metabase/lib/redux" are actually just methods from the "redux-actions"
dependency... so importing those methods directly from that dep fixes
this circular dependency problem.

* Remove references to global.services and exports in metabase/services

This line breaks the build. Git blame says the line is 5 years old, and
I wouldn't expect such code to be used with how our app now requires
deps.

* Fix MBQLArrayClause problem caused by Array extension

* Explicitly pass args from flatMap to function via anonymous cb

I think the old Array.prototype.flatMap prototype must've had different
args. They are now "currentValue, index, array" so when we passed it
"enumeratePaths" as a callback, the second arg of enumeratePaths gets
set to a number. This breaks the logic of enumeratePaths because it is a
recursive function that depends on that second arg getting initialized
as an empty array by default.

* Remove code that spreads non-iterable value in array

New Babel is stricter about handling this sort of code that doesn't
match the JS spec. You can't spread an undefined value inside of an
iterator.

* Update jest and babel-jest to latest

Updating Babel breaks our unit tests. Updating nothing causes every test
to fail due to a Babel version mismatch. Updating only babel-jest causes
the following error:

TypeError: Jest: a transform must export a `process` function

There may be a way around updating Jest, but updating it does not appear
to be too difficult.

* Set the testEnvironment to jsdom

This was the default testEnvironment in our old version of jest. At some
point the default was changed to node.

* Remove unfinished "pending" unit tests

I'm unfamiliar with this pending function, but the function no longer
exists, causing the tests to fail.

* don't pass async callback to describe

* Update name of runTimersToTime to advanceTimersByTime

* Fix incorrectly nested unit test

* mock SVGElement.prototype.getBBox method

* Don't return values in describe callback

* Move variable declaration to above usage

* Fix prettier error

* Upgrade `documentation` library to the latest version (13.x.x)

This library was the only one left that was still using Babel 6.

* Return an MBQLClause instance after using Array methods

* remove 'not IE 11' from browserslist

* Remove mock that breaks unit test

Co-authored-by: Nemanja <31325167+nemanjaglumac@users.noreply.github.com>

* yarn add @visx/axis@1.8.0 @visx/grid@1.16.0 @visx/group@1.7.0 @visx/scale@1.7.0 @visx/shape@1.8.0

* Import static viz charting code

* Format code with yarn prettier

* Silence linting violations

* Build static-viz bundle

* Add `cypress-grep` library

https://github.com/cypress-io/cypress-grep

* Register `cypress-grep` plugin

* Remove `image-diff` library

* Remove `compare-screenshots` script

* Update Webpack to the latest version (5.37.0)

* Update `webpack-dev-server` to the latest version (3.11.2)

* Install `webpack-cli`

* Replace `CommonsChunkPlugin` with `splitCunks`

* Remove `NamedModulesPlugin`

* Remove `UnusedFilesWebpackPlugin`

* Replace `extract-text-webpack-plugin` with `mini-css-extract-plugin`

* Upgrade `html-webpack-plugin` to the latest version (5.3.1)

* Upgrade `html-webpack-harddisk-plugin` to the latest version (2.0.0)

* Remove `banner-webpack-plugin`

* Replace deprecated `[hash]` in the config

* Add `mode` to the config

* Upgrade `file-loader` to the latest version (6.2.0)

* Don't include polyfills for `path` and `crypto`

* Remove `uglifyjs-webpack-plugin` and use terser instead

* Workaround CLJS_GLOBAL needs top-level `process` object

* yarn add node-polyfill-webpack-plugin

* Use some polyfills

Apparently, the polyfill for crypto is still necessary since the front-end
code isn't migrated yet to the browser's native Crypto API
(https://www.w3.org/TR/WebCryptoAPI/)

See also https://www.npmjs.com/package/node-polyfill-webpack-plugin

* Admin smoke test: fix getting the empty DB path

* Onboarding setup test: fix getting the empty DB path

* Replace file-loader with type: "asset/resource"

See https://webpack.js.org/guides/asset-modules/

* upgrade react-markdown (#16934)

* Use large CI resource since webpack consumes a lot of memory [ci nocache]

https://circleci.com/docs/2.0/configuration-reference/#resourceclass



* Tidy up `NODE_ENV` references

* Remove Webpack `DefinePlugin`

Co-authored-by: Ariya Hidayat <ariya@metabase.com>
Co-authored-by: Dalton Johnson <daltojohnso@users.noreply.github.com>
Co-authored-by: Alexander Lesnenko <alxnddr@users.noreply.github.com>

Related issue: https://github.com/metabase/metabase/issues/17005

* Add `arg` library

* Rewrite the main Cypress runner logic

* Destructure Cypress snapshot results

* Rename Cypress snapshots runner

* Update CircleCI config to reflect `folder` changes

* Update readme for smoke tests

* Run `metabase-db` tests conditionally based on env `QA_DB_ENABLED`

Co-authored-by: Mário Valney <mariovalney@gmail.com>

* Replace `pure` with `React.Memo`

* Fix eslint error

* Use `shallowEqual` directly as a utility function

* Remove `recompose` library

* Cleanup from dump-load-entities-test (#16281)

Updating dump-load-entities-test test so that dump dir is actually deleted at the end

* Revamp Cypress custom commands (#16292)

* Extract UI custom commands

* Extract user related custom commands

* Extract overwrites

* Extract permissions related custom commands

* Extract API custom commands

* Extract helpers custom commands

* Extract database related custom commands

* Rename `helpers` group to `visibility`

* Rename custom command `isInViewport` to `isRenderedWithinViewport`

* Unskip repro for #15119 (#16297)

* Create composite Cypress custom command `cy.createQuestionAndDashboard` (#16294)

* Add composite Cypress custom command `createQuestionAndDashboard`

* Refactor the existing test to use new Cypress custom command

* Refactor repro for #13062 using the new Cypress custom command

* Use the `describe` block instead of using `forEach` for complex repro

* Add space between test cases

* #12629 Repro: Human-readable number formatting not working properly (#16231)

* Fix `nosql` user's email address (#16306)

* Generate correct SQL for columns from joins inside other joins or source queries (#16254)

* Fix joining a join inside a nested queries (#12928)

* Code cleanup & dox

* Tests for #13649

* Test fixes 



* Remove unit tests snapshots (#16321)

* Remove snapshots from `Calendar.unit.spec.js`

* Remove snapshots from `DashCard.unit.spec.js`

* Remove snapshots generated for "internal" components

* Remove unused import

* Remove snapshot related command from `scripts`

* Remove `noSnapshotTest` from internal components

* Remove `react-test-renderer`

* filter nulls out of histograms (#16345)

* #15993 Repro: Click behavior with filter pass-thru does not show filters defined on question (#16342)

* #16334 Repro: Click Behavior targeting a question with filter mapped causes the visualization type to change (#16343)

* Add repro for #16334

* Expand test assertion

* #16327 Repro: Double binning menu for date fields when using Saved Question (Native) (#16359)

* #16322 Repro: "Custom mapping" is only available, when "A list of all values" is set (and after a browser refresh) (#16361)

* #16226 Repro: LDAP/Email settings gets cleared if validation fails (#16364)

* Add repro for #16226

* Extract email settings into a separate file

* Add repro for #16226 (Email)

* switch to column settings when sidebar is already open (#16368)

* align labels on non-bars in combo charts (#16369)

* #16378 Repro: Cannot enable JWT authentication (#16384)

* Fix JS error on JWT settings form (#16394)

* fix default updateSettings function in SettingsBatchForm

* unskip repro

* #12128 Repro: Can't change label on empty row value (#16426)

* Post-merge fix

* Post-merge fix 2
I didn't solve this merge conflict properly in the original merge.

Co-authored-by: Jeff Evans <jeff303@users.noreply.github.com>
Co-authored-by: Cam Saul <1455846+camsaul@users.noreply.github.com>
Co-authored-by: Paul Rosenzweig <paulrosenzweig@users.noreply.github.com>
Co-authored-by: Noah Moss <32746338+noahmoss@users.noreply.github.com>

* Remove snapshots from `Calendar.unit.spec.js`

* Remove snapshots from `DashCard.unit.spec.js`

* Remove snapshots generated for "internal" components

* Remove unused import

* Remove snapshot related command from `scripts`

* Remove `noSnapshotTest` from internal components

* Remove `react-test-renderer`

* Basic `react-gird-layout` usage for Dashboards (#16167)

* Install react-grid-layout

* Add basic NewGridLayout implementation

* Wrap DashboardGrid with WidthProvider

* Bind DashboardGrid's onDrag methods

* Coerce layout item IDs to string

* Add method rendering NewDashboardGrid

* Refactor `onLayoutChange` method to handle new grid

* Use react-grid-layout's CSS classes

* Fix lag while dragging grid items

* Switch back to ExplicitSize HOC

* Fix grid in editing state is too short

* Import missing `react-grid-layout` CSS

* Fix RGL overwrites dragging placeholder color

* Hide default RGL's resize handle

* Fix random dashboard layout rearrangements

Before dashboard cards' parameters (x, y, width, height)
were updated individually for each card
It worked fine because there was only one card moving at a time

Now when cards are automatically moving when a user drags another card,
a race conditon appears, cards' parameters get overwritten, and layout breaks

Fixed by using bulk updates for dashboard cards drag and resizing events

* Fix dashboard background grid

* Align RGL with parent component edges

* Fix grid offset

* Fix dashboard grid height

* Fix no automatic page scroll while dragging

* Fix navbar is stuck when scrolling dashboard

* Remove previous grid component

* Fix grid doesn't respect item min size

* Extract grid background into a separate utils file

* Fix dashboards layout issues (#16236)

* Fix RGL cards are higher than the previous ones

* Return the fixed header in editing mode back

* Add support for responsive dashboard layouts (#16213)

* Fix `gridItemWidth` calculation

* Memoize grid children

* Add utility to adapt layout for breakpoints

* Use responsive react-grid-layout for dashboards

* Don't overwrite main layout with smaller ones

* Pass correct `isMobile` prop to DashCard component

* Extract `renderGridItem` method

* Increase dashboard cards vertical margin for mobile

* Remove dashboard's old renderMobile method

* Add isMobileBreakpoint utility function

* Disable dashboard drag and resize for mobile

* Remove old method disabling mobile drag and resize

* Fix grid background rendering

* Switch to desktop and mobile breakpoints

* Update card heights for dashboard's mobile view

* Add a comment about `!important` in CSS

* Minor code style fix

* Remove not used functions

* Install slugify

* Add utils to slugify and parse entity URLs

* Add `<Entity.Link />` component

Basically just a `<Entity.Name />`,
but wrapped inside `<Link />`

* Add slugs to `/browse/:databaseId` URLs

* Use constant for "Saved Questions" database ID

* Fix "Saved Questions" not displayed in breadcrumbs

* Fix opening browse page for "Saved Questions"

* Add slugs to `/collection/:id` URLs

* Fix personal collection page slug

* Remove `describe.only`

* Remove unnecessary type coercion

* Fix typo

* Fix collections not highlighted in the sidebar

* Add slug to collection `/archive` URL

* Add slug to collection `/edit` URL

* Add slug to collection `/permissions` URL

* Use slug in `getInitialCollectionId` selector

* Explicitly pass root ID to `Urls.collection`

* Pass prop to EntityLink's Link component

* Fix DashboardMoveToast collection link

* Allow overwriting EntityLink's Link component

* Fix links in QueryBuilder's search

* Fix collection link in search results

* Fix navigating to collection after question archived

* Fix navigating to collection from pulse edit

* Slugify users' personal collection URLs

* Test slugified collection URLs are opened correctly

* Add slugs to `/dashboard/:id` URLs

* Fix dashboard URLs at admin public sharing page

* Fix opening dashboards from main page

* Fix navigation to saved automatic dashboard

* Fix dashboard moving

* Fix dashboard history

* Fix closing dashboard editing modal

* Fix dashboard details form is empty

Reproduced if opening the form via URL
(`/dashboard/:id/details`)

Works correctly if the details modal is opened from a dropdown menu

* Fix dashboard copy form crash

Reproduced if opening the form via URL (`/dashboard/:id/copy`)

* Fix copying dashboard

* Fix closing dashboard copy modal

* Fix navigation once dashboard is created

* Replace hardcoded "root" id with a constant

* Assert pathnames instead of URLs

* Fix duplicate modal not closing automatically

* Fix URLs on Activity page

* Fix navigating to dashboard question is added to

* Fix archiving dashboard

* `dashboardId` —> `slug`

* Add slugs to `/question/:id` URLs

* Fix links to questions on Activity page

* Switch questions to slugified URLs

* Remove not used import

* Update pathname assertion

* Fix collection URL builder fails receiving `null`

* Ensure question URL builder returns valid URL

* Update pathname assertions

* Update pathname assertions

* Update pathname assertions

* Update pathname assertion

* Update pathname assertion

* Add question URL builder unit tests

* Fix collection URL builder

* Fix `null` collection ID when building URL

* Fix repro test issue reference

* Move URLs tests into onboarding folder

* Enable #15256 repro test

* Fix slugs for edge cases

* Install `cypress-real-events` library

* Register `cypress-real-events` globally

* Install `cypress-real-events` library

* Register `cypress-real-events` globally

* move dashboard card action buttons in a popover

* add more top margin for actions menu when editing dashboard, fix tests

* Fix spec broken due to changed height of dashboard cards

* Upgrade `eslint-plugin-react` 

* Disable `react/prop-types` warning in stray files

* Register breaking rules and turn off warnings

* Fix wrong `eslint-disable` comment

* Fix `react/display-name` error in `NotebookCell.jsx`

* Upgrade Cypress to v6.8.0 (latest)

* Fix failing test in CI

* Fix the problem where Cypress does not render Nav bar locally

More info:
- https://www.eliostruyf.com/tests-running-iframe-cypress-e2e-tests/
- https://docs.cypress.io/faq/questions/using-cypress-faq#Is-there-any-way-to-detect-if-my-app-is-running-under-Cypress

* add new linting package

* add rule to eslint config

* remove it.only

* fix race condition err in test

* Add `cypress-skip-test` library

This is the official Cypress library for conditionally skipping/running tests.
https://github.com/cypress-io/cypress-skip-test

* Enable `cy.onlyOn` and `cy.skipOn` custom commands in all tests

Reference: https://github.com/cypress-io/cypress-skip-test#example

* Shared CLJ/CLJS lib (PoC/WIP)

* PoC 2.0

* Fixes 

* More test fixes 

* Bump shadow-cljs version

* Fix more stuff

* Need to ^:export the exports

* CI fixes 

* Add eslintignore

* Ignore cljs files for FE code coverage

* Try prefixing CLJS -> JS import with goog:

* Revert indentation change

* No goog:

* Add .prettierignore

* Use advanced build for now for JS tests unit we can figure out how to make it work

* yarn remove flow-bin eslint-plugin-flowtype

* CI: remove fe-linter-flow

* Remove Flow from ESLint config

* Remove Flow type annotations and directives

* Simplify Flow types for React elements and components

* Import missing Flow types

* Remove lint-flow from package.json

the plugin raises an error on anything that looks like a hook (a
function that starts with "use") so am disabling eslint for two false
positives

* Upgrade React to v16

* Upgrade react-hot-loader

* Use portal in BodyComponent (#14779)

* Use portal in Popover (#14799)

* Use portal in Popover

* Use SandboxedPortal to stop portal child/parent event propagation

React portals bubble events from component childrent to component
parents _through_ the portal as though they are attached. This breaks
our Triggerable HOC that wraps everything in an anchor tag -- click
events inside of an open Popover trigger the "toggle" function in
Triggerable, closing the Popover component.

Adding an additional div to the code potentially breaks styling, but
this seemed better than the alternative of changing/limiting
Triggerable.

* Fix adding of open class

* don't trigger some logic when popover is not open

* change wrapper span to a div

* rmv explicit bind from handleDismissal fn

* add comment explaining reasoning for SandboxedPortal

* add comment to explain need for 'maxHeight' state value

* Use ReactDOMServer to render html in a contenteditable div (#14869)

As part of the react v16 we can no longer rely on a synchronous
ReactDOM.render call. Using the third arg callback of ReactDOM.render
does not work for reasons unknown to me, but it would likely be
race-condition-y anyways due to this being an input field. I'm using
ReactDOMServer in order to avoid rewriting the react TokenizedExpression
component as html and to avoid associated xss vulnerabilities, etc.

* Rename unsafe lifecycles (#14887)

* Rename unsafe lifecycles

* Fix flow error: Remove unused suppressions

* use SandboxedPortal in Modal (#14905)

* use SandboxedPortal in Modal

* Move modal append container to constructor

This breaks the entry animation but it fixes problems with having a
popover _inside_ of the modal. Previously, popover was appending its
container el before the modal, causing a stacking issue.

* remove unstable_renderSubtreeIntoContainer from Tooltip (#14976)

Co-authored-by: Dalton <daltojohnso@users.noreply.github.com>