SONAR-10513 Add readOnly state to select list (and drop unused styling)

diff --git a/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx b/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
index f1a0b2f7a48f341d92b045492865595458fb883d..a2771ddcc1b53bcc45c1a23476ab109039d4fbaa 100644 (file)
--- a/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
+++ b/server/sonar-web/src/main/js/components/SelectList/SelectList.tsx
@@ -40,6 +40,7 @@ interface Props {
   onSearch: (query: string, tab: Filter) => Promise<void>;
   onSelect: (element: string) => Promise<void>;
   onUnselect: (element: string) => Promise<void>;
+  readOnly?: boolean;
   renderElement: (element: string) => React.ReactNode;
   selectedElements: string[];
 }
@@ -121,6 +122,7 @@ export default class SelectList extends React.PureComponent<Props, State> {
           filter={this.getFilter()}
           onSelect={this.props.onSelect}
           onUnselect={this.props.onUnselect}
+          readOnly={this.props.readOnly}
           renderElement={this.props.renderElement}
           selectedElements={this.props.selectedElements}
         />

diff --git a/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx b/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
index 124b0814b58c60867e6529ed4b53ed2e24fd47fa..f00896867bb0e37503378de91b9d5355659bc9ca 100644 (file)
--- a/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
+++ b/server/sonar-web/src/main/js/components/SelectList/SelectListListContainer.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
 import { Filter } from './SelectList';
 import SelectListListElement from './SelectListListElement';
 import Checkbox from '../controls/Checkbox';
@@ -31,6 +32,7 @@ interface Props {
   filter: Filter;
   onSelect: (element: string) => Promise<void>;
   onUnselect: (element: string) => Promise<void>;
+  readOnly?: boolean;
   renderElement: (element: string) => React.ReactNode;
   selectedElements: string[];
 }
@@ -58,7 +60,7 @@ export default class SelectListListContainer extends React.PureComponent<Props,
   };
 
   isDisabled = (element: string): boolean => {
-    return this.props.disabledElements.includes(element);
+    return this.props.readOnly || this.props.disabledElements.includes(element);
   };
 
   isSelected = (element: string): boolean => {
@@ -79,13 +81,13 @@ export default class SelectListListContainer extends React.PureComponent<Props,
   };
 
   renderBulkSelector() {
-    const { elements, selectedElements } = this.props;
+    const { elements, readOnly, selectedElements } = this.props;
     return (
       <>
         <li>
           <Checkbox
             checked={selectedElements.length > 0}
-            disabled={this.state.loading}
+            disabled={this.state.loading || readOnly}
             onCheck={this.handleBulkChange}
             thirdState={selectedElements.length > 0 && elements.length !== selectedElements.length}>
             <span className="big-spacer-left">
@@ -110,7 +112,7 @@ export default class SelectListListContainer extends React.PureComponent<Props,
     });
 
     return (
-      <div className="select-list-list-container spacer-top">
+      <div className={classNames('select-list-list-container spacer-top')}>
         <ul className="menu">
           {allowBulkSelection &&
             elements.length > 0 &&

diff --git a/server/sonar-web/src/main/js/components/SelectList/styles.css b/server/sonar-web/src/main/js/components/SelectList/styles.css
index 6003cb7ad35445ae442b497ce2b4cb67fe12d342..074aa7f316b2ec1c18a635fce9d979b8f2e116ae 100644 (file)
--- a/server/sonar-web/src/main/js/components/SelectList/styles.css
+++ b/server/sonar-web/src/main/js/components/SelectList/styles.css
@@ -37,58 +37,6 @@
   overflow: auto;
 }
 
-.select-list-list-container.loading .select-list-list {
-  visibility: hidden;
-}
-
-.select-list-list-container-readonly {
-  border: none;
-}
-
-.select-list-list-container-readonly .select-list-list {
-  overflow: visible;
-}
-
-.select-list-list-container-readonly .select-list-list > li {
-  border: none;
-}
-
-.select-list-list {
-  overflow-x: hidden;
-}
-
-.select-list-list > li {
-  position: relative;
-  display: block;
-  margin-top: -1px;
-  padding: 5px 10px;
-  border-top: 1px solid #e0e0e0;
-  color: var(--gray40);
-  transition: transform 0.3s ease;
-}
-
-.select-list-list > li.removed {
-  transform: translateX(100%);
-}
-
-.select-list-list > li.added {
-  transform: translateX(-100%);
-}
-
-.select-list-list > li.progress {
-  background: url(../../images/loading.gif) no-repeat 10px 5px;
-}
-
-.select-list-list > li.progress .select-list-list-checkbox {
-  visibility: hidden;
-}
-
-.select-list-list > li.empty-message {
-  padding: 6px 5px;
-  border: 1px solid #ddd;
-  background-color: var(--gray94);
-}
-
 .select-list-list-checkbox i {
   display: inline-block;
   vertical-align: middle;
@@ -107,80 +55,3 @@
   display: inline-block;
   vertical-align: middle;
 }
-
-.select-list-control {
-  height: 27px;
-}
-
-.select-list-check-control {
-  float: left;
-}
-
-.select-list-check-control.disabled {
-  filter: alpha(opacity=60);
-  opacity: 0.6;
-}
-
-.select-list-check-control.disabled .select-list-control-button {
-  color: #bbb;
-  border-color: #ddd;
-  background: #ebebeb;
-  cursor: not-allowed;
-}
-
-.select-list-control-button {
-  position: relative;
-  z-index: var(--normalZIndex);
-  display: inline-block;
-  vertical-align: middle;
-  height: 27px;
-  line-height: 25px;
-  padding: 0 12px;
-  box-sizing: border-box;
-  border: 1px solid var(--darkBlue);
-  color: var(--darkBlue);
-  font-size: var(--smallFontSize);
-  text-align: center;
-  cursor: pointer;
-  transition: none;
-}
-
-.select-list-control-button:first-child {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.select-list-control-button:last-child {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.select-list-control-button:hover {
-  color: var(--darkBlue);
-}
-
-.select-list-control-button:active,
-.select-list-control-button.active {
-  z-index: var(--aboveNormalZIndex);
-  background-color: var(--darkBlue);
-  color: #fff;
-  font-weight: 600;
-}
-
-.select-list-control-button + .select-list-control-button {
-  margin-left: -1px;
-}
-
-.select-list-search-control {
-  position: relative;
-  float: left;
-  height: 27px;
-  margin-left: 16px;
-}
-
-.select-list-wrapper {
-  height: 30vw;
-  border-top: 1px solid var(--barBorderColor);
-  border-bottom: 1px solid var(--barBorderColor);
-  overflow: auto;
-}

diff --git a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
index 2c174010ac9d41fb2c5b64296a1e726fa816c063..42ebbe7da1f3ccf812737029f40c36af4707332e 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Checkbox.tsx
@@ -54,7 +54,8 @@ export default class Checkbox extends React.PureComponent<Props> {
       return (
         <a
           className={classNames('link-checkbox', this.props.className, {
-            'text-muted': this.props.disabled
+            'text-muted': this.props.disabled,
+            disabled: this.props.disabled
           })}
           href="#"
           id={this.props.id}