Merge pull request #9323 from prometheus/feature/use-npm-workspace

Use npm workspace and integrate codemirror-promql locally

.circleci/config.yml

@@ -47,30 +47,24 @@ jobs:
       - store_test_results:
           path: test-results
 
-  test_react:
+  test_ui:
     executor: golang
 
     steps:
       - checkout
       - restore_cache:
           keys:
-            - v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
+            - v3-npm-deps-{{ checksum "web/ui/package-lock.json" }}
             - v3-npm-deps-
-      - run:
-          command: make react-app-test
+      - run: make ui-install
+      - run: make ui-lint
+      - run: make ui-build-module
+      - run: make ui-test
       - save_cache:
-          key: v3-npm-deps-{{ checksum "web/ui/react-app/package-lock.json" }}
+          key: v3-npm-deps-{{ checksum "web/ui/package-lock.json" }}
           paths:
             - ~/.npm
 
-  test_web_module:
-    executor: golang
-    steps:
-      - checkout
-      - run: make web-module-install
-      - run: make web-module-test
-      - run: make web-module-lint
-
   test_windows:
     executor:
       name: win/default
@@ -135,11 +129,7 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - test_react:
-          filters:
-            tags:
-              only: /.*/
-      - test_web_module:
+      - test_ui:
           filters:
             tags:
               only: /.*/
@@ -165,7 +155,7 @@ workflows:
           context: org-context
           requires:
             - test_go
-            - test_react
+            - test_ui
             - build
           filters:
             branches:
@@ -175,7 +165,7 @@ workflows:
           context: org-context
           requires:
             - test_go
-            - test_react
+            - test_ui
             - build
           filters:
             tags:

.gitignore

@@ -25,3 +25,5 @@ npm_licenses.tar.bz2
 
 /vendor
 /.build
+
+/**/node_modules

Makefile

@@ -14,13 +14,9 @@
 # Needs to be defined before including Makefile.common to auto-generate targets
 DOCKER_ARCHS ?= amd64 armv7 arm64 ppc64le s390x
 
-WEB_MODULE_PATH = web/ui/module
-REACT_APP_PATH = web/ui/react-app
-REACT_APP_SOURCE_FILES = $(shell find $(REACT_APP_PATH)/public/ $(REACT_APP_PATH)/src/ $(REACT_APP_PATH)/tsconfig.json)
-REACT_APP_OUTPUT_DIR = web/ui/static/react
-REACT_APP_NODE_MODULES_PATH = $(REACT_APP_PATH)/node_modules
+UI_PATH = web/ui
+UI_NODE_MODULES_PATH = $(UI_PATH)/node_modules
 REACT_APP_NPM_LICENSES_TARBALL = "npm_licenses.tar.bz2"
-REACT_APP_BUILD_SCRIPT = ./scripts/build_react_app.sh
 
 PROMTOOL = ./promtool
 TSDB_BENCHMARK_NUM_METRICS ?= 1000
@@ -33,15 +29,28 @@ include Makefile.common
 
 DOCKER_IMAGE_NAME       ?= prometheus
 
-$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/package-lock.json
-	cd $(REACT_APP_PATH) && npm ci
+.PHONY: ui-install
+ui-install:
+	cd $(UI_PATH) && npm install
 
-$(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES) $(REACT_APP_BUILD_SCRIPT)
-	@echo ">> building React app"
-	@$(REACT_APP_BUILD_SCRIPT)
+.PHONY: ui-build
+ui-build:
+	cd $(UI_PATH) && npm run build
+
+.PHONY: ui-build-module
+ui-build-module:
+	cd $(UI_PATH) && npm run build:module
+
+.PHONY: ui-test
+ui-test:
+	cd $(UI_PATH) && npm run test:coverage
+
+.PHONY: ui-lint
+ui-lint:
+	cd $(UI_PATH) && npm run lint
 
 .PHONY: assets
