Bootstrap/Ant style collisions

[ranbena]

Redash is in the midst of migrating from Bootstrap to Ant, and from Angular to React.
Loading both component libraries causes collisions, since both use some identical less variable names, resulting mostly in wrong colors being displayed.

Bootstrap cannot be fully swapped until React migration is complete (Ant doesn't offer Angular components) so a middle ground must be found.

Currently defining specific css overrides, which problematic in many ways. Need better solution.

[ranbena]

Seems importing css instead of less files in ant.less resolves this.
I think it's good enough for now.

[arikfr]

@ranbena the problem with importing the css version is that our overrides won't apply:

redash/client/app/assets/less/redash/ant.less

Lines 12 to 42 in 22f835d

	// Overwritting Ant Design defaults to fit into Redash current style
	@font-family-no-number : @redash-font;
	@font-family : @redash-font;
	@code-family : @redash-font;
	@border-radius-base : @redash-input-radius;
	@border-color-base : #e8e8e8;
	@primary-color : @blue;
	// Fix for disabled button styles inside Tooltip component.
	// Tooltip wraps disabled buttons with `<span>` and moves all styles
	// and classes to that `<span>`. This resets all button styles and
	// turns it into simple inline element (because now it's wrapper is a button)
	.btn {
	button[disabled] {
	-moz-appearance: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	}
	}
	// Fix for Ant dropdowns when they are used in Boootstrap modals
	.ant-dropdown-in-bootstrap-modal {
	z-index: 1050;
	}

No?

[gabrieldutra]

I agree with @arikfr on this, the issue still exists, although we can avoid it for some components that don't require variable override.

[gabrieldutra]

I tested migrating all less files related to #3209 and some differences are noticeable (e.g.: font for form labels and inputs). My first test was with buttons, so that wasn't annoying.

I think what we can try do to at least give it some time is somehow isolate Ant less processing from the rest. I did a few tests with webpack.config.js and it seemed possible. It seems to create a variable-isolated tree when I do sth like this:

// webpack.config.js (line 29)
  entry: {
    app: [
      "./client/app/index.js",
      "./client/app/assets/less/main.less",
      "./client/app/assets/less/redash/ant.less"
    ],
    server: ["./client/app/assets/less/server.less"]
  }

With that we can create a new tree without including bootstrap on those paths. WDYT? 😄

[arikfr]

@gabrieldutra if this works, it seems like the best solution indeed.

[gabrieldutra]

@ranbena what do you think? I'm not very experienced with Less (or Redash styling files), but I can try to reorganize those files.

My concerns are all related to what we will see after this division. Till now we've been coding based on a mix of styles and once we properly divide it some page/component styles could break. A very good look on pages and components (mainly the ones which use Ant) will be important.

[ranbena]

Be assured @arikfr and I will take a close look at all pages and components prior to approval 🕵🏻‍♂️

[arikfr]

Can we close this now?