[frontend] add ant design library (#2996)

[frontend] add bootstrap reset/revert styles

desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx

@@ -1,11 +1,13 @@
 'use strict';
 
 import React, { FunctionComponent } from 'react';
+import { Button } from 'antd';
 
-// If importing using "import { Ace } from 'ext/ace'" VSCode typescript will complain
+// tsx-files don't have the same baseUrl as other js files so
+// we are using a relative path when importing
 import { Ace } from '../../../../../ext/ace';
 
-import {CURSOR_POSITION_CHANGED_EVENT} from '../../../components/aceEditor/AceLocationHandler';
+import { CURSOR_POSITION_CHANGED_EVENT } from '../../aceEditor/AceLocationHandler';
 import ReactExampleGlobal from '../../../../../reactComponents/ReactExampleGlobal/ReactExampleGlobal';
 import { useHuePubSub } from '../../../../../reactComponents/useHuePubSub';
 import SqlExecutable from '../../../execution/sqlExecutable';
@@ -22,7 +24,7 @@ export interface ReactExampleProps {
 // When we have type definitions and Ace imported using webackpack we should
 // use those types instead of creating our own, e.g. Ace.Position
 interface EditorCursor {
-  position: Ace.Position
+  position: Ace.Position;
 }
 
 const defaultProps = { title: 'Default result title' };
@@ -39,7 +41,11 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
     editorCursor?.position !== undefined ? JSON.stringify(editorCursor.position) : 'not available';
 
   return (
-    <div className="react-example">
+    // The 'antd' class is added to the root element since we want it to apply the correct
+    // "global" styling to its antd sub components, e.g. the antd Button.
+    // Also make sure that the component specific Antd style is imported in the file
+    // 'root-wrapped-antd.less'.
+    <div className="react-example antd">
       <h1 className="react-example__title">{title}</h1>
       <p className="react-example__description">
         I'm an Editor specific react component containing subcomponents. The dynamic id that I'm
@@ -53,6 +59,9 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
       <ReactExampleGlobal className="react-example__react-example-global-component">
         I'm a button from the application global component set
       </ReactExampleGlobal>
+      <Button type="primary" onClick={() => console.info('clicked')}>
+        I'm an Antd button
+      </Button>
     </div>
   );
 };

desktop/core/src/desktop/static/desktop/less/hue.less

@@ -24,6 +24,7 @@
 @import "hue-multi-cluster-icons.less";
 @import "components/hue-clearable.less";
 @import "hue4.less";
+@import "root-wrapped-antd.less";
 
 html {
   height: 100%;

desktop/core/src/desktop/static/desktop/less/reset-globals.less

@@ -0,0 +1,88 @@
+// Reset global styles from Bootstrap to prevent them from
+// interfering with the Antd styles.
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-style: inherit;
+  font-variant: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+}

desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -0,0 +1,19 @@
+// The Ant Design library modifies the global styles which will affect the UI in Hue
+// in multiple places where not intended. So in order to utilize the components locally
+// without leaking styles we wrap it all in an antd class.
+.antd {
+  /* stylelint-disable no-invalid-position-at-import-rule */
+
+  // We need to reset some global styles from Bootstrap to prevent them from
+  // interfering with the Antd styles
+  @import './reset-globals.less';
+
+  // Import global antd styles
+  @root-entry-name: variable;
+  @import 'node_modules/antd/es/style/core/index.less';
+  @import 'node_modules/antd/es/style/themes/default.less';
+
+  // Import the styles for the actual components used
+  @import 'node_modules/antd/es/button/style/index.less';
+  /* stylelint-enable no-invalid-position-at-import-rule */
+}