Upgrade to react-bootstrap V2 with Bootstrap V5 (#1394)

The upgrade to bootstrap V5 required migrating from Less to Sass.
All CSS was updated to use variables instead of color literals,
leading to all colors being defined in _variables.scss.
Similar colors were also removed in order to improve consistency across
different pages and components.

.gitignore

@@ -30,6 +30,7 @@ i18n.json
 !i18n.json.default.json
 test/test.config.js
 app/initialize.js
+assets/scss/_variable_overrides.scss
 .module-cache
 test/nightwatch_tests/nightwatch.json
 test/nightwatch_tests/reports/*
@@ -45,5 +46,6 @@ test/dashboard.assets
 # test coverage dir
 coverage
 
-# Jetbrains IDE
+# IDEs
 .idea/
+.vscode

CONTRIBUTING.md

@@ -46,8 +46,7 @@ Fixes apache/couchdb#XXX (if there is a CouchDB project GH Issue)
 Before you submit the Pull Request, please [run our test suite](#tests.md) and make sure that it passes.
 
 We regularly check the PR list for Fauxton and should get back
-to you with a code review. If no one has responded to you yet, you can find us on [Freenode IRC in #couchdb-dev][8].
-Ping **garren**, **robertkowalski** or **michellep** though anyone in the room should be able to help you.
+to you with a code review.
 
 ## Get in Touch
 

app/addons/activetasks/__tests__/components.test.js

@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 import TableHeader from '../components/tableheader';
-import FilterTabs from '../components/filtertabs';
+import {ActiveTasksFilterTabs, ActiveTasksFilter} from '../components/filtertabs';
 import React from "react";
 import {mount} from 'enzyme';
 import sinon from "sinon";
@@ -31,7 +31,7 @@ describe('Active Tasks -- Components', () => {
  radioTexts.forEach((text) => {
  let spy = sinon.spy();
  const tabs = mount(
- <FilterTabs
+ <ActiveTasksFilterTabs
  onRadioClick={spy}
  selectedRadio={"All Tasks"}
  radioNames={radioTexts}
@@ -46,12 +46,12 @@ describe('Active Tasks -- Components', () => {
  it('should trigger change to search term', () => {
  const spy = sinon.spy();
  const tabs = mount(
- <FilterTabs
+ <ActiveTasksFilter
  onSearch={spy}
- selectedRadio={"All Tasks"}
  />
  );
- tabs.find('.searchbox').simulate('change', {target: {value: 'searching'}});
+
+ tabs.find('input.form-control[name="search"]').simulate('change', {target: {value: 'searching'}});
  expect(spy.calledOnce).toBeTruthy();
  });
  });
@@ -64,7 +64,6 @@ describe('Active Tasks -- Components', () => {
  ];
 
  it('should trigger change to radio buttons', () => {
-
  tableTexts.forEach((text) => {
  let spy = sinon.spy();
  const table = mount(
@@ -77,7 +76,7 @@ describe('Active Tasks -- Components', () => {
  </table>
  );
 
- table.find(`.${text}`).simulate('click');
+ table.find(`.header-${text}`).simulate('click');
  expect(spy.calledOnce).toBeTruthy();
  });
  });

app/addons/activetasks/assets/scss/activetasks.scss

@@ -0,0 +1,89 @@
+// 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:https://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.
+
+@import '../../../../../assets/scss/variables';
+@import '../../../../../assets/scss/mixins';
+
+#active-tasks-page {
+ overflow: auto;
+
+ .inner {
+ overflow: auto;
+ height: 100%;
+ }
+
+ .table-active-tasks {
+ font-size: 0.875rem;
+ th {
+ cursor: pointer;
+
+ &.header-type {
+ width: 10%;
+ }
+
+ &.header-database {
+ width: 30%;
+ }
+
+ &.header-tarted-on {
+ width: 13%;
+ }
+
+ &.header-updated-on {
+ width: 13%;
+ }
+
+ &.header-pid {
+ width: 10%;
+ }
+
+ &.header-progress {
+ width: 23%;
+ }
+
+ .fonticon-up-dir,
+ .fonticon-down-dir {
+ color: $cf-brand-highlight;
+ }
+ }
+
+ p.multiline-active-tasks-message {
+ margin: 0;
+ line-height: 1.3;
+ margin-bottom: 3px;
+
+ &.time:nth-child(2) {
+ color: $cf-text01-muted;
+ }
+
+ &.to-from-database {
+ &:first-child {
+ border-bottom: 1px solid $cf-border-color01;
+ }
+ padding-bottom: 15px;
+ }
+ }
+ }
+
+ div#active-tasks-search {
+ margin-top:1.5rem;
+ padding: 0 30px;
+ }
+
+ .component-tab-element-wrapper {
+ #active-tasks-search-box {
+ display: inline;
+ width: 220px;
+ margin-left:8px;
+ }
+ }
+}

app/addons/activetasks/base.js

@@ -12,7 +12,7 @@
 
 import FauxtonAPI from "../../core/api";
 import Activetasks from "./routes";
-import "./assets/less/activetasks.less";
+import "./assets/scss/activetasks.scss";
 import reducers from './reducers';
 
 Activetasks.initialize = function () {

app/addons/activetasks/components/controller.js

@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 import React from 'react';
-import ActiveTasksFilterTabs from './filtertabs';
+import {ActiveTasksFilterTabs, ActiveTasksFilter} from './filtertabs';
 import ActiveTaskTable from './table';
 
 export default class ActiveTasksController extends React.Component {
@@ -42,8 +42,16 @@ export default class ActiveTasksController extends React.Component {
  <ActiveTasksFilterTabs
  searchTerm={searchTerm}
  selectedRadio={selectedRadio}
- onSearch={setSearchTerm}
  onRadioClick={this.switchTab}/>
+
+ <div className="row">
+ <div id="active-tasks-search" className="col-12 col-md-6">
+ <ActiveTasksFilter
+ onSearch={setSearchTerm}
+ />
+ </div>
+ </div>
+
  <ActiveTaskTable
  isLoading={isLoading}
  tasks={tasks}