-assets: web-module-install web-module-build $(REACT_APP_OUTPUT_DIR)
+assets: ui-install ui-build
 	@echo ">> writing assets"
 	# Un-setting GOOS and GOARCH here because the generated Go code is always the same,
 	# but the cached object code is incompatible between architectures and OSes (which
@@ -49,52 +58,20 @@ assets: web-module-install web-module-build $(REACT_APP_OUTPUT_DIR)
 	cd web/ui && GO111MODULE=$(GO111MODULE) GOOS= GOARCH= $(GO) generate -x -v $(GOOPTS)
 	@$(GOFMT) -w ./web/ui
 
-.PHONY: react-app-lint
-react-app-lint:
-	@echo ">> running React app linting"
-	cd $(REACT_APP_PATH) && npm run lint:ci
-
-.PHONY: react-app-lint-fix
-react-app-lint-fix:
-	@echo ">> running React app linting and fixing errors where possible"
-	cd $(REACT_APP_PATH) && npm run lint
-
-.PHONY: react-app-test
-react-app-test: | $(REACT_APP_NODE_MODULES_PATH) react-app-lint
-	@echo ">> running React app tests"
-	cd $(REACT_APP_PATH) && npm run test --no-watch --coverage
-
-.PHONY: web-module-build
-web-module-build:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --build
-
-.PHONY: web-module-lint
-web-module-lint:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --lint
-
-.PHONY: web-module-test
-web-module-test:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --test
-
-.PHONY: web-module-install
-web-module-install:
-	@cd ${WEB_MODULE_PATH} && ./build.sh --install
-
 .PHONY: test
 # If we only want to only test go code we have to change the test target
 # which is called by all.
 ifeq ($(GO_ONLY),1)
 test: common-test
 else
-test: common-test react-app-test web-module-test web-module-lint
+test: common-test ui-build-module ui-test ui-lint
 endif
 
-
 .PHONY: npm_licenses
-npm_licenses: $(REACT_APP_NODE_MODULES_PATH)
+npm_licenses: ui-install
 	@echo ">> bundling npm licenses"
 	rm -f $(REACT_APP_NPM_LICENSES_TARBALL)
-	find $(REACT_APP_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --transform 's/^/npm_licenses\//' --files-from=-
+	find $(UI_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --transform 's/^/npm_licenses\//' --files-from=-
 
 .PHONY: tarball
 tarball: npm_licenses common-tarball

scripts/build_react_app.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/env bash
-#
-# Build React web UI.
-# Run from repository root.
-set -e
-set -u
-
-if ! [[ "$0" =~ "scripts/build_react_app.sh" ]]; then
-	echo "must be run from repository root"
-	exit 255
-fi
-
-cd web/ui/react-app
-
-echo "building React app"
-PUBLIC_URL=. npm run build
-rm -rf ../static/react
-mv build ../static/react

web/ui/build_ui.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# Copyright 2021 The Prometheus Authors
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -e
+current=$(pwd)
+
+buildOrder=(module/codemirror-promql)
+
+function buildModule() {
+  for module in "${buildOrder[@]}"; do
+    cd "${module}"
+    echo "build ${module}"
+    npm run build
+    cd "${current}"
+  done
+}
+
+function buildReactApp() {
+  cd react-app
+  echo "build react-app"
+  npm run build
+  cd "${current}"
+  rm -rf ./static/react
+  mv ./react-app/build ./static/react
+}
+
+for i in "$@"; do
+  case ${i} in
+  --all)
+    buildModule
+    buildReactApp
+    shift
+    ;;
+  --build-module)
+    buildModule
+    shift
+    ;;
+  esac
+done

web/ui/module/build.sh

