feat(admin-ui): update some component and styling related to reactstr…

…ap upgrade

admin-ui/app/components/CustomInput/CustomInput.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import { CustomInput as RSCustomInput } from 'reactstrap'
+import { Input as RSCustomInput } from 'reactstrap'
 
 const CustomInput = (props) => {
   const { className, ...otherProps } = props

admin-ui/app/components/ExtendedDropdown/ExtendedDropdownLink.js

@@ -1,22 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { DropdownContext } from 'reactstrap/es/DropdownContext'
+import { Dropdown } from 'reactstrap'
 
 const ExtendedDropdownLink = (props) => {
   const { children, ...otherProps } = props
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const toggle = () => setDropdownOpen((prevState) => !prevState)
 
   return (
-    <DropdownContext.Consumer>
-      {
-        ({ toggle }) => (
-          <Link { ...otherProps } onClick={ () => { toggle() } }>
-            { children }
-          </Link>
-        )
-      }
-    </DropdownContext.Consumer>        
+    <Dropdown isOpen={dropdownOpen} toggle={toggle} {...otherProps}>
+      { children }
+    </Dropdown>   
   )
 }
+
 ExtendedDropdownLink.propTypes = { ...Link.propTypes }
 ExtendedDropdownLink.defaultProps = { ...Link.defaultProps }
 

admin-ui/app/components/InputGroupAddon/InputGroupAddon.js

@@ -3,7 +3,7 @@ import some from 'lodash/some'
 import includes from 'lodash/includes'
 
 import {
-  InputGroupAddon as BsInputGroupAddon
+  InputGroup as BsInputGroupAddon
 } from 'reactstrap'
 
 const InputGroupAddon = (props) => {

admin-ui/app/components/Theme/ThemeSelector.js

@@ -7,153 +7,153 @@ import {
   CardBody,
   Button,
   FormGroup,
-  CustomInput
+  Input as CustomInput
 } from 'reactstrap'
 
 import 'Styles/components/theme-selector.scss'
 import { Consumer } from './ThemeContext'
 
 class ThemeSelector extends React.Component {
-    static propTypes = {
-      style: PropTypes.string.isRequired,
-      color: PropTypes.string.isRequired,
-      styleOptions: PropTypes.array,
-      styleDisabled: PropTypes.bool,
-      colorOptions: PropTypes.array,
-      onChangeTheme: PropTypes.func,
-    };
-    static defaultProps = {
-      styleOptions: [
-        { name: 'Light', value: 'light' },
-        { name: 'Dark', value: 'dark' },
-        { name: 'Color', value: 'color' }
-      ],
-      colorOptions: [
-        { name: 'Primary', value: '#03a96d' },
-        { name: 'Success', value: 'success' },
-        { name: 'Info', value: 'info' },
-        { name: 'Danger', value: 'danger' },
-        { name: 'Warning', value: 'warning' },
-        { name: 'Indigo', value: 'indigo' },
-        { name: 'Purple', value: 'purple' },
-        { name: 'Pink', value: 'pink' },
-        { name: 'Yellow', value: 'yellow' }
-      ]
-    };
+  static propTypes = {
+    style: PropTypes.string.isRequired,
+    color: PropTypes.string.isRequired,
+    styleOptions: PropTypes.array,
+    styleDisabled: PropTypes.bool,
+    colorOptions: PropTypes.array,
+    onChangeTheme: PropTypes.func,
+  }
+  static defaultProps = {
+    styleOptions: [
+      { name: 'Light', value: 'light' },
+      { name: 'Dark', value: 'dark' },
+      { name: 'Color', value: 'color' }
+    ],
+    colorOptions: [
+      { name: 'Primary', value: '#03a96d' },
+      { name: 'Success', value: 'success' },
+      { name: 'Info', value: 'info' },
+      { name: 'Danger', value: 'danger' },
+      { name: 'Warning', value: 'warning' },
+      { name: 'Indigo', value: 'indigo' },
+      { name: 'Purple', value: 'purple' },
+      { name: 'Pink', value: 'pink' },
+      { name: 'Yellow', value: 'yellow' }
+    ]
+  }
 
-    constructor(props) {
-      super(props)
+  constructor(props) {
+    super(props)
 
-      this.state = {
-        isActive: false,
-        initialStyle: '',
-        initialColor: '',
-      }
+    this.state = {
+      isActive: false,
+      initialStyle: '',
+      initialColor: '',
     }
+  }
 
-    componentDidMount() {
-      this.setState({
-        initialColor: this.props.color,
-        initialStyle: this.props.style
-      })
-    }
+  componentDidMount() {
+    this.setState({
+      initialColor: this.props.color,
+      initialStyle: this.props.style
+    })
+  }
 
-    render() {
-      const rootClass = classNames('theme-config', {
-        'theme-config--active': this.state.isActive,
-      })
+  render() {
+    const rootClass = classNames('theme-config', {
+      'theme-config--active': this.state.isActive,
+    })
 
-      return (
-        <div className={ rootClass }>
-          <Button
-            color="primary"
-            className="theme-config__trigger"
-            onClick={() => { this.setState({ isActive: !this.state.isActive }) }}
-          >
-            <i className="fa fa-paint-brush fa-fw"></i>
-          </Button>
-          <Card className="theme-config__body">
-            <CardBody>
-              <h6 className="text-center mb-3">
-                Configurator
-              </h6>
+    return (
+      <div className={ rootClass }>
+        <Button
+          color="primary"
+          className="theme-config__trigger"
+          onClick={() => { this.setState({ isActive: !this.state.isActive }) }}
+        >
+          <i className="fa fa-paint-brush fa-fw"></i>
+        </Button>
+        <Card className="theme-config__body">
+          <CardBody>
+            <h6 className="text-center mb-3">
+              Configurator
+            </h6>
 
-              <FormGroup>
-                <span className="h6 small mb-2 d-block">
-                  Nav Color
-                </span>
-                {
-                  map(this.props.colorOptions, (option, index) => (
-                    <CustomInput
-                      key={ index }
-                      type="radio"
-                      name="sidebarColor"
-                      id={ `sidebarStyle--${option.value}` }
-                      value={ option.value }
-                      checked={ this.props.color === option.value }
-                      onChange={(ev) => {
-                        if (ev.target.checked) {
-                          this.props.onChangeTheme({
-                            color: option.value
-                          })
-                        }
-                      }}
-                      label={(
-                        <span className="d-flex align-items-center">
-                          { option.name }
-                          <i className={`fa fa-circle ml-auto text-${option.value}`} />
-                        </span>
-                      )}
-                    />
-                  ))
-                }
-              </FormGroup>
-              <FormGroup>
-                <span className="h6 small mb-2 d-block">
-                  Nav Style
-                </span>
-                {
-                  map(this.props.styleOptions, (option, index) => (
-                    <CustomInput
-                      key={ index }
-                      type="radio"
-                      name="sidebarStyle"
-                      id={ `sidebarStyle--${option.value}` }
-                      value={ option.value }
-                      disabled={ this.props.styleDisabled }
-                      checked={ this.props.style === option.value }
-                      onChange={(ev) => {
-                        if (ev.target.checked) {
-                          this.props.onChangeTheme({
-                            style: option.value
-                          })
-                        }
-                      }}
-                      label={ option.name }
-                    />
-                  ))
-                }
-              </FormGroup>
-              <FormGroup className="mb-0">
-                <Button
-                  color="secondary"
-                  outline
-                  className="d-block w-100"
-                  onClick={() => {
-                    this.props.onChangeTheme({
-                      color: this.state.initialColor,
-                      style: this.state.initialStyle
-                    })
-                  }}
-                >
-                  Reset Options
-                </Button>
-              </FormGroup>
-            </CardBody>
-          </Card>
-        </div>
-      )
-    }
+            <FormGroup>
+              <span className="h6 small mb-2 d-block">
+                Nav Color
+              </span>
+              {
+                map(this.props.colorOptions, (option, index) => (
+                  <CustomInput
+                    key={ index }
+                    type="radio"
+                    name="sidebarColor"
+                    id={ `sidebarStyle--${option.value}` }
+                    value={ option.value }
+                    checked={ this.props.color === option.value }
+                    onChange={(ev) => {
+                      if (ev.target.checked) {
+                        this.props.onChangeTheme({
+                          color: option.value
+                        })
+                      }
+                    }}
+                    label={(
+                      <span className="d-flex align-items-center">
+                        { option.name }
+                        <i className={`fa fa-circle ml-auto text-${option.value}`} />
+                      </span>
+                    )}
+                  />
+                ))
+              }
+            </FormGroup>
+            <FormGroup>
+              <span className="h6 small mb-2 d-block">
+                Nav Style
+              </span>
+              {
+                map(this.props.styleOptions, (option, index) => (
+                  <CustomInput
+                    key={ index }
+                    type="radio"
+                    name="sidebarStyle"
+                    id={ `sidebarStyle--${option.value}` }
+                    value={ option.value }
+                    disabled={ this.props.styleDisabled }
+                    checked={ this.props.style === option.value }
+                    onChange={(ev) => {
+                      if (ev.target.checked) {
+                        this.props.onChangeTheme({
+                          style: option.value
+                        })
+                      }
+                    }}
+                    label={ option.name }
+                  />
+                ))
+              }
+            </FormGroup>
+            <FormGroup className="mb-0">
+              <Button
+                color="secondary"
+                outline
+                className="d-block w-100"
+                onClick={() => {
+                  this.props.onChangeTheme({
+                    color: this.state.initialColor,
+                    style: this.state.initialStyle
+                  })
+                }}
+              >
+                Reset Options
+              </Button>
+            </FormGroup>
+          </CardBody>
+        </Card>
+      </div>
+    )
+  }
 }
 
 const ContextThemeSelector = (props) =>

admin-ui/app/components/index.js

@@ -73,9 +73,7 @@ export {
   FormText,
   Input,
   InputGroup,
-  InputGroupButtonDropdown,
   InputGroupText,
-  Jumbotron,
   Label,
   ListGroup,
   ListGroupItem,

admin-ui/app/routes/Apps/Gluu/GluuCustomScriptSearch.js

@@ -22,6 +22,7 @@ function GluuCustomScriptSearch({
           id={typeId}
           defaultValue={scriptType}
           onChange={handler}
+          className="search-select"
         >
           <option>PERSON_AUTHENTICATION</option>
           <option>INTROSPECTION</option>

admin-ui/app/styles/custom/layout.scss

@@ -12,22 +12,22 @@
   padding: 5px 8px;
 }
 
-.badge-primary-darkBlack {
+.bg-primary-darkBlack {
   background-color: #303641;
   color: #ffffff;
 }
 
-.badge-primary-darkBlue {
+.bg-primary-darkBlue {
   background-color: #284461;
   color: #ffffff;
 }
 
-.badge-primary-lightBlue {
+.bg-primary-lightBlue {
   background-color: #9dbde2;
   color: #ffffff;
 }
 
-.badge-primary-lightGreen {
+.bg-primary-lightGreen {
   background-color: #3bc391;
   color: #ffffff;
 }

admin-ui/app/styles/main.scss

@@ -311,3 +311,8 @@ body {
 .block-ui-overlay {
   border-radius: 12px;
 }
+
+.search-select {
+  font-size: 14px;
+  width: 210px;
+}

admin-ui/plugins/admin/components/Roles/RoleAddDialogForm.js

@@ -38,7 +38,7 @@ const RoleAddDialogForm = ({ handler, modal, onAccept }) => {
   }
   return (
     <>
-      <Modal isOpen={modal} toggle={handler} className="modal-outline-primary">
+      <Modal isOpen={modal} toggle={handler}>
         <ModalHeader toggle={handler}>
           <i
             style={{ color: 'green' }}