@@ -1,60 +0,0 @@
-#!/bin/bash
-
-set -e
-
-MODULE_LIST=(codemirror-promql)
-
-build-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "building ${module}"
-    npm run build
-    cd ../
-  done
-}
-
-lint-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "running linter for ${module}"
-    npm run lint
-    cd ../
-  done
-}
-
-test-module() {
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "running all tests for ${module}"
-    npm run test
-    cd ../
-  done
-}
-
-install-module(){
-  for module in "${MODULE_LIST[@]}"; do
-    cd "${module}"
-    echo "install deps for ${module}"
-    npm ci
-    cd ../
-  done
-}
-
-for i in "$@"; do
-  case ${i} in
-    --build)
-      build-module
-      shift
-      ;;
-    --lint)
-      lint-module
-      shift
-      ;;
-    --test)
-      test-module
-      ;;
-    --install)
-      install-module
-      ;;
-  esac
-done

web/ui/module/codemirror-promql/.eslintrc.json

@@ -5,7 +5,6 @@
       "plugin:prettier/recommended"
     ],
     "rules": {
-      "@typescript-eslint/camelcase": "warn",
       "@typescript-eslint/explicit-function-return-type": ["off"],
       "eol-last": [
         "error",

web/ui/module/codemirror-promql/.npmignore

@@ -11,3 +11,4 @@
 /.npmignore
 /.gitignore
 /.eslintrc.js
+/.nyc_output

web/ui/module/codemirror-promql/build.sh

@@ -16,14 +16,5 @@
 set -ex
 
 # build the lib (both ES2015 and CommonJS)
-tsc --module ES2015 --target ES2015 --outDir lib/esm
-tsc --module commonjs --target es5 --outDir lib/cjs --downlevelIteration
-
-# Finally, copy some useful files into the distribution folder for documentation purposes.
-cp ./README.md ./lib/README.md
-cp ./CHANGELOG.md ./lib/CHANGELOG.md
-cp ./package.json ./lib/package.json
-
-if [ -f "./LICENSE" ]; then
-  cp ./LICENSE ./lib/LICENSE
-fi
+tsc --module ES2015 --target ES2015 --outDir dist/esm
+tsc --module commonjs --target es5 --outDir dist/cjs --downlevelIteration

web/ui/module/codemirror-promql/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codemirror-promql",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "a CodeMirror mode for the PromQL language",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "scripts": {
     "build": "npm run build:grammar && npm run build:lib",
     "build:grammar": "lezer-generator src/grammar/promql.grammar -o src/grammar/parser",
     "build:lib": "bash ./build.sh",
     "test": "npm run build:grammar && ts-mocha -p tsconfig.json ./**/*.test.ts",
-    "test-coverage": "npm run build:grammar && nyc ts-mocha -p ./tsconfig.json ./**/*.test.ts",
+    "test:coverage": "npm run build:grammar && nyc ts-mocha -p ./tsconfig.json ./**/*.test.ts",
     "codecov": "nyc report --reporter=text-lcov > coverage.lcov && codecov",
     "lint": "eslint src/ --ext .ts",
     "lint:fix": "eslint --fix src/ --ext .ts"
@@ -44,25 +44,23 @@
     "@types/chai": "^4.2.12",
     "@types/lru-cache": "^5.1.0",
     "@types/mocha": "^8.0.3",
-    "@types/node": "^14.0.13",
-    "@typescript-eslint/eslint-plugin": "^2.22.0",
-    "@typescript-eslint/parser": "^2.22.0",
+    "@types/node": "^16.7.6",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
     "chai": "^4.2.0",
-    "clean-webpack-plugin": "^3.0.0",
     "codecov": "^3.8.1",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "html-webpack-plugin": "^4.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-flowtype": "^5.9.2",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-prettier": "^4.0.0",
     "isomorphic-fetch": "^3.0.0",
     "lezer": "^0.13.1",
     "lezer-generator": "^0.13.1",
     "mocha": "^8.1.2",
     "nock": "^13.0.11",
     "nyc": "^15.1.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.3.2",
     "ts-loader": "^7.0.4",
     "ts-mocha": "^8.0.0",
     "ts-node": "^9.0.0",

web/ui/module/codemirror-promql/src/client/prometheus.ts

@@ -272,10 +272,7 @@ class Cache {
         }
         const labelValues = currentAssociation.get(key);
         if (labelValues === undefined) {
-          currentAssociation.set(
-            key,
-            new Set<string>([value])
-          );
+          currentAssociation.set(key, new Set<string>([value]));
         } else {
           labelValues.add(value);
         }

web/ui/module/codemirror-promql/src/complete/hybrid.test.ts

@@ -778,8 +778,7 @@ describe('autocomplete promQL test', () => {
     },
     {
       title: 'offline function/aggregation autocompletion in aggregation 4',
-      expr:
-        'sum by (instance, job) ( sum_over(scrape_series_added[1h])) / sum by (instance, job) (sum_over_time(scrape_samples_scraped[1h])) > 0.1 and sum by(instance, job) (scrape_samples_scraped{) > 100',
+      expr: 'sum by (instance, job) ( sum_over(scrape_series_added[1h])) / sum by (instance, job) (sum_over_time(scrape_samples_scraped[1h])) > 0.1 and sum by(instance, job) (scrape_samples_scraped{) > 100',
       pos: 33,
       expectedResult: {
         options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),

web/ui/module/codemirror-promql/src/promql.ts

@@ -35,9 +35,8 @@ export function promQLLanguage(top: LanguageType) {
           StringLiteral: tags.string,
           NumberLiteral: tags.number,
           Duration: tags.number,
-          'Abs Absent AbsentOverTime AvgOverTime Ceil Changes Clamp ClampMax ClampMin CountOverTime DaysInMonth DayOfMonth DayOfWeek Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month PredictLinear PresentOverTime QuantileOverTime Rate Resets Round Scalar Sgn Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Time Timestamp Vector Year': tags.function(
-            tags.variableName
-          ),
+          'Abs Absent AbsentOverTime AvgOverTime Ceil Changes Clamp ClampMax ClampMin CountOverTime DaysInMonth DayOfMonth DayOfWeek Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month PredictLinear PresentOverTime QuantileOverTime Rate Resets Round Scalar Sgn Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Time Timestamp Vector Year':
+            tags.function(tags.variableName),
           'Avg Bottomk Count Count_values Group Max Min Quantile Stddev Stdvar Sum Topk': tags.operatorKeyword,
           'By Without Bool On Ignoring GroupLeft GroupRight Offset Start End': tags.modifier,
           'And Unless Or': tags.logicOperator,

web/ui/module/codemirror-promql/tsconfig.json

@@ -8,19 +8,19 @@
       "dom"
     ],
     "declaration": true,
-    "outDir": "lib",
+    "outDir": "dist",
     "strict": true,
     "sourceMap": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "allowJs": true
+    "allowJs": true,
+    "skipLibCheck": true
   },
   "include": [
     "src/"
   ],
   "exclude": [
-    "node_modules",
     "src/**/*.test.ts"
   ]
 }

web/ui/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "prometheus",
+  "private": true,
+  "scripts": {
+    "build": "bash build_ui.sh --all",
+    "build:module": "bash build_ui.sh --build-module",
+    "start": "npm run start -w react-app",
+    "test": "npm run test --workspaces",
+    "test:coverage": "npm run test:coverage --workspaces",
+    "lint": "npm run lint --workspaces"
+  },
+  "workspaces": [
+    "react-app",
+    "module/*"
+  ]
+}

web/ui/react-app/package.json

@@ -21,7 +21,7 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@nexucis/fuzzy": "^0.3.0",
     "bootstrap": "^4.6.0",
-    "codemirror-promql": "^0.17.0",
+    "codemirror-promql": "0.18.0",
     "css.escape": "^1.5.1",
     "downshift": "^3.4.8",
     "i": "^0.3.6",
@@ -46,6 +46,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --runInBand --resetMocks=false",
+    "test:coverage": "react-scripts test --runInBand --resetMocks=false --no-watch --coverage",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "eject": "react-scripts eject",
     "lint:ci": "eslint --quiet \"src/**/*.{ts,tsx}\"",
@@ -65,7 +66,7 @@
   "devDependencies": {
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.9",
-    "@types/flot": "0.0.31",
+    "@types/flot": "0.0.32",
     "@types/jest": "^27.0.1",
     "@types/jquery": "^3.5.1",
     "@types/node": "^16.7.6",

web/ui/react-app/src/pages/graph/CMExpressionInput.tsx

@@ -11,7 +11,6 @@ import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
 import { highlightSelectionMatches } from '@codemirror/search';
 import { commentKeymap } from '@codemirror/comment';
 import { lintKeymap } from '@codemirror/lint';
-import { PromQLExtension, CompleteStrategy } from 'codemirror-promql';
 import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
 
@@ -19,8 +18,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch, faSpinner, faGlobeEurope } from '@fortawesome/free-solid-svg-icons';
 import MetricsExplorer from './MetricsExplorer';
 import { usePathPrefix } from '../../contexts/PathPrefixContext';
-import { newCompleteStrategy } from 'codemirror-promql/cjs/complete';
 import { useTheme } from '../../contexts/ThemeContext';
+import { CompleteStrategy, PromQLExtension } from 'codemirror-promql';
+import { newCompleteStrategy } from 'codemirror-promql/dist/cjs/complete';
 
 const promqlExtension = new PromQLExtension();
 

web/ui/react-app/src/pages/graph/TimeInput.tsx

@@ -6,7 +6,7 @@ import moment from 'moment-timezone';
 
 import 'tempusdominus-core';
 import 'tempusdominus-bootstrap-4';
-import '../../../node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';
+import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';
 
 import { dom, library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

web/ui/react-app/src/themes/_bootstrap_dark.scss

@@ -5,14 +5,14 @@
    and https://github.com/ForEvolve/bootstrap-dark/issues/49
 */
 
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
-@import 'node_modules/@forevolve/bootstrap-dark/scss/dark-variables';
+@import '~@forevolve/bootstrap-dark/scss/dark-variables';
 
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/@forevolve/bootstrap-dark/scss/mixins-overrides';
-@import 'node_modules/@forevolve/bootstrap-dark/scss/dark-mixins';
+@import '~bootstrap/scss/mixins';
+@import '~@forevolve/bootstrap-dark/scss/mixins-overrides';
+@import '~@forevolve/bootstrap-dark/scss/dark-mixins';
 
 html {
   font-family: sans-serif; // 2
@@ -33,51 +33,51 @@ body.bootstrap-dark {
 }
 
 .bootstrap-dark {
-  @import 'node_modules/bootstrap/scss/root';
-  @import 'node_modules/bootstrap/scss/type';
-  @import 'node_modules/bootstrap/scss/images';
-  @import 'node_modules/bootstrap/scss/code';
-  @import 'node_modules/bootstrap/scss/grid';
+  @import '~bootstrap/scss/root';
+  @import '~bootstrap/scss/type';
+  @import '~bootstrap/scss/images';
+  @import '~bootstrap/scss/code';
+  @import '~bootstrap/scss/grid';
 
-  @import 'node_modules/bootstrap/scss/tables';
-  @import 'node_modules/@forevolve/bootstrap-dark/scss/dark-tables';
+  @import '~bootstrap/scss/tables';
+  @import '~@forevolve/bootstrap-dark/scss/dark-tables';
 
-  @import 'node_modules/bootstrap/scss/forms';
-  @import 'node_modules/@forevolve/bootstrap-dark/scss/form-overrides';
+  @import '~bootstrap/scss/forms';
+  @import '~@forevolve/bootstrap-dark/scss/form-overrides';
 
-  @import 'node_modules/bootstrap/scss/buttons';
-  @import 'node_modules/bootstrap/scss/transitions';
-  @import 'node_modules/bootstrap/scss/dropdown';
-  @import 'node_modules/bootstrap/scss/button-group';
+  @import '~bootstrap/scss/buttons';
+  @import '~bootstrap/scss/transitions';
+  @import '~bootstrap/scss/dropdown';
+  @import '~bootstrap/scss/button-group';
 
-  @import 'node_modules/bootstrap/scss/input-group';
-  @import 'node_modules/@forevolve/bootstrap-dark/scss/dark-input-group';
+  @import '~bootstrap/scss/input-group';
+  @import '~@forevolve/bootstrap-dark/scss/dark-input-group';
 
-  @import 'node_modules/bootstrap/scss/custom-forms';
-  @import 'node_modules/bootstrap/scss/nav';
-  @import 'node_modules/bootstrap/scss/navbar';
-  @import 'node_modules/bootstrap/scss/card';
-  @import 'node_modules/bootstrap/scss/breadcrumb';
-  @import 'node_modules/bootstrap/scss/pagination';
-  @import 'node_modules/bootstrap/scss/badge';
-  @import 'node_modules/bootstrap/scss/jumbotron';
-  @import 'node_modules/bootstrap/scss/alert';
-  @import 'node_modules/bootstrap/scss/progress';
-  @import 'node_modules/bootstrap/scss/media';
-  @import 'node_modules/bootstrap/scss/list-group';
-  @import 'node_modules/bootstrap/scss/close';
-  @import 'node_modules/bootstrap/scss/toasts';
-  @import 'node_modules/bootstrap/scss/modal';
-  @import 'node_modules/bootstrap/scss/tooltip';
-  @import 'node_modules/bootstrap/scss/popover';
-  @import 'node_modules/bootstrap/scss/carousel';
-  @import 'node_modules/bootstrap/scss/spinners';
-  @import 'node_modules/bootstrap/scss/utilities';
+  @import '~bootstrap/scss/custom-forms';
+  @import '~bootstrap/scss/nav';
+  @import '~bootstrap/scss/navbar';
+  @import '~bootstrap/scss/card';
+  @import '~bootstrap/scss/breadcrumb';
+  @import '~bootstrap/scss/pagination';
+  @import '~bootstrap/scss/badge';
+  @import '~bootstrap/scss/jumbotron';
+  @import '~bootstrap/scss/alert';
+  @import '~bootstrap/scss/progress';
+  @import '~bootstrap/scss/media';
+  @import '~bootstrap/scss/list-group';
+  @import '~bootstrap/scss/close';
+  @import '~bootstrap/scss/toasts';
+  @import '~bootstrap/scss/modal';
+  @import '~bootstrap/scss/tooltip';
+  @import '~bootstrap/scss/popover';
+  @import '~bootstrap/scss/carousel';
+  @import '~bootstrap/scss/spinners';
+  @import '~bootstrap/scss/utilities';
 
   .navbar-themed {
     @extend .bg-dark;
     @extend .navbar-dark;
   }
 
-  @import 'node_modules/@forevolve/bootstrap-dark/scss/dark-styles';
+  @import '~@forevolve/bootstrap-dark/scss/dark-styles';
 }

web/ui/react-app/src/themes/_bootstrap_light.scss

@@ -6,14 +6,14 @@
    and https://github.com/ForEvolve/bootstrap-dark/issues/49
 */
 
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/@forevolve/bootstrap-dark/scss/mixins-overrides';
+@import '~bootstrap/scss/mixins';
+@import '~@forevolve/bootstrap-dark/scss/mixins-overrides';
 
 /* Add reboot styles using light theme variables */
-@import 'node_modules/bootstrap/scss/reboot';
+@import '~bootstrap/scss/reboot';
 
 body.bootstrap {
   margin: 0; // 1
@@ -27,41 +27,41 @@ body.bootstrap {
 }
 
 .bootstrap {
-  @import 'node_modules/bootstrap/scss/root';
-  @import 'node_modules/bootstrap/scss/type';
-  @import 'node_modules/bootstrap/scss/images';
-  @import 'node_modules/bootstrap/scss/code';
-  @import 'node_modules/bootstrap/scss/grid';
-  @import 'node_modules/bootstrap/scss/tables';
+  @import '~bootstrap/scss/root';
+  @import '~bootstrap/scss/type';
+  @import '~bootstrap/scss/images';
+  @import '~bootstrap/scss/code';
+  @import '~bootstrap/scss/grid';
+  @import '~bootstrap/scss/tables';
 
-  @import 'node_modules/bootstrap/scss/forms';
-  @import 'node_modules/@forevolve/bootstrap-dark/scss/form-overrides';
+  @import '~bootstrap/scss/forms';
+  @import '~@forevolve/bootstrap-dark/scss/form-overrides';
 
-  @import 'node_modules/bootstrap/scss/buttons';
-  @import 'node_modules/bootstrap/scss/transitions';
-  @import 'node_modules/bootstrap/scss/dropdown';
-  @import 'node_modules/bootstrap/scss/button-group';
-  @import 'node_modules/bootstrap/scss/input-group';
-  @import 'node_modules/bootstrap/scss/custom-forms';
-  @import 'node_modules/bootstrap/scss/nav';
-  @import 'node_modules/bootstrap/scss/navbar';
-  @import 'node_modules/bootstrap/scss/card';
-  @import 'node_modules/bootstrap/scss/breadcrumb';
-  @import 'node_modules/bootstrap/scss/pagination';
-  @import 'node_modules/bootstrap/scss/badge';
-  @import 'node_modules/bootstrap/scss/jumbotron';
-  @import 'node_modules/bootstrap/scss/alert';
-  @import 'node_modules/bootstrap/scss/progress';
-  @import 'node_modules/bootstrap/scss/media';
-  @import 'node_modules/bootstrap/scss/list-group';
-  @import 'node_modules/bootstrap/scss/close';
-  @import 'node_modules/bootstrap/scss/toasts';
-  @import 'node_modules/bootstrap/scss/modal';
-  @import 'node_modules/bootstrap/scss/tooltip';
-  @import 'node_modules/bootstrap/scss/popover';
-  @import 'node_modules/bootstrap/scss/carousel';
-  @import 'node_modules/bootstrap/scss/spinners';
-  @import 'node_modules/bootstrap/scss/utilities';
+  @import '~bootstrap/scss/buttons';
+  @import '~bootstrap/scss/transitions';
+  @import '~bootstrap/scss/dropdown';
+  @import '~bootstrap/scss/button-group';
+  @import '~bootstrap/scss/input-group';
+  @import '~bootstrap/scss/custom-forms';
+  @import '~bootstrap/scss/nav';
+  @import '~bootstrap/scss/navbar';
+  @import '~bootstrap/scss/card';
+  @import '~bootstrap/scss/breadcrumb';
+  @import '~bootstrap/scss/pagination';
+  @import '~bootstrap/scss/badge';
+  @import '~bootstrap/scss/jumbotron';
+  @import '~bootstrap/scss/alert';
+  @import '~bootstrap/scss/progress';
+  @import '~bootstrap/scss/media';
+  @import '~bootstrap/scss/list-group';
+  @import '~bootstrap/scss/close';
+  @import '~bootstrap/scss/toasts';
+  @import '~bootstrap/scss/modal';
+  @import '~bootstrap/scss/tooltip';
+  @import '~bootstrap/scss/popover';
+  @import '~bootstrap/scss/carousel';
+  @import '~bootstrap/scss/spinners';
+  @import '~bootstrap/scss/utilities';
 
   .navbar-themed {
     @extend .bg-